Adding class-based Vue Plugin for Vue stub

.gitignore

@@ -1,17 +1,13 @@
 .DS_Store
 node_modules
 /dist
-signature.bin
-*.pem
-verified.txt
-myenv
 
 *~
 # local env files
 .env.local
 .env.*.local
 
-# Log filesopenssl dgst -sha256 -verify public.pem -signature <(echo -n "$signature") "$signing_input"
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

CHANGELOG.md

@@ -1,88 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-
-## [Unreleased]
-
-
-## [0.2.2] - 2024.01.05
-### Added
-- Check for notification capability on front screen
-- Contact next-public-key-hash in manual textual input
-- Confirmation for contact visibility change
-- YAML rendering of full claim details
-- Hints for onboarding on the contact screen
-
-
-## [0.2.0] - 2024.01.04
-### Added
-- Contact next-public-key-hash
-- Icon for Android
-- More thorough messaging and testing for notifications
-
-## [0.1.9] - 2024.01.01
-### Added
-- Import for contacts and settings
-- Second download button for DuckDuckGo
-### Changed
-- Removed some keys from Dexie's IndexedDB declarations
-
-
-## [0.1.8] - 2023.12.27- d26d1d360152a7d0e559b68486e85b72b88bd9ff
-### Added
-- DB logging for service-worker events
-- Help page for notifications
-- Test notification & web-push triggers inside app
-- Check that the app is installed
-### Fixed
-- Project issuer display name
-
-
-## [0.1.7] - 2023.12.19 - 91c6c7c11c71f96006cc876fc946f1f98a274ba2
-### Changed
-- Icons
-### Fixed
-- Notification switch now shows message
-- Prod/test server warning message at top of page
-
-
-## [0.1.6] - 2023.12.17 - b445b1234fbfcf6b37d695373f259aab0eda1118
-### Added
-- Infinite scroll on home page
-### Changed
-- UI improvements
-- Show web-push subscription info
-- Icon
-
-
-## [0.1.5] - 2023.12.09 - 9c36bb509a9bae9bb3306d3bd9eeb144b67aa8ad
-### Added
-- Web push notifications (though not finalized)
-- Credentials details page
-- See more data without an ID
-- Change units of a give
-
-
-## [0.1.4] - 2023.11.20 - 7311d36726f3667ec4c68f241f91d404273ad4db
-### Added
-- Offer on a project
-### Changed
-- Automatically set as visible when importing a contact
-
-
-## [0.1.3] - 2023.11.08 - 910f57ec7d2e50803ae3d04f4b927e0f5219fbde
-### Added
-- Contact name editing
-### Changed
-- Don't show actions on front page if not registered.
-### Removed
-- Home page Notiwind test buttons
-
-
-## [0.1.2] - 2023.11.01 - 7f6c93802911a030a89fe3706e18b5c17151e5bb
-### Added
-- Basics: create ID, record a give, declare a project, search, and get notifications.

README.md

@@ -1,9 +1,6 @@
-# TimeSafari.app - Crowd-Funder for Time - PWA
+# kickstart-for-time-pwa
 
 ## Project setup
-
-We have pkgx.dev set up in package.json, so you can use `dev` to set up the dev environment.
-
 ```
 npm install
 ```
@@ -13,131 +10,116 @@ npm install
 npm run serve
 ```
 
+### Compiles and minifies for production
+```
+npm run build
+```
+
 ### Lints and fixes files
 ```
 npm run lint
 ```
 
-### Compiles and minifies for production
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
 
-If you are deploying in a subdirectory, add it to `publicPath` in vue.config.js, eg: `publicPath: "/app/time-tracker/",`
+```
+// Import an existing ID
+export const importAndStoreIdentifier = async (mnemonic: string, mnemonicPassword: string, toLowercase: boolean, previousIdentifiers: Array<IIdentifier>) => {
 
-* Update the project.task.yaml & CHANGELOG.md & the version in package.json, run `npm install`, and commit.
+  // just to get rid of variability that might cause an error
+  mnemonic = mnemonic.trim().toLowerCase()
 
-* [Tag wth the new version.](https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/releases)
+  /**
+  // an approach I pieced together
+  // requires: yarn add elliptic
+  // ... plus:
+  // const EC = require('elliptic').ec
+  // const secp256k1 = new EC('secp256k1')
+  //
+  const keyHex: string = bip39.mnemonicToEntropy(mnemonic)
+  // returns a KeyPair from the elliptic.ec library
+  const keyPair = secp256k1.keyFromPrivate(keyHex, 'hex')
+  // this code is from did-provider-eth createIdentifier
+  const privateHex = keyPair.getPrivate('hex')
+  const publicHex = keyPair.getPublic('hex')
+  const address = didJwt.toEthereumAddress(publicHex)
+  **/
 
-* If production, change src/constants/app.ts DEFAULT_*_SERVER to be "PROD" and package.json to remove "_Test". Also record what version is on production.
+  /**
+  // from https://github.com/uport-project/veramo/discussions/346#discussioncomment-302234
+  // ... which almost works but the didJwt.toEthereumAddress is wrong
+  // requires: yarn add bip32
+  // ... plus: import * as bip32 from 'bip32'
+  //
+  const seed: Buffer = await bip39.mnemonicToSeed(mnemonic)
+  const root = bip32.fromSeed(seed)
+  const node = root.derivePath(UPORT_ROOT_DERIVATION_PATH)
+  const privateHex = node.privateKey.toString("hex")
+  const publicHex = node.publicKey.toString("hex")
+  const address = didJwt.toEthereumAddress('0x' + publicHex)
+  **/
 
-* `npm run build`
+  /**
+  // from https://github.com/uport-project/veramo/discussions/346#discussioncomment-302234
+  // requires: yarn add @ethersproject/hdnode
+  // ... plus: import { HDNode } from '@ethersproject/hdnode'
+  **/
+  const hdnode: HDNode = HDNode.fromMnemonic(mnemonic)
+  const rootNode: HDNode = hdnode.derivePath(UPORT_ROOT_DERIVATION_PATH)
+  const privateHex = rootNode.privateKey.substring(2) // original starts with '0x'
+  const publicHex = rootNode.publicKey.substring(2) // original starts with '0x'
+  let address = rootNode.address
 
-* `npx prettier --write ./sw_scripts/`
+  const prevIds = previousIdentifiers || [];
 
-...to make sure the service worker scripts are in proper form. (It's only important if you changed something in that directory.)
+  if (toLowercase) {
+    const foundEqual = R.find(
+      (id) => utility.rawAddressOfDid(id.did) === address,
+      prevIds
+    )
+    if (foundEqual) {
+      // They're trying to create a lowercase version of one that exists in normal case.
+      // (We really should notify the user.)
+      appStore.dispatch(appSlice.actions.addLog({log: true, msg: "Will create a normal-case version of the DID since a regular version exists."}))
+    } else {
+      address = address.toLowerCase()
+    }
+  } else {
+    // They're not trying to convert to lowercase.
+    const foundLower = R.find((id) =>
+      utility.rawAddressOfDid(id.did) === address.toLowerCase(),
+      prevIds
+    )
+    if (foundLower) {
+      // They're trying to create a normal case version of one that exists in lowercase.
+      // (We really should notify the user.)
+      appStore.dispatch(appSlice.actions.addLog({log: true, msg: "Will create a lowercase version of the DID since a lowercase version exists."}))
+      address = address.toLowerCase()
+    }
+  }
 
-* `cp sw_scripts/[ns]* dist/`
+  appStore.dispatch(appSlice.actions.addLog({log: false, msg: "... derived keys and address..."}))
 
-... to copy the contents of the `sw_scripts` folder to the `dist` folder - except additional_scripts.js.
+  const newId = newIdentifier(address, publicHex, privateHex, UPORT_ROOT_DERIVATION_PATH)
+  appStore.dispatch(appSlice.actions.addLog({log: false, msg: "... created new ID..."}))
 
-* `rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntutest@test.timesafari.app:time-safari`
+  // awaiting because otherwise the UI may not see that a mnemonic was created
+  const savedId = await storeIdentifier(newId, mnemonic, mnemonicPassword)
+  appStore.dispatch(appSlice.actions.addLog({log: false, msg: "... stored new ID..."}))
+  return savedId
+}
 
-* Revert src/constants/app.ts and package.json (if that was prod), edit package.json to increment version & add "-beta", `npm install`, and commit. Also record what version is on production.
+// Create a totally new ID
+export const createAndStoreIdentifier = async (mnemonicPassword) => {
 
+  // This doesn't give us the entropy/seed.
+  //const id = await agent.didManagerCreate()
 
+  const entropy = crypto.randomBytes(32)
+  const mnemonic = bip39.entropyToMnemonic(entropy)
+  appStore.dispatch(appSlice.actions.addLog({log: false, msg: "... generated mnemonic..."}))
 
-## Tests
+  return importAndStoreIdentifier(mnemonic, mnemonicPassword, false, [])
-
+}
-### Register new user on test server
+```
-
-On the test server, User #0 has rights to register others, so you can start
-playing one of two ways:
-
-- Import the keys for the test User `did:ethr:0x0000694B58C2cC69658993A90D3840C560f2F51F` by importing this seed phrase:
-  `rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage`
-  (Other test users are found [here](https://github.com/trentlarson/endorser-ch/blob/master/test/util.js).)
-
-- Alternatively, register someone else under User #0 automatically:
-
-  * In the `src/views/AccountViewView.vue` file, uncomment the lines referring to "testServerRegisterUser".
-
-  * Visit the `/account` page.
-
-### Create multiple identifiers
-
-Under the "Your Identity" screen, click "Advanced", click "Switch Identity / No Identity", then "Add Another Identity...".
-
-### Create keys with alternate tools
-
-[This page](openssl_signing_console.rst) is a tool to create a JWT from a locally-generated keypair.
-
-### Web-push
-
-For your own web-push tests, change the push server URL in Advanced settings on the account page, and install Time Safari & push server on the same domain.
-
-### Icons
-
-To add an icon, add to main.ts and reference with `fa` element and `icon` attribute with the hyphenated name.
-
-### Manual walk-through
-
-- Clear the browser cache for localhost for a new user.
-  - See that it's using the test API.
-  - On each page, verify the messaging.
-  - On the home page, see the feed without names, and see a message prompting to generate an ID.
-  - On the discovery page, check that they can see projects, and set a search area to see projects nearby.
-- As User #0 in another browser on the test API, add a give & a project. (See User #0 details above.)
-  - With the new user on the home page, see the feed that shows User #0 in network but without the name.
-- As the new user on the contacts page, add User #0 as a contact.
-  - On the home page, see the feed that shows User #0 with a name.
-- Generate an ID.
-  - On the home page, check that it now prompts them to get registered.
-  - On the account page, check that they see messages on limits.
-- Register the ID from User #0.
-  - As the new user on the home page, check that they can now record a gift.
-  - On the contacts page, check that they cannot register someone else yet.
-- Walk through the functions on each page.
-
-
-
-## Scenarios
-
-- Create a new identity as prompted. Go to "Your Identity" screen and copy the ID to the clipboard.
-
-- Go back to /start and import test User `did:ethr:0x000Ee5654b9742f6Fe18ea970e32b97ee2247B51` with this this seed phrase:
-  `rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage`
-  (Other test users are found [here](https://github.com/trentlarson/endorser-ch/blob/master/test/util.js).)
-
-- Go to "Your Contacts" screen and add the ID you copied to the clipboard, and hit "+" to add them.
-
-- Click on the "Registration Unknown" button and register that person to be able to make claims as them.
-
-### Clear/Reset data & restart
-
-* Clear cache for site. (In Chrome, go to `chrome://settings/cookies` and "all site data and permissions"; in Firefox, go to `about:preferences` and search for "cache" then "Manage Data", and also manually remove the IndexedDB data if the DBs still show.)
-* Clear notification permission. (In Chrome, go to `chrome://settings/content/notifications`; in Firefox, go to `about:preferences` and search for "notifications".)
-* Unregister service worker. (In Chrome, go to `chrome://serviceworker-internals/`; in Firefox, go to `about:serviceworkers`.)
-* Clear Cache Storage manually, possibly deleting the DB. (In Chrome, in dev tools under Application; in Firefox, in dev tools under Storage.)
-
-(If you find more, add them to the HelpNotificationsView.vue file.)
-
-
-
-
-## Other
-
-### Reference Material
-
-* Notifications can be type of `toast` (self-dismiss), `info`, `success`, `warning`, and `danger`.
-  They are done via [notiwind](https://www.npmjs.com/package/notiwind) and set up in App.vue.
-
-* [Customize Vue configuration](https://cli.vuejs.org/config/).
-
-
-### Kudos
-
-Gifts make the world go 'round!
-
-* [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 tools & libraries]() such as Nodejs.org, IntelliJ Idea, Veramo.io, Vuejs.org, threejs.org
-* [Bush 3D model](https://sketchfab.com/3d-models/lupine-plant-bf30f1110c174d4baedda0ed63778439)
-* [Forest floor image](https://www.goodfreephotos.com/albums/textures/leafy-autumn-forest-floor.jpg)
-* Time Safari logo assisted by [DALL-E in ChatGPT](https://chat.openai.com/g/g-2fkFE8rbu-dall-e)

openssl_signing_console.rst

@@ -1,54 +0,0 @@
-JWT Creation & Verification
-
-To run this in a script, see ./openssl_signing_console.sh
-
-Prerequisites: openssl, jq
-
-You can create a JWT using a library or by encoding the header and payload base64Url and signing it with a secret using
-a ES256K algorithm. Here is an example of how you can create a JWT using the jq and openssl command line utilities:
-
-Here is an example of how you can use openssl to sign a JWT with the ES256K algorithm:
-
-    Generate an ECDSA key pair using the secp256k1 curve:
-
-openssl ecparam -name secp256k1 -genkey -noout -out private.pem
-openssl ec -in private.pem -pubout -out public.pem
-
-    First, create a header object as a JSON object containing the alg (algorithm) and typ (type) fields. For example:
-
-header='{"alg":"ES256K", "issuer": "", "typ":"JWT"}'
-
-    Next, create a payload object as a JSON object containing the claims you want to include in the JWT.
-    For example schema.org :
-
-payload='{"@context": "http://schema.org", "@type": "PlanAction", "identifier": "did:ethr:0xb86913f83A867b5Ef04902419614A6FF67466c12", "name": "Test", "description": "Me"}'
-
-    Encode the header and payload objects as base64Url strings. You can use the jq command line utility to do this:
-
-header_b64=$(echo -n "$header" | jq -c -M . | tr -d '\n' | base64 | tr -d '=' | tr '+' '-' | tr '/' '_')
-payload_b64=$(echo -n "$payload" | jq -c -M . | tr -d '\n' | base64 | tr -d '=' | tr '+' '-' | tr '/' '_')
-
-    Concatenate the encoded header, payload, and a secret to create the signing input:
-
-signing_input="$header_b64.$payload_b64"
-
-    Create the signature by signing the signing input with a ES256K algorithm and your secret.
-    You can use the openssl command line utility to do this:
-
-signature=$(echo -n "$signing_input" | openssl dgst -sha256 -sign private.pem)
-
-    Finally, encode the signature as a base64Url string and concatenate it with the signing input to create the JWT:
-
-signature_b64=$(echo -n "$signature" | base64 | tr -d '=' | tr '+' '-' | tr '/' '_')
-jwt="$signing_input.$signature_b64"
-
-    This JWT can then be passed in the Authorization header of a HTTP request as a bearer token, for example:
-
-Authorization: Bearer $jwt
-
-    To verify the JWT, you can use the openssl utility with the public key:
-
-echo -n "$signing_input" | openssl dgst -sha256 -verify public.pem -signature <(echo -n "$signature")
-
-    This will verify the signature and output "Verified OK" if the signature is valid.
-    If the signature is not valid, it will give an error response and output "Verification failure".

openssl_signing_console.sh

@@ -1,39 +0,0 @@
-#!/bin/bash
-
-# Generate a JWT, with signature verified using OpenSSL
-#
-# Prerequisites: openssl, jq
-#
-# Usage: source ./openssl_signing_console.sh
-#
-# For a more complete explanation, see ./openssl_signing_console.rst
-
-
-# Generate a key and extract the public part
-openssl ecparam -name secp256k1 -genkey -noout -out private.pem
-openssl ec -in private.pem -pubout -out public.pem
-
-# Use test data
-header='{"alg":"ES256K", "issuer": "", "typ":"JWT"}'
-payload='{"@context": "http://schema.org", "@type": "PlanAction", "identifier": "did:ethr:0xb86913f83A867b5Ef04902419614A6FF67466c12", "name": "Test", "description": "Me"}'
-
-header_b64=$(echo -n "$header" | jq -c -M . | tr -d '\n' | base64 | tr -d '=' | tr '+' '-' | tr '/' '_')
-payload_b64=$(echo -n "$payload" | jq -c -M . | tr -d '\n' | base64 | tr -d '=' | tr '+' '-' | tr '/' '_')
-
-signing_input="$header_b64.$payload_b64"
-
-signature=$(echo -n "$signing_input" | openssl dgst -sha256 -sign private.pem | openssl base64 -e)
-
-echo -n "$signing_input" | openssl dgst -sha256 -verify public.pem -signature <(echo -n "$signature" | openssl base64 -d)
-
-
-
-
-
-# Read binary signature and encode it to Base64 URL-Safe format
-signature_b64=$(echo -n "$signature" | base64 | tr -d '=' | tr '+' '-' | tr '/' '_')
-
-# Construct the JWT
-jwt="$signing_input.$signature_b64"
-
-echo Resulting JWT: $jwt

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "TimeSafari_Test",
+  "name": "kickstart-for-time-pwa",
-  "version": "0.2.2",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -9,66 +9,46 @@
   },
   "dependencies": {
     "@ethersproject/hdnode": "^5.7.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@fortawesome/vue-fontawesome": "^3.0.2",
-    "@pvermeer/dexie-encrypted-addon": "^3.0.0",
+    "@pvermeer/dexie-encrypted-addon": "^2.0.2",
-    "@tweenjs/tween.js": "^21.0.0",
+    "@veramo/core": "^4.1.1",
-    "@types/js-yaml": "^4.0.9",
+    "@veramo/credential-w3c": "^4.1.1",
-    "@veramo/core": "^5.4.1",
+    "@veramo/data-store": "^4.1.1",
-    "@veramo/credential-w3c": "^5.4.1",
+    "@veramo/did-manager": "^4.1.1",
-    "@veramo/data-store": "^5.4.1",
+    "@veramo/did-provider-ethr": "^4.1.2",
-    "@veramo/did-manager": "^5.4.1",
+    "@veramo/did-resolver": "^4.1.1",
-    "@veramo/did-provider-ethr": "^5.4.1",
+    "@veramo/key-manager": "^4.1.1",
-    "@veramo/did-resolver": "^5.4.1",
+    "@vueuse/core": "^9.6.0",
-    "@veramo/key-manager": "^5.4.1",
-    "@vueuse/core": "^10.4.1",
     "@zxing/text-encoding": "^0.9.0",
-    "axios": "^1.5.0",
-    "buffer": "^6.0.3",
     "class-transformer": "^0.5.1",
-    "core-js": "^3.32.1",
+    "core-js": "^3.26.1",
-    "dexie": "^3.2.4",
+    "dexie": "^3.2.2",
-    "dexie-export-import": "^4.0.7",
+    "ethereum-cryptography": "^1.1.2",
-    "did-jwt": "^7.2.7",
-    "ethereum-cryptography": "^2.1.2",
     "ethereumjs-util": "^7.1.5",
-    "ethr-did-resolver": "^8.1.2",
+    "ethr-did-resolver": "^8.0.0",
-    "git-describe": "^4.1.1",
+    "js-generate-password": "^0.1.7",
-    "jdenticon": "^3.2.0",
+    "localstorage-slim": "^2.3.0",
-    "js-generate-password": "^0.1.9",
+    "luxon": "^3.1.1",
-    "js-yaml": "^4.1.0",
+    "merkletreejs": "^0.3.9",
-    "localstorage-slim": "^2.5.0",
+    "papaparse": "^5.3.2",
-    "luxon": "^3.4.3",
-    "merkletreejs": "^0.3.10",
-    "moment": "^2.29.4",
-    "notiwind": "^2.0.2",
-    "papaparse": "^5.4.1",
     "pina": "^0.20.2204228",
-    "pinia-plugin-persistedstate": "^3.2.0",
+    "pinia-plugin-persistedstate": "^3.0.1",
-    "qr-code-generator-vue3": "^1.4.21",
+    "ramda": "^0.28.0",
-    "ramda": "^0.29.0",
+    "readable-stream": "^4.2.0",
-    "readable-stream": "^4.4.2",
     "reflect-metadata": "^0.1.13",
     "register-service-worker": "^1.7.2",
-    "three": "^0.156.1",
+    "vue": "^3.2.45",
-    "ua-parser-js": "^1.0.37",
+    "vue-class-component": "^8.0.0-0",
-    "util": "^0.12.5",
+    "vue-property-decorator": "^9.1.2",
-    "vue": "^3.3.4",
+    "vue-router": "^4.1.6",
-    "vue-axios": "^3.5.2",
+    "web-did-resolver": "^2.0.21"
-    "vue-facing-decorator": "^3.0.2",
-    "vue-qrcode-reader": "^5.4.1",
-    "vue-router": "^4.2.4",
-    "web-did-resolver": "^2.0.27"
   },
   "devDependencies": {
-    "@types/leaflet": "^1.9.4",
+    "@types/ramda": "^0.28.20",
-    "@types/ramda": "^0.29.3",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@types/three": "^0.155.1",
+    "@typescript-eslint/parser": "^5.44.0",
-    "@types/ua-parser-js": "^0.7.39",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.6.0",
-    "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-plugin-pwa": "~5.0.8",
@@ -76,16 +56,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.3",
+    "@vue/eslint-config-typescript": "^11.0.2",
-    "autoprefixer": "^10.4.15",
+    "autoprefixer": "^10.4.13",
-    "eslint": "^8.53.0",
+    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-vue": "^9.8.0",
-    "leaflet": "^1.9.4",
+    "postcss": "^8.4.19",
-    "postcss": "^8.4.29",
+    "prettier": "^2.8.0",
-    "prettier": "^3.1.0",
+    "tailwindcss": "^3.2.4",
-    "tailwindcss": "^3.3.3",
+    "typescript": "~4.9.3"
-    "typescript": "~5.2.2"
   }
 }

project.task.yaml

@@ -1,111 +0,0 @@
-
-tasks:
-
-- show VC details... somehow:
-  - 01 show my VCs - most interesting, or via search
-  - 04 allow user to download chains of VCs, mine + ones I can see about me from others
-  - add VC confirmation
-
-- copy button for seed
-- .5 If notifications are not enabled, add message to front page with link/button to enable
-- record donations vs gives
-- make server endpoint for full English description of limits
-- make identicons for contacts into more-memorable faces (and maybe change project identicons, too)
-- create a help-desk document & add screenshots
-
-- 01 server - show all claim details when issued by the issuer
-- 01 on Mac (& Windows?) desktop, add a help blurb so that they can find it again (since it doesn't show in Application list)
-- bug - got error adding on Firefox user #0 as contact for themselves
-- bug (that is hard to reproduce) - back-and-forth on discovery & project pages led to "You need an identity to load your projects." error on product page when I had an identity
-- bug (that is hard to reproduce) - in Chrome, install app then delete app and try from Chrome browser and see log errors "Uncaught TypeError: self.appendDailyLog is not a function"
-- bug (that is hard to reproduce) - on the second 'give' recorded on prod it showed me as the agent
-- 01 send visibility signal as a VC and store it
-- 04 remove 'rowid' references (that are sqlite-specific); may involve server
-- 04 look at other examples for better UI friend.tech
-- 01 make the prod build copy the sw_scripts
-- .5 Add start date to project
-- .3 check that Android shows "back" buttons on screens without bottom tray
-- .1 Make give description text box into something that expands as they type?
-- .5 customize favicon assignee-group:ui
-- .2 Show a warning if both giver and recipient are the same (but still allow?)
-- 01 Would it look better to shrink the buttons on many pages so they don't expand to the width of the screen? assignee-group:ui
-- .5 Display a more appealing confirmation on the map when erasing the marker
-- .5 remove references to localStorage for projectId (now that it's pulling from the path)
-- switch some checks for activeDid to check for isRegistered
-- .2 in SeedBackupView, don't load the mnemonic and keep it in memory; only load it when they click "show"
-- .5 fix cert generation on server (since it didn't happen automatically for Nov 30)
-- warn if they're using the web (android only?)
-  https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getInstalledRelatedApps
-  https://web.dev/articles/get-installed-related-apps
-
-- 04 fix lack of initial notification in Firefox (on MacOS, maybe others)
-
-- contacts v+ :
-  - 01 Import all the non-sensitive data (ie. contacts & settings).
-  - .2 show error to user when adding a duplicate contact
-  - 01 parse input more robustly (with CSV lib and not commas)
-
-- stats v1 :
-  - 01 show numeric stats
-  - 04 show different graphic for projects vs people (gnome?) on world
-  - 01 link to world for specific stats
-  - .5 don't load another instance of a bush if it already exists
-  - maybe - allow type annotations in World.js & landmarks.js (since we get this error - "Types are not supported by current JavaScript version")
-  - 08 convert to cleaner implementation (maybe Drie -- https://github.com/janvorisek/drie)
-
-- .5 show seed phrase in a QR code for transfer to another device
-- .5 on DiscoverView, switch to a filter UI (eg. just from friend
-- .5 don't show "Offer" on project screen if they aren't registered
-
-- 24 Move to Vite
-- 32 accept images for projects
-- 32 accept images for contacts
-- import project interactions from GitHub/GitLab and manage signing
-
-- show total time offered to & fulfilled to a project
-- show total time offered by & fulfilled by a contact
-
-- linking between projects or plans :
-  - show total time given to & from a project
-  - terminology:
-    - for subtasks: fulfills (is it really the same?), feeds, contributes to, supplies, boosts, advances
-    - for blocking: blocks, precedes, comes before, is sought by -- vs follows, seeks, builds on ("contributes to" isn't specific enough, "succeeds" has different, possibly confusing meaning)
-
-- .5 add "back" button to all screens that aren't part of the bottom tray
-- .5 fit as many icons as possible on home & project view screens but only going halfway down the page assignee-group:ui
-- .5 Replace Gifted/Give in ContactsView with GiftedDialog
-
-- 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
-
-- automated tests, eg. cypress
-
-- Notifications (wake on the phone, push notifications)
-  - 02 change push server so that the web-push/subscribe call sets up a thread for the 10-seconds-later push notification, but returns immediately to the callee
-  - pull instead of push, maybe via scheduled runs
-  - have a notification pop-up on Mac screen
-
-- Connect with phone contacts
-
-- Multiple identities
-
-- Support KERI AIDs
-- Support Peer DIDs
-- Support messaging through DIDComm
-- Write to or read from a different ledger (eg. private ACDC, EAS & attest.sh)
-
-- Do we want split first name & last name?
-
-- 01 On nearby search, if user starts changing their box but cancels and goes back to the map it is zoomed far out. Fix to fit the box better.
-- 16 From the home screen, make the quick action even easier.
-
-- allow some gives even if they aren't registered - maybe someday as a gift to the world, but we really want this to be built via personal connections
-
-log:
-- videos for multiple identities https://youtu.be/p8L87AeD76w and for adding time to contacts https://youtu.be/7Yylczevp10 done:2023-03-29
-- project lists, contact totals & actions, multiple identifiers, stats-world, activity feed, rename of this project file (use "--follow --") milestone:2 done:2023-06-27

public/models/lupine_plant/license.txt

@@ -1,11 +0,0 @@
-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/)

public/models/lupine_plant/scene.gltf

@@ -1,229 +0,0 @@
-{
-  "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
-    }
-  ]
-}

src/App.vue

@@ -1,621 +1,7 @@
 <template>
   <router-view />
-
-  <!-- https://github.com/emmanuelsw/notiwind -->
-  <NotificationGroup group="alert">
-    <div
-      class="fixed top-4 right-4 w-full max-w-sm flex flex-col items-start justify-end"
-    >
-      <Notification
-        v-slot="{ notifications, close }"
-        enter="transform ease-out duration-300 transition"
-        enter-from="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4"
-        enter-to="translate-y-0 opacity-100 sm:translate-x-0"
-        leave="transition ease-in duration-500"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
-        move="transition duration-500"
-        move-delay="delay-300"
-      >
-        <div
-          v-for="notification in notifications"
-          :key="notification.id"
-          class="w-full"
-          role="alert"
-        >
-          <div
-            v-if="notification.type === 'toast'"
-            class="w-full max-w-sm mx-auto mb-3 overflow-hidden bg-slate-900/90 text-white rounded-lg shadow-md"
-          >
-            <div class="w-full px-4 py-3">
-              <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
-            </div>
-          </div>
-
-          <div
-            v-if="notification.type === 'info'"
-            class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-slate-100 rounded-lg shadow-md"
-          >
-            <div
-              class="flex items-center justify-center w-12 bg-slate-600 text-slate-100"
-            >
-              <fa icon="circle-info" class="fa-fw fa-xl"></fa>
-            </div>
-
-            <div class="relative w-full pl-4 pr-8 py-2 text-slate-900">
-              <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
-
-              <button
-                @click="close(notification.id)"
-                class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-slate-200 text-slate-600"
-              >
-                <fa icon="xmark" class="fa-fw"></fa>
-              </button>
-            </div>
-          </div>
-
-          <div
-            v-if="notification.type === 'success'"
-            class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-emerald-100 rounded-lg shadow-md"
-          >
-            <div
-              class="flex items-center justify-center w-12 bg-emerald-600 text-emerald-100"
-            >
-              <fa icon="circle-info" class="fa-fw fa-xl"></fa>
-            </div>
-
-            <div class="relative w-full pl-4 pr-8 py-2 text-emerald-900">
-              <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
-
-              <button
-                @click="close(notification.id)"
-                class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-emerald-200 text-emerald-600"
-              >
-                <fa icon="xmark" class="fa-fw"></fa>
-              </button>
-            </div>
-          </div>
-
-          <div
-            v-if="notification.type === 'warning'"
-            class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-amber-100 rounded-lg shadow-md"
-          >
-            <div
-              class="flex items-center justify-center w-12 bg-amber-600 text-amber-100"
-            >
-              <fa icon="triangle-exclamation" class="fa-fw fa-xl"></fa>
-            </div>
-
-            <div class="relative w-full pl-4 pr-8 py-2 text-amber-900">
-              <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
-
-              <button
-                @click="close(notification.id)"
-                class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-amber-200 text-amber-600"
-              >
-                <fa icon="xmark" class="fa-fw"></fa>
-              </button>
-            </div>
-          </div>
-
-          <div
-            v-if="notification.type === 'danger'"
-            class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-rose-100 rounded-lg shadow-md"
-          >
-            <div
-              class="flex items-center justify-center w-12 bg-rose-600 text-rose-100"
-            >
-              <fa icon="triangle-exclamation" class="fa-fw fa-xl"></fa>
-            </div>
-
-            <div class="relative w-full pl-4 pr-8 py-2 text-rose-900">
-              <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
-
-              <button
-                @click="close(notification.id)"
-                class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-rose-200 text-rose-600"
-              >
-                <fa icon="xmark" class="fa-fw"></fa>
-              </button>
-            </div>
-          </div>
-        </div>
-      </Notification>
-    </div>
-  </NotificationGroup>
-
-  <NotificationGroup group="modal">
-    <div class="fixed z-[100] top-0 inset-x-0 w-full">
-      <Notification
-        v-slot="{ notifications, close }"
-        enter="transform ease-out duration-300 transition"
-        enter-from="translate-y-2 opacity-0 sm:translate-y-4"
-        enter-to="translate-y-0 opacity-100 sm:translate-y-0"
-        leave="transition ease-in duration-500"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
-        move="transition duration-500"
-        move-delay="delay-300"
-      >
-        <div
-          v-for="notification in notifications"
-          :key="notification.id"
-          class="w-full"
-          role="alert"
-        >
-          <div
-            v-if="notification.type === 'notification-permission'"
-            class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
-          >
-            <div
-              class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
-            >
-              <div class="w-full px-6 py-6 text-slate-900 text-center">
-                <p v-if="serviceWorkerReady" class="text-lg mb-4">
-                  Would you like to <b>turn on</b> notifications for this app?
-                </p>
-                <p v-else class="text-lg mb-4">
-                  Waiting for system initialization, which may take up to 10
-                  seconds...
-                  <fa icon="spinner" spin />
-                </p>
-
-                <button
-                  v-if="serviceWorkerReady"
-                  class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
-                  @click="
-                    close(notification.id);
-                    turnOnNotifications();
-                  "
-                >
-                  Turn on Notifications
-                </button>
-
-                <button
-                  @click="close(notification.id)"
-                  class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
-                >
-                  Maybe Later
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            v-if="notification.type === 'notification-mute'"
-            class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
-          >
-            <div
-              class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
-            >
-              <div class="w-full px-6 py-6 text-slate-900 text-center">
-                <p class="text-lg mb-4">Mute app notifications:</p>
-
-                <button
-                  class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
-                >
-                  For 1 Hour
-                </button>
-                <button
-                  class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
-                >
-                  For 8 Hours
-                </button>
-                <button
-                  class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
-                >
-                  For 24 Hours
-                </button>
-                <button
-                  class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
-                >
-                  Until I turn it back on
-                </button>
-                <button
-                  @click="close(notification.id)"
-                  class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
-                >
-                  Cancel
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            v-if="notification.type === 'notification-off'"
-            class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
-          >
-            <div
-              class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
-            >
-              <div class="w-full px-6 py-6 text-slate-900 text-center">
-                <p class="text-lg mb-4">
-                  Would you like to <b>turn off</b> notifications for this app?
-                </p>
-
-                <button
-                  @click="
-                    close(notification.id);
-                    turnOffNotifications();
-                  "
-                  class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md mb-2"
-                >
-                  Turn Off Notifications
-                </button>
-                <button
-                  @click="close(notification.id)"
-                  class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
-                >
-                  Leave it On
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Notification>
-    </div>
-  </NotificationGroup>
 </template>
 
 <style></style>
 
-<script lang="ts">
+<script lang="ts"></script>
-import { Vue, Component } from "vue-facing-decorator";
-import axios from "axios";
-interface ServiceWorkerMessage {
-  type: string;
-  data: string;
-}
-
-interface ServiceWorkerResponse {
-  // Define the properties and their types
-  success: boolean;
-  message?: string;
-}
-
-// Example interface for error
-interface ErrorResponse {
-  message: string;
-  // Other properties as needed
-}
-
-interface VapidResponse {
-  data: {
-    vapidKey: string;
-  };
-}
-
-import { DEFAULT_PUSH_SERVER } from "@/constants/app";
-import { db } from "@/db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { sendTestThroughPushServer } from "@/libs/util";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
-@Component
-export default class App extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
-
-  b64 = "";
-  serviceWorkerReady = false;
-
-  async mounted() {
-    try {
-      await db.open();
-      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-      let pushUrl = DEFAULT_PUSH_SERVER;
-      if (settings?.webPushServer) {
-        pushUrl = settings.webPushServer;
-      }
-
-      await axios
-        .get(pushUrl + "/web-push/vapid")
-        .then((response: VapidResponse) => {
-          this.b64 = response.data?.vapidKey || "";
-          console.log("Got vapid key:", this.b64);
-          navigator.serviceWorker.addEventListener("controllerchange", () => {
-            console.log("New service worker is now controlling the page");
-          });
-        });
-      if (!this.b64) {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error Setting Notifications",
-            text: "Could not set notifications.",
-          },
-          -1,
-        );
-      }
-    } catch (error) {
-      if (window.location.host.startsWith("localhost")) {
-        console.log("Ignoring the error getting VAPID for local development.");
-      } else {
-        console.error("Got an error initializing notifications:", error);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error Setting Notifications",
-            text: "Got an error setting notifications.",
-          },
-          -1,
-        );
-      }
-    }
-    // there may be a long pause here on first initialization
-    navigator.serviceWorker.ready.then(() => {
-      this.serviceWorkerReady = true;
-    });
-  }
-
-  private sendMessageToServiceWorker(
-    message: ServiceWorkerMessage,
-  ): Promise<unknown> {
-    return new Promise((resolve, reject) => {
-      if (navigator.serviceWorker.controller) {
-        const messageChannel = new MessageChannel();
-
-        messageChannel.port1.onmessage = (event: MessageEvent) => {
-          if (event.data.error) {
-            reject(event.data.error as ErrorResponse);
-          } else {
-            resolve(event.data as ServiceWorkerResponse);
-          }
-        };
-
-        navigator.serviceWorker.controller.postMessage(message, [
-          messageChannel.port2,
-        ]);
-      } else {
-        reject("Service worker controller not available");
-      }
-    });
-  }
-
-  private askPermission(): Promise<NotificationPermission> {
-    console.log("Requesting permission for notifications:", navigator);
-    if (!("serviceWorker" in navigator && navigator.serviceWorker.controller)) {
-      return Promise.reject("Service worker not available.");
-    }
-
-    const secret = localStorage.getItem("secret");
-    if (!secret) {
-      return Promise.reject("No secret found.");
-    }
-
-    return this.sendSecretToServiceWorker(secret)
-      .then(() => this.checkNotificationSupport())
-      .then(() => this.requestNotificationPermission())
-      .catch((error) => Promise.reject(error));
-  }
-
-  private sendSecretToServiceWorker(secret: string): Promise<void> {
-    const message: ServiceWorkerMessage = {
-      type: "SEND_LOCAL_DATA",
-      data: secret,
-    };
-
-    return this.sendMessageToServiceWorker(message).then((response) => {
-      console.log("Response from service worker:", response);
-    });
-  }
-
-  private checkNotificationSupport(): Promise<void> {
-    if (!("Notification" in window)) {
-      alert("This browser does not support notifications.");
-      return Promise.reject("This browser does not support notifications.");
-    }
-    if (Notification.permission === "granted") {
-      return Promise.resolve();
-    }
-    return Promise.resolve();
-  }
-
-  private requestNotificationPermission(): Promise<NotificationPermission> {
-    return Notification.requestPermission().then((permission) => {
-      if (permission !== "granted") {
-        alert(
-          "Allow this app permission to make notifications for personal reminders." +
-            " You can adjust them at any time in your settings.",
-        );
-        throw new Error("We weren't granted permission.");
-      }
-      return permission;
-    });
-  }
-
-  public async turnOnNotifications() {
-    return this.askPermission()
-      .then((permission) => {
-        console.log("Permission granted:", permission);
-
-        // Call the function and handle promises
-        this.subscribeToPush()
-          .then(() => {
-            console.log("Subscribed successfully.");
-            return navigator.serviceWorker.ready;
-          })
-          .then((registration) => {
-            return registration.pushManager.getSubscription();
-          })
-          .then(async (subscription) => {
-            if (subscription) {
-              await this.$notify(
-                {
-                  group: "alert",
-                  type: "info",
-                  title: "Notification Setup Underway",
-                  text: "Setting up notifications for interesting activity, which takes about 10 seconds. If you don't see a final confirmation, check the 'Troubleshoot' page.",
-                },
-                -1,
-              );
-              this.sendSubscriptionToServer(subscription);
-              return subscription;
-            } else {
-              throw new Error("Subscription object is not available.");
-            }
-          })
-          .then(async (subscription) => {
-            console.log(
-              "Subscription data sent to server and all finished successfully.",
-            );
-            await sendTestThroughPushServer(subscription, true);
-            this.$notify(
-              {
-                group: "alert",
-                type: "success",
-                title: "Notifications Turned On",
-                text: "Notifications are on. You should see at least one on your device; if not, check the 'Troubleshoot' page.",
-              },
-              -1,
-            );
-          })
-          .catch((error) => {
-            console.error(
-              "Subscription or server communication failed:",
-              error,
-            );
-            alert(
-              "Subscription or server communication failed. Try again in a while.",
-            );
-          });
-      })
-      .catch((error) => {
-        console.error(
-          "An error occurred setting notification permissions:",
-          error,
-        );
-        alert("Some error occurred setting notification permissions.");
-      });
-  }
-
-  private urlBase64ToUint8Array(base64String: string): Uint8Array {
-    const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
-    const base64 = (base64String + padding)
-      .replace(/-/g, "+")
-      .replace(/_/g, "/");
-    const rawData = window.atob(base64);
-    const outputArray = new Uint8Array(rawData.length);
-
-    for (let i = 0; i < rawData.length; ++i) {
-      outputArray[i] = rawData.charCodeAt(i);
-    }
-    return outputArray;
-  }
-
-  private subscribeToPush(): Promise<void> {
-    return new Promise<void>((resolve, reject) => {
-      if (!("serviceWorker" in navigator && "PushManager" in window)) {
-        const errorMsg = "Push messaging is not supported";
-        console.warn(errorMsg);
-        return reject(new Error(errorMsg));
-      }
-
-      if (Notification.permission !== "granted") {
-        const errorMsg = "Notification permission not granted";
-        console.warn(errorMsg);
-        return reject(new Error(errorMsg));
-      }
-
-      const applicationServerKey = this.urlBase64ToUint8Array(this.b64);
-      const options: PushSubscriptionOptions = {
-        userVisibleOnly: true,
-        applicationServerKey: applicationServerKey,
-      };
-
-      navigator.serviceWorker.ready
-        .then((registration) => {
-          return registration.pushManager.subscribe(options);
-        })
-        .then((subscription) => {
-          console.log("Push subscription successful:", subscription);
-          resolve();
-        })
-        .catch((error) => {
-          console.error("Push subscription failed:", error, options);
-
-          // Inform the user about the issue
-          alert(
-            "We encountered an issue setting up push notifications. " +
-              "If you wish to revoke notification permissions, please do so in your browser settings.",
-          );
-
-          reject(error);
-        });
-    });
-  }
-
-  private sendSubscriptionToServer(
-    subscription: PushSubscription,
-  ): Promise<void> {
-    console.log("About to send subscription...", subscription);
-    return fetch("/web-push/subscribe", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(subscription),
-    }).then((response) => {
-      if (!response.ok) {
-        throw new Error("Failed to send subscription to server");
-      }
-      console.log("Subscription sent to server successfully.");
-    });
-  }
-
-  async turnOffNotifications() {
-    let subscription;
-    const pushProviderSuccess = await navigator.serviceWorker.ready
-      .then((registration) => {
-        return registration.pushManager.getSubscription();
-      })
-      .then((subscript) => {
-        subscription = subscript;
-        if (subscription) {
-          return subscription.unsubscribe();
-        } else {
-          console.log("Subscription object is not available.");
-          return false;
-        }
-      })
-      .catch((error) => {
-        console.log("Push provider server communication failed:", error);
-        return false;
-      });
-
-    const pushServerSuccess = await fetch("/web-push/unsubscribe", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(subscription),
-    })
-      .then((response) => {
-        return response.ok;
-      })
-      .catch((error) => {
-        console.log("Push server communication failed:", error);
-        return false;
-      });
-
-    alert(
-      "Notifications are off. Push provider unsubscribe " +
-        (pushProviderSuccess ? "succeeded" : "failed") +
-        (pushProviderSuccess === pushServerSuccess ? " and" : " but") +
-        " push server unsubscribe " +
-        (pushServerSuccess ? "succeeded" : "failed") +
-        ".",
-    );
-  }
-}
-</script>

