Firing properly but no data returned on extended fetch

New modules and InfiniteScroll init
add timing & animation details to stats-world
2023-06-24 17:47:18 +08:00 · 2023-06-23 18:56:26 +08:00 · 2023-05-28 09:11:37 -06:00 · 2023-05-28 07:21:35 -06:00 · 2023-05-28 07:10:00 -06:00 · 2023-05-27 17:48:41 -06:00
42 changed files with 4712 additions and 3172 deletions
--- a/README.md
+++ b/README.md
@@ -81,6 +81,8 @@ See https://tea.xyz

 ## Other

+### Reference Material
+
 ```
 // reference material from https://github.com/trentlarson/endorser-mobile/blob/8dc8e0353e0cc80ffa7ed89ded15c8b0da92726b/src/utility/idUtility.ts#L83

@@ -183,3 +185,9 @@ export const createAndStoreIdentifier = async (mnemonicPassword) => {
  return importAndStoreIdentifier(mnemonic, mnemonicPassword, false, [])
 }
 ```
+
+## Kudos
+
+* [Máximo Fernández](https://medium.com/@maxfarenas) for the 3D [code](https://github.com/maxfer03/vue-three-ns) and [explanatory post](https://medium.com/nicasource/building-an-interactive-web-portfolio-with-vue-three-js-part-three-implementing-three-js-452cb375ef80)
+* [Many libraries]() such as Veramo.io, Vuejs.org, threejs
+* [Bush 3D model](https://sketchfab.com/3d-models/lupine-plant-bf30f1110c174d4baedda0ed63778439)
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -12,50 +12,54 @@
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/vue-fontawesome": "^3.0.3",
-    "@pvermeer/dexie-encrypted-addon": "^2.0.5",
-    "@veramo/core": "^5.1.2",
-    "@veramo/credential-w3c": "^5.1.4",
-    "@veramo/data-store": "^5.1.2",
+    "@pvermeer/dexie-encrypted-addon": "^3.0.0",
+    "@tweenjs/tween.js": "^21.0.0",
+    "@veramo/core": "^5.2.0",
+    "@veramo/credential-w3c": "^5.2.0",
+    "@veramo/data-store": "^5.2.0",
    "@veramo/did-manager": "^5.1.2",
    "@veramo/did-provider-ethr": "^5.1.2",
-    "@veramo/did-resolver": "^5.1.2",
+    "@veramo/did-resolver": "^5.2.0",
    "@veramo/key-manager": "^5.1.2",
-    "@vueuse/core": "^9.13.0",
+    "@vueuse/core": "^10.2.0",
    "@zxing/text-encoding": "^0.9.0",
-    "axios": "^1.3.4",
+    "axios": "^1.4.0",
    "buffer": "^6.0.3",
    "class-transformer": "^0.5.1",
-    "core-js": "^3.29.1",
-    "dexie": "^3.2.3",
+    "core-js": "^3.31.0",
+    "dexie": "^3.2.4",
    "dexie-export-import": "^4.0.7",
-    "did-jwt": "^6.11.5",
-    "ethereum-cryptography": "^1.2.0",
+    "did-jwt": "^7.2.2",
+    "ethereum-cryptography": "^2.0.0",
    "ethereumjs-util": "^7.1.5",
    "ethr-did-resolver": "^8.0.0",
-    "js-generate-password": "^0.1.7",
+    "js-generate-password": "^0.1.9",
    "localstorage-slim": "^2.4.0",
    "luxon": "^3.3.0",
-    "merkletreejs": "^0.3.9",
+    "merkletreejs": "^0.3.10",
    "moment": "^2.29.4",
    "papaparse": "^5.4.1",
    "pina": "^0.20.2204228",
    "pinia-plugin-persistedstate": "^3.1.0",
-    "ramda": "^0.28.0",
-    "readable-stream": "^4.3.0",
+    "qr-code-generator-vue3": "^1.4.21",
+    "ramda": "^0.29.0",
+    "readable-stream": "^4.4.0",
    "reflect-metadata": "^0.1.13",
    "register-service-worker": "^1.7.2",
-    "vue": "^3.2.47",
+    "three": "^0.153.0",
+    "vue": "^3.3.4",
    "vue-axios": "^3.5.2",
    "vue-class-component": "^8.0.0-0",
-    "vue-facing-decorator": "^2.1.19",
+    "vue-facing-decorator": "^2.1.20",
    "vue-property-decorator": "^9.1.2",
-    "vue-router": "^4.1.6",
-    "web-did-resolver": "^2.0.22"
+    "vue-router": "^4.2.2",
+    "web-did-resolver": "^2.0.24"
  },
  "devDependencies": {
-    "@types/ramda": "^0.28.23",
-    "@typescript-eslint/eslint-plugin": "^5.57.0",
-    "@typescript-eslint/parser": "^5.57.0",
+    "@types/ramda": "^0.29.2",
+    "@types/three": "^0.152.1",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
    "@vue/cli-plugin-babel": "~5.0.8",
    "@vue/cli-plugin-eslint": "~5.0.8",
    "@vue/cli-plugin-pwa": "~5.0.8",
@@ -63,15 +67,15 @@
    "@vue/cli-plugin-typescript": "~5.0.8",
    "@vue/cli-plugin-vuex": "~5.0.8",
    "@vue/cli-service": "~5.0.8",
-    "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/eslint-config-typescript": "^11.0.3",
    "autoprefixer": "^10.4.14",
-    "eslint": "^8.37.0",
+    "eslint": "^8.43.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.10.0",
-    "postcss": "^8.4.21",
-    "prettier": "^2.8.7",
-    "tailwindcss": "^3.3.1",
-    "typescript": "~5.0.3"
+    "eslint-plugin-vue": "^9.15.0",
+    "postcss": "^8.4.24",
+    "prettier": "^2.8.8",
+    "tailwindcss": "^3.3.2",
+    "typescript": "~5.1.3"
  }
 }