src/assets/help/apple-share-icon.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50">
-  <path d="M30.3 13.7L25 8.4l-5.3 5.3-1.4-1.4L25 5.6l6.7 6.7z"/><path d="M24 7h2v21h-2z"/><path d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3z"/>
-</svg>

src/assets/help/creative-commons-circle.svg

@@ -1,27 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="64px" height="64px" viewBox="5.5 -3.5 64 64" enable-background="new 5.5 -3.5 64 64" xml:space="preserve">
-<g>
-	<circle fill="#FFFFFF" cx="37.785" cy="28.501" r="28.836"/>
-	<path d="M37.441-3.5c8.951,0,16.572,3.125,22.857,9.372c3.008,3.009,5.295,6.448,6.857,10.314
-		c1.561,3.867,2.344,7.971,2.344,12.314c0,4.381-0.773,8.486-2.314,12.313c-1.543,3.828-3.82,7.21-6.828,10.143
-		c-3.123,3.085-6.666,5.448-10.629,7.086c-3.961,1.638-8.057,2.457-12.285,2.457s-8.276-0.808-12.143-2.429
-		c-3.866-1.618-7.333-3.961-10.4-7.027c-3.067-3.066-5.4-6.524-7-10.372S5.5,32.767,5.5,28.5c0-4.229,0.809-8.295,2.428-12.2
-		c1.619-3.905,3.972-7.4,7.057-10.486C21.08-0.394,28.565-3.5,37.441-3.5z M37.557,2.272c-7.314,0-13.467,2.553-18.458,7.657
-		c-2.515,2.553-4.448,5.419-5.8,8.6c-1.354,3.181-2.029,6.505-2.029,9.972c0,3.429,0.675,6.734,2.029,9.913
-		c1.353,3.183,3.285,6.021,5.8,8.516c2.514,2.496,5.351,4.399,8.515,5.715c3.161,1.314,6.476,1.971,9.943,1.971
-		c3.428,0,6.75-0.665,9.973-1.999c3.219-1.335,6.121-3.257,8.713-5.771c4.99-4.876,7.484-10.99,7.484-18.344
-		c0-3.543-0.648-6.895-1.943-10.057c-1.293-3.162-3.18-5.98-5.654-8.458C50.984,4.844,44.795,2.272,37.557,2.272z M37.156,23.187
-		l-4.287,2.229c-0.458-0.951-1.019-1.619-1.685-2c-0.667-0.38-1.286-0.571-1.858-0.571c-2.856,0-4.286,1.885-4.286,5.657
-		c0,1.714,0.362,3.084,1.085,4.113c0.724,1.029,1.791,1.544,3.201,1.544c1.867,0,3.181-0.915,3.944-2.743l3.942,2
-		c-0.838,1.563-2,2.791-3.486,3.686c-1.484,0.896-3.123,1.343-4.914,1.343c-2.857,0-5.163-0.875-6.915-2.629
-		c-1.752-1.752-2.628-4.19-2.628-7.313c0-3.048,0.886-5.466,2.657-7.257c1.771-1.79,4.009-2.686,6.715-2.686
-		C32.604,18.558,35.441,20.101,37.156,23.187z M55.613,23.187l-4.229,2.229c-0.457-0.951-1.02-1.619-1.686-2
-		c-0.668-0.38-1.307-0.571-1.914-0.571c-2.857,0-4.287,1.885-4.287,5.657c0,1.714,0.363,3.084,1.086,4.113
-		c0.723,1.029,1.789,1.544,3.201,1.544c1.865,0,3.18-0.915,3.941-2.743l4,2c-0.875,1.563-2.057,2.791-3.541,3.686
-		c-1.486,0.896-3.105,1.343-4.857,1.343c-2.896,0-5.209-0.875-6.941-2.629c-1.736-1.752-2.602-4.19-2.602-7.313
-		c0-3.048,0.885-5.466,2.658-7.257c1.77-1.79,4.008-2.686,6.713-2.686C51.117,18.558,53.938,20.101,55.613,23.187z"/>
-</g>
-</svg>

src/assets/help/creative-commons-zero.svg

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="64px" height="64px" viewBox="-0.5 0.5 64 64" enable-background="new -0.5 0.5 64 64" xml:space="preserve">
-<g>
-	<circle fill="#FFFFFF" cx="31.325" cy="32.873" r="30.096"/>
-	<path id="text2809_1_" d="M31.5,14.08c-10.565,0-13.222,9.969-13.222,18.42c0,8.452,2.656,18.42,13.222,18.42
-		c10.564,0,13.221-9.968,13.221-18.42C44.721,24.049,42.064,14.08,31.5,14.08z M31.5,21.026c0.429,0,0.82,0.066,1.188,0.157
-		c0.761,0.656,1.133,1.561,0.403,2.823l-7.036,12.93c-0.216-1.636-0.247-3.24-0.247-4.437C25.808,28.777,26.066,21.026,31.5,21.026z
-		 M36.766,26.987c0.373,1.984,0.426,4.056,0.426,5.513c0,3.723-0.258,11.475-5.69,11.475c-0.428,0-0.822-0.045-1.188-0.136
-		c-0.07-0.021-0.134-0.043-0.202-0.067c-0.112-0.032-0.23-0.068-0.336-0.11c-1.21-0.515-1.972-1.446-0.874-3.093L36.766,26.987z"/>
-	<path id="path2815_1_" d="M31.433,0.5c-8.877,0-16.359,3.09-22.454,9.3c-3.087,3.087-5.443,6.607-7.082,10.532
-		C0.297,24.219-0.5,28.271-0.5,32.5c0,4.268,0.797,8.32,2.397,12.168c1.6,3.85,3.921,7.312,6.969,10.396
-		c3.085,3.049,6.549,5.399,10.398,7.037c3.886,1.602,7.939,2.398,12.169,2.398c4.229,0,8.34-0.826,12.303-2.465
-		c3.962-1.639,7.496-3.994,10.621-7.081c3.011-2.933,5.289-6.297,6.812-10.106C62.73,41,63.5,36.883,63.5,32.5
-		c0-4.343-0.77-8.454-2.33-12.303c-1.562-3.885-3.848-7.32-6.857-10.33C48.025,3.619,40.385,0.5,31.433,0.5z M31.567,6.259
-		c7.238,0,13.412,2.566,18.554,7.709c2.477,2.477,4.375,5.31,5.67,8.471c1.296,3.162,1.949,6.518,1.949,10.061
-		c0,7.354-2.516,13.454-7.506,18.33c-2.592,2.516-5.502,4.447-8.74,5.781c-3.2,1.334-6.498,1.994-9.927,1.994
-		c-3.468,0-6.788-0.653-9.949-1.948c-3.163-1.334-6.001-3.238-8.516-5.716c-2.515-2.514-4.455-5.353-5.826-8.516
-		c-1.333-3.199-2.017-6.498-2.017-9.927c0-3.467,0.684-6.787,2.017-9.949c1.371-3.2,3.312-6.074,5.826-8.628
-		C18.092,8.818,24.252,6.259,31.567,6.259z"/>
-</g>
-</svg>

src/assets/styles/tailwind.css

@@ -9,10 +9,3 @@
         font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
     }
 }
-
-@layer components {
-	input:checked ~ .dot {
-		transform: translateX(100%);
-		background-color: #FFF !important;
-	}
-}

src/components/EntityIcon.vue

@@ -1,32 +0,0 @@
-<template>
-  <div v-html="generateIdenticon()" class="w-fit"></div>
-</template>
-<script lang="ts">
-import { Vue, Component, Prop } from "vue-facing-decorator";
-import { toSvg } from "jdenticon";
-
-const BLANK_CONFIG = {
-  lightness: {
-    color: [1.0, 1.0],
-    grayscale: [1.0, 1.0],
-  },
-  saturation: {
-    color: 0.0,
-    grayscale: 0.0,
-  },
-  backColor: "#0000",
-};
-
-@Component
-export default class EntityIcon extends Vue {
-  @Prop entityId = "";
-  @Prop iconSize = 0;
-
-  generateIdenticon() {
-    const config = this.entityId ? undefined : BLANK_CONFIG;
-    const svgString = toSvg(this.entityId, this.iconSize, config);
-    return svgString;
-  }
-}
-</script>
-<style scoped></style>

src/components/GiftedDialog.vue

@@ -1,361 +0,0 @@
-<template>
-  <div v-if="visible" class="dialog-overlay">
-    <div class="dialog">
-      <h1 class="text-xl font-bold text-center mb-4">
-        {{ message }} {{ giver?.name || "somebody not named" }}
-      </h1>
-      <input
-        type="text"
-        class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
-        placeholder="What was received"
-        v-model="description"
-      />
-      <div class="flex flex-row">
-        <span
-          class="rounded-l border border-r-0 border-slate-400 bg-slate-200 w-1/3 text-center px-2 py-2"
-          @click="changeUnitCode()"
-        >
-          {{ UNIT_SHORT[unitCode] }}
-        </span>
-        <div
-          class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
-          @click="decrement()"
-          v-if="amountInput !== '0'"
-        >
-          <fa icon="chevron-left" />
-        </div>
-        <input
-          type="text"
-          class="w-full border border-r-0 border-slate-400 px-2 py-2 text-center"
-          v-model="amountInput"
-        />
-        <div
-          class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
-          @click="increment()"
-        >
-          <fa icon="chevron-right" />
-        </div>
-      </div>
-      <div v-if="showGivenToUser" class="mt-2 text-right">
-        <input type="checkbox" class="mr-2" v-model="givenToUser" />
-        <label class="text-sm">Given to you</label>
-      </div>
-      <p class="text-center mb-2 mt-6 italic">
-        Sign & Send to publish to the world
-      </p>
-      <button
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
-        @click="confirm"
-      >
-        Sign &amp; Send
-      </button>
-      <button
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
-        @click="cancel"
-      >
-        Cancel
-      </button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from "vue-facing-decorator";
-import { createAndSubmitGive, GiverInputInfo } from "@/libs/endorserServer";
-import { accountsDB, db } from "@/db/index";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
-import { Account } from "@/db/tables/accounts";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
-@Component
-export default class GiftedDialog extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
-
-  @Prop message = "";
-  @Prop projectId = "";
-  @Prop showGivenToUser = false;
-
-  activeDid = "";
-  apiServer = "";
-
-  amountInput = "0";
-  giver?: GiverInputInfo; // undefined means no identified giver agent
-  description = "";
-  givenToUser = false;
-  unitCode = "HUR";
-  visible = false;
-
-  /* eslint-disable prettier/prettier */
-  UNIT_SHORT: Record<string, string> = {
-    "BTC": "BTC",
-    "ETH": "ETH",
-    "HUR": "Hours",
-    "USD": "US $",
-  };
-  /* eslint-enable prettier/prettier */
-
-  /* eslint-disable prettier/prettier */
-  UNIT_LONG: Record<string, string> = {
-    "BTC": "BTC",
-    "ETH": "ETH",
-    "HUR": "hours",
-    "USD": "dollars",
-  };
-  /* eslint-enable prettier/prettier */
-
-  async created() {
-    try {
-      await db.open();
-      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
-      this.apiServer = settings?.apiServer || "";
-      this.activeDid = settings?.activeDid || "";
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (err: any) {
-      console.log("Error retrieving settings from database:", err);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: err.message || "There was an error retrieving your settings.",
-        },
-        -1,
-      );
-    }
-  }
-
-  open(giver: GiverInputInfo) {
-    this.description = "";
-    this.giver = giver;
-    // if we show "given to user" selection, default checkbox to true
-    this.givenToUser = this.showGivenToUser;
-    this.amountInput = "0";
-
-    this.visible = true;
-  }
-
-  close() {
-    // close the dialog but don't change values (since it might be submitting info)
-    this.visible = false;
-  }
-
-  changeUnitCode() {
-    const units = Object.keys(this.UNIT_SHORT);
-    const index = units.indexOf(this.unitCode);
-    this.unitCode = units[(index + 1) % units.length];
-  }
-
-  increment() {
-    this.amountInput = `${(parseFloat(this.amountInput) || 0) + 1}`;
-  }
-
-  decrement() {
-    this.amountInput = `${Math.max(
-      0,
-      (parseFloat(this.amountInput) || 1) - 1,
-    )}`;
-  }
-
-  cancel() {
-    this.close();
-    this.eraseValues();
-  }
-
-  eraseValues() {
-    this.description = "";
-    this.giver = undefined;
-    this.givenToUser = this.showGivenToUser;
-    this.amountInput = "0";
-  }
-
-  async confirm() {
-    this.close();
-    this.$notify(
-      {
-        group: "alert",
-        type: "toast",
-        text: "Recording the give...",
-        title: "",
-      },
-      1000,
-    );
-    // this is asynchronous, but we don't need to wait for it to complete
-    await this.recordGive(
-      this.giver?.did as string | undefined,
-      this.description,
-      parseFloat(this.amountInput),
-      this.unitCode,
-    ).then(() => {
-      this.eraseValues();
-    });
-  }
-
-  public async getIdentity(activeDid: string) {
-    await accountsDB.open();
-    const account = (await accountsDB.accounts
-      .where("did")
-      .equals(activeDid)
-      .first()) as Account;
-    const identity = JSON.parse(account?.identity || "null");
-
-    if (!identity) {
-      throw new Error(
-        "Attempted to load Give records for DID ${activeDid} but no identity was found",
-      );
-    }
-    return identity;
-  }
-
-  /**
-   *
-   * @param giverDid may be null
-   * @param description may be an empty string
-   * @param amountInput may be 0
-   */
-  public async recordGive(
-    giverDid?: string,
-    description?: string,
-    amountInput?: number,
-    unitCode?: string,
-  ) {
-    if (!this.activeDid) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "You must select an identity before you can record a give.",
-        },
-        -1,
-      );
-      return;
-    }
-
-    if (!description && !amountInput) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: `You must enter a description or some number of ${
-            this.UNIT_LONG[this.unitCode]
-          }.`,
-        },
-        -1,
-      );
-      return;
-    }
-
-    try {
-      const identity = await this.getIdentity(this.activeDid);
-      const result = await createAndSubmitGive(
-        this.axios,
-        this.apiServer,
-        identity,
-        giverDid,
-        this.givenToUser ? this.activeDid : undefined,
-        description,
-        amountInput,
-        unitCode,
-        this.projectId,
-      );
-
-      if (
-        result.type === "error" ||
-        this.isGiveCreationError(result.response)
-      ) {
-        const errorMessage = this.getGiveCreationErrorMessage(result);
-        console.log("Error with give creation result:", result);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: errorMessage || "There was an error creating the give.",
-          },
-          -1,
-        );
-      } else {
-        this.$notify(
-          {
-            group: "alert",
-            type: "success",
-            title: "Success",
-            text: "That gift was recorded.",
-          },
-          7000,
-        );
-      }
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (error: any) {
-      console.log("Error with give recordation caught:", error);
-      const message =
-        error.userMessage ||
-        error.response?.data?.error?.message ||
-        "There was an error recording the give.";
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: message,
-        },
-        -1,
-      );
-    }
-  }
-
-  // Helper functions for readability
-
-  /**
-   * @param result response "data" from the server
-   * @returns true if the result indicates an error
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  isGiveCreationError(result: any) {
-    return result.status !== 201 || result.data?.error;
-  }
-
-  /**
-   * @param result direct response eg. ErrorResult or SuccessResult (potentially with embedded "data")
-   * @returns best guess at an error message
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  getGiveCreationErrorMessage(result: any) {
-    return (
-      result.error?.userMessage ||
-      result.error?.error ||
-      result.response?.data?.error?.message
-    );
-  }
-}
-</script>
-
-<style>
-.dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
-</style>

src/components/HelloWorld.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br />
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
+        >vue-cli documentation</a
+      >.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+          target="_blank"
+          rel="noopener"
+          >babel</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
+          target="_blank"
+          rel="noopener"
+          >pwa</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
+          target="_blank"
+          rel="noopener"
+          >router</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
+          target="_blank"
+          rel="noopener"
+          >vuex</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+          target="_blank"
+          rel="noopener"
+          >eslint</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
+          target="_blank"
+          rel="noopener"
+          >typescript</a
+        >
+      </li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li>
+        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
+      </li>
+      <li>
+        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
+          >Forum</a
+        >
+      </li>
+      <li>
+        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
+          >Community Chat</a
+        >
+      </li>
+      <li>
+        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
+          >Twitter</a
+        >
+      </li>
+      <li>
+        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
+      </li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li>
+        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
+          >vue-router</a
+        >
+      </li>
+      <li>
+        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-devtools#vue-devtools"
+          target="_blank"
+          rel="noopener"
+          >vue-devtools</a
+        >
+      </li>
+      <li>
+        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
+          >vue-loader</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+          rel="noopener"
+          >awesome-vue</a
+        >
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  props: {
+    msg: String,
+  },
+})
+export default class HelloWorld extends Vue {
+  msg!: string;
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/components/InfiniteScroll.vue

@@ -1,52 +0,0 @@
-<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() {
-    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' hook runs before unmounting the component
-  beforeUnmount() {
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-  }
-
-  @Emit("reached-bottom")
-  handleIntersection(entries: IntersectionObserverEntry[]) {
-    const entry = entries[0];
-    if (entry.isIntersecting) {
-      return true;
-    }
-    return false;
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped></style>

src/components/OfferDialog.vue

@@ -1,315 +0,0 @@
-<template>
-  <div v-if="visible" class="dialog-overlay">
-    <div class="dialog">
-      <h1 class="text-xl font-bold text-center mb-4">Offer Help</h1>
-      <input
-        type="text"
-        class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
-        placeholder="Description, prerequisites, terms, etc."
-        v-model="description"
-      />
-      <div class="flex flex-row mb-6">
-        <span
-          class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center px-2 py-2"
-        >
-          Hours
-        </span>
-        <div
-          class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
-          @click="decrement()"
-        >
-          <fa icon="chevron-left" />
-        </div>
-        <input
-          type="text"
-          class="w-full border border-r-0 border-slate-400 px-2 py-2 text-center"
-          v-model="hours"
-        />
-        <div
-          class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
-          @click="increment()"
-        >
-          <fa icon="chevron-right" />
-        </div>
-      </div>
-      <div class="flex flex-row mb-6">
-        <span
-          class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center px-2 py-2"
-        >
-          Expiration
-        </span>
-        <input
-          type="text"
-          class="w-full border border-slate-400 px-2 py-2 rounded-r"
-          :placeholder="'Date, eg. ' + new Date().toISOString().slice(0, 10)"
-          v-model="expirationDateInput"
-        />
-      </div>
-      <p class="text-center mb-2 italic">Sign & Send to publish to the world</p>
-      <button
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
-        @click="confirm"
-      >
-        Sign &amp; Send
-      </button>
-      <button
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
-        @click="cancel"
-      >
-        Cancel
-      </button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from "vue-facing-decorator";
-import { createAndSubmitOffer } from "@/libs/endorserServer";
-import { accountsDB, db } from "@/db/index";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
-import { Account } from "@/db/tables/accounts";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
-@Component
-export default class OfferDialog extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
-
-  @Prop message = "";
-  @Prop projectId = "";
-
-  activeDid = "";
-  apiServer = "";
-
-  description = "";
-  expirationDateInput = "";
-  hours = "0";
-  visible = false;
-
-  async created() {
-    try {
-      await db.open();
-      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
-      this.apiServer = settings?.apiServer || "";
-      this.activeDid = settings?.activeDid || "";
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (err: any) {
-      console.log("Error retrieving settings from database:", err);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: err.message || "There was an error retrieving your settings.",
-        },
-        -1,
-      );
-    }
-  }
-
-  open() {
-    this.visible = true;
-  }
-
-  close() {
-    this.visible = false;
-  }
-
-  increment() {
-    this.hours = `${(parseFloat(this.hours) || 0) + 1}`;
-  }
-
-  decrement() {
-    this.hours = `${Math.max(0, (parseFloat(this.hours) || 1) - 1)}`;
-  }
-
-  cancel() {
-    this.close();
-    this.description = "";
-    this.hours = "0";
-  }
-
-  async confirm() {
-    this.close();
-    this.$notify(
-      {
-        group: "alert",
-        type: "toast",
-        text: "Recording the offer...",
-        title: "",
-      },
-      1000,
-    );
-    // this is asynchronous, but we don't need to wait for it to complete
-    this.recordOffer(
-      this.description,
-      parseFloat(this.hours),
-      this.expirationDateInput,
-    ).then(() => {
-      this.description = "";
-      this.hours = "0";
-    });
-  }
-
-  public async getIdentity(activeDid: string) {
-    await accountsDB.open();
-    const account = (await accountsDB.accounts
-      .where("did")
-      .equals(activeDid)
-      .first()) as Account;
-    const identity = JSON.parse(account?.identity || "null");
-
-    if (!identity) {
-      throw new Error(
-        "Attempted to load Offer records for DID ${activeDid} but no identity was found",
-      );
-    }
-    return identity;
-  }
-
-  /**
-   *
-   * @param description may be an empty string
-   * @param hours may be 0
-   */
-  public async recordOffer(
-    description?: string,
-    hours?: number,
-    expirationDateInput?: string,
-  ) {
-    if (!this.activeDid) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "You must select an identity before you can record an offer.",
-        },
-        -1,
-      );
-      return;
-    }
-
-    if (!description && !hours) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "You must enter a description or some number of hours.",
-        },
-        -1,
-      );
-      return;
-    }
-
-    try {
-      const identity = await this.getIdentity(this.activeDid);
-      const result = await createAndSubmitOffer(
-        this.axios,
-        this.apiServer,
-        identity,
-        description,
-        hours,
-        expirationDateInput,
-        this.projectId,
-      );
-
-      if (
-        result.type === "error" ||
-        this.isOfferCreationError(result.response)
-      ) {
-        const errorMessage = this.getOfferCreationErrorMessage(result);
-        console.log("Error with offer creation result:", result);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: errorMessage || "There was an error creating the offer.",
-          },
-          -1,
-        );
-      } else {
-        this.$notify(
-          {
-            group: "alert",
-            type: "success",
-            title: "Success",
-            text: "That offer was recorded.",
-          },
-          10000,
-        );
-      }
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (error: any) {
-      console.log("Error with offer recordation caught:", error);
-      const message =
-        error.userMessage ||
-        error.response?.data?.error?.message ||
-        "There was an error recording the offer.";
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: message,
-        },
-        -1,
-      );
-    }
-  }
-
-  // Helper functions for readability
-
-  /**
-   * @param result response "data" from the server
-   * @returns true if the result indicates an error
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  isOfferCreationError(result: any) {
-    return result.status !== 201 || result.data?.error;
-  }
-
-  /**
-   * @param result direct response eg. ErrorResult or SuccessResult (potentially with embedded "data")
-   * @returns best guess at an error message
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  getOfferCreationErrorMessage(result: any) {
-    return (
-      result.error?.userMessage ||
-      result.error?.error ||
-      result.response?.data?.error?.message
-    );
-  }
-}
-</script>
-
-<style>
-.dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
-</style>

src/components/QuickNav.vue

@@ -1,93 +0,0 @@
-<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 max-w-3xl mx-auto">
-      <!-- Home Feed -->
-      <li
-        :class="{
-          'basis-1/5': true,
-          'rounded-md': true,
-          'bg-slate-400 text-white': selected === 'Home',
-          'text-slate-500': selected !== 'Home',
-        }"
-      >
-        <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': true,
-          'rounded-md': true,
-          'bg-slate-400 text-white': selected === 'Discover',
-          'text-slate-500': selected !== 'Discover',
-        }"
-      >
-        <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': true,
-          'rounded-md': true,
-          'bg-slate-400 text-white': selected === 'Projects',
-          'text-slate-500': selected !== 'Projects',
-        }"
-      >
-        <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': true,
-          'rounded-md': true,
-          'bg-slate-400 text-white': selected === 'Contacts',
-          'text-slate-500': selected !== 'Contacts',
-        }"
-      >
-        <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': true,
-          'rounded-md': true,
-          'bg-slate-400 text-white': selected === 'Profile',
-          'text-slate-500': selected !== 'Profile',
-        }"
-      >
-        <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>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-facing-decorator";
-
-@Component
-export default class QuickNav extends Vue {
-  @Prop selected = "";
-}
-</script>

src/components/TopMessage.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="text-center text-red-500">{{ message }}</div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-facing-decorator";
-import { db } from "@/db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { AppString } from "@/constants/app";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
-@Component
-export default class TopMessage extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
-
-  @Prop selected = "";
-
-  message = "";
-
-  async mounted() {
-    try {
-      await db.open();
-
-      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-      if (
-        settings?.warnIfTestServer &&
-        settings.apiServer !== AppString.PROD_ENDORSER_API_SERVER
-      ) {
-        const didPrefix = settings.activeDid?.slice(11, 15);
-        this.message = "You're linked to a non-prod server, user " + didPrefix;
-      } else if (
-        settings?.warnIfProdServer &&
-        settings.apiServer === AppString.PROD_ENDORSER_API_SERVER
-      ) {
-        const didPrefix = settings.activeDid?.slice(11, 15);
-        this.message =
-          "You're linked to the production server, user " + didPrefix;
-      }
-    } catch (err: unknown) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error Detecting Server",
-          text: JSON.stringify(err),
-        },
-        -1,
-      );
-    }
-  }
-}
-</script>

src/components/World/World.js

@@ -1,110 +0,0 @@
-// 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 };

src/components/World/components/camera.js

@@ -1,19 +0,0 @@
-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 };

src/components/World/components/lights.js

@@ -1,14 +0,0 @@
-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 };

src/components/World/components/objects/landmarks.js

@@ -1,254 +0,0 @@
-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 headers = {
-      "Content-Type": "application/json",
-    };
-    const identity = JSON.parse(account?.identity || "null");
-    if (identity) {
-      const token = await accessToken(identity);
-      headers["Authorization"] = "Bearer " + token;
-    }
-
-    const url = apiServer + "/api/v2/report/claims?claimType=GiveAction";
-    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;
-}

src/components/World/components/objects/terrain.js

@@ -1,29 +0,0 @@
-import { PlaneGeometry, MeshLambertMaterial, Mesh, TextureLoader } from "three";
-
-export function createTerrain(props) {
-  const loader = new TextureLoader();
-  const height = loader.load("img/textures/leafy-autumn-forest-floor.jpg");
-  //                                         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;
-}

src/components/World/components/scene.js

@@ -1,11 +0,0 @@
-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 };

src/components/World/systems/Loop.js

@@ -1,33 +0,0 @@
-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 };

src/components/World/systems/Resizer.js

@@ -1,33 +0,0 @@
-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 };

src/components/World/systems/controls.js

@@ -1,38 +0,0 @@
-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 };

src/components/World/systems/renderer.js

@@ -1,13 +0,0 @@
-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 };

src/constants/app.ts

@@ -1,30 +1,7 @@
 /**
  * Generic strings that could be used throughout the app.
- *
- * See also ../libs/veramo/setup.ts
  */
 export enum AppString {
-  PROD_ENDORSER_API_SERVER = "https://api.endorser.ch",
+  APP_NAME = "Kickstart for time",
-  TEST_ENDORSER_API_SERVER = "https://test-api.endorser.ch",
+  VERSION = "0.1",
-  LOCAL_ENDORSER_API_SERVER = "http://localhost:3000",
-
-  PROD_PUSH_SERVER = "https://timesafari.app",
-  TEST1_PUSH_SERVER = "https://test.timesafari.app",
-  TEST2_PUSH_SERVER = "https://timesafari-pwa.anomalistlabs.com",
-}
-
-export const DEFAULT_ENDORSER_API_SERVER = AppString.TEST_ENDORSER_API_SERVER;
-
-export const DEFAULT_PUSH_SERVER =
-  window.location.protocol + "//" + window.location.host;
-
-/**
- * The possible values for "group" and "type" are in App.vue.
- * From the notiwind package
- */
-export interface NotificationIface {
-  group: string; // "alert" | "modal"
-  type: string; // "toast" | "info" | "success" | "warning" | "danger"
-  title: string;
-  text: string;
 }

src/db/index.ts

@@ -1,57 +1,32 @@
-import BaseDexie, { Table } from "dexie";
+import BaseDexie from "dexie";
 import { encrypted, Encryption } from "@pvermeer/dexie-encrypted-addon";
-import { Account, AccountsSchema } from "./tables/accounts";
+import { accountsSchema, AccountsTable } from "./tables/accounts";
-import { Contact, ContactSchema } from "./tables/contacts";
-import { Log, LogSchema } from "./tables/logs";
-import {
-  MASTER_SETTINGS_KEY,
-  Settings,
-  SettingsSchema,
-} from "./tables/settings";
-import { DEFAULT_ENDORSER_API_SERVER } from "@/constants/app";
 
-// Define types for tables that hold sensitive and non-sensitive data
+/**
-type SensitiveTables = { accounts: Table<Account> };
+ * In order to make the next line be acceptable, the program needs to have its linter suppress a rule:
-type NonsensitiveTables = {
+ *   https://typescript-eslint.io/rules/no-unnecessary-type-constraint/
-  contacts: Table<Contact>;
+ *
-  logs: Table<Log>;
+ * and change *any* to *unknown*
-  settings: Table<Settings>;
+ *
-};
+ *   https://9to5answer.com/how-to-bypass-warning-unexpected-any-specify-a-different-type-typescript-eslint-no-explicit-any
+ */
+type DexieTables = AccountsTable;
+export type Dexie<T extends unknown = DexieTables> = BaseDexie & T;
+export const db = new BaseDexie("kickStarter") as Dexie;
+const schema = Object.assign({}, accountsSchema);
 
-// Using 'unknown' instead of 'any' for stricter typing and to avoid TypeScript warnings
+/**
-export type SensitiveDexie<T extends unknown = SensitiveTables> = BaseDexie & T;
+ * Needed to enable a special webpack setting to allow *await* below:
-export type NonsensitiveDexie<T extends unknown = NonsensitiveTables> =
+ *   https://stackoverflow.com/questions/72474803/error-the-top-level-await-experiment-is-not-enabled-set-experiments-toplevelaw
-  BaseDexie & T;
+ */
 
-// Initialize Dexie databases for sensitive and non-sensitive data
+// create password and place password in localStorage
-export const accountsDB = new BaseDexie("TimeSafariAccounts") as SensitiveDexie;
-const SensitiveSchemas = { ...AccountsSchema };
-
-export const db = new BaseDexie("TimeSafari") as NonsensitiveDexie;
-const NonsensitiveSchemas = {
-  ...ContactSchema,
-  ...LogSchema,
-  ...SettingsSchema,
-};
-
-// Manage the encryption key. If not present in localStorage, create and store it.
 const secret =
   localStorage.getItem("secret") || Encryption.createRandomEncryptionKey();
-if (!localStorage.getItem("secret")) localStorage.setItem("secret", secret);
 
-// Apply encryption to the sensitive database using the secret key
+if (localStorage.getItem("secret") == null) {
-encrypted(accountsDB, { secretKey: secret });
+  localStorage.setItem("secret", secret);
-
+}
-// Define the schema for our databases
+console.log(secret);
-accountsDB.version(1).stores(SensitiveSchemas);
+encrypted(db, { secretKey: secret });
-// v1 was contacts & settings
+db.version(1).stores(schema);
-// v2 added logs
-db.version(2).stores(NonsensitiveSchemas);
-
-// Event handler to initialize the non-sensitive database with default settings
-db.on("populate", () => {
-  db.settings.add({
-    id: MASTER_SETTINGS_KEY,
-    apiServer: DEFAULT_ENDORSER_API_SERVER,
-  });
-});

src/db/tables/accounts.ts

@@ -1,51 +1,18 @@
-/**
+import { Table } from "dexie";
- * Represents an account stored in the database.
+
- */
 export type Account = {
-  /**
-   * Auto-generated ID by Dexie.
-   */
   id?: number;
-
+  publicKey: string;
-  /**
-   * The date the account was created.
-   */
-  dateCreated: string;
-
-  /**
-   * The derivation path for the account.
-   */
-  derivationPath: string;
-
-  /**
-   * Decentralized Identifier (DID) for the account.
-   */
-  did: string;
-
-  /**
-   * Stringified JSON containing underlying key material.
-   * Based on the IIdentifier type from Veramo.
-   * @see {@link https://github.com/uport-project/veramo/blob/next/packages/core-types/src/types/IIdentifier.ts}
-   */
-  identity: string;
-
-  /**
-   * The public key in hexadecimal format.
-   */
-  publicKeyHex: string;
-
-  /**
-   * The mnemonic passphrase for the account.
-   */
   mnemonic: string;
+  identity: string;
+  dateCreated: number;
 };
 