--- a/project.task.yaml
+++ b/project.task.yaml
@@ -0,0 +1,74 @@
+
+- top screens from img/screens.pdf milestone:2 :
+  - view all :
+    - add infinite scroll assignee:matthew
+  blocks: ref:https://raw.githubusercontent.com/trentlarson/lives-of-gifts/master/project.yaml#kickstarter%20for%20time
+
+- allow type annotations in World.js & landmarks.js (since we get this error: "Types are not supported by current JavaScript version")
+- replace user-affecting console.log & console.error with error messages (eg. catches)
+
+- stats v1 :
+  - 01 show numeric stats
+  - 01 link to world for specific stats
+
+- contacts v1 :
+  - 01 Import contact info a la QR code.
+  - 01 Import all the non-sensitive data (ie. contacts & settings).
+  - .2 move all "identity" references to temporary account access
+
+- contacts v+ :
+  - .2 show error to user when adding a duplicate contact
+  - parse input more robustly (with CSV lib and not commas)
+
+- refactor UI :
+  - .5 Alerts show at the top and can be missed, eg. account data download
+  - 01 Change alerts into a component (to cut down duplicate code)
+  - 01 Change "nav" tabs across the bottom into a component (eliminating duplicate code).
+  - .5 Fix how icons show on top of bottom bar on ContactAmounts page
+
+- show pop-up confirming that settings & contacts have been downloaded
+
+- Ensure each action sent to the server has a confirmation.
+
+- discover screen
+
+- .5 customize favicon
+- .5 make advanced features harder to access; advanced build?
+
+- Release Minimum Viable Product :
+  - Turn off stats-world or ensure it's usable (eg. cannot zoom out too far and lose world, cannot screenshot).
+  - Add disclaimers.
+  - Switch default server to the public server.
+  - Deploy to a server.
+  - Ensure public server has limits that work for group adoption.
+  - Test PWA features on Android and iOS.
+
+- Stats :
+  - 01 point out user's location on the world
+  - 01 present a credential selected from the stats
+  - 04 show gives spreading to other places
+  - badge for most gives/receives/confirms per day/week/month
+  - badge for amount given/offered to your project
+  - set a goal of given/offers
+
+- linking between projects or plans :
+  - terminology:
+    - Fulfills, Feeds, contributes to, supplies, boosts, advances
+    - Precedes, comes before, is sought by -- vs follows, seeks, builds on ("contributes to" isn't specific enough, "succeeds" has different, possibly confusing meaning)
+
+- automated tests, eg. cypress
+
+- Notifications (wake on the phone, push notifications)
+
+- Connect with phone contacts
+
+- Multiple identities
+
+- Peer DID
+
+- DIDComm
+
+- Write to or read from a different ledger (eg. private ACDC, attest.sh)
+
+- v video for multiple identities https://youtu.be/p8L87AeD76w
+- v video for adding time to contacts https://youtu.be/7Yylczevp10
--- a/project.yaml
+++ b/project.yaml
@@ -1,46 +0,0 @@
- top screens from img/screens.pdf milestone:2 :
-  - view all :
-    - add infinite scroll assignee:matthew
-  blocks: ref:https://raw.githubusercontent.com/trentlarson/lives-of-gifts/master/project.yaml#kickstarter%20for%20time
-
- replace user-affecting console.logs with error messages (eg. catches)
-
- contacts v1 :
-  - produce a video assignee:trent
-  - .2 warn about amounts when you cannot see them
-  - .1 remove 'copy' until it works
-  - .5 switch to prod server
-  - .5 Add page to show seed.
-  - 01 Provide a way to import the non-sensitive data.
-  - 01 Provide way to share your contact info.
-  - .2 move all "identity" references to temporary account access
-  - .5 make deploy for give-only features
-  - .5 get 'copy' to work on account page
-
- contacts v+ :
-  - .5 make advanced "show/hide amounts" button into a nice UI toggle
-  - .2 show error to user when adding a duplicate contact
-  - parse input more robustly (with CSV lib and not commas)
-
- refactor UI :
-  - .5 Alerts show at the top and can be missed, eg. account data download
-  - 01 Change alerts into a component (to cut down duplicate code)
-  - 01 Code for "nav" tabs across the bottom is duplicated on each page.
-  - .2 Add "copied" feedback when they click "copy" on /account
-  - .5 Fix how icons show on top of bottom bar on ContactAmounts page
-
- commit screen
-
- discover screen
-
- backup all data
-
- Next Viable Product afterward
-
- Connect with phone contacts
-
- Multiple identities
-
- Peer DID
-
- DIDComm
--- a/public/img/textures/forest-floor.png
+++ b/public/img/textures/forest-floor.png
--- a/public/models/lupine_plant/license.txt
+++ b/public/models/lupine_plant/license.txt
@@ -0,0 +1,11 @@
+Model Information:
+* title:	Lupine Plant
+* source:	https://sketchfab.com/3d-models/lupine-plant-bf30f1110c174d4baedda0ed63778439
+* author:	rufusrockwell (https://sketchfab.com/rufusrockwell)
+
+Model License:
+* license type:	CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
+* requirements:	Author must be credited. Commercial use is allowed.
+
+If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
+This work is based on "Lupine Plant" (https://sketchfab.com/3d-models/lupine-plant-bf30f1110c174d4baedda0ed63778439) by rufusrockwell (https://sketchfab.com/rufusrockwell) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
--- a/public/models/lupine_plant/scene.bin
+++ b/public/models/lupine_plant/scene.bin
--- a/public/models/lupine_plant/scene.gltf
+++ b/public/models/lupine_plant/scene.gltf
@@ -0,0 +1,229 @@
+{
+  "accessors": [
+    {
+      "bufferView": 2,
+      "componentType": 5126,
+      "count": 2759,
+      "max": [
+        41.3074951171875,
+        40.37548828125,
+        87.85917663574219
+      ],
+      "min": [
+        -35.245540618896484,
+        -36.895416259765625,
+        -0.9094290137290955
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 33108,
+      "componentType": 5126,
+      "count": 2759,
+      "max": [
+        0.9999382495880127,
+        0.9986748695373535,
+        0.9985831379890442
+      ],
+      "min": [
+        -0.9998949766159058,
+        -0.9975876212120056,
+        -0.411094069480896
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 3,
+      "componentType": 5126,
+      "count": 2759,
+      "max": [
+        0.9987699389457703,
+        0.9998998045921326,
+        0.9577858448028564,
+        1.0
+      ],
+      "min": [
+        -0.9987726807594299,
+        -0.9990445971488953,
+        -0.999801516532898,
+        1.0
+      ],
+      "type": "VEC4"
+    },
+    {
+      "bufferView": 1,
+      "componentType": 5126,
+      "count": 2759,
+      "max": [
+        1.0061479806900024,
+        0.9993550181388855
+      ],
+      "min": [
+        0.00279300007969141,
+        0.0011620000004768372
+      ],
+      "type": "VEC2"
+    },
+    {
+      "bufferView": 0,
+      "componentType": 5125,
+      "count": 6378,
+      "type": "SCALAR"
+    }
+  ],
+  "asset": {
+    "extras": {
+      "author": "rufusrockwell (https://sketchfab.com/rufusrockwell)",
+      "license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
+      "source": "https://sketchfab.com/3d-models/lupine-plant-bf30f1110c174d4baedda0ed63778439",
+      "title": "Lupine Plant"
+    },
+    "generator": "Sketchfab-12.68.0",
+    "version": "2.0"
+  },
+  "bufferViews": [
+    {
+      "buffer": 0,
+      "byteLength": 25512,
+      "name": "floatBufferViews",
+      "target": 34963
+    },
+    {
+      "buffer": 0,
+      "byteLength": 22072,
+      "byteOffset": 25512,
+      "byteStride": 8,
+      "name": "floatBufferViews",
+      "target": 34962
+    },
+    {
+      "buffer": 0,
+      "byteLength": 66216,
+      "byteOffset": 47584,
+      "byteStride": 12,
+      "name": "floatBufferViews",
+      "target": 34962
+    },
+    {
+      "buffer": 0,
+      "byteLength": 44144,
+      "byteOffset": 113800,
+      "byteStride": 16,
+      "name": "floatBufferViews",
+      "target": 34962
+    }
+  ],
+  "buffers": [
+    {
+      "byteLength": 157944,
+      "uri": "scene.bin"
+    }
+  ],
+  "images": [
+    {
+      "uri": "textures/lambert2SG_baseColor.png"
+    },
+    {
+      "uri": "textures/lambert2SG_normal.png"
+    }
+  ],
+  "materials": [
+    {
+      "alphaCutoff": 0.2,
+      "alphaMode": "MASK",
+      "doubleSided": true,
+      "name": "lambert2SG",
+      "normalTexture": {
+        "index": 1
+      },
+      "pbrMetallicRoughness": {
+        "baseColorTexture": {
+          "index": 0
+        },
+        "metallicFactor": 0.0
+      }
+    }
+  ],
+  "meshes": [
+    {
+      "name": "Object_0",
+      "primitives": [
+        {
+          "attributes": {
+            "NORMAL": 1,
+            "POSITION": 0,
+            "TANGENT": 2,
+            "TEXCOORD_0": 3
+          },
+          "indices": 4,
+          "material": 0,
+          "mode": 4
+        }
+      ]
+    }
+  ],
+  "nodes": [
+    {
+      "children": [
+        1
+      ],
+      "matrix": [
+        1.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        2.220446049250313e-16,
+        -1.0,
+        0.0,
+        0.0,
+        1.0,
+        2.220446049250313e-16,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        1.0
+      ],
+      "name": "Sketchfab_model"
+    },
+    {
+      "children": [
+        2
+      ],
+      "name": "LupineSF.obj.cleaner.materialmerger.gles"
+    },
+    {
+      "mesh": 0,
+      "name": "Object_2"
+    }
+  ],
+  "samplers": [
+    {
+      "magFilter": 9729,
+      "minFilter": 9987,
+      "wrapS": 10497,
+      "wrapT": 10497
+    }
+  ],
+  "scene": 0,
+  "scenes": [
+    {
+      "name": "Sketchfab_Scene",
+      "nodes": [
+        0
+      ]
+    }
+  ],
+  "textures": [
+    {
+      "sampler": 0,
+      "source": 0
+    },
+    {
+      "sampler": 0,
+      "source": 1
+    }
+  ]
+}
--- a/public/models/lupine_plant/textures/lambert2SG_baseColor.png
+++ b/public/models/lupine_plant/textures/lambert2SG_baseColor.png
--- a/public/models/lupine_plant/textures/lambert2SG_normal.png
+++ b/public/models/lupine_plant/textures/lambert2SG_normal.png
--- a/src/components/InfiniteScroll.vue
+++ b/src/components/InfiniteScroll.vue
@@ -0,0 +1,67 @@
+<template>
+  <div ref="scrollContainer">
+    <slot />
+    <div ref="sentinel" style="height: 1px"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Prop, Vue } from "vue-facing-decorator";
+
+@Component
+export default class InfiniteScroll extends Vue {
+  @Prop({ default: 200 })
+  readonly distance!: number;
+  private observer!: IntersectionObserver;
+  private isInitialRender = true;
+
+  updated() {
+    console.log("updated()");
+    if (!this.observer) {
+      const options = {
+        root: null,
+        rootMargin: `0px 0px ${this.distance}px 0px`,
+        threshold: 1.0,
+      };
+      this.observer = new IntersectionObserver(
+        this.handleIntersection,
+        options
+      );
+      this.observer.observe(this.$refs.sentinel as HTMLElement);
+    }
+  }
+
+  beforeUnmount() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+
+  @Emit("reached-bottom")
+  handleIntersection(entries: IntersectionObserverEntry[]) {
+    console.log("handleIntersection");
+    const entry = entries[0];
+    if (entry.isIntersecting) {
+      const distance = entry.boundingClientRect.top - entry.rootBounds.top;
+      console.log("distance: ", distance);
+      console.log("intersectionRatio", entry.intersectionRatio);
+      const sentinelPosition = (
+        this.$refs.sentinel as HTMLElement
+      ).getBoundingClientRect();
+      // Access sentinel element's position properties
+      const sentinelTop = sentinelPosition.top;
+      console.log("sentinelTop", sentinelTop);
+      const scrollContainer = (
+        this.$refs.scrollContainer as HTMLElement
+      ).getBoundingClientRect();
+      // Access scrollContainer properties or perform any necessary actions
+      console.log("scrollContainerTop", scrollContainer);
+      return true;
+    }
+    return false;
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped></style>
--- a/src/components/World/World.js
+++ b/src/components/World/World.js
@@ -0,0 +1,110 @@
+// from https://medium.com/nicasource/building-an-interactive-web-portfolio-with-vue-three-js-part-three-implementing-three-js-452cb375ef80
+
+import * as TWEEN from "@tweenjs/tween.js";
+import * as THREE from "three";
+
+import { createCamera } from "./components/camera.js";
+import { createLights } from "./components/lights.js";
+import { createScene } from "./components/scene.js";
+import { loadLandmarks } from "./components/objects/landmarks.js";
+import { createTerrain } from "./components/objects/terrain.js";
+import { Loop } from "./systems/Loop.js";
+import { Resizer } from "./systems/Resizer.js";
+import { createControls } from "./systems/controls.js";
+import { createRenderer } from "./systems/renderer.js";
+
+const COLOR1 = "#dddddd";
+const COLOR2 = "#0055aa";
+
+class World {
+  constructor(container, vue) {
+    this.PLATFORM_BORDER = 5;
+    this.PLATFORM_EDGE_FOR_UNKNOWNS = 10;
+    this.PLATFORM_SIZE = 100; // note that the loadLandmarks calculations may still assume 100
+
+    this.update = this.update.bind(this);
+
+    this.vue = vue;
+
+    // Instances of camera, scene, and renderer
+    this.camera = createCamera();
+    this.scene = createScene(COLOR2);
+    this.renderer = createRenderer();
+
+    // necessary for models, says https://threejs.org/docs/index.html#examples/en/loaders/GLTFLoader
+    this.renderer.outputColorSpace = THREE.SRGBColorSpace;
+
+    this.light = null;
+    this.lights = [];
+    this.bushes = [];
+
+    // Initialize Loop
+    this.loop = new Loop(this.camera, this.scene, this.renderer);
+
+    container.append(this.renderer.domElement);
+
+    // Orbit Controls
+    const controls = createControls(this.camera, this.renderer.domElement);
+
+    // Light Instance, with optional light helper
+    const { light } = createLights(COLOR1);
+
+    // Terrain Instance
+    const terrain = createTerrain({
+      color: COLOR1,
+      height: this.PLATFORM_SIZE + this.PLATFORM_BORDER * 2,
+      width:
+        this.PLATFORM_SIZE +
+        this.PLATFORM_BORDER * 2 +
+        this.PLATFORM_EDGE_FOR_UNKNOWNS * 2,
+    });
+
+    this.loop.updatables.push(controls);
+    this.loop.updatables.push(light);
+    this.loop.updatables.push(terrain);
+
+    this.scene.add(light, terrain);
+
+    loadLandmarks(vue, this, this.scene, this.loop);
+
+    requestAnimationFrame(this.update);
+
+    // Responsive handler
+    const resizer = new Resizer(container, this.camera, this.renderer);
+    resizer.onResize = () => {
+      this.render();
+    };
+  }
+
+  update(time) {
+    TWEEN.update(time);
+    this.lights.forEach((light) => {
+      light.updateMatrixWorld();
+      light.target.updateMatrixWorld();
+    });
+    this.lights.forEach((bush) => {
+      bush.updateMatrixWorld();
+    });
+    requestAnimationFrame(this.update);
+  }
+
+  render() {
+    // draw a single frame
+    this.renderer.render(this.scene, this.camera);
+  }
+
+  // Animation handlers
+  start() {
+    this.loop.start();
+  }
+
+  stop() {
+    this.loop.stop();
+  }
+
+  setExposedWorldProperties(key, value) {
+    this.vue.setWorldProperty(key, value);
+  }
+}
+
+export { World };
--- a/src/components/World/components/camera.js
+++ b/src/components/World/components/camera.js
@@ -0,0 +1,19 @@
+import { PerspectiveCamera } from "three";
+
+function createCamera() {
+  const camera = new PerspectiveCamera(
+    35, // fov = Field Of View
+    1, // aspect ratio (dummy value)
+    0.1, // near clipping plane
+    350 // far clipping plane
+  );
+
+  // move the camera back so we can view the scene
+  camera.position.set(0, 100, 200);
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  camera.tick = () => {};
+
+  return camera;
+}
+
+export { createCamera };
--- a/src/components/World/components/lights.js
+++ b/src/components/World/components/lights.js
@@ -0,0 +1,14 @@
+import { DirectionalLight, DirectionalLightHelper } from "three";
+
+function createLights(color) {
+  const light = new DirectionalLight(color, 4);
+  const lightHelper = new DirectionalLightHelper(light, 0);
+  light.position.set(60, 100, 30);
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  light.tick = () => {};
+
+  return { light, lightHelper };
+}
+
+export { createLights };
--- a/src/components/World/components/objects/landmarks.js
+++ b/src/components/World/components/objects/landmarks.js
@@ -0,0 +1,248 @@
+import axios from "axios";
+import * as R from "ramda";
+import * as THREE from "three";
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader";
+import * as SkeletonUtils from "three/addons/utils/SkeletonUtils";
+import * as TWEEN from "@tweenjs/tween.js";
+import { accountsDB, db } from "@/db";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { accessToken } from "@/libs/crypto";
+
+const ANIMATION_DURATION_SECS = 10;
+const ENDORSER_ENTITY_PREFIX = "https://endorser.ch/entity/";
+
+export async function loadLandmarks(vue, world, scene, loop) {
+  vue.setWorldProperty("animationDurationSeconds", ANIMATION_DURATION_SECS);
+
+  try {
+    await db.open();
+    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    const activeDid = settings?.activeDid || "";
+    const apiServer = settings?.apiServer;
+    await accountsDB.open();
+    const accounts = await accountsDB.accounts.toArray();
+    const account = R.find((acc) => acc.did === activeDid, accounts);
+    const identity = JSON.parse(account?.identity || "undefined");
+    const token = await accessToken(identity);
+
+    const url = apiServer + "/api/v2/report/claims?claimType=GiveAction";
+    const headers = {
+      "Content-Type": "application/json",
+      Authorization: "Bearer " + token,
+    };
+    const resp = await axios.get(url, { headers: headers });
+    if (resp.status === 200) {
+      const landmarks = resp.data.data;
+
+      const minDate = landmarks[landmarks.length - 1].issuedAt;
+      const maxDate = landmarks[0].issuedAt;
+
+      world.setExposedWorldProperties("startTime", minDate.replace("T", " "));
+      world.setExposedWorldProperties("endTime", maxDate.replace("T", " "));
+
+      const minTimeMillis = new Date(minDate).getTime();
+      const fullTimeMillis =
+        maxDate > minDate ? new Date(maxDate).getTime() - minTimeMillis : 1; // avoid divide by zero
+      // ratio of animation time to real time
+      const fakeRealRatio = (ANIMATION_DURATION_SECS * 1000) / fullTimeMillis;
+
+      // load plant model first because it takes a second
+      const loader = new GLTFLoader();
+      // choose the right plant
+      const modelLoc = "/models/lupine_plant/scene.gltf", // push with pokies
+        modScale = 0.1;
+      //const modelLoc = "/models/round_bush/scene.gltf", // green & pink
+      //  modScale = 1;
+      //const modelLoc = "/models/coreopsis-flower.glb", // 3 flowers
+      //  modScale = 2;
+      //const modelLoc = "/models/a_bush/scene.gltf", // purple leaves
+      //  modScale = 15;
+
+      // calculate positions for each claim, especially because some are random
+      const locations = landmarks.map((claim) =>
+        locForGive(claim, world.PLATFORM_SIZE, world.PLATFORM_EDGE_FOR_UNKNOWNS)
+      );
+
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      loader.load(
+        modelLoc,
+        function (gltf) {
+          gltf.scene.scale.set(0, 0, 0);
+          for (let i = 0; i < landmarks.length; i++) {
+            // claim is a GiveServerRecord (see endorserServer.ts)
+            const claim = landmarks[i];
+            const newPlant = SkeletonUtils.clone(gltf.scene);
+
+            const loc = locations[i];
+            newPlant.position.set(loc.x, 0, loc.z);
+
+            world.scene.add(newPlant);
+            const timeDelayMillis =
+              fakeRealRatio *
+              (new Date(claim.issuedAt).getTime() - minTimeMillis);
+            new TWEEN.Tween(newPlant.scale)
+              .delay(timeDelayMillis)
+              .to({ x: modScale, y: modScale, z: modScale }, 5000)
+              .start();
+            world.bushes = [...world.bushes, newPlant];
+          }
+        },
+        undefined,
+        function (error) {
+          console.error(error);
+        }
+      );
+
+      // calculate when lights shine on appearing claim area
+      for (let i = 0; i < landmarks.length; i++) {
+        // claim is a GiveServerRecord (see endorserServer.ts)
+        const claim = landmarks[i];
+
+        const loc = locations[i];
+        const light = createLight();
+        light.position.set(loc.x, 20, loc.z);
+        light.target.position.set(loc.x, 0, loc.z);
+        loop.updatables.push(light);
+        scene.add(light);
+        scene.add(light.target);
+
+        // now figure out the timing and shine a light
+        const timeDelayMillis =
+          fakeRealRatio * (new Date(claim.issuedAt).getTime() - minTimeMillis);
+        new TWEEN.Tween(light)
+          .delay(timeDelayMillis)
+          .to({ intensity: 100 }, 10)
+          .chain(
+            new TWEEN.Tween(light.position)
+              .to({ y: 5 }, 5000)
+              .onComplete(() => {
+                scene.remove(light);
+                light.dispose();
+              })
+          )
+          .start();
+        world.lights = [...world.lights, light];
+      }
+    } else {
+      console.error(
+        "Got bad server response status & data of",
+        resp.status,
+        resp.data
+      );
+      vue.setAlert(
+        "Error With Server",
+        "There was an error retrieving your claims from the server."
+      );
+    }
+  } catch (error) {
+    console.error("Got exception contacting server:", error);
+    vue.setAlert(
+      "Error With Server",
+      "There was a problem retrieving your claims from the server."
+    );
+  }
+}
+
+/**
+ *
+ * @param giveClaim
+ * @returns {x:float, z:float} where -50 <= x & z < 50
+ */
+function locForGive(giveClaim, platformWidth, borderWidth) {
+  let loc;
+  if (giveClaim?.claim?.recipient?.identifier) {
+    // this is directly to a person
+    loc = locForEthrDid(giveClaim.claim.recipient.identifier);
+    loc = { x: loc.x - platformWidth / 2, z: loc.z - platformWidth / 2 };
+  } else if (giveClaim?.object?.isPartOf?.identifier) {
+    // this is probably to a project
+    const objId = giveClaim.object.isPartOf.identifier;
+    if (objId.startsWith(ENDORSER_ENTITY_PREFIX)) {
+      loc = locForUlid(objId.substring(ENDORSER_ENTITY_PREFIX.length));
+      loc = { x: loc.x - platformWidth / 2, z: loc.z - platformWidth / 2 };
+    }
+  }
+  if (!loc) {
+    // it must be outside our known addresses so let's put it somewhere random on the side
+    const leftSide = Math.random() < 0.5;
+    loc = {
+      x: leftSide
+        ? -platformWidth / 2 - borderWidth / 2
+        : platformWidth / 2 + borderWidth / 2,
+      z: Math.random() * platformWidth - platformWidth / 2,
+    };
+  }
+  return loc;
+}
+
+/**
+ * Generate a deterministic x & z location based on the randomness of an ID.
+ *
+ * We'd like the location to fully map back to the original ID.
+ * This typically means we use half the ID for the x and half for the z.
+ *
+ * ... in this case: a ULID.
+ * We'll use the first half (13 characters) for the x coordinate and next 13 for the z.
+ * We recognize that this is only 3 characters = 15 bits = 32768 unique values
+ * for the random part for the first half. We also recognize that those random
+ * bits may be shared with previous ULIDs if they were generated in the same
+ * millisecond, and therefore much of the evenness of the distribution depends
+ * on the other dimension.
+ *
+ * Also: since the first 10 characters are time-based, we're going to reverse
+ * the order of the characters to make the randomness more evenly distributed.
+ * This is reversing the order of the 5-bit characters, not each of the bits.
+ * Also wik: the first characters of the second half might be the same as
+ * previous ULIDs if they were generated in the same millisecond. So it's
+ * best to have that last character be the most significant bit so that there
+ * is a more even distribution in that dimension.
+ *
+ * @param ulid
+ * @returns {x: float, z: float} where 0 <= x & z < 100
+ */
+function locForUlid(ulid) {
+  const xChars = ulid.substring(0, 13).split("").reverse().join("");
+  const zChars = ulid.substring(13, 26).split("").reverse().join("");
+
+  // from https://github.com/ulid/javascript/blob/5e9727b527aec5b841737c395a20085c4361e971/lib/index.ts#L21
+  const BASE32 = "0123456789ABCDEFGHJKMNPQRSTVWXYZ"; // Crockford's Base32
+
+  // We're currently only using 1024 possible x and z values
+  // because the display is pretty low-fidelity at this point.
+  const rawX = BASE32.indexOf(xChars[1]) * 32 + BASE32.indexOf(xChars[0]);
+  const rawZ = BASE32.indexOf(zChars[1]) * 32 + BASE32.indexOf(zChars[0]);
+
+  const x = (100 * rawX) / 1024;
+  const z = (100 * rawZ) / 1024;
+  return { x, z };
+}
+
+/**
+ * See locForUlid. Similar, but for ethr DIDs.
+ * @param did
+ * @returns {x: float, z: float} where 0 <= x & z < 100
+ */
+function locForEthrDid(did) {
+  // "did:ethr:0x..."
+  if (did.length < 51) {
+    return { x: 0, z: 0 };
+  } else {
+    const randomness = did.substring("did:ethr:0x".length);
+    // We'll use all the randomness for fully unique x & z values.
+    // But we'll only calculate this view with the first byte since our rendering resolution is low.
+    const xOff = parseInt(Number("0x" + randomness.substring(0, 2)), 10);
+    const x = (xOff * 100) / 256;
+    // ... and since we're reserving 20 bytes total for x, start z with character 20,
+    // again with one byte.
+    const zOff = parseInt(Number("0x" + randomness.substring(20, 22)), 10);
+    const z = (zOff * 100) / 256;
+    return { x, z };
+  }
+}
+
+function createLight() {
+  const light = new THREE.SpotLight(0xffffff, 0, 0, Math.PI / 8, 0.5, 0);
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  light.tick = () => {};
+  return light;
+}
--- a/src/components/World/components/objects/terrain.js
+++ b/src/components/World/components/objects/terrain.js
@@ -0,0 +1,29 @@
+import { PlaneGeometry, MeshLambertMaterial, Mesh, TextureLoader } from "three";
+
+export function createTerrain(props) {
+  const loader = new TextureLoader();
+  const height = loader.load("img/textures/forest-floor.png");
+  //                                         w            h
+  const geometry = new PlaneGeometry(props.width, props.height, 64, 64);
+
+  const material = new MeshLambertMaterial({
+    color: props.color,
+    flatShading: true,
+    map: height,
+    //displacementMap: height,
+    //displacementScale: 5,
+  });
+
+  const plane = new Mesh(geometry, material);
+  plane.position.set(0, 0, 0);
+  plane.rotation.x -= Math.PI * 0.5;
+
+  //Storing our original vertices position on a new attribute
+  plane.geometry.attributes.position.originalPosition =
+    plane.geometry.attributes.position.array;
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  plane.tick = () => {};
+
+  return plane;
+}
--- a/src/components/World/components/scene.js
+++ b/src/components/World/components/scene.js
@@ -0,0 +1,11 @@
+import { Color, Scene } from "three";
+
+function createScene(color) {
+  const scene = new Scene();
+
+  scene.background = new Color(color);
+  //scene.fog = new Fog(color, 60, 90);
+  return scene;
+}
+
+export { createScene };
--- a/src/components/World/systems/Loop.js
+++ b/src/components/World/systems/Loop.js
@@ -0,0 +1,33 @@
+import { Clock } from "three";
+
+const clock = new Clock();
+
+class Loop {
+  constructor(camera, scene, renderer) {
+    this.camera = camera;
+    this.scene = scene;
+    this.renderer = renderer;
+    this.updatables = [];
+  }
+
+  start() {
+    this.renderer.setAnimationLoop(() => {
+      this.tick();
+      // render a frame
+      this.renderer.render(this.scene, this.camera);
+    });
+  }
+
+  stop() {
+    this.renderer.setAnimationLoop(null);
+  }
+
+  tick() {
+    const delta = clock.getDelta();
+    for (const object of this.updatables) {
+      object.tick(delta);
+    }
+  }
+}
+
+export { Loop };
--- a/src/components/World/systems/Resizer.js
+++ b/src/components/World/systems/Resizer.js
@@ -0,0 +1,33 @@
+const setSize = (container, camera, renderer) => {
+  // These are great for full-screen, which adjusts to a window.
+  const height = window.innerHeight;
+  const width = window.innerWidth - 50;
+  // These are better for fitting in a container, which stays that size.
+  //const height = container.scrollHeight;
+  //const width = container.scrollWidth;
+
+  camera.aspect = width / height;
+  camera.updateProjectionMatrix();
+
+  renderer.setSize(width, height);
+  renderer.setPixelRatio(window.devicePixelRatio);
+};
+
+class Resizer {
+  constructor(container, camera, renderer) {
+    // set initial size on load
+    setSize(container, camera, renderer);
+
+    window.addEventListener("resize", () => {
+      // set the size again if a resize occurs
+      setSize(container, camera, renderer);
+      // perform any custom actions
+      this.onResize();
+    });
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onResize() {}
+}
+
+export { Resizer };
--- a/src/components/World/systems/controls.js
+++ b/src/components/World/systems/controls.js
@@ -0,0 +1,38 @@
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { MathUtils } from "three";
+
+function createControls(camera, canvas) {
+  const controls = new OrbitControls(camera, canvas);
+
+  //enable controls?
+  controls.enabled = true;
+  controls.autoRotate = false;
+  //controls.autoRotateSpeed = 0.2;
+
+  // control limits
+  // It's recommended to set some control boundaries,
+  // to prevent the user from clipping with the objects.
+
+  // y axis
+  controls.minPolarAngle = MathUtils.degToRad(40); // default
+  controls.maxPolarAngle = MathUtils.degToRad(75);
+
+  // x axis
+  //   controls.minAzimuthAngle = ...
+  //   controls.maxAzimuthAngle = ...
+
+  //smooth camera:
+  // remember to add to loop updatables to work
+  controls.enableDamping = true;
+
+  //controls.enableZoom = false;
+  controls.maxDistance = 250;
+
+  //controls.enablePan = false;
+
+  controls.tick = () => controls.update();
+
+  return controls;
+}
+
+export { createControls };
--- a/src/components/World/systems/renderer.js
+++ b/src/components/World/systems/renderer.js
@@ -0,0 +1,13 @@
+import { WebGLRenderer } from "three";
+
+function createRenderer() {
+  const renderer = new WebGLRenderer({ antialias: true });
+
+  // turn on the physically correct lighting model
+  // (The browser complains: "THREE.WebGLRenderer: the property .physicallyCorrectLights has been removed. Set renderer.useLegacyLights instead." However, that changes the lighting in a way that doesn't look better.)
+  renderer.physicallyCorrectLights = true;
+
+  return renderer;
+}
+
+export { createRenderer };
--- a/src/constants/app.ts
+++ b/src/constants/app.ts
@@ -2,8 +2,11 @@
 * Generic strings that could be used throughout the app.
 */
 export enum AppString {
-  APP_NAME = "KickStart with Time",
-  VERSION = "0.1",
-  DEFAULT_ENDORSER_API_SERVER = "https://test.endorser.ch:8000",
-  //DEFAULT_ENDORSER_API_SERVER = "http://localhost:3000",
+  APP_NAME = "Kick-Start with Time",
+
+  PROD_ENDORSER_API_SERVER = "https://endorser.ch:3000",
+  TEST_ENDORSER_API_SERVER = "https://test.endorser.ch:8000",
+  LOCAL_ENDORSER_API_SERVER = "http://localhost:3000",
+
+  DEFAULT_ENDORSER_API_SERVER = TEST_ENDORSER_API_SERVER,
 }
--- a/src/db/index.ts
+++ b/src/db/index.ts
@@ -7,6 +7,7 @@ import {
  Settings,
  SettingsSchema,
 } from "./tables/settings";
+import { AppString } from "@/constants/app";

 // a separate DB because the seed is super-sensitive data
 type SensitiveTables = {
@@ -57,5 +58,8 @@ db.version(1).stores(NonsensitiveSchemas);
 // initialize, a la https://dexie.org/docs/Tutorial/Design#the-populate-event
 db.on("populate", function () {
  // ensure there's an initial entry for settings
-  db.settings.add({ id: MASTER_SETTINGS_KEY });
+  db.settings.add({
+    id: MASTER_SETTINGS_KEY,
+    apiServer: AppString.DEFAULT_ENDORSER_API_SERVER,
+  });
 });
--- a/src/db/tables/settings.ts
+++ b/src/db/tables/settings.ts
@@ -2,6 +2,7 @@
 export type Settings = {
  id: number; // there's only one entry: MASTER_SETTINGS_KEY
  activeDid?: string;
+  apiServer?: string;
  firstName?: string;
  lastName?: string;
  showContactGivesInline?: boolean;
--- a/src/libs/endorserServer.ts
+++ b/src/libs/endorserServer.ts
@@ -1,6 +1,15 @@
 export const SCHEMA_ORG_CONTEXT = "https://schema.org";
 export const SERVICE_ID = "endorser.ch";

+export interface GenericClaim {
+  "@context": string;
+  "@type": string;
+  issuedAt: string;
+  // "any" because arbitrary objects can be subject of agreement
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  claim: Record<any, any>;
+}
+
 export interface AgreeVerifiableCredential {
  "@context": string;
  "@type": string;
--- a/src/libs/veramo/appSlice.ts
+++ b/src/libs/veramo/appSlice.ts
@@ -1,100 +0,0 @@
-/* import * as R from "ramda";
-import { configureStore, createSlice } from "@reduxjs/toolkit";
-import { IIdentifier } from "@veramo/core";
-
-import { Contact } from "../entity/contact";
-import { Settings } from "../entity/settings";
-import * as utility from "../utility/utility";
-
-const MAX_LOG_LENGTH = 2000000;
-
-export const DEFAULT_ENDORSER_API_SERVER = "https://endorser.ch:3000";
-export const DEFAULT_ENDORSER_VIEW_SERVER = "https://endorser.ch";
-export const LOCAL_ENDORSER_API_SERVER = "http://127.0.0.1:3000";
-export const LOCAL_ENDORSER_VIEW_SERVER = "http://127.0.0.1:3001";
-export const TEST_ENDORSER_API_SERVER = "https://test.endorser.ch:8000";
-export const TEST_ENDORSER_VIEW_SERVER = "https://test.endorser.ch:8080";
-
-// for contents set in reducers
-interface Payload<T> {
-  type: string;
-  payload: T;
-}
-
-interface LogMsg {
-  log: boolean;
-  msg: string;
-}
-
-export const appSlice = createSlice({
-  name: "app",
-  initialState: {
-    // This is nullable because it is cached state from the DB...
-    // it'll be null if we haven't even loaded from the DB yet.
-    settings: null as Settings,
-
-    // This is nullable because it is cached state from the DB...
-    // it'll be null if we haven't even loaded from the DB yet.
-    identifiers: null as Array<IIdentifier> | null,
-
-    // This is nullable because it is cached state from the DB...
-    // it'll be null if we haven't even loaded from the DB yet.
-    contacts: null as Array<Contact> | null,
-
-    viewServer: DEFAULT_ENDORSER_VIEW_SERVER,
-
-    logMessage: "",
-
-    advancedMode: false,
-    testMode: false,
-  },
-  reducers: {
-    addIdentifier: (state, contents: Payload<IIdentifier>) => {
-      state.identifiers = state.identifiers.concat([contents.payload]);
-    },
-    addLog: (state, contents: Payload<LogMsg>) => {
-      if (state.logMessage.length > MAX_LOG_LENGTH) {
-        state.logMessage =
-          "<truncated>\n..." +
-          state.logMessage.substring(
-            state.logMessage.length - MAX_LOG_LENGTH / 2
-          );
-      }
-      if (contents.payload.log) {
-        console.log(contents.payload.msg);
-        state.logMessage += "\n" + contents.payload.msg;
-      }
-    },
-    setAdvancedMode: (state, contents: Payload<boolean>) => {
-      state.advancedMode = contents.payload;
-    },
-    setContacts: (state, contents: Payload<Array<Contact>>) => {
-      state.contacts = contents.payload;
-    },
-    setContact: (state, contents: Payload<Contact>) => {
-      const index = R.findIndex(
-        (c) => c.did === contents.payload.did,
-        state.contacts
-      );
-      state.contacts[index] = contents.payload;
-    },
-    setHomeScreen: (state, contents: Payload<string>) => {
-      state.settings.homeScreen = contents.payload;
-    },
-    setIdentifiers: (state, contents: Payload<Array<IIdentifier>>) => {
-      state.identifiers = contents.payload;
-    },
-    setSettings: (state, contents: Payload<Settings>) => {
-      state.settings = contents.payload;
-    },
-    setTestMode: (state, contents: Payload<boolean>) => {
-      state.testMode = contents.payload;
-    },
-    setViewServer: (state, contents: Payload<string>) => {
-      state.viewServer = contents.payload;
-    },
-  },
-});
-
-export const appStore = configureStore({ reducer: appSlice.reducer });
- */
--- a/src/main.ts
+++ b/src/main.ts
@@ -21,6 +21,7 @@ import {
  faEye,
  faEyeSlash,
  faFileLines,
+  faFloppyDisk,
  faFolderOpen,
  faHand,
  faHouseChimney,
@@ -53,6 +54,7 @@ library.add(
  faEye,
  faEyeSlash,
  faFileLines,
+  faFloppyDisk,
  faFolderOpen,
  faHand,
  faHouseChimney,
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -45,6 +45,14 @@ const routes: Array<RouteRecordRaw> = [
        /* webpackChunkName: "contact-amounts" */ "../views/ContactAmountsView.vue"
      ),
  },
+  {
+    path: "/contact-qr",
+    name: "contact-qr",
+    component: () =>
+      import(
+        /* webpackChunkName: "contact-qr" */ "../views/ContactQRScanShowView.vue"
+      ),
+  },
  {
    path: "/contacts",
    name: "contacts",
@@ -115,12 +123,28 @@ const routes: Array<RouteRecordRaw> = [
    component: () =>
      import(/* webpackChunkName: "projects" */ "../views/ProjectsView.vue"),
  },
+  {
+    path: "/seed-backup",
+    name: "seed-backup",
+    component: () =>
+      import(
+        /* webpackChunkName: "seed-backup" */ "../views/SeedBackupView.vue"
+      ),
+  },
  {
    path: "/start",
    name: "start",
    component: () =>
      import(/* webpackChunkName: "start" */ "../views/StartView.vue"),
  },
+  {
+    path: "/statistics",
+    name: "statistics",
+    component: () =>
+      import(
+        /* webpackChunkName: "statistics" */ "../views/StatisticsView.vue"
+      ),
+  },
 ];

 /** @type {*} */
--- a/src/test/index.ts
+++ b/src/test/index.ts
@@ -49,7 +49,8 @@ export async function testServerRegisterUser() {
  // Make the xhr request payload

  const payload = JSON.stringify({ jwtEncoded: vcJwt });
-  const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
+  const endorserApiServer =
+    settings?.apiServer || AppString.TEST_ENDORSER_API_SERVER;
  const url = endorserApiServer + "/api/claim";
  const headers = {
    "Content-Type": "application/json",
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -89,45 +89,65 @@
      <div class="text-slate-500 text-sm font-bold">ID</div>
      <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
        <code class="truncate">{{ activeDid }}</code>
-        <button @click="copy(activeDid)" class="ml-2">
+        <button
+          @click="
+            doCopyTwoSecRedo(activeDid, () => (showDidCopy = !showDidCopy))
+          "
+          class="ml-2"
+        >
          <fa icon="copy" class="text-slate-400 fa-fw"></fa>
        </button>
+        <span v-show="showDidCopy">Copied!</span>
        <span class="whitespace-nowrap ml-4">
-          <button
-            class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md"
-          >
-            <fa icon="share-nodes" class="fa-fw"></fa>
-          </button>
-          <button
+          <router-link
+            :to="{ name: 'contact-qr' }"
            class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md ml-1"
          >
            <fa icon="qrcode" class="fa-fw"></fa>
-          </button>
+          </router-link>
        </span>
      </div>

      <div class="text-slate-500 text-sm font-bold">Public Key (base 64)</div>
      <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
        <code class="truncate">{{ publicBase64 }}</code>
-        <button @click="copy(publicBase64)" class="ml-2">
+        <button
+          @click="
+            doCopyTwoSecRedo(publicBase64, () => (showB64Copy = !showB64Copy))
+          "
+          class="ml-2"
+        >
          <fa icon="copy" class="text-slate-400 fa-fw"></fa>
        </button>
+        <span v-show="showB64Copy">Copied!</span>
      </div>

      <div class="text-slate-500 text-sm font-bold">Public Key (hex)</div>
      <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
        <code class="truncate">{{ publicHex }}</code>
-        <button @click="copy(publicHex)" class="ml-2">
+        <button
+          @click="
+            doCopyTwoSecRedo(publicHex, () => (showPubCopy = !showPubCopy))
+          "
+          class="ml-2"
+        >
          <fa icon="copy" class="text-slate-400 fa-fw"></fa>
        </button>
+        <span v-show="showPubCopy">Copied!</span>
      </div>

      <div class="text-slate-500 text-sm font-bold">Derivation Path</div>
      <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
        <code class="truncate">{{ derivationPath }}</code>
-        <button @click="copy(derivationPath)" class="ml-2">
+        <button
+          @click="
+            doCopyTwoSecRedo(derivationPath, () => (showDerCopy = !showDerCopy))
+          "
+          class="ml-2"
+        >
          <fa icon="copy" class="text-slate-400 fa-fw"></fa>
        </button>
+        <span v-show="showDerCopy">Copied!</span>
      </div>
    </div>

@@ -140,12 +160,13 @@

    <h3 class="text-sm uppercase font-semibold mb-3">Data</h3>

-    <a
+    <router-link
+      :to="{ name: 'seed-backup' }"
      href=""
      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
    >
      Backup Identifier Seed
-    </a>
+    </router-link>
    <a
      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
      @click="exportDatabase()"
@@ -224,6 +245,40 @@
      </div>
    </div>

+    <div class="flex py-2">
+      Claim Server
+      <input
+        type="text"
+        class="block w-full rounded border border-slate-400 px-3 py-2"
+        v-model="apiServerInput"
+      />
+      <button
+        v-if="apiServerInput != apiServer"
+        class="px-4 rounded bg-slate-200 border border-slate-400"
+        @click="onClickSaveApiServer()"
+      >
+        <fa icon="floppy-disk" class="fa-fw"></fa>
+      </button>
+      <button
+        class="px-4 rounded bg-slate-200 border border-slate-400"
+        @click="setApiServerInput(Constants.PROD_ENDORSER_API_SERVER)"
+      >
+        Use Prod
+      </button>
+      <button
+        class="px-4 rounded bg-slate-200 border border-slate-400"
+        @click="setApiServerInput(Constants.TEST_ENDORSER_API_SERVER)"
+      >
+        Use Test
+      </button>
+      <button
+        class="px-4 rounded bg-slate-200 border border-slate-400"
+        @click="setApiServerInput(Constants.LOCAL_ENDORSER_API_SERVER)"
+      >
+        Use Local
+      </button>
+    </div>
+
    <div v-if="numAccounts > 0" class="flex py-2">
      Switch Account
      <span v-for="accountNum in numAccounts" :key="accountNum">
@@ -233,6 +288,18 @@
      </span>
    </div>

+    <div>
+      <button class="text-blue-500 px-2">
+        <router-link
+          :to="{ name: 'statistics' }"
+          class="block text-center py-3 px-1"
+        >
+          See Achievements & Statistics
+        </router-link>
+      </button>
+    </div>
+
+    <!-- This same popup code is in many files. -->
    <div v-bind:class="computedAlertClassNames()">
      <button
        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
@@ -278,7 +345,11 @@ interface RateLimits {

@Component
 export default class AccountViewView extends Vue {
+  Constants = AppString;
+
  activeDid = "";
+  apiServer = "";
+  apiServerInput = "";
  derivationPath = "";
  firstName = "";
  lastName = "";
@@ -288,7 +359,18 @@ export default class AccountViewView extends Vue {
  limits: RateLimits | null = null;
  showContactGives = false;

-  copy = useClipboard().copy;
+  showDidCopy = false;
+  showDerCopy = false;
+  showB64Copy = false;
+  showPubCopy = false;
+
+  // call fn, copy text to the clipboard, then redo fn after 2 seconds
+  doCopyTwoSecRedo(text, fn) {
+    fn();
+    useClipboard()
+      .copy(text)
+      .then(() => setTimeout(fn, 2000));
+  }

  handleChange() {
    this.showContactGives = !this.showContactGives;
@@ -306,11 +388,12 @@ export default class AccountViewView extends Vue {
    // assign this to a class variable, eg. "registerThisUser = testServerRegisterUser",
    // select a component in the extension, and enter in the console: $vm.ctx.registerThisUser()
    //testServerRegisterUser();
-
    try {
      await db.open();
      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
      this.activeDid = settings?.activeDid || "";
+      this.apiServer = settings?.apiServer || "";
+      this.apiServerInput = settings?.apiServer || "";
      this.firstName = settings?.firstName || "";
      this.lastName = settings?.lastName || "";
      this.showContactGives = !!settings?.showContactGivesInline;
@@ -354,7 +437,7 @@ export default class AccountViewView extends Vue {
    } catch (err) {
      this.alertMessage =
        "Clear your cache and start over (after data backup). See console log for more info.";
-      console.log("Telling user to clear cache because:", err);
+      console.error("Telling user to clear cache because:", err);
      this.alertTitle = "Error Creating Account";
      this.isAlertVisible = true;
    }
@@ -369,7 +452,7 @@ export default class AccountViewView extends Vue {
    } catch (err) {
      this.alertMessage =
        "Clear your cache and start over (after data backup). See console log for more info.";
-      console.log("Telling user to clear cache because:", err);
+      console.error("Telling user to clear cache because:", err);
      this.alertTitle = "Error Creating Account";
      this.isAlertVisible = true;
    }
@@ -399,8 +482,7 @@ export default class AccountViewView extends Vue {
  }

  async checkLimits() {
-    const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
-    const url = endorserApiServer + "/api/report/rateLimits";
+    const url = this.apiServer + "/api/report/rateLimits";
    await accountsDB.open();
    const accounts = await accountsDB.accounts.toArray();
    const account = R.find((acc) => acc.did === this.activeDid, accounts);
@@ -421,7 +503,7 @@ export default class AccountViewView extends Vue {
      const serverError = error as AxiosError;

      this.alertTitle = "Error from Server";
-      console.log("Bad response retrieving limits: ", serverError);
+      console.error("Bad response retrieving limits: ", serverError);
      // Anybody know how to access items inside "response.data" without this?
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const data: any = serverError.response?.data;
@@ -457,16 +539,27 @@ export default class AccountViewView extends Vue {
    };
  }

+  async onClickSaveApiServer() {
+    await db.open();
+    db.settings.update(MASTER_SETTINGS_KEY, {
+      apiServer: this.apiServerInput,
+    });
+    this.apiServer = this.apiServerInput;
+  }
+
+  setApiServerInput(value) {
+    this.apiServerInput = value;
+  }
+
+  // This same popup code is in many files.
  alertMessage = "";
  alertTitle = "";
  isAlertVisible = false;
-
  public onClickClose() {
    this.isAlertVisible = false;
    this.alertTitle = "";
    this.alertMessage = "";
  }
-
  public computedAlertClassNames() {
    return {
      hidden: !this.isAlertVisible,
--- a/src/views/ContactAmountsView.vue
+++ b/src/views/ContactAmountsView.vue
@@ -110,6 +110,7 @@
      </div>
    </div>

+    <!-- This same popup code is in many files. -->
    <div v-bind:class="computedAlertClassNames()">
      <button
        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
@@ -130,7 +131,6 @@ import { Options, Vue } from "vue-class-component";
 import { accountsDB, db } from "@/db";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { AppString } from "@/constants/app";
 import { accessToken, SimpleSigner } from "@/libs/crypto";
 import {
  AgreeVerifiableCredential,
@@ -144,6 +144,7 @@ import { AxiosError } from "axios";
@Options({})
 export default class ContactsView extends Vue {
  activeDid = "";
+  apiServer = "";
  contact: Contact | null = null;
  giveRecords: Array<GiveServerRecord> = [];

@@ -155,6 +156,7 @@ export default class ContactsView extends Vue {

    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
    this.activeDid = settings?.activeDid || "";
+    this.apiServer = settings?.apiServer || "";

    if (this.activeDid && this.contact) {
      this.loadGives(this.activeDid, this.contact);
@@ -168,14 +170,12 @@ export default class ContactsView extends Vue {
    const account = R.find((acc) => acc.did === activeDid, accounts);
    const identity = JSON.parse(account?.identity || "undefined");

-    const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
-
    // load all the time I have given to them
    try {
      let result = [];

      const url =
-        endorserApiServer +
+        this.apiServer +
        "/api/v2/report/gives?agentDid=" +
        encodeURIComponent(identity.did) +
        "&recipientDid=" +
@@ -189,7 +189,7 @@ export default class ContactsView extends Vue {
      if (resp.status === 200) {
        result = resp.data.data;
      } else {
-        console.log(
+        console.error(
          "Got bad response status & data of",
          resp.status,
          resp.data
@@ -201,7 +201,7 @@ export default class ContactsView extends Vue {
      }

      const url2 =
-        endorserApiServer +
+        this.apiServer +
        "/api/v2/report/gives?agentDid=" +
        encodeURIComponent(contact.did) +
        "&recipientDid=" +
@@ -215,7 +215,7 @@ export default class ContactsView extends Vue {
      if (resp2.status === 200) {
        result = R.concat(result, resp2.data.data);
      } else {
-        console.log(
+        console.error(
          "Got bad response status & data of",
          resp2.status,
          resp2.data
@@ -282,8 +282,7 @@ export default class ContactsView extends Vue {

      // Make the xhr request payload
      const payload = JSON.stringify({ jwtEncoded: vcJwt });
-      const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
-      const url = endorserApiServer + "/api/v2/claim";
+      const url = this.apiServer + "/api/v2/claim";
      const token = await accessToken(identity);
      const headers = {
        "Content-Type": "application/json",
@@ -322,16 +321,15 @@ export default class ContactsView extends Vue {
    this.isAlertVisible = true;
  }

+  // This same popup code is in many files.
  alertTitle = "";
  alertMessage = "";
  isAlertVisible = false;
-
  public onClickClose() {
    this.isAlertVisible = false;
    this.alertTitle = "";
    this.alertMessage = "";
  }
-
  public computedAlertClassNames() {
    return {
      hidden: !this.isAlertVisible,
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -0,0 +1,165 @@
+<template>
+  <!-- QUICK NAV -->
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
+    <ul class="flex text-2xl p-2 gap-2">
+      <!-- Home Feed -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
+          <fa icon="house-chimney" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Search -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'discover' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="magnifying-glass" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Projects -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'projects' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="folder-open" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Contacts -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'contacts' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="users" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Profile -->
+      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
+        <router-link
+          :to="{ name: 'account' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="circle-user" class="fa-fw"></fa>
+        </router-link>
+      </li>
+    </ul>
+  </nav>
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24">
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      Contact Info
+    </h1>
+
+    <!--
+      Play with display options: https://qr-code-styling.com/
+      See docs: https://www.npmjs.com/package/qr-code-generator-vue3
+    -->
+    <QRCodeVue3
+      :value="this.qrValue"
+      :cornersSquareOptions="{ type: 'extra-rounded' }"
+      :dotsOptions="{ type: 'square' }"
+      class="flex justify-center"
+    />
+
+    <!-- This same popup code is in many files. -->
+    <div v-bind:class="computedAlertClassNames()">
+      <button
+        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
+        @click="onClickClose()"
+      >
+        <fa icon="xmark"></fa>
+      </button>
+      <p>{{ alertMessage }}</p>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import QRCodeVue3 from "qr-code-generator-vue3";
+import { Component, Vue } from "vue-facing-decorator";
+import { accountsDB, db } from "@/db";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import * as R from "ramda";
+import { SimpleSigner } from "@/libs/crypto";
+import * as didJwt from "did-jwt";
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const Buffer = require("buffer/").Buffer;
+
+@Component({
+  components: {
+    QRCodeVue3,
+  },
+})
+export default class ContactQRScanShow extends Vue {
+  activeDid = "";
+  apiServer = "";
+  qrValue = "";
+
+  // 'created' hook runs when the Vue instance is first created
+  async created() {
+    await db.open();
+    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    this.activeDid = settings?.activeDid || "";
+    this.apiServer = settings?.apiServer || "";
+
+    await accountsDB.open();
+    const accounts = await accountsDB.accounts.toArray();
+    const account = R.find((acc) => acc.did === this.activeDid, accounts);
+    if (!account) {
+      this.alertMessage = "You have no identity yet.";
+    } else {
+      const identity = JSON.parse(account.identity);
+
+      const publicKeyHex = identity.keys[0].publicKeyHex;
+      const publicEncKey = Buffer.from(publicKeyHex, "hex").toString("base64");
+      const contactInfo = {
+        iat: Date.now(),
+        iss: this.activeDid,
+        own: {
+          name: (settings?.firstName || "") + " " + (settings?.lastName || ""),
+          publicEncKey,
+        },
+      };
+
+      const alg = undefined;
+      const privateKeyHex: string = identity.keys[0].privateKeyHex;
+      const signer = await SimpleSigner(privateKeyHex);
+      // create a JWT for the request
+      const vcJwt: string = await didJwt.createJWT(contactInfo, {
+        alg: alg,
+        issuer: identity.did,
+        signer: signer,
+      });
+      const viewPrefix = "https://endorser.ch/contact?jwt=";
+      this.qrValue = viewPrefix + vcJwt;
+    }
+  }
+
+  // This same popup code is in many files.
+  alertMessage = "";
+  public onClickClose() {
+    this.alertMessage = "";
+  }
+  public computedAlertClassNames() {
+    return {
+      hidden: !this.alertMessage,
+      "dismissable-alert": true,
+      "bg-slate-100": true,
+      "p-5": true,
+      rounded: true,
+      "drop-shadow-lg": true,
+      fixed: true,
+      "top-3": true,
+      "inset-x-3": true,
+      "transition-transform": true,
+      "ease-in": true,
+      "duration-300": true,
+    };
+  }
+}
+</script>
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -49,6 +49,18 @@
      Your Contacts
    </h1>

+    <div class="flex justify-between py-2">
+      <span />
+      <span>
+        <router-link
+          :to="{ name: 'help' }"
+          class="text-xs uppercase bg-blue-500 text-white px-1.5 py-1 rounded-md ml-1"
+        >
+          Help
+        </router-link>
+      </span>
+    </div>
+
    <!-- New Contact -->
    <div class="mb-4 flex">
      <input
@@ -165,8 +177,11 @@
                        : (givenByMeUnconfirmed[contact.did] || 0)
                  /* eslint-enable prettier/prettier */
                }}
-                <span class="tooltiptext-left">
-                  {{ givenByMeDescriptions[contact.did] || "Nothing" }}
+                <span
+                  v-if="givenByMeDescriptions[contact.did]"
+                  class="tooltiptext-left"
+                >
+                  {{ givenByMeDescriptions[contact.did] }}
                </span>
                <button
                  class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
@@ -187,8 +202,11 @@
                        : (givenToMeUnconfirmed[contact.did] || 0)
                  /* eslint-enable prettier/prettier */
                }}
-                <span class="tooltiptext-left">
-                  {{ givenToMeDescriptions[contact.did] || "Nothing" }}
+                <span
+                  v-if="givenToMeDescriptions[contact.did]"
+                  class="tooltiptext-left"
+                >
+                  {{ givenToMeDescriptions[contact.did] }}
                </span>
                <button
                  class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
@@ -214,6 +232,7 @@
    </ul>
  </section>

+  <!-- This same popup code is in many files. -->
  <div v-bind:class="computedAlertClassNames()">
    <button
      class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
@@ -233,7 +252,6 @@ import * as R from "ramda";
 import { IIdentifier } from "@veramo/core";
 import { Options, Vue } from "vue-class-component";

-import { AppString } from "@/constants/app";
 import { accountsDB, db } from "@/db";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
@@ -253,6 +271,7 @@ const Buffer = require("buffer/").Buffer;
 })
 export default class ContactsView extends Vue {
  activeDid = "";
+  apiServer = "";
  contacts: Array<Contact> = [];
  contactInput = "";
  // { "did:...": concatenated-descriptions } entry for each contact
@@ -278,6 +297,7 @@ export default class ContactsView extends Vue {
    await db.open();
    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
    this.activeDid = settings?.activeDid || "";
+    this.apiServer = settings?.apiServer || "";

    this.showGiveNumbers = !!settings?.showContactGivesInline;
    if (this.showGiveNumbers) {
@@ -303,12 +323,10 @@ export default class ContactsView extends Vue {
      return;
    }

-    const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
-
    // load all the time I have given
    try {
      const url =
-        endorserApiServer +
+        this.apiServer +
        "/api/v2/report/gives?agentDid=" +
        encodeURIComponent(identity.did);
      const token = await accessToken(identity);
@@ -317,7 +335,7 @@ export default class ContactsView extends Vue {
        Authorization: "Bearer " + token,
      };
      const resp = await this.axios.get(url, { headers });
-      console.log("All gifts you've given:", resp.data);
+      //console.log("All gifts you've given:", resp.data);
      if (resp.status === 200) {
        const contactDescriptions: Record<string, string> = {};
        const contactConfirmed: Record<string, number> = {};
@@ -344,7 +362,7 @@ export default class ContactsView extends Vue {
        this.givenByMeConfirmed = contactConfirmed;
        this.givenByMeUnconfirmed = contactUnconfirmed;
      } else {
-        console.log(
+        console.error(
          "Got bad response status & data of",
          resp.status,
          resp.data
@@ -363,7 +381,7 @@ export default class ContactsView extends Vue {
    // load all the time I have received
    try {
      const url =
-        endorserApiServer +
+        this.apiServer +
        "/api/v2/report/gives?recipientDid=" +
        encodeURIComponent(identity.did);
      const token = await accessToken(identity);
@@ -372,7 +390,7 @@ export default class ContactsView extends Vue {
        Authorization: "Bearer " + token,
      };
      const resp = await this.axios.get(url, { headers });
-      console.log("All gifts you've recieved:", resp.data);
+      //console.log("All gifts you've recieved:", resp.data);
      if (resp.status === 200) {
        const contactDescriptions: Record<string, string> = {};
        const contactConfirmed: Record<string, number> = {};
@@ -398,7 +416,7 @@ export default class ContactsView extends Vue {
        this.givenToMeConfirmed = contactConfirmed;
        this.givenToMeUnconfirmed = contactUnconfirmed;
      } else {
-        console.log(
+        console.error(
          "Got bad response status & data of",
          resp.status,
          resp.data
@@ -502,8 +520,7 @@ export default class ContactsView extends Vue {

        // Make the xhr request payload
        const payload = JSON.stringify({ jwtEncoded: vcJwt });
-        const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
-        const url = endorserApiServer + "/api/v2/claim";
+        const url = this.apiServer + "/api/v2/claim";
        const token = await accessToken(identity);
        const headers = {
          "Content-Type": "application/json",
@@ -543,9 +560,8 @@ export default class ContactsView extends Vue {
  }

  async setVisibility(contact: Contact, visibility: boolean) {
-    const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
    const url =
-      endorserApiServer +
+      this.apiServer +
      "/api/report/" +
      (visibility ? "canSeeMe" : "cannotSeeMe");
    await accountsDB.open();
@@ -567,7 +583,7 @@ export default class ContactsView extends Vue {
        db.contacts.update(contact.did, { seesMe: visibility });
      } else {
        this.alertTitle = "Error With Server";
-        console.log("Bad response setting visibility: ", resp.data);
+        console.error("Bad response setting visibility: ", resp.data);
        if (resp.data.error?.message) {
          this.alertMessage = resp.data.error?.message;
        } else {
@@ -583,9 +599,8 @@ export default class ContactsView extends Vue {
  }

  async checkVisibility(contact: Contact) {
-    const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
    const url =
-      endorserApiServer +
+      this.apiServer +
      "/api/report/canDidExplicitlySeeMe?did=" +
      encodeURIComponent(contact.did);
    await accountsDB.open();
@@ -756,8 +771,7 @@ export default class ContactsView extends Vue {
      // Make the xhr request payload

      const payload = JSON.stringify({ jwtEncoded: vcJwt });
-      const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
-      const url = endorserApiServer + "/api/v2/claim";
+      const url = this.apiServer + "/api/v2/claim";
      const token = await accessToken(identity);
      const headers = {
        "Content-Type": "application/json",
@@ -814,16 +828,15 @@ export default class ContactsView extends Vue {
    }
  }

+  // This same popup code is in many files.
  alertTitle = "";
  alertMessage = "";
  isAlertVisible = false;
-
  public onClickClose() {
    this.isAlertVisible = false;
    this.alertTitle = "";
    this.alertMessage = "";
  }
-
  public computedAlertClassNames() {
    return {
      hidden: !this.isAlertVisible,
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -55,12 +55,34 @@
    </h1>

    <div>
-      <h2 class="text-xl font-semibold">Introduction</h2>
      <p>
        This app is a window into data that you and your friends own, focused on
        gifts and collaboration.
      </p>

+      <h2 class="text-xl font-semibold">How is this app useful?</h2>
+      <p>
+        We are building networks of people who want to grow a gifting society.
+        First of all, you can record ways you've seen people give, and that
+        leaves a permanent record... one that they show came from you. This is
+        personally gratifying, but it extends to broader work: volunteers can
+        get confirmation of activity and selectively show off their
+        contributions and network.
+      </p>
+      <p>
+        You can also record projects and plans and invite others to collaborate.
+        Soon you'll be able to see when others are interested and see how much
+        they're willing to contribute, even if there are conditions.
+      </p>
+      <p>
+        This app uses the power of cryptography to build a reputation, recording
+        activity that you can share at your discretion. You put some activity
+        public, but your sensitive information is not shared with anyone,
+        including our services. This is in contrast to Meta and Google, who hold
+        your data and allow you use it. Those services are useful, but they have
+        the control; this app gives you the control.
+      </p>
+
      <h2 class="text-xl font-semibold">How do I backup all my data?</h2>
      <p>
        There are two parts to backup your data: the identifier secrets and the
@@ -107,23 +129,10 @@
        </h2>
        <ul class="list-disc list-inside">
          <li>
-            You only have one identifier at a time. If you have an identifier on
-            Your Identity <fa icon="circle-user" class="fa-fw" /> page, you'll
-            need to clear it out;
-            <a
-              href="https://www.lifewire.com/how-to-clear-cache-2617980"
-              class="text-blue-500"
-            >
-              here are some helpful instructions.
-            </a>
-            But beware! This will also clear out your settings and contact data,
-            so be sure to back that up first.
-          </li>
-          <li>
-            <router-link class="text-blue-500" to="/">
-              Go to the start
+            <router-link class="text-blue-500" to="/import-account">
+              Go to the import page
            </router-link>
-            and choose "Yes" to enter the identity you backed up.
+            and enter the seed phrase you backed up.
          </li>
        </ul>

@@ -146,6 +155,77 @@
        may also add their public key by adding another comma followed by the
        key.
      </p>
+
+      <h2 class="text-xl font-semibold">
+        How do I get permission to store claims on the server?
+      </h2>
+      <p>
+        Get registered by someone else with the app; they can register you on
+        the Contacts <fa icon="circle-user" class="fa-fw" /> page. There are
+        limits to how many each person can register, so you may have to wait.
+      </p>
+
+      <h2 class="text-xl font-semibold">What do you mean by "claims"?</h2>
+      <p>
+        Certain actions in this app are signed by your private keys, and these
+        are often called "claims". For example, when you give time to a person
+        or project, you sign a claim declaring that you gave that time. When you
+        declare a project, you sign a claim declaring it to the world. When you
+        confirm someone else's claim, you sign a claim of agreement.
+      </p>
+      <p>
+        Some of the data in this app does not involve claims, such as your
+        contact list and your identifier.
+      </p>
+
+      <h2 class="text-xl font-semibold">
+        I know there is a record from someone, so why can't I see that info?
+      </h2>
+      <p>
+        If you don't see anything associated with a person, this is typically
+        because they have not given you permission to see their information. Ask
+        them to add you to their contact list and make sure the eye next to your
+        name is open like this
+        <fa icon="eye" class="fa-fw" /> and not closed like this
+        <fa icon="eye-slash" class="fa-fw" />.
+      </p>
+      <p>
+        Sometimes the reason you don't see something is because the search time
+        is limited. Go to the bottom and make sure to load all the data on a
+        list. If you still don't see it, try a search or view on a different
+        page.
+      </p>
+
+      <h2 class="text-xl font-semibold">How do I create another identity?</h2>
+      <p>
+        Go
+        <router-link to="import-account" class="text-blue-500">
+          import another mnemonic here.
+        </router-link>
+      </p>
+
+      <h2 class="text-xl font-semibold">What is your privacy policy?</h2>
+      <p>
+        See
+        <a href="https://endorser.ch/privacy-policy" class="text-blue-500">
+          the Endorser Service Privacy Policy.
+        </a>
+      </p>
+
+      <h2 class="text-xl font-semibold">What app version is this?</h2>
+      <p>
+        {{ package.version }}
+      </p>
    </div>
  </section>
 </template>
+
+<script lang="ts">
+import * as Package from "../../package.json";
+import { Component, Vue } from "vue-facing-decorator";
+
+@Component
+export default class Help extends Vue {
+  package = Package;
+}
+</script>
--- a/src/views/ImportAccountView.vue
+++ b/src/views/ImportAccountView.vue
@@ -93,8 +93,7 @@ export default class ImportAccountView extends Vue {
        });
        this.$router.push({ name: "account" });
      } catch (err) {
-        console.log("Error!");
-        console.log(err);
+        console.error("Error saving mnemonic & updating settings:", err);
      }
    }
  }
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -63,6 +63,8 @@
      </button>
    </div>
  </section>
+
+  <!-- This same popup code is in many files. -->
  <div v-bind:class="computedAlertClassNames()">
    <button
      class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
@@ -81,7 +83,6 @@ import * as didJwt from "did-jwt";
 import * as R from "ramda";
 import { Options, Vue } from "vue-class-component";

-import { AppString } from "@/constants/app";
 import { accountsDB, db } from "@/db";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken, SimpleSigner } from "@/libs/crypto";
@@ -101,11 +102,10 @@ interface VerifiableCredential {
 })
 export default class NewEditProjectView extends Vue {
  activeDid = "";
+  apiServer = "";
  projectName = "";
  description = "";
  errorMessage = "";
-  alertTitle = "";
-  alertMessage = "";

  projectId = localStorage.getItem("projectId") || "";
  isHiddenSave = false;
@@ -116,12 +116,13 @@ export default class NewEditProjectView extends Vue {
    await db.open();
    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
    this.activeDid = settings?.activeDid || "";
+    this.apiServer = settings?.apiServer || "";

    if (this.projectId) {
      await accountsDB.open();
      const num_accounts = await accountsDB.accounts.count();
      if (num_accounts === 0) {
-        console.log("Problem!  Should have a profile!");
+        console.error("Problem!  Should have a profile!");
      } else {
        const accounts = await accountsDB.accounts.toArray();
        const account = R.find((acc) => acc.did === this.activeDid, accounts);
@@ -132,9 +133,8 @@ export default class NewEditProjectView extends Vue {
  }

  async LoadProject(identity: IIdentifier) {
-    const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
    const url =
-      endorserApiServer +
+      this.apiServer +
      "/api/claim/byHandle/" +
      encodeURIComponent(this.projectId);
    const token = await accessToken(identity);
@@ -145,14 +145,13 @@ export default class NewEditProjectView extends Vue {

    try {
      const resp = await this.axios.get(url, { headers });
-      console.log(resp.status, resp.data);
      if (resp.status === 200) {
        const claim = resp.data.claim;
        this.projectName = claim.name;
        this.description = claim.description;
      }
    } catch (error) {
-      console.log(error);
+      console.error("Got error retrieving that project", error);
    }
  }

@@ -191,8 +190,7 @@ export default class NewEditProjectView extends Vue {
      // Make the xhr request payload

      const payload = JSON.stringify({ jwtEncoded: vcJwt });
-      const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
-      const url = endorserApiServer + "/api/v2/claim";
+      const url = this.apiServer + "/api/v2/claim";
      const token = await accessToken(identity);
      const headers = {
        "Content-Type": "application/json",
@@ -201,7 +199,6 @@ export default class NewEditProjectView extends Vue {

      try {
        const resp = await this.axios.post(url, payload, { headers });
-        console.log("Got resp data:", resp.data);
        // handleId is new in server v release-1.6.0; remove fullIri when that
        // version shows up here: https://endorser.ch:3000/api-docs/
        if (resp.data?.success?.handleId || resp.data?.success?.fullIri) {
@@ -218,7 +215,6 @@ export default class NewEditProjectView extends Vue {
              const route = {
                name: "project",
              };
-              console.log(route);
              that.$router.push(route);
            },
            2000,
@@ -230,16 +226,20 @@ export default class NewEditProjectView extends Vue {
        const serverError = error as AxiosError;
        if (serverError) {
          this.isAlertVisible = true;
-          if (serverError.message) {
+          if (Object.prototype.hasOwnProperty.call(serverError, "message")) {
+            console.log(serverError);
            this.alertTitle = "User Message";
-            userMessage = serverError.message; // This is info for the user.
+            userMessage = serverError.response.data.error.message; // This is info for the user.
            this.alertMessage = userMessage;
          } else {
            this.alertTitle = "Server Message";
            this.alertMessage = JSON.stringify(serverError.toJSON());
          }
        } else {
-          console.log("Here's the full error trying to save the claim:", error);
+          console.error(
+            "Here's the full error trying to save the claim:",
+            error
+          );
          this.alertTitle = "Claim Error";
          this.alertMessage = error as string;
        }
@@ -249,19 +249,13 @@ export default class NewEditProjectView extends Vue {
    }
  }

-  public onClickClose() {
-    this.isAlertVisible = false;
-    this.alertTitle = "";
-    this.alertMessage = "";
-  }
-
  public async onSaveProjectClick() {
    this.isHiddenSave = true;
    this.isHiddenSpinner = false;
    await accountsDB.open();
    const num_accounts = await accountsDB.accounts.count();
    if (num_accounts === 0) {
-      console.log("Problem!  Should have a profile!");
+      console.error("Problem!  Should have a profile!");
    } else {
      const accounts = await accountsDB.accounts.toArray();
      const account = R.find((acc) => acc.did === this.activeDid, accounts);
@@ -274,7 +268,15 @@ export default class NewEditProjectView extends Vue {
    this.$router.back();
  }

+  // This same popup code is in many files.
+  alertTitle = "";
+  alertMessage = "";
  isAlertVisible = false;
+  public onClickClose() {
+    this.isAlertVisible = false;
+    this.alertTitle = "";
+    this.alertMessage = "";
+  }
  public computedAlertClassNames() {
    return {
      hidden: !this.isAlertVisible,
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -151,7 +151,6 @@ import * as moment from "moment";
 import * as R from "ramda";
 import { Options, Vue } from "vue-class-component";

-import { AppString } from "@/constants/app";
 import { accountsDB, db } from "@/db";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
@@ -161,6 +160,7 @@ import { IIdentifier } from "@veramo/core";
  components: {},
 })
 export default class ProjectViewView extends Vue {
+  apiServer = "";
  expanded = false;
  name = "";
  description = "";
@@ -175,7 +175,6 @@ export default class ProjectViewView extends Vue {
    const route = {
      name: "new-edit-project",
    };
-    console.log(route);
    this.$router.push(route);
  }

@@ -188,9 +187,10 @@ export default class ProjectViewView extends Vue {
  }

  async LoadProject(identity: IIdentifier) {
-    const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
-    // eslint-disable-next-line prettier/prettier
-    const url = endorserApiServer + "/api/claim/byHandle/" + encodeURIComponent(this.projectId);
+    const url =
+      this.apiServer +
+      "/api/claim/byHandle/" +
+      encodeURIComponent(this.projectId);
    const token = await accessToken(identity);
    const headers = {
      "Content-Type": "application/json",
@@ -199,7 +199,6 @@ export default class ProjectViewView extends Vue {

    try {
      const resp = await this.axios.get(url, { headers });
-      console.log("resp.status, resp.data", resp.status, resp.data);
      if (resp.status === 200) {
        const startTime = resp.data.startTime;
        if (startTime != null) {
@@ -222,7 +221,7 @@ export default class ProjectViewView extends Vue {
        this.errorMessage =
          "Something went wrong retrieving that project." +
          " See logs for more info.";
-        console.log("Error retrieving project:", error);
+        console.error("Error retrieving project:", error);
      }
    }
  }
@@ -232,11 +231,12 @@ export default class ProjectViewView extends Vue {
    await db.open();
    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
    const activeDid = settings?.activeDid || "";
+    this.apiServer = settings?.apiServer || "";

    await accountsDB.open();
    const num_accounts = await accountsDB.accounts.count();
    if (num_accounts === 0) {
-      console.log("Problem!  Should have a profile!");
+      console.error("Problem!  Should have a profile!");
    } else {
      const accounts = await accountsDB.accounts.toArray();
      const account = R.find((acc) => acc.did === activeDid, accounts);
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -71,7 +71,8 @@
    </button>

    <!-- Results List -->
-    <ul class="">
+    <InfiniteScroll @reached-bottom="loadMoreData">
+      <ul>
        <li
          class="border-b border-slate-300"
          v-for="project in projects"
@@ -97,39 +98,49 @@
          </a>
        </li>
      </ul>
+    </InfiniteScroll>
  </section>
 </template>

 <script lang="ts">
 import * as R from "ramda";
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue } from "vue-facing-decorator";

-import { AppString } from "@/constants/app";
 import { accountsDB, db } from "@/db";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import { IIdentifier } from "@veramo/core";
+import InfiniteScroll from "@/components/InfiniteScroll";

-@Options({
-  components: {},
+@Component({
+  components: { InfiniteScroll },
 })
 export default class ProjectsView extends Vue {
+  apiServer = "";
  projects: { handleId: string; name: string; description: string }[] = [];
+  current: IIdentifier;
+  isDataLoaded = false;

-  onClickLoadProject(id: string) {
-    console.log("projectId", id);
-    localStorage.setItem("projectId", id);
-    const route = {
-      name: "project",
-    };
-    console.log(route);
-    this.$router.push(route);
+  async loadMoreData(payload: boolean) {
+    console.log("loadMoreData");
+    console.log(payload);
+    if (this.projects.length > 0) {
+      console.log(this.projects[this.projects.length - 1]);
+      const afterurl = this.projects[this.projects.length - 1]["handleId"];
+      const regex = /([0-9A-Z]+)$/; // Regular expression to match one or more digits at the end
+      const matches = afterurl.match(regex);
+
+      let afterId = "";
+      if (matches && matches.length > 1) {
+        afterId = matches[1];
+        console.log(afterId); // Output: 01H3HBVZGH3YE0K27X35S15QT1
+      } else {
+        console.log("No digits found at the end of the URL.");
+        return;
      }
-
-  async LoadProjects(identity: IIdentifier) {
-    const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
-    const url = endorserApiServer + "/api/v2/report/plansByIssuer";
-    const token = await accessToken(identity);
+      const url =
+        this.apiServer + "/api/v2/report/plansByIssuer?afterId=" + afterId;
+      const token = await accessToken(this.current);
      const headers = {
        "Content-Type": "application/json",
        Authorization: "Bearer " + token,
@@ -152,7 +163,48 @@ export default class ProjectsView extends Vue {
          }
        }
      } catch (error) {
-      console.log(error);
+        console.error("Got error loading projects: ", error);
+      }
+    }
+  }
+
+  onClickLoadProject(id: string) {
+    localStorage.setItem("projectId", id);
+    const route = {
+      name: "project",
+    };
+    this.$router.push(route);
+  }
+
+  async LoadProjects(identity: IIdentifier) {
+    console.log("LoadProjects");
+    const url = this.apiServer + "/api/v2/report/plansByIssuer";
+    const token = await accessToken(identity);
+    const headers = {
+      "Content-Type": "application/json",
+      Authorization: "Bearer " + token,
+    };
+
+    try {
+      const resp = await this.axios.get(url, { headers });
+      if (resp.status === 200) {
+        const plans = resp.data.data;
+        for (let i = 0; i < plans.length; i++) {
+          const plan = plans[i];
+          const data = {
+            name: plan.name,
+            description: plan.description,
+            // handleId is new in server v release-1.6.0; remove fullIri when that
+            // version shows up here: https://endorser.ch:3000/api-docs/
+            handleId: plan.handleId || plan.fullIri,
+          };
+          this.projects.push(data);
+        }
+
+        this.isDataLoaded = true;
+      }
+    } catch (error) {
+      console.error("Got error loading projects: ", error);
    }
  }

@@ -161,15 +213,17 @@ export default class ProjectsView extends Vue {
    await db.open();
    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
    const activeDid = settings?.activeDid || "";
+    this.apiServer = settings?.apiServer || "";

    await accountsDB.open();
    const num_accounts = await accountsDB.accounts.count();
    if (num_accounts === 0) {
-      console.log("Problem!  Should have a profile!");
+      console.error("Problem!  Should have a profile!");
    } else {
      const accounts = await accountsDB.accounts.toArray();
      const account = R.find((acc) => acc.did === activeDid, accounts);
      const identity = JSON.parse(account?.identity || "undefined");
+      this.current = identity;
      this.LoadProjects(identity);
    }
  }
@@ -179,7 +233,6 @@ export default class ProjectsView extends Vue {
    const route = {
      name: "new-edit-project",
    };
-    console.log(route);
    this.$router.push(route);
  }
 }
--- a/src/views/SeedBackupView.vue
+++ b/src/views/SeedBackupView.vue
@@ -0,0 +1,162 @@
+<template>
+  <!-- QUICK NAV -->
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
+    <ul class="flex text-2xl p-2 gap-2">
+      <!-- Home Feed -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
+          <fa icon="house-chimney" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Search -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'discover' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="magnifying-glass" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Projects -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'projects' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="folder-open" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Contacts -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'contacts' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="users" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Profile -->
+      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
+        <router-link
+          :to="{ name: 'account' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="circle-user" class="fa-fw"></fa>
+        </router-link>
+      </li>
+    </ul>
+  </nav>
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24">
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      Seed Backup
+    </h1>
+
+    <div class="flex justify-between py-2">
+      <span />
+      <span>
+        <router-link
+          :to="{ name: 'help' }"
+          class="text-xs uppercase bg-blue-500 text-white px-1.5 py-1 rounded-md ml-1"
+        >
+          Help
+        </router-link>
+      </span>
+    </div>
+
+    <div v-if="activeAccount">
+      <p>
+        BEWARE: Anyone who gets hold of this mnemonic seed phrase will be able
+        impersonate you and take over any digital holdings based on it. So only
+        reveal it when you are in a private place out of sight of other eyes,
+        and only record it in something private -- don't take a screenshot or
+        send it to any online service.
+      </p>
+
+      <button
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        @click="showSeedPhrase"
+      >
+        Click here when you're ready to see it.
+      </button>
+
+      <p v-if="showSeed">{{ activeAccount.mnemonic }}</p>
+    </div>
+    <div v-else>You do not have an active identity.</div>
+
+    <!-- This same popup code is in many files. -->
+    <div v-bind:class="computedAlertClassNames()">
+      <button
+        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
+        @click="onClickClose()"
+      >
+        <fa icon="xmark"></fa>
+      </button>
+      <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
+      <p>{{ alertMessage }}</p>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { accountsDB, db } from "@/db";
+import * as R from "ramda";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+
+@Component
+export default class SeedBackupView extends Vue {
+  activeAccount = null;
+  showSeed = false;
+
+  // 'created' hook runs when the Vue instance is first created
+  async created() {
+    try {
+      await db.open();
+      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+      const activeDid = settings?.activeDid || "";
+
+      await accountsDB.open();
+      const accounts = await accountsDB.accounts.toArray();
+      this.activeAccount = R.find((acc) => acc.did === activeDid, accounts);
+    } catch (err) {
+      console.error("Got an error loading an identity:", err);
+      this.alertTitle = "Error Loading Account";
+      this.alertMessage = "Got an error loading your seed data.";
+      this.isAlertVisible = true;
+    }
+  }
+
+  showSeedPhrase() {
+    this.showSeed = true;
+  }
+
+  // This same popup code is in many files.
+  alertMessage = "";
+  alertTitle = "";
+  isAlertVisible = false;
+  public onClickClose() {
+    this.isAlertVisible = false;
+    this.alertTitle = "";
+    this.alertMessage = "";
+  }
+  public computedAlertClassNames() {
+    return {
+      hidden: !this.isAlertVisible,
+      "dismissable-alert": true,
+      "bg-slate-100": true,
+      "p-5": true,
+      rounded: true,
+      "drop-shadow-lg": true,
+      fixed: true,
+      "top-3": true,
+      "inset-x-3": true,
+      "transition-transform": true,
+      "ease-in": true,
+      "duration-300": true,
+    };
+  }
+}
+</script>
--- a/src/views/StatisticsView.vue
+++ b/src/views/StatisticsView.vue
@@ -0,0 +1,248 @@
+<template>
+  <!-- QUICK NAV -->
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
+    <ul class="flex text-2xl p-2 gap-2">
+      <!-- Home Feed -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
+          <fa icon="house-chimney" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Search -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'discover' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="magnifying-glass" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Projects -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'projects' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="folder-open" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Contacts -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'contacts' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="users" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Profile -->
+      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
+        <router-link
+          :to="{ name: 'account' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="circle-user" class="fa-fw"></fa>
+        </router-link>
+      </li>
+    </ul>
+  </nav>
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24">
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      Achievements & Statistics
+    </h1>
+
+    <div>
+      Here is a view of the activity you can see.
+      <ul class="list-disc list-inside">
+        <li>Each identity and claim has a unique position.</li>
+        <!-- eslint-disable prettier/prettier --><!-- If we format prettier then there is extra space at the start of the line. -->
+        <li>Each will show at their time of appearance relative to all others.</li>
+        <li>Note that the ones on the left and right edges are randomized
+          because not all their positional data is visible to you.
+        </li>
+        <!-- eslint-enable -->
+      </ul>
+    </div>
+
+    <div class="mt-3">
+      <div v-if="worldProperties.startTime">
+        <label>Time Range:&nbsp;</label>
+        {{ worldProperties.startTime }}
+        -
+        {{ worldProperties.endTime }}
+      </div>
+      <div v-if="worldProperties.animationDurationSeconds">
+        <label>Animation duration:&nbsp;</label>
+        {{ worldProperties.animationDurationSeconds }} seconds
+      </div>
+    </div>
+
+    <button class="float-right" @click="captureGraphics()">Screenshot</button>
+
+    <!-- Another place to play with the sizing is in Resizer.setSize -->
+    <div id="scene-container" class="h-screen"></div>
+
+    <div v-bind:class="computedAlertClassNames()">
+      <button
+        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
+        @click="onClickClose()"
+      >
+        <fa icon="xmark"></fa>
+      </button>
+      <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
+      <p>{{ alertMessage }}</p>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { SVGRenderer } from "three/addons/renderers/SVGRenderer.js";
+import { Component, Vue } from "vue-facing-decorator";
+import { World } from "@/components/World/World.js";
+
+interface WorldProperties {
+  startTime?: string;
+  endTime?: string;
+}
+
+@Component
+export default class StatisticsView extends Vue {
+  world: World;
+  worldProperties: WorldProperties = {};
+
+  mounted() {
+    const container = document.querySelector("#scene-container");
+    const newWorld = new World(container, this);
+    newWorld.start();
+    this.world = newWorld;
+  }
+
+  public captureGraphics() {
+    /**
+    // from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#examples
+    // Adds a blank image
+    const dataBlob = document
+      .querySelector("#scene-container")
+      .firstChild.toBlob((blob) => {
+        const newImg = document.createElement("img");
+        const url = URL.createObjectURL(blob);
+
+        newImg.onload = () => {
+          // no longer need to read the blob so it's revoked
+          URL.revokeObjectURL(url);
+        };
+
+        newImg.src = url;
+        document.body.appendChild(newImg);
+      });
+     **/
+
+    /**
+    // Yields a blank page with the iframe below
+    const dataUrl = document
+      .querySelector("#scene-container")
+      .firstChild.toDataURL("image/png");
+     **/
+
+    /**
+    // Yields a blank page with the iframe below
+    const dataUrl = this.world.renderer.domElement.toDataURL("image/png");
+     **/
+
+    /**
+    // Show the image in a new tab
+    const iframe = `
+      <iframe
+        src="${dataUrl}"
+        frameborder="0"
+        style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;"
+        allowfullscreen>
+      </iframe>`;
+    const win = window.open();
+    win.document.open();
+    win.document.write(iframe);
+    win.document.close();
+     **/
+
+    // from https://stackoverflow.com/a/17407392/845494
+    // This yields a file with funny formatting.
+    //const image = const dataUrl.replace("image/png", "image/octet-stream");
+
+    /**
+    // Yields a blank image at the bottom of the page
+    // from https://discourse.threejs.org/t/save-screenshot-on-server/39900/3
+    const img = new Image();
+    img.src = this.world.renderer.domElement.toDataURL();
+    document.body.appendChild(img);
+     **/
+
+    /**
+     * This yields an SVG that only shows white and black highlights
+     // from https://stackoverflow.com/questions/27632621/exporting-from-three-js-scene-to-svg-or-other-vector-format
+     **/
+    const rendererSVG = new SVGRenderer();
+    rendererSVG.setSize(window.innerWidth, window.innerHeight);
+    rendererSVG.render(this.world.scene, this.world.camera);
+    //document.body.appendChild(rendererSVG.domElement);
+    ExportToSVG(rendererSVG, "test.svg");
+  }
+
+  public setWorldProperty(propertyName, propertyValue) {
+    this.worldProperties[propertyName] = propertyValue;
+  }
+
+  alertTitle = "";
+  alertMessage = "";
+  isAlertVisible = false;
+
+  public setAlert(title, message) {
+    this.alertTitle = title;
+    this.alertMessage = message;
+    this.isAlertVisible = true;
+  }
+
+  public onClickClose() {
+    this.isAlertVisible = false;
+    this.alertTitle = "";
+    this.alertMessage = "";
+  }
+
+  public computedAlertClassNames() {
+    return {
+      hidden: !this.isAlertVisible,
+      "dismissable-alert": true,
+      "bg-slate-100": true,
+      "p-5": true,
+      rounded: true,
+      "drop-shadow-lg": true,
+      fixed: true,
+      "top-3": true,
+      "inset-x-3": true,
+      "transition-transform": true,
+      "ease-in": true,
+      "duration-300": true,
+    };
+  }
+}
+
+function ExportToSVG(rendererSVG, filename) {
+  const XMLS = new XMLSerializer();
+  const svgfile = XMLS.serializeToString(rendererSVG.domElement);
+  const svgData = svgfile;
+  const preface = '<?xml version="1.0" standalone="no"?>\r\n';
+  const svgBlob = new Blob([preface, svgData], {
+    type: "image/svg+xml;charset=utf-8",
+  });
+  const svgUrl = URL.createObjectURL(svgBlob);
+  const downloadLink = document.createElement("a");
+
+  downloadLink.href = svgUrl;
+  downloadLink.download = filename;
+  document.body.appendChild(downloadLink);
+  downloadLink.click();
+  document.body.removeChild(downloadLink);
+}
+</script>
--- a/vue.config.js
+++ b/vue.config.js
@@ -7,4 +7,9 @@ module.exports = defineConfig({
      topLevelAwait: true,
    },
  },
+  pwa: {
+    iconPaths: {
+      faviconSVG: "img/icons/safari-pinned-tab.svg",
+    },
+  },
 });
Author	SHA1	Message	Date
Matthew Raymer	071c41b70c	Firing properly but no data returned on extended fetch	2023-06-24 17:47:18 +08:00
Matthew Raymer	0726a8d3ba	New modules and InfiniteScroll init	2023-06-23 18:56:26 +08:00
Trent Larson	b0fc8818ee	add timing & animation details to stats-world	2023-05-28 09:11:37 -06:00
Trent Larson	9f49234179	update help instructions for importing another identity	2023-05-28 07:21:35 -06:00
Trent Larson	32351b07b7	prefer console.error messages for errors	2023-05-28 07:10:00 -06:00
Trent Larson	0ce06bd9ac	fix a problem with test data (divide by 0), and map full addresses to points	2023-05-27 17:48:41 -06:00
trentlarson	c3c16fd15b	Merge pull request 'add QR code for contact info' (#22 ) from contact-qr into master Reviewed-on: trent_larson/kick-starter-for-time-pwa#22	2023-05-22 17:27:50 -04:00
Trent Larson	a16c34d4ee	update project tasks	2023-05-21 06:59:48 -06:00
Trent Larson	40f9de0609	add QR code for contact info	2023-05-20 20:41:15 -06:00
Trent Larson	d1194297ac	Merge branch 'switching-servers'	2023-05-20 17:34:22 -06:00
Trent Larson	6d67a3e8e5	Merge branch '3d-world'	2023-05-20 17:19:27 -06:00
anomalist	b0ccd84b62	Merge pull request 'add page to show mnemonic seed phrase for backup' (#20 ) from seed-backup into switching-servers Reviewed-on: trent_larson/kick-starter-for-time-pwa#20	2023-05-20 00:47:22 -04:00
anomalist	b94e36ef3b	Merge pull request 'allow to switch the server' (#19 ) from switching-servers into master Reviewed-on: trent_larson/kick-starter-for-time-pwa#19	2023-05-20 00:47:11 -04:00
anomalist	0fed104be1	Merge branch 'master' into 3d-world	2023-05-20 00:46:30 -04:00
Trent Larson	aa34a2362f	update tasks (and rename file so the format is obvious)	2023-05-19 16:40:41 -06:00
Trent Larson	55b53955fc	add page to show mnemonic seed phrase for backup	2023-05-19 15:49:34 -06:00
Trent Larson	fc7c1187e8	allow to switch the server	2023-05-19 13:28:52 -06:00
Trent Larson	2feea0d645	remove console.log	2023-05-19 08:11:34 -06:00
Trent Larson	8f3a11bb98	in stats-world, fix the location computations to be based on Give attributes	2023-05-18 20:34:57 -06:00
Trent Larson	beb7821f58	in stats-world, refactor claim-loading code to separate file (no logic changes)	2023-05-18 18:54:11 -06:00
Trent Larson	712b25bc71	add error message to stats page	2023-05-18 18:23:17 -06:00
Trent Larson	f039f98b61	on stats-world: adjust some lighting and position, and add an attempt at a screen-capture	2023-05-18 18:04:10 -06:00
Trent Larson	f7a149444a	tweak timing & spacing of stats-world, and log relevant tasks	2023-05-17 21:13:01 -06:00
Trent Larson	58e962a3bd	load stats-world bushes and make 'em grow!	2023-05-17 20:46:40 -06:00
Trent Larson	7160aa3cc5	remove test cube from stats-world	2023-05-17 18:22:46 -06:00
Trent Larson	786f0bd94a	make the lights wait to turn on in stats-world	2023-05-17 18:20:55 -06:00
Trent Larson	b5db2b4140	refactor variable names (no logic changes)	2023-05-17 17:42:26 -06:00
Trent Larson	faa7959929	make all lights move in stats-world	2023-05-17 17:40:10 -06:00
Trent Larson	3dd1b6f6f0	add some other screen actions (kinda ugly); add load of claims	2023-05-17 08:46:10 -06:00
anomalist	30b8b941ae	Merge pull request 'copy message & infinite scroll start' (#17 ) from hack-copy into master Reviewed-on: trent_larson/kick-starter-for-time-pwa#17	2023-05-17 02:32:12 -04:00
Trent Larson	9b1c51ba15	adjust stats-world perspective & size & colors	2023-05-16 18:56:50 -06:00
Trent Larson	8c6c32ed20	finish removal from last commit	2023-05-16 16:40:55 -06:00
Trent Larson	0eaf72b83b	remove yet more randomness that has no effect in stats-world	2023-05-16 16:30:33 -06:00
Trent Larson	41d3ad56f5	remove some random numbers that don't seem to make a difference in stats-world	2023-05-16 16:26:27 -06:00
Trent Larson	0227d32f15	add a simple box in stats-world	2023-05-16 16:25:32 -06:00
Trent Larson	b5ab485354	enable zooming on the stats-world	2023-05-16 16:17:34 -06:00
Trent Larson	02ae78de7b	totally remove code to make terrain bob up and down	2023-05-16 07:50:26 -06:00
Trent Larson	64f3dbd138	play with sizing, and stop bobbing and rotation	2023-05-16 07:49:44 -06:00
Trent Larson	f603882d42	modify some things to remove warnings on server and in browser console	2023-05-16 06:39:36 -06:00
Trent Larson	a9844e6e78	add beginning of visualization for statistics, unmodified from blog code	2023-05-16 06:22:19 -06:00
Trent Larson	e4f3f9b2e0	remove extra logging	2023-05-15 16:45:22 -06:00
Trent Larson	d7d53a5b8c	refactor & shorten the 'copied' message display logic	2023-05-14 20:38:27 -06:00
Trent Larson	44ed39b5c1	eliminate extra code for quick-message-display	2023-05-12 21:40:10 -06:00
Matthew Aaron Raymer	0dbc018c8d	A bit of infinity and hack for copy message	2023-05-13 11:19:53 +08:00
trentlarson	fb7d51ac4c	Merge pull request 'add help blurb for when we don't see info about someone that we should see' (#16 ) from help-visibility into master Reviewed-on: trent_larson/kick-starter-for-time-pwa#16	2023-05-11 21:21:44 -04:00
Trent Larson	85031f84c0	add help blurb for when we don't see info about someone that we should see	2023-05-07 19:52:40 -06:00