-/**
+export type AccountsTable = {
- * Schema for the accounts table in the database.
+  accounts: Table<Account>;
- * Fields starting with a $ character are encrypted.
+};
- * @see {@link https://github.com/PVermeer/dexie-addon-suite-monorepo/tree/master/packages/dexie-encrypted-addon}
+
- */
+// mark encrypted field by starting with a $ character
-export const AccountsSchema = {
+export const accountsSchema = {
-  accounts:
+  accounts: "++id, publicKey, $mnemonic, $identity, dateCreated",
-    "++id, dateCreated, derivationPath, did, $identity, $mnemonic, publicKeyHex",
 };

src/db/tables/contacts.ts

@@ -1,12 +0,0 @@
-export interface Contact {
-  did: string;
-  name?: string;
-  nextPubKeyHashB64?: string; // base64-encoded SHA256 hash of next public key
-  publicKeyBase64?: string;
-  seesMe?: boolean;
-  registered?: boolean;
-}
-
-export const ContactSchema = {
-  contacts: "&did, name", // no need to key by other things
-};

src/db/tables/logs.ts

@@ -1,11 +0,0 @@
-export interface Log {
-  date: string;
-  message: string;
-}
-
-export const LogSchema = {
-  // Currently keyed by "date" because A) today's log data is what we need so we append, and
-  // B) we don't want it to grow so we remove everything if this is the first entry today.
-  // See safari-notifications.js logMessage for the associated logic.
-  logs: "date", // definitely don't key by the potentially large message field
-};

src/db/tables/settings.ts

@@ -1,50 +0,0 @@
-/**
- * BoundingBox type describes the geographical bounding box coordinates.
- */
-export type BoundingBox = {
-  eastLong: number; // Eastern longitude
-  maxLat: number; // Maximum (Northernmost) latitude
-  minLat: number; // Minimum (Southernmost) latitude
-  westLong: number; // Western longitude
-};
-
-/**
- * Settings type encompasses user-specific configuration details.
- */
-export type Settings = {
-  id: number; // Only one entry, keyed with MASTER_SETTINGS_KEY
-
-  activeDid?: string; // Active Decentralized ID
-  apiServer?: string; // API server URL
-  firstName?: string; // User's first name
-  isRegistered?: boolean;
-  lastName?: string; // deprecated - put all names in firstName
-  lastNotifiedClaimId?: string; // Last notified claim ID
-  lastViewedClaimId?: string; // Last viewed claim ID
-  reminderTime?: number; // Time in milliseconds since UNIX epoch for reminders
-  reminderOn?: boolean; // Toggle to enable or disable reminders
-
-  // Array of named search boxes defined by bounding boxes
-  searchBoxes?: Array<{
-    name: string;
-    bbox: BoundingBox;
-  }>;
-
-  showContactGivesInline?: boolean; // Display contact inline or not
-  vapid?: string; // VAPID (Voluntary Application Server Identification) field for web push
-  warnIfProdServer?: boolean; // Warn if using a production server
-  warnIfTestServer?: boolean; // Warn if using a testing server
-  webPushServer?: string; // Web Push server URL
-};
-
-/**
- * Schema for the Settings table in the database.
- */
-export const SettingsSchema = {
-  settings: "id",
-};
-
-/**
- * Constants.
- */
-export const MASTER_SETTINGS_KEY = 1;

src/libs/crypto/index.ts

@@ -1,15 +1,9 @@
 import { IIdentifier } from "@veramo/core";
+import { DEFAULT_DID_PROVIDER_NAME } from "../veramo/setup";
 import { getRandomBytesSync } from "ethereum-cryptography/random";
 import { entropyToMnemonic } from "ethereum-cryptography/bip39";
 import { wordlist } from "ethereum-cryptography/bip39/wordlists/english";
 import { HDNode } from "@ethersproject/hdnode";
-import * as didJwt from "did-jwt";
-import * as u8a from "uint8arrays";
-
-import { ENDORSER_JWT_URL_LOCATION } from "@/libs/endorserServer";
-import { DEFAULT_DID_PROVIDER_NAME } from "../veramo/setup";
-
-export const DEFAULT_ROOT_DERIVATION_PATH = "m/84737769'/0'/0'/0'";
 
 /**
  *
@@ -24,7 +18,7 @@ export const newIdentifier = (
   address: string,
   publicHex: string,
   privateHex: string,
-  derivationPath: string,
+  derivationPath: string
 ): Omit<IIdentifier, keyof "provider"> => {
   return {
     did: DEFAULT_DID_PROVIDER_NAME + ":" + address,
@@ -43,25 +37,19 @@ export const newIdentifier = (
   };
 };
 
-/**
- *
- *
- * @param {string} mnemonic
- * @return {*}  {[string, string, string, string]}
- */
 export const deriveAddress = (
-  mnemonic: string,
+  mnemonic: string
-  derivationPath: string = DEFAULT_ROOT_DERIVATION_PATH,
 ): [string, string, string, string] => {
+  const UPORT_ROOT_DERIVATION_PATH = "m/7696500'/0'/0'/0'";
   mnemonic = mnemonic.trim().toLowerCase();
 
   const hdnode: HDNode = HDNode.fromMnemonic(mnemonic);
-  const rootNode: HDNode = hdnode.derivePath(derivationPath);
+  const rootNode: HDNode = hdnode.derivePath(UPORT_ROOT_DERIVATION_PATH);
   const privateHex = rootNode.privateKey.substring(2); // original starts with '0x'
   const publicHex = rootNode.publicKey.substring(2); // original starts with '0x'
   const address = rootNode.address;
 
-  return [address, privateHex, publicHex, derivationPath];
+  return [address, privateHex, publicHex, UPORT_ROOT_DERIVATION_PATH];
 };
 
 /**
@@ -69,123 +57,9 @@ export const deriveAddress = (
  *
  * @return {*}  {string}
  */
-export const generateSeed = (): string => {
+export const createIdentifier = (): string => {
   const entropy: Uint8Array = getRandomBytesSync(32);
   const mnemonic = entropyToMnemonic(entropy, wordlist);
 
   return mnemonic;
 };
-
-/**
- * Retreive an access token
- *
- * @param {IIdentifier} identifier
- * @return {*}
- */
-export const accessToken = async (identifier: IIdentifier) => {
-  const did: string = identifier.did;
-  const privateKeyHex: string = identifier.keys[0].privateKeyHex as string;
-
-  const signer = SimpleSigner(privateKeyHex);
-
-  const nowEpoch = Math.floor(Date.now() / 1000);
-  const endEpoch = nowEpoch + 60; // add one minute
-
-  const tokenPayload = { exp: endEpoch, iat: nowEpoch, iss: did };
-  const alg = undefined; // defaults to 'ES256K', more standardized but harder to verify vs ES256K-R
-  const jwt: string = await didJwt.createJWT(tokenPayload, {
-    alg,
-    issuer: did,
-    signer,
-  });
-  return jwt;
-};
-
-export const sign = async (privateKeyHex: string) => {
-  const signer = SimpleSigner(privateKeyHex);
-
-  return signer;
-};
-
-/**
- *  Copied out of did-jwt since it's deprecated in that library.
- *
- *  The SimpleSigner returns a configured function for signing data.
- *
- *  @example
- *  const signer = SimpleSigner(process.env.PRIVATE_KEY)
- *  signer(data, (err, signature) => {
- *    ...
- *  })
- *
- *  @param    {String}         hexPrivateKey    a hex encoded private key
- *  @return   {Function}                     a configured signer function
- */
-export function SimpleSigner(hexPrivateKey: string): didJwt.Signer {
-  const signer = didJwt.ES256KSigner(didJwt.hexToBytes(hexPrivateKey), true);
-  return async (data) => {
-    const signature = (await signer(data)) as string;
-    return fromJose(signature);
-  };
-}
-
-// from did-jwt/util; see SimpleSigner above
-export function fromJose(signature: string): {
-  r: string;
-  s: string;
-  recoveryParam?: number;
-} {
-  const signatureBytes: Uint8Array = didJwt.base64ToBytes(signature);
-  if (signatureBytes.length < 64 || signatureBytes.length > 65) {
-    throw new TypeError(
-      `Wrong size for signature. Expected 64 or 65 bytes, but got ${signatureBytes.length}`,
-    );
-  }
-  const r = bytesToHex(signatureBytes.slice(0, 32));
-  const s = bytesToHex(signatureBytes.slice(32, 64));
-  const recoveryParam =
-    signatureBytes.length === 65 ? signatureBytes[64] : undefined;
-  return { r, s, recoveryParam };
-}
-
-// from did-jwt/util; see SimpleSigner above
-export function bytesToHex(b: Uint8Array): string {
-  return u8a.toString(b, "base16");
-}
-
-/**
- @return results of uportJwtPayload:
- { iat: number, iss: string (DID), own: { name, publicEncKey (base64-encoded key) } }
-
- Note that similar code is also contained in time-safari
- */
-export const getContactPayloadFromJwtUrl = (jwtUrlText: string) => {
-  let jwtText = jwtUrlText;
-  const endorserContextLoc = jwtText.indexOf(ENDORSER_JWT_URL_LOCATION);
-  if (endorserContextLoc > -1) {
-    jwtText = jwtText.substring(
-      endorserContextLoc + ENDORSER_JWT_URL_LOCATION.length,
-    );
-  }
-
-  // JWT format: { header, payload, signature, data }
-  const jwt = didJwt.decodeJWT(jwtText);
-
-  return jwt.payload;
-};
-
-export const nextDerivationPath = (origDerivPath: string) => {
-  let lastStr = origDerivPath.split("/").slice(-1)[0];
-  if (lastStr.endsWith("'")) {
-    lastStr = lastStr.slice(0, -1);
-  }
-  const lastNum = parseInt(lastStr, 10);
-  const newLastNum = lastNum + 1;
-  const newLastStr = newLastNum.toString() + (lastStr.endsWith("'") ? "'" : "");
-  const newDerivPath = origDerivPath
-    .split("/")
-    .slice(0, -1)
-    .concat([newLastStr])
-    .join("/");
-  return newDerivPath;
-};

src/libs/endorserServer.ts

@@ -1,510 +0,0 @@
-import * as R from "ramda";
-import { IIdentifier } from "@veramo/core";
-import { accessToken, SimpleSigner } from "@/libs/crypto";
-import * as didJwt from "did-jwt";
-import { Axios, AxiosResponse } from "axios";
-import { Contact } from "@/db/tables/contacts";
-
-export const SCHEMA_ORG_CONTEXT = "https://schema.org";
-// the object in RegisterAction claims
-export const SERVICE_ID = "endorser.ch";
-// the prefix for the contact URL
-export const CONTACT_URL_PREFIX = "https://endorser.ch";
-// the suffix for the contact URL
-export const ENDORSER_JWT_URL_LOCATION = "/contact?jwt=";
-// the prefix for handle IDs, the permanent ID for claims on Endorser
-export const ENDORSER_CH_HANDLE_PREFIX = "https://endorser.ch/entity/";
-
-export interface AgreeVerifiableCredential {
-  "@context": string;
-  "@type": string;
-  // "any" because arbitrary objects can be subject of agreement
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  object: Record<any, any>;
-}
-
-export interface GiverInputInfo {
-  did?: string;
-  name?: string;
-}
-
-export interface GiverOutputInfo {
-  action: string;
-  giver?: GiverInputInfo;
-  description?: string;
-  hours?: number;
-}
-
-export interface ClaimResult {
-  success: { claimId: string; handleId: string };
-  error: { code: string; message: string };
-}
-
-export interface GenericVerifiableCredential {
-  "@context": string;
-  "@type": string;
-}
-
-export interface GenericServerRecord extends GenericVerifiableCredential {
-  handleId?: string;
-  id?: string;
-  issuedAt?: string;
-  issuer?: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  claim: Record<any, any>;
-}
-export const BLANK_GENERIC_SERVER_RECORD: GenericServerRecord = {
-  "@context": SCHEMA_ORG_CONTEXT,
-  "@type": "",
-  claim: {},
-};
-
-export interface GiveServerRecord {
-  agentDid: string;
-  amount: number;
-  amountConfirmed: number;
-  description: string;
-  fullClaim: GiveVerifiableCredential;
-  handleId: string;
-  issuedAt: string;
-  recipientDid: string;
-  unit: string;
-}
-
-export interface OfferServerRecord {
-  amount: number;
-  amountGiven: number;
-  offeredByDid: string;
-  recipientDid: string;
-  requirementsMet: boolean;
-  unit: string;
-  validThrough: string;
-}
-
-// Note that previous VCs may have additional fields.
-// https://endorser.ch/doc/html/transactions.html#id4
-export interface GiveVerifiableCredential {
-  "@context"?: string; // optional when embedded, eg. in an Agree
-  "@type": "GiveAction";
-  agent?: { identifier: string };
-  description?: string;
-  fulfills?: { "@type": string; identifier?: string; lastClaimId?: string };
-  identifier?: string;
-  object?: { amountOfThisGood: number; unitCode: string };
-  recipient?: { identifier: string };
-}
-
-// Note that previous VCs may have additional fields.
-// https://endorser.ch/doc/html/transactions.html#id8
-export interface OfferVerifiableCredential {
-  "@context"?: string; // optional when embedded, eg. in an Agree
-  "@type": "Offer";
-  description?: string;
-  includesObject?: { amountOfThisGood: number; unitCode: string };
-  itemOffered?: {
-    description?: string;
-    isPartOf?: { identifier?: string; lastClaimId?: string; "@type"?: string };
-  };
-  offeredBy?: { identifier: string };
-  validThrough?: string;
-}
-
-// Note that previous VCs may have additional fields.
-// https://endorser.ch/doc/html/transactions.html#id7
-export interface PlanVerifiableCredential {
-  "@context": "https://schema.org";
-  "@type": "PlanAction";
-  name: string;
-  description: string;
-  identifier?: string;
-  location?: {
-    geo: { "@type": "GeoCoordinates"; latitude: number; longitude: number };
-  };
-}
-
-export interface PlanServerRecord {
-  agentDid?: string; // optional, if the issuer wants someone else to manage as well
-  description: string;
-  endTime?: string;
-  issuerDid: string;
-  handleId: string;
-  locLat?: number;
-  locLon?: number;
-  startTime?: string;
-  url?: string;
-}
-
-export interface RegisterVerifiableCredential {
-  "@context": string;
-  "@type": string;
-  agent: { identifier: string };
-  object: string;
-  participant: { identifier: string };
-}
-
-export interface InternalError {
-  error: string; // for system logging
-  userMessage?: string; // for user display
-}
-
-// This is used to check for hidden info.
-// See https://github.com/trentlarson/endorser-ch/blob/0cb626f803028e7d9c67f095858a9fc8542e3dbd/server/api/services/util.js#L6
-const HIDDEN_DID = "did:none:HIDDEN";
-
-export function isHiddenDid(did: string) {
-  return did === HIDDEN_DID;
-}
-
-/**
- * @return true for any nested string where func(input) === true
- *
- * Similar logic is found in endorser-mobile.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function testRecursivelyOnString(func: (arg0: any) => boolean, input: any) {
-  if (Object.prototype.toString.call(input) === "[object String]") {
-    return func(input);
-  } else if (input instanceof Object) {
-    if (!Array.isArray(input)) {
-      // it's an object
-      for (const key in input) {
-        if (testRecursivelyOnString(func, input[key])) {
-          return true;
-        }
-      }
-    } else {
-      // it's an array
-      for (const value of input) {
-        if (testRecursivelyOnString(func, value)) {
-          return true;
-        }
-      }
-    }
-    return false;
-  } else {
-    return false;
-  }
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function containsHiddenDid(obj: any) {
-  return testRecursivelyOnString(isHiddenDid, obj);
-}
-
-export function stripEndorserPrefix(claimId: string) {
-  if (claimId && claimId.startsWith(ENDORSER_CH_HANDLE_PREFIX)) {
-    return claimId.substring(ENDORSER_CH_HANDLE_PREFIX.length);
-  } else {
-    return claimId;
-  }
-}
-
-// similar logic is found in endorser-mobile
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function removeSchemaContext(obj: any) {
-  return obj["@context"] === SCHEMA_ORG_CONTEXT
-    ? R.omit(["@context"], obj)
-    : obj;
-}
-
-// similar logic is found in endorser-mobile
-export function addLastClaimOrHandleAsIdIfMissing(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  obj: any,
-  lastClaimId?: string,
-  handleId?: string,
-) {
-  if (!obj.identifier && lastClaimId) {
-    const result = R.clone(obj);
-    result.lastClaimId = lastClaimId;
-    return result;
-  } else if (!obj.identifier && handleId) {
-    const result = R.clone(obj);
-    result.identifier = handleId;
-    return result;
-  } else {
-    return obj;
-  }
-}
-
-// return clone of object without any nested *VisibleToDids keys
-// similar logic is found in endorser-mobile
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function removeVisibleToDids(input: any): any {
-  if (input instanceof Object) {
-    if (!Array.isArray(input)) {
-      // it's an object
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const result: Record<string, any> = {};
-      for (const key in input) {
-        if (!key.endsWith("VisibleToDids")) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          result[key] = removeVisibleToDids(R.clone(input[key]));
-        }
-      }
-      return result;
-    } else {
-      // it's an array
-      return R.map(removeVisibleToDids, input);
-    }
-    return false;
-  } else {
-    return input;
-  }
-}
-
-/**
- always returns text, maybe UNNAMED_VISIBLE or UNKNOWN_ENTITY
-
- Similar logic is found in endorser-mobile.
- **/
-export function didInfo(
-  did: string,
-  activeDid: string,
-  allMyDids: string[],
-  contacts: Contact[],
-): string {
-  if (!did) return "Someone Anonymous";
-
-  const myId = R.find(R.equals(did), allMyDids);
-  if (myId) return `You${myId !== activeDid ? " (Alt ID)" : ""}`;
-
-  const contact = R.find((c) => c.did === did, contacts);
-  return contact
-    ? contact.name || "Contact With No Name"
-    : isHiddenDid(did)
-      ? "Someone Not In Network"
-      : "Someone Not In Contacts";
-}
-
-export interface ResultWithType {
-  type: string;
-}
-
-export interface SuccessResult extends ResultWithType {
-  type: "success";
-  response: AxiosResponse<ClaimResult>;
-}
-
-export interface ErrorResult {
-  type: "error";
-  error: InternalError;
-}
-
-export type CreateAndSubmitClaimResult = SuccessResult | ErrorResult;
-
-/**
- * For result, see https://api.endorser.ch/api-docs/#/claims/post_api_v2_claim
- *
- * @param identity
- * @param fromDid may be null
- * @param toDid
- * @param description may be null; should have this or hours
- * @param hours may be null; should have this or description
- */
-export async function createAndSubmitGive(
-  axios: Axios,
-  apiServer: string,
-  identity: IIdentifier,
-  fromDid?: string,
-  toDid?: string,
-  description?: string,
-  hours?: number,
-  unitCode?: string,
-  fulfillsProjectHandleId?: string,
-): Promise<CreateAndSubmitClaimResult> {
-  const vcClaim: GiveVerifiableCredential = {
-    "@context": "https://schema.org",
-    "@type": "GiveAction",
-    recipient: toDid ? { identifier: toDid } : undefined,
-    agent: fromDid ? { identifier: fromDid } : undefined,
-    description: description || undefined,
-    object: hours
-      ? { amountOfThisGood: hours, unitCode: unitCode || "HUR" }
-      : undefined,
-    fulfills: fulfillsProjectHandleId
-      ? { "@type": "PlanAction", identifier: fulfillsProjectHandleId }
-      : undefined,
-  };
-  return createAndSubmitClaim(
-    vcClaim as GenericServerRecord,
-    identity,
-    apiServer,
-    axios,
-  );
-}
-
-/**
- * For result, see https://api.endorser.ch/api-docs/#/claims/post_api_v2_claim
- *
- * @param identity
- * @param description may be null; should have this or hours
- * @param hours may be null; should have this or description
- * @param expirationDate ISO 8601 date string YYYY-MM-DD (may be null)
- * @param fulfillsProjectHandleId ID of project to which this contributes (may be null)
- */
-export async function createAndSubmitOffer(
-  axios: Axios,
-  apiServer: string,
-  identity: IIdentifier,
-  description?: string,
-  hours?: number,
-  expirationDate?: string,
-  fulfillsProjectHandleId?: string,
-): Promise<CreateAndSubmitClaimResult> {
-  const vcClaim: OfferVerifiableCredential = {
-    "@context": "https://schema.org",
-    "@type": "Offer",
-    offeredBy: { identifier: identity.did },
-    validThrough: expirationDate || undefined,
-  };
-  if (hours) {
-    vcClaim.includesObject = {
-      amountOfThisGood: hours,
-      unitCode: "HUR",
-    };
-  }
-  if (description) {
-    vcClaim.itemOffered = { description };
-  }
-  if (fulfillsProjectHandleId) {
-    vcClaim.itemOffered = vcClaim.itemOffered || {};
-    vcClaim.itemOffered.isPartOf = {
-      "@type": "PlanAction",
-      identifier: fulfillsProjectHandleId,
-    };
-  }
-  return createAndSubmitClaim(
-    vcClaim as GenericServerRecord,
-    identity,
-    apiServer,
-    axios,
-  );
-}
-
-export async function createAndSubmitClaim(
-  vcClaim: GenericVerifiableCredential,
-  identity: IIdentifier,
-  apiServer: string,
-  axios: Axios,
-): Promise<CreateAndSubmitClaimResult> {
-  try {
-    const vcPayload = {
-      vc: {
-        "@context": ["https://www.w3.org/2018/credentials/v1"],
-        type: ["VerifiableCredential"],
-        credentialSubject: vcClaim,
-      },
-    };
-
-    // Create a signature using private key of identity
-    const firstKey = identity.keys[0];
-    const privateKeyHex = firstKey?.privateKeyHex;
-
-    if (!privateKeyHex) {
-      throw {
-        error: "No private key",
-        message: `Your identifier ${identity.did} is not configured correctly. Use a different identifier.`,
-      };
-    }
-
-    const signer = await SimpleSigner(privateKeyHex);
-
-    // Create a JWT for the request
-    const vcJwt: string = await didJwt.createJWT(vcPayload, {
-      issuer: identity.did,
-      signer,
-    });
-
-    // Make the xhr request payload
-    const payload = JSON.stringify({ jwtEncoded: vcJwt });
-    const url = `${apiServer}/api/v2/claim`;
-    const token = await accessToken(identity);
-
-    const response = await axios.post(url, payload, {
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${token}`,
-      },
-    });
-
-    return { type: "success", response };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } catch (error: any) {
-    console.log("Error creating claim:", error);
-    const errorMessage: string =
-      error.response?.data?.error?.message || error.message || "Unknown error";
-
-    return {
-      type: "error",
-      error: {
-        error: errorMessage,
-        userMessage: "Failed to create and submit the claim.",
-      },
-    };
-  }
-}
-
-// from https://stackoverflow.com/a/175787/845494
-//
-export function isNumeric(str: string): boolean {
-  return !isNaN(+str);
-}
-
-export function numberOrZero(str: string): number {
-  return isNumeric(str) ? +str : 0;
-}
-
-export interface ErrorResponse {
-  error?: {
-    message?: string;
-  };
-}
-
-export interface RateLimits {
-  doneClaimsThisWeek: string;
-  doneRegistrationsThisMonth: string;
-  maxClaimsPerWeek: string;
-  maxRegistrationsPerMonth: string;
-  nextMonthBeginDateTime: string;
-  nextWeekBeginDateTime: string;
-}
-
-/**
- * Represents data about a project
- **/
-export interface ProjectData {
-  /**
-   * Name of the project
-   **/
-  name: string;
-  /**
-   * Description of the project
-   **/
-  description: string;
-  /**
-   * URL referencing information about the project
-   **/
-  handleId: string;
-  /**
-   * The DID of the issuer
-   */
-  issuerDid: string;
-  /**
-   * The Identier of the project
-   **/
-  rowid: string;
-}
-
-export interface VerifiableCredential {
-  "@context": string;
-  "@type": string;
-  name: string;
-  description: string;
-  identifier?: string;
-}
-
-export interface WorldProperties {
-  startTime?: string;
-  endTime?: string;
-}

src/libs/util.ts

@@ -1,74 +0,0 @@
-// many of these are also found in endorser-mobile utility.ts
-
-import axios, { AxiosResponse } from "axios";
-
-import { DEFAULT_PUSH_SERVER } from "@/constants/app";
-import { db } from "@/db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const Buffer = require("buffer/").Buffer;
-
-export const isGlobalUri = (uri: string) => {
-  return uri && uri.match(new RegExp(/^[A-Za-z][A-Za-z0-9+.-]+:/));
-};
-
-// If you edit this, check that the numbers still line up on the side in the alert (on mobile, too),
-// and make sure they can take all actions while the notification shows.
-export const ONBOARD_MESSAGE =
-  "1) Check that they've entered their name. 2) Go to the scanning page: use the Contacts page and click on the QR icon at the top, and then scan and register them. 3) Have them go to that page and scan you.";
-
-export const sendTestThroughPushServer = async (
-  subscription: PushSubscription,
-  skipFilter: boolean,
-): Promise<AxiosResponse> => {
-  await db.open();
-  const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-  let pushUrl: string = DEFAULT_PUSH_SERVER as string;
-  if (settings?.webPushServer) {
-    pushUrl = settings.webPushServer;
-  }
-
-  // This is a special value that tells the service worker to send a direct notification to the device, skipping filters.
-  // This is shared with the service worker and should be a constant. Look for the same name in additional-scripts.js
-  // Use something other than "Daily Update" https://gitea.anomalistdesign.com/trent_larson/py-push-server/src/commit/3c0e196c11bc98060ec5934e99e7dbd591b5da4d/app.py#L213
-  const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";
-
-  const auth = Buffer.from(subscription.getKey("auth"));
-  const authB64 = auth
-    .toString("base64")
-    .replace(/\+/g, "-")
-    .replace(/\//g, "_")
-    .replace(/=+$/, "");
-  const p256dh = Buffer.from(subscription.getKey("p256dh"));
-  const p256dhB64 = p256dh
-    .toString("base64")
-    .replace(/\+/g, "-")
-    .replace(/\//g, "_")
-    .replace(/=+$/, "");
-  const newPayload = {
-    endpoint: subscription.endpoint,
-    keys: {
-      auth: authB64,
-      p256dh: p256dhB64,
-    },
-    message: `Test, where you will see this message ${
-      skipFilter ? "un" : ""
-    }filtered.`,
-    title: skipFilter ? DIRECT_PUSH_TITLE : "Your Web Push",
-  };
-  console.log("Sending a test web push message:", newPayload);
-  const payloadStr = JSON.stringify(newPayload);
-  const response = await axios.post(
-    pushUrl + "/web-push/send-test",
-    payloadStr,
-    {
-      headers: {
-        "Content-Type": "application/json",
-      },
-    },
-  );
-
-  console.log("Got response from web push server:", response);
-  return response;
-};

src/libs/veramo/appSlice.ts

@@ -0,0 +1,100 @@
+/* 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 });
+ */

src/libs/veramo/setup.ts

@@ -1,7 +1,151 @@
-// see also ../constants/app.ts and
+// Created from the setup in https://veramo.io/docs/guides/react_native
 
+// Core interfaces
+/* import {
+  createAgent,
+  IDIDManager,
+  IResolver,
+  IDataStore,
+  IKeyManager,
+} from "@veramo/core";
+ */
+// Core identity manager plugin
+//import { DIDManager } from "@veramo/did-manager";
+
+// Ethr did identity provider
+//import { EthrDIDProvider } from "@veramo/did-provider-ethr";
+
+// Core key manager plugin
+//import { KeyManager } from "@veramo/key-manager";
+
+// Custom key management system for RN
+//import { KeyManagementSystem } from '@veramo/kms-local-react-native'
+
+// Custom resolver
+// Custom resolvers
+//import { DIDResolverPlugin } from "@veramo/did-resolver";
+/* import { Resolver } from "did-resolver";
+import { getResolver as ethrDidResolver } from "ethr-did-resolver";
+import { getResolver as webDidResolver } from "web-did-resolver";
+ */
+// for VCs and VPs https://veramo.io/docs/api/credential-w3c
+//import { CredentialIssuer } from '@veramo/credential-w3c'
+
+// Storage plugin using TypeOrm
+/* import {
+  Entities,
+  KeyStore,
+  DIDStore,
+  IDataStoreORM,
+} from "@veramo/data-store";
+ */
+// TypeORM is installed with @veramo/typeorm
+//import { createConnection } from 'typeorm'
+
+//import * as R from "ramda";
+
+/*
+import { Contact } from '../entity/contact'
+import { Settings } from '../entity/settings'
+import { PrivateData } from '../entity/privateData'
+
+import { Initial1616938713828 }          from '../migration/1616938713828-initial'
+import { SettingsContacts1616967972293 } from '../migration/1616967972293-settings-contacts'
+import { EncryptedSeed1637856484788 }    from '../migration/1637856484788-EncryptedSeed'
+import { HomeScreenConfig1639947962124 } from '../migration/1639947962124-HomeScreenConfig'
+import { HandlePublicKeys1652142819353 } from '../migration/1652142819353-HandlePublicKeys'
+import { LastClaimsSeen1656811846836 }   from '../migration/1656811846836-LastClaimsSeen'
+import { ContactRegistered1662256903367 }from '../migration/1662256903367-ContactRegistered'
+import { PrivateData1663080623479 }      from '../migration/1663080623479-PrivateData'
+
+const ALL_ENTITIES = Entities.concat([Contact, Settings, PrivateData])
+
+// Create react native DB connection configured by ormconfig.js
+
+export const dbConnection = createConnection({
+  database: 'endorser-mobile.sqlite',
+  entities: ALL_ENTITIES,
+  location: 'default',
+  logging: ['error', 'info', 'warn'],
+  migrations: [ Initial1616938713828, SettingsContacts1616967972293, EncryptedSeed1637856484788, HomeScreenConfig1639947962124, HandlePublicKeys1652142819353, LastClaimsSeen1656811846836, ContactRegistered1662256903367, PrivateData1663080623479 ],
+  migrationsRun: true,
+  type: 'react-native',
+})
+*/
 function didProviderName(netName: string) {
   return "did:ethr" + (netName === "mainnet" ? "" : ":" + netName);
 }
 
-export const DEFAULT_DID_PROVIDER_NAME = didProviderName("mainnet");
+//const NETWORK_NAMES = ["mainnet", "rinkeby"];
+
+const DEFAULT_DID_PROVIDER_NETWORK_NAME = "mainnet";
+
+export const DEFAULT_DID_PROVIDER_NAME = didProviderName(
+  DEFAULT_DID_PROVIDER_NETWORK_NAME
+);
+
+export const HANDY_APP = false;
+
+// this is used as the object in RegisterAction claims
+export const SERVICE_ID = "endorser.ch";
+
+//const INFURA_PROJECT_ID = "INFURA_PROJECT_ID";
+/*
+const providers = {}
+NETWORK_NAMES.forEach((networkName) => {
+  providers[didProviderName(networkName)] = new EthrDIDProvider({
+    defaultKms: 'local',
+    network: networkName,
+    rpcUrl: 'https://' + networkName + '.infura.io/v3/' + INFURA_PROJECT_ID,
+    gas: 1000001,
+    ttl: 60 * 60 * 24 * 30 * 12 + 1,
+  })
+})
+
+
+const didManager = new DIDManager({
+  store: new DIDStore(dbConnection),
+  defaultProvider: DEFAULT_DID_PROVIDER_NAME,
+  providers: providers,
+})
+*/
+
+/* const basicDidResolvers = NETWORK_NAMES.map((networkName) => [
+  networkName,
+  new Resolver({
+    ethr: ethrDidResolver({
+      networks: [
+        {
+          name: networkName,
+          rpcUrl:
+            "https://" + networkName + ".infura.io/v3/" + INFURA_PROJECT_ID,
+        },
+      ],
+    }).ethr,
+    web: webDidResolver().web,
+  }),
+]);
+
+const basicResolverMap = R.fromPairs(basicDidResolvers)
+
+export const DEFAULT_BASIC_RESOLVER = basicResolverMap[DEFAULT_DID_PROVIDER_NETWORK_NAME]
+
+const agentDidResolvers = NETWORK_NAMES.map((networkName) => {
+  return new DIDResolverPlugin({
+    resolver: basicResolverMap[networkName],
+  })
+})
+
+let allPlugins = [
+  new CredentialIssuer(),
+  new KeyManager({
+    store: new KeyStore(dbConnection),
+    kms: {
+      local: new KeyManagementSystem(),
+    },
+  }),
+  didManager,
+].concat(agentDidResolvers)
+*/
+
+//export const agent = createAgent<IDIDManager & IKeyManager & IDataStore & IDataStoreORM & IResolver>({ plugins: allPlugins })

src/main.ts

@@ -1,129 +1,55 @@
+import { VueDexiePlugin } from "@/plugins/dexieVuePlugin";
 import { createPinia } from "pinia";
 import { createApp } from "vue";
 import App from "./App.vue";
 import "./registerServiceWorker";
 import router from "./router";
-import axios from "axios";
-import VueAxios from "vue-axios";
-import Notifications from "notiwind";
-
 import "./assets/styles/tailwind.css";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
-  faArrowLeft,
-  faArrowRight,
-  faArrowUpRightFromSquare,
-  faBan,
-  faBitcoinSign,
-  faBurst,
-  faCalendar,
   faChevronLeft,
-  faChevronRight,
-  faCircle,
-  faCircleCheck,
-  faCircleInfo,
-  faCircleQuestion,
-  faCircleUser,
-  faClock,
-  faCoins,
-  faComment,
-  faCopy,
-  faDollar,
-  faEllipsisVertical,
-  faEye,
-  faEyeSlash,
-  faFileLines,
-  faFloppyDisk,
-  faFolderOpen,
-  faGift,
-  faGlobe,
-  faHand,
   faHouseChimney,
-  faLocationDot,
-  faLongArrowAltLeft,
-  faLongArrowAltRight,
   faMagnifyingGlass,
-  faMessage,
+  faFolderOpen,
-  faPen,
+  faHand,
-  faPersonCircleCheck,
+  faCircleUser,
-  faPersonCircleQuestion,
+  faCopy,
-  faPlus,
-  faQuestion,
-  faQrcode,
-  faRotate,
   faShareNodes,
-  faSpinner,
+  faQrcode,
-  faSquareCaretDown,
-  faSquareCaretUp,
-  faSquarePlus,
-  faTrashCan,
-  faTriangleExclamation,
   faUser,
-  faUsers,
+  faPen,
-  faXmark,
+  faTrashCan,
+  faCalendar,
+  faEllipsisVertical,
+  faSpinner,
+  faCircleCheck,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
-  faArrowLeft,
-  faArrowRight,
-  faArrowUpRightFromSquare,
-  faBan,
-  faBitcoinSign,
-  faBurst,
-  faCalendar,
   faChevronLeft,
-  faChevronRight,
-  faCircle,
-  faCircleCheck,
-  faCircleInfo,
-  faCircleQuestion,
-  faCircleUser,
-  faClock,
-  faCoins,
-  faComment,
-  faCopy,
-  faDollar,
-  faEllipsisVertical,
-  faEye,
-  faEyeSlash,
-  faFileLines,
-  faFloppyDisk,
-  faFolderOpen,
-  faGift,
-  faGlobe,
-  faHand,
   faHouseChimney,
-  faLocationDot,
-  faLongArrowAltLeft,
-  faLongArrowAltRight,
   faMagnifyingGlass,
-  faMessage,
+  faFolderOpen,
-  faPen,
+  faHand,
-  faPersonCircleCheck,
+  faCircleUser,
-  faPersonCircleQuestion,
+  faCopy,
-  faPlus,
-  faQrcode,
-  faQuestion,
-  faRotate,
   faShareNodes,
-  faSpinner,
+  faQrcode,
-  faSquareCaretDown,
-  faSquareCaretUp,
-  faSquarePlus,
-  faTrashCan,
-  faTriangleExclamation,
   faUser,
-  faUsers,
+  faPen,
-  faXmark,
+  faTrashCan,
+  faCalendar,
+  faEllipsisVertical,
+  faSpinner,
+  faCircleCheck
 );
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 createApp(App)
   .component("fa", FontAwesomeIcon)
+  .use(VueDexiePlugin())
   .use(createPinia())
-  .use(VueAxios, axios)
   .use(router)
-  .use(Notifications)
   .mount("#app");

src/plugins/dexieVuePlugin/index.ts

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import { PluginObject } from 'vue'
+
+// define the plugin class
+class VueDexiePlugin implements PluginObject<{}> {
+  // the install method is called when the plugin is installed
+  public static install(app: typeof Vue): void {
+    // define a custom property
+    app.$myProperty = 'Hello, World!'
+
+    // define a custom method
+    app.prototype.$myMethod = (): string => {
+      return this.$myProperty
+    }
+  }
+}
+
+export default new VueDexiePlugin()

src/registerServiceWorker.ts

@@ -3,11 +3,11 @@
 import { register } from "register-service-worker";
 
 if (process.env.NODE_ENV === "production") {
-  register("/additional-scripts.js", {
+  register(`${process.env.BASE_URL}service-worker.js`, {
     ready() {
       console.log(
         "App is being served from cache by a service worker.\n" +
-          "For more details, visit https://goo.gl/AFskqB",
+          "For more details, visit https://goo.gl/AFskqB"
       );
     },
     registered() {
@@ -24,7 +24,7 @@ if (process.env.NODE_ENV === "production") {
     },
     offline() {
       console.log(
-        "No internet connection found. App is running in offline mode.",
+        "No internet connection found. App is running in offline mode."
       );
     },
     error(error) {

src/router/index.ts

@@ -1,38 +1,27 @@
-import {
+import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
-  createRouter,
+import { useAppStore } from "../store/app";
-  createWebHistory,
+import HomeView from "../views/HomeView.vue";
-  NavigationGuardNext,
-  RouteLocationNormalized,
-  RouteRecordRaw,
-} from "vue-router";
-import { accountsDB } from "@/db/index";
-
-/**
- *
- * @param to :RouteLocationNormalized
- * @param from :RouteLocationNormalized
- * @param next :NavigationGuardNext
- */
-const enterOrStart = async (
-  to: RouteLocationNormalized,
-  from: RouteLocationNormalized,
-  next: NavigationGuardNext,
-) => {
-  await accountsDB.open();
-  const num_accounts = await accountsDB.accounts.count();
-  if (num_accounts > 0) {
-    next();
-  } else {
-    next({ name: "start" });
-  }
-};
 
 const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
     name: "home",
+    component: HomeView,
+  },
+  {
+    path: "/about",
+    name: "about",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
     component: () =>
-      import(/* webpackChunkName: "home" */ "../views/HomeView.vue"),
+      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
+  },
+  {
+    path: "/start",
+    name: "start",
+    component: () =>
+      import(/* webpackChunkName: "start" */ "../views/StartView.vue"),
   },
   {
     path: "/account",
@@ -40,12 +29,6 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "account" */ "../views/AccountViewView.vue"),
   },
-  {
-    path: "/claim/:id?",
-    name: "claim",
-    component: () =>
-      import(/* webpackChunkName: "claim" */ "../views/ClaimView.vue"),
-  },
   {
     path: "/confirm-contact",
     name: "confirm-contact",
@@ -55,63 +38,19 @@ const routes: Array<RouteRecordRaw> = [
       ),
   },
   {
-    path: "/contact-amounts",
+    path: "/scan-contact",
-    name: "contact-amounts",
+    name: "scan-contact",
     component: () =>
       import(
-        /* webpackChunkName: "contact-amounts" */ "../views/ContactAmountsView.vue"
+        /* webpackChunkName: "scan-contact" */ "../views/ContactScanView.vue"
       ),
   },
-  {
-    path: "/contact-gives",
-    name: "contact-gives",
-    component: () =>
-      import(
-        /* webpackChunkName: "contact-gives" */ "../views/ContactGiftingView.vue"
-      ),
-  },
-  {
-    path: "/contact-qr",
-    name: "contact-qr",
-    component: () =>
-      import(
-        /* webpackChunkName: "contact-qr" */ "../views/ContactQRScanShowView.vue"
-      ),
-  },
-  {
-    path: "/contacts",
-    name: "contacts",
-    component: () =>
-      import(/* webpackChunkName: "contacts" */ "../views/ContactsView.vue"),
-  },
   {
     path: "/discover",
     name: "discover",
     component: () =>
       import(/* webpackChunkName: "discover" */ "../views/DiscoverView.vue"),
   },
-  {
-    path: "/help",
-    name: "help",
-    component: () =>
-      import(/* webpackChunkName: "help" */ "../views/HelpView.vue"),
-  },
-  {
-    path: "/help-notifications",
-    name: "help-notifications",
-    component: () =>
-      import(
-        /* webpackChunkName: "help-notifications" */ "../views/HelpNotificationsView.vue"
-      ),
-  },
-  {
-    path: "/identity-switcher",
-    name: "identity-switcher",
-    component: () =>
-      import(
-        /* webpackChunkName: "identity-switcher" */ "../views/IdentitySwitcherView.vue"
-      ),
-  },
   {
     path: "/import-account",
     name: "import-account",
@@ -120,14 +59,6 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: "import-account" */ "../views/ImportAccountView.vue"
       ),
   },
-  {
-    path: "/import-derive",
-    name: "import-derive",
-    component: () =>
-      import(
-        /* webpackChunkName: "import-derive" */ "../views/ImportDerivedAccountView.vue"
-      ),
-  },
   {
     path: "/new-edit-account",
     name: "new-edit-account",
@@ -153,15 +84,7 @@ const routes: Array<RouteRecordRaw> = [
       ),
   },
   {
-    path: "/new-identifier",
+    path: "/project",
-    name: "new-identifier",
-    component: () =>
-      import(
-        /* webpackChunkName: "new-identifier" */ "../views/NewIdentifierView.vue"
-      ),
-  },
-  {
-    path: "/project/:id?",
     name: "project",
     component: () =>
       import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),
@@ -171,72 +94,48 @@ const routes: Array<RouteRecordRaw> = [
     name: "projects",
     component: () =>
       import(/* webpackChunkName: "projects" */ "../views/ProjectsView.vue"),
-    beforeEnter: enterOrStart,
   },
   {
-    path: "/scan-contact",
+    path: "/commitments",
-    name: "scan-contact",
+    name: "commitments",
     component: () =>
       import(
-        /* webpackChunkName: "scan-contact" */ "../views/ContactScanView.vue"
+        /* webpackChunkName: "commitments" */ "../views/CommitmentsView.vue"
       ),
   },
-  {
-    path: "/search-area",
-    name: "search-area",
-    component: () =>
-      import(
-        /* webpackChunkName: "search-area" */ "../views/SearchAreaView.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"
-      ),
-  },
-  {
-    path: "/test",
-    name: "test",
-    component: () =>
-      import(/* webpackChunkName: "test" */ "../views/TestView.vue"),
-  },
 ];
 
-/** @type {*} */
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   routes,
 });
 
-const errorHandler = (
+router.beforeEach(async (to) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const publicPages = ["/start", "/account", "/import-account"];
-  error: any,
+  const isPublic = publicPages.includes(to.path);
-  to: RouteLocationNormalized,
+  const appStore = useAppStore();
-  from: RouteLocationNormalized,
+  let return_path = "/start";
-) => {
-  // Handle the error here
-  console.error("Caught in top level error handler:", error, to, from);
 
-  // You can also perform additional actions, such as displaying an error message or redirecting the user to a specific page
+  if (isPublic) {
-};
+    switch (appStore.condition) {
-
+      case "uninitialized":
-router.onError(errorHandler); // Assign the error handler to the router instance
+        return_path = "";
+        break;
+      case "registering":
+        return_path = to.path;
+        break;
+    }
+  } else {
+    switch (appStore.condition) {
+      case "registered":
+        return_path = to.path;
+    }
+  }
+  if (return_path == "") {
+    return;
+  } else {
+    return return_path;
+  }
+});
 
 export default router;

src/store/account.ts

@@ -0,0 +1,22 @@
+// @ts-check
+import { defineStore } from "pinia";
+
+export const useAccountStore = defineStore({
+  id: "account",
+  state: () => ({
+    account: JSON.parse(
+      typeof localStorage["account"] == "undefined"
+        ? null
+        : localStorage["account"]
+    ),
+  }),
+  getters: {
+    firstName: (state) => state.account.firstName,
+    lastName: (state) => state.account.lastName,
+  },
+  actions: {
+    reset() {
+      localStorage.removeItem("account");
+    },
+  },
+});

src/store/app.ts

@@ -4,17 +4,21 @@ import { defineStore } from "pinia";
 export const useAppStore = defineStore({
   id: "app",
   state: () => ({
-    _projectId:
+    _condition:
-      typeof localStorage.getItem("projectId") === "undefined"
+      typeof localStorage["condition"] == "undefined"
-        ? ""
+        ? "uninitialized"
-        : localStorage.getItem("projectId"),
+        : localStorage["condition"],
+    _lastView:
+      typeof localStorage["lastView"] == "undefined"
+        ? "/start"
+        : localStorage["lastView"],
   }),
   getters: {
-    projectId: (state): string => state._projectId as string,
+    condition: (state) => state._condition,
   },
   actions: {
-    async setProjectId(newProjectId: string) {
+    reset() {
-      localStorage.setItem("projectId", newProjectId);
+      localStorage.removeItem("condition");
     },
   },
 });

src/test/index.ts

@@ -1,61 +0,0 @@
-import axios from "axios";
-import * as didJwt from "did-jwt";
-import { AppString } from "@/constants/app";
-import { db } from "../db";
-import { SERVICE_ID } from "../libs/endorserServer";
-import { deriveAddress, newIdentifier } from "../libs/crypto";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-
-export async function testServerRegisterUser() {
-  const testUser0Mnem =
-    "seminar accuse mystery assist delay law thing deal image undo guard initial shallow wrestle list fragile borrow velvet tomorrow awake explain test offer control";
-
-  const [addr, privateHex, publicHex, deriPath] = deriveAddress(testUser0Mnem);
-
-  const identity0 = newIdentifier(addr, publicHex, privateHex, deriPath);
-
-  await db.open();
-  const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-
-  // Make a claim
-  const vcClaim = {
-    "@context": "https://schema.org",
-    "@type": "RegisterAction",
-    agent: { did: identity0.did },
-    object: SERVICE_ID,
-    participant: { did: settings?.activeDid },
-  };
-  // Make a payload for the claim
-  const vcPayload = {
-    sub: "RegisterAction",
-    vc: {
-      "@context": ["https://www.w3.org/2018/credentials/v1"],
-      type: ["VerifiableCredential"],
-      credentialSubject: vcClaim,
-    },
-  };
-  // create a signature using private key of identity
-  // eslint-disable-next-line
-  const privateKeyHex: string = identity0.keys[0].privateKeyHex!;
-  const signer = await didJwt.SimpleSigner(privateKeyHex);
-  const alg = undefined;
-  // create a JWT for the request
-  const vcJwt: string = await didJwt.createJWT(vcPayload, {
-    alg: alg,
-    issuer: identity0.did,
-    signer: signer,
-  });
-
-  // Make the xhr request payload
-
-  const payload = JSON.stringify({ jwtEncoded: vcJwt });
-  const endorserApiServer =
-    settings?.apiServer || AppString.TEST_ENDORSER_API_SERVER;
-  const url = endorserApiServer + "/api/claim";
-  const headers = {
-    "Content-Type": "application/json",
-  };
-
-  const resp = await axios.post(url, payload, { headers });
-  console.log("User registration result:", resp);
-}

src/views/AboutView.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  components: {},
+})
+export default class AboutView extends Vue {}
+</script>

src/views/ClaimView.vue

@@ -1,483 +0,0 @@
-<template>
-  <QuickNav />
-  <!-- CONTENT -->
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Back -->
-        <button
-          @click="$router.go(-1)"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        >
-          <fa icon="chevron-left" class="fa-fw"></fa>
-        </button>
-        Verifiable Claim Details
-      </h1>
-    </div>
-
-    <!-- Details -->
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <div>
-        <div class="block flex gap-4 overflow-hidden">
-          <div class="overflow-hidden">
-            <h2 class="text-md font-bold">{{ veriClaim.id }}</h2>
-            <div class="text-sm">
-              <div>
-                {{ veriClaim.claimType }}
-              </div>
-              <div>
-                <fa icon="message" class="fa-fw text-slate-400"></fa>
-                {{ veriClaim.claim?.description }}
-              </div>
-              <div>
-                <fa icon="user" class="fa-fw text-slate-400"></fa>
-                {{ veriClaim.issuer }}
-              </div>
-              <div>
-                <fa icon="calendar" class="fa-fw text-slate-400"></fa>
-                {{ veriClaim.issuedAt?.replace(/T/, " ").replace(/Z/, " UTC") }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <h2 class="font-bold uppercase text-xl mt-8 mb-2">Confirmations</h2>
-
-      <span v-if="totalConfirmers() === 0">Nobody has confirmed this.</span>
-      <span v-else-if="totalConfirmers() === 1">
-        One person has confirmed this.
-      </span>
-      <span v-else> {{ totalConfirmers() }} people have confirmed this. </span>
-
-      <div v-if="totalConfirmers() > 0">
-        <div
-          v-if="
-            confirmerIdList.length === 0 && confsVisibleToIdList.length === 0
-          "
-        >
-          Nobody that you know confirmed this claim, nor do they have any
-          confirmers in their network.
-        </div>
-
-        <div
-          v-if="confirmerIdList.length === 0 && confsVisibleToIdList.length > 0"
-        >
-          <!-- Only show if this person has links to confirmers (below). -->
-          Nobody that you know has issued or confirmed this claim.
-        </div>
-        <div v-if="confirmerIdList.length > 0">
-          The following people have issued or confirmed this claim.
-          <ul>
-            <li
-              v-for="confirmerId in confirmerIdList"
-              :key="confirmerId"
-              class="list-disc"
-            >
-              <div class="flex gap-4">
-                <div class="grow overflow-hidden">
-                  <div class="text-sm">
-                    {{ confirmerId }}
-                  </div>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-
-        <!--
-         Never need to show the following message.
-         If there is nobody in the confirmerIdList then we'll show the combined "nobody" message.
-         If there is somebody in the confirmerIdList then that's all they need to show.
-         -->
-        <!-- Nobody that you know can see someone who has confirmed this claim. -->
-
-        <div v-if="confsVisibleToIdList.length > 0">
-          The following people can connect you with people who have issued or
-          confirmed this claim.
-          <ul>
-            <li
-              v-for="confsVisibleTo in confsVisibleToIdList"
-              :key="confsVisibleTo"
-              class="list-disc"
-            >
-              <div class="flex gap-4">
-                <div class="grow overflow-hidden">
-                  <div class="text-sm">
-                    {{ confsVisibleTo }}
-                  </div>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-
-      <div class="mt-4">
-        <div v-if="confirmerIdList.includes(activeDid)">
-          You have confirmed this claim.
-        </div>
-        <div v-else-if="containsHiddenDid(veriClaim.claim)">
-          You cannot confirm this claim because it contains data that is hidden
-          from you.
-        </div>
-        <div v-else>
-          <button
-            class="bg-blue-600 text-white mt-4 px-4 py-2 rounded-md mb-4"
-            @click="confirmClaim(veriClaim.id)"
-          >
-            Confirm Claim
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <h2 class="font-bold uppercase text-xl mt-8 mb-2">Claim</h2>
-      <pre
-        class="text-sm overflow-x-scroll px-4 py-3 bg-slate-100 rounded-md"
-        >{{ veriClaimDump }}</pre
-      >
-    </div>
-
-    <h2 class="font-bold uppercase text-xl mt-8 mb-2">Full Claim</h2>
-    <p class="mb-4">
-      The full claim includes the claim as it was originally issued, including
-      the signature (ie. the proof of issuance by that person).
-    </p>
-    <div v-if="!fullClaim">
-      <p v-if="fullClaimMessage" class="mb-4">
-        {{ fullClaimMessage }}
-      </p>
-      <button
-        v-else
-        class="block w-full text-center text-md uppercase bg-blue-600 text-white px-1.5 py-2 rounded-md mb-2"
-        @click="showFullClaim(veriClaim.id)"
-      >
-        Load Full Claim Details
-      </button>
-    </div>
-    <div v-else>
-      <pre>{{ fullClaimDump }}</pre>
-    </div>
-
-    <a
-      :href="apiServer + '/api/claim/' + veriClaim.id"
-      target="_blank"
-      class="block w-full text-center text-md uppercase bg-blue-600 text-white px-1.5 py-2 rounded-md mb-2"
-    >
-      View on the Public Server
-    </a>
-  </section>
-</template>
-
-<script lang="ts">
-import { AxiosError, RawAxiosRequestHeaders } from "axios";
-import * as yaml from "js-yaml";
-import * as R from "ramda";
-import { IIdentifier } from "@veramo/core";
-import * as util from "util";
-import { Component, Vue } from "vue-facing-decorator";
-
-import GiftedDialog from "@/components/GiftedDialog.vue";
-import OfferDialog from "@/components/OfferDialog.vue";
-import { accountsDB, db } from "@/db/index";
-import { Contact } from "@/db/tables/contacts";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
-import { accessToken } from "@/libs/crypto";
-import * as serverUtil from "@/libs/endorserServer";
-import QuickNav from "@/components/QuickNav.vue";
-import EntityIcon from "@/components/EntityIcon.vue";
-import { Account } from "@/db/tables/accounts";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
-@Component({
-  components: { EntityIcon, GiftedDialog, OfferDialog, QuickNav },
-})
-export default class ClaimView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
-
-  activeDid = "";
-  allMyDids: Array<string> = [];
-  allContacts: Array<Contact> = [];
-  apiServer = "";
-  confirmerIdList = []; // list of DIDs that have confirmed this claim excluding the issuer
-  confsVisibleErrorMessage = "";
-  confsVisibleToIdList = []; // list of DIDs that can see any confirmer
-  fullClaim = null;
-  fullClaimDump = "";
-  fullClaimMessage = "";
-  numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
-  veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
-  veriClaimDump = "";
-
-  util = util;
-  yaml = yaml;
-  containsHiddenDid = serverUtil.containsHiddenDid;
-
-  async created() {
-    await db.open();
-    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
-    this.activeDid = settings?.activeDid || "";
-    this.apiServer = settings?.apiServer || "";
-    this.allContacts = await db.contacts.toArray();
-
-    await accountsDB.open();
-    const accounts = accountsDB.accounts;
-    const accountsArr = await accounts?.toArray();
-    this.allMyDids = accountsArr.map((acc) => acc.did);
-    const account = accountsArr.find((acc) => acc.did === this.activeDid);
-    const identity = JSON.parse(account?.identity || "null");
-
-    const pathParam = window.location.pathname.substring("/claim/".length);
-    let claimId;
-    if (pathParam) {
-      claimId = decodeURIComponent(pathParam);
-      this.loadClaim(claimId, identity);
-    } else {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "No claim ID was provided.",
-        },
-        -1,
-      );
-    }
-  }
-
-  totalConfirmers() {
-    return (
-      this.numConfsNotVisible +
-      this.confirmerIdList.length +
-      this.confsVisibleToIdList.length
-    );
-  }
-
-  public async getIdentity(activeDid: string): Promise<IIdentifier> {
-    await accountsDB.open();
-    const account = (await accountsDB.accounts
-      .where("did")
-      .equals(activeDid)
-      .first()) as Account;
-    const identity = JSON.parse(account?.identity || "null");
-
-    if (!identity) {
-      throw new Error(
-        "Attempted to load project records with no identity available.",
-      );
-    }
-    return identity;
-  }
-
-  public async getHeaders(identity: IIdentifier) {
-    const headers: RawAxiosRequestHeaders = {
-      "Content-Type": "application/json",
-    };
-    if (identity) {
-      const token = await accessToken(identity);
-      headers["Authorization"] = "Bearer " + token;
-    }
-    return headers;
-  }
-
-  // Isn't there a better way to make this available to the template?
-  didInfo(
-    did: string,
-    activeDid: string,
-    dids: Array<string>,
-    contacts: Array<Contact>,
-  ) {
-    return serverUtil.didInfo(did, activeDid, dids, contacts);
-  }
-
-  async loadClaim(claimId: string, identity: IIdentifier) {
-    const url =
-      this.apiServer + "/api/claim/byHandle/" + encodeURIComponent(claimId);
-    const headers = await this.getHeaders(identity);
-
-    try {
-      const resp = await this.axios.get(url, { headers });
-      if (resp.status === 200) {
-        this.veriClaim = resp.data;
-        this.veriClaimDump = yaml.dump(this.veriClaim);
-      } else {
-        // actually, axios typically throws an error so we never get here
-        console.log("Error getting claim:", resp);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "There was a problem getting that claim. See logs for more info.",
-          },
-          -1,
-        );
-      }
-    } catch (error: unknown) {
-      const serverError = error as AxiosError;
-      console.error("Error retrieving claim:", serverError);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Something went wrong retrieving that claim. See logs for more info.",
-        },
-        -1,
-      );
-    }
-
-    const confirmUrl =
-      this.apiServer +
-      "/api/report/issuersWhoClaimedOrConfirmed?claimId=" +
-      encodeURIComponent(serverUtil.stripEndorserPrefix(claimId));
-    const confirmHeaders = await this.getHeaders(identity);
-    try {
-      const response = await this.axios.get(confirmUrl, {
-        headers: confirmHeaders,
-      });
-      if (response.status === 200) {
-        const resultList1 = response.data.result || [];
-        const resultList2 = R.reject(serverUtil.isHiddenDid, resultList1);
-        const resultList3 = R.reject(
-          (did: string) => did === this.veriClaim.issuer,
-          resultList2,
-        );
-        this.confirmerIdList = resultList3;
-        this.numConfsNotVisible = resultList1.length - resultList2.length;
-        if (resultList3.length === resultList2.length) {
-          // the issuer was not in the "visible" list so they must be hidden
-          // so subtract them from the non-visible confirmers count
-          this.numConfsNotVisible = this.numConfsNotVisible - 1;
-        }
-        this.confsVisibleToIdList =
-          response.data.result.resultVisibleToDids || [];
-      } else {
-        this.confsVisibleErrorMessage =
-          "Had problems retrieving confirmations.";
-      }
-    } catch (error: unknown) {
-      const serverError = error as AxiosError;
-      console.error("Error retrieving confirmations:", serverError);
-      this.confsVisibleErrorMessage =
-        "Had problems retrieving confirmations. See logs for more info.";
-    }
-  }
-
-  async showFullClaim(claimId: string) {
-    await accountsDB.open();
-    const accounts = accountsDB.accounts;
-    const accountsArr = await accounts?.toArray();
-    const account = accountsArr.find((acc) => acc.did === this.activeDid);
-    const identity = JSON.parse(account?.identity || "null");
-
-    const url =
-      this.apiServer + "/api/claim/full/" + encodeURIComponent(claimId);
-    const headers = await this.getHeaders(identity);
-
-    try {
-      const resp = await this.axios.get(url, { headers });
-      if (resp.status === 200) {
-        this.fullClaim = resp.data;
-        this.fullClaimDump = yaml.dump(this.fullClaim);
-      } else {
-        // actually, axios typically throws an error so we never get here
-        console.log("Error getting full claim:", resp);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "There was a problem getting that claim. See logs for more info.",
-          },
-          -1,
-        );
-      }
-    } catch (error: unknown) {
-      console.error("Error retrieving full claim:", error);
-      const serverError = error as AxiosError;
-      if (serverError.response?.status === 403) {
-        this.fullClaimMessage =
-          "You are not authorized to view the full contents of this claim." +
-          " To see all the details, ask the issuer to allow you to see their claims." +
-          " If you cannot see the issuer's DID, ask someone in the Confirmations section above." +
-          " If there are no connections, you will have to ask people in your" +
-          " network for their help, some other way; send them to this page and" +
-          " see if they can make a connection for you.";
-      } else {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Something went wrong retrieving that claim. See logs for more info.",
-          },
-          -1,
-        );
-      }
-    }
-  }
-
-  async confirmClaim() {
-    if (confirm("Do you personally confirm that this is true?")) {
-      // similar logic is found in endorser-mobile
-      const goodClaim = serverUtil.removeSchemaContext(
-        serverUtil.removeVisibleToDids(
-          serverUtil.addLastClaimOrHandleAsIdIfMissing(
-            this.veriClaim.claim,
-            this.veriClaim.id,
-            this.veriClaim.handleId,
-          ),
-        ),
-      );
-      const confirmationClaim: serverUtil.GenericVerifiableCredential & {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        object: any;
-      } = {
-        "@context": "https://schema.org",
-        "@type": "AgreeAction",
-        object: goodClaim,
-      };
-      const result = await serverUtil.createAndSubmitClaim(
-        confirmationClaim,
-        await this.getIdentity(this.activeDid),
-        this.apiServer,
-        this.axios,
-      );
-      if (result.type === "success") {
-        this.$notify(
-          {
-            group: "alert",
-            type: "success",
-            title: "Success",
-            text: "Confirmation submitted.",
-          },
-          5000,
-        );
-      } else {
-        console.log("Got error submitting the confirmation:", result);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "There was a problem submitting the confirmation. See logs for more info.",
-          },
-          -1,
-        );
-      }
-    }
-  }
-}
-</script>

src/views/CommitmentsView.vue

@@ -0,0 +1,3 @@
+<template>
+  <section id="Content" class="p-6 pb-24"></section>
+</template>

src/views/ConfirmContactView.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- CONTENT -->
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+  <section id="Content" class="p-6 pb-24">
     <!-- Breadcrumb -->
     <div id="ViewBreadcrumb" class="mb-8">
       <h1 class="text-lg text-center font-light relative px-7">
@@ -15,40 +15,42 @@
       </h1>
     </div>
 
-    <p class="text-center text-xl mb-4 font-light">
+    <form>
-      Would you like to add <i>Firstname</i> to your network?
+      <p class="text-center text-xl mb-4 font-light">
-    </p>
+        Would you like to add <i>Firstname</i> to your network?
+      </p>
 
-    <!-- Account Details -->
+      <!-- Account Details -->
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
+      <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <h2 class="text-xl font-semibold mb-2">Firstname Lastname</h2>
+        <h2 class="text-xl font-semibold mb-2">Firstname Lastname</h2>
 
-      <div class="text-slate-500 text-sm font-bold">ID</div>
+        <div class="text-slate-500 text-sm font-bold">ID</div>
-      <div class="text-sm text-slate-500 mb-1">
+        <div class="text-sm text-slate-500 mb-1">
-        <span><code>did:peer:kl45kj41lk451kl3</code></span>
+          <span><code>did:peer:kl45kj41lk451kl3</code></span>
+        </div>
       </div>
-    </div>
 
-    <div class="mt-8">
+      <div class="mt-8">
-      <input
+        <input
-        type="submit"
+          type="submit"
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+          class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
-        value="Add Contact"
+          value="Add Contact"
-      />
+        />
-      <button
+        <button
-        type="button"
+          type="button"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
-      >
+        >
-        Cancel
+          Cancel
-      </button>
+        </button>
-    </div>
+      </div>
+    </form>
   </section>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
+import { Options, Vue } from "vue-class-component";
 
-@Component({
+@Options({
   components: {},
 })
 export default class ConfirmContactView extends Vue {}

src/views/ContactAmountsView.vue

@@ -1,405 +0,0 @@
-<template>
-  <QuickNav selected="Contacts"></QuickNav>
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <h1
-        id="ViewBreadcrumb"
-        class="text-lg text-center font-light relative px-7"
-      >
-        <!-- Back -->
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left" class="fa-fw"></fa
-        ></router-link>
-      </h1>
-
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4">
-        Given with {{ contact?.name }}
-      </h1>
-    </div>
-
-    <div class="flex justify-around">
-      <span />
-      <span class="justify-around">(Only 50 most recent)</span>
-      <span />
-    </div>
-    <div class="flex justify-around">
-      <span />
-      <span class="justify-around">
-        (This does not include claims by them if they're not visible to you.)
-      </span>
-      <span />
-    </div>
-
-    <!-- Results List -->
-    <table
-      class="table-auto w-full border-t border-slate-300 text-sm sm:text-base text-center"
-    >
-      <thead class="bg-slate-100">
-        <tr class="border-b border-slate-300">
-          <th></th>
-          <th class="px-1 py-2">From Them</th>
-          <th></th>
-          <th class="px-1 py-2">To Them</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="record in giveRecords"
-          :key="record.id"
-          class="border-b border-slate-300"
-        >
-          <td class="p-1 text-xs sm:text-sm text-left text-slate-500">
-            {{ new Date(record.issuedAt).toLocaleString() }}
-          </td>
-          <td class="p-1">
-            <span v-if="record.agentDid == contact.did">
-              <div class="font-bold">
-                {{ record.amount }} {{ record.unit }}
-                <span v-if="record.amountConfirmed" title="Confirmed">
-                  <fa icon="circle-check" class="text-green-600 fa-fw" />
-                </span>
-                <button v-else @click="confirm(record)" title="Unconfirmed">
-                  <fa icon="circle" class="text-blue-600 fa-fw" />
-                </button>
-              </div>
-              <div class="italic text-xs sm:text-sm text-slate-500">
-                {{ record.description }}
-              </div>
-            </span>
-          </td>
-          <td class="p-1">
-            <span v-if="record.agentDid == contact.did">
-              <fa icon="arrow-left" class="text-slate-400 fa-fw" />
-            </span>
-            <span v-else>
-              <fa icon="arrow-right" class="text-slate-400 fa-fw" />
-            </span>
-          </td>
-          <td class="p-1">
-            <span v-if="record.agentDid != contact.did">
-              <div class="font-bold">
-                {{ record.amount }} {{ record.unit }}
-                <span v-if="record.amountConfirmed" title="Confirmed">
-                  <fa icon="circle-check" class="text-green-600 fa-fw" />
-                </span>
-                <button
-                  v-else
-                  @click="cannotConfirmMessage()"
-                  title="Unconfirmed"
-                >
-                  <fa icon="circle" class="text-slate-600 fa-fw" />
-                </button>
-              </div>
-              <div class="italic text-xs sm:text-sm text-slate-500">
-                {{ record.description }}
-              </div>
-            </span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </section>
-</template>
-
-<script lang="ts">
-import * as R from "ramda";
-
-import { Component, Vue } from "vue-facing-decorator";
-import { accountsDB, db } from "@/db/index";
-import { Contact } from "@/db/tables/contacts";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { accessToken, SimpleSigner } from "@/libs/crypto";
-import {
-  AgreeVerifiableCredential,
-  GiveServerRecord,
-  GiveVerifiableCredential,
-  SCHEMA_ORG_CONTEXT,
-} from "@/libs/endorserServer";
-import * as didJwt from "did-jwt";
-import { AxiosError } from "axios";
-import QuickNav from "@/components/QuickNav.vue";
-import { IIdentifier } from "@veramo/core";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
-@Component({ components: { QuickNav } })
-export default class ContactAmountssView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
-
-  activeDid = "";
-  apiServer = "";
-  contact: Contact | null = null;
-  giveRecords: Array<GiveServerRecord> = [];
-  numAccounts = 0;
-
-  async beforeCreate() {
-    await accountsDB.open();
-    this.numAccounts = await accountsDB.accounts.count();
-  }
-
-  public async getIdentity(activeDid: string) {
-    await accountsDB.open();
-    const account = await accountsDB.accounts
-      .where("did")
-      .equals(activeDid)
-      .first();
-    const identity = JSON.parse(account?.identity || "null");
-
-    if (!identity) {
-      throw new Error(
-        "Attempted to load Give records with no identity available.",
-      );
-    }
-    return identity;
-  }
-
-  public async getHeaders(identity: IIdentifier) {
-    const token = await accessToken(identity);
-    const headers = {
-      "Content-Type": "application/json",
-      Authorization: "Bearer " + token,
-    };
-    return headers;
-  }
-
-  async created() {
-    try {
-      await db.open();
-      const contactDid = this.$route.query.contactDid as string;
-      this.contact = (await db.contacts.get(contactDid)) || null;
-
-      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);
-      }
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (err: any) {
-      console.log("Error retrieving settings or gives.", err);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text:
-            err.userMessage ||
-            "There was an error retrieving your settings and/or contacts and/or gives.",
-        },
-        -1,
-      );
-    }
-  }
-
-  async loadGives(activeDid: string, contact: Contact) {
-    try {
-      const identity = await this.getIdentity(this.activeDid);
-      let result: Array<GiveServerRecord> = [];
-      const url =
-        this.apiServer +
-        "/api/v2/report/gives?agentDid=" +
-        encodeURIComponent(identity.did) +
-        "&recipientDid=" +
-        encodeURIComponent(contact.did);
-      const headers = await this.getHeaders(identity);
-      const resp = await this.axios.get(url, { headers });
-      if (resp.status === 200) {
-        result = resp.data.data;
-      } else {
-        console.error(
-          "Got bad response status & data of",
-          resp.status,
-          resp.data,
-        );
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error With Server",
-            text: "Got an error retrieving your given time from the server.",
-          },
-          -1,
-        );
-      }
-
-      const url2 =
-        this.apiServer +
-        "/api/v2/report/gives?agentDid=" +
-        encodeURIComponent(contact.did) +
-        "&recipientDid=" +
-        encodeURIComponent(identity.did);
-      const headers2 = await this.getHeaders(identity);
-      const resp2 = await this.axios.get(url2, { headers: headers2 });
-      if (resp2.status === 200) {
-        result = R.concat(result, resp2.data.data);
-      } else {
-        console.error(
-          "Got bad response status & data of",
-          resp2.status,
-          resp2.data,
-        );
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error With Server",
-            text: "Got an error retrieving your given time from the server.",
-          },
-          -1,
-        );
-      }
-
-      const sortedResult: Array<GiveServerRecord> = R.sort(
-        (a, b) =>
-          new Date(b.issuedAt).getTime() - new Date(a.issuedAt).getTime(),
-        result,
-      );
-      this.giveRecords = sortedResult;
-    } catch (error) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error With Server",
-          text: error as string,
-        },
-        -1,
-      );
-    }
-  }
-
-  async confirm(record: GiveServerRecord) {
-    // Make claim
-    // I use clone here because otherwise it gets a Proxy object.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const origClaim: GiveVerifiableCredential = R.clone(record.fullClaim);
-    if (record.fullClaim["@context"] == SCHEMA_ORG_CONTEXT) {
-      delete origClaim["@context"];
-    }
-    origClaim["identifier"] = record.handleId;
-    const vcClaim: AgreeVerifiableCredential = {
-      "@context": SCHEMA_ORG_CONTEXT,
-      "@type": "AgreeAction",
-      object: origClaim,
-    };
-
-    // Make a payload for the claim
-    const vcPayload = {
-      vc: {
-        "@context": ["https://www.w3.org/2018/credentials/v1"],
-        type: ["VerifiableCredential"],
-        credentialSubject: vcClaim,
-      },
-    };
-
-    // Create a signature using private key of identity
-    const identity = await this.getIdentity(this.activeDid);
-    if (identity.keys[0].privateKeyHex !== null) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const privateKeyHex: string = identity.keys[0].privateKeyHex!;
-      const signer = await SimpleSigner(privateKeyHex);
-      const alg = undefined;
-      // Create a JWT for the request
-      const vcJwt: string = await didJwt.createJWT(vcPayload, {
-        alg: alg,
-        issuer: identity.did,
-        signer: signer,
-      });
-
-      // Make the xhr request payload
-      const payload = JSON.stringify({ jwtEncoded: vcJwt });
-      const url = this.apiServer + "/api/v2/claim";
-      const token = await accessToken(identity);
-      const headers = {
-        "Content-Type": "application/json",
-        Authorization: "Bearer " + token,
-      };
-
-      try {
-        const resp = await this.axios.post(url, payload, { headers });
-        if (resp.data?.success) {
-          record.amountConfirmed = origClaim.object?.amountOfThisGood || 1;
-        }
-      } catch (error) {
-        let userMessage = "There was an error. See logs for more info.";
-        const serverError = error as AxiosError;
-        if (serverError) {
-          if (serverError.message) {
-            userMessage = serverError.message; // Info for the user
-          } else {
-            userMessage = JSON.stringify(serverError.toJSON());
-          }
-        } else {
-          userMessage = error as string;
-        }
-        // Now set that error for the user to see.
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error With Server",
-            text: userMessage,
-          },
-          -1,
-        );
-      }
-    }
-  }
-
-  cannotConfirmMessage() {
-    this.$notify(
-      {
-        group: "alert",
-        type: "danger",
-        title: "Not Allowed",
-        text: "Only the recipient can confirm final receipt.",
-      },
-      -1,
-    );
-  }
-}
-</script>
-
-<style>
-/*
-  Tooltip, generated on "title" attributes on "fa" icons
-  Kudos to https://www.w3schools.com/css/css_tooltip.asp
-*/
-/* Tooltip container */
-.tooltip {
-  position: relative;
-  display: inline-block;
-  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
-}
-
-/* Tooltip text */
-.tooltip .tooltiptext {
-  visibility: hidden;
-  width: 200px;
-  background-color: black;
-  color: #fff;
-  text-align: center;
-  padding: 5px 0;
-  border-radius: 6px;
-
-  position: absolute;
-  z-index: 1;
-}
-
-/* Show the tooltip text when you mouse over the tooltip container */
-.tooltip:hover .tooltiptext {
-  visibility: visible;
-}
-.tooltip:hover .tooltiptext-left {
-  visibility: visible;
-}
-</style>

src/views/ContactGiftingView.vue

@@ -1,167 +0,0 @@
-<template>
-  <QuickNav selected="Home"></QuickNav>
-  <!-- CONTENT -->
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Back -->
-        <router-link
-          :to="{ name: 'home' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left" class="fa-fw"></fa
-        ></router-link>
-
-        Give to Contacts
-      </h1>
-    </div>
-
-    <!-- Results List -->
-    <ul class="border-t border-slate-300">
-      <li class="border-b border-slate-300 py-3">
-        <h2 class="text-base flex gap-4 items-center">
-          <span class="grow italic text-slate-500"
-            ><EntityIcon
-              :entityId="null"
-              :iconSize="32"
-              class="inline-block align-middle border border-slate-300 rounded-md mr-1"
-            ></EntityIcon>
-            Anonymous
-          </span>
-          <span class="text-right">
-            <button
-              type="button"
-              @click="openDialog()"
-              class="block w-full text-center text-sm uppercase bg-blue-600 text-white px-3 py-1.5 rounded-md"
-            >
-              <fa icon="gift" class="fa-fw"></fa>
-            </button>
-          </span>
-        </h2>
-      </li>
-      <li
-        v-for="contact in allContacts"
-        :key="contact.did"
-        class="border-b border-slate-300 py-3"
-      >
-        <h2 class="text-base flex gap-4 items-center">
-          <span class="grow font-semibold"
-            ><EntityIcon
-              :entityId="contact.did"
-              :iconSize="32"
-              class="inline-block align-middle border border-slate-300 rounded-md mr-1"
-            ></EntityIcon>
-            {{ contact.name || "(no name)" }}
-          </span>
-          <span class="text-right">
-            <button
-              type="button"
-              @click="openDialog(contact)"
-              class="block w-full text-center text-sm uppercase bg-blue-600 text-white px-3 py-1.5 rounded-md"
-            >
-              <fa icon="gift" class="fa-fw"></fa>
-            </button>
-          </span>
-        </h2>
-      </li>
-    </ul>
-
-    <GiftedDialog
-      ref="customDialog"
-      message="Received from"
-      showGivenToUser="true"
-    />
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
-import GiftedDialog from "@/components/GiftedDialog.vue";
-import { db, accountsDB } from "@/db/index";
-import { Account, AccountsSchema } from "@/db/tables/accounts";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
-import { accessToken } from "@/libs/crypto";
-import { GiverInputInfo } from "@/libs/endorserServer";
-import { Contact } from "@/db/tables/contacts";
-import QuickNav from "@/components/QuickNav.vue";
-import EntityIcon from "@/components/EntityIcon.vue";
-import { IIdentifier } from "@veramo/core";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
-@Component({
-  components: { GiftedDialog, QuickNav, EntityIcon },
-})
-export default class ContactGiftingView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
-
-  activeDid = "";
-  allContacts: Array<Contact> = [];
-  apiServer = "";
-  accounts: typeof AccountsSchema;
-  numAccounts = 0;
-
-  async beforeCreate() {
-    accountsDB.open();
-    this.numAccounts = await accountsDB.accounts.count();
-  }
-
-  public async getIdentity(activeDid: string) {
-    await accountsDB.open();
-    const account = (await accountsDB.accounts
-      .where("did")
-      .equals(activeDid)
-      .first()) as Account;
-    const identity = JSON.parse(account?.identity || "null");
-
-    if (!identity) {
-      throw new Error(
-        "Attempted to load Give records with no identity available.",
-      );
-    }
-    return identity;
-  }
-
-  public async getHeaders(identity: IIdentifier) {
-    const token = await accessToken(identity);
-    const headers = {
-      "Content-Type": "application/json",
-      Authorization: "Bearer " + token,
-    };
-    return headers;
-  }
-
-  async created() {
-    try {
-      await db.open();
-      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
-      this.apiServer = settings?.apiServer || "";
-      this.activeDid = settings?.activeDid || "";
-      this.allContacts = await db.contacts.toArray();
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (err: any) {
-      console.log("Error retrieving settings & contacts:", err);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text:
-            err.message ||
-            "There was an error retrieving your settings and/or contacts.",
-        },
-        -1,
-      );
-    }
-  }
-
-  openDialog(giver: GiverInputInfo) {
-    (this.$refs.customDialog as GiftedDialog).open(giver);
-  }
-}
-</script>

src/views/ContactQRScanShowView.vue

@@ -1,232 +0,0 @@
-<template>
-  <QuickNav selected="Profile"></QuickNav>
-  <!-- CONTENT -->
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <fa icon="chevron-left" class="fa-fw"></fa>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4">
-        Your Contact Info
-      </h1>
-      <p v-if="!givenName" class="text-center mt-2">
-        <span class="text-red">Beware!</span>
-        You aren't sharing your name, so hurry and
-        <router-link
-          :to="{ name: 'new-edit-account' }"
-          class="bg-blue-500 text-white px-1.5 py-1 rounded-md"
-        >
-          go here to set it for them.
-        </router-link>
-      </p>
-    </div>
-
-    <div @click="onCopyToClipboard()" v-if="activeDid">
-      <!--
-        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"
-      />
-    </div>
-    <div class="text-center" v-else>
-      You have no identitifiers yet, so
-      <router-link
-        :to="{ name: 'start' }"
-        class="bg-blue-500 text-white px-1.5 py-1 rounded-md"
-      >
-        create your identifier.
-      </router-link>
-      <br />
-      If you don't that first, these contacts won't see your activity.
-    </div>
-
-    <div class="text-center">
-      <h1 class="text-4xl text-center font-light pt-4">Scan Contact Info</h1>
-      <qrcode-stream @detect="onScanDetect" @error="onScanError" />
-      <span>
-        If you do not see a scanning camera window here, check your camera
-        permissions.
-      </span>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import * as didJwt from "did-jwt";
-import { sha256 } from "ethereum-cryptography/sha256.js";
-import QRCodeVue3 from "qr-code-generator-vue3";
-import * as R from "ramda";
-import { Component, Vue } from "vue-facing-decorator";
-import { QrcodeStream } from "vue-qrcode-reader";
-import { useClipboard } from "@vueuse/core";
-
-import { accountsDB, db } from "@/db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { deriveAddress, nextDerivationPath, SimpleSigner } from "@/libs/crypto";
-import QuickNav from "@/components/QuickNav.vue";
-import { Account } from "@/db/tables/accounts";
-import {
-  CONTACT_URL_PREFIX,
-  ENDORSER_JWT_URL_LOCATION,
-} from "@/libs/endorserServer";
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const Buffer = require("buffer/").Buffer;
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
-@Component({
-  components: {
-    QrcodeStream,
-    QRCodeVue3,
-    QuickNav,
-  },
-})
-export default class ContactQRScanShow extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
-
-  activeDid = "";
-  apiServer = "";
-  givenName = "";
-  qrValue = "";
-
-  public async getIdentity(activeDid: string) {
-    await accountsDB.open();
-    const accounts = await accountsDB.accounts.toArray();
-    const account: Account | undefined = R.find(
-      (acc) => acc.did === activeDid,
-      accounts,
-    );
-    const identity = JSON.parse(account?.identity || "null");
-
-    if (!identity) {
-      throw new Error(
-        "Attempted to show contact info with no identity available.",
-      );
-    }
-    return identity;
-  }
-
-  async created() {
-    await db.open();
-    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-    this.activeDid = settings?.activeDid || "";
-    this.apiServer = settings?.apiServer || "";
-    this.givenName = settings?.firstName || "";
-
-    await accountsDB.open();
-    const accounts = await accountsDB.accounts.toArray();
-    const account = R.find((acc) => acc.did === this.activeDid, accounts);
-    if (account) {
-      const identity = await this.getIdentity(this.activeDid);
-      const publicKeyHex = identity.keys[0].publicKeyHex;
-      const publicEncKey = Buffer.from(publicKeyHex, "hex").toString("base64");
-
-      const newDerivPath = nextDerivationPath(account.derivationPath);
-      const nextPublicHex = deriveAddress(account.mnemonic, newDerivPath)[2];
-      const nextPublicEncKey = Buffer.from(nextPublicHex, "hex");
-      const nextPublicEncKeyHash = sha256(nextPublicEncKey);
-      const nextPublicEncKeyHashBase64 =
-        Buffer.from(nextPublicEncKeyHash).toString("base64");
-
-      const contactInfo = {
-        iat: Date.now(),
-        iss: this.activeDid,
-        own: {
-          name:
-            (settings?.firstName || "") +
-            (settings?.lastName ? ` ${settings.lastName}` : ""), // deprecated, pre v 0.1.3
-          publicEncKey,
-          nextPublicEncKeyHash: nextPublicEncKeyHashBase64,
-        },
-      };
-
-      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 = CONTACT_URL_PREFIX + ENDORSER_JWT_URL_LOCATION;
-      this.qrValue = viewPrefix + vcJwt;
-    }
-  }
-
-  /**
-   *
-   * @param content is the result of a QR scan, an array with one item with a rawValue property
-   */
-  // Unfortunately, there are not typescript definitions for the qrcode-stream component yet.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onScanDetect(content: any) {
-    if (content[0]?.rawValue) {
-      //console.log("onDetect", content[0].rawValue);
-      localStorage.setItem("contactEndorserUrl", content[0].rawValue);
-      this.$router.push({ name: "contacts" });
-    } else {
-      this.$notify(
-        {
-          group: "alert",
-          type: "warning",
-          title: "Invalid Contact QR Code",
-          text: "No QR code detected with contact information.",
-        },
-        -1,
-      );
-    }
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onScanError(error: any) {
-    console.log("Scan was invalid:", error);
-    this.$notify(
-      {
-        group: "alert",
-        type: "warning",
-        title: "Invalid Scan",
-        text: "The scan was invalid.",
-      },
-      -1,
-    );
-  }
-
-  onCopyToClipboard() {
-    useClipboard()
-      .copy(this.qrValue)
-      .then(() => {
-        console.log("Contact URL:", this.qrValue);
-        this.$notify(
-          {
-            group: "alert",
-            type: "toast",
-            title: "Copied",
-            text: "Contact URL was copied to clipboard.",
-          },
-          2000,
-        );
-      });
-  }
-}
-</script>

src/views/ContactScanView.vue

@@ -1,5 +1,5 @@
 <template>
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+  <section id="Content" class="p-6 pb-24">
     <!-- Breadcrumb -->
     <div id="ViewBreadcrumb" class="mb-8">
       <h1 class="text-lg text-center font-light relative px-7">
@@ -14,76 +14,82 @@
       </h1>
     </div>
 
-    <h3 class="text-sm uppercase font-semibold mb-2">Scan a QR Code…</h3>
+    <form>
-    <div class="bg-black rounded overflow-hidden relative mb-4">
+      <h3 class="text-sm uppercase font-semibold mb-2">Scan a QR Code…</h3>
-      <img src="https://picsum.photos/400/400?random=1" class="w-full" />
+      <div class="bg-black rounded overflow-hidden relative mb-4">
+        <img src="https://picsum.photos/400/400?random=1" class="w-full" />
 
-      <!-- Darken overlay -->
+        <!-- Darken overlay -->
-      <!-- Top -->
+        <!-- Top -->
-      <div class="absolute top-0 left-0 right-0 bg-black/50 h-1/4"></div>
+        <div class="absolute top-0 left-0 right-0 bg-black/50 h-1/4"></div>
-      <!-- Reft -->
+        <!-- Reft -->
-      <div class="absolute top-1/4 bottom-1/4 left-0 bg-black/50 w-1/4"></div>
+        <div class="absolute top-1/4 bottom-1/4 left-0 bg-black/50 w-1/4"></div>
-      <!-- Right -->
+        <!-- Right -->
-      <div class="absolute top-1/4 bottom-1/4 right-0 bg-black/50 w-1/4"></div>
+        <div
-      <!-- Bottom -->
+          class="absolute top-1/4 bottom-1/4 right-0 bg-black/50 w-1/4"
-      <div class="absolute bottom-0 left-0 right-0 bg-black/50 h-1/4"></div>
+        ></div>
+        <!-- Bottom -->
+        <div class="absolute bottom-0 left-0 right-0 bg-black/50 h-1/4"></div>
 
-      <!-- Reticle overlay -->
+        <!-- Reticle overlay -->
-      <!-- Top-left -->
+        <!-- Top-left -->
-      <div
+        <div
-        class="absolute top-1/4 left-1/4 h-6 w-6 border-white border-t-4 border-l-4 drop-shadow"
+          class="absolute top-1/4 left-1/4 h-6 w-6 border-white border-t-4 border-l-4 drop-shadow"
-      ></div>
+        ></div>
-      <!-- Top-right -->
+        <!-- Top-right -->
-      <div
+        <div
-        class="absolute top-1/4 right-1/4 h-6 w-6 border-white border-t-4 border-r-4 drop-shadow"
+          class="absolute top-1/4 right-1/4 h-6 w-6 border-white border-t-4 border-r-4 drop-shadow"
-      ></div>
+        ></div>
-      <!-- Bottom-left -->
+        <!-- Bottom-left -->
-      <div
+        <div
-        class="absolute bottom-1/4 left-1/4 h-6 w-6 border-white border-b-4 border-l-4 drop-shadow"
+          class="absolute bottom-1/4 left-1/4 h-6 w-6 border-white border-b-4 border-l-4 drop-shadow"
-      ></div>
+        ></div>
-      <!-- Bottom-right -->
+        <!-- Bottom-right -->
-      <div
+        <div
-        class="absolute bottom-1/4 right-1/4 h-6 w-6 border-white border-b-4 border-r-4 drop-shadow"
+          class="absolute bottom-1/4 right-1/4 h-6 w-6 border-white border-b-4 border-r-4 drop-shadow"
-      ></div>
+        ></div>
-    </div>
+      </div>
 
-    <h3 class="text-sm uppercase font-semibold mb-2">…or Enter Contact Data</h3>
+      <h3 class="text-sm uppercase font-semibold mb-2">
-    <input
+        …or Enter Contact Data
-      type="text"
+      </h3>
-      placeholder="Name (optional)"
-      class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
-    />
-    <input
-      type="text"
-      placeholder="ID"
-      class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
-    />
-    <input
-      type="text"
-      placeholder="Public Key (optional)"
-      class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
-    />
-
-    <div class="mt-8">
       <input
-        type="submit"
+        type="text"
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+        placeholder="Name (optional)"
-        value="Look Up Contact"
+        class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
       />
-      <button
+      <input
-        type="button"
+        type="text"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        placeholder="ID"
-      >
+        class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
-        Cancel
+      />
-      </button>
+      <input
-    </div>
+        type="text"
+        placeholder="Public Key (optional)"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      />
+
+      <div class="mt-8">
+        <input
+          type="submit"
+          class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+          value="Look Up Contact"
+        />
+        <button
+          type="button"
+          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
   </section>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
+import { Options, Vue } from "vue-class-component";
 
-@Component({
+@Options({
   components: {},
 })
 export default class ContactScanView extends Vue {}

src/views/DiscoverView.vue

@@ -1,29 +1,66 @@
 <template>
-  <QuickNav selected="Discover"></QuickNav>
+  <!-- QUICK NAV -->
-  <TopMessage />
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
+    <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 bg-slate-400 text-white">
+        <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: 'project' }"
+          class="block text-center py-3 px-1"
+          ><fa icon="folder-open" class="fa-fw"></fa
+        ></router-link>
+      </li>
+      <!-- Commitments -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link :to="{ name: '' }" class="block text-center py-3 px-1"
+          ><fa icon="hand" class="fa-fw"></fa
+        ></router-link>
+      </li>
+      <!-- Profile -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <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 max-w-3xl mx-auto">
+  <section id="Content" class="p-6 pb-24">
     <!-- Heading -->
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
       Discover
     </h1>
 
     <!-- Quick Search -->
-    <div id="QuickSearch" class="mb-4 flex" v-on:keyup.enter="searchSelected()">
+    <form id="QuickSearch" class="mb-4 flex">
       <input
         type="text"
-        v-model="searchTerms"
         placeholder="Search…"
         class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2"
       />
       <button
-        @click="searchSelected()"
         class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
       >
         <fa icon="magnifying-glass" class="fa-fw"></fa>
       </button>
-    </div>
+    </form>
 
     <!-- Result Tabs -->
     <div class="text-center text-slate-500 border-b border-slate-300">
@@ -31,425 +68,95 @@
         <li>
           <a
             href="#"
-            @click="
+            class="inline-block py-3 rounded-t-lg border-b-2 active text-blue-600 border-blue-600 font-semibold"
-              projects = [];
-              isLocalActive = true;
-              isRemoteActive = false;
-              searchLocal();
-            "
-            v-bind:class="computedLocalTabClassNames()"
           >
             Nearby
             <span
               class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
-              v-if="isLocalActive"
+              >20+</span
             >
-              {{ localCount > -1 ? localCount : "?" }}
-            </span>
           </a>
         </li>
         <li>
           <a
             href="#"
-            v-bind:class="computedRemoteTabClassNames()"
+            class="inline-block py-3 rounded-t-lg border-b-2 border-transparent hover:text-slate-600 hover:border-slate-300"
-            @click="
-              projects = [];
-              isRemoteActive = true;
-              isLocalActive = false;
-              searchAll();
-            "
           >
-            Anywhere
+            Remote
             <span
               class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
-              v-if="isRemoteActive"
+              >13</span
             >
-              {{ remoteCount > -1 ? remoteCount : "?" }}
-            </span>
           </a>
         </li>
       </ul>
     </div>
 
-    <div v-if="isLocalActive">
-      <div>
-        <button
-          class="ml-2 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
-          @click="$router.push({ name: 'search-area' })"
-        >
-          Select a {{ searchBox ? "Different" : "" }} Location for Nearby Search
-        </button>
-      </div>
-    </div>
-
-    <!-- Loading Animation -->
-    <div
-      class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
-      v-if="isLoading"
-    >
-      <fa icon="spinner" class="fa-spin-pulse"></fa>
-    </div>
-
     <!-- Results List -->
-    <InfiniteScroll @reached-bottom="loadMoreData">
+    <ul class="">
-      <ul>
+      <li class="border-b border-slate-300">
-        <li
+        <a href="project-view.html" class="block py-4 flex gap-4">
-          class="border-b border-slate-300"
+          <div class="w-12">
-          v-for="project in projects"
+            <img
-          :key="project.handleId"
+              src="https://picsum.photos/200/200?random=1"
-        >
+              class="w-full rounded"
-          <a
+            />
-            @click="onClickLoadProject(project.handleId)"
+          </div>
-            class="block py-4 flex gap-4"
-          >
-            <div class="w-12">
-              <EntityIcon
-                :entityId="project.handleId"
-                :iconSize="48"
-                class="block border border-slate-300 rounded-md"
-              ></EntityIcon>
-            </div>
 
-            <div class="grow">
+          <div class="grow">
-              <h2 class="text-base font-semibold">{{ project.name }}</h2>
+            <h2 class="text-base font-semibold">Canyon cleanup</h2>
-              <div class="text-sm">
+            <div class="text-sm">
-                <fa icon="user" class="fa-fw text-slate-400"></fa>
+              <fa icon="user" class="fa-fw text-slate-400"></fa> Rotary
-                {{
-                  didInfo(project.issuerDid, activeDid, allMyDids, allContacts)
-                }}
-              </div>
             </div>
-          </a>
+          </div>
-        </li>
+        </a>
-      </ul>
+      </li>
-    </InfiniteScroll>
+
+      <li class="border-b border-slate-300">
+        <a href="project-view.html" class="block py-4 flex gap-4">
+          <div class="w-12">
+            <img
+              src="https://picsum.photos/200/200?random=2"
+              class="w-full rounded"
+            />
+          </div>
+
+          <div class="grow">
+            <h2 class="text-base font-semibold">Potluck with neighbors</h2>
+            <div class="text-sm">
+              <fa icon="user" class="fa-fw text-slate-400"></fa> Andrew A.
+            </div>
+          </div>
+        </a>
+      </li>
+
+      <li class="border-b border-slate-300">
+        <a href="project-view.html" class="block py-4 flex gap-4">
+          <div class="w-12">
+            <img
+              src="https://picsum.photos/200/200?random=3"
+              class="w-full rounded"
+            />
+          </div>
+
+          <div class="grow">
+            <h2 class="text-base font-semibold">Historical site</h2>
+            <div class="text-sm">
+              <fa icon="user" class="fa-fw text-slate-400 mr-1"></fa>
+              <em>Unknown</em>
+            </div>
+          </div>
+        </a>
+      </li>
+    </ul>
   </section>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
+import { Options, Vue } from "vue-class-component";
 
-import { accountsDB, db } from "@/db/index";
+@Options({
-import { Contact } from "@/db/tables/contacts";
+  components: {},
-import { BoundingBox, MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { accessToken } from "@/libs/crypto";
-import { didInfo, ProjectData } from "@/libs/endorserServer";
-import QuickNav from "@/components/QuickNav.vue";
-import InfiniteScroll from "@/components/InfiniteScroll.vue";
-import EntityIcon from "@/components/EntityIcon.vue";
-import TopMessage from "@/components/TopMessage.vue";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
-@Component({
-  components: {
-    QuickNav,
-    InfiniteScroll,
-    EntityIcon,
-    TopMessage,
-  },
 })
-export default class DiscoverView extends Vue {
+export default class DiscoverView extends Vue {}
-  $notify!: (notification: Notification, timeout?: number) => void;
-
-  activeDid = "";
-  allContacts: Array<Contact> = [];
-  allMyDids: Array<string> = [];
-  apiServer = "";
-  searchTerms = "";
-  projects: ProjectData[] = [];
-  isLoading = false;
-  isLocalActive = true;
-  isRemoteActive = false;
-  localCount = -1;
-  remoteCount = -1;
-  searchBox: { name: string; bbox: BoundingBox } | null = null;
-
-  // make this function available to the Vue template
-  didInfo = didInfo;
-
-  async mounted() {
-    await db.open();
-    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-    this.activeDid = settings?.activeDid || "";
-    this.apiServer = settings?.apiServer || "";
-    this.searchBox = settings?.searchBoxes?.[0] || null;
-
-    this.allContacts = await db.contacts.toArray();
-
-    await accountsDB.open();
-    const allAccounts = await accountsDB.accounts.toArray();
-    this.allMyDids = allAccounts.map((acc) => acc.did);
-
-    if (this.searchBox) {
-      await this.searchLocal();
-    } else {
-      this.isLocalActive = false;
-      this.isRemoteActive = true;
-      await this.searchAll();
-    }
-  }
-
-  public resetCounts() {
-    this.localCount = -1;
-    this.remoteCount = -1;
-  }
-
-  public async searchSelected() {
-    if (this.isLocalActive) {
-      await this.searchLocal();
-    } else {
-      await this.searchAll();
-    }
-  }
-
-  public async buildHeaders(): Promise<HeadersInit> {
-    const headers: HeadersInit = {
-      "Content-Type": "application/json",
-    };
-
-    if (this.activeDid) {
-      await accountsDB.open();
-      const allAccounts = await accountsDB.accounts.toArray();
-      const account = allAccounts.find((acc) => acc.did === this.activeDid);
-      const identity = JSON.parse(account?.identity || "null");
-
-      if (!identity) {
-        throw new Error(
-          "An ID is chosen but there are no keys for it so it cannot be used to talk with the service.",
-        );
-      }
-
-      headers["Authorization"] = "Bearer " + (await accessToken(identity));
-    } else {
-      // it's OK without auth... we just won't get any identifiers
-    }
-    return headers;
-  }
-
-  public async searchAll(beforeId?: string) {
-    this.resetCounts();
-
-    if (!beforeId) {
-      // this was an initial search so clear any previous results
-      this.projects = [];
-    }
-
-    let queryParams = "claimContents=" + encodeURIComponent(this.searchTerms);
-
-    if (beforeId) {
-      queryParams = queryParams + `&beforeId=${beforeId}`;
-    }
-
-    try {
-      this.isLoading = true;
-      const response = await fetch(
-        this.apiServer + "/api/v2/report/plans?" + queryParams,
-        {
-          method: "GET",
-          headers: await this.buildHeaders(),
-        },
-      );
-
-      if (response.status !== 200) {
-        const details = await response.text();
-        console.log("Problem with full search:", details);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: `There was a problem accessing the server. Try again later.`,
-          },
-          -1,
-        );
-
-        throw details;
-      }
-
-      const results = await response.json();
-
-      const plans: ProjectData[] = results.data;
-      if (plans) {
-        for (const plan of plans) {
-          const { name, description, handleId, issuerDid, rowid } = plan;
-          this.projects.push({ name, description, handleId, issuerDid, rowid });
-        }
-        this.remoteCount = this.projects.length;
-      } else {
-        throw JSON.stringify(results);
-      }
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (e: any) {
-      console.log("Error with feed load:", e);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: e.userMessage || "There was a problem retrieving projects.",
-        },
-        -1,
-      );
-    } finally {
-      this.isLoading = false;
-    }
-  }
-
-  public async searchLocal(beforeId?: string) {
-    this.resetCounts();
-
-    if (!this.searchBox) {
-      this.projects = [];
-      return;
-    }
-
-    if (!beforeId) {
-      // this was an initial search so clear any previous results
-      this.projects = [];
-    }
-
-    const claimContents =
-      "claimContents=" + encodeURIComponent(this.searchTerms);
-
-    let queryParams = [
-      claimContents,
-      "minLocLat=" + this.searchBox.bbox.minLat,
-      "maxLocLat=" + this.searchBox.bbox.maxLat,
-      "westLocLon=" + this.searchBox.bbox.westLong,
-      "eastLocLon=" + this.searchBox.bbox.eastLong,
-    ].join("&");
-
-    if (beforeId) {
-      queryParams = queryParams + `&beforeId=${beforeId}`;
-    }
-
-    try {
-      this.isLoading = true;
-      const response = await fetch(
-        this.apiServer + "/api/v2/report/plansByLocation?" + queryParams,
-        {
-          method: "GET",
-          headers: await this.buildHeaders(),
-        },
-      );
-
-      if (response.status !== 200) {
-        const details = await response.text();
-        console.log("Problem with nearby search:", details);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "There was a problem accessing the server. Try again later.",
-          },
-          -1,
-        );
-        throw await response.text();
-      }
-
-      const results = await response.json();
-
-      if (results.data) {
-        if (beforeId) {
-          const plans: ProjectData[] = results.data;
-          for (const plan of plans) {
-            const { name, description, handleId, issuerDid, rowid } = plan;
-            this.projects.push({
-              name,
-              description,
-              handleId,
-              issuerDid,
-              rowid,
-            });
-          }
-        } else {
-          this.projects = results.data;
-        }
-        this.localCount = this.projects.length;
-      } else {
-        throw JSON.stringify(results);
-      }
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (e: any) {
-      console.log("Error with feed load:", e);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: e.userMessage || "There was a problem retrieving projects.",
-        },
-        -1,
-      );
-    } finally {
-      this.isLoading = false;
-    }
-  }
-
-  /**
-   * Data loader used by infinite scroller
-   * @param payload is the flag from the InfiniteScroll indicating if it should load
-   **/
-  async loadMoreData(payload: boolean) {
-    if (this.projects.length > 0 && payload) {
-      const latestProject = this.projects[this.projects.length - 1];
-      if (this.isLocalActive) {
-        this.searchLocal(latestProject["rowid"]);
-      } else if (this.isRemoteActive) {
-        this.searchAll(latestProject["rowid"]);
-      }
-    }
-  }
-
-  /**
-   * Handle clicking on a project entry found in the list
-   * @param id of the project
-   **/
-  onClickLoadProject(id: string) {
-    localStorage.setItem("projectId", id);
-    const route = {
-      path: "/project/" + encodeURIComponent(id),
-    };
-    this.$router.push(route);
-  }
-
-  public computedLocalTabClassNames() {
-    return {
-      "inline-block": true,
-      "py-3": true,
-      "rounded-t-lg": true,
-      "border-b-2": true,
-      active: this.isLocalActive,
-      "text-blue-600": this.isLocalActive,
-      "border-blue-600": this.isLocalActive,
-      "font-semibold": this.isLocalActive,
-      "border-transparent": !this.isLocalActive,
-      "hover:text-slate-600": !this.isLocalActive,
-      "hover:border-slate-300": !this.isLocalActive,
-    };
-  }
-
-  public computedRemoteTabClassNames() {
-    return {
-      "inline-block": true,
-      "py-3": true,
-      "rounded-t-lg": true,
-      "border-b-2": true,
-      active: this.isRemoteActive,
-      "text-blue-600": this.isRemoteActive,
-      "border-blue-600": this.isRemoteActive,
-      "font-semibold": this.isRemoteActive,
-      "border-transparent": !this.isRemoteActive,
-      "hover:text-slate-600": !this.isRemoteActive,
-      "hover:border-slate-300": !this.isRemoteActive,
-    };
-  }
-}
 </script>

src/views/HelpNotificationsView.vue

@@ -1,417 +0,0 @@
-<template>
-  <QuickNav />
-
-  <!-- CONTENT -->
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <fa icon="chevron-left" class="fa-fw"></fa>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-        Notification Help
-      </h1>
-    </div>
-
-    <!-- eslint-disable prettier/prettier -->
-    <div>
-      <p>Here are ways to test notifications and get them working.</p>
-
-      <h2 class="text-xl font-semibold mt-4">Full Test</h2>
-      <div>
-        <p>
-          If this works then you're all set.
-          <button
-            @click="sendTestWebPushMessage(true)"
-            class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
-          >
-            Send Yourself a Test Web Push Message (Through Push Server but
-            Skipping Client Filter)
-          </button>
-        </p>
-      </div>
-
-      <h2 class="text-xl font-semibold mt-4">
-        If this app doesn't support notifications...
-        <!-- Note that that exact verbiage shows in a message elsewhere. -->
-      </h2>
-      <div>
-        <p>
-          To be notified of interesting updates, install this app on your device
-          (as opposed to using it inside the browser app). In Chrome, it may prompt
-          you, and you can also look for the "Install" command in the browser
-          settings; on the the desktop, look for this icon in the address bar:
-          <img
-            src="../assets/help/chrome-install-pwa.png"
-            alt="Chrome 'install' icon"
-            class="ml-4"
-          />
-        </p>
-      </div>
-
-      <h2 class="text-xl font-semibold mt-4">
-        If you must enable notifications...
-        <!-- Note that that exact verbiage shows in a message elsewhere. -->
-      </h2>
-      <div>
-        <p>
-          <button class="text-blue-500" @click="showNotificationChoice()">
-            Click here.
-          </button>
-        </p>
-      </div>
-
-      <h2 class="text-xl font-semibold mt-4">
-        If you're waiting for system initialization...
-        <!-- Note that that exact verbiage shows in a message elsewhere. -->
-      </h2>
-      <div>
-        <p>
-          ... and it never stops, then there is a problem with the underlying
-          service worker or push server mechanism in your browser. Your best bet
-          is to follow the "Reinstall" steps below or use a different browser.
-        </p>
-      </div>
-
-      <h2 class="text-xl font-semibold mt-4">Check App Permissions</h2>
-      <div>
-        <p>
-          In Apple iOS, check "Settings" -> "Notifications", look for the Time
-          Safari app (or the browser you're using), and make sure notifications
-          are enabled.
-        </p>
-        <p>
-          In Android, hold on to the app icon, then select "App Info", then
-          "Notifications" and make sure they're enabled. If it's still a problem
-          then go further:
-        </p>
-        <p>
-          If you installed the app with Chrome, make sure there are no other
-          tabs with it open. Here are some ways to clear caches that can mess
-          things up (and note that this clears out data from the installed app
-          -- which is good to do while the app is installed):
-        </p>
-        <ul>
-          <li class="list-disc ml-4">
-            Go to Chrome "App Info", then "Storage & Cache" and "Clear Storage".
-          </li>
-          <li class="list-disc ml-4">
-            Go to Chrome "Settings", then "Privacy and Security" and "Clear
-            "Clear browsing data", then "Cookies and site data". Make sure the
-            "Time Range" at the top shows "All time".
-          </li>
-        </ul>
-        <p>
-          On a Mac, go to "Settings" and check "Notifications".
-          <img
-            src="../assets/help/mac-installed-app-settings.png"
-            alt="Mac app settings"
-            class="ml-4"
-          />
-        </p>
-      </div>
-
-      <h2 class="text-xl font-semibold mt-4">Check Browser Permissions</h2>
-      <div>
-        <p>In Apple iOS, check Settings -> Notifications.</p>
-        <p>In Android, check Settings -> Notifications.</p>
-
-        You can find more details about compatibility
-        <a
-          href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API#browser_compatibility"
-          class="text-blue-500"
-          target="_blank"
-        >
-          here <fa icon="arrow-up-right-from-square" class="fa-fw" />
-        </a>
-      </div>
-
-      <h2 class="text-xl font-semibold mt-4">
-        Check Operating System (OS) Permissions
-      </h2>
-      <div class="px-2">
-        <div>
-          <h3 class="text-lg font-semibold">Mobile Phone - Apple iOS</h3>
-          <div>
-            Notifications require iOS 16.4 or higher. To check your iOS version,
-            go to Settings > General > About > Software Version.
-          </div>
-
-          <h3 class="text-lg font-semibold">Mobile Phone - Google Android</h3>
-          <div>
-            We recommend Chrome. It must be version 42 or higher. Check your
-            version under Settings -> About Chrome.
-          </div>
-
-          <h3 class="text-lg font-semibold">Desktop - Mac</h3>
-          <div>
-            <span>
-              See "System Settings" -> "Notifications" and make sure it is
-              enabled for the browser you're using. Note that these
-              notifications require Mac OS 13; see your macOS version under
-              Apple -> "About This Mac".
-            </span>
-          </div>
-
-          <h3 class="text-lg font-semibold">Desktop - Windows</h3>
-          In Windows, check "Settings" -> "Notifications".
-          <img
-            src="../assets/help/windows-system-enable-notifications.png"
-            alt="Windows system settings"
-            class="ml-4"
-          />
-        </div>
-        <div>
-          You can find more details about compatibility
-          <a
-            href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API#browser_compatibility"
-            class="text-blue-500"
-            target="_blank"
-          >
-            here <fa icon="arrow-up-right-from-square" class="fa-fw" />
-          </a>
-        </div>
-      </div>
-
-      <h2 class="text-xl font-semibold mt-4">Reinstall</h2>
-      <div>
-        <p>
-          If all else fails, uninstall the app, ensure all the browser tabs with
-          it are closed, and clear out caches and storage.
-        </p>
-        <p>
-          Of course, you'll want to back up all your data first -- all seeds as
-          well as the contacts & settings -- on the Account
-          <fa icon="circle-user" /> page.
-        </p>
-        <ul class="ml-4 list-disc">
-          <li>
-            Clear cache.
-            <ul>
-              <li>
-                In mobile, look for the browser app settings. This is true even
-                for an installed app: go to the browser which you used to
-                initially visit timesafari.app, because those settings affect
-                the app. Look for "Delete browsing data" in the "Settings",
-                under "Privacy and Security".
-              </li>
-              <li>
-                In Chrome, go to `chrome://settings/cookies` and "all site data
-                and permissions" for timesafari.app; in Firefox, go to
-                `about:preferences` and search for "cache" then "Manage Data"
-                for timesafari.app. Also manually remove the IndexedDB data if
-                the DBs still show.)
-              </li>
-            </ul>
-          </li>
-          <li>
-            Clear notification permission. (In Chrome, go to
-            `chrome://settings/content/notifications`; in Firefox, go to
-            `about:preferences` and search for "notifications".)
-          </li>
-          <li>
-            Unregister service worker. (In Chrome, go to
-            `chrome://serviceworker-internals/`; in Firefox, go to
-            `about:serviceworkers`.)
-          </li>
-          <li>
-            Clear "Cache Storage". (In Chrome, in dev tools under "Application";
-            in Firefox, in dev tools under "Storage".)
-          </li>
-        </ul>
-        <p>Then reinstall the app.</p>
-      </div>
-
-      <h2 class="text-xl font-semibold mt-4">Tests</h2>
-      <button
-        @click="showTestNotification()"
-        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4 mb-2"
-      >
-        Send Test Notification Directly to Device (Not Through Push Server)
-      </button>
-      <p>
-        If that didn't show a notification on your device, the problem is that
-        your browser or your operating system are not allowing notifications
-        through. See "Check App Permissions" and "Check Browser Permissions" and
-        "Check Operating System (OS) Permissions" above.
-      </p>
-
-      <button
-        @click="alertWebPushSubscription()"
-        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4 mb-2"
-      >
-        Show Web Push Subscription Info
-      </button>
-      <p>
-        If that showed "null" then the notification is not active.
-        <button class="text-blue-500" @click="showNotificationChoice()">
-          Click here.
-        </button>
-      </p>
-
-      <button
-        @click="sendTestWebPushMessage(true)"
-        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4 mb-2"
-      >
-        Send Yourself a Test Web Push Message (Through Push Server but Skipping
-        Client Filter)
-      </button>
-      <p>
-        If that didn't show a notification on your device, there is a problem
-        getting to the push server. Disable notifications and then enable them
-        again.
-      </p>
-
-      <button
-        @click="sendTestWebPushMessage()"
-        class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4 mb-2"
-      >
-        Send Yourself a Test Web Push Message (Through Push Server and Client
-        Filter)
-      </button>
-      <p>
-        If you don't see a message, it could be that there is nothing new for
-        you to see. If the previous test worked, then things should work fine.
-        If you notice a full 24 hours where you get no notification and you know
-        that there are new items that should show, gather as many details as
-        possible and go to the bottom of
-        <router-link to="help" class="text-blue-500"> this page </router-link>
-        for ways to contact us.
-      </p>
-    </div>
-    <!-- eslint-enable -->
-  </section>
-</template>
-<script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
-
-import QuickNav from "@/components/QuickNav.vue";
-import { sendTestThroughPushServer } from "@/libs/util";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
-@Component({ components: { QuickNav } })
-export default class HelpNotificationsView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
-
-  subscription: PushSubscription | null = null;
-
-  async mounted() {
-    try {
-      const registration = await navigator.serviceWorker.ready;
-      this.subscription = await registration.pushManager.getSubscription();
-    } catch (error) {
-      console.error("Mount error:", error);
-    }
-  }
-
-  alertWebPushSubscription() {
-    console.log(
-      "Web push subscription:",
-      JSON.parse(JSON.stringify(this.subscription)), // gives more info than plain console logging
-    );
-    alert(JSON.stringify(this.subscription));
-  }
-
-  async sendTestWebPushMessage(skipFilter: boolean = false) {
-    if (!this.subscription) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Not Subscribed",
-          // Note that this exact verbiage shows in help text.
-          text: "You must enable notifications before testing the web push.",
-        },
-        -1,
-      );
-      return;
-    }
-
-    try {
-      await sendTestThroughPushServer(this.subscription, skipFilter);
-
-      this.$notify(
-        {
-          group: "alert",
-          type: "success",
-          title: "Test Web Push Sent",
-          text:
-            "Check your device for the test web push message" +
-            (skipFilter ? "." : " if there are new items in your feed."),
-        },
-        -1,
-      );
-    } catch (error) {
-      console.error("Got an error sending test notification:", error);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error Sending Test",
-          text: "Got an error sending the test web push notification.",
-        },
-        -1,
-      );
-    }
-  }
-
-  showTestNotification() {
-    const TEST_NOTIFICATION_TITLE = "It Worked";
-    navigator.serviceWorker.ready
-      .then((registration) => {
-        return registration.showNotification(TEST_NOTIFICATION_TITLE, {
-          body: "This is your test notification.",
-        });
-      })
-      .then(() => {
-        this.$notify(
-          {
-            group: "alert",
-            type: "success",
-            title: "Sent",
-            text: `A notification was triggered, so one should show on your device entitled '${TEST_NOTIFICATION_TITLE}'.`,
-          },
-          5000,
-        );
-      })
-      .catch((error) => {
-        console.error("Got a notification error:", error);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Failed",
-            text: "Got an error sending a notification.",
-          },
-          -1,
-        );
-      });
-  }
-
-  showNotificationChoice() {
-    this.$notify(
-      {
-        group: "modal",
-        type: "notification-permission",
-        title: "", // unused, only here to satisfy type check
-        text: "", // unused, only here to satisfy type check
-      },
-      -1,
-    );
-  }
-}
-</script>

src/views/HelpView.vue

@@ -1,336 +0,0 @@
-<template>
-  <QuickNav />
-
-  <!-- CONTENT -->
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <fa icon="chevron-left" class="fa-fw"></fa>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-        Help
-      </h1>
-    </div>
-
-    <!-- eslint-disable prettier/prettier -->
-    <div>
-      <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">What is the idea here?</h2>
-      <p>
-        We are building networks of people who want to grow a giving society.
-        First of all, you can see what people have given, and also recognize
-        gifts you've seen, in a way that leaves a permanent record -- one that
-        came from you, and the recipient can prove it was for them. This is
-        personally gratifying, but it extends to broader work: volunteers get
-        confirmation of activity, and selectively show off their contributions
-        and network.
-      </p>
-      <p>
-        You can show giving and also offer help to ideas, based on others'
-        willingness to help out, too. You can record your own ideas and invite
-        others to collaborate.
-      </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 get started?</h2>
-      <p>
-        You need someone to register you -- usually the person who told you
-        about this app, on the Contacts
-        <fa icon="users" class="fa-fw" /> page. After they register you, you can
-        select any contact on the home page (or "anonymous") and record your
-        appreciation for... whatever. The main goal is to record what people
-        have given you, to grow giving economies. Each claim is recorded on a
-        custom ledger. The day after being registered, you'll be able to able to
-        register others; later, you can create projects, too.
-      </p>
-      <p>
-        Note that there are limits to how many others each person can register,
-        so you may have to wait.
-      </p>
-
-      <h2 class="text-xl font-semibold">How do I add someone else?</h2>
-      <p>
-        <button class="text-blue-500" @click="showOnboardInfo">
-          Click here to show an alert with the steps.
-        </button>
-        To start scanning, go
-        <router-link class="text-blue-500" to="/contact-qr">here.</router-link>
-      </p>
-      <p>
-        If they are not nearby to scan QR codes, tell them to copy their ID from
-        their Identity <fa icon="circle-user" class="fa-fw" /> page, which
-        typically starts with "did:ethr:...", and send it to you. Go to the
-        Contacts <fa icon="users" class="fa-fw" /> page and enter that into the
-        top form. To add a name, put a comma and then their name; to add their
-        public key, put another comma followed by the key.
-      </p>
-
-      <h2 class="text-xl font-semibold">How do I backup all my data?</h2>
-      <p>
-        There are two sets of data to backup: the identifier secrets and the
-        other data that isn't quite a secret such as settings, contacts, etc.
-      </p>
-
-      <div class="px-4">
-        <h2 class="text-xl font-semibold">
-          How do I backup my identifier (secret) data?
-        </h2>
-        <ul class="list-disc list-outside ml-4">
-          <li>
-            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page.
-          </li>
-          <li>
-            Click on "Backup Identifier Seed" and follow the instructions.
-          </li>
-          <li>
-            If you have other identifiers, switch to each one and repeat those
-            steps.
-          </li>
-        </ul>
-
-        <h2 class="text-xl font-semibold">
-          How do I backup my other (non-identifier-secret) data?
-        </h2>
-        <ul class="list-disc list-outside ml-4">
-          <li>
-            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page.
-          </li>
-          <li>
-            Click on "Download Settings...". That will save a file to your
-            downloads folder. That is your backup, so put it someplace where you
-            won't lose it.
-          </li>
-        </ul>
-      </div>
-
-      <h2 class="text-xl font-semibold">How do I restore my data?</h2>
-      <p>
-        There are two parts to restore your data: the identity secrets and the
-        other data such as settings, contacts, etc.
-      </p>
-
-      <div class="px-4">
-        <h2 class="text-xl font-semibold">
-          How do I restore my identifier (secret) data?
-        </h2>
-        <ul class="list-disc list-outside ml-4">
-          <li>
-            <router-link class="text-blue-500" to="/import-account">
-              Go to the import page
-            </router-link>
-            and enter the seed phrase you backed up.
-          </li>
-        </ul>
-
-        <h2 class="text-xl font-semibold">
-          How do I restore my other (non-identifier-secret) data?
-        </h2>
-        <ul class="list-disc list-outside ml-4">
-          <li>
-            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page,
-            click Advanced, and follow the instructions for Data Import.
-          </li>
-        </ul>
-      </div>
-
-      <h2 class="text-xl font-semibold">How do I create another identity?</h2>
-      <p>
-        Before doing this, note that it is an advanced feature that affects
-        functionality (eg. the words "Alt ID" next to results, backup features)
-        so beware. You can
-        <router-link to="start" class="text-blue-500">
-          create another identity here.
-        </router-link>
-      </p>
-
-      <h2 class="text-xl font-semibold">How do I erase my data?</h2>
-      <p>
-        Before doing this, note the two kinds of data to backup: identity data,
-        and other data for contacts and settings (see instructions above).
-      </p>
-      <ul>
-        <li class="list-disc list-outside ml-4">
-          Mobile
-          <ul>
-            <li class="list-disc list-outside ml-4">
-              Chrome: Settings -> Privacy and Security -> Clear Browsing Data
-            </li>
-            <li class="list-disc list-outside ml-4">
-              DuckDuckGo: long hold -> Clear Data (takes effect immediately)
-            </li>
-          </ul>
-        </li>
-        <li class="list-disc list-outside ml-4">
-          Desktop
-          <ul>
-            <li class="list-disc list-outside ml-4">
-              Chrome:
-              <a href="chrome://settings/content/all" class="text-blue-500"
-                >clear here</a
-              >
-              also clear under dev tools Application
-            </li>
-            <li class="list-disc list-outside ml-4">
-              Firefox: <a href="about:preferences">go here</a>, Manage Data,
-              find timesafari.app and select, hit Remove Selected, then Save
-              Changes
-            </li>
-            <li class="list-disc list-outside ml-4">
-              Safari: Settings -> Privacy -> Manage Website Data, search for
-              timesafari.app and select, hit Remove Selected, then Done.
-            </li>
-          </ul>
-        </li>
-      </ul>
-      <p>To erase your data from our servers, contact us (below).</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
-        results are 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">
-        Where do I get help with notifications?
-      </h2>
-      <p>
-        <router-link class="text-blue-500" to="/help-notifications"
-          >Here.</router-link
-        >
-      </p>
-
-      <h2 class="text-xl font-semibold">
-        How do I access even more functionality?
-      </h2>
-      <p>
-        There is an "Advanced" section at the bottom of the Account
-        <fa icon="circle-user" /> page.
-      </p>
-      <p>
-        There is a even more functionality in a mobile app (and more
-        documentation) at
-        <a href="https://endorser.ch" class="text-blue-500">
-          EndorserSearch.com
-        </a>
-      </p>
-
-      <h2 class="text-xl font-semibold">What are the terms & conditions and the privacy policy?</h2>
-      <p style="display:inline; align-items: center">
-        This work is marked with
-        <a href="http://creativecommons.org/publicdomain/zero/1.0?ref=chooser-v1" target="_blank" rel="license noopener noreferrer">
-          <span class="text-blue-500 mr-1">CC0 1.0</span>
-          <img
-              src="../assets/help/creative-commons-circle.svg"
-              alt="CC circle"
-              width="20"
-              class="display: inline"
-          />
-          <img
-              src="../assets/help/creative-commons-zero.svg"
-              alt="CC zero"
-              width="20"
-              style="display: inline"
-          />
-        </a>
-        <br />
-        For notifications, this service stores push token data; that can be revoked at any time
-        by disabling notifications on the Account <fa icon="circle-user" class="fa-fw" /> page.
-        <br />
-        For all other claim data,
-        <a href="https://endorser.ch/privacy-policy" class="text-blue-500">
-          the Endorser Service has this Privacy Policy.
-        </a>
-      </p>
-
-      <h2 class="text-xl font-semibold">Where can I read more?</h2>
-      <p>
-        This is part of the
-        <a href="https://livesofgiving.org" class="text-blue-500">
-          Lives of Giving
-        </a>
-        initiative.
-      </p>
-
-      <h2 class="text-xl font-semibold">What app version is this?</h2>
-      <p>{{ package.version }} ({{ commitHash }})</p>
-
-      <h2 class="text-xl font-semibold">
-        For any other questions, including removing your data:
-      </h2>
-      <p>
-        Contact us at
-        <a href="mailto:info@TimeSafari.app" class="text-blue-500"
-          >info@TimeSafari.app</a
-        >
-      </p>
-    </div>
-    <!-- eslint enable -->
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
-
-import * as Package from "../../package.json";
-import QuickNav from "@/components/QuickNav.vue";
-import { ONBOARD_MESSAGE } from "@/libs/util";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
-@Component({ components: { QuickNav } })
-export default class Help extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
-
-  package = Package;
-  commitHash = process.env.VUE_APP_GIT_HASH;
-
-  showOnboardInfo() {
-    this.$notify(
-      {
-        group: "alert",
-        type: "info",
-        title: "Onboard Someone",
-        text: ONBOARD_MESSAGE,
-      },
-      -1,
-    );
-  }
-}
-</script>

src/views/HomeView.vue

@@ -1,469 +1,15 @@
 <template>
-  <QuickNav selected="Home"></QuickNav>
+  <section></section>
-  <TopMessage />
-
-  <!-- CONTENT -->
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Time Safari
-    </h1>
-
-    <!-- prompt to install notifications -->
-    <div class="mb-8">
-      <div
-        v-if="!notificationsSupported()"
-        class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
-      >
-        <p style="display: inline; align-items: center">
-          This app doesn't support notifications, so let's fix that. <br />
-          <!-- Note that that exact verbiage shows in the help. -->
-
-          <span v-if="userAgentInfo.getOS().name === 'iOS'">
-            Tap on "Share"<img
-              src="../assets/help/apple-share-icon.svg"
-              alt="Apple 'share' icon"
-              width="30"
-              style="display: inline; margin: 0 5px; vertical-align: middle"
-            />and then "Add to Home Screen"
-            <fa icon="square-plus" title="Apple 'Add' icon" />
-            and go click on that new app.
-          </span>
-          <span
-            v-else-if="userAgentInfo.getBrowser().name.startsWith('Chrome')"
-          >
-            You should see a prompt to install, or you can click on the
-            top-right dots
-            <fa
-              icon="ellipsis-vertical"
-              title="vertical ellipsis"
-              class="fa-fw"
-            />
-            and then "Install"<img
-              src="../assets/help/install-android-chrome.png"
-              alt="Android 'install' icon"
-              width="30"
-              style="display: inline; margin: 0 5px; vertical-align: middle"
-            />
-            and go use that app. If you already did these steps, reload this app
-            so that it is fully detected.
-          </span>
-          <span v-else>
-            Try
-            <a href="https://www.google.com/chrome/" class="text-blue-500"
-              >Google Chrome</a
-            >
-            or look for a way to install as an app.
-          </span>
-        </p>
-      </div>
-    </div>
-
-    <!-- show the actions for recognizing a give -->
-    <div class="mb-8">
-      <div
-        v-if="!activeDid"
-        class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
-      >
-        <p class="text-lg mb-3">
-          You need an <b>identifier</b> before you can record anyone's gives.
-        </p>
-        <router-link
-          :to="{ name: 'start' }"
-          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
-        >
-          Create Your Identifier</router-link
-        >
-      </div>
-
-      <div
-        v-else-if="!isRegistered"
-        class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
-      >
-        Someone must register your account before you can record anyone's gives.
-        To do this:
-        <router-link
-          :to="{ name: 'contact-qr' }"
-          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
-        >
-          1. Show Them Your Identity Info</router-link
-        >
-        <router-link
-          :to="{ name: 'account' }"
-          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
-        >
-          2. Check Your Limits</router-link
-        >
-      </div>
-
-      <div v-else>
-        <!-- activeDid && isRegistered -->
-        <h2 class="text-xl font-bold mb-4">Record Something Given</h2>
-
-        <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
-          <li @click="openDialog()">
-            <EntityIcon
-              :entityId="null"
-              :iconSize="64"
-              class="mx-auto border border-slate-300 rounded-md mb-1"
-            ></EntityIcon>
-            <h3
-              class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden"
-            >
-              Anonymous/Unnamed
-            </h3>
-          </li>
-          <li
-            v-for="contact in allContacts"
-            :key="contact.did"
-            @click="openDialog(contact)"
-          >
-            <EntityIcon
-              :entityId="contact.did"
-              :iconSize="64"
-              class="mx-auto border border-slate-300 rounded-md mb-1"
-            ></EntityIcon>
-            <h3
-              class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
-            >
-              {{ contact.name || contact.did }}
-            </h3>
-          </li>
-        </ul>
-
-        <!-- Ideally, this button should only be visible when the active account has more than 7 or 11 contacts in their list (we want to limit the grid count above to 8 or 12 accounts to keep it compact) -->
-        <router-link
-          v-if="allContacts.length >= 7"
-          :to="{ name: 'contact-gives' }"
-          class="block text-center text-md font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md"
-        >
-          Show More Contacts&hellip;
-        </router-link>
-
-        <!-- If there are no contacts, show this instead: -->
-        <div
-          class="rounded border border-dashed border-slate-300 bg-slate-100 px-4 py-3 text-center italic text-slate-500"
-          v-if="allContacts.length === 0"
-        >
-          (No contacts to show.)
-        </div>
-      </div>
-    </div>
-
-    <GiftedDialog
-      ref="customDialog"
-      message="Received from"
-      showGivenToUser="true"
-    />
-
-    <!-- Results List -->
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <h2 class="text-xl font-bold mb-4">Latest Activity</h2>
-      <InfiniteScroll @reached-bottom="loadMoreGives">
-        <ul class="border-t border-slate-300">
-          <li
-            class="border-b border-slate-300 py-2"
-            v-for="record in feedData"
-            :key="record.jwtId"
-          >
-            <div
-              class="border-b border-dashed border-slate-400 text-orange-400 pb-2 mb-2 font-bold uppercase text-sm"
-              v-if="record.jwtId == feedLastViewedClaimId"
-            >
-              You've seen all the following
-            </div>
-
-            <div class="flex">
-              <fa icon="gift" class="pt-1 pr-2 text-slate-500"></fa>
-              <span class="">{{ this.giveDescription(record) }}</span>
-              <a @click="onClickLoadClaim(record.jwtId)">
-                <fa icon="circle-info" class="pl-2 pt-1 text-slate-500"></fa>
-              </a>
-            </div>
-          </li>
-        </ul>
-      </InfiniteScroll>
-      <div :class="{ hidden: isHiddenSpinner }">
-        <p class="text-slate-500 text-center italic mt-4 mb-4">
-          <fa icon="spinner" class="fa-spin-pulse"></fa> Loading&hellip;
-        </p>
-      </div>
-    </div>
-  </section>
 </template>
 
 <script lang="ts">
-import { UAParser } from "ua-parser-js";
+import { Options, Vue } from "vue-class-component";
-import { Component, Vue } from "vue-facing-decorator";
+import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
 
-import EntityIcon from "@/components/EntityIcon.vue";
+@Options({
-import GiftedDialog from "@/components/GiftedDialog.vue";
-import InfiniteScroll from "@/components/InfiniteScroll.vue";
-import QuickNav from "@/components/QuickNav.vue";
-import TopMessage from "@/components/TopMessage.vue";
-import { db, accountsDB } from "@/db/index";
-import { Account } from "@/db/tables/accounts";
-import { Contact } from "@/db/tables/contacts";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
-import { accessToken } from "@/libs/crypto";
-import {
-  didInfo,
-  GiverInputInfo,
-  GiveServerRecord,
-} from "@/libs/endorserServer";
-import { IIdentifier } from "@veramo/core";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
-@Component({
   components: {
-    GiftedDialog,
+    HelloWorld,
-    QuickNav,
-    EntityIcon,
-    InfiniteScroll,
-    TopMessage,
   },
 })
-export default class HomeView extends Vue {
+export default class HomeView extends Vue {}
-  $notify!: (notification: Notification, timeout?: number) => void;
-
-  activeDid = "";
-  allContacts: Array<Contact> = [];
-  allMyDids: Array<string> = [];
-  apiServer = "";
-  feedData = [];
-  feedPreviousOldestId?: string;
-  feedLastViewedClaimId?: string;
-  isHiddenSpinner = true;
-  isRegistered = false;
-  numAccounts = 0;
-  userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
-
-  async beforeCreate() {
-    await accountsDB.open();
-    this.numAccounts = await accountsDB.accounts.count();
-  }
-
-  public async getIdentity(activeDid: string) {
-    await accountsDB.open();
-    const account = (await accountsDB.accounts
-      .where("did")
-      .equals(activeDid)
-      .first()) as Account;
-    const identity = JSON.parse(account?.identity || "null");
-    return identity; // may be null
-  }
-
-  public async getHeaders(identity: IIdentifier) {
-    const token = await accessToken(identity);
-    const headers = {
-      "Content-Type": "application/json",
-      Authorization: "Bearer " + token,
-    };
-    return headers;
-  }
-
-  async created() {
-    try {
-      await accountsDB.open();
-      const allAccounts = await accountsDB.accounts.toArray();
-      this.allMyDids = allAccounts.map((acc) => acc.did);
-
-      await db.open();
-      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
-      this.apiServer = settings?.apiServer || "";
-      this.activeDid = settings?.activeDid || "";
-      this.allContacts = await db.contacts.toArray();
-      this.feedLastViewedClaimId = settings?.lastViewedClaimId;
-      this.isRegistered = !!settings?.isRegistered;
-
-      // this returns a Promise but we don't need to wait for it
-      this.updateAllFeed();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (err: any) {
-      console.log("Error retrieving settings and/or feed.", err);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text:
-            err.userMessage ||
-            "There was an error retrieving your settings and/or the latest activity.",
-        },
-        -1,
-      );
-    }
-  }
-
-  notificationsSupported() {
-    return "Notification" in window;
-  }
-
-  public async buildHeaders() {
-    const headers: HeadersInit = {
-      "Content-Type": "application/json",
-    };
-
-    if (this.activeDid) {
-      await accountsDB.open();
-      const allAccounts = await accountsDB.accounts.toArray();
-      const account = allAccounts.find(
-        (acc) => acc.did === this.activeDid,
-      ) as Account;
-      const identity = JSON.parse(account?.identity || "null");
-
-      if (!identity) {
-        throw new Error(
-          "An ID is chosen but there are no keys for it so it cannot be used to talk with the service.",
-        );
-      }
-
-      headers["Authorization"] = "Bearer " + (await accessToken(identity));
-    } else {
-      // it's OK without auth... we just won't get any identifiers
-    }
-    return headers;
-  }
-
-  /**
-   * Data loader used by infinite scroller
-   * @param payload is the flag from the InfiniteScroll indicating if it should load
-   **/
-  public async loadMoreGives(payload: boolean) {
-    if (payload) {
-      this.updateAllFeed();
-    }
-  }
-
-  public async updateAllFeed() {
-    this.isHiddenSpinner = false;
-    await this.retrieveGives(this.apiServer, this.feedPreviousOldestId)
-      .then(async (results) => {
-        if (results.data.length > 0) {
-          this.feedData = this.feedData.concat(results.data);
-          this.feedPreviousOldestId =
-            results.data[results.data.length - 1].jwtId;
-          // The following update is only done on the first load.
-          if (
-            this.feedLastViewedClaimId == null ||
-            this.feedLastViewedClaimId < results.data[0].jwtId
-          ) {
-            await db.open();
-            db.settings.update(MASTER_SETTINGS_KEY, {
-              lastViewedClaimId: results.data[0].jwtId,
-            });
-          }
-        }
-      })
-      .catch((e) => {
-        console.log("Error with feed load:", e);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Feed Error",
-            text: e.userMessage || "There was an error retrieving feed data.",
-          },
-          -1,
-        );
-      });
-    this.isHiddenSpinner = true;
-  }
-
-  /**
-   * Retrieve claims in reverse chronological order
-   *
-   * @param beforeId the earliest ID (of previous searches) to search earlier
-   * @return claims in reverse chronological order
-   */
-  public async retrieveGives(endorserApiServer: string, beforeId?: string) {
-    const beforeQuery = beforeId == null ? "" : "&beforeId=" + beforeId;
-    const response = await fetch(
-      endorserApiServer + "/api/v2/report/gives?" + beforeQuery,
-      {
-        method: "GET",
-        headers: await this.buildHeaders(),
-      },
-    );
-
-    if (response.status !== 200) {
-      throw await response.text();
-    }
-
-    const results = await response.json();
-
-    if (results.data) {
-      return results;
-    } else {
-      throw JSON.stringify(results);
-    }
-  }
-
-  giveDescription(giveRecord: GiveServerRecord) {
-    // similar code is in endorser-mobile utility.ts
-    // claim.claim happen for some claims wrapped in a Verifiable Credential
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const claim = (giveRecord.fullClaim as any).claim || giveRecord.fullClaim;
-    // agent.did is for legacy data, before March 2023
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const giverDid = claim.agent?.identifier || (claim.agent as any)?.did;
-    const giverInfo = didInfo(
-      giverDid,
-      this.activeDid,
-      this.allMyDids,
-      this.allContacts,
-    );
-    let gaveAmount = claim.object?.amountOfThisGood
-      ? this.displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
-      : "";
-    if (claim.description) {
-      if (gaveAmount) {
-        gaveAmount = gaveAmount + ", and also: ";
-      }
-      gaveAmount = gaveAmount + claim.description;
-    }
-    if (!gaveAmount) {
-      gaveAmount = "something not described";
-    }
-    // recipient.did is for legacy data, before March 2023
-    const gaveRecipientId =
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      claim.recipient?.identifier || (claim.recipient as any)?.did;
-    const gaveRecipientInfo = gaveRecipientId
-      ? " to " +
-        didInfo(
-          gaveRecipientId,
-          this.activeDid,
-          this.allMyDids,
-          this.allContacts,
-        )
-      : "";
-    return giverInfo + " gave" + gaveRecipientInfo + ": " + gaveAmount;
-  }
-
-  onClickLoadClaim(jwtId: string) {
-    const route = {
-      path: "/claim/" + encodeURIComponent(jwtId),
-    };
-    this.$router.push(route);
-  }
-
-  displayAmount(code: string, amt: number) {
-    return "" + amt + " " + this.currencyShortWordForCode(code, amt === 1);
-  }
-
-  currencyShortWordForCode(unitCode: string, single: boolean) {
-    return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
-  }
-
-  openDialog(giver: GiverInputInfo) {
-    (this.$refs.customDialog as GiftedDialog).open(giver);
-  }
-}
 </script>

src/views/IdentitySwitcherView.vue

@@ -1,163 +0,0 @@
-<template>
-  <QuickNav selected="Profile"></QuickNav>
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Cancel -->
-        <router-link
-          :to="{ name: 'account' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left" class="fa-fw"></fa>
-        </router-link>
-
-        Switch Identity
-      </h1>
-    </div>
-
-    <!-- Identity List -->
-
-    <!-- Current Identity - Display First! -->
-    <div class="block bg-slate-100 rounded-md flex items-center px-4 py-3 mb-4">
-      <fa icon="circle-check" class="fa-fw text-blue-600 text-xl mr-3"></fa>
-      <span class="overflow-hidden">
-        <div class="text-sm text-slate-500 truncate">
-          <b>ID:</b> <code>{{ activeDid }}</code>
-        </div>
-      </span>
-    </div>
-
-    <!-- Other Identity/ies -->
-    <ul class="mb-4">
-      <li
-        class="block bg-slate-100 rounded-md flex items-center px-4 py-3 mb-2"
-        v-for="ident in otherIdentities"
-        :key="ident.did"
-        @click="switchAccount(ident.did)"
-      >
-        <fa icon="circle" class="fa-fw text-slate-400 text-xl mr-3"></fa>
-        <span class="overflow-hidden">
-          <h2 class="text-xl font-semibold mb-0"></h2>
-          <div class="text-sm text-slate-500 truncate">
-            <b>ID:</b> <code>{{ ident.did }}</code>
-          </div>
-        </span>
-      </li>
-    </ul>
-
-    <!-- Actions -->
-    <!-- id used by puppeteer test script -->
-    <router-link
-      id="start-link"
-      :to="{ name: 'start' }"
-      class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
-    >
-      Add Another Identity&hellip;
-    </router-link>
-    <a
-      href="#"
-      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-8"
-      @click="switchAccount('0')"
-    >
-      No Identity
-    </a>
-  </section>
-</template>
-<script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
-import { AppString } from "@/constants/app";
-import { db, accountsDB } from "@/db/index";
-import { AccountsSchema } from "@/db/tables/accounts";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
-import QuickNav from "@/components/QuickNav.vue";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
-@Component({ components: { QuickNav } })
-export default class IdentitySwitcherView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
-
-  Constants = AppString;
-  public accounts: typeof AccountsSchema;
-  public activeDid = "";
-  public apiServer = "";
-  public apiServerInput = "";
-  public otherIdentities: Array<{ did: string }> = [];
-  public showContactGives = false;
-
-  public async getIdentity(activeDid: string) {
-    await accountsDB.open();
-    const account = await accountsDB.accounts
-      .where("did")
-      .equals(activeDid)
-      .first();
-    const identity = JSON.parse((account?.identity as string) || "null");
-    return identity;
-  }
-
-  async created() {
-    try {
-      await db.open();
-      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
-      this.activeDid = settings?.activeDid || "";
-      this.apiServer = settings?.apiServer || "";
-      this.apiServerInput = settings?.apiServer || "";
-      this.showContactGives = !!settings?.showContactGivesInline;
-
-      const identity = await this.getIdentity(this.activeDid);
-
-      if (identity) {
-        db.settings.update(MASTER_SETTINGS_KEY, {
-          activeDid: identity.did,
-        });
-      }
-      await accountsDB.open();
-      const accounts = await accountsDB.accounts.toArray();
-      for (let n = 0; n < accounts.length; n++) {
-        const did = JSON.parse(accounts[n].identity)["did"];
-        if (did && this.activeDid !== did) {
-          this.otherIdentities.push({ did: did });
-        }
-      }
-    } catch (err) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error Loading Accounts",
-          text: "Clear your cache and start over (after data backup).",
-        },
-        -1,
-      );
-      console.error("Telling user to clear cache at page create because:", err);
-    }
-  }
-
-  async switchAccount(did?: string) {
-    // 0 means none
-    if (did === "0") {
-      did = undefined;
-    }
-    await db.open();
-    await db.settings.update(MASTER_SETTINGS_KEY, {
-      activeDid: did,
-    });
-    this.activeDid = did || "";
-    this.otherIdentities = [];
-    await accountsDB.open();
-    const accounts = await accountsDB.accounts.toArray();
-    for (let n = 0; n < accounts.length; n++) {
-      const did = JSON.parse(accounts[n].identity)["did"];
-      if (did && this.activeDid !== did) {
-        this.otherIdentities.push({ did: did });
-      }
-    }
-    this.$router.push({ name: "account" });
-  }
-}
-</script>

src/views/ImportAccountView.vue

@@ -1,5 +1,5 @@
 <template>
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+  <section id="Content" class="p-6 pb-24">
     <!-- Breadcrumb -->
     <div id="ViewBreadcrumb" class="mb-8">
       <h1 class="text-lg text-center font-light relative px-7">
@@ -14,117 +14,42 @@
       </h1>
     </div>
     <!-- Import Account Form -->
-    <p class="text-center text-xl mb-4 font-light">
+    <form>
-      Enter your seed phrase below to import your identity on this device.
+      <p class="text-center text-xl mb-4 font-light">
-    </p>
+        Enter your seed phrase below to import your identity on this device.
-    <!-- id used by puppeteer test script -->
+      </p>
-    <input
-      id="seed-input"
-      type="text"
-      placeholder="Seed Phrase"
-      class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
-      v-model="mnemonic"
-    />
-    {{ mnemonic }}
-    <h3
-      class="text-sm uppercase font-semibold mb-3"
-      @click="showAdvanced = !showAdvanced"
-    >
-      Advanced
-    </h3>
-    <div v-if="showAdvanced">
-      Enter a custom derivation path
       <input
         type="text"
+        placeholder="Seed Phrase"
         class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
-        v-model="derivationPath"
       />
-      For previous uPort or Endorser users,
+      <div class="mt-8">
-      <a @click="derivationPath = UPORT_DERIVATION_PATH" class="text-blue-500">
+        <input
-        click here to use that value.
+          type="submit"
-      </a>
+          class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
-    </div>
+          value="Import Identity"
-    <div class="mt-8">
+        />
-      <button
+        <button
-        @click="from_mnemonic()"
+          @click="onCancelClick()"
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+          type="button"
-      >
+          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
-        Import
+        >
-      </button>
+          Cancel
-      <button
+        </button>
-        @click="onCancelClick()"
+      </div>
-        type="button"
+    </form>
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
-      >
-        Cancel
-      </button>
-    </div>
   </section>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
+import { Options, Vue } from "vue-class-component";
-import {
-  DEFAULT_ROOT_DERIVATION_PATH,
-  deriveAddress,
-  newIdentifier,
-} from "../libs/crypto";
-import { accountsDB, db } from "@/db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 
-@Component({
+@Options({
   components: {},
 })
 export default class ImportAccountView extends Vue {
-  UPORT_DERIVATION_PATH = "m/7696500'/0'/0'/0'"; // for legacy imports, likely never used
-
-  mnemonic = "";
-  address = "";
-  privateHex = "";
-  publicHex = "";
-  derivationPath = DEFAULT_ROOT_DERIVATION_PATH;
-  showAdvanced = false;
-
   public onCancelClick() {
     this.$router.back();
   }
-
-  public async from_mnemonic() {
-    const mne: string = this.mnemonic.trim().toLowerCase();
-    if (this.mnemonic.trim().length > 0) {
-      [this.address, this.privateHex, this.publicHex] = deriveAddress(
-        mne,
-        this.derivationPath,
-      );
-
-      const newId = newIdentifier(
-        this.address,
-        this.publicHex,
-        this.privateHex,
-        this.derivationPath,
-      );
-
-      try {
-        await accountsDB.open();
-        await accountsDB.accounts.add({
-          dateCreated: new Date().toISOString(),
-          derivationPath: this.derivationPath,
-          did: newId.did,
-          identity: JSON.stringify(newId),
-          mnemonic: mne,
-          publicKeyHex: newId.keys[0].publicKeyHex,
-        });
-
-        // record that as the active DID
-        await db.open();
-        db.settings.update(MASTER_SETTINGS_KEY, {
-          activeDid: newId.did,
-        });
-        this.$router.push({ name: "account" });
-      } catch (err) {
-        console.error("Error saving mnemonic & updating settings:", err);
-      }
-    }
-  }
 }
 </script>

src/views/ImportDerivedAccountView.vue

@@ -1,154 +0,0 @@
-<template>
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Cancel -->
-        <button
-          @click="$router.go(-1)"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        >
-          <fa icon="chevron-left"></fa>
-        </button>
-        Derive from Existing Identity
-      </h1>
-    </div>
-    <!-- Import Account Form -->
-
-    <div>
-      <p class="text-center text-xl mb-4 font-light">
-        Will increment the maximum derivation path from the existing seed.
-      </p>
-
-      <p v-if="didArrays.length > 1">
-        Choose existing DIDs from same seed phrase to compute derivation.
-      </p>
-      <ul class="mb-4">
-        <li
-          class="block bg-slate-100 rounded-md flex items-center px-4 py-3 mb-2"
-          v-for="dids in didArrays"
-          :key="dids[0]"
-          @click="switchAccount(dids[0])"
-        >
-          <fa
-            v-if="dids[0] == selectedArrayFirstDid"
-            icon="circle"
-            class="fa-fw text-blue-400 text-xl mr-3"
-          ></fa>
-          <fa
-            v-else
-            icon="circle"
-            class="fa-fw text-slate-400 text-xl mr-3"
-          ></fa>
-          <span class="overflow-hidden">
-            <div class="text-sm text-slate-500 truncate">
-              <code>{{ dids.join(",") }}</code>
-            </div>
-          </span>
-        </li>
-      </ul>
-    </div>
-    <div class="mt-8">
-      <button
-        @click="incrementDerivation()"
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
-      >
-        Increment and Import
-      </button>
-      <button
-        @click="onCancelClick()"
-        type="button"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
-      >
-        Cancel
-      </button>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
-import {
-  DEFAULT_ROOT_DERIVATION_PATH,
-  deriveAddress,
-  newIdentifier,
-  nextDerivationPath,
-} from "../libs/crypto";
-import { accountsDB, db } from "@/db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-
-@Component({
-  components: {},
-})
-export default class ImportAccountView extends Vue {
-  derivationPath = DEFAULT_ROOT_DERIVATION_PATH;
-  didArrays: Array<Array<string>> = [];
-  selectedArrayFirstDid = "";
-
-  async mounted() {
-    await accountsDB.open();
-    const accounts = await accountsDB.accounts.toArray();
-    const seedDids: Record<string, Array<string>> = {};
-    accounts.forEach((account) => {
-      const prevDids: Array<string> = seedDids[account.mnemonic] || [];
-      seedDids[account.mnemonic] = prevDids.concat([account.did]);
-    });
-    this.didArrays = Object.values(seedDids);
-    this.selectedArrayFirstDid = this.didArrays[0][0];
-  }
-
-  public onCancelClick() {
-    this.$router.back();
-  }
-
-  public switchAccount(did: string) {
-    this.selectedArrayFirstDid = did;
-  }
-
-  public async incrementDerivation() {
-    await accountsDB.open();
-    // find the maximum derivation path for the selected DIDs
-    const selectedArray: Array<string> =
-      this.didArrays.find((dids) => dids[0] === this.selectedArrayFirstDid) ||
-      [];
-    const allMatchingAccounts = await accountsDB.accounts
-      .where("did")
-      .anyOf(...selectedArray)
-      .toArray();
-    const accountWithMaxDeriv = allMatchingAccounts[0];
-    allMatchingAccounts.slice(1).forEach((account) => {
-      if (account.derivationPath > accountWithMaxDeriv.derivationPath) {
-        accountWithMaxDeriv.derivationPath = account.derivationPath;
-      }
-    });
-    // increment the last number in that max derivation path
-    const newDerivPath = nextDerivationPath(accountWithMaxDeriv.derivationPath);
-
-    const mne: string = accountWithMaxDeriv.mnemonic;
-
-    const [address, privateHex, publicHex] = deriveAddress(mne, newDerivPath);
-
-    const newId = newIdentifier(address, publicHex, privateHex, newDerivPath);
-
-    try {
-      await accountsDB.accounts.add({
-        dateCreated: new Date().toISOString(),
-        derivationPath: newDerivPath,
-        did: newId.did,
-        identity: JSON.stringify(newId),
-        mnemonic: mne,
-        publicKeyHex: newId.keys[0].publicKeyHex,
-      });
-
-      // record that as the active DID
-      await db.open();
-      db.settings.update(MASTER_SETTINGS_KEY, {
-        activeDid: newId.did,
-      });
-      this.$router.push({ name: "account" });
-    } catch (err) {
-      console.error("Error saving mnemonic & updating settings:", err);
-    }
-  }
-}
-</script>

src/views/NewEditAccountView.vue

@@ -1,5 +1,5 @@
 <template>
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+  <section id="Content" class="p-6 pb-24">
     <!-- Breadcrumb -->
     <div id="ViewBreadcrumb" class="mb-8">
       <h1 class="text-lg text-center font-light relative px-7">
@@ -10,69 +10,45 @@
         >
           <fa icon="chevron-left" class="fa-fw"></fa>
         </button>
-        Edit Identity
+        [New/Edit] Identity
       </h1>
     </div>
+    <form>
+      <input
+        type="text"
+        placeholder="First Name"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      />
+      <input
+        type="text"
+        placeholder="Last Name"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      />
 
-    <input
+      <div class="mt-8">
-      type="text"
+        <button
-      placeholder="Name"
+          type="button"
-      class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+          class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
-      v-model="givenName"
+        >
-    />
+          Save Changes
-
+        </button>
-    <div class="mt-8">
+        <!-- SHOW ME instead while processing saving changes -->
-      <button
+        <button
-        type="button"
+          type="button"
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
-        @click="onClickSaveChanges()"
+        >
-      >
+          Cancel
-        Save Changes
+        </button>
-      </button>
+      </div>
-      <!-- SHOW ME instead while processing saving changes -->
+    </form>
-      <button
-        type="button"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
-        @click="onClickCancel()"
-      >
-        Cancel
-      </button>
-    </div>
   </section>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
+import { Options, Vue } from "vue-class-component";
-import { db } from "@/db/index";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 
-@Component({
+@Options({
   components: {},
 })
-export default class NewEditAccountView extends Vue {
+export default class NewEditAccountView extends Vue {}
-  givenName = "";
-
-  // 'created' hook runs when the Vue instance is first created
-  async created() {
-    await db.open();
-    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
-    this.givenName =
-      (settings?.firstName || "") +
-      (settings?.lastName ? ` ${settings.lastName}` : ""); // deprecated, pre v 0.1.3
-  }
-
-  onClickSaveChanges() {
-    db.settings.update(MASTER_SETTINGS_KEY, {
-      firstName: this.givenName,
-      lastName: "", // deprecated, pre v 0.1.3
-    });
-    localStorage.setItem("firstName", this.givenName as string);
-    localStorage.setItem("lastName", ""); // deprecated, pre v 0.1.3
-    this.$router.back();
-  }
-
-  onClickCancel() {
-    this.$router.back();
-  }
-}
 </script>

src/views/NewEditCommitmentView.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- CONTENT -->
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+  <section id="Content" class="p-6 pb-24">
     <!-- Breadcrumb -->
     <div id="ViewBreadcrumb" class="mb-8">
       <h1 class="text-lg text-center font-light relative px-7">
@@ -16,51 +16,54 @@
     </div>
 
     <!-- Project Details -->
-
+    <form>
-    <select class="block w-full rounded border border-slate-400 mb-4 px-3 py-2">
+      <select
-      <option disabled>Choose a commitment type…</option>
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
-      <option selected>Time</option>
-      <option>Cryptocurrency</option>
-      <option>Money</option>
-    </select>
-
-    <!-- Time amount -->
-    <div class="mb-4 flex items-stretch">
-      <input
-        type="number"
-        placeholder="0.0"
-        class="block w-full rounded-l border border-slate-400 px-3 py-2"
-      />
-      <span
-        class="px-4 py-2 rounded-r bg-slate-200 border border-l-0 border-slate-400"
-        >hours</span
       >
-    </div>
+        <option disabled>Choose a commitment type…</option>
+        <option selected>Time</option>
+        <option>Cryptocurrency</option>
+        <option>Money</option>
+      </select>
 
-    <!-- Crypto amount -->
+      <!-- Time amount -->
+      <div class="mb-4 flex items-stretch">
+        <input
+          type="number"
+          placeholder="0.0"
+          class="block w-full rounded-l border border-slate-400 px-3 py-2"
+        />
+        <span
+          class="px-4 py-2 rounded-r bg-slate-200 border border-l-0 border-slate-400"
+          >hours</span
+        >
+      </div>
 
-    <!-- Money amount -->
+      <!-- Crypto amount -->
 
-    <div class="mt-8">
+      <!-- Money amount -->
-      <input
+
-        type="submit"
+      <div class="mt-8">
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+        <input
-        value="Commit"
+          type="submit"
-      />
+          class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
-      <button
+          value="Commit"
-        type="button"
+        />
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+        <button
-      >
+          type="button"
-        Maybe Later
+          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
-      </button>
+        >
-    </div>
+          Maybe Later
+        </button>
+      </div>
+    </form>
   </section>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
+import { Options, Vue } from "vue-class-component";
 
-@Component({
+@Options({
   components: {},
 })
 export default class NewEditCommitmentView extends Vue {}

src/views/NewEditProjectView.vue

@@ -1,7 +1,6 @@
 <template>
-  <QuickNav selected="Projects"></QuickNav>
   <!-- CONTENT -->
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+  <section id="Content" class="p-6 pb-24">
     <!-- Breadcrumb -->
     <div id="ViewBreadcrumb" class="mb-8">
       <h1 class="text-lg text-center font-light relative px-7">
@@ -11,382 +10,69 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           ><fa icon="chevron-left" class="fa-fw"></fa
         ></router-link>
-        Edit Idea
+
+        [New/Edit] Project
       </h1>
     </div>
 
     <!-- Project Details -->
-    <!-- Image - (see design model) Empty -->
+    <form>
+      <!-- Image - (see design model) Empty -->
 
-    <div>
+      <!-- Image - Populated -->
-      {{ errorMessage }}
+      <div class="relative mb-4 rounded-md overflow-hidden">
-    </div>
+        <div class="absolute top-3 right-3 flex gap-2">
-
+          <button
-    <input
+            class="text-md font-bold uppercase bg-blue-600 text-white px-3 py-2 rounded"
-      type="text"
+          >
-      placeholder="Idea Name"
+            <fa icon="pen" class="fa-fw"></fa>
-      class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+          </button>
-      v-model="fullClaim.name"
+          <button
-    />
+            class="text-md font-bold uppercase bg-red-600 text-white px-3 py-2 rounded"
-
+          >
-    <textarea
+            <fa icon="trash-can" class="fa-fw"></fa>
-      placeholder="Description"
+          </button>
-      class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+        </div>
-      rows="5"
+        <img src="https://picsum.photos/800/400" class="w-full" />
-      v-model="fullClaim.description"
-      maxlength="5000"
-    ></textarea>
-    <div class="text-xs text-slate-500 italic -mt-3 mb-4">
-      {{ fullClaim.description?.length }}/5000 max. characters
-    </div>
-
-    <input
-      v-model="fullClaim.url"
-      placeholder="Website"
-      class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
-    />
-
-    <div class="flex items-center mb-4">
-      <input
-        type="checkbox"
-        class="mr-2"
-        v-model="includeLocation"
-        @click="includeLocation = !includeLocation"
-      />
-      <label for="includeLocation">Include Location</label>
-    </div>
-    <div v-if="includeLocation" style="height: 600px; width: 800px">
-      <div class="px-2 py-2">
-        For your security, we recommend you choose a location nearby but not
-        exactly at the place.
       </div>
 
-      <l-map
+      <input
-        ref="map"
+        type="text"
-        v-model:zoom="zoom"
+        placeholder="Project Name"
-        :center="[0, 0]"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
-        @click="
+      />
-          (event) => {
-            latitude = event.latlng.lat;
-            longitude = event.latlng.lng;
-          }
-        "
-      >
-        <l-tile-layer
-          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-          layer-type="base"
-          name="OpenStreetMap"
-        />
-        <l-marker
-          v-if="latitude && longitude"
-          :lat-lng="[latitude, longitude]"
-          @click="maybeEraseLatLong()"
-        />
-      </l-map>
-    </div>
 
-    <div class="mt-8">
+      <textarea
-      <button
+        placeholder="Description"
-        :disabled="isHiddenSave"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
+        rows="5"
-        @click="onSaveProjectClick()"
+      ></textarea>
-      >
+      <div class="text-xs text-slate-500 italic -mt-3 mb-4">
-        <!-- SHOW if in idle state -->
+        88/500 max. characters
-        <span :class="{ hidden: isHiddenSave }">Save Project</span>
+      </div>
 
-        <!-- SHOW if in saving state; DISABLE button while in saving state -->
+      <div class="mt-8">
-        <span :class="{ hidden: isHiddenSpinner }">
+        <input
-          <!-- icon no worky? -->
+          type="submit"
-          <i class="fa-solid fa-spinner fa-spin-pulse"></i>
+          class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
-          Saving&hellip;</span
+          value="Save Project"
+        />
+        <button
+          type="button"
+          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
         >
-      </button>
+          Cancel
-      <button
+        </button>
-        type="button"
+      </div>
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
+    </form>
-        @click="onCancelClick()"
-      >
-        Cancel
-      </button>
-    </div>
   </section>
 </template>
 
 <script lang="ts">
-import "leaflet/dist/leaflet.css";
+import { Options, Vue } from "vue-class-component";
-import { AxiosError } from "axios";
-import * as didJwt from "did-jwt";
-import { Component, Vue } from "vue-facing-decorator";
-import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
 
-import QuickNav from "@/components/QuickNav.vue";
+@Options({
-import { accountsDB, db } from "@/db/index";
+  components: {},
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { accessToken, SimpleSigner } from "@/libs/crypto";
-import { useAppStore } from "@/store/app";
-import { IIdentifier } from "@veramo/core";
-import { PlanVerifiableCredential } from "@/libs/endorserServer";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
-@Component({
-  components: { LMap, LMarker, LTileLayer, QuickNav },
 })
-export default class NewEditProjectView extends Vue {
+export default class NewEditProjectView extends Vue {}
-  $notify!: (notification: Notification, timeout?: number) => void;
-
-  activeDid = "";
-  apiServer = "";
-  errorMessage = "";
-  fullClaim: PlanVerifiableCredential = {
-    "@context": "https://schema.org",
-    "@type": "PlanAction",
-    name: "",
-    description: "",
-  }; // this default is only to avoid errors before plan is loaded
-  includeLocation = false;
-  latitude = 0;
-  longitude = 0;
-  numAccounts = 0;
-  zoom = 2;
-
-  async beforeCreate() {
-    await accountsDB.open();
-    this.numAccounts = await accountsDB.accounts.count();
-  }
-
-  public async getIdentity(activeDid: string) {
-    await accountsDB.open();
-    const account = await accountsDB.accounts
-      .where("did")
-      .equals(activeDid)
-      .first();
-    const identity = JSON.parse(account?.identity || "null");
-
-    if (!identity) {
-      throw new Error(
-        "Attempted to load project records with no identity available.",
-      );
-    }
-    return identity;
-  }
-
-  public async getHeaders(identity: IIdentifier) {
-    const token = await accessToken(identity);
-    const headers = {
-      "Content-Type": "application/json",
-      Authorization: "Bearer " + token,
-    };
-    return headers;
-  }
-
-  projectId = localStorage.getItem("projectId") || "";
-  isHiddenSave = false;
-  isHiddenSpinner = true;
-
-  async created() {
-    await db.open();
-    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-    this.activeDid = settings?.activeDid || "";
-    this.apiServer = settings?.apiServer || "";
-
-    if (this.projectId) {
-      if (this.numAccounts === 0) {
-        console.error("Error: no account was found.");
-      } else {
-        const identity = await this.getIdentity(this.activeDid);
-        if (!identity) {
-          throw new Error(
-            "An ID is chosen but there are no keys for it so it cannot be used to talk with the service.",
-          );
-        }
-        this.LoadProject(identity);
-      }
-    }
-  }
-
-  async LoadProject(identity: IIdentifier) {
-    const url =
-      this.apiServer +
-      "/api/claim/byHandle/" +
-      encodeURIComponent(this.projectId);
-    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) {
-        this.fullClaim = resp.data.claim;
-        if (this.fullClaim?.location) {
-          this.includeLocation = true;
-          this.latitude = this.fullClaim.location.geo.latitude;
-          this.longitude = this.fullClaim.location.geo.longitude;
-        }
-      }
-    } catch (error) {
-      console.error("Got error retrieving that project", error);
-    }
-  }
-
-  private async SaveProject(identity: IIdentifier) {
-    // Make a claim
-    const vcClaim: PlanVerifiableCredential = this.fullClaim;
-    if (this.projectId) {
-      vcClaim.identifier = this.projectId;
-    }
-    if (this.includeLocation) {
-      vcClaim.location = {
-        geo: {
-          "@type": "GeoCoordinates",
-          latitude: this.latitude,
-          longitude: this.longitude,
-        },
-      };
-    }
-    // Make a payload for the claim
-    const vcPayload = {
-      vc: {
-        "@context": ["https://www.w3.org/2018/credentials/v1"],
-        type: ["VerifiableCredential"],
-        credentialSubject: vcClaim,
-      },
-    };
-    // create a signature using private key of identity
-    if (identity.keys[0].privateKeyHex != null) {
-      const privateKeyHex: string = identity.keys[0].privateKeyHex;
-      const signer = await SimpleSigner(privateKeyHex);
-      const alg = undefined;
-      // create a JWT for the request
-      const vcJwt: string = await didJwt.createJWT(vcPayload, {
-        alg: alg,
-        issuer: identity.did,
-        signer: signer,
-      });
-
-      // Make the xhr request payload
-
-      const payload = JSON.stringify({ jwtEncoded: vcJwt });
-      const url = this.apiServer + "/api/v2/claim";
-      const token = await accessToken(identity);
-      const headers = {
-        "Content-Type": "application/json",
-        Authorization: "Bearer " + token,
-      };
-
-      try {
-        const resp = await this.axios.post(url, payload, { headers });
-        // handleId is new in server v release-1.6.0; remove fullIri when that
-        // version shows up here: https://api.endorser.ch/api-docs/
-        if (resp.data?.success?.handleId || resp.data?.success?.fullIri) {
-          this.errorMessage = "";
-
-          // handleId is new in server v release-1.6.0; remove fullIri when that
-          // version shows up here: https://api.endorser.ch/api-docs/
-          useAppStore().setProjectId(
-            resp.data.success.handleId || resp.data.success.fullIri,
-          );
-          setTimeout(
-            function (that: NewEditProjectView) {
-              that.$router.push({ name: "project" });
-            },
-            2000,
-            this,
-          );
-        } else {
-          console.log(
-            "Got unexpected 'data' inside response from server",
-            resp,
-          );
-          this.$notify(
-            {
-              group: "alert",
-              type: "danger",
-              title: "Error Saving Idea",
-              text: "Server did not save the idea. Try again.",
-            },
-            -1,
-          );
-        }
-      } catch (error) {
-        let userMessage = "There was an error saving the project.";
-        const serverError = error as AxiosError<{
-          error?: { message?: string };
-        }>;
-        if (serverError) {
-          console.log("Got error from server", serverError);
-          if (Object.prototype.hasOwnProperty.call(serverError, "message")) {
-            userMessage = serverError.response?.data?.error?.message || ""; // This is info for the user.
-            this.$notify(
-              {
-                group: "alert",
-                type: "danger",
-                title: "User Message",
-                text: userMessage,
-              },
-              -1,
-            );
-          } else {
-            this.$notify(
-              {
-                group: "alert",
-                type: "danger",
-                title: "Server Message",
-                text: JSON.stringify(serverError.toJSON()),
-              },
-              -1,
-            );
-          }
-        } else {
-          console.error(
-            "Here's the full error trying to save the claim:",
-            error,
-          );
-          this.$notify(
-            {
-              group: "alert",
-              type: "danger",
-              title: "Claim Error",
-              text: error as string,
-            },
-            -1,
-          );
-        }
-        // Now set that error for the user to see.
-        this.errorMessage = userMessage;
-      }
-    }
-  }
-
-  public async onSaveProjectClick() {
-    this.isHiddenSave = true;
-    this.isHiddenSpinner = false;
-
-    if (this.numAccounts === 0) {
-      console.error("Error: there is no account.");
-    } else {
-      const identity = await this.getIdentity(this.activeDid);
-      this.SaveProject(identity);
-    }
-  }
-
-  public maybeEraseLatLong() {
-    if (window.confirm("Are you sure you don't want to mark a location?")) {
-      this.latitude = 0;
-      this.longitude = 0;
-      this.includeLocation = false;
-    }
-  }
-
-  public onCancelClick() {
-    this.$router.back();
-  }
-}
 </script>

src/views/NewIdentifierView.vue

@@ -1,95 +0,0 @@
-<template>
-  <QuickNav />
-
-  <!-- CONTENT -->
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <fa icon="chevron-left" class="fa-fw"></fa>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-        Your Identity
-      </h1>
-    </div>
-
-    <div class="flex justify-center py-12">
-      <span />
-      <span v-if="loading">
-        <span class="text-xl">Creating...&nbsp;</span>
-        <fa
-          icon="spinner"
-          class="fa-spin fa-spin-pulse"
-          color="green"
-          size="128"
-        ></fa>
-      </span>
-      <span v-else>
-        <span class="text-xl">Created!</span>
-        <fa
-          icon="burst"
-          class="fa-beat px-12"
-          color="green"
-          style="
-            --fa-animation-duration: 1s;
-            --fa-animation-direction: reverse;
-            --fa-animation-iteration-count: 1;
-            --fa-beat-scale: 6;
-          "
-        ></fa>
-      </span>
-      <span />
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import "dexie-export-import";
-import { Component, Vue } from "vue-facing-decorator";
-import { accountsDB, db } from "@/db/index";
-import { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import QuickNav from "@/components/QuickNav.vue";
-
-@Component({ components: { QuickNav } })
-export default class NewIdentifierView extends Vue {
-  loading = true;
-
-  async mounted() {
-    const mnemonic = generateSeed();
-    // address is 0x... ETH address, without "did:eth:"
-    const [address, privateHex, publicHex, derivationPath] =
-      deriveAddress(mnemonic);
-
-    const newId = newIdentifier(address, publicHex, privateHex, derivationPath);
-    const identity = JSON.stringify(newId);
-
-    await accountsDB.open();
-    await accountsDB.accounts.add({
-      dateCreated: new Date().toISOString(),
-      derivationPath: derivationPath,
-      did: newId.did,
-      identity: identity,
-      mnemonic: mnemonic,
-      publicKeyHex: newId.keys[0].publicKeyHex,
-    });
-
-    await db.settings.update(MASTER_SETTINGS_KEY, {
-      activeDid: newId.did,
-    });
-
-    this.loading = false;
-    setTimeout(() => {
-      this.$router.push({ name: "home" });
-    }, 1000);
-  }
-}
-</script>

src/views/ProjectViewView.vue

@@ -1,9 +1,44 @@
 <template>
-  <QuickNav />
+  <!-- QUICK NAV -->
-  <TopMessage />
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
+    <ul class="flex text-2xl p-2 gap-2">
+      <!-- Home Feed -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <a href="" class="block text-center py-3 px-1"
+          ><fa icon="house-chimney" class="fa-fw"></fa
+        ></a>
+      </li>
+      <!-- Search -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <a href="search.html" class="block text-center py-3 px-1"
+          ><fa icon="magnifying-glass" class="fa-fw"></fa
+        ></a>
+      </li>
+      <!-- Projects -->
+      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
+        <a href="" class="block text-center py-3 px-1"
+          ><fa icon="folder-open" class="fa-fw"></fa
+        ></a>
+      </li>
+      <!-- Commitments -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <a href="" class="block text-center py-3 px-1"
+          ><fa icon="hand" class="fa-fw"></fa
+        ></a>
+      </li>
+      <!-- Profile -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <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 max-w-3xl mx-auto">
+  <section id="Content" class="p-6 pb-24">
     <!-- Breadcrumb -->
     <div id="ViewBreadcrumb" class="mb-8">
       <h1 class="text-lg text-center font-light relative px-7">
@@ -14,693 +49,86 @@
         >
           <fa icon="chevron-left" class="fa-fw"></fa>
         </button>
-        Idea
+        <!-- Context Menu -->
+        <a
+          href=""
+          class="text-lg text-center px-2 py-1 absolute -right-2 -top-1"
+          ><fa icon="ellipsis-vertical" class="fa-fw"></fa
+        ></a>
+
+        View Project
       </h1>
     </div>
 
     <!-- Project Details -->
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <div>
+      <!-- Image -->
-        <div class="block pb-4 flex gap-4">
+      <div class="-mx-4 -mt-3 mb-3">
-          <div class="flex-none w-16 pt-1">
+        <img src="https://picsum.photos/800/400" class="w-full" />
-            <EntityIcon
+      </div>
-              :entityId="projectId"
-              :iconSize="64"
-              class="block border border-slate-300 rounded-md"
-            ></EntityIcon>
-          </div>
 
-          <div class="overflow-hidden">
+      <div>
-            <h2 class="text-xl font-semibold">{{ name }}</h2>
+        <h2 class="text-xl font-semibold">Canyon cleanup</h2>
-            <div class="text-sm mb-3">
+        <div class="flex justify-between gap-4 text-sm mb-3">
-              <div class="truncate">
+          <span><fa icon="user" class="fa-fw text-slate-400"></fa> Rotary</span>
-                <fa icon="user" class="fa-fw text-slate-400"></fa>
+          <span
-                {{ issuer }}
+            ><fa icon="calendar" class="fa-fw text-slate-400"></fa> 8 days
-              </div>
+            ago</span
-              <div v-if="timeSince">
+          >
-                <fa icon="calendar" class="fa-fw text-slate-400"></fa>
-                {{ timeSince }}
-              </div>
-              <div v-if="latitude || longitude">
-                <fa icon="location-dot" class="fa-fw text-slate-400"></fa>
-                <a
-                  :href="getOpenStreetMapUrl()"
-                  target="_blank"
-                  class="underline"
-                  >Map View
-                  <fa icon="arrow-up-right-from-square" class="fa-fw" />
-                </a>
-              </div>
-              <div v-if="url">
-                <fa icon="globe" class="fa-fw text-slate-400"></fa>
-                <a :href="addScheme(url)" target="_blank" class="underline"
-                  >{{ domainForWebsite(this.url) }}
-                </a>
-              </div>
-            </div>
-          </div>
         </div>
 
         <div class="text-sm text-slate-500">
-          <div v-if="!expanded">
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-            {{ truncatedDesc }}
+          accusantium doloremque laudantium…
-            <a
+          <a href="" class="uppercase text-xs font-semibold text-slate-700"
-              v-if="description.length >= truncateLength"
+            >Read More</a
-              @click="expandText"
+          >
-              class="uppercase text-xs font-semibold text-slate-700"
-              >... Read More</a
-            >
-          </div>
-          <div v-else>
-            {{ description }}
-            <a
-              @click="collapseText"
-              class="uppercase text-xs font-semibold text-slate-700"
-              >- Read Less</a
-            >
-          </div>
         </div>
       </div>
-      <button
-        v-if="issuer == activeDid"
-        type="button"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
-        @click="onEditClick()"
-      >
-        Edit
-      </button>
     </div>
 
-    <div v-if="activeDid" class="mb-4">
+    <!-- Commit -->
-      <div class="text-center">
+    <router-link
-        <button
+      :to="{ name: 'new-edit-commitment' }"
-          @click="openOfferDialog({ name: 'you', did: activeDid })"
+      class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-8"
-          class="block w-full text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
+      >Make Commitment</router-link
-        >
+    >
-          I offer&hellip;
-        </button>
-      </div>
-    </div>
 
-    <div v-if="activeDid">
+    <!-- Commitments -->
-      <div class="text-center">
+    <div class="bg-slate-100 px-4 py-3 rounded-md">
-        <button
+      <h3 class="text-sm uppercase font-semibold mb-3">Commitments</h3>
-          @click="openGiftDialog({ name: 'you', did: activeDid })"
-          class="block w-full text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
-        >
-          I gave&hellip;
-        </button>
-        <p class="mt-2 mb-4 text-center">Or, record a contribution from:</p>
-      </div>
 
-      <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
+      <ul class="text-sm border-t border-slate-300">
-        <li @click="openGiftDialog()">
+        <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
-          <EntityIcon
+          <span>[Username]</span>
-            :entityId="null"
+          <span
-            :iconSize="64"
+            >5 hours <fa icon="spinner" class="fa-fw text-slate-400"></fa
-            class="mx-auto border border-slate-300 rounded-md mb-1"
+          ></span>
-          ></EntityIcon>
-          <h3
-            class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden"
-          >
-            Anonymous/Unnamed
-          </h3>
         </li>
-        <li
+
-          v-for="contact in allContacts"
+        <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
-          :key="contact.did"
+          <span>[Username]</span>
-          @click="openGiftDialog(contact)"
+          <span
-        >
+            >US$ 20.00 <fa icon="circle-check" class="fa-fw text-lime-500"></fa
-          <EntityIcon
+          ></span>
-            :entityId="contact.did"
+        </li>
-            :iconSize="64"
+
-            class="mx-auto border border-slate-300 rounded-md mb-1"
+        <li class="flex justify-between gap-4 py-1.5 border-b border-slate-300">
-          ></EntityIcon>
+          <span>[Username]</span>
-          <h3
+          <span
-            class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+            >0.1 BTC <fa icon="spinner" class="fa-fw text-slate-400"></fa
-          >
+          ></span>
-            {{ contact.name || "(no name)" }}
-          </h3>
         </li>
       </ul>
-
-      <!-- Ideally, this button should only be visible when the active account has more than 7 or 11 contacts in their list (we want to limit the grid count above to 8 or 12 accounts to keep it compact) -->
-      <router-link
-        v-if="allContacts.length >= 7"
-        :to="{ name: 'contact-gives' }"
-        class="block text-center text-md font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md"
-      >
-        Show More Contacts&hellip;
-      </router-link>
     </div>
-
-    <!-- Gifts to & from this -->
-    <div class="grid items-start grid-cols-1 sm:grid-cols-3 gap-4">
-      <div class="bg-slate-100 px-4 py-3 rounded-md">
-        <h3 class="text-sm uppercase font-semibold mb-3">
-          Offered To This Idea
-        </h3>
-
-        <div v-if="offersToThis.length === 0">
-          (None yet. Record one above.)
-        </div>
-
-        <ul v-else class="text-sm border-t border-slate-300">
-          <li
-            v-for="offer in offersToThis"
-            :key="offer.id"
-            class="py-1.5 border-b border-slate-300"
-          >
-            <div class="flex justify-between gap-4">
-              <span>
-                <fa icon="user" class="fa-fw text-slate-400"></fa>
-                {{ didInfo(offer.agentDid, activeDid, allMyDids, allContacts) }}
-              </span>
-              <a @click="onClickLoadClaim(offer.jwtId)">
-                <fa icon="circle-info" class="pl-2 pt-1 text-slate-500"></fa>
-              </a>
-              <span v-if="offer.amount">
-                <fa
-                  :icon="iconForUnitCode(offer.unit)"
-                  class="fa-fw text-slate-400"
-                />{{ offer.amount }}
-              </span>
-            </div>
-            <div v-if="offer.objectDescription" class="text-slate-500">
-              <fa icon="comment" class="fa-fw text-slate-400"></fa>
-              {{ offer.objectDescription }}
-            </div>
-          </li>
-        </ul>
-      </div>
-
-      <div class="bg-slate-100 px-4 py-3 rounded-md">
-        <h3 class="text-sm uppercase font-semibold mb-3">Given To This Idea</h3>
-
-        <div v-if="givesToThis.length === 0">(None yet. Record one above.)</div>
-
-        <ul v-else class="text-sm border-t border-slate-300">
-          <li
-            v-for="give in givesToThis"
-            :key="give.id"
-            class="py-1.5 border-b border-slate-300"
-          >
-            <div class="flex justify-between gap-4">
-              <span
-                ><fa icon="user" class="fa-fw text-slate-400"></fa>
-                {{ didInfo(give.agentDid, activeDid, allMyDids, allContacts) }}
-              </span>
-              <a @click="onClickLoadClaim(give.jwtId)">
-                <fa icon="circle-info" class="pl-2 pt-1 text-slate-500"></fa>
-              </a>
-              <span v-if="give.amount">
-                <fa
-                  :icon="iconForUnitCode(give.unit)"
-                  class="fa-fw text-slate-400"
-                />{{ give.amount }}
-              </span>
-            </div>
-            <div v-if="give.description" class="text-slate-500">
-              <fa icon="comment" class="fa-fw text-slate-400"></fa>
-              {{ give.description }}
-            </div>
-          </li>
-        </ul>
-      </div>
-
-      <div class="grid items-start grid-cols-1 gap-4">
-        <div
-          v-if="fulfillersToThis.length > 0"
-          class="bg-slate-100 px-4 py-3 rounded-md"
-        >
-          <h3 class="text-sm uppercase font-semibold mb-3">
-            Contributions To This Idea
-          </h3>
-          <!-- centering because long, wrapped project names didn't left align with blank or "text-left" -->
-          <div class="text-center">
-            <div v-for="plan in fulfillersToThis" :key="plan.handleId">
-              <button
-                @click="onClickLoadProject(plan.handleId)"
-                class="text-blue-500"
-              >
-                {{ plan.name }}
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div v-if="fulfilledByThis" class="bg-slate-100 px-4 py-3 rounded-md">
-          <h3 class="text-sm uppercase font-semibold mb-3">
-            Contributions By This Idea
-          </h3>
-          <!-- centering because long, wrapped project names didn't left align with blank or "text-left" -->
-          <div class="text-center">
-            <button
-              @click="onClickLoadProject(fulfilledByThis.handleId)"
-              class="text-blue-500"
-            >
-              {{ fulfilledByThis.name }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <GiftedDialog
-      ref="customGiveDialog"
-      message="Received from"
-      :projectId="this.projectId"
-    >
-    </GiftedDialog>
-    <OfferDialog ref="customOfferDialog" :projectId="this.projectId">
-    </OfferDialog>
   </section>
 </template>
 
 <script lang="ts">
-import { AxiosError, RawAxiosRequestHeaders } from "axios";
+import { Options, Vue } from "vue-class-component";
-import * as moment from "moment";
-import { IIdentifier } from "@veramo/core";
-import { Component, Vue } from "vue-facing-decorator";
 
-import GiftedDialog from "@/components/GiftedDialog.vue";
+@Options({
-import OfferDialog from "@/components/OfferDialog.vue";
+  components: {},
-import TopMessage from "@/components/TopMessage.vue";
-import { accountsDB, db } from "@/db/index";
-import { Contact } from "@/db/tables/contacts";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
-import { accessToken } from "@/libs/crypto";
-import { isGlobalUri } from "@/libs/util";
-import {
-  didInfo,
-  GiverInputInfo,
-  GiveServerRecord,
-  OfferServerRecord,
-  PlanServerRecord,
-} from "@/libs/endorserServer";
-import QuickNav from "@/components/QuickNav.vue";
-import EntityIcon from "@/components/EntityIcon.vue";
-import { Account } from "@/db/tables/accounts";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
-@Component({
-  components: { EntityIcon, GiftedDialog, OfferDialog, QuickNav, TopMessage },
 })
-export default class ProjectViewView extends Vue {
+export default class ProjectViewView extends Vue {}
-  $notify!: (notification: Notification, timeout?: number) => void;
-
-  activeDid = "";
-  allMyDids: Array<string> = [];
-  allContacts: Array<Contact> = [];
-  apiServer = "";
-  description = "";
-  expanded = false;
-  fulfilledByThis: PlanServerRecord | null = null;
-  fulfillersToThis: Array<PlanServerRecord> = [];
-  givesToThis: Array<GiveServerRecord> = [];
-  issuer = "";
-  latitude = 0;
-  longitude = 0;
-  name = "";
-  offersToThis: Array<OfferServerRecord> = [];
-  projectId = localStorage.getItem("projectId") || ""; // handle ID
-  timeSince = "";
-  truncatedDesc = "";
-  truncateLength = 40;
-  url = "";
-
-  async created() {
-    await db.open();
-    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
-    this.activeDid = settings?.activeDid || "";
-    this.apiServer = settings?.apiServer || "";
-    this.allContacts = await db.contacts.toArray();
-
-    await accountsDB.open();
-    const accounts = accountsDB.accounts;
-    const accountsArr = await accounts?.toArray();
-    this.allMyDids = accountsArr.map((acc) => acc.did);
-    const account = accountsArr.find((acc) => acc.did === this.activeDid);
-    const identity = JSON.parse(account?.identity || "null");
-
-    const pathParam = window.location.pathname.substring("/project/".length);
-    if (pathParam) {
-      this.projectId = decodeURIComponent(pathParam);
-    }
-    this.LoadProject(this.projectId, identity);
-  }
-
-  public async getIdentity(activeDid: string) {
-    await accountsDB.open();
-    const account = (await accountsDB.accounts
-      .where("did")
-      .equals(activeDid)
-      .first()) as Account;
-    const identity = JSON.parse(account?.identity || "null");
-    return identity;
-  }
-
-  public async getHeaders(identity: IIdentifier) {
-    const token = await accessToken(identity);
-    const headers = {
-      "Content-Type": "application/json",
-      Authorization: "Bearer " + token,
-    };
-    return headers;
-  }
-
-  onEditClick() {
-    localStorage.setItem("projectId", this.projectId as string);
-    const route = {
-      name: "new-edit-project",
-    };
-    this.$router.push(route);
-  }
-
-  // Isn't there a better way to make this available to the template?
-  didInfo(
-    did: string,
-    activeDid: string,
-    dids: Array<string>,
-    contacts: Array<Contact>,
-  ) {
-    return didInfo(did, activeDid, dids, contacts);
-  }
-
-  expandText() {
-    this.expanded = true;
-  }
-
-  collapseText() {
-    this.expanded = false;
-  }
-
-  async LoadProject(projectId: string, identity: IIdentifier) {
-    this.projectId = projectId;
-
-    const url =
-      this.apiServer + "/api/claim/byHandle/" + encodeURIComponent(projectId);
-    const headers: RawAxiosRequestHeaders = {
-      "Content-Type": "application/json",
-    };
-    if (identity) {
-      const token = await accessToken(identity);
-      headers["Authorization"] = "Bearer " + token;
-    }
-
-    try {
-      const resp = await this.axios.get(url, { headers });
-      if (resp.status === 200) {
-        const startTime = resp.data.startTime;
-        if (startTime != null) {
-          const eventDate = new Date(startTime);
-          const now = moment.now();
-          this.timeSince = moment.utc(now).to(eventDate);
-        }
-        this.issuer = resp.data.issuer;
-        this.name = resp.data.claim?.name || "(no name)";
-        this.description = resp.data.claim?.description || "(no description)";
-        this.truncatedDesc = this.description.slice(0, this.truncateLength);
-        this.latitude = resp.data.claim?.location?.geo?.latitude || 0;
-        this.longitude = resp.data.claim?.location?.geo?.longitude || 0;
-        this.url = resp.data.claim?.url || "";
-      } else {
-        // actually, axios throws an error on 404 so we probably never get here
-        console.log("Error getting project:", resp);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "There was a problem getting that project. See logs for more info.",
-          },
-          -1,
-        );
-      }
-    } catch (error: unknown) {
-      console.error("Error retrieving project:", error);
-      const serverError = error as AxiosError;
-      if (serverError.response?.status === 404) {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "That project does not exist.",
-          },
-          -1,
-        );
-      } else {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Something went wrong retrieving that project. See logs for more info.",
-          },
-          -1,
-        );
-      }
-    }
-
-    const givesInUrl =
-      this.apiServer +
-      "/api/v2/report/givesForPlans?planIds=" +
-      encodeURIComponent(JSON.stringify([projectId]));
-    try {
-      const resp = await this.axios.get(givesInUrl, { headers });
-      if (resp.status === 200 && resp.data.data) {
-        this.givesToThis = resp.data.data;
-      } else {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Failed to retrieve gives to this project.",
-          },
-          -1,
-        );
-      }
-    } catch (error: unknown) {
-      const serverError = error as AxiosError;
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Something went wrong retrieving gives to this project.",
-        },
-        -1,
-      );
-      console.error(
-        "Error retrieving gives to this project:",
-        serverError.message,
-      );
-    }
-
-    const offersToUrl =
-      this.apiServer +
-      "/api/v2/report/offersToPlans?planIds=" +
-      encodeURIComponent(JSON.stringify([projectId]));
-    try {
-      const resp = await this.axios.get(offersToUrl, { headers });
-      if (resp.status === 200 && resp.data.data) {
-        this.offersToThis = resp.data.data;
-      } else {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Failed to retrieve offers to this project.",
-          },
-          -1,
-        );
-      }
-    } catch (error: unknown) {
-      const serverError = error as AxiosError;
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Something went wrong retrieving offers to this project.",
-        },
-        -1,
-      );
-      console.error(
-        "Error retrieving offers to this project:",
-        serverError.message,
-      );
-    }
-
-    const fulfilledByUrl =
-      this.apiServer +
-      "/api/v2/report/planFulfilledByPlan?planHandleId=" +
-      encodeURIComponent(projectId);
-    try {
-      const resp = await this.axios.get(fulfilledByUrl, { headers });
-      if (resp.status === 200) {
-        this.fulfilledByThis = resp.data.data;
-      } else {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Failed to retrieve plans fulfilled by this project.",
-          },
-          -1,
-        );
-      }
-    } catch (error: unknown) {
-      const serverError = error as AxiosError;
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Something went wrong retrieving plans fulfilled by this project.",
-        },
-        -1,
-      );
-      console.error(
-        "Error retrieving plans fulfilled by this project:",
-        serverError.message,
-      );
-    }
-
-    const fulfillersToUrl =
-      this.apiServer +
-      "/api/v2/report/planFulfillersToPlan?planHandleId=" +
-      encodeURIComponent(projectId);
-    try {
-      const resp = await this.axios.get(fulfillersToUrl, { headers });
-      if (resp.status === 200) {
-        this.fulfillersToThis = resp.data.data;
-      } else {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Failed to retrieve plan fulfillers to this project.",
-          },
-          -1,
-        );
-      }
-    } catch (error: unknown) {
-      const serverError = error as AxiosError;
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Something went wrong retrieving plan fulfillers to this project.",
-        },
-        -1,
-      );
-      console.error(
-        "Error retrieving plan fulfillers to this project:",
-        serverError.message,
-      );
-    }
-  }
-
-  /**
-   * Handle clicking on a project entry found in the list
-   * @param id of the project
-   **/
-  async onClickLoadProject(projectId: string) {
-    localStorage.setItem("projectId", projectId);
-    const route = {
-      path: "/project/" + encodeURIComponent(projectId),
-    };
-    this.$router.push(route);
-    this.LoadProject(projectId, await this.getIdentity(this.activeDid));
-  }
-
-  getOpenStreetMapUrl() {
-    // Google URL is https://maps.google.com/?q=LAT,LONG
-    return (
-      "https://www.openstreetmap.org/?mlat=" +
-      this.latitude +
-      "&mlon=" +
-      this.longitude +
-      "#map=15/" +
-      this.latitude +
-      "/" +
-      this.longitude
-    );
-  }
-
-  openGiftDialog(contact: GiverInputInfo) {
-    (this.$refs.customGiveDialog as GiftedDialog).open(contact);
-  }
-
-  openOfferDialog() {
-    (this.$refs.customOfferDialog as OfferDialog).open();
-  }
-
-  onClickLoadClaim(jwtId: string) {
-    const route = {
-      path: "/claim/" + encodeURIComponent(jwtId),
-    };
-    this.$router.push(route);
-  }
-
-  UNIT_CODES: Record<string, Record<string, string>> = {
-    BTC: {
-      name: "Bitcoin",
-      faIcon: "bitcoin-sign",
-    },
-    HUR: {
-      name: "hours",
-      faIcon: "clock",
-    },
-    USD: {
-      name: "US Dollars",
-      faIcon: "dollar",
-    },
-  };
-
-  iconForUnitCode(unitCode: string) {
-    return this.UNIT_CODES[unitCode]?.faIcon || "question";
-  }
-
-  // return an HTTPS URL if it's not a global URL
-  addScheme(url: string) {
-    if (!isGlobalUri(url)) {
-      return "https://" + url;
-    }
-    return url;
-  }
-
-  // return just the domain for display, if possible
-  domainForWebsite(url: string) {
-    try {
-      const hostname = new URL(url).hostname;
-      if (!hostname) {
-        // happens for non-http URLs
-        return url;
-      } else if (url.endsWith(hostname)) {
-        // it's just the domain
-        return hostname;
-      } else {
-        // there's more, but don't bother displaying the whole thing
-        return hostname + "...";
-      }
-    } catch (error: unknown) {
-      // must not be a valid URL
-      return url;
-    }
-  }
-}
 </script>

src/views/ProjectsView.vue

@@ -1,262 +1,3 @@
 <template>
-  <QuickNav selected="Projects"></QuickNav>
+  <section id="Content" class="p-6 pb-24"></section>
-  <TopMessage />
-
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Your Ideas
-    </h1>
-
-    <!-- Quick Search -->
-
-    <div id="QuickSearch" class="mb-4 flex">
-      <input
-        type="text"
-        placeholder="Search…"
-        class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2"
-      />
-      <button
-        class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
-      >
-        <fa icon="magnifying-glass" class="fa-fw"></fa>
-      </button>
-    </div>
-
-    <!-- New Project -->
-    <button
-      class="fixed right-6 bottom-24 text-center text-4xl leading-none bg-blue-600 text-white w-14 py-2.5 rounded-full"
-      @click="onClickNewProject()"
-    >
-      <fa icon="plus" class="fa-fw"></fa>
-    </button>
-
-    <!-- Loading Animation -->
-    <div
-      class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
-      v-if="isLoading"
-    >
-      <fa icon="spinner" class="fa-spin-pulse"></fa>
-    </div>
-
-    <!-- Results List -->
-    <InfiniteScroll @reached-bottom="loadMoreData">
-      <ul class="border-t border-slate-300">
-        <li
-          class="border-b border-slate-300"
-          v-for="project in projects"
-          :key="project.handleId"
-        >
-          <a
-            @click="onClickLoadProject(project.handleId)"
-            class="block py-4 flex gap-4"
-          >
-            <div class="flex-none w-12">
-              <EntityIcon
-                :entityId="project.handleId"
-                :iconSize="48"
-                class="inline-block align-middle border border-slate-300 rounded-md"
-              ></EntityIcon>
-            </div>
-
-            <div class="grow overflow-hidden">
-              <h2 class="text-base font-semibold">{{ project.name }}</h2>
-              <div class="text-sm truncate">
-                {{ project.description }}
-              </div>
-            </div>
-          </a>
-        </li>
-      </ul>
-    </InfiniteScroll>
-  </section>
 </template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
-import { accountsDB, db } from "@/db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { accessToken } from "@/libs/crypto";
-import { IIdentifier } from "@veramo/core";
-import InfiniteScroll from "@/components/InfiniteScroll.vue";
-import QuickNav from "@/components/QuickNav.vue";
-import EntityIcon from "@/components/EntityIcon.vue";
-import TopMessage from "@/components/TopMessage.vue";
-import { ProjectData } from "@/libs/endorserServer";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
-@Component({
-  components: { InfiniteScroll, QuickNav, EntityIcon, TopMessage },
-})
-export default class ProjectsView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
-
-  apiServer = "";
-  projects: ProjectData[] = [];
-  current: IIdentifier;
-  isLoading = false;
-  numAccounts = 0;
-
-  async beforeCreate() {
-    await accountsDB.open();
-    this.numAccounts = await accountsDB.accounts.count();
-  }
-
-  /**
-   * Core project data loader
-   * @param url the url used to fetch the data
-   * @param token Authorization token
-   **/
-  async dataLoader(url: string, token: string) {
-    const headers: { [key: string]: string } = {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
-    };
-
-    try {
-      this.isLoading = true;
-      const resp = await this.axios.get(url, { headers });
-      if (resp.status === 200 || !resp.data.data) {
-        const plans: ProjectData[] = resp.data.data;
-        for (const plan of plans) {
-          const { name, description, handleId, issuerDid, rowid } = plan;
-          this.projects.push({ name, description, handleId, issuerDid, rowid });
-        }
-      } else {
-        console.log("Bad server response & data:", resp.status, resp.data);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Failed to get projects from the server. Try again later.",
-          },
-          -1,
-        );
-      }
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (error: any) {
-      console.error("Got error loading projects:", error.message || error);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Got an error loading projects.",
-        },
-        -1,
-      );
-    } finally {
-      this.isLoading = false;
-    }
-  }
-
-  /**
-   * Data loader used by infinite scroller
-   * @param payload is the flag from the InfiniteScroll indicating if it should load
-   **/
-  async loadMoreData(payload: boolean) {
-    if (this.projects.length > 0 && payload) {
-      const latestProject = this.projects[this.projects.length - 1];
-      const url = `${this.apiServer}/api/v2/report/plansByIssuer?beforeId=${latestProject.rowid}`;
-      const token = await accessToken(this.current);
-      await this.dataLoader(url, token);
-    }
-  }
-
-  /**
-   * Handle clicking on a project entry found in the list
-   * @param id of the project
-   **/
-  onClickLoadProject(id: string) {
-    localStorage.setItem("projectId", id);
-    const route = {
-      path: "/project/" + encodeURIComponent(id),
-    };
-    this.$router.push(route);
-  }
-
-  /**
-   * Load projects initially
-   * @param identity of the user
-   **/
-  async LoadProjects(identity: IIdentifier) {
-    const url = `${this.apiServer}/api/v2/report/plansByIssuer`;
-    const token: string = await accessToken(identity);
-    await this.dataLoader(url, token);
-  }
-
-  public async getIdentity(activeDid: string) {
-    await accountsDB.open();
-    const account = await accountsDB.accounts
-      .where("did")
-      .equals(activeDid)
-      .first();
-    const identity = JSON.parse(account?.identity || "null");
-
-    if (!identity) {
-      throw new Error(
-        "Attempted to load project records with no identity available.",
-      );
-    }
-    return identity;
-  }
-
-  /**
-   * '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 || "";
-      this.apiServer = settings?.apiServer || "";
-
-      if (this.numAccounts === 0) {
-        console.error("No accounts found.");
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "You need an identity to load your projects.",
-          },
-          -1,
-        );
-      } else {
-        const identity = await this.getIdentity(activeDid);
-        this.current = identity;
-        this.LoadProjects(identity);
-      }
-    } catch (err) {
-      console.log("Error initializing:", err);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Something went wrong loading your projects.",
-        },
-        -1,
-      );
-    }
-  }
-
-  /**
-   * Handling clicking on the new project button
-   **/
-  onClickNewProject(): void {
-    localStorage.removeItem("projectId");
-    const route = {
-      name: "new-edit-project",
-    };
-    this.$router.push(route);
-  }
-}
-</script>