for meeting invitees, create their ID and allow them to set a name

This reverts commit 17f304ddb8.

.env.development

@@ -1,3 +1,5 @@
 
 # I tried and failed to set things here with vue-cli-service but
 # things may be more reliable with vite so let's try again.
+
+VITE_APP_SERVER=http://localhost:8080

.env.production

@@ -1,4 +1,6 @@
 # Only the variables that start with VITE_ are seen in the application import.meta.env in Vue.
+VITE_APP_SERVER=https://timesafari.app
 VITE_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01GXYPFF7FA03NXKPYY142PY4H
 VITE_DEFAULT_ENDORSER_API_SERVER=https://api.endorser.ch
 VITE_DEFAULT_IMAGE_API_SERVER=https://image-api.timesafari.app
+VITE_DEFAULT_PARTNER_API_SERVER=https://partner-api.endorser.ch

.eslintrc.js

@@ -14,8 +14,21 @@ module.exports = {
   //   ecmaVersion: 2020,
   // },
   rules: {
+    "max-len": [
+      "warn",
+      {
+        code: 120,
+        ignoreComments: true, // why does this not make it allow comment of any length?
+        ignorePattern: '^\\s*class="[^"]*"$',
+        ignoreStrings: true,
+        ignoreTemplateLiterals: true,
+        ignoreTrailingComments: true,
+        ignoreUrls: true,
+      },
+    ],
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    // "prettier/prettier": ["warn", { printWidth: 120 }], // removes errors but adds thousands of warnings
     "@typescript-eslint/no-unnecessary-type-constraint": "off",
   },
 };

CHANGELOG.md

@@ -6,9 +6,203 @@ 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).
 
 
-## ?
+## [0.3.55] - 2025.02.07
 ### Added
-- Send list of contacts to someone
+- End time for projects
+
+
+## [0.3.54] - 2025.02.06
+### Added
+- Group onboarding meetings
+
+
+## [0.3.53] - 2025.01.30
+### Added
+- Hints for contacting the creator of a project
+
+
+## [0.3.52] - 2025.01.22
+### Fixed
+- User profile endpoint server for map was broken.
+
+
+## [0.3.51] - 2025.01.22
+### Fixed
+- User profile map jumped on first zoom.
+
+
+## [0.3.50] - 2025.01.20 - b9fedcd3fd3e34c3fb0fc79150d1a81a76eaeb40
+### Added
+- User public profiles
+
+
+## [0.3.49] - 2025.01.09 - 36301ed238ff84df25bb11a8d44a295ee7eaf0f8
+### Changed
+- Make all external contact links direct to the contact-import page.
+- Handle all new-single-contact JWTs in the contacts page, and multiple-contact JWTs in the contacts-import page.
+
+
+## [0.3.48] - 2025.01.08 - 398f3e64a376789f7eb1c400cd886f5a2cacd588 (but app shows 07c4e58)
+### Added
+- More sanity-checks on contact-import JWT
+
+
+## [0.3.47] - 2025.01.06 - 5bf6dd1ee32ca7cc46d39bd7afca58365b422f93
+### Added
+- Notes on contacts page with new contact-edit page
+- Contact methods (only on contact-edit page and under DID details)
+- DID view with no DID shows user's info.
+### Changed
+- URL for user's contact info is now URL to this app (not endorser.ch).
+- Extended details (eg. full claim) is beneath details link on claim page.
+
+
+## [0.3.46] - 2025.01.03 - 9e7056616b5e5acc51e5a8cf7354d408029fefb3
+### Added
+- More action-oriented questions for the gift prompts
+### Fixed
+- Contact-list import set visibility for all, even if not chosen.
+
+
+## [0.3.45] - 2025.01.01 - 65402dc68ce69ccc6cb9aa8d2e7a9249bf4298e0
+### Fixed
+- Previous project links stayed when following a link.
+
+
+## [0.3.44] - 2024.12.31 - 694b22987b05482e4527c2478bbe15e6b6f3b532
+### Added
+- Project counts on a map
+
+
+## [0.3.42] - 2024.12.27 - 9751934bc24a1040415a8cfeacbae59ed91f92a5
+### Added
+- Link from certificate page to the claim
+### Changed
+- Contact data sharing is now a verified JWT.
+- Feed pictures are larger.
+
+
+## [0.3.41] - 2024.12.21 - ff6d14138f26daea6216b051562f0a04681f69fc
+### Added
+- Link from certificate page to the claim
+
+
+## [0.3.40] - 2024.12.20 - 77290d9fed3c364243793dc3e9bfe2e994a016b8
+### Added
+- Only show issuer on certificate if it's not the agent.
+
+
+## [0.3.39] - 2024.12.20 - d8819155e2acd2b57fdab523168fa5d1d09e80cc
+### Added
+- Page for a framed claim certificate
+
+
+## [0.3.38] - 2024.12.14 - f8cae5ad4fee1f114320dcce052299eab12108b2
+### Fixed
+- Error on BVC confirmation screen (from IndexedDB refactor)
+
+
+## [0.3.37] - 2024.12.13 - 4d805b43cd25eed73cdd6651f36ad1ec8c109555
+### Added
+- Record a give from a project on the project page.
+- New button on home page opens the gifted dialog.
+- On confirmation buttons on the project page gives, mark when unavailable and explain why.
+### Changed
+- Moved the secret into IndexedDB (and out of localStorage) for more reliability.
+- New "invite" destination page helps troubleshoot when JWT link doesn't come through.
+### Fixed
+- Problem showing claim issuer name
+- Problem going "back" from a project page
+
+
+## [0.3.36] - 2024.11.24 - c8d23647d165016f8a8f575e13d32583242e53ac
+### Changed
+- More friendly default reminder message
+- Blue borders around people to indicate clickability
+
+
+## [0.3.35] - 2024.11.24 - bff7d0a6320b70349185e26bfac72e3bb17f76df
+### Added
+- Daily reliable, hard-coded notification message
+- Setting to change the partner API server
+
+
+## [0.3.33] - 2024.11.07 - adb7b16ecf1343c39cba71a7d6bb0e7a973e1102
+### Fixed
+- Affirm Delivery button on offer claim page didn't work.
+- Plans were not showing by default on project page.
+
+
+## [0.3.32] - 2024.11.06 - 9a3fa38a3fd28f977e06f0265fc39e635c9c5ccd
+### Added
+- Highlight in green new offers to user & to user's projects on the front page.
+
+
+## [0.3.31] - 2024.10.25 - 07c02ab98a09d293dd90d9289a7872e7d681d296
+### Changed
+- Onboarding messages about offers
+
+
+## [0.3.30]
+### Added
+- Onboarding messages
+
+
+## [0.3.29] - 2024.10.09 - babd3832bdfe0c40eaa3869de1b41399a51713c1
+### Added
+- Invite for a contact to join immediately
+### Changed
+- Send signed data to nostr endpoints to verify public key ownership.
+- Enhanced help & help onboarding.
+### Changed in DB or environment
+- Uses Endorser.ch version 4.1.1
+
+
+## [0.3.28] - 2024.09.30 - 84720b94049d29cc0ddd99c50cef2e7176130133
+### Added
+- Posting to nostr apps Trustroots & TripHopping
+- Display of providers on claim view page
+### Changed
+- Switched BVC-meeting-ending gift to be a gift from the group.
+### Changed in DB or environment
+- Requires Endorser.ch version 4.1.0
+
+
+## [0.3.27] - 2024.09.22 - ee23e6f005e47f5bd6f04d804599f6395371b0e4
+### Fixed
+- Error loading BVC claims to confirm
+- Really allow visibility of bulk-imported contacts
+
+
+## [0.3.26] - 2024.09.16 - 8263ed2b29947b3ccc6f3133bbc9454c222bce28
+### Added
+- Separate 'isRegistered' flag for each account
+### Fixed
+- Failure to assign offers to their project
+- Alert when looking at one's own activity if not in contacts.
+
+
+## [0.3.25] - 2024.08.30 - dcbe02d877aecb4cdef2643d90e6595d246a9f82
+### Added
+- "Ideas" now jumps directly to giving prompt or contact list.
+### Fixed
+- Empty giver name on gifted-details view
+- Previously visited project would show up on the giving-details page.
+### Removed
+- All unnecessary localStorage for project IDs
+
+
+## [0.3.23] - 2024.08.30
+### Added
+- Sections in Help for different kinds of users
+- Discovery page parameters so that links with search text work
+- Message when no projects are found
+
+
+## [0.3.21] - 2024.08.24 - a7b89f4bb6da928d56daeffaae7741fa74cc80bf
+### Added
+- Send list of contacts to someone, and move individual contact actions to detail page.
+- Prompt for name in pop-up, and send to different contact-sharing screens.
 ### Changed
 - Moved contact actions from list onto detail page
 

LICENSE

@@ -0,0 +1,8 @@
+The author disclaims copyright to this source code. In place of a legal notice, here is a blessing:
+
+May you do good and not evil. 
+May you find forgiveness for yourself and forgive others.
+May you share freely, never taking more than you give.
+
+________________________________________________________________
+from https://www.sqlite.org/src/info/689401a6cfb4c234 and memorialized here https://spdx.org/licenses/blessing.html

README.md

@@ -10,7 +10,7 @@ See [project.task.yaml](project.task.yaml) for current priorities.
 
 ## Setup
 
-We like pkgx: `sh <(curl https://pkgx.sh) +npm sh`
+We like pkgx: `sh <(curl https://pkgx.sh) +vite sh`
 
 ```
 npm install
@@ -21,6 +21,8 @@ npm install
 npm run dev
 ```
 
+See the test locations for "IMAGE_API_SERVER" or "PARTNER_API_SERVER" below, or use http://localhost:3000 for local endorser.ch
+
 ### Build the test & production app
 ```
 npm run serve
@@ -31,6 +33,11 @@ npm run serve
 npm run lint
 ```
 
+### Run all UI tests
+
+Look below for the "test-all" instructions.
+
+
 ### Compile and minify for test & production
 
 * If there are DB changes: before updating the test server, open browser(s) with current version to test DB migrations.
@@ -41,30 +48,36 @@ npm run lint
 
 * Commit everything (since the commit hash is used the app).
 
-* Record what version is currently on production.
+* Put the commit hash in the changelog (which will help you remember to bump the version later).
 
-* Run the correct build:
+* Tag with the new version, [online](https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/releases) or `git tag 0.3.55 && git push origin 0.3.55`.
+
+* For test, build the app (because test server is not yet set up to build):
 
-  * Staging
 ```
-# (Let's replace this with a .env.development or .env.staging file.)
+TIME_SAFARI_APP_TITLE="TimeSafari_Test" VITE_APP_SERVER=https://test.timesafari.app VITE_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HWE8FWHQ1YGP7GFZYYPS272F VITE_DEFAULT_ENDORSER_API_SERVER=https://test-api.endorser.ch VITE_DEFAULT_IMAGE_API_SERVER=https://test-image-api.timesafari.app VITE_DEFAULT_PARTNER_API_SERVER=https://test-partner-api.endorser.ch VITE_PASSKEYS_ENABLED=true npm run build
-# The test BVC_MEETUPS_PROJECT_CLAIM_ID does not resolve as a URL because it's only in the test DB and the prod redirect won't redirect there.
-TIME_SAFARI_APP_TITLE="TimeSafari_Test" VITE_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HNTZYJJXTGT0EZS3VEJGX7AK VITE_DEFAULT_ENDORSER_API_SERVER=https://test-api.endorser.ch VITE_DEFAULT_IMAGE_API_SERVER=https://test-image-api.timesafari.app VITE_PASSKEYS_ENABLED=yep npm run build
 ```
 
-  * Production
+   ... and transfer to the test server: `rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntutest@test.timesafari.app:time-safari`
-```
-# This picks up values from .env.production
-npm run build
-```
 
-* Get on the server and back up the time-safari/dist folder.
+    (Let's replace that with a .env.development or .env.staging file.)
 
-* `rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntutest@test.timesafari.app:time-safari`
+    (Note: The test BVC_MEETUPS_PROJECT_CLAIM_ID does not resolve as a URL because it's only in the test DB and the prod redirect won't redirect there.)
 
-* Commit changes. Record the new hash in the changelog. Edit package.json to increment version & add "-beta", `npm install`, and commit. Also record what version is on production.
+* For prod, get on the server and run the correct build:
+
+  ... and log onto the server:
+
+  * `pkgx +npm sh`
+
+  * `cd crowd-funder-for-time-pwa && git checkout master && git pull && git checkout 0.3.55 && npm install && npm run build && cd -`
+
+  (The plain `npm run build` uses the .env.production file.)
+
+* Back up the time-safari/dist folder & deploy: `mv time-safari/dist time-safari-dist-prev.0 && mv crowd-funder-for-time-pwa/dist time-safari/`
+
+* Record the new hash in the changelog. Edit package.json to increment version & add "-beta", `npm install`, and commit. Also record what version is on production.
 
-* [Tag with the new version.](https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/releases)
 
 
 
@@ -77,11 +90,20 @@ Use the locally running Endorser server:
 
 * Clone and set up https://github.com/trentlarson/endorser-ch and run the following in that directory:
 ```
+npm install
 test/test.sh
+cp .env.local .env
 NODE_ENV=test-local npm run dev
 ```
 
-* Now run the local tests:
+If that fails, go to the README.md in the endorser-ch directory and follow the instructions there.
+
+* Install playwright browsers:
+```
+npx playwright install
+```
+
+* Now you can run the local tests:
 ```
 npm run test-all
 ```
@@ -97,7 +119,7 @@ It's possible to use the global test Endorser (ledger) server (but currently the
 
 
 
-It's possible to run with a minimal set of data: the following starts with the bare minimum of test data (but currently the tests don't all succeed):
+It's possible to run with a minimal set of data; the following starts with the bare minimum of test data:
 ```
 rm ../endorser-ch-test-local.sqlite3
 NODE_ENV=test-local npm run flyway migrate
@@ -106,6 +128,13 @@ NODE_ENV=test-local npm run dev
 ```
 
 
+To run a single test like above with the screenshots, use the following:
+```
+npx playwright test -c playwright.config-local.ts --trace on test-playwright/40-add-contact.spec.ts
+```
+
+
+
 ### Register new user on test server
 
 On the test server, User #0 has rights to register others, so you can start

package.json

@@ -1,6 +1,6 @@
 {
   "name": "TimeSafari",
-  "version": "0.3.21-beta",
+  "version": "0.3.56-beta",
   "scripts": {
     "dev": "vite",
     "serve": "vite preview",
@@ -12,6 +12,10 @@
     "test-all": "npm run build && npx playwright test -c playwright.config-local.ts --trace on"
   },
   "dependencies": {
+    "@capacitor/android": "^6.1.2",
+    "@capacitor/cli": "^6.1.2",
+    "@capacitor/core": "^6.1.2",
+    "@capacitor/ios": "^6.1.2",
     "@dicebear/collection": "^5.4.1",
     "@dicebear/core": "^5.4.1",
     "@ethersproject/hdnode": "^5.7.0",
@@ -24,6 +28,7 @@
     "@simplewebauthn/browser": "^10.0.0",
     "@simplewebauthn/server": "^10.0.0",
     "@tweenjs/tween.js": "^21.1.1",
+    "@types/qrcode": "^1.5.5",
     "@veramo/core": "^5.6.0",
     "@veramo/credential-w3c": "^5.6.0",
     "@veramo/data-store": "^5.6.0",
@@ -32,6 +37,7 @@
     "@veramo/did-provider-peer": "^6.0.0",
     "@veramo/did-resolver": "^5.6.0",
     "@veramo/key-manager": "^5.6.0",
+    "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vueuse/core": "^10.9.0",
     "@zxing/text-encoding": "^0.9.0",
     "asn1-ber": "^1.2.2",
@@ -41,20 +47,24 @@
     "dexie": "^3.2.7",
     "dexie-export-import": "^4.1.1",
     "did-jwt": "^7.4.7",
+    "did-resolver": "^4.1.0",
     "ethereum-cryptography": "^2.1.3",
     "ethereumjs-util": "^7.1.5",
     "jdenticon": "^3.2.0",
     "js-generate-password": "^0.1.9",
     "js-yaml": "^4.1.0",
+    "leaflet": "^1.9.4",
     "localstorage-slim": "^2.7.0",
     "lru-cache": "^10.2.0",
     "luxon": "^3.4.4",
     "merkletreejs": "^0.3.11",
+    "nostr-tools": "^2.7.2",
     "notiwind": "^2.0.2",
     "papaparse": "^5.4.1",
     "pina": "^0.20.2204228",
     "pinia-plugin-persistedstate": "^3.2.1",
     "qr-code-generator-vue3": "^1.4.21",
+    "qrcode": "^1.5.4",
     "ramda": "^0.29.1",
     "readable-stream": "^4.5.2",
     "reflect-metadata": "^0.1.14",
@@ -83,14 +93,12 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vue/eslint-config-typescript": "^11.0.3",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.23.0",
-    "leaflet": "^1.9.4",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "tailwindcss": "^3.4.1",

playwright.config-local.ts

@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
 /**
  * Read environment variables from file.
@@ -11,7 +11,7 @@ import { defineConfig, devices } from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './test-playwright',
+  testDir: "./test-playwright",
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -21,44 +21,44 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://localhost:8080',
+    baseURL: "http://localhost:8081",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: "on-first-retry",
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
+      name: "chromium",
       use: {
-        ...devices['Desktop Chrome'],
+        ...devices["Desktop Chrome"],
         permissions: ["clipboard-read"],
       },
     },
 
     {
-      name: 'firefox',
+      name: "firefox",
-      use: { ...devices['Desktop Firefox'] },
+      use: { ...devices["Desktop Firefox"] },
     },
 
     {
-      name: 'webkit',
+      name: "webkit",
-      use: { ...devices['Desktop Safari'] },
+      use: { ...devices["Desktop Safari"] },
     },
 
     /* Test against mobile viewports. */
     {
-      name: 'Mobile Chrome',
+      name: "Mobile Chrome",
-      use: { ...devices['Pixel 5'] },
+      use: { ...devices["Pixel 5"] },
     },
     {
-      name: 'Mobile Safari',
+      name: "Mobile Safari",
-      use: { ...devices['iPhone 12'] },
+      use: { ...devices["iPhone 12"] },
     },
 
     /* Test against branded browsers. */
@@ -67,14 +67,14 @@ export default defineConfig({
     //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
     // },
     {
-      name: 'Google Chrome',
+      name: "Google Chrome",
-      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+      use: { ...devices["Desktop Chrome"], channel: "chrome" },
     },
   ],
 
   /* Configure global timeout; default is 30000 milliseconds */
   // the image upload will often not succeed at 5 seconds
-  timeout: 20000,
+  timeout: 30000, // various tests fail at various times with 25000
 
   /* Run your local dev server before starting the tests */
   /**
@@ -91,8 +91,8 @@ export default defineConfig({
    */
   webServer: {
     command:
-      "VITE_PASSKEYS_ENABLED=true VITE_DEFAULT_ENDORSER_API_SERVER=http://localhost:3000 npm run dev",
+      "VITE_APP_SERVER=http://localhost:8081 VITE_DEFAULT_ENDORSER_API_SERVER=http://localhost:3000 VITE_PASSKEYS_ENABLED=true npm run dev -- --port=8081",
-    url: "http://localhost:8080",
+    url: "http://localhost:8081",
     reuseExistingServer: !process.env.CI,
   },
 });

public/img/icons/safari-pinned-tab-512x512.svg

@@ -0,0 +1,86 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2480 4005 c-25 -7 -58 -20 -75 -29 -16 -9 -40 -16 -52 -16 -17 0
+-24 -7 -28 -27 -3 -16 -14 -45 -24 -65 -21 -41 -13 -55 18 -38 25 13 67 13 92
+-1 15 -8 35 -4 87 17 99 39 130 41 197 10 64 -29 77 -31 107 -15 20 11 20 11
+-3 35 -12 13 -30 24 -38 24 -24 1 -132 38 -148 51 -8 7 -11 20 -7 32 12 37
+-40 47 -126 22z"/>
+<path d="M1450 3775 c-7 -8 -18 -15 -24 -15 -7 0 -31 -14 -54 -32 -29 -22 -38
+-34 -29 -40 17 -11 77 -10 77 1 0 5 16 16 35 25 60 29 220 19 290 -18 17 -9
+33 -16 37 -16 4 0 31 -15 60 -34 108 -70 224 -215 282 -353 30 -71 53 -190 42
+-218 -10 -27 -23 -8 -52 75 -30 90 -88 188 -120 202 -13 6 -26 9 -29 6 -3 -2
+11 -51 30 -108 28 -83 35 -119 35 -179 0 -120 -22 -127 -54 -17 -11 37 -13 21
+-18 -154 -5 -180 -8 -200 -32 -264 -51 -132 -129 -245 -199 -288 -21 -12 -79
+-49 -129 -80 -161 -102 -294 -141 -473 -141 -228 0 -384 76 -535 259 -81 99
+-118 174 -154 312 -31 121 -35 273 -11 437 19 127 19 125 -4 125 -23 0 -51
+-34 -87 -104 -14 -28 -33 -64 -41 -81 -19 -34 -22 -253 -7 -445 9 -106 12
+-119 44 -170 19 -30 42 -67 50 -81 64 -113 85 -140 130 -169 28 -18 53 -44 61
+-62 8 -20 36 -45 83 -76 62 -39 80 -46 151 -54 44 -5 96 -13 115 -18 78 -20
+238 -31 282 -19 24 6 66 8 95 5 76 -9 169 24 319 114 32 19 80 56 106 82 27
+26 52 48 58 48 5 0 27 26 50 58 48 66 56 70 132 71 62 1 165 29 238 64 112 55
+177 121 239 245 37 76 39 113 10 267 -12 61 -23 131 -26 156 -5 46 -5 47 46
+87 92 73 182 70 263 -8 l51 -49 -6 -61 c-4 -34 -13 -85 -21 -113 -28 -103 -30
+-161 -4 -228 16 -44 32 -67 55 -83 18 -11 39 -37 47 -58 10 -23 37 -53 73 -81
+32 -25 69 -57 82 -71 14 -14 34 -26 47 -26 12 0 37 -7 56 -15 20 -8 66 -17
+104 -20 107 -10 110 -11 150 -71 50 -75 157 -177 197 -187 18 -5 53 -24 78
+-42 71 -51 176 -82 304 -89 61 -4 127 -12 147 -18 29 -9 45 -8 77 6 23 9 50
+16 60 16 31 0 163 46 216 76 28 15 75 46 105 69 30 23 69 49 85 58 17 8 46 31
+64 51 19 20 40 36 47 36 18 0 77 70 100 120 32 66 45 108 55 173 5 32 16 71
+24 87 43 84 43 376 0 549 -27 105 -43 127 -135 188 -30 21 -65 46 -77 57 -13
+11 -23 17 -23 14 0 -3 21 -46 47 -94 79 -151 85 -166 115 -263 25 -83 28 -110
+28 -226 0 -144 -17 -221 -75 -335 -39 -77 -208 -244 -304 -299 -451 -263 -975
+-67 -1138 426 -23 70 -26 95 -28 254 -1 108 -7 183 -14 196 -6 12 -11 31 -11
+43 0 32 31 122 52 149 10 13 18 28 18 34 0 5 25 40 56 78 60 73 172 170 219
+190 30 12 30 13 6 17 -15 2 -29 -2 -37 -12 -6 -9 -16 -16 -22 -16 -6 0 -23
+-11 -39 -24 -15 -12 -33 -25 -40 -27 -17 -6 -82 -60 -117 -97 -65 -70 -75 -82
+-107 -133 -23 -34 -35 -46 -37 -35 -3 16 20 87 44 134 6 12 9 34 6 48 -4 22
+-8 25 -31 19 -14 -3 -38 -15 -53 -26 -34 -24 -34 -21 -6 28 65 112 184 206
+291 227 15 3 39 9 55 12 l27 6 -24 9 c-90 35 -304 -66 -478 -225 -39 -36 -74
+-66 -77 -66 -22 0 18 82 72 148 19 23 32 46 28 49 -4 4 -26 13 -49 19 -73 21
+-161 54 -171 64 -6 6 -20 10 -32 10 -21 0 -21 -1 -8 -40 45 -130 8 -247 -93
+-299 -25 -13 -31 0 -14 29 15 22 1 33 -22 17 -56 -36 -117 -22 -117 28 0 13
+-16 47 -35 76 -22 34 -33 60 -29 73 4 16 -3 26 -26 39 -16 10 -30 21 -30 25 1
+18 54 64 87 76 l38 13 -33 5 c-30 4 -115 -18 -154 -42 -13 -7 -20 -5 -27 8 -9
+16 -12 16 -53 1 -160 -61 -258 -104 -258 -114 0 -7 10 -20 21 -31 103 -91 217
+-297 249 -449 28 -135 41 -237 35 -276 -14 -91 -48 -170 -97 -220 -44 -47 -68
+-60 -68 -40 0 6 4 12 8 15 5 3 24 35 42 72 l33 67 -6 141 c-4 103 -11 158 -26
+205 -12 35 -21 70 -21 77 0 7 -20 56 -45 108 -82 173 -227 322 -392 401 -67
+33 -90 39 -163 42 -108 5 -130 10 -130 28 0 20 -63 20 -80 0z"/>
+<path d="M3710 3765 c0 -20 8 -28 39 -41 22 -8 42 -22 45 -30 5 -14 42 -19 70
+-8 10 4 -7 21 -58 55 -41 27 -79 49 -85 49 -6 0 -11 -11 -11 -25z"/>
+<path d="M3173 3734 c-9 -25 10 -36 35 -18 12 8 22 19 22 25 0 16 -50 10 -57
+-7z"/>
+<path d="M1982 3728 c6 -16 36 -34 44 -26 3 4 4 14 1 23 -7 17 -51 21 -45 3z"/>
+<path d="M1540 3620 c0 -5 7 -10 16 -10 8 0 12 5 9 10 -3 6 -10 10 -16 10 -5
+0 -9 -4 -9 -10z"/>
+<path d="M4467 3624 c-4 -4 23 -27 60 -50 84 -56 99 -58 67 -9 -28 43 -107 79
+-127 59z"/>
+<path d="M655 3552 c-11 -2 -26 -9 -33 -14 -7 -6 -27 -18 -45 -27 -36 -18 -58
+-64 -39 -83 9 -9 25 1 70 43 53 48 78 78 70 84 -2 1 -12 -1 -23 -3z"/>
+<path d="M1015 3460 c-112 -24 -247 -98 -303 -165 -53 -65 -118 -214 -136
+-311 -20 -113 -20 -145 -1 -231 20 -88 49 -153 102 -230 79 -113 186 -182 331
+-214 108 -24 141 -24 247 1 130 30 202 72 316 181 102 100 153 227 152 384 0
+142 -58 293 -150 395 -60 67 -180 145 -261 171 -75 23 -232 34 -297 19z m340
+-214 c91 -43 174 -154 175 -234 0 -18 -9 -51 -21 -73 -19 -37 -19 -42 -5 -64
+35 -54 12 -121 -48 -142 -22 -7 -47 -19 -55 -27 -9 -8 -41 -27 -71 -42 -50
+-26 -64 -29 -155 -29 -111 0 -152 14 -206 68 -49 49 -63 85 -64 162 0 59 4 78
+28 118 31 52 96 105 141 114 23 5 33 17 56 68 46 103 121 130 225 81z"/>
+<path d="M3985 3464 c-44 -7 -154 -44 -200 -67 -55 -28 -138 -96 -162 -132
+-10 -16 -39 -75 -64 -130 l-44 -100 0 -160 0 -160 45 -90 c53 -108 152 -214
+245 -264 59 -31 215 -71 281 -71 53 0 206 40 255 67 98 53 203 161 247 253 53
+113 74 193 74 280 -1 304 -253 564 -557 575 -49 2 -103 1 -120 -1z m311 -220
+c129 -68 202 -209 160 -309 -15 -35 -15 -42 -1 -72 26 -55 -3 -118 -59 -129
+-19 -3 -43 -15 -53 -26 -26 -29 -99 -64 -165 -78 -45 -10 -69 -10 -120 -1 -74
+15 -113 37 -161 91 -110 120 -50 331 109 385 24 8 44 23 52 39 6 14 18 38 25
+53 33 72 127 93 213 47z"/>
+<path d="M487 3394 c-21 -12 -27 -21 -25 -40 2 -14 7 -26 12 -27 14 -3 48 48
+44 66 -3 14 -6 14 -31 1z"/>
+</g>
+</svg>

src/App.vue

@@ -45,7 +45,7 @@
 
             <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>
+              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
 
               <button
                 @click="close(notification.id)"
@@ -68,7 +68,7 @@
 
             <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>
+              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
 
               <button
                 @click="close(notification.id)"
@@ -91,7 +91,7 @@
 
             <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>
+              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
 
               <button
                 @click="close(notification.id)"
@@ -114,7 +114,7 @@
 
             <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>
+              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
 
               <button
                 @click="close(notification.id)"
@@ -180,8 +180,9 @@
                   "
                   class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
                 >
-                  Yes
+                  Yes{{
-                  {{ notification.yesText ? ", " + notification.yesText : "" }}
+                    notification.yesText ? ", " + notification.yesText : ""
+                  }}
                 </button>
 
                 <button
@@ -193,7 +194,7 @@
                   "
                   class="block w-full text-center text-md font-bold uppercase bg-yellow-600 text-white px-2 py-2 rounded-md mb-2"
                 >
-                  No {{ notification.noText ? ", " + notification.noText : "" }}
+                  No{{ notification.noText ? ", " + notification.noText : "" }}
                 </button>
 
                 <label
@@ -228,7 +229,7 @@
                       ? notification.onCancel(stopAsking)
                       : null;
                     close(notification.id);
-                    stopAsking = false; // reset value
+                    stopAsking = false; // reset value for next time they open this modal
                   "
                   class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
                 >
@@ -237,63 +238,7 @@
               </div>
             </div>
           </div>
-          <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 be notified of new activity once a day?
-                </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>
 
-                <div v-if="serviceWorkerReady">
-                  <span class="flex flex-row justify-center">
-                    <span class="mt-2">Yes, tell me at: </span>
-                    <input
-                      type="number"
-                      class="rounded-l border border-r-0 border-slate-400 ml-2 mt-2 px-2 py-2 text-center w-20"
-                      v-model="hourInput"
-                    />
-                    <span
-                      class="rounded-r border border-slate-400 bg-slate-200 text-center text-blue-500 mt-2 px-2 py-2 w-20"
-                      @click="hourAm = !hourAm"
-                    >
-                      <span v-if="hourAm"> AM <fa icon="chevron-down" /> </span>
-                      <span v-else> PM <fa icon="chevron-up" /> </span>
-                    </span>
-                  </span>
-                  <button
-                    class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white mt-2 px-2 py-2 rounded-md"
-                    @click="
-                      () => {
-                        if (checkHour()) {
-                          close(notification.id);
-                          turnOnNotifications();
-                        }
-                      }
-                    "
-                  >
-                    Turn on Daily Message
-                  </button>
-                </div>
-
-                <button
-                  @click="close(notification.id)"
-                  class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white mt-4 px-2 py-2 rounded-md"
-                >
-                  No, Not Now
-                </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"
@@ -307,17 +252,17 @@
                 <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
+                  For 1 Day
                 </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
+                  For 2 Days
                 </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
+                  For 1 Week
                 </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"
@@ -333,6 +278,7 @@
               </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"
@@ -342,17 +288,17 @@
             >
               <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?
+                  Would you like to <b>turn off</b> this notification?
                 </p>
 
                 <button
                   @click="
                     close(notification.id);
-                    turnOffNotifications();
+                    turnOffNotifications(notification);
                   "
                   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
+                  Turn Off Notification
                 </button>
                 <button
                   @click="close(notification.id)"
@@ -372,420 +318,116 @@
 <style></style>
 
 <script lang="ts">
-import axios from "axios";
 import { Vue, Component } from "vue-facing-decorator";
 
-import * as libsUtil from "@/libs/util";
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
-
+import { NotificationIface } from "./constants/app";
-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;
-  };
-}
-
-interface PushSubscriptionWithTime extends PushSubscriptionJSON {
-  notifyTime: { utcHour: number };
-}
-
-import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app";
-import { db } from "@/db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { sendTestThroughPushServer } from "@/libs/util";
 
 @Component
 export default class App extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   stopAsking = false;
-  b64 = "";
-  hourAm = true;
-  hourInput = "8";
-  serviceWorkerReady = true;
 
-  async mounted() {
+  truncateLongWords(sentence: string) {
-    try {
+    return sentence
-      await db.open();
+      .split(" ")
-      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+      .map((word) => (word.length > 30 ? word.slice(0, 30) + "..." : word))
-      let pushUrl = DEFAULT_PUSH_SERVER;
+      .join(" ");
-      if (settings?.webPushServer) {
-        pushUrl = settings.webPushServer;
-      }
-
-      if (pushUrl.startsWith("http://localhost")) {
-        console.log("Not checking for VAPID in this local environment.");
-      } else {
-        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(
+  async turnOffNotifications(notification: NotificationIface) {
-    message: ServiceWorkerMessage,
+    let subscription: object | null = null;
-  ): Promise<unknown> {
-    return new Promise((resolve, reject) => {
-      if (navigator.serviceWorker.controller) {
-        const messageChannel = new MessageChannel();
 
-        messageChannel.port1.onmessage = (event: MessageEvent) => {
+    let allGoingOff = false;
-          if (event.data.error) {
+    const settings = await retrieveSettingsForActiveAccount();
-            reject(event.data.error as ErrorResponse);
+    const notifyingNewActivity = !!settings?.notifyingNewActivityTime;
-          } else {
+    const notifyingReminder = !!settings?.notifyingReminderTime;
-            resolve(event.data as ServiceWorkerResponse);
+    if (!notifyingNewActivity || !notifyingReminder) {
-          }
+      // the other notification is already off, so fully unsubscribe now
-        };
+      allGoingOff = true;
-
-        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");
+    await navigator.serviceWorker?.ready
-    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;
-    });
-  }
-
-  // this allows us to show an error without closing the dialog
-  checkHour() {
-    if (!libsUtil.isNumeric(this.hourInput)) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Not a Number",
-          text: "The time must be an hour number.",
-        },
-        5000,
-      );
-      return false;
-    }
-    const hourNum = libsUtil.numberOrZero(this.hourInput);
-    if (!Number.isInteger(hourNum)) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Not a Whole Number",
-          text: "The time must be a whole hour number.",
-        },
-        5000,
-      );
-      return false;
-    }
-    if (hourNum < 1 || 12 < hourNum) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Not a Whole Number",
-          text: "The time must be an hour between 1 and 12.",
-        },
-        5000,
-      );
-      return false;
-    }
-    return true;
-  }
-
-  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,
-              );
-              // we already checked that this is a valid hour number
-              const rawHourNum = libsUtil.numberOrZero(this.hourInput);
-              const adjHourNum = rawHourNum + (this.hourAm ? 0 : 12);
-              const hourNum = adjHourNum % 24;
-              const utcHour =
-                hourNum + Math.round(new Date().getTimezoneOffset() / 60);
-              const finalUtcHour = (utcHour + (utcHour < 0 ? 24 : 0)) % 24;
-
-              const subscriptionWithTime: PushSubscriptionWithTime = {
-                notifyTime: { utcHour: finalUtcHour },
-                ...subscription.toJSON(),
-              };
-              await this.sendSubscriptionToServer(subscriptionWithTime);
-              return subscriptionWithTime;
-            } else {
-              throw new Error("Subscription object is not available.");
-            }
-          })
-          .then(async (subscription: PushSubscriptionWithTime) => {
-            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: PushSubscriptionWithTime,
-  ): 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) => {
+      .then(async (subscript: PushSubscription | null) => {
-        subscription = subscript;
+        if (subscript) {
-        if (subscription) {
+          subscription = subscript.toJSON();
-          return subscription.unsubscribe();
+          if (allGoingOff) {
+            await subscript.unsubscribe();
+          }
         } else {
-          console.log("Subscription object is not available.");
+          logConsoleAndDb("Subscription object is not available.");
-          return false;
         }
       })
       .catch((error) => {
-        console.error("Push provider server communication failed:", error);
+        logConsoleAndDb(
-        return false;
+          "Push provider server communication failed: " + JSON.stringify(error),
+          true,
+        );
       });
 
+    if (!subscription) {
+      // there is no endpoint or auth for the server to compare, so we're done
+      this.$notify(
+        {
+          group: "alert",
+          type: "info",
+          title: "Finished",
+          text: "Notifications are off.", // a different message so I know there are none stored
+        },
+        5000,
+      );
+      return true;
+    }
+
+    // clone in order to get only the properties and allow stringify to work
+    const serverSubscription = {
+      ...subscription,
+    };
+    if (!allGoingOff) {
+      serverSubscription["notifyType"] = notification.title;
+    }
     const pushServerSuccess = await fetch("/web-push/unsubscribe", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify(subscription),
+      body: JSON.stringify(serverSubscription),
     })
       .then((response) => {
         return response.ok;
       })
       .catch((error) => {
-        console.error("Push server communication failed:", error);
+        logConsoleAndDb(
+          "Push server communication failed: " + JSON.stringify(error),
+          true,
+        );
         return false;
       });
 
-    alert(
+    let message;
-      "Notifications are off. Push provider unsubscribe " +
+    if (pushServerSuccess) {
-        (pushProviderSuccess ? "succeeded" : "failed") +
+      message = "Notification is off.";
-        (pushProviderSuccess === pushServerSuccess ? " and" : " but") +
+    } else {
-        " push server unsubscribe " +
+      message = "Notification is still on. Try to turn it off again.";
-        (pushServerSuccess ? "succeeded" : "failed") +
+    }
-        ".",
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Finished",
+        text: message,
+      },
+      5000,
     );
+
+    if (notification.callback) {
+      // it's OK if the local notifications are still on (especially if the other notification is on)
+      notification.callback(pushServerSuccess);
+    }
   }
 }
 </script>

src/components/ChoiceButtonDialog.vue

@@ -0,0 +1,152 @@
+<template>
+  <NotificationGroup group="customModal">
+    <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
+            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">
+                <span class="font-semibold text-lg">{{ title }}</span>
+                <p class="text-sm mb-2">{{ text }}</p>
+
+                <button
+                  @click="handleOption1(close)"
+                  class="block w-full text-center text-md font-bold capitalize bg-blue-800 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  {{ option1Text }}
+                </button>
+
+                <button
+                  @click="handleOption2(close)"
+                  class="block w-full text-center text-md font-bold capitalize bg-blue-700 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  {{ option2Text }}
+                </button>
+
+                <button
+                  @click="handleOption3(close)"
+                  class="block w-full text-center text-md font-bold capitalize bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  {{ option3Text }}
+                </button>
+
+                <button
+                  @click="handleCancel(close)"
+                  class="block w-full text-center text-md font-bold capitalize bg-slate-600 text-white px-2 py-2 rounded-md"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Notification>
+    </div>
+  </NotificationGroup>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { NotificationIface } from "@/constants/app";
+
+@Component
+export default class PromptDialog extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  title = "";
+  text = "";
+  option1Text = "";
+  option2Text = "";
+  option3Text = "";
+  onOption1?: () => void;
+  onOption2?: () => void;
+  onOption3?: () => void;
+  onCancel?: () => Promise<void>;
+
+  open(options: {
+    title: string;
+    text: string;
+    option1Text?: string;
+    option2Text?: string;
+    option3Text?: string;
+    onOption1?: () => void;
+    onOption2?: () => void;
+    onOption3?: () => void;
+    onCancel?: () => Promise<void>;
+  }) {
+    this.title = options.title;
+    this.text = options.text;
+    this.option1Text = options.option1Text || "";
+    this.option2Text = options.option2Text || "";
+    this.option3Text = options.option3Text || "";
+    this.onOption1 = options.onOption1;
+    this.onOption2 = options.onOption2;
+    this.onOption3 = options.onOption3;
+    this.onCancel = options.onCancel;
+
+    this.$notify(
+      {
+        group: "customModal",
+        type: "confirm",
+        title: this.title,
+        text: this.text,
+        option1Text: this.option1Text,
+        option2Text: this.option2Text,
+        option3Text: this.option3Text,
+        onOption1: this.onOption1,
+        onOption2: this.onOption2,
+        onOption3: this.onOption3,
+        onCancel: this.onCancel,
+      } as NotificationIface,
+      -1,
+    );
+  }
+
+  handleOption1(close: (id: string) => void) {
+    if (this.onOption1) {
+      this.onOption1();
+    }
+    close("string that does not matter");
+  }
+
+  handleOption2(close: (id: string) => void) {
+    if (this.onOption2) {
+      this.onOption2();
+    }
+    close("string that does not matter");
+  }
+
+  handleOption3(close: (id: string) => void) {
+    if (this.onOption3) {
+      this.onOption3();
+    }
+    close("string that does not matter");
+  }
+
+  handleCancel(close: (id: string) => void) {
+    if (this.onCancel) {
+      this.onCancel();
+    }
+    close("string that does not matter");
+  }
+}
+</script>

src/components/ContactNameDialog.vue

@@ -0,0 +1,102 @@
+<!-- similar to UserNameDialog -->
+<template>
+  <div v-if="visible" class="dialog-overlay">
+    <div class="dialog">
+      <h1 class="text-xl font-bold text-center mb-4">{{ title }}</h1>
+      {{ message }}
+      Note that their name is only stored on this device.
+      <input
+        type="text"
+        placeholder="Name"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+        v-model="newText"
+      />
+
+      <div class="mt-8">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <button
+            type="button"
+            class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+            @click="onClickSaveChanges()"
+          >
+            Save
+          </button>
+          <button
+            type="button"
+            class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+            @click="onClickCancel()"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from "vue-facing-decorator";
+
+@Component
+export default class ContactNameDialog extends Vue {
+  cancelCallback: () => void = () => {};
+  saveCallback: (name?: string) => void = () => {};
+  message = "";
+  newText = "";
+  title = "Contact Name";
+  visible = false;
+
+  async open(
+    title?: string,
+    message?: string,
+    saveCallback?: (name?: string) => void,
+    cancelCallback?: () => void,
+    defaultName?: string,
+  ) {
+    this.cancelCallback = cancelCallback || this.cancelCallback;
+    this.saveCallback = saveCallback || this.saveCallback;
+    this.message = message ?? this.message;
+    this.newText = defaultName ?? "";
+    this.title = title ?? this.title;
+    this.visible = true;
+  }
+
+  async onClickSaveChanges() {
+    this.visible = false;
+    if (this.saveCallback) {
+      this.saveCallback(this.newText);
+    }
+  }
+
+  onClickCancel() {
+    this.visible = false;
+    if (this.cancelCallback) {
+      this.cancelCallback();
+    }
+  }
+}
+</script>
+
+<style>
+.dialog-overlay {
+  z-index: 50;
+  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/FeedFilters.vue

@@ -100,7 +100,7 @@ import {
 } from "@vue-leaflet/vue-leaflet";
 
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { db } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 
 @Component({
   components: {
@@ -121,11 +121,10 @@ export default class FeedFilters extends Vue {
   async open(onCloseIfChanged: () => void) {
     this.onCloseIfChanged = onCloseIfChanged;
 
-    await db.open();
+    const settings = await retrieveSettingsForActiveAccount();
-    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    this.hasVisibleDid = !!settings.filterFeedByVisible;
-    this.hasVisibleDid = !!settings?.filterFeedByVisible;
+    this.isNearby = !!settings.filterFeedByNearby;
-    this.isNearby = !!settings?.filterFeedByNearby;
+    if (settings.searchBoxes && settings.searchBoxes.length > 0) {
-    if (settings?.searchBoxes && settings.searchBoxes.length > 0) {
       this.hasSearchBox = true;
     }
 
@@ -192,6 +191,7 @@ export default class FeedFilters extends Vue {
 
 <style>
 .dialog-overlay {
+  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;
@@ -205,7 +205,7 @@ export default class FeedFilters extends Vue {
 }
 
 #dialogFeedFilters.dialog-overlay {
-  z-index: 99999;
+  z-index: 100;
   overflow: scroll;
 }
 

src/components/GiftedDialog.vue

@@ -7,7 +7,7 @@
       <input
         type="text"
         class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
-        placeholder="What was given"
+        :placeholder="prompt || 'What was given?'"
         v-model="description"
       />
       <div class="flex flex-row justify-center">
@@ -47,7 +47,8 @@
                 giverDid: giver?.did,
                 giverName: giver?.name,
                 offerId,
-                projectId,
+                fulfillsProjectId: toProjectId,
+                providerProjectId: fromProjectId,
                 recipientDid: receiver?.did,
                 recipientName: receiver?.name,
                 unitCode,
@@ -92,18 +93,19 @@ import { NotificationIface } from "@/constants/app";
 import {
   createAndSubmitGive,
   didInfo,
-  GiverReceiverInputInfo,
+  serverMessageForUser,
 } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
-import { accountsDB, db } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { Contact } from "@/db/tables/contacts";
+import { retrieveAccountDids } from "@/libs/util";
 
 @Component
 export default class GiftedDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
-  @Prop projectId = "";
+  @Prop fromProjectId = "";
+  @Prop toProjectId = "";
 
   activeDid = "";
   allContacts: Array<Contact> = [];
@@ -114,25 +116,27 @@ export default class GiftedDialog extends Vue {
   callbackOnSuccess?: (amount: number) => void = () => {};
   customTitle?: string;
   description = "";
-  giver?: GiverReceiverInputInfo; // undefined means no identified giver agent
+  giver?: libsUtil.GiverReceiverInputInfo; // undefined means no identified giver agent
   isTrade = false;
   offerId = "";
-  receiver?: GiverReceiverInputInfo;
+  prompt = "";
+  receiver?: libsUtil.GiverReceiverInputInfo;
   unitCode = "HUR";
   visible = false;
 
   libsUtil = libsUtil;
 
   async open(
-    giver?: GiverReceiverInputInfo,
+    giver?: libsUtil.GiverReceiverInputInfo,
-    receiver?: GiverReceiverInputInfo,
+    receiver?: libsUtil.GiverReceiverInputInfo,
     offerId?: string,
     customTitle?: string,
+    prompt?: string,
     callbackOnSuccess?: (amount: number) => void,
   ) {
     this.customTitle = customTitle;
-    this.description = "";
     this.giver = giver;
+    this.prompt = prompt || "";
     this.receiver = receiver;
     // if we show "given to user" selection, default checkbox to true
     this.amountInput = "0";
@@ -140,16 +144,13 @@ export default class GiftedDialog extends Vue {
     this.offerId = offerId || "";
 
     try {
-      await db.open();
+      const settings = await retrieveSettingsForActiveAccount();
-      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+      this.apiServer = settings.apiServer || "";
-      this.apiServer = settings?.apiServer || "";
+      this.activeDid = settings.activeDid || "";
-      this.activeDid = settings?.activeDid || "";
 
       this.allContacts = await db.contacts.toArray();
 
-      await accountsDB.open();
+      this.allMyDids = await retrieveAccountDids();
-      const allAccounts = await accountsDB.accounts.toArray();
-      this.allMyDids = allAccounts.map((acc) => acc.did);
 
       if (this.giver && !this.giver.name) {
         this.giver.name = didInfo(
@@ -207,6 +208,7 @@ export default class GiftedDialog extends Vue {
     this.description = "";
     this.giver = undefined;
     this.amountInput = "0";
+    this.prompt = "";
     this.unitCode = "HUR";
   }
 
@@ -297,9 +299,11 @@ export default class GiftedDialog extends Vue {
         description,
         amount,
         unitCode,
-        this.projectId,
+        this.toProjectId,
         this.offerId,
         this.isTrade,
+        undefined,
+        this.fromProjectId,
       );
 
       if (
@@ -336,7 +340,7 @@ export default class GiftedDialog extends Vue {
       console.error("Error with give recordation caught:", error);
       const errorMessage =
         error.userMessage ||
-        error.response?.data?.error?.message ||
+        serverMessageForUser(error) ||
         "There was an error recording the give.";
       this.$notify(
         {
@@ -390,6 +394,7 @@ export default class GiftedDialog extends Vue {
 
 <style>
 .dialog-overlay {
+  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;

src/components/GiftedPrompts.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
-      <h1 class="text-xl font-bold text-center mb-4 relative">
+      <h1 class="text-xl font-bold text-center relative">
         Here's one:
         <div
           class="text-lg text-center p-2 leading-none absolute right-0 -top-1"
@@ -10,8 +10,9 @@
           <fa icon="xmark" class="w-[1em]"></fa>
         </div>
       </h1>
-      <span class="flex justify-between">
+      <span class="mt-2 flex justify-between">
         <span
+          v-if="currentCategory === CATEGORY_IDEAS"
           class="rounded-l border border-slate-400 bg-slate-200 px-4 py-2 flex"
           @click="prevIdea()"
         >
@@ -19,21 +20,21 @@
         </span>
 
         <div class="m-2">
-          <span v-if="currentIdeaIndex < IDEAS.length">
+          <span v-if="currentCategory === CATEGORY_IDEAS">
-            <p class="text-center text-lg font-bold">
+            <p class="text-center text-lg">
               {{ IDEAS[currentIdeaIndex] }}
             </p>
           </span>
-          <div v-if="currentIdeaIndex == IDEAS.length + 0">
+          <div v-if="currentCategory === CATEGORY_CONTACTS">
             <p class="text-center">
               <span
                 v-if="currentContact == null"
-                class="text-orange-500 text-lg font-bold"
+                class="text-orange-500 text-lg"
               >
                 That's all your contacts.
               </span>
               <span v-else>
-                <span class="text-lg font-bold">
+                <span class="text-lg">
                   Did {{ currentContact.name || AppString.NO_CONTACT_NAME }}
                   <br />
                   or someone near them do anything &ndash; maybe a while ago?
@@ -61,7 +62,7 @@
       </span>
       <button
         class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mt-4"
-        @click="cancel"
+        @click="proceed"
       >
         That's it!
       </button>
@@ -71,155 +72,175 @@
 
 <script lang="ts">
 import { Vue, Component } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import { AppString, NotificationIface } from "@/constants/app";
 import { db } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
+import { GiverReceiverInputInfo } from "@/libs/util";
 
 @Component
 export default class GivenPrompts extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
+  CATEGORY_CONTACTS = 1;
+  CATEGORY_IDEAS = 0;
   IDEAS = [
-    "Did anyone fix food for you?",
+    "What food did someone make? (How did it free up your time for something? Was something doable because it eased your stress?)",
-    "Did a family member do something for you?",
+    "What did a family member do? (How did you take better action because it made you feel loved?)",
-    "Did anyone give you a compliment?",
+    "What compliment did someone give you? (What task could you tackle because it boosted your confidence?)",
-    "Who is someone you can always rely on, and how did they demonstrate that?",
+    "Who is someone you can always rely on, and how did they demonstrate that? (What project tasks were enabled because you could depend on them?)",
-    "Did you see anyone give to someone else?",
+    "What did you see someone give to someone else? (What is the effect of the positivity you gained from seeing that?)",
-    "Is there someone who you have never met who has helped you somehow?",
+    "What is a way that someone helped you even though you have never met? (What different action did you take due to that newfound perspective or inspiration?)",
-    "How did an artist or musician or author inspire you?",
+    "How did a musician or author or artist inspire you? (What were you motivated to do more creatively because of that?)",
-    "What inspiration did you get from someone who handled tragedy well?",
+    "What inspiration did you get from someone who handled tragedy well? (What could you accomplish with better grace or resilience after seeing their example?)",
-    "Did some organization give something worth respect?",
+    "What is something worth respect that an organization gave you? (How did their contribution improve the situation or enable new activities?)",
-    "Who last gave you a good laugh?",
+    "Who last gave you a good laugh? (What kind of bond or revitalization did that bring to a situation?)",
-    "Do you recall anything that was given to you while you were young?",
+    "What do you recall someone giving you while you were young? (How did it bring excitement or teach a skill or ignite a passion that resulted in improvements in your life?)",
-    "Did someone forgive you or overlook a mistake?",
+    "Who forgave you or overlooked a mistake? (How did that free you or build trust that enabled better relationships?)",
-    "Do you know of a way an ancestor contributed to your life?",
+    "What is a way an ancestor contributed to your life? (What in your life is now possible because of their efforts? What challenges are you undertaking knowing of their lives?)",
-    "Did anyone give you help at work?",
+    "What kind of help did someone at work give you? (How did that help with team progress? How did that lift your professional growth?)",
-    "How did a teacher or mentor or great example help you?",
+    "How did a teacher or mentor or great example help you? (How did their guidance enhance your attitude or actions?)",
+    "What is a surprise gift you received? (What extra possibilities did it give you?)",
   ];
-  OTHER_PROMPTS = 1;
-  CONTACT_PROMPT_INDEX = this.IDEAS.length; // expected after other prompts
 
+  callbackOnFullGiftInfo?: (
+    contactInfo?: GiverReceiverInputInfo,
+    description?: string,
+  ) => void;
+  currentCategory = this.CATEGORY_IDEAS; // 0 = IDEAS, 1 = CONTACTS
   currentContact: Contact | undefined = undefined;
   currentIdeaIndex = 0;
   numContacts = 0;
-  shownContactDbIndices: number[] = [];
+  shownContactDbIndices: Array<boolean> = [];
   visible = false;
 
   AppString = AppString;
 
-  async open() {
+  async open(
+    callbackOnFullGiftInfo?: (
+      contactInfo?: GiverReceiverInputInfo,
+      description?: string,
+    ) => void,
+  ) {
     this.visible = true;
+    this.callbackOnFullGiftInfo = callbackOnFullGiftInfo;
 
     await db.open();
     this.numContacts = await db.contacts.count();
+    this.shownContactDbIndices = new Array<boolean>(this.numContacts); // all undefined to start
   }
 
-  close() {
+  cancel() {
-    // close the dialog but don't change values (just in case some actions are added later)
+    this.currentCategory = this.CATEGORY_IDEAS;
+    this.currentContact = undefined;
+    this.currentIdeaIndex = 0;
+    this.numContacts = 0;
+    this.shownContactDbIndices = [];
+
     this.visible = false;
   }
 
+  proceed() {
+    // proceed with logic but don't change values (just in case some actions are added later)
+    this.visible = false;
+    if (this.currentCategory === this.CATEGORY_IDEAS) {
+      (this.$router as Router).push({
+        name: "contact-gift",
+        query: {
+          prompt: this.IDEAS[this.currentIdeaIndex],
+        },
+      });
+    } else {
+      // must be this.CATEGORY_CONTACTS
+      this.callbackOnFullGiftInfo?.(
+        this.currentContact as GiverReceiverInputInfo,
+      );
+    }
+  }
+
   /**
    * Get the next idea.
    * If it is a contact prompt, loop through.
    */
   async nextIdea() {
-    // if we're incrementing to the contact prompt
+    // check if the next one is an idea or a contact
-    // or if we're at the contact prompt and there was a previous contact...
+    if (this.currentCategory === this.CATEGORY_IDEAS) {
-    if (
+      this.currentIdeaIndex++;
-      this.currentIdeaIndex == this.CONTACT_PROMPT_INDEX - 1 ||
+      if (this.currentIdeaIndex === this.IDEAS.length) {
-      (this.currentIdeaIndex == this.CONTACT_PROMPT_INDEX &&
+        // must have just finished ideas so move to contacts
-        this.shownContactDbIndices.length < this.numContacts)
+        this.findNextUnshownContact();
-    ) {
+      }
-      this.currentIdeaIndex = this.CONTACT_PROMPT_INDEX;
-      this.findNextUnshownContact();
     } else {
-      // we're not at the contact prompt (or we ran out), so increment the idea index
+      // must be this.CATEGORY_CONTACTS
-      this.currentIdeaIndex =
+      this.findNextUnshownContact();
-        (this.currentIdeaIndex + 1) % (this.IDEAS.length + this.OTHER_PROMPTS);
+      // when that's finished, it'll reset to ideas
-      // ... and clear out any other prompt info
-      this.currentContact = undefined;
-      this.shownContactDbIndices = [];
     }
   }
 
-  prevIdea() {
+  /**
-    if (
+   * Get the previous idea.
-      this.currentIdeaIndex ==
+   * If it is a contact prompt, loop through.
-        (this.CONTACT_PROMPT_INDEX + 1) %
+   */
-          (this.IDEAS.length + this.OTHER_PROMPTS) ||
+  async prevIdea() {
-      (this.currentIdeaIndex == this.CONTACT_PROMPT_INDEX &&
+    // check if the next one is an idea or a contact
-        this.shownContactDbIndices.length < this.numContacts)
+    if (this.currentCategory === this.CATEGORY_IDEAS) {
-    ) {
-      this.currentIdeaIndex = this.CONTACT_PROMPT_INDEX;
-      this.findNextUnshownContact();
-    } else {
-      // we're not at the contact prompt (or we ran out), so increment the idea index
       this.currentIdeaIndex--;
       if (this.currentIdeaIndex < 0) {
-        this.currentIdeaIndex = this.IDEAS.length - 1 + this.OTHER_PROMPTS;
+        // must have just finished ideas so move to contacts
+        this.findNextUnshownContact();
       }
-      // ... and clear out any other prompt info
+    } else {
-      this.currentContact = undefined;
+      // must be this.CATEGORY_CONTACTS
-      this.shownContactDbIndices = [];
+      this.findNextUnshownContact();
+      // when that's finished, it'll reset to ideas
     }
   }
 
   nextIdeaPastContacts() {
-    this.currentIdeaIndex = 0;
     this.currentContact = undefined;
-    this.shownContactDbIndices = [];
+    this.shownContactDbIndices = new Array<boolean>(this.numContacts);
+
+    this.currentCategory = this.CATEGORY_IDEAS;
+    // look at the previous idea and switch to the other side of the list
+    this.currentIdeaIndex =
+      this.currentIdeaIndex >= this.IDEAS.length ? 0 : this.IDEAS.length - 1;
   }
 
   async findNextUnshownContact() {
-    // get a random contact
+    if (this.currentCategory === this.CATEGORY_IDEAS) {
-    if (this.shownContactDbIndices.length === this.numContacts) {
+      // we're not in the contact prompts, so reset index array
-      // no more contacts to show
+      this.shownContactDbIndices = new Array<boolean>(this.numContacts);
-      this.currentContact = undefined;
+    }
-    } else {
+    this.currentCategory = this.CATEGORY_CONTACTS;
-      // get a random contact that hasn't been shown yet
-      let someContactDbIndex = Math.floor(Math.random() * this.numContacts);
-      // and guarantee that one is found by walking past shown contacts
-      let shownContactIndex =
-        this.shownContactDbIndices.indexOf(someContactDbIndex);
-      while (shownContactIndex !== -1) {
-        // increment both indices until we find a spot where "shown" skips a spot
-        shownContactIndex = (shownContactIndex + 1) % this.numContacts;
-        someContactDbIndex = (someContactDbIndex + 1) % this.numContacts;
-        if (
-          this.shownContactDbIndices[shownContactIndex] !== someContactDbIndex
-        ) {
-          // we found a contact that hasn't been shown yet
-          break;
-        }
-        // continue
-        // ... and there must be at least one because shownContactDbIndices length < numContacts
-      }
-      this.shownContactDbIndices.push(someContactDbIndex);
-      this.shownContactDbIndices.sort();
 
+    let someContactDbIndex = Math.floor(Math.random() * this.numContacts);
+    let count = 0;
+    // as long as the index has an entry, loop
+    while (
+      this.shownContactDbIndices[someContactDbIndex] != null &&
+      count++ < this.numContacts
+    ) {
+      someContactDbIndex = (someContactDbIndex + 1) % this.numContacts;
+    }
+    if (count >= this.numContacts) {
+      // all contacts have been shown
+      this.nextIdeaPastContacts();
+    } else {
       // get the contact at that offset
       await db.open();
       this.currentContact = await db.contacts
         .offset(someContactDbIndex)
         .first();
+      this.shownContactDbIndices[someContactDbIndex] = true;
     }
   }
-
-  cancel() {
-    this.currentContact = undefined;
-    this.currentIdeaIndex = 0;
-    this.numContacts = 0;
-    this.shownContactDbIndices = [];
-
-    this.close();
-  }
 }
 </script>
 
 <style>
 .dialog-overlay {
+  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;

src/components/HiddenDidDialog.vue

@@ -0,0 +1,182 @@
+<template>
+  <div
+    v-if="isOpen"
+    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+  >
+    <div class="bg-white rounded-lg p-6 max-w-2xl w-full mx-4">
+      <!-- Header -->
+      <div class="flex justify-between items-center mb-4">
+        <h2 class="text-xl font-bold capitalize">{{ roleName }} Details</h2>
+        <button @click="close" class="text-gray-500 hover:text-gray-700">
+          <fa icon="times" />
+        </button>
+      </div>
+
+      <!-- Content -->
+      <!-- This is somewhat similar to ClaimView.vue and ConfirmGiftView.vue -->
+      <div class="mb-4">
+        <p class="mb-4">
+          <span v-if="R.isEmpty(visibleToDids)">
+            The {{ roleName }} is not visible to you or any of your contacts.
+          </span>
+          <span v-else> The {{ roleName }} is not visible to you. </span>
+        </p>
+
+        <div v-if="R.isEmpty(visibleToDids)">
+          <p class="mt-2">
+            You can ask one of your contacts to take a look and see if their
+            contacts can see more details. Someone is connected to people closer
+            to them; if you don't know who to ask, try the person who registered
+            you.
+          </p>
+        </div>
+
+        <div v-else>
+          <p class="mb-2">
+            They are visible to some of your contacts. If you'd like an
+            introduction, ask them if they'll tell you more.
+          </p>
+
+          <div class="ml-4">
+            <ul>
+              <li
+                v-for="(visDid, idx) of visibleToDids"
+                :key="idx"
+                class="list-disc ml-4 mb-2"
+              >
+                <div class="text-sm">
+                  <span>
+                    {{ didInfo(visDid) }}
+                    <span v-if="!serverUtil.isEmptyOrHiddenDid(visDid)">
+                      <a
+                        :href="`/did/${visDid}`"
+                        target="_blank"
+                        class="text-blue-500"
+                      >
+                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                      </a>
+                    </span>
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="mt-4">
+          <span v-if="canShare">
+            If you'd like an introduction,
+            <a @click="onClickShareClaim()" class="text-blue-500"
+              >click here to share the information with them and ask if they'll
+              tell you more about the {{ roleName }}.</a
+            >
+          </span>
+          <span v-else>
+            If you'd like an introduction,
+            <a
+              @click="copyToClipboard('A link to this page', windowLocation)"
+              class="text-blue-500"
+              >click here to copy this page, paste it into a message, and ask if
+              they'll tell you more about the {{ roleName }}.</a
+            >
+          </span>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="flex justify-end">
+        <button
+          @click="close"
+          class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import * as R from "ramda";
+import { useClipboard } from "@vueuse/core";
+import { Contact } from "@/db/tables/contacts";
+import * as serverUtil from "@/libs/endorserServer";
+import { NotificationIface } from "@/constants/app";
+
+@Component
+export default class HiddenDidDialog extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  isOpen = false;
+  roleName = "";
+  visibleToDids: string[] = [];
+  allContacts: Array<Contact> = [];
+  activeDid = "";
+  allMyDids: Array<string> = [];
+  canShare = false;
+  windowLocation = window.location.href;
+
+  R = R;
+  serverUtil = serverUtil;
+
+  created() {
+    // When Chrome compatibility is fixed https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API#api.navigator.canshare
+    // then use this truer check: navigator.canShare && navigator.canShare()
+    this.canShare = !!navigator.share;
+  }
+
+  open(
+    roleName: string,
+    visibleToDids: string[],
+    allContacts: Array<Contact>,
+    activeDid: string,
+    allMyDids: Array<string>,
+  ) {
+    this.roleName = roleName;
+    this.visibleToDids = visibleToDids;
+    this.allContacts = allContacts;
+    this.activeDid = activeDid;
+    this.allMyDids = allMyDids;
+    this.isOpen = true;
+  }
+
+  close() {
+    this.isOpen = false;
+  }
+
+  didInfo(did: string) {
+    return serverUtil.didInfo(
+      did,
+      this.activeDid,
+      this.allMyDids,
+      this.allContacts,
+    );
+  }
+
+  copyToClipboard(name: string, text: string) {
+    useClipboard()
+      .copy(text)
+      .then(() => {
+        this.$notify(
+          {
+            group: "alert",
+            type: "toast",
+            title: "Copied",
+            text: (name || "That") + " was copied to the clipboard.",
+          },
+          2000,
+        );
+      });
+  }
+
+  onClickShareClaim() {
+    this.copyToClipboard("A link to this page", this.windowLocation);
+    window.navigator.share({
+      title: "Help Connect Me",
+      text: "I'm trying to find the people who recorded this. Can you help me?",
+      url: this.windowLocation,
+    });
+  }
+}
+</script>

src/components/ImageMethodDialog.vue

@@ -6,7 +6,7 @@
           id="ViewHeading"
           class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-0.5 bg-black/50 text-white leading-none"
         >
-          Camera or Other?
+          Add Photo
         </div>
         <div
           class="text-lg text-center px-2 py-0.5 leading-none absolute right-0 top-0 text-white"
@@ -18,7 +18,7 @@
 
       <div>
         <div class="text-center mt-8">
-          <div class>
+          <div>
             <fa
               icon="camera"
               class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md"
@@ -155,6 +155,7 @@ export default class ImageMethodDialog extends Vue {
 
 <style>
 .dialog-overlay {
+  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;

src/components/InviteDialog.vue

@@ -0,0 +1,119 @@
+<template>
+  <div v-if="visible" class="dialog-overlay">
+    <div class="dialog">
+      <h1 class="text-xl font-bold text-center mb-4">Invitation & Notes</h1>
+
+      These are optional notes for your use; they are comments to help you
+      recall who it is when they accept it. These notes are sent to the server.
+      If you want to store your own way, the invitation ID is:
+      {{ inviteIdentifier }}
+      <input
+        type="text"
+        placeholder="Notes"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+        v-model="text"
+      />
+
+      <!-- Add date selection element -->
+      Expiration
+      <input
+        type="date"
+        class="block rounded border border-slate-400 mb-4 px-3 py-2"
+        v-model="expiresAt"
+      />
+
+      <div class="mt-8">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <button
+            type="button"
+            class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+            @click="onClickSaveChanges()"
+          >
+            Save
+          </button>
+          <!-- SHOW ME instead while processing saving changes -->
+          <button
+            type="button"
+            class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+            @click="onClickCancel()"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from "vue-facing-decorator";
+
+import { NotificationIface } from "@/constants/app";
+
+@Component
+export default class InviteDialog extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  callback: (text: string, expiresAt: string) => void = () => {};
+  inviteIdentifier = "";
+  text = "";
+  visible = false;
+  expiresAt = new Date(Date.now() + 1000 * 60 * 60 * 24 * 7)
+    .toISOString()
+    .substring(0, 10);
+
+  async open(
+    inviteIdentifier: string,
+    aCallback: (text: string, expiresAt: string) => void,
+  ) {
+    this.callback = aCallback;
+    this.inviteIdentifier = inviteIdentifier;
+    this.visible = true;
+  }
+
+  async onClickSaveChanges() {
+    if (!this.expiresAt) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Needs Expiration",
+          text: "You must select an expiration date.",
+        },
+        5000,
+      );
+    } else {
+      this.callback(this.text, this.expiresAt);
+      this.visible = false;
+    }
+  }
+
+  onClickCancel() {
+    this.visible = false;
+  }
+}
+</script>
+
+<style>
+.dialog-overlay {
+  z-index: 50;
+  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/MembersList.vue

@@ -0,0 +1,522 @@
+<template>
+  <div class="space-y-4">
+    <!-- Loading State -->
+    <div
+      v-if="isLoading"
+      class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
+    >
+      <fa icon="spinner" class="fa-spin-pulse" />
+    </div>
+
+    <!-- Members List -->
+
+    <div v-else>
+      <div class="text-center text-red-600 py-4">
+        {{ decryptionErrorMessage() }}
+      </div>
+
+      <div v-if="missingMyself" class="py-4 text-red-600">
+        You are not currently admitted by the organizer.
+      </div>
+      <div v-if="!firstName" class="py-4 text-red-600">
+        Your name is not set, so others may not recognize you. Reload this page
+        to set it.
+      </div>
+
+      <div>
+        <span
+          v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer"
+          class="inline-flex items-center flex-wrap"
+        >
+          <span class="inline-flex items-center">
+            &bull; Click
+            <span
+              class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
+            >
+              <fa icon="plus" class="text-sm" />
+            </span>
+            /
+            <span
+              class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
+            >
+              <fa icon="minus" class="text-sm" />
+            </span>
+            to add/remove them to/from the meeting.
+          </span>
+        </span>
+      </div>
+      <div>
+        <span
+          v-if="membersToShow().length > 0"
+          class="inline-flex items-center"
+        >
+          &bull; Click
+          <span
+            class="mx-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600"
+          >
+            <fa icon="circle-user" class="text-xl" />
+          </span>
+          to add them to your contacts.
+        </span>
+      </div>
+
+      <div class="flex justify-center">
+        <!-- always have at least one refresh button even without members in case the organizer changes the password -->
+        <button
+          @click="fetchMembers"
+          class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
+          title="Refresh members list"
+        >
+          <fa icon="rotate" :class="{ 'fa-spin': isLoading }" />
+        </button>
+      </div>
+      <div
+        v-for="member in membersToShow()"
+        :key="member.member.memberId"
+        class="mt-2 p-4 bg-gray-50 rounded-lg"
+      >
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <h3 class="text-lg font-medium">{{ member.name }}</h3>
+            <div
+              v-if="!getContactFor(member.did) && member.did !== activeDid"
+              class="flex justify-end"
+            >
+              <button
+                @click="addAsContact(member)"
+                class="ml-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 transition-colors"
+                title="Add as contact"
+              >
+                <fa icon="circle-user" class="text-xl" />
+              </button>
+            </div>
+            <button
+              v-if="member.did !== activeDid"
+              @click="
+                informAboutAddingContact(
+                  getContactFor(member.did) !== undefined,
+                )
+              "
+              class="ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors"
+              title="Contact info"
+            >
+              <fa icon="circle-info" class="text-base" />
+            </button>
+          </div>
+          <div class="flex">
+            <span
+              v-if="
+                showOrganizerTools && isOrganizer && member.did !== activeDid
+              "
+              class="flex items-center"
+            >
+              <button
+                @click="checkWhetherContactBeforeAdmitting(member)"
+                class="mr-2 w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
+                :title="
+                  member.member.admitted ? 'Remove member' : 'Admit member'
+                "
+              >
+                <fa
+                  :icon="member.member.admitted ? 'minus' : 'plus'"
+                  class="text-sm"
+                />
+              </button>
+              <button
+                @click="informAboutAdmission()"
+                class="mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors"
+                title="Admission info"
+              >
+                <fa icon="circle-info" class="text-base" />
+              </button>
+            </span>
+          </div>
+        </div>
+        <p class="text-sm text-gray-600 truncate">
+          {{ member.did }}
+        </p>
+      </div>
+      <div v-if="membersToShow().length > 0" class="flex justify-center mt-4">
+        <button
+          @click="fetchMembers"
+          class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
+          title="Refresh members list"
+        >
+          <fa icon="rotate" :class="{ 'fa-spin': isLoading }" />
+        </button>
+      </div>
+
+      <p v-if="members.length === 0" class="text-gray-500 py-4">
+        No members have joined this meeting yet
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-facing-decorator";
+
+import {
+  logConsoleAndDb,
+  retrieveSettingsForActiveAccount,
+  db,
+} from "@/db/index";
+import {
+  errorStringForLog,
+  getHeaders,
+  register,
+  serverMessageForUser,
+} from "@/libs/endorserServer";
+import { decryptMessage } from "@/libs/crypto";
+import { Contact } from "@/db/tables/contacts";
+import * as libsUtil from "@/libs/util";
+import { NotificationIface } from "@/constants/app";
+
+interface Member {
+  admitted: boolean;
+  content: string;
+  memberId: number;
+}
+
+interface DecryptedMember {
+  member: Member;
+  name: string;
+  did: string;
+  isRegistered: boolean;
+}
+
+@Component
+export default class MembersList extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  libsUtil = libsUtil;
+
+  @Prop({ required: true }) password!: string;
+  @Prop({ default: false }) showOrganizerTools!: boolean;
+
+  decryptedMembers: DecryptedMember[] = [];
+  firstName = "";
+  isLoading = true;
+  isOrganizer = false;
+  members: Member[] = [];
+  missingPassword = false;
+  missingMyself = false;
+  activeDid = "";
+  apiServer = "";
+  contacts: Array<Contact> = [];
+
+  async created() {
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.apiServer = settings.apiServer || "";
+    this.firstName = settings.firstName || "";
+    await this.fetchMembers();
+    await this.loadContacts();
+  }
+
+  async fetchMembers() {
+    try {
+      this.isLoading = true;
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.get(
+        `${this.apiServer}/api/partner/groupOnboardMembers`,
+        { headers },
+      );
+
+      if (response.data && response.data.data) {
+        this.members = response.data.data;
+        await this.decryptMemberContents();
+      }
+    } catch (error) {
+      logConsoleAndDb(
+        "Error fetching members: " + errorStringForLog(error),
+        true,
+      );
+      this.$emit(
+        "error",
+        serverMessageForUser(error) || "Failed to fetch members.",
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  async decryptMemberContents() {
+    this.decryptedMembers = [];
+
+    if (!this.password) {
+      this.missingPassword = true;
+      return;
+    }
+
+    let isFirstEntry = true,
+      foundMyself = false;
+    for (const member of this.members) {
+      try {
+        const decryptedContent = await decryptMessage(
+          member.content,
+          this.password,
+        );
+        const content = JSON.parse(decryptedContent);
+
+        this.decryptedMembers.push({
+          member: member,
+          name: content.name,
+          did: content.did,
+          isRegistered: !!content.isRegistered,
+        });
+        if (isFirstEntry && content.did === this.activeDid) {
+          this.isOrganizer = true;
+        }
+        if (content.did === this.activeDid) {
+          foundMyself = true;
+        }
+      } catch (error) {
+        // do nothing, relying on the count of members to determine if there was an error
+      }
+      isFirstEntry = false;
+    }
+    this.missingMyself = !foundMyself;
+  }
+
+  decryptionErrorMessage(): string {
+    if (this.isOrganizer) {
+      if (this.decryptedMembers.length < this.members.length) {
+        return "Some members have data that cannot be decrypted with that password.";
+      } else {
+        // the lists must be equal
+        return "";
+      }
+    } else {
+      // non-organizers should only see problems if the first (organizer) member is not decrypted
+      if (
+        this.decryptedMembers.length === 0 ||
+        this.decryptedMembers[0].member.memberId !== this.members[0].memberId
+      ) {
+        return "Your password is not the same as the organizer. Reload or have them check their password.";
+      } else {
+        // the first (organizer) member was decrypted OK
+        return "";
+      }
+    }
+  }
+
+  membersToShow(): DecryptedMember[] {
+    if (this.isOrganizer) {
+      if (this.showOrganizerTools) {
+        return this.decryptedMembers;
+      } else {
+        return this.decryptedMembers.filter(
+          (member: DecryptedMember) => member.member.admitted,
+        );
+      }
+    }
+    // non-organizers only get visible members from server
+    return this.decryptedMembers;
+  }
+
+  informAboutAdmission() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Admission info",
+        text: "This is to register people in Time Safari and to admit them to the meeting. A '+' symbol means they are not yet admitted and you can register and admit them. A '-' means you can remove them, but they will stay registered.",
+      },
+      10000,
+    );
+  }
+
+  informAboutAddingContact(contactImportedAlready: boolean) {
+    if (contactImportedAlready) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "info",
+          title: "Contact Exists",
+          text: "They are in your contacts. If you want to remove them, you must do that from the contacts screen.",
+        },
+        10000,
+      );
+    } else {
+      this.$notify(
+        {
+          group: "alert",
+          type: "info",
+          title: "Contact Available",
+          text: "This is to add them to your contacts. If you want to remove them later, you must do that from the contacts screen.",
+        },
+        10000,
+      );
+    }
+  }
+
+  async loadContacts() {
+    this.contacts = await db.contacts.toArray();
+  }
+
+  getContactFor(did: string): Contact | undefined {
+    return this.contacts.find((contact) => contact.did === did);
+  }
+
+  checkWhetherContactBeforeAdmitting(decrMember: DecryptedMember) {
+    const contact = this.getContactFor(decrMember.did);
+    if (!decrMember.member.admitted && !contact) {
+      // If not a contact, show confirmation dialog
+      this.$notify(
+        {
+          group: "modal",
+          type: "confirm",
+          title: "Add as Contact First?",
+          text: "This person is not in your contacts. Would you like to add them as a contact first?",
+          yesText: "Add as Contact",
+          noText: "Skip Adding Contact",
+          onYes: async () => {
+            await this.addAsContact(decrMember);
+            // After adding as contact, proceed with admission
+            await this.toggleAdmission(decrMember);
+          },
+          onNo: async () => {
+            // If they choose not to add as contact, show second confirmation
+            this.$notify(
+              {
+                group: "modal",
+                type: "confirm",
+                title: "Continue Without Adding?",
+                text: "Are you sure you want to proceed with admission? If they are not a contact, you will not know their name after this meeting.",
+                yesText: "Continue",
+                onYes: async () => {
+                  await this.toggleAdmission(decrMember);
+                },
+                onCancel: async () => {
+                  // Do nothing, effectively canceling the operation
+                },
+              },
+              -1,
+            );
+          },
+        },
+        -1,
+      );
+    } else {
+      // If already a contact, proceed directly with admission
+      this.toggleAdmission(decrMember);
+    }
+  }
+
+  async toggleAdmission(decrMember: DecryptedMember) {
+    try {
+      const headers = await getHeaders(this.activeDid);
+      await this.axios.put(
+        `${this.apiServer}/api/partner/groupOnboardMember/${decrMember.member.memberId}`,
+        { admitted: !decrMember.member.admitted },
+        { headers },
+      );
+      // Update local state
+      decrMember.member.admitted = !decrMember.member.admitted;
+
+      const oldContact = this.getContactFor(decrMember.did);
+      // if admitted, now register that user if they are not registered
+      if (
+        decrMember.member.admitted &&
+        !decrMember.isRegistered &&
+        !oldContact?.registered
+      ) {
+        const contactOldOrNew: Contact = oldContact || {
+          did: decrMember.did,
+          name: decrMember.name,
+        };
+        try {
+          const result = await register(
+            this.activeDid,
+            this.apiServer,
+            this.axios,
+            contactOldOrNew,
+          );
+          if (result.success) {
+            decrMember.isRegistered = true;
+            if (oldContact) {
+              await db.contacts.update(decrMember.did, { registered: true });
+              oldContact.registered = true;
+            }
+            this.$notify(
+              {
+                group: "alert",
+                type: "success",
+                title: "Registered",
+                text: "Besides being admitted, they were also registered.",
+              },
+              3000,
+            );
+          } else {
+            throw result;
+          }
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } catch (error: any) {
+          // registration failure is likely explained by a message from the server
+          const additionalInfo =
+            serverMessageForUser(error) || error?.error || "";
+          this.$notify(
+            {
+              group: "alert",
+              type: "warning",
+              title: "Registration failed",
+              text:
+                "They were admitted to the meeting. However, registration failed. You can register them from the contacts screen. " +
+                additionalInfo,
+            },
+            12000,
+          );
+        }
+      }
+    } catch (error) {
+      logConsoleAndDb(
+        "Error toggling admission: " + errorStringForLog(error),
+        true,
+      );
+      this.$emit(
+        "error",
+        serverMessageForUser(error) ||
+          "Failed to update member admission status.",
+      );
+    }
+  }
+
+  async addAsContact(member: DecryptedMember) {
+    try {
+      const newContact = {
+        did: member.did,
+        name: member.name,
+      };
+
+      await db.contacts.add(newContact);
+      this.contacts.push(newContact);
+
+      this.$notify(
+        {
+          group: "alert",
+          type: "success",
+          title: "Contact Added",
+          text: "They were added to your contacts.",
+        },
+        3000,
+      );
+    } catch (err) {
+      logConsoleAndDb("Error adding contact: " + errorStringForLog(err), true);
+      let message = "An error prevented adding this contact.";
+      if (err instanceof Error && err.message?.indexOf("already exists") > -1) {
+        message = "This person is already in your contact list.";
+      }
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Contact Not Added",
+          text: message,
+        },
+        5000,
+      );
+    }
+  }
+}
+</script>

src/components/OfferDialog.vue

@@ -6,7 +6,7 @@
         type="text"
         data-testId="inputDescription"
         class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
-        placeholder="Description, prerequisites, terms, etc."
+        placeholder="Description of what is offered"
         v-model="description"
       />
       <div class="flex flex-row mt-2">
@@ -83,17 +83,19 @@
 import { Vue, Component, Prop } from "vue-facing-decorator";
 
 import { NotificationIface } from "@/constants/app";
-import { createAndSubmitOffer } from "@/libs/endorserServer";
+import {
+  createAndSubmitOffer,
+  serverMessageForUser,
+} from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
-import { db } from "@/db/index";
+import { retrieveSettingsForActiveAccount } from "@/db/index";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 
 @Component
 export default class OfferDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
-  @Prop projectId?;
+  @Prop projectId?: string;
-  @Prop projectName?;
+  @Prop projectName?: string;
 
   activeDid = "";
   apiServer = "";
@@ -113,10 +115,9 @@ export default class OfferDialog extends Vue {
       this.recipientDid = recipientDid;
       this.recipientName = recipientName;
 
-      await db.open();
+      const settings = await retrieveSettingsForActiveAccount();
-      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+      this.apiServer = settings.apiServer || "";
-      this.apiServer = settings?.apiServer || "";
+      this.activeDid = settings.activeDid || "";
-      this.activeDid = settings?.activeDid || "";
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
@@ -209,9 +210,9 @@ export default class OfferDialog extends Vue {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "You must select an identifier before you can record an offer.",
+          text: "You must select an identity before you can record an offer.",
         },
-        -1,
+        7000,
       );
       return;
     }
@@ -237,6 +238,7 @@ export default class OfferDialog extends Vue {
         description,
         amount,
         unitCode,
+        "",
         expirationDateInput,
         this.recipientDid,
         this.projectId,
@@ -265,7 +267,7 @@ export default class OfferDialog extends Vue {
             title: "Success",
             text: "That offer was recorded.",
           },
-          10000,
+          5000,
         );
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -305,9 +307,9 @@ export default class OfferDialog extends Vue {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getOfferCreationErrorMessage(result: any) {
     return (
+      serverMessageForUser(result) ||
       result.error?.userMessage ||
-      result.error?.error ||
+      result.error?.error
-      result.response?.data?.error?.message
     );
   }
 }
@@ -315,6 +317,7 @@ export default class OfferDialog extends Vue {
 
 <style>
 .dialog-overlay {
+  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;

src/components/OnboardingDialog.vue

@@ -0,0 +1,286 @@
+<!-- similar to ContactNameDialog -->
+<template>
+  <div v-if="visible" class="dialog-overlay">
+    <div v-if="page === OnboardPage.Home" class="dialog">
+      <h1 class="text-xl font-bold text-center mb-4 relative">
+        Welcome to Time Safari
+        <br />
+        - Showcasing Gratitude & Magnifying Time
+        <div
+          class="text-lg text-center leading-none absolute right-0 -top-1"
+          @click="onClickClose(true)"
+        >
+          <fa icon="xmark" class="w-[1em]" />
+        </div>
+      </h1>
+
+      <p v-if="isRegistered" class="mt-4">
+        You can now log things that you've seen:
+        <span v-if="numContacts > 0">
+          click on any name (like {{ firstContactName }}) or
+        </span>
+        click on the
+        <span class="bg-green-600 text-white rounded-full">
+          <fa icon="plus" class="fa-fw" />
+        </span>
+        button to express your appreciation for... whatever -- maybe thanks for
+        showing you all these fascinating stories of
+        <em>gratitude</em>.
+      </p>
+      <p v-else class="mt-4">
+        The feed underneath this pop-up shows the latest gifts that others have
+        recognized. Once someone registers you, you can log your appreciation,
+        too.
+      </p>
+
+      <p class="mt-4">
+        The more you illuminate cool things people are doing, the more you
+        attract people to work with you.
+      </p>
+
+      <p class="mt-4 flex items-center">
+        The
+        <fa
+          icon="house-chimney"
+          class="ml-1 mr-1 text-lg text-white bg-slate-400 px-2 py-2 rounded"
+        />
+        button below brings you back to this feed screen.
+      </p>
+
+      <div class="mt-8">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <button
+            type="button"
+            data-testId="closeOnboardingAndFinish"
+            class="block w-full text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+            @click="onClickClose(true)"
+          >
+            That's enough help, thanks.
+          </button>
+          <button
+            type="button"
+            class="block w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+            @click="$router.push({ name: 'discover' })"
+          >
+            Show me more!
+          </button>
+        </div>
+      </div>
+
+      <p class="mt-4 flex items-center">
+        To see these instructions and more, click above on
+        <span
+          class="ml-1 mr-1 text-xs uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md"
+        >
+          Help
+        </span>
+      </p>
+    </div>
+
+    <div v-if="page === OnboardPage.Discover" class="dialog">
+      <h1 class="text-xl font-bold text-center mb-4 relative">
+        Offer to Interesting Events & People
+        <div
+          class="text-lg text-center leading-none absolute right-0 -top-1"
+          @click="onClickClose(true)"
+        >
+          <fa icon="xmark" class="w-[1em]" />
+        </div>
+      </h1>
+
+      <p>
+        Once you've seen things that others have given or done, you may find
+        ways you want to contribute, too. It turns out others have proposed
+        activities together, and this page is where you find projects.
+      </p>
+
+      <p class="mt-4">
+        Search for a topic, or search around your neighborhod under "Nearby".
+      </p>
+
+      <p class="mt-4">
+        When you find some that seem interesting, you can offer your help. You
+        are welcome to make your offer conditional, for example if they get 2
+        other people to help besides you.
+      </p>
+
+      <p class="mt-4 flex items-center">
+        The
+        <fa
+          icon="magnifying-glass"
+          class="ml-1 mr-1 text-lg text-white bg-slate-400 px-2 py-2 rounded"
+        />
+        button below brings you to this discovery screen.
+      </p>
+
+      <div class="mt-8">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <button
+            type="button"
+            data-testId="closeOnboardingAndFinish"
+            class="block w-full text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+            @click="onClickClose(true)"
+          >
+            No more help, thanks.
+          </button>
+          <button
+            type="button"
+            class="block w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+            @click="$router.push({ name: 'projects' })"
+          >
+            Show me even more.
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="page === OnboardPage.Create" class="dialog">
+      <h1 class="text-xl font-bold text-center mb-4 relative">
+        Fish for Others with Your Projects
+        <div
+          class="text-lg text-center leading-none absolute right-0 -top-1"
+          @click="onClickClose(true)"
+        >
+          <fa icon="xmark" class="w-[1em]" />
+        </div>
+      </h1>
+
+      <p class="relative">
+        Now you can take a turn: click on the
+        <span class="bg-green-600 text-white rounded-full">
+          <fa icon="plus" class="fa-fw" />
+        </span>
+        button to throw out projects of your own... anything you'd like to see
+        happen. If your first idea doesn't catch anyone, try, try again... and
+        let others know that this is a good place to find help.
+      </p>
+
+      <p class="mt-4 flex items-center">
+        The
+        <fa
+          icon="hand"
+          class="ml-1 mr-1 text-lg text-white bg-slate-400 px-2 py-2 rounded"
+        />
+        button below brings you here to see your ideas.
+      </p>
+
+      <p class="mt-4">
+        By the way, one good way to get to know your neighbors and their
+        interests is to offer time directly to them. You can do this on the
+        contacts screen
+        <fa icon="users" class="text-slate-500" />
+        which is a great way to get to know a neighbor's interests.
+      </p>
+
+      <div class="mt-8">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <button
+            type="button"
+            data-testId="closeOnboardingAndFinish"
+            class="block w-full text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+            @click="onClickClose(true, true)"
+          >
+            Let's go!
+            <br />
+            See & record gratitude.
+          </button>
+          <button
+            type="button"
+            class="block w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+            @click="$router.push({ name: 'help' })"
+          >
+            I want to read more Help.
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
+
+import { NotificationIface } from "@/constants/app";
+import {
+  db,
+  retrieveSettingsForActiveAccount,
+  updateAccountSettings,
+} from "@/db/index";
+import { OnboardPage } from "@/libs/util";
+
+@Component({
+  computed: {
+    OnboardPage() {
+      return OnboardPage;
+    },
+  },
+  components: { OnboardPage },
+})
+export default class OnboardingDialog extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid = "";
+  firstContactName = null;
+  givenName = "";
+  isRegistered = false;
+  numContacts = 0;
+  page = OnboardPage.Home;
+  visible = false;
+
+  async open(page: OnboardPage) {
+    this.page = page;
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.isRegistered = !!settings.isRegistered;
+    const contacts = await db.contacts.toArray();
+    this.numContacts = contacts.length;
+    if (this.numContacts > 0) {
+      this.firstContactName = contacts[0].name;
+    }
+    this.visible = true;
+    if (this.page === OnboardPage.Create) {
+      // we'll assume that they've been through all the other pages
+      await updateAccountSettings(this.activeDid, {
+        finishedOnboarding: true,
+      });
+    }
+  }
+
+  async onClickClose(done?: boolean, goHome?: boolean) {
+    this.visible = false;
+    if (done) {
+      await updateAccountSettings(this.activeDid, {
+        finishedOnboarding: true,
+      });
+      if (goHome) {
+        (this.$router as Router).push({ name: "home" });
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.dialog-overlay {
+  z-index: 40;
+  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/PhotoDialog.vue

@@ -76,7 +76,8 @@
       </div>
       <div v-else ref="cameraContainer">
         <!--
-          Camera "resolution" doesn't change how it shows on screen but rather stretches the result, eg the following which just stretches it vertically:
+          Camera "resolution" doesn't change how it shows on screen but rather stretches the result,
+          eg. the following which just stretches it vertically:
           :resolution="{ width: 375, height: 812 }"
         -->
         <camera
@@ -126,8 +127,7 @@ import { Component, Vue } from "vue-facing-decorator";
 import VuePictureCropper, { cropper } from "vue-picture-cropper";
 
 import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
-import { db } from "@/db/index";
+import { retrieveSettingsForActiveAccount } from "@/db/index";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 
 @Component({ components: { Camera, VuePictureCropper } })
@@ -151,9 +151,8 @@ export default class PhotoDialog extends Vue {
 
   async mounted() {
     try {
-      await db.open();
+      const settings = await retrieveSettingsForActiveAccount();
-      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+      this.activeDid = settings.activeDid || "";
-      this.activeDid = settings?.activeDid || "";
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       console.error("Error retrieving settings from database:", err);
@@ -410,6 +409,7 @@ export default class PhotoDialog extends Vue {
 
 <style>
 .dialog-overlay {
+  z-index: 60;
   position: fixed;
   top: 0;
   left: 0;

src/components/PushNotificationPermission.vue

@@ -0,0 +1,574 @@
+<template>
+  <transition
+    enter-active-class="transform ease-out duration-300 transition"
+    enter-from-class="translate-y-2 opacity-0 sm:translate-y-4"
+    enter-to-class="translate-y-0 opacity-100 sm:translate-y-0"
+    leave-active-class="transition ease-in duration-500"
+    leave-from-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <div
+      v-if="isVisible"
+      class="fixed z-[100] top-0 inset-x-0 w-full 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 && vapidKey" class="text-lg mb-4">
+            <span v-if="pushType === DAILY_CHECK_TITLE">
+              Would you like to be notified of new activity, up to once a day?
+            </span>
+            <span v-else>
+              Would you like to get a reminder message once a day?
+            </span>
+          </p>
+          <p v-else class="text-lg mb-4">
+            Waiting for system initialization, which may take up to 5 seconds...
+            <fa icon="spinner" spin />
+          </p>
+
+          <div v-if="serviceWorkerReady && vapidKey">
+            <div v-if="pushType === DAILY_CHECK_TITLE">
+              <span>Yes, send me a message when there is new data for me</span>
+            </div>
+            <div v-else>
+              <span>Yes, send me this message:</span>
+              <!-- eslint-disable -->
+              <textarea
+                type="text"
+                id="push-message"
+                v-model="messageInput"
+                class="rounded border border-slate-400 mt-2 px-2 py-2 w-full"
+                maxlength="100"
+              ></textarea
+              >
+              <!-- eslint-enable -->
+              <span class="w-full flex justify-between text-xs text-slate-500">
+                <span></span>
+                <span>(100 characters max)</span>
+              </span>
+            </div>
+
+            <div>
+              <span class="flex flex-row justify-center">
+                <span class="mt-2">... at: </span>
+                <input
+                  type="number"
+                  @change="checkHourInput"
+                  class="rounded-l border border-r-0 border-slate-400 ml-2 mt-2 px-2 py-2 text-center w-20"
+                  v-model="hourInput"
+                />
+                <input
+                  type="number"
+                  @change="checkMinuteInput"
+                  class="border border-slate-400 mt-2 px-2 py-2 text-center w-20"
+                  v-model="minuteInput"
+                />
+                <span
+                  class="rounded-r border border-slate-400 bg-slate-200 text-center text-blue-500 mt-2 px-2 py-2 w-20"
+                  @click="hourAm = !hourAm"
+                >
+                  <span v-if="hourAm"> AM <fa icon="chevron-down" /> </span>
+                  <span v-else> PM <fa icon="chevron-up" /> </span>
+                </span>
+              </span>
+            </div>
+            <button
+              class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white mt-2 px-2 py-2 rounded-md"
+              @click="
+                close();
+                turnOnNotifications();
+              "
+            >
+              Turn on Daily Message
+            </button>
+          </div>
+
+          <button
+            @click="close()"
+            class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white mt-4 px-2 py-2 rounded-md"
+          >
+            No, Not Now
+          </button>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+
+import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app";
+import {
+  logConsoleAndDb,
+  retrieveSettingsForActiveAccount,
+  secretDB,
+} from "@/db/index";
+import { MASTER_SECRET_KEY } from "@/db/tables/secret";
+import { urlBase64ToUint8Array } from "@/libs/crypto/vc/util";
+import * as libsUtil from "@/libs/util";
+
+// Example interface for error
+interface ErrorResponse {
+  message: string;
+}
+
+// PushSubscriptionJSON is defined in the Push API https://www.w3.org/TR/push-api/#dom-pushsubscriptionjson
+interface PushSubscriptionWithTime extends PushSubscriptionJSON {
+  message?: string;
+  notifyTime: { utcHour: number; minute: number };
+  notifyType: string;
+}
+
+interface ServiceWorkerMessage {
+  type: string;
+  data: string;
+}
+
+interface ServiceWorkerResponse {
+  // Define the properties and their types
+  success: boolean;
+  message?: string;
+}
+
+interface VapidResponse {
+  data: {
+    vapidKey: string;
+  };
+}
+
+@Component
+export default class PushNotificationPermission extends Vue {
+  // eslint-disable-next-line
+  $notify!: (notification: NotificationIface, timeout?: number) => Promise<() => void>;
+
+  DAILY_CHECK_TITLE = libsUtil.DAILY_CHECK_TITLE;
+  DIRECT_PUSH_TITLE = libsUtil.DIRECT_PUSH_TITLE;
+
+  callback: (success: boolean, time: string, message?: string) => void =
+    () => {};
+  hourAm = true;
+  hourInput = "8";
+  isVisible = false;
+  messageInput = "";
+  minuteInput = "00";
+  pushType = "";
+  serviceWorkerReady = false;
+  vapidKey = "";
+
+  async open(
+    pushType: string,
+    callback?: (success: boolean, time: string, message?: string) => void,
+  ) {
+    this.callback = callback || this.callback;
+    this.isVisible = true;
+    this.pushType = pushType;
+    try {
+      const settings = await retrieveSettingsForActiveAccount();
+      let pushUrl = DEFAULT_PUSH_SERVER;
+      if (settings?.webPushServer) {
+        pushUrl = settings.webPushServer;
+      }
+
+      if (pushUrl.startsWith("http://localhost")) {
+        logConsoleAndDb("Not checking for VAPID in this local environment.");
+      } else {
+        let responseData = "";
+        await this.axios
+          .get(pushUrl + "/web-push/vapid")
+          .then((response: VapidResponse) => {
+            this.vapidKey = response.data?.vapidKey || "";
+            logConsoleAndDb("Got vapid key: " + this.vapidKey);
+            responseData = JSON.stringify(response.data);
+            navigator.serviceWorker?.addEventListener(
+              "controllerchange",
+              () => {
+                logConsoleAndDb(
+                  "New service worker is now controlling the page",
+                );
+              },
+            );
+          });
+        if (!this.vapidKey) {
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error Setting Notifications",
+              text: "Could not set notifications.",
+            },
+            5000,
+          );
+          logConsoleAndDb(
+            "Error Setting Notifications: web push server response didn't have vapidKey: " +
+              responseData,
+            true,
+          );
+        }
+      }
+    } catch (error) {
+      if (window.location.host.startsWith("localhost")) {
+        logConsoleAndDb(
+          "Ignoring the error getting VAPID for local development.",
+        );
+      } else {
+        logConsoleAndDb(
+          "Got an error initializing notifications: " + JSON.stringify(error),
+          true,
+        );
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error Setting Notifications",
+            text: "Got an error setting notifications.",
+          },
+          5000,
+        );
+      }
+    }
+    // there may be a long pause here on first initialization
+    navigator.serviceWorker?.ready.then(() => {
+      this.serviceWorkerReady = true;
+    });
+
+    if (this.pushType === this.DIRECT_PUSH_TITLE) {
+      this.messageInput =
+        "Click to share some gratitude with the world -- even if they're unnamed.";
+      // focus on the message input
+      setTimeout(function () {
+        document.getElementById("push-message")?.focus();
+      }, 100);
+    } else {
+      // not critical but doesn't make sense in a daily check
+      this.messageInput = "";
+    }
+  }
+
+  private close() {
+    this.isVisible = false;
+  }
+
+  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 async askPermission(): Promise<NotificationPermission> {
+    // console.log(
+    //   "Requesting permission for notifications: " + JSON.stringify(navigator),
+    // );
+    if (
+      !("serviceWorker" in navigator && navigator.serviceWorker?.controller)
+    ) {
+      return Promise.reject("Service worker not available.");
+    }
+
+    await secretDB.open();
+    const secret = (await secretDB.secret.get(MASTER_SECRET_KEY))?.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) => {
+      logConsoleAndDb(
+        "Response from service worker: " + JSON.stringify(response),
+      );
+    });
+  }
+
+  private checkNotificationSupport(): Promise<void> {
+    if (!("Notification" in window)) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Browser Notifications Are Not Supported",
+          text: "This browser does not support notifications.",
+        },
+        3000,
+      );
+      return Promise.reject("This browser does not support notifications.");
+    }
+    if (window.Notification.permission === "granted") {
+      return Promise.resolve();
+    }
+    return Promise.resolve();
+  }
+
+  private requestNotificationPermission(): Promise<NotificationPermission> {
+    return window.Notification.requestPermission().then(
+      (permission: string) => {
+        if (permission !== "granted") {
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error Requesting Notification Permission",
+              text:
+                "Allow this app permission to make notifications for personal reminders." +
+                " You can adjust them at any time in your settings.",
+            },
+            -1,
+          );
+          throw new Error("Permission was not granted to this app.");
+        }
+        return permission;
+      },
+    );
+  }
+
+  private checkHourInput() {
+    const hourNum = parseInt(this.hourInput);
+    if (isNaN(hourNum)) {
+      this.hourInput = "12";
+    } else if (hourNum < 1) {
+      this.hourInput = "12";
+      this.hourAm = !this.hourAm;
+    } else if (hourNum > 12) {
+      this.hourInput = "1";
+      this.hourAm = !this.hourAm;
+    } else {
+      this.hourInput = hourNum.toString();
+    }
+  }
+
+  private checkMinuteInput() {
+    const minuteNum = parseInt(this.minuteInput);
+    if (isNaN(minuteNum)) {
+      this.minuteInput = "00";
+    } else if (minuteNum < 0) {
+      this.minuteInput = "59";
+    } else if (minuteNum < 10) {
+      this.minuteInput = "0" + minuteNum;
+    } else if (minuteNum > 59) {
+      this.minuteInput = "00";
+    } else {
+      this.minuteInput = minuteNum.toString();
+    }
+  }
+
+  private async turnOnNotifications() {
+    let notifyCloser = () => {};
+    return this.askPermission()
+      .then((permission) => {
+        logConsoleAndDb("Permission granted: " + JSON.stringify(permission));
+
+        // Call the function and handle promises
+        return this.subscribeToPush();
+      })
+      .then(() => {
+        logConsoleAndDb("Subscribed successfully.");
+        return navigator.serviceWorker?.ready;
+      })
+      .then((registration) => {
+        return registration.pushManager.getSubscription();
+      })
+      .then(async (subscription) => {
+        if (subscription) {
+          notifyCloser = 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,
+          );
+          // we already checked that this is a valid hour number
+          const rawHourNum = libsUtil.numberOrZero(this.hourInput);
+          const adjHourNum = this.hourAm
+            ? // If it's AM, then we'll change it to 0 for 12 AM but otherwise use rawHourNum
+              rawHourNum === 12
+              ? 0
+              : rawHourNum
+            : // Otherwise it's PM, so keep a 12 but otherwise add 12
+              rawHourNum === 12
+              ? 12
+              : rawHourNum + 12;
+          const hourNum = adjHourNum % 24; // probably unnecessary now
+          const utcHour =
+            hourNum + Math.round(new Date().getTimezoneOffset() / 60);
+          const finalUtcHour = (utcHour + (utcHour < 0 ? 24 : 0)) % 24;
+          const minuteNum = libsUtil.numberOrZero(this.minuteInput);
+          const utcMinute =
+            minuteNum + Math.round(new Date().getTimezoneOffset() % 60);
+          const finalUtcMinute = (utcMinute + (utcMinute < 0 ? 60 : 0)) % 60;
+
+          const subscriptionWithTime: PushSubscriptionWithTime = {
+            notifyTime: { utcHour: finalUtcHour, minute: finalUtcMinute },
+            notifyType: this.pushType,
+            message: this.messageInput,
+            ...subscription.toJSON(),
+          };
+          await this.sendSubscriptionToServer(subscriptionWithTime);
+          // To help investigate potential issues with this: https://firebase.google.com/docs/cloud-messaging/migrate-v1
+          logConsoleAndDb(
+            "Subscription data sent to server with endpoint: " +
+              subscription.endpoint,
+          );
+          return subscriptionWithTime;
+        } else {
+          throw new Error("Subscription object is not available.");
+        }
+      })
+      .then(async (subscription: PushSubscriptionWithTime) => {
+        logConsoleAndDb(
+          "Subscription data sent to server and all finished successfully.",
+        );
+        await libsUtil.sendTestThroughPushServer(subscription, true);
+        notifyCloser();
+        setTimeout(() => {
+          this.$notify(
+            {
+              group: "alert",
+              type: "success",
+              title: "Notification Is On",
+              text: "You should see at least one on your device; if not, check the 'Troubleshoot' link.",
+            },
+            7000,
+          );
+        }, 500);
+        const timeText =
+          // eslint-disable-next-line
+          this.hourInput + ":" + this.minuteInput + " " + (this.hourAm ? "AM" : "PM");
+        this.callback(true, timeText, this.messageInput);
+      })
+      .catch((error) => {
+        logConsoleAndDb(
+          "Got an error setting notification permissions: " +
+            " string " +
+            error.toString() +
+            " JSON " +
+            JSON.stringify(error),
+          true,
+        );
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error Setting Notification Permissions",
+            text: "Could not set notification permissions.",
+          },
+          3000,
+        );
+        // if we want to also unsubscribe, be sure to do that only if no other notification is active
+      });
+  }
+
+  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 (window.Notification.permission !== "granted") {
+        const errorMsg = "Notification permission not granted";
+        console.warn(errorMsg);
+        return reject(new Error(errorMsg));
+      }
+
+      const applicationServerKey = urlBase64ToUint8Array(this.vapidKey);
+      const options: PushSubscriptionOptions = {
+        userVisibleOnly: true,
+        applicationServerKey: applicationServerKey,
+      };
+
+      navigator.serviceWorker?.ready
+        .then((registration) => {
+          return registration.pushManager.subscribe(options);
+        })
+        .then((subscription) => {
+          logConsoleAndDb(
+            "Push subscription successful: " + JSON.stringify(subscription),
+          );
+          resolve();
+        })
+        .catch((error) => {
+          logConsoleAndDb(
+            "Push subscription failed: " +
+              JSON.stringify(error) +
+              " - " +
+              JSON.stringify(options),
+            true,
+          );
+
+          // Inform the user about the issue
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error Setting Push Notifications",
+              text:
+                "We encountered an issue setting up push notifications. " +
+                "If you wish to revoke notification permissions, please do so in your browser settings.",
+            },
+            -1,
+          );
+
+          reject(error);
+        });
+    });
+  }
+
+  private sendSubscriptionToServer(
+    subscription: PushSubscriptionWithTime,
+  ): Promise<void> {
+    logConsoleAndDb(
+      "About to send subscription... " + JSON.stringify(subscription),
+    );
+    return fetch("/web-push/subscribe", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(subscription),
+    }).then((response) => {
+      if (!response.ok) {
+        console.error("Bad response subscribing to web push: ", response);
+        throw new Error("Failed to send push subscription to server");
+      }
+      logConsoleAndDb("Push subscription sent to server successfully.");
+    });
+  }
+}
+</script>
+
+<style scoped>
+/* Add any specific styles for this component here */
+</style>

src/components/QuickNav.vue

@@ -11,8 +11,11 @@
           'text-slate-500': selected !== 'Home',
         }"
       >
-        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
+        <router-link :to="{ name: 'home' }" class="block text-center py-2 px-1">
-          <fa icon="house-chimney" class="fa-fw" />
+          <div class="flex flex-col items-center">
+            <fa icon="house-chimney" class="fa-fw" />
+            <span class="text-xs mt-1">feed</span>
+          </div>
         </router-link>
       </li>
       <!-- Search -->
@@ -26,9 +29,12 @@
       >
         <router-link
           :to="{ name: 'discover' }"
-          class="block text-center py-3 px-1"
+          class="block text-center py-2 px-1"
         >
-          <fa icon="magnifying-glass" class="fa-fw" />
+          <div class="flex flex-col items-center">
+            <fa icon="magnifying-glass" class="fa-fw" />
+            <span class="text-xs mt-1">search</span>
+          </div>
         </router-link>
       </li>
       <!-- Projects -->
@@ -42,9 +48,12 @@
       >
         <router-link
           :to="{ name: 'projects' }"
-          class="block text-center py-3 px-1"
+          class="block text-center py-2 px-1"
         >
-          <fa icon="hand" class="fa-fw" />
+          <div class="flex flex-col items-center">
+            <fa icon="hand" class="fa-fw" />
+            <span class="text-xs mt-1">your work</span>
+          </div>
         </router-link>
       </li>
       <!-- Contacts -->
@@ -58,9 +67,12 @@
       >
         <router-link
           :to="{ name: 'contacts' }"
-          class="block text-center py-3 px-1"
+          class="block text-center py-2 px-1"
         >
-          <fa icon="users" class="fa-fw" />
+          <div class="flex flex-col items-center">
+            <fa icon="users" class="fa-fw" />
+            <span class="text-xs mt-1">contacts</span>
+          </div>
         </router-link>
       </li>
       <!-- Profile -->
@@ -74,9 +86,18 @@
       >
         <router-link
           :to="{ name: 'account' }"
-          class="block text-center py-3 px-1"
+          class="block text-center py-2 px-1"
         >
-          <fa icon="circle-user" class="fa-fw" />
+          <div class="flex flex-col items-center">
+            <fa icon="circle-user" class="fa-fw" />
+            <!--
+             We used to say "account", so we'll keep that in the code,
+             but it isn't accurate because we don't hold anything for them.
+             We'll say "profile" to the users.
+             (Or: settings, face, registry, cache, repo, vault... or separate preferences from identity.)
+            -->
+            <span class="text-xs mt-1">profile</span>
+          </div>
         </router-link>
       </li>
     </ul>

src/components/TopMessage.vue

@@ -16,8 +16,7 @@
 import { Component, Vue, Prop } from "vue-facing-decorator";
 
 import { AppString, NotificationIface } from "@/constants/app";
-import { db } from "@/db/index";
+import { retrieveSettingsForActiveAccount } from "@/db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 
 @Component
 export default class TopMessage extends Vue {
@@ -29,17 +28,15 @@ export default class TopMessage extends Vue {
 
   async mounted() {
     try {
-      await db.open();
+      const settings = await retrieveSettingsForActiveAccount();
-
-      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
       if (
-        settings?.warnIfTestServer &&
+        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.warnIfProdServer &&
         settings.apiServer === AppString.PROD_ENDORSER_API_SERVER
       ) {
         const didPrefix = settings.activeDid?.slice(11, 15);

src/components/UserNameDialog.vue

@@ -0,0 +1,108 @@
+<!-- similar to ContactNameDialog -->
+<template>
+  <div v-if="visible" class="dialog-overlay">
+    <div class="dialog">
+      <h1 class="text-xl font-bold text-center mb-4">Set Your Name</h1>
+
+      {{ sharingExplanation }}
+      <input
+        type="text"
+        placeholder="Name"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+        v-model="givenName"
+      />
+
+      <div class="mt-8">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <button
+            type="button"
+            class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+            @click="onClickSaveChanges()"
+          >
+            Save
+          </button>
+          <button
+            type="button"
+            class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+            @click="onClickCancel()"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-facing-decorator";
+
+import { NotificationIface } from "@/constants/app";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+
+@Component
+export default class UserNameDialog extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  @Prop({
+    default:
+      "This is not sent to servers. It is only shared with people when you send it to them.",
+  })
+  sharingExplanation!: string;
+  @Prop({ default: false }) callbackOnCancel!: boolean;
+
+  callback: (name?: string) => void = () => {};
+  givenName = "";
+  visible = false;
+
+  /**
+   * @param aCallback - callback function for name, which may be ""
+   */
+  async open(aCallback?: (name?: string) => void) {
+    this.callback = aCallback || this.callback;
+    const settings = await retrieveSettingsForActiveAccount();
+    this.givenName = settings.firstName || "";
+    this.visible = true;
+  }
+
+  async onClickSaveChanges() {
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      firstName: this.givenName,
+    });
+    this.visible = false;
+    this.callback(this.givenName);
+  }
+
+  onClickCancel() {
+    this.visible = false;
+    if (this.callbackOnCancel) {
+      this.callback();
+    }
+  }
+}
+</script>
+
+<style>
+.dialog-overlay {
+  z-index: 50;
+  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/World/components/objects/landmarks.js

@@ -3,8 +3,7 @@ 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 { db } from "@/db";
+import { retrieveSettingsForActiveAccount } from "@/db";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { getHeaders } from "@/libs/endorserServer";
 
 const ANIMATION_DURATION_SECS = 10;
@@ -14,10 +13,9 @@ export async function loadLandmarks(vue, world, scene, loop) {
   vue.setWorldProperty("animationDurationSeconds", ANIMATION_DURATION_SECS);
 
   try {
-    await db.open();
+    const settings = await retrieveSettingsForActiveAccount();
-    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    const activeDid = settings.activeDid || "";
-    const activeDid = settings?.activeDid || "";
+    const apiServer = settings.apiServer;
-    const apiServer = settings?.apiServer;
     const headers = await getHeaders(activeDid);
 
     const url = apiServer + "/api/v2/report/claims?claimType=GiveAction";

src/constants/app.ts

@@ -12,17 +12,24 @@ export enum AppString {
   TEST_ENDORSER_API_SERVER = "https://test-api.endorser.ch",
   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",
-
   PROD_IMAGE_API_SERVER = "https://image-api.timesafari.app",
   TEST_IMAGE_API_SERVER = "https://test-image-api.timesafari.app",
   LOCAL_IMAGE_API_SERVER = "http://localhost:3001",
 
+  PROD_PARTNER_API_SERVER = "https://partner-api.endorser.ch",
+  TEST_PARTNER_API_SERVER = "https://test-partner-api.endorser.ch",
+  LOCAL_PARTNER_API_SERVER = LOCAL_ENDORSER_API_SERVER,
+
+  PROD_PUSH_SERVER = "https://timesafari.app",
+  TEST1_PUSH_SERVER = "https://test.timesafari.app",
+  TEST2_PUSH_SERVER = "https://timesafari-pwa.anomalistlabs.com",
+
   NO_CONTACT_NAME = "(no name)",
 }
 
+export const APP_SERVER =
+  import.meta.env.VITE_APP_SERVER || "https://timesafari.app";
+
 export const DEFAULT_ENDORSER_API_SERVER =
   import.meta.env.VITE_DEFAULT_ENDORSER_API_SERVER ||
   AppString.TEST_ENDORSER_API_SERVER;
@@ -31,6 +38,10 @@ export const DEFAULT_IMAGE_API_SERVER =
   import.meta.env.VITE_DEFAULT_IMAGE_API_SERVER ||
   AppString.TEST_IMAGE_API_SERVER;
 
+export const DEFAULT_PARTNER_API_SERVER =
+  import.meta.env.VITE_DEFAULT_PARTNER_API_SERVER ||
+  AppString.TEST_PARTNER_API_SERVER;
+
 export const DEFAULT_PUSH_SERVER =
   window.location.protocol + "//" + window.location.host;
 
@@ -41,16 +52,17 @@ export const PASSKEYS_ENABLED =
 
 /**
  * The possible values for "group" and "type" are in App.vue.
- * From the notiwind package
+ * Some of this comes from the notiwind package, some is custom.
  */
 export interface NotificationIface {
   group: string; // "alert" | "modal"
   type: string; // "toast" | "info" | "success" | "warning" | "danger"
   title: string;
   text?: string;
+  callback?: (success: boolean) => Promise<void>; // if this triggered an action
   noText?: string;
-  onCancel?: (stopAsking: boolean) => Promise<void>;
+  onCancel?: (stopAsking?: boolean) => Promise<void>;
-  onNo?: (stopAsking: boolean) => Promise<void>;
+  onNo?: (stopAsking?: boolean) => Promise<void>;
   onYes?: () => Promise<void>;
   promptToStopAsking?: boolean;
   yesText?: string;

src/db/index.ts

@@ -1,8 +1,11 @@
 import BaseDexie, { Table } from "dexie";
 import { encrypted, Encryption } from "@pvermeer/dexie-encrypted-addon";
+import * as R from "ramda";
+
 import { Account, AccountsSchema } from "./tables/accounts";
 import { Contact, ContactSchema } from "./tables/contacts";
 import { Log, LogSchema } from "./tables/logs";
+import { MASTER_SECRET_KEY, Secret, SecretSchema } from "./tables/secret";
 import {
   MASTER_SETTINGS_KEY,
   Settings,
@@ -12,6 +15,7 @@ import { Temp, TempSchema } from "./tables/temp";
 import { DEFAULT_ENDORSER_API_SERVER } from "@/constants/app";
 
 // Define types for tables that hold sensitive and non-sensitive data
+type SecretTable = { secret: Table<Secret> };
 type SensitiveTables = { accounts: Table<Account> };
 type NonsensitiveTables = {
   contacts: Table<Contact>;
@@ -21,39 +25,222 @@ type NonsensitiveTables = {
 };
 
 // Using 'unknown' instead of 'any' for stricter typing and to avoid TypeScript warnings
+export type SecretDexie<T extends unknown = SecretTable> = BaseDexie & T;
 export type SensitiveDexie<T extends unknown = SensitiveTables> = BaseDexie & T;
 export type NonsensitiveDexie<T extends unknown = NonsensitiveTables> =
   BaseDexie & T;
 
-// Initialize Dexie databases for sensitive and non-sensitive data
+//// Initialize the DBs, starting with the sensitive ones.
-export const accountsDB = new BaseDexie("TimeSafariAccounts") as SensitiveDexie;
+
+// Initialize Dexie database for secret, which is then used to encrypt accountsDB
+export const secretDB = new BaseDexie("TimeSafariSecret") as SecretDexie;
+secretDB.version(1).stores(SecretSchema);
+
+// Initialize Dexie database for accounts
+const accountsDexie = new BaseDexie("TimeSafariAccounts") as SensitiveDexie;
+
+// Instead of accountsDBPromise, use libs/util retrieveAccountMetadata or retrieveFullyDecryptedAccount
+// so that it's clear whether the usage needs the private key inside.
+//
+// This is a promise because the decryption key comes from IndexedDB
+// and someday it may come from a password or keystore or external wallet.
+// It's important that usages take into account that there may be a delay due
+// to a user action required to unlock the data.
+export const accountsDBPromise = useSecretAndInitializeAccountsDB(
+  secretDB,
+  accountsDexie,
+);
+
+//// Now initialize the other DB.
+
+// Initialize Dexie databases for non-sensitive data
 export const db = new BaseDexie("TimeSafari") as NonsensitiveDexie;
 
-// 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
-encrypted(accountsDB, { secretKey: secret });
-
-// Define the schemas for our databases
 // Only the tables with index modifications need listing. https://dexie.org/docs/Tutorial/Design#database-versioning
-accountsDB.version(1).stores(AccountsSchema);
+
 // v1 also had contacts & settings
 // v2 added Log
 db.version(2).stores({
   ...ContactSchema,
   ...LogSchema,
-  ...SettingsSchema,
+  ...{ settings: "id" }, // old Settings schema
 });
 // v3 added Temp
 db.version(3).stores(TempSchema);
+db.version(4)
+  .stores(SettingsSchema)
+  .upgrade((tx) => {
+    return tx
+      .table("settings")
+      .toCollection()
+      .modify((settings) => {
+        settings.accountDid = ""; // make it non-null for the default master settings, but still indexable
+      });
+  });
+
+const DEFAULT_SETTINGS = {
+  id: MASTER_SETTINGS_KEY,
+  activeDid: undefined,
+  apiServer: DEFAULT_ENDORSER_API_SERVER,
+};
 
 // Event handler to initialize the non-sensitive database with default settings
 db.on("populate", async () => {
-  await db.settings.add({
+  await db.settings.add(DEFAULT_SETTINGS);
-    id: MASTER_SETTINGS_KEY,
-    apiServer: DEFAULT_ENDORSER_API_SERVER,
-  });
 });
+
+// Manage the encryption key.
+
+// It's not really secure to maintain the secret next to the user's data.
+// However, until we have better hooks into a real wallet or reliable secure
+// storage, we'll do this for user convenience. As they sign more records
+// and integrate with more people, they'll value it more and want to be more
+// secure, so we'll prompt them to take steps to back it up, properly encrypt,
+// etc. At the beginning, we'll prompt for a password, then we'll prompt for a
+// PWA so it's not in a browser... and then we hope to be integrated with a
+// real wallet or something else more secure.
+
+// One might ask: why encrypt at all? We figure a basic encryption is better
+// than none. Plus, we expect to support their own password or keystore or
+// external wallet as better signing options in the future, so it's gonna be
+// important to have the structure where each account access might require
+// user action.
+
+// (Once upon a time we stored the secret in localStorage, but it frequently
+// got erased, even though the IndexedDB still had the identity data. This
+// ended up throwing lots of errors to the user... and they'd end up in a state
+// where they couldn't take action because they couldn't unlock that identity.)
+
+// check for the secret in storage
+async function useSecretAndInitializeAccountsDB(
+  secretDB: SecretDexie,
+  accountsDB: SensitiveDexie,
+): Promise<SensitiveDexie> {
+  return secretDB
+    .open()
+    .then(() => {
+      return secretDB.secret.get(MASTER_SECRET_KEY);
+    })
+    .then((secretRow?: Secret) => {
+      let secret = secretRow?.secret;
+      if (secret != null) {
+        // they already have it in IndexedDB, so just pass it along
+        return secret;
+      } else {
+        // check localStorage (for users before v 0.3.37)
+        const localSecret = localStorage.getItem("secret");
+        if (localSecret != null) {
+          // they had one, so we want to move it to IndexedDB
+          secret = localSecret;
+        } else {
+          // they didn't have one, so let's generate one
+          secret = Encryption.createRandomEncryptionKey();
+        }
+        // it is not in IndexedDB, so add it now
+        return secretDB.secret
+          .add({ id: MASTER_SECRET_KEY, secret })
+          .then(() => {
+            return secret;
+          });
+      }
+    })
+    .then((secret?: string) => {
+      if (secret == null) {
+        throw new Error("No secret found or created.");
+      } else {
+        // apply encryption to the sensitive database using the secret key
+        encrypted(accountsDB, { secretKey: secret });
+        accountsDB.version(1).stores(AccountsSchema);
+        accountsDB.open();
+        return accountsDB;
+      }
+    })
+    .catch((error) => {
+      logConsoleAndDb("Error processing secret & encrypted accountsDB.", error);
+      // alert("There was an error processing encrypted data. See the Help page.");
+      throw error;
+    });
+}
+
+// retrieves default settings
+// calls db.open()
+export async function retrieveSettingsForDefaultAccount(): Promise<Settings> {
+  await db.open();
+  return (await db.settings.get(MASTER_SETTINGS_KEY)) || DEFAULT_SETTINGS;
+}
+
+export async function retrieveSettingsForActiveAccount(): Promise<Settings> {
+  const defaultSettings = await retrieveSettingsForDefaultAccount();
+  if (!defaultSettings.activeDid) {
+    return defaultSettings;
+  } else {
+    const overrideSettings =
+      (await db.settings
+        .where("accountDid")
+        .equals(defaultSettings.activeDid)
+        .first()) || {};
+    return R.mergeDeepRight(defaultSettings, overrideSettings);
+  }
+}
+
+// Update settings for the given account, or in MASTER_SETTINGS_KEY if no accountDid is provided.
+// Don't expose this because we should be explicit on whether we're updating the default settings or account settings.
+async function updateSettings(settingsChanges: Settings): Promise<void> {
+  await db.open();
+  if (!settingsChanges.accountDid) {
+    // ensure there is no "id" that would override the key
+    delete settingsChanges.id;
+    await db.settings.update(MASTER_SETTINGS_KEY, settingsChanges);
+  } else {
+    const result = await db.settings
+      .where("accountDid")
+      .equals(settingsChanges.accountDid)
+      .modify(settingsChanges);
+    if (result === 0) {
+      if (!settingsChanges.id) {
+        // It is unfortunate that we have to set this explicitly.
+        // We didn't make id a "++id" at the beginning and Dexie won't let us change it,
+        // plus we made our first settings objects MASTER_SETTINGS_KEY = 1 instead of 0
+        settingsChanges.id = (await db.settings.count()) + 1;
+      }
+      await db.settings.add(settingsChanges);
+    }
+  }
+}
+
+export async function updateDefaultSettings(settings: Settings): Promise<void> {
+  delete settings.accountDid; // just in case
+  await updateSettings(settings);
+}
+
+export async function updateAccountSettings(
+  accountDid: string,
+  settings: Settings,
+): Promise<void> {
+  settings.accountDid = accountDid;
+  await updateSettings(settings);
+}
+
+// similar method is in the sw_scripts/additional-scripts.js file
+export async function logConsoleAndDb(
+  message: string,
+  isError = false,
+): Promise<void> {
+  if (isError) {
+    console.error(`${new Date().toISOString()} ${message}`);
+  } else {
+    console.log(`${new Date().toISOString()} ${message}`);
+  }
+
+  await db.open();
+  const todayKey = new Date().toDateString();
+  // only keep one day's worth of logs
+  const previous = await db.logs.get(todayKey);
+  if (!previous) {
+    // when this is today's first log, clear out everything previous
+    await db.logs.clear();
+  }
+  const prevMessages = (previous && previous.message) || "";
+  const fullMessage = `${prevMessages}\n${new Date().toISOString()} ${message}`;
+  await db.logs.update(todayKey, { message: fullMessage });
+}

src/db/tables/README.md

@@ -0,0 +1 @@
+Check the contact & settings export to see whether you want your new table to be included in it.

src/db/tables/accounts.ts

@@ -5,7 +5,7 @@ export type Account = {
   /**
    * Auto-generated ID by Dexie
    */
-  id?: number;
+  id?: number; // this is only blank on input, when the database assigns it
 
   /**
    * The date the account was created
@@ -48,7 +48,7 @@ export type Account = {
 /**
  * Schema for the accounts table in the database.
  * Fields starting with a $ character are encrypted.
- * @see {@link https://github.com/PVermeer/dexie-addon-suite-monorepo/tree/master/packages/dexie-encrypted-addon}
+ * @see {@link https://github.com/PVermeer/dexie-addon-suite-monorepo/tree/master/packages/dexie-encrypted-addon#added-schema-syntax}
  */
 export const AccountsSchema = {
   accounts:

src/db/tables/contacts.ts

@@ -1,7 +1,18 @@
+export interface ContactMethod {
+  label: string;
+  type: string; // eg. "EMAIL", "SMS", "WHATSAPP", maybe someday "GOOGLE-CONTACT-API"
+  value: string;
+}
+
 export interface Contact {
+  //
+  // When adding a property, consider whether it should be added when exporting & sharing contacts.
+
   did: string;
+  contactMethods?: Array<ContactMethod>;
   name?: string;
   nextPubKeyHashB64?: string; // base64-encoded SHA256 hash of next public key
+  notes?: string;
   profileImageUrl?: string;
   publicKeyBase64?: string;
   seesMe?: boolean; // cached value of the server setting

src/db/tables/secret.ts

@@ -0,0 +1,18 @@
+/**
+ * Represents an account stored in the database.
+ */
+export type Secret = {
+  /**
+   * Auto-generated ID by Dexie
+   */
+  id: number;
+
+  /**
+   * The secret key used to decrypt the identity if they're not using their own password
+   */
+  secret: string;
+};
+
+export const SecretSchema = { secret: "++id, secret" };
+
+export const MASTER_SECRET_KEY = 0;

src/db/tables/settings.ts

@@ -12,24 +12,42 @@ export type BoundingBox = {
  * Settings type encompasses user-specific configuration details.
  */
 export type Settings = {
-  id: number; // Only one entry, keyed with MASTER_SETTINGS_KEY
+  // default entry is keyed with MASTER_SETTINGS_KEY; other entries are linked to an account with account ID
+  id?: number; // this is erased for all those entries that are keyed with accountDid
 
-  activeDid?: string; // Active Decentralized ID
+  // if supplied, this settings record overrides the master record when the user switches to this account
-  apiServer?: string; // API server URL
+  accountDid?: string; // not used in the MASTER_SETTINGS_KEY entry
+  // active Decentralized ID
+  activeDid?: string; // only used in the MASTER_SETTINGS_KEY entry
+
+  apiServer: string; // API server URL
 
   filterFeedByNearby?: boolean; // filter by nearby
   filterFeedByVisible?: boolean; // filter by visible users ie. anyone not hidden
+  finishedOnboarding?: boolean; // the user has completed the onboarding process
 
-  firstName?: string; // user's full name
+  firstName?: string; // user's full name, may be null if unwanted for a particular account
   hideRegisterPromptOnNewContact?: boolean;
   isRegistered?: boolean;
+  // imageServer?: string; // if we want to allow modification then we should make image functionality optional -- or at least customizable
   lastName?: string; // deprecated - put all names in firstName
+
+  lastAckedOfferToUserJwtId?: string; // the last JWT ID for offer-to-user that they've acknowledged seeing
+  lastAckedOfferToUserProjectsJwtId?: string; // the last JWT ID for offers-to-user's-projects that they've acknowledged seeing
+
+  // The claim list has a most recent one used in notifications that's separate from the last viewed
   lastNotifiedClaimId?: string;
   lastViewedClaimId?: string;
+
+  notifyingNewActivityTime?: string; // set to their chosen time if they have turned on daily check for new activity via the push server
+  notifyingReminderMessage?: string; // set to their chosen message for a daily reminder
+  notifyingReminderTime?: string; // set to their chosen time for a daily reminder
+
+  partnerApiServer?: string; // partner server API URL
+
   passkeyExpirationMinutes?: number; // passkey access token time-to-live in minutes
-  profileImageUrl?: string;
+
-  reminderTime?: number; // Time in milliseconds since UNIX epoch for reminders
+  profileImageUrl?: string; // may be null if unwanted for a particular account
-  reminderOn?: boolean; // Toggle to enable or disable reminders
 
   // Array of named search boxes defined by bounding boxes
   searchBoxes?: Array<{
@@ -46,7 +64,7 @@ export type Settings = {
   webPushServer?: string; // Web Push server URL
 };
 
-export function isAnyFeedFilterOn(settings: Settings): boolean {
+export function checkIsAnyFeedFilterOn(settings: Settings): boolean {
   return !!(settings?.filterFeedByNearby || settings?.filterFeedByVisible);
 }
 
@@ -54,7 +72,7 @@ export function isAnyFeedFilterOn(settings: Settings): boolean {
  * Schema for the Settings table in the database.
  */
 export const SettingsSchema = {
-  settings: "id",
+  settings: "id, &accountDid",
 };
 
 /**

src/db/tables/temp.ts

@@ -9,6 +9,4 @@ export type Temp = {
 /**
  * Schema for the Temp table in the database.
  */
-export const TempSchema = {
+export const TempSchema = { temp: "id" };
-  temp: "id",
-};

src/libs/crypto/index.ts

@@ -5,11 +5,12 @@ import { wordlist } from "ethereum-cryptography/bip39/wordlists/english";
 import { HDNode } from "@ethersproject/hdnode";
 
 import {
+  CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI,
   createEndorserJwtForDid,
-  ENDORSER_JWT_URL_LOCATION,
+  CONTACT_URL_PATH_ENDORSER_CH_OLD,
+  CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI,
 } from "@/libs/endorserServer";
 import { DEFAULT_DID_PROVIDER_NAME } from "../veramo/setup";
-import { decodeEndorserJwt } from "@/libs/crypto/vc";
 
 export const DEFAULT_ROOT_DERIVATION_PATH = "m/84737769'/0'/0'/0'";
 
@@ -51,7 +52,7 @@ export const newIdentifier = (
  *
  *
  * @param {string} mnemonic
- * @return {*}  {[string, string, string, string]}
+ * @return {[string, string, string, string]} address, privateHex, publicHex, derivationPath
  */
 export const deriveAddress = (
   mnemonic: string,
@@ -87,7 +88,8 @@ export const generateSeed = (): string => {
 /**
  * Retrieve an access token, or "" if no DID is provided.
  *
- * @return {*}
+ * @param {string} did
+ * @return {string} JWT with basic payload
  */
 export const accessToken = async (did?: string) => {
   if (did) {
@@ -101,24 +103,34 @@ export const accessToken = async (did?: string) => {
 };
 
 /**
- @return results of uportJwtPayload:
+ @return payload of JWT pulled out of any recognized URL path (if any)
- { 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) => {
+export const getContactJwtFromJwtUrl = (jwtUrlText: string) => {
   let jwtText = jwtUrlText;
-  const endorserContextLoc = jwtText.indexOf(ENDORSER_JWT_URL_LOCATION);
+  const appImportConfirmUrlLoc = jwtText.indexOf(
-  if (endorserContextLoc > -1) {
+    CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI,
+  );
+  if (appImportConfirmUrlLoc > -1) {
     jwtText = jwtText.substring(
-      endorserContextLoc + ENDORSER_JWT_URL_LOCATION.length,
+      appImportConfirmUrlLoc +
+        CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI.length,
     );
   }
-
+  const appImportOneUrlLoc = jwtText.indexOf(
-  // JWT format: { header, payload, signature, data }
+    CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI,
-  const jwt = decodeEndorserJwt(jwtText);
+  );
-
+  if (appImportOneUrlLoc > -1) {
-  return jwt.payload;
+    jwtText = jwtText.substring(
+      appImportOneUrlLoc + CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI.length,
+    );
+  }
+  const endorserUrlPathLoc = jwtText.indexOf(CONTACT_URL_PATH_ENDORSER_CH_OLD);
+  if (endorserUrlPathLoc > -1) {
+    jwtText = jwtText.substring(
+      endorserUrlPathLoc + CONTACT_URL_PATH_ENDORSER_CH_OLD.length,
+    );
+  }
+  return jwtText;
 };
 
 export const nextDerivationPath = (origDerivPath: string) => {
@@ -136,3 +148,156 @@ export const nextDerivationPath = (origDerivPath: string) => {
     .join("/");
   return newDerivPath;
 };
+
+// Base64 encoding/decoding utilities for browser
+function base64ToArrayBuffer(base64: string): Uint8Array {
+  const binaryString = atob(base64);
+  const bytes = new Uint8Array(binaryString.length);
+  for (let i = 0; i < binaryString.length; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+  return bytes;
+}
+
+function arrayBufferToBase64(buffer: ArrayBuffer): string {
+  const binary = String.fromCharCode(...new Uint8Array(buffer));
+  return btoa(binary);
+}
+
+const SALT_LENGTH = 16;
+const IV_LENGTH = 12;
+const KEY_LENGTH = 256;
+const ITERATIONS = 100000;
+
+// Encryption helper function
+export async function encryptMessage(message: string, password: string) {
+  const encoder = new TextEncoder();
+  const salt = crypto.getRandomValues(new Uint8Array(SALT_LENGTH));
+  const iv = crypto.getRandomValues(new Uint8Array(IV_LENGTH));
+
+  // Derive key from password using PBKDF2
+  const keyMaterial = await crypto.subtle.importKey(
+    "raw",
+    encoder.encode(password),
+    "PBKDF2",
+    false,
+    ["deriveBits", "deriveKey"],
+  );
+
+  const key = await crypto.subtle.deriveKey(
+    {
+      name: "PBKDF2",
+      salt,
+      iterations: ITERATIONS,
+      hash: "SHA-256",
+    },
+    keyMaterial,
+    { name: "AES-GCM", length: KEY_LENGTH },
+    false,
+    ["encrypt"],
+  );
+
+  // Encrypt the message
+  const encryptedContent = await crypto.subtle.encrypt(
+    {
+      name: "AES-GCM",
+      iv,
+    },
+    key,
+    encoder.encode(message),
+  );
+
+  // Return a JSON structure with base64-encoded components
+  const result = {
+    salt: arrayBufferToBase64(salt),
+    iv: arrayBufferToBase64(iv),
+    encrypted: arrayBufferToBase64(encryptedContent),
+  };
+
+  return btoa(JSON.stringify(result));
+}
+
+// Decryption helper function
+export async function decryptMessage(encryptedJson: string, password: string) {
+  const decoder = new TextDecoder();
+  const { salt, iv, encrypted } = JSON.parse(atob(encryptedJson));
+
+  // Convert base64 components back to Uint8Arrays
+  const saltArray = base64ToArrayBuffer(salt);
+  const ivArray = base64ToArrayBuffer(iv);
+  const encryptedContent = base64ToArrayBuffer(encrypted);
+
+  // Derive the same key using PBKDF2 with the extracted salt
+  const keyMaterial = await crypto.subtle.importKey(
+    "raw",
+    new TextEncoder().encode(password),
+    "PBKDF2",
+    false,
+    ["deriveBits", "deriveKey"],
+  );
+
+  const key = await crypto.subtle.deriveKey(
+    {
+      name: "PBKDF2",
+      salt: saltArray,
+      iterations: ITERATIONS,
+      hash: "SHA-256",
+    },
+    keyMaterial,
+    { name: "AES-GCM", length: KEY_LENGTH },
+    false,
+    ["decrypt"],
+  );
+
+  // Decrypt the content
+  const decryptedContent = await crypto.subtle.decrypt(
+    {
+      name: "AES-GCM",
+      iv: ivArray,
+    },
+    key,
+    encryptedContent,
+  );
+
+  // Convert the decrypted content back to a string
+  return decoder.decode(decryptedContent);
+}
+
+// Test function to verify encryption/decryption
+export async function testEncryptionDecryption() {
+  try {
+    const testMessage = "Hello, this is a test message! 🚀";
+    const testPassword = "myTestPassword123";
+
+    console.log("Original message:", testMessage);
+
+    // Test encryption
+    console.log("Encrypting...");
+    const encrypted = await encryptMessage(testMessage, testPassword);
+    console.log("Encrypted result:", encrypted);
+
+    // Test decryption
+    console.log("Decrypting...");
+    const decrypted = await decryptMessage(encrypted, testPassword);
+    console.log("Decrypted result:", decrypted);
+
+    // Verify
+    const success = testMessage === decrypted;
+    console.log("Test " + (success ? "PASSED ✅" : "FAILED ❌"));
+    console.log("Messages match:", success);
+
+    // Test with wrong password
+    console.log("\nTesting with wrong password...");
+    try {
+      await decryptMessage(encrypted, "wrongPassword");
+      console.log("Should not reach here");
+    } catch (error) {
+      console.log("Correctly failed with wrong password ✅");
+    }
+
+    return success;
+  } catch (error) {
+    console.error("Test failed with error:", error);
+    return false;
+  }
+}

src/libs/crypto/vc/did-eth-local-resolver.ts

@@ -0,0 +1,46 @@
+/**
+ * This did:ethr resolver instructs the did-jwt machinery to use the
+ * EcdsaSecp256k1RecoveryMethod2020Uses verification method which adds the recovery bit to the
+ * signature to recover the DID's public key from a signature.
+ *
+ * This effectively hard codes the did:ethr DID resolver to use the address as the public key.
+ * @param did : string
+ * @returns {Promise<DIDResolutionResult>}
+ *
+ * Similar code resides in endorser-ch and image-api
+ */
+export const didEthLocalResolver = async (did: string) => {
+  const didRegex = /^did:ethr:(0x[0-9a-fA-F]{40})$/;
+  const match = did.match(didRegex);
+
+  if (match) {
+    const address = match[1]; // Extract eth address: 0x...
+    const publicKeyHex = address; // Use the address directly as a public key placeholder
+
+    return {
+      didDocumentMetadata: {},
+      didResolutionMetadata: {
+        contentType: "application/did+ld+json",
+      },
+      didDocument: {
+        "@context": [
+          "https://www.w3.org/ns/did/v1",
+          "https://w3id.org/security/suites/secp256k1recovery-2020/v2",
+        ],
+        id: did,
+        verificationMethod: [
+          {
+            id: `${did}#controller`,
+            type: "EcdsaSecp256k1RecoveryMethod2020",
+            controller: did,
+            blockchainAccountId: "eip155:1:" + publicKeyHex,
+          },
+        ],
+        authentication: [`${did}#controller`],
+        assertionMethod: [`${did}#controller`],
+      },
+    };
+  }
+
+  throw new Error(`Unsupported DID format: ${did}`);
+};

src/libs/crypto/vc/index.ts

@@ -6,14 +6,21 @@
  *
  */
 
+import { Buffer } from "buffer/";
 import * as didJwt from "did-jwt";
-import { JWTDecoded } from "did-jwt/lib/JWT";
+import { JWTVerified } from "did-jwt";
+import { Resolver } from "did-resolver";
 import { IIdentifier } from "@veramo/core";
 import * as u8a from "uint8arrays";
 
-import { createDidPeerJwt } from "@/libs/crypto/vc/passkeyDidPeer";
+import { didEthLocalResolver } from "./did-eth-local-resolver";
+import { PEER_DID_PREFIX, verifyPeerSignature } from "./didPeer";
+import { base64urlDecodeString, createDidPeerJwt } from "./passkeyDidPeer";
+import { urlBase64ToUint8Array } from "./util";
 
 export const ETHR_DID_PREFIX = "did:ethr:";
+export const JWT_VERIFY_FAILED_CODE = "JWT_VERIFY_FAILED";
+export const UNSUPPORTED_DID_METHOD_CODE = "UNSUPPORTED_DID_METHOD";
 
 /**
  * Meta info about a key
@@ -33,6 +40,8 @@ export interface KeyMeta {
   passkeyCredIdHex?: string;
 }
 
+const ethLocalResolver = new Resolver({ ethr: didEthLocalResolver });
+
 /**
  * Tell whether a key is from a passkey
  * @param keyMeta contains info about the key, whose passkeyCredIdHex determines if the key is from a passkey
@@ -44,16 +53,23 @@ export function isFromPasskey(keyMeta?: KeyMeta): boolean {
 export async function createEndorserJwtForKey(
   account: KeyMeta,
   payload: object,
+  expiresIn?: number,
 ) {
   if (account?.identity) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const identity: IIdentifier = JSON.parse(account.identity!);
     const privateKeyHex = identity.keys[0].privateKeyHex;
     const signer = await SimpleSigner(privateKeyHex as string);
-    return didJwt.createJWT(payload, {
+    const options = {
+      // alg: "ES256K", // "K" is the default, "K-R" is used by the server in tests
       issuer: account.did,
       signer: signer,
-    });
+      expiresIn: undefined as number | undefined,
+    };
+    if (expiresIn) {
+      options.expiresIn = expiresIn;
+    }
+    return didJwt.createJWT(payload, options);
   } else if (account?.passkeyCredIdHex) {
     return createDidPeerJwt(account.did, account.passkeyCredIdHex, payload);
   } else {
@@ -107,6 +123,79 @@ function bytesToHex(b: Uint8Array): string {
   return u8a.toString(b, "base16");
 }
 
-export function decodeEndorserJwt(jwt: string): JWTDecoded {
+// We should be calling 'verify' in more places, showing warnings if it fails.
+// @returns JWTDecoded with { header: JWTHeader, payload: any, signature: string, data: string } (but doesn't verify the signature)
+export function decodeEndorserJwt(jwt: string) {
   return didJwt.decodeJWT(jwt);
 }
+
+// return Promise of at least { issuer, payload, verified boolean }
+// ... and also if successfully verified by did-jwt (not JWANT): data, doc, signature, signer
+export async function decodeAndVerifyJwt(
+  jwt: string,
+): Promise<Omit<JWTVerified, "didResolutionResult" | "signer" | "jwt">> {
+  const pieces = jwt.split(".");
+  const header = JSON.parse(base64urlDecodeString(pieces[0]));
+  const payload = JSON.parse(base64urlDecodeString(pieces[1]));
+  const issuerDid = payload.iss;
+  if (!issuerDid) {
+    return Promise.reject({
+      clientError: {
+        message: `Missing "iss" field in JWT.`,
+      },
+    });
+  }
+
+  if (issuerDid.startsWith(ETHR_DID_PREFIX)) {
+    try {
+      const verified = await didJwt.verifyJWT(jwt, {
+        resolver: ethLocalResolver,
+      });
+      return verified;
+    } catch (e: unknown) {
+      return Promise.reject({
+        clientError: {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-expect-error
+          message: `JWT failed verification: ` + e.toString(),
+          code: JWT_VERIFY_FAILED_CODE,
+        },
+      });
+    }
+  }
+
+  if (issuerDid.startsWith(PEER_DID_PREFIX) && header.typ === "JWANT") {
+    const verified = await verifyPeerSignature(
+      Buffer.from(payload),
+      issuerDid,
+      urlBase64ToUint8Array(pieces[2]),
+    );
+    if (!verified) {
+      return Promise.reject({
+        clientError: {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-expect-error
+          message: `JWT failed verification: ` + e.toString(),
+          code: JWT_VERIFY_FAILED_CODE,
+        },
+      });
+    } else {
+      return { issuer: issuerDid, payload: payload, verified: true };
+    }
+  }
+
+  if (issuerDid.startsWith(PEER_DID_PREFIX)) {
+    return Promise.reject({
+      clientError: {
+        message: `JWT with a PEER DID currently only supported with typ == JWANT. Contact us us for JWT suport since it should be straightforward.`,
+      },
+    });
+  }
+
+  return Promise.reject({
+    clientError: {
+      message: `Unsupported DID method ${issuerDid}`,
+      code: UNSUPPORTED_DID_METHOD_CODE,
+    },
+  });
+}

src/libs/crypto/vc/passkeyDidPeer.ts

@@ -470,8 +470,18 @@ ${pubKeyBuffer.toString("base64")}
   return pem;
 }
 
+// tried the base64url library but got an error using their Buffer
+export function base64urlDecodeString(input: string) {
+  return atob(input.replace(/-/g, "+").replace(/_/g, "/"));
+}
+
+// tried the base64url library but got an error using their Buffer
+export function base64urlEncodeString(input: string) {
+  return btoa(input).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function base64urlDecode(input: string) {
+function base64urlDecodeArrayBuffer(input: string) {
   input = input.replace(/-/g, "+").replace(/_/g, "/");
   const pad = input.length % 4 === 0 ? "" : "====".slice(input.length % 4);
   const str = atob(input + pad);
@@ -483,9 +493,9 @@ function base64urlDecode(input: string) {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function base64urlEncode(buffer: ArrayBuffer) {
+function base64urlEncodeArrayBuffer(buffer: ArrayBuffer) {
   const str = String.fromCharCode(...new Uint8Array(buffer));
-  return btoa(str).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+  return base64urlEncodeString(str);
 }
 
 // from @simplewebauthn/browser

src/libs/crypto/vc/util.ts

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

src/libs/endorserServer.ts

@@ -1,23 +1,39 @@
 import { Axios, AxiosRequestConfig, AxiosResponse } from "axios";
+import { Buffer } from "buffer";
+import { sha256 } from "ethereum-cryptography/sha256";
 import { LRUCache } from "lru-cache";
 import * as R from "ramda";
 
-import { DEFAULT_IMAGE_API_SERVER } from "@/constants/app";
+import {
+  APP_SERVER,
+  DEFAULT_IMAGE_API_SERVER,
+  NotificationIface,
+} from "@/constants/app";
 import { Contact } from "@/db/tables/contacts";
-import { accessToken } from "@/libs/crypto";
+import { accessToken, deriveAddress, nextDerivationPath } from "@/libs/crypto";
-import { NonsensitiveDexie } from "@/db/index";
+import { logConsoleAndDb, NonsensitiveDexie } from "@/db/index";
-import { getAccount, getPasskeyExpirationSeconds } from "@/libs/util";
+import {
+  retrieveAccountMetadata,
+  retrieveFullyDecryptedAccount,
+  getPasskeyExpirationSeconds,
+  GiverReceiverInputInfo,
+} from "@/libs/util";
 import { createEndorserJwtForKey, KeyMeta } from "@/libs/crypto/vc";
+import { Account } from "@/db/tables/accounts";
 
 export const SCHEMA_ORG_CONTEXT = "https://schema.org";
 // the object in RegisterAction claims
 export const SERVICE_ID = "endorser.ch";
 // the header line for contacts exported via Endorser Mobile
 export const CONTACT_CSV_HEADER = "name,did,pubKeyBase64,seesMe,registered";
-// the prefix for the contact URL
+// the suffix for the contact URL in this app where they are confirmed before import
-export const CONTACT_URL_PREFIX = "https://endorser.ch";
+export const CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI = "/contact-import/";
-// the suffix for the contact URL
+// the suffix for the contact URL in this app where a single one gets imported automatically
-export const ENDORSER_JWT_URL_LOCATION = "/contact?jwt=";
+export const CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI = "/contacts?contactJwt=";
+// the suffix for the old contact URL -- deprecated Jan 2025, though "endorser.ch/contact?jwt=" shows data on endorser.ch server
+export const CONTACT_URL_PATH_ENDORSER_CH_OLD = "/contact?jwt=";
+// unused now that we match on the URL path; just note that it was used for a while to create URLs that showed at endorser.ch
+//export const CONTACT_URL_PREFIX_ENDORSER_CH_OLD = "https://endorser.ch";
 // the prefix for handle IDs, the permanent ID for claims on Endorser
 export const ENDORSER_CH_HANDLE_PREFIX = "https://endorser.ch/entity/";
 
@@ -29,11 +45,6 @@ export interface AgreeVerifiableCredential {
   object: Record<string, any>;
 }
 
-export interface GiverReceiverInputInfo {
-  did?: string;
-  name?: string;
-}
-
 export interface GiverOutputInfo {
   action: string;
   giver?: GiverReceiverInputInfo;
@@ -47,6 +58,7 @@ export interface ClaimResult {
   error: { code: string; message: string };
 }
 
+// similar to VerifiableCredentialSubject... maybe rename this
 export interface GenericVerifiableCredential {
   "@context"?: string; // optional when embedded, eg. in an Agree
   "@type": string;
@@ -54,8 +66,6 @@ export interface GenericVerifiableCredential {
 }
 
 export interface GenericCredWrapper<T extends GenericVerifiableCredential> {
-  "@context": string;
-  "@type": string;
   claim: T;
   claimType?: string;
   handleId: string;
@@ -66,8 +76,6 @@ export interface GenericCredWrapper<T extends GenericVerifiableCredential> {
 }
 export const BLANK_GENERIC_SERVER_RECORD: GenericCredWrapper<GenericVerifiableCredential> =
   {
-    "@context": SCHEMA_ORG_CONTEXT,
-    "@type": "",
     claim: { "@type": "" },
     handleId: "",
     id: "",
@@ -82,11 +90,14 @@ export interface GiveSummaryRecord {
   amountConfirmed: number;
   description: string;
   fullClaim: GiveVerifiableCredential;
-  fulfillsPlanHandleId: string;
+  fulfillsHandleId: string;
+  fulfillsPlanHandleId?: string;
+  fulfillsType?: string;
   handleId: string;
   issuedAt: string;
   issuerDid: string;
   jwtId: string;
+  providerPlanHandleId?: string;
   recipientDid: string;
   unit: string;
 }
@@ -110,6 +121,10 @@ export interface OfferSummaryRecord {
   validThrough: string;
 }
 
+export interface OfferToPlanSummaryRecord extends OfferSummaryRecord {
+  planName: string;
+}
+
 // a summary record; the VC is not currently part of this record
 export interface PlanSummaryRecord {
   agentDid?: string; // optional, if the issuer wants someone else to manage as well
@@ -137,6 +152,7 @@ export interface GiveVerifiableCredential extends GenericVerifiableCredential {
   identifier?: string;
   image?: string;
   object?: { amountOfThisGood: number; unitCode: string };
+  provider?: GenericVerifiableCredential; // typically @type & identifier
   recipient?: { identifier: string };
 }
 
@@ -175,13 +191,9 @@ export interface PlanVerifiableCredential extends GenericVerifiableCredential {
  * Represents data about a project
  *
  * @deprecated
- * We should use PlanSummaryRecord instead.
+ * (Maybe we should use PlanSummaryRecord instead, either by adding rowId or by iterating with jwtId.)
  **/
 export interface PlanData {
-  /**
-   * Name of the project
-   **/
-  name: string;
   /**
    * Description of the project
    **/
@@ -196,9 +208,14 @@ export interface PlanData {
    */
   issuerDid: string;
   /**
-   * The identifier of the project -- different from jwtId, needs to be fixed
+   * Name of the project
    **/
-  rowid?: string;
+  name: string;
+  /**
+   * The identifier of the project record -- different from jwtId
+   * (Maybe we should use the jwtId to iterate through the records instead.)
+   **/
+  rowId?: string;
 }
 
 export interface EndorserRateLimits {
@@ -217,11 +234,21 @@ export interface ImageRateLimits {
 }
 
 export interface VerifiableCredential {
+  exp?: number;
+  iat: number;
+  iss: string;
+  vc: {
+    "@context": string[];
+    type: string[];
+    credentialSubject: VerifiableCredentialSubject;
+  };
+}
+
+// similar to GenericVerifiableCredential... maybe replace that one
+export interface VerifiableCredentialSubject {
   "@context": string;
   "@type": string;
-  name: string;
+  [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-  description: string;
-  identifier?: string;
 }
 
 export interface WorldProperties {
@@ -229,12 +256,14 @@ export interface WorldProperties {
   endTime?: string;
 }
 
+// AKA Registration & RegisterAction
 export interface RegisterVerifiableCredential {
-  "@context": string;
+  "@context": typeof SCHEMA_ORG_CONTEXT;
-  "@type": string;
+  "@type": "RegisterAction";
   agent: { identifier: string };
+  identifier?: string; // used for invites (when participant ID isn't known)
   object: string;
-  participant: { identifier: string };
+  participant?: { identifier: string }; // used when person is known (not an invite)
 }
 
 // now for some of the error & other wrapper types
@@ -266,6 +295,19 @@ export interface ErrorResult extends ResultWithType {
 
 export type CreateAndSubmitClaimResult = SuccessResult | ErrorResult;
 
+/**
+ * This is similar to Contact but it grew up in different logic paths.
+ * We may want to change this to be a Contact.
+ */
+export interface UserInfo {
+  did: string;
+  name: string;
+  publicEncKey: string;
+  registered: boolean;
+  profileImageUrl?: string;
+  nextPublicEncKeyHash?: string;
+}
+
 // 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";
@@ -409,6 +451,7 @@ export function didInfoForContact(
   activeDid: string | undefined,
   contact?: Contact,
   allMyDids: string[] = [],
+  showDidForVisible: boolean = false,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): { known: boolean; displayName: string; profileImageUrl?: string } {
   if (!did) return { displayName: "Someone Unnamed/Unknown", known: false };
@@ -417,7 +460,7 @@ export function didInfoForContact(
   } else if (contact) {
     return {
       displayName: contact.name || "Contact With No Name",
-      known: !!contact,
+      known: true,
       profileImageUrl: contact.profileImageUrl,
     };
   } else {
@@ -425,14 +468,29 @@ export function didInfoForContact(
     return myId
       ? { displayName: "You (Alt ID)", known: true }
       : isHiddenDid(did)
-        ? { displayName: "Someone Totally Outside Your View", known: false }
+        ? { displayName: "Someone Outside Your View", known: false }
         : {
-            displayName: "Someone Visible But Outside Your Contact List",
+            displayName: showDidForVisible
+              ? did
+              : "Someone Visible But Not In Your Contact List",
             known: false,
           };
   }
 }
 
+/**
+ * @returns full contact info object (never undefined), where did is searched in contacts and allMyDids
+ */
+export function didInfoObject(
+  did: string | undefined,
+  activeDid: string | undefined,
+  allMyDids: string[],
+  contacts: Contact[],
+): { known: boolean; displayName: string; profileImageUrl?: string } {
+  const contact = contactForDid(did, contacts);
+  return didInfoForContact(did, activeDid, contact, allMyDids);
+}
+
 /**
  always returns text, maybe something like "unnamed" or "unknown"
 
@@ -448,6 +506,22 @@ export function didInfo(
   return didInfoForContact(did, activeDid, contact, allMyDids).displayName;
 }
 
+/**
+ * return text description without any references to "you" as user
+ */
+export function didInfoForCertificate(
+  did: string | undefined,
+  contacts: Contact[],
+): string {
+  return didInfoForContact(
+    did,
+    undefined,
+    contactForDid(did, contacts),
+    [],
+    true,
+  ).displayName;
+}
+
 let passkeyAccessToken: string = "";
 let passkeyTokenExpirationEpochSeconds: number = 0;
 
@@ -473,35 +547,72 @@ export function tokenExpiryTimeDescription() {
 /**
  * Get the headers for a request, potentially including Authorization
  */
-export async function getHeaders(did?: string) {
+export async function getHeaders(
+  did?: string,
+  $notify?: (notification: NotificationIface, timeout?: number) => void,
+  failureMessage?: string,
+) {
   const headers: { "Content-Type": string; Authorization?: string } = {
     "Content-Type": "application/json",
   };
   if (did) {
-    let token;
+    try {
-    const account = await getAccount(did);
+      let token;
-    if (account?.passkeyCredIdHex) {
+      const account = await retrieveAccountMetadata(did);
-      if (
+      if (account?.passkeyCredIdHex) {
-        passkeyAccessToken &&
+        if (
-        passkeyTokenExpirationEpochSeconds > Date.now() / 1000
+          passkeyAccessToken &&
-      ) {
+          passkeyTokenExpirationEpochSeconds > Date.now() / 1000
-        // there's an active current passkey token
+        ) {
-        token = passkeyAccessToken;
+          // there's an active current passkey token
-      } else {
+          token = passkeyAccessToken;
-        // there's no current passkey token or it's expired
+        } else {
-        token = await accessToken(did);
+          // there's no current passkey token or it's expired
+          token = await accessToken(did);
 
-        passkeyAccessToken = token;
+          passkeyAccessToken = token;
-        const passkeyExpirationSeconds = await getPasskeyExpirationSeconds();
+          const passkeyExpirationSeconds = await getPasskeyExpirationSeconds();
-        passkeyTokenExpirationEpochSeconds =
+          passkeyTokenExpirationEpochSeconds =
-          Date.now() / 1000 + passkeyExpirationSeconds;
+            Date.now() / 1000 + passkeyExpirationSeconds;
+        }
+      } else {
+        token = await accessToken(did);
+      }
+      headers["Authorization"] = "Bearer " + token;
+    } catch (error) {
+      // This rarely happens: we've seen it when they have account info but the
+      // encryption secret got lost. But in most cases we want users to at
+      // least see their feed -- and anything else that returns results for
+      // anonymous users.
+
+      // We'll continue with an anonymous request... still want to show feed and other things, but ideally let them know.
+      logConsoleAndDb(
+        "Something failed in getHeaders call (will proceed anonymously" +
+          ($notify ? " and notify user" : "") +
+          "): " +
+          // IntelliJ type system complains about getCircularReplacer() with: Argument of type '(obj: any, key: string, value: any) => any' is not assignable to parameter of type '(this: any, key: string, value: any) => any'.
+          //JSON.stringify(error, getCircularReplacer()), // JSON.stringify(error) on a Dexie error throws another error about: Converting circular structure to JSON
+          error,
+        true,
+      );
+      if ($notify) {
+        // remember: only want to do this if they supplied a DID, expecting personal results
+        const notifyMessage =
+          failureMessage ||
+          "Showing anonymous data. See the Help page for help with personal data.";
+        $notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Personal Data Error",
+            text: notifyMessage,
+          },
+          3000,
+        );
       }
-    } else {
-      token = await accessToken(did);
     }
-    headers["Authorization"] = "Bearer " + token;
   } else {
-    // it's often OK to request without auth; we assume necessary checks are done earlier
+    // it's usually OK to request without auth; we assume we're only here when allowed
   }
   return headers;
 }
@@ -517,7 +628,7 @@ const planCache: LRUCache<string, PlanSummaryRecord> = new LRUCache({
  * @param apiServer
  */
 export async function getPlanFromCache(
-  handleId: string | null,
+  handleId: string | undefined,
   axios: Axios,
   apiServer: string,
   requesterDid?: string,
@@ -564,6 +675,102 @@ export async function setPlanInCache(
   planCache.set(handleId, planSummary);
 }
 
+/**
+ *
+ * @param error that is thrown from an Endorser server call by Axios
+ * @returns user-friendly message, or undefined if none found
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function serverMessageForUser(error: any) {
+  return (
+    // this is how most user messages are returned
+    error?.response?.data?.error?.message
+    // some are returned as "error" with a string, but those are more for devs and are less helpful to the user
+  );
+}
+
+/**
+ * Helpful for server errors, to get all the info -- including stuff skipped by toString & JSON.stringify
+ * It works with AxiosError, eg handling an error.response intelligently.
+ *
+ * @param error
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function errorStringForLog(error: any) {
+  let stringifiedError = "" + error;
+  try {
+    stringifiedError = JSON.stringify(error);
+  } catch (e) {
+    // can happen with Dexie, eg:
+    // TypeError: Converting circular structure to JSON
+    // --> starting at object with constructor 'DexieError2'
+    // |     property '_promise' -> object with constructor 'DexiePromise'
+    // --- property '_value' closes the circle
+  }
+  let fullError = "" + error + " - JSON: " + stringifiedError;
+  const errorResponseText = JSON.stringify(error.response);
+  // for some reason, error.response is not included in stringify result (eg. for 400 errors on invite redemptions)
+  if (!R.empty(errorResponseText) && !fullError.includes(errorResponseText)) {
+    // add error.response stuff
+    if (R.equals(error?.config, error?.response?.config)) {
+      // but exclude "config" because it's already in there
+      const newErrorResponseText = JSON.stringify(
+        R.omit(["config"] as never[], error.response),
+      );
+      fullError += " - .response w/o same config JSON: " + newErrorResponseText;
+    } else {
+      fullError += " - .response JSON: " + errorResponseText;
+    }
+  }
+  return fullError;
+}
+
+/**
+ *
+ * @returns { data: Array<OfferSummaryRecord>, hitLimit: boolean true if maximum was hit and there may be more }
+ */
+export async function getNewOffersToUser(
+  axios: Axios,
+  apiServer: string,
+  activeDid: string,
+  afterOfferJwtId?: string,
+  beforeOfferJwtId?: string,
+) {
+  let url = `${apiServer}/api/v2/report/offers?recipientDid=${activeDid}`;
+  if (afterOfferJwtId) {
+    url += "&afterId=" + afterOfferJwtId;
+  }
+  if (beforeOfferJwtId) {
+    url += "&beforeId=" + beforeOfferJwtId;
+  }
+  const headers = await getHeaders(activeDid);
+  const response = await axios.get(url, { headers });
+  return response.data;
+}
+/**
+ *
+ * @returns { data: Array<OfferToPlanSummaryRecord>, hitLimit: boolean true if maximum was hit and there may be more }
+ */
+export async function getNewOffersToUserProjects(
+  axios: Axios,
+  apiServer: string,
+  activeDid: string,
+  afterOfferJwtId?: string,
+  beforeOfferJwtId?: string,
+) {
+  let url = `${apiServer}/api/v2/report/offersToPlansOwnedByMe`;
+  if (afterOfferJwtId) {
+    url += "?afterId=" + afterOfferJwtId;
+  }
+  if (beforeOfferJwtId) {
+    url += afterOfferJwtId ? "&" : "?";
+    url += "beforeId=" + beforeOfferJwtId;
+  }
+  const headers = await getHeaders(activeDid);
+  const response = await axios.get(url, { headers });
+  return response.data;
+}
+
 /**
  * Construct GiveAction VC for submission to server
  *
@@ -580,6 +787,7 @@ export function hydrateGive(
   fulfillsOfferHandleId?: string,
   isTrade: boolean = false,
   imageUrl?: string,
+  providerPlanHandleId?: string,
   lastClaimId?: string,
 ): GiveVerifiableCredential {
   // Remember: replace values or erase if it's null
@@ -638,6 +846,10 @@ export function hydrateGive(
 
   vcClaim.image = imageUrl || undefined;
 
+  vcClaim.provider = providerPlanHandleId
+    ? { "@type": "PlanAction", identifier: providerPlanHandleId }
+    : undefined;
+
   return vcClaim;
 }
 
@@ -662,6 +874,7 @@ export async function createAndSubmitGive(
   fulfillsOfferHandleId?: string,
   isTrade: boolean = false,
   imageUrl?: string,
+  providerPlanHandleId?: string,
 ): Promise<CreateAndSubmitClaimResult> {
   const vcClaim = hydrateGive(
     undefined,
@@ -674,6 +887,7 @@ export async function createAndSubmitGive(
     fulfillsOfferHandleId,
     isTrade,
     imageUrl,
+    providerPlanHandleId,
     undefined,
   );
   return createAndSubmitClaim(
@@ -706,6 +920,7 @@ export async function editAndSubmitGive(
   fulfillsOfferHandleId?: string,
   isTrade: boolean = false,
   imageUrl?: string,
+  providerPlanHandleId?: string,
 ): Promise<CreateAndSubmitClaimResult> {
   const vcClaim = hydrateGive(
     fullClaim.claim,
@@ -718,6 +933,7 @@ export async function editAndSubmitGive(
     fulfillsOfferHandleId,
     isTrade,
     imageUrl,
+    providerPlanHandleId,
     fullClaim.id,
   );
   return createAndSubmitClaim(
@@ -912,7 +1128,7 @@ export async function createAndSubmitClaim(
   } catch (error: any) {
     console.error("Error submitting claim:", error);
     const errorMessage: string =
-      error.response?.data?.error?.message ||
+      serverMessageForUser(error) ||
       error.message ||
       "Got some error submitting the claim. Check your permissions, network, and error logs.";
 
@@ -925,12 +1141,58 @@ export async function createAndSubmitClaim(
   }
 }
 
+export async function generateEndorserJwtUrlForAccount(
+  account: Account,
+  isRegistered?: boolean,
+  name?: string,
+  profileImageUrl?: string,
+  // note that including the next key pushes QR codes to the next resolution smaller
+  includeNextKeyIfDerived?: boolean,
+) {
+  const publicKeyHex = account.publicKeyHex;
+  const publicEncKey = Buffer.from(publicKeyHex, "hex").toString("base64");
+
+  const contactInfo = {
+    iat: Date.now(),
+    iss: account.did,
+    own: {
+      did: account.did,
+      name: name ?? "",
+      publicEncKey,
+      registered: !!isRegistered,
+    } as UserInfo,
+  };
+  if (profileImageUrl) {
+    contactInfo.own.profileImageUrl = profileImageUrl;
+  }
+
+  // Add the next key -- not recommended for the QR code for such a high resolution
+  if (includeNextKeyIfDerived && account?.mnemonic && account?.derivationPath) {
+    const newDerivPath = nextDerivationPath(account.derivationPath as string);
+    const nextPublicHex = deriveAddress(
+      account.mnemonic as string,
+      newDerivPath,
+    )[2];
+    const nextPublicEncKey = Buffer.from(nextPublicHex, "hex");
+    const nextPublicEncKeyHash = sha256(nextPublicEncKey);
+    const nextPublicEncKeyHashBase64 =
+      Buffer.from(nextPublicEncKeyHash).toString("base64");
+    contactInfo.own.nextPublicEncKeyHash = nextPublicEncKeyHashBase64;
+  }
+
+  const vcJwt = await createEndorserJwtForDid(account.did, contactInfo);
+
+  const viewPrefix = APP_SERVER + CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI;
+  return viewPrefix + vcJwt;
+}
+
 export async function createEndorserJwtForDid(
   issuerDid: string,
   payload: object,
+  expiresIn?: number,
 ) {
-  const account = await getAccount(issuerDid);
+  const account = await retrieveFullyDecryptedAccount(issuerDid);
-  return createEndorserJwtForKey(account as KeyMeta, payload);
+  return createEndorserJwtForKey(account as KeyMeta, payload, expiresIn);
 }
 
 /**
@@ -1126,7 +1388,7 @@ export const claimSpecialDescription = (
 
 export const BVC_MEETUPS_PROJECT_CLAIM_ID =
   import.meta.env.VITE_BVC_MEETUPS_PROJECT_CLAIM_ID ||
-  "https://endorser.ch/entity/01HNTZYJJXTGT0EZS3VEJGX7AK"; // this won't resolve as a URL on production; it's a URN only found in the test system
+  "https://endorser.ch/entity/01GXYPFF7FA03NXKPYY142PY4H"; // production value, which seems like the safest value if forgotten
 
 export const bvcMeetingJoinClaim = (did: string, startTime: string) => {
   return {
@@ -1160,19 +1422,24 @@ export async function createEndorserJwtVcFromClaim(
   return createEndorserJwtForDid(issuerDid, vcPayload);
 }
 
-export async function register(
+export async function createInviteJwt(
   activeDid: string,
-  apiServer: string,
+  contact?: Contact,
-  axios: Axios,
+  inviteId?: string,
-  contact: Contact,
+  expiresIn?: number,
-) {
+): Promise<string> {
   const vcClaim: RegisterVerifiableCredential = {
     "@context": SCHEMA_ORG_CONTEXT,
     "@type": "RegisterAction",
     agent: { identifier: activeDid },
     object: SERVICE_ID,
-    participant: { identifier: contact.did },
   };
+  if (contact) {
+    vcClaim.participant = { identifier: contact.did };
+  }
+  if (inviteId) {
+    vcClaim.identifier = inviteId;
+  }
   // Make a payload for the claim
   const vcPayload = {
     vc: {
@@ -1182,7 +1449,17 @@ export async function register(
     },
   };
   // Create a signature using private key of identity
-  const vcJwt = await createEndorserJwtForDid(activeDid, vcPayload);
+  const vcJwt = await createEndorserJwtForDid(activeDid, vcPayload, expiresIn);
+  return vcJwt;
+}
+
+export async function register(
+  activeDid: string,
+  apiServer: string,
+  axios: Axios,
+  contact: Contact,
+): Promise<{ success?: boolean; error?: string }> {
+  const vcJwt = await createInviteJwt(activeDid, contact);
 
   const url = apiServer + "/api/v2/claim";
   const resp = await axios.post(url, { jwtEncoded: vcJwt });

src/libs/partnerServer.ts

@@ -0,0 +1,9 @@
+export interface UserProfile {
+  description: string;
+  locLat?: number;
+  locLon?: number;
+  locLat2?: number;
+  locLon2?: number;
+  issuerDid: string;
+  rowId?: string; // set on profile retrieved from server
+}

src/libs/util.ts

@@ -5,26 +5,42 @@ import { Buffer } from "buffer";
 import * as R from "ramda";
 import { useClipboard } from "@vueuse/core";
 
-import { DEFAULT_PUSH_SERVER } from "@/constants/app";
+import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app";
-import { accountsDB, db } from "@/db/index";
+import {
+  accountsDBPromise,
+  retrieveSettingsForActiveAccount,
+  updateAccountSettings,
+  updateDefaultSettings,
+} from "@/db/index";
 import { Account } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
-import {
+import { DEFAULT_PASSKEY_EXPIRATION_MINUTES } from "@/db/tables/settings";
-  DEFAULT_PASSKEY_EXPIRATION_MINUTES,
-  MASTER_SETTINGS_KEY,
-} from "@/db/tables/settings";
 import { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
+import * as serverUtil from "@/libs/endorserServer";
 import {
   containsHiddenDid,
   GenericCredWrapper,
   GenericVerifiableCredential,
+  GiveSummaryRecord,
   OfferVerifiableCredential,
 } from "@/libs/endorserServer";
-import * as serverUtil from "@/libs/endorserServer";
 import { KeyMeta } from "@/libs/crypto/vc";
 import { createPeerDid } from "@/libs/crypto/vc/didPeer";
 import { registerCredential } from "@/libs/crypto/vc/passkeyDidPeer";
 
+export interface GiverReceiverInputInfo {
+  did?: string;
+  name?: string;
+}
+
+export enum OnboardPage {
+  Home = "HOME",
+  Discover = "DISCOVER",
+  Create = "CREATE",
+  Contact = "CONTACT",
+  Account = "ACCOUNT",
+}
+
 export const PRIVACY_MESSAGE =
   "The data you send will be visible to the world -- except: your IDs and the IDs of anyone you tag will stay private, only visible to them and others you explicitly allow.";
 export const SHARED_PHOTO_BASE64_KEY = "shared-photo-base64";
@@ -86,10 +102,29 @@ export const isGlobalUri = (uri: string) => {
   return uri && uri.match(new RegExp(/^[A-Za-z][A-Za-z0-9+.-]+:/));
 };
 
+export const isGiveClaimType = (claimType?: string) => {
+  return claimType === "GiveAction";
+};
+
 export const isGiveAction = (
   veriClaim: GenericCredWrapper<GenericVerifiableCredential>,
 ) => {
-  return veriClaim.claimType === "GiveAction";
+  return isGiveClaimType(veriClaim.claimType);
+};
+
+export const shortDid = (did: string) => {
+  if (did.startsWith("did:peer:")) {
+    return (
+      did.substring(0, "did:peer:".length + 2) +
+      "..." +
+      did.substring("did:peer:".length + 18, "did:peer:".length + 25) +
+      "..."
+    );
+  } else if (did.startsWith("did:ethr:")) {
+    return did.substring(0, "did:ethr:".length + 9) + "...";
+  } else {
+    return did.substring(0, did.indexOf(":", 4) + 7) + "...";
+  }
 };
 
 export const nameForDid = (
@@ -121,16 +156,92 @@ export const doCopyTwoSecRedo = (text: string, fn: () => void) => {
     .then(() => setTimeout(fn, 2000));
 };
 
+export interface ConfirmerData {
+  confirmerIdList: string[];
+  confsVisibleToIdList: string[];
+  numConfsNotVisible: number;
+}
+
+// // This is meant to be a second argument to JSON.stringify to avoid circular references.
+// // Usage: JSON.stringify(error, getCircularReplacer())
+// // Beware: we've seen this return "undefined" when there is actually a message, eg: DatabaseClosedError: Error DEXIE ENCRYPT ADDON: Encryption key has changed
+// function getCircularReplacer() {
+//   const seen = new WeakSet();
+//   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+//   return (obj: any, key: string, value: any): any => {
+//     if (typeof value === "object" && value !== null) {
+//       if (seen.has(value)) {
+//         return "[circular ref]";
+//       }
+//       seen.add(value);
+//     }
+//     return value;
+//   };
+// }
+
+/**
+ * @return only confirmers, excluding the issuer and hidden DIDs
+ */
+export async function retrieveConfirmerIdList(
+  apiServer: string,
+  claimId: string,
+  claimIssuerId: string,
+  userDid: string,
+): Promise<ConfirmerData | undefined> {
+  const confirmUrl =
+    apiServer +
+    "/api/report/issuersWhoClaimedOrConfirmed?claimId=" +
+    encodeURIComponent(serverUtil.stripEndorserPrefix(claimId));
+  const confirmHeaders = await serverUtil.getHeaders(userDid);
+  const response = await axios.get(confirmUrl, {
+    headers: confirmHeaders,
+  });
+  if (response.status === 200) {
+    const resultList1 = response.data.result || [];
+    //const publicUrls = resultList.publicUrls || [];
+    delete resultList1.publicUrls;
+    // exclude hidden DIDs
+    const resultList2 = R.reject(serverUtil.isHiddenDid, resultList1);
+    // exclude the issuer
+    const resultList3 = R.reject(
+      (did: string) => did === claimIssuerId,
+      resultList2,
+    );
+    const confirmerIdList = resultList3;
+    let 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
+      numConfsNotVisible = numConfsNotVisible - 1;
+    }
+    const confsVisibleToIdList = response.data.result.resultVisibleToDids || [];
+    const result: ConfirmerData = {
+      confirmerIdList,
+      confsVisibleToIdList,
+      numConfsNotVisible,
+    };
+    return result;
+  } else {
+    console.error(
+      "Bad response status of",
+      response.status,
+      "for confirmers:",
+      response,
+    );
+    return undefined;
+  }
+}
+
 /**
  * @returns true if the user can confirm the claim
  * @param veriClaim is expected to have fields: claim, claimType, and issuer
  */
-export const isGiveRecordTheUserCanConfirm = (
+export function isGiveRecordTheUserCanConfirm(
   isRegistered: boolean,
   veriClaim: GenericCredWrapper<GenericVerifiableCredential>,
   activeDid: string,
   confirmerIdList: string[] = [],
-) => {
+): boolean {
   return (
     isRegistered &&
     isGiveAction(veriClaim) &&
@@ -138,7 +249,78 @@ export const isGiveRecordTheUserCanConfirm = (
     veriClaim.issuer !== activeDid &&
     !containsHiddenDid(veriClaim.claim)
   );
-};
+}
+
+export function notifyWhyCannotConfirm(
+  notifyFun: (notification: NotificationIface, timeout: number) => void,
+  isRegistered: boolean,
+  claimType: string | undefined,
+  giveDetails: GiveSummaryRecord | undefined,
+  activeDid: string,
+  confirmerIdList: string[] = [],
+) {
+  if (!isRegistered) {
+    notifyFun(
+      {
+        group: "alert",
+        type: "info",
+        title: "Not Registered",
+        text: "Someone needs to register you before you can confirm.",
+      },
+      3000,
+    );
+  } else if (!isGiveClaimType(claimType)) {
+    notifyFun(
+      {
+        group: "alert",
+        type: "info",
+        title: "Not A Give",
+        text: "This is not a giving action to confirm.",
+      },
+      3000,
+    );
+  } else if (confirmerIdList.includes(activeDid)) {
+    notifyFun(
+      {
+        group: "alert",
+        type: "info",
+        title: "Already Confirmed",
+        text: "You already confirmed this claim.",
+      },
+      3000,
+    );
+  } else if (giveDetails?.issuerDid == activeDid) {
+    notifyFun(
+      {
+        group: "alert",
+        type: "info",
+        title: "Cannot Confirm",
+        text: "You cannot confirm this because you issued this claim.",
+      },
+      3000,
+    );
+  } else if (serverUtil.containsHiddenDid(giveDetails?.fullClaim)) {
+    notifyFun(
+      {
+        group: "alert",
+        type: "info",
+        title: "Cannot Confirm",
+        text: "You cannot confirm this because some people are hidden.",
+      },
+      3000,
+    );
+  } else {
+    notifyFun(
+      {
+        group: "alert",
+        type: "info",
+        title: "Cannot Confirm",
+        text: "You cannot confirm this claim. There are no other details -- we can help more if you contact us and send us screenshots.",
+      },
+      3000,
+    );
+  }
+}
 
 export async function blobToBase64(blob: Blob): Promise<string> {
   return new Promise((resolve, reject) => {
@@ -176,9 +358,9 @@ export function base64ToBlob(base64DataUrl: string, sliceSize = 512) {
  * @returns the DID of the person who offered, or undefined if hidden
  * @param veriClaim is expected to have fields: claim and issuer
  */
-export const offerGiverDid: (
+export function offerGiverDid(
-  arg0: GenericCredWrapper<OfferVerifiableCredential>,
+  veriClaim: GenericCredWrapper<OfferVerifiableCredential>,
-) => string | undefined = (veriClaim) => {
+): string | undefined {
   let giver;
   if (
     veriClaim.claim.offeredBy?.identifier &&
@@ -189,7 +371,7 @@ export const offerGiverDid: (
     giver = veriClaim.issuer;
   }
   return giver;
-};
+}
 
 /**
  * @returns true if the user can fulfill the offer
@@ -198,9 +380,9 @@ export const offerGiverDid: (
 export const canFulfillOffer = (
   veriClaim: GenericCredWrapper<GenericVerifiableCredential>,
 ) => {
-  return !!(
+  return (
     veriClaim.claimType === "Offer" &&
-    offerGiverDid(veriClaim as GenericCredWrapper<OfferVerifiableCredential>)
+    !!offerGiverDid(veriClaim as GenericCredWrapper<OfferVerifiableCredential>)
   );
 };
 
@@ -272,10 +454,56 @@ export function findAllVisibleToDids(
 
 export interface AccountKeyInfo extends Account, KeyMeta {}
 
-export const getAccount = async (
+export const retrieveAccountCount = async (): Promise<number> => {
+  // one of the few times we use accountsDBPromise directly; try to avoid more usage
+  const accountsDB = await accountsDBPromise;
+  return await accountsDB.accounts.count();
+};
+
+export const retrieveAccountDids = async (): Promise<string[]> => {
+  // one of the few times we use accountsDBPromise directly; try to avoid more usage
+  const accountsDB = await accountsDBPromise;
+  const allAccounts = await accountsDB.accounts.toArray();
+  const allDids = allAccounts.map((acc) => acc.did);
+  return allDids;
+};
+
+// This is provided and recommended when the full key is not necessary so that
+// future work could separate this info from the sensitive key material.
+export const retrieveAccountMetadata = async (
   activeDid: string,
 ): Promise<AccountKeyInfo | undefined> => {
-  await accountsDB.open();
+  // one of the few times we use accountsDBPromise directly; try to avoid more usage
+  const accountsDB = await accountsDBPromise;
+  const account = (await accountsDB.accounts
+    .where("did")
+    .equals(activeDid)
+    .first()) as Account;
+  if (account) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { identity, mnemonic, ...metadata } = account;
+    return metadata;
+  } else {
+    return undefined;
+  }
+};
+
+export const retrieveAllAccountsMetadata = async (): Promise<Account[]> => {
+  // one of the few times we use accountsDBPromise directly; try to avoid more usage
+  const accountsDB = await accountsDBPromise;
+  const array = await accountsDB.accounts.toArray();
+  return array.map((account) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { identity, mnemonic, ...metadata } = account;
+    return metadata;
+  });
+};
+
+export const retrieveFullyDecryptedAccount = async (
+  activeDid: string,
+): Promise<AccountKeyInfo | undefined> => {
+  // one of the few times we use accountsDBPromise directly; try to avoid more usage
+  const accountsDB = await accountsDBPromise;
   const account = (await accountsDB.accounts
     .where("did")
     .equals(activeDid)
@@ -283,6 +511,15 @@ export const getAccount = async (
   return account;
 };
 
+// let's try and eliminate this
+export const retrieveAllFullyDecryptedAccounts = async (): Promise<
+  Array<AccountKeyInfo>
+> => {
+  const accountsDB = await accountsDBPromise;
+  const allAccounts = await accountsDB.accounts.toArray();
+  return allAccounts;
+};
+
 /**
  * Generates a new identity, saves it to the database, and sets it as the active identity.
  * @return {Promise<string>} with the DID of the new identity
@@ -296,7 +533,8 @@ export const generateSaveAndActivateIdentity = async (): Promise<string> => {
   const newId = newIdentifier(address, publicHex, privateHex, derivationPath);
   const identity = JSON.stringify(newId);
 
-  await accountsDB.open();
+  // one of the few times we use accountsDBPromise directly; try to avoid more usage
+  const accountsDB = await accountsDBPromise;
   await accountsDB.accounts.add({
     dateCreated: new Date().toISOString(),
     derivationPath: derivationPath,
@@ -306,9 +544,9 @@ export const generateSaveAndActivateIdentity = async (): Promise<string> => {
     publicKeyHex: newId.keys[0].publicKeyHex,
   });
 
-  await db.settings.update(MASTER_SETTINGS_KEY, {
+  await updateDefaultSettings({ activeDid: newId.did });
-    activeDid: newId.did,
+  //console.log("Updated default settings in util");
-  });
+  await updateAccountSettings(newId.did, { isRegistered: false });
 
   return newId.did;
 };
@@ -327,7 +565,8 @@ export const registerAndSavePasskey = async (
     passkeyCredIdHex,
     publicKeyHex: Buffer.from(publicKeyBytes).toString("hex"),
   };
-  await accountsDB.open();
+  // one of the few times we use accountsDBPromise directly; try to avoid more usage
+  const accountsDB = await accountsDBPromise;
   await accountsDB.accounts.add(account);
   return account;
 };
@@ -336,45 +575,40 @@ export const registerSaveAndActivatePasskey = async (
   keyName: string,
 ): Promise<Account> => {
   const account = await registerAndSavePasskey(keyName);
-
+  await updateDefaultSettings({ activeDid: account.did });
-  await db.open();
+  await updateAccountSettings(account.did, { isRegistered: false });
-  await db.settings.update(MASTER_SETTINGS_KEY, {
-    activeDid: account.did,
-  });
-
   return account;
 };
 
 export const getPasskeyExpirationSeconds = async (): Promise<number> => {
-  await db.open();
+  const settings = await retrieveSettingsForActiveAccount();
-  const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+  return (
-  const passkeyExpirationSeconds =
     (settings?.passkeyExpirationMinutes ?? DEFAULT_PASSKEY_EXPIRATION_MINUTES) *
-    60;
+    60
-  return passkeyExpirationSeconds;
+  );
 };
 
+// These are shared with the service worker and should be a constant. Look for the same name in additional-scripts.js
+export const DAILY_CHECK_TITLE = "DAILY_CHECK";
+// This is a special value that tells the service worker to send a direct notification to the device, skipping filters.
+export const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";
+
 export const sendTestThroughPushServer = async (
   subscriptionJSON: PushSubscriptionJSON,
   skipFilter: boolean,
 ): Promise<AxiosResponse> => {
-  await db.open();
+  const settings = await retrieveSettingsForActiveAccount();
-  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 newPayload = {
+    ...subscriptionJSON,
+    // ... overridden with the following
     // eslint-disable-next-line prettier/prettier
     message: `Test, where you will see this message ${ skipFilter ? "un" : "" }filtered.`,
     title: skipFilter ? DIRECT_PUSH_TITLE : "Your Web Push",
-    ...subscriptionJSON,
   };
   console.log("Sending a test web push message:", newPayload);
   const payloadStr = JSON.stringify(newPayload);

src/main.ts

@@ -22,6 +22,8 @@ import {
   faBurst,
   faCalendar,
   faCamera,
+  faCaretDown,
+  faChair,
   faCheck,
   faChevronDown,
   faChevronLeft,
@@ -39,9 +41,13 @@ import {
   faDollar,
   faEllipsis,
   faEllipsisVertical,
+  faEnvelopeOpenText,
+  faEraser,
   faEye,
   faEyeSlash,
+  faFileContract,
   faFileLines,
+  faFilter,
   faFloppyDisk,
   faFolderOpen,
   faForward,
@@ -54,6 +60,8 @@ import {
   faHouseChimney,
   faImagePortrait,
   faLeftRight,
+  faLightbulb,
+  faLink,
   faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,
@@ -66,6 +74,7 @@ import {
   faPlus,
   faQuestion,
   faQrcode,
+  faRightFromBracket,
   faRotate,
   faShareNodes,
   faSpinner,
@@ -92,6 +101,8 @@ library.add(
   faBurst,
   faCalendar,
   faCamera,
+  faCaretDown,
+  faChair,
   faCheck,
   faChevronDown,
   faChevronLeft,
@@ -109,9 +120,13 @@ library.add(
   faDollar,
   faEllipsis,
   faEllipsisVertical,
+  faEnvelopeOpenText,
+  faEraser,
   faEye,
   faEyeSlash,
+  faFileContract,
   faFileLines,
+  faFilter,
   faFloppyDisk,
   faFolderOpen,
   faForward,
@@ -124,6 +139,8 @@ library.add(
   faHouseChimney,
   faImagePortrait,
   faLeftRight,
+  faLightbulb,
+  faLink,
   faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,
@@ -137,6 +154,7 @@ library.add(
   faQrcode,
   faQuestion,
   faRotate,
+  faRightFromBracket,
   faShareNodes,
   faSpinner,
   faSquare,
@@ -162,11 +180,14 @@ function setupGlobalErrorHandler(app: VueApp) {
     info: string,
   ) => {
     console.error(
-      "Ouch! Global Error Handler. Info:",
+      "Ouch! Global Error Handler.",
-      info,
       "Error:",
       err,
-      "Instance:",
+      "- Error toString:",
+      err.toString(),
+      "- Info:",
+      info,
+      "- Instance:",
       instance,
     );
     // Want to show a nice notiwind notification but can't figure out how.

src/router/index.ts

@@ -5,7 +5,7 @@ import {
   RouteLocationNormalized,
   RouteRecordRaw,
 } from "vue-router";
-import { accountsDB } from "@/db/index";
+import { accountsDBPromise } from "@/db/index";
 
 /**
  *
@@ -18,7 +18,8 @@ const enterOrStart = async (
   from: RouteLocationNormalized,
   next: NavigationGuardNext,
 ) => {
-  await accountsDB.open();
+  // one of the few times we use accountsDBPromise directly; try to avoid more usage
+  const accountsDB = await accountsDBPromise;
   const num_accounts = await accountsDB.accounts.count();
   if (num_accounts > 0) {
     next();
@@ -43,6 +44,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "claim-add-raw",
     component: () => import("../views/ClaimAddRawView.vue"),
   },
+  {
+    path: "/claim-cert/:id",
+    name: "claim-cert",
+    component: () => import("../views/ClaimCertificateView.vue"),
+  },
   {
     path: "/confirm-contact",
     name: "confirm-contact",
@@ -58,13 +64,18 @@ const routes: Array<RouteRecordRaw> = [
     name: "contact-amounts",
     component: () => import("../views/ContactAmountsView.vue"),
   },
+  {
+    path: "/contact-edit/:did",
+    name: "contact-edit",
+    component: () => import("../views/ContactEditView.vue"),
+  },
   {
     path: "/contact-gift",
     name: "contact-gift",
     component: () => import("../views/ContactGiftingView.vue"),
   },
   {
-    path: "/contact-import",
+    path: "/contact-import/:jwt?",
     name: "contact-import",
     component: () => import("../views/ContactImportView.vue"),
   },
@@ -103,6 +114,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "help-notifications",
     component: () => import("../views/HelpNotificationsView.vue"),
   },
+  {
+    path: "/help-notification-types",
+    name: "help-notification-types",
+    component: () => import("../views/HelpNotificationTypesView.vue"),
+  },
   {
     path: "/help-onboarding",
     name: "help-onboarding",
@@ -128,6 +144,21 @@ const routes: Array<RouteRecordRaw> = [
     name: "import-derive",
     component: () => import("../views/ImportDerivedAccountView.vue"),
   },
+  {
+    path: "/invite-one",
+    name: "invite-one",
+    component: () => import("../views/InviteOneView.vue"),
+  },
+  {
+    path: "/invite-one-accept/:jwt?",
+    name: "InviteOneAcceptView",
+    component: () => import("@/views/InviteOneAcceptView.vue"),
+  },
+  {
+    path: "/new-activity",
+    name: "new-activity",
+    component: () => import("../views/NewActivityView.vue"),
+  },
   {
     path: "/new-edit-account",
     name: "new-edit-account",
@@ -148,6 +179,21 @@ const routes: Array<RouteRecordRaw> = [
     name: "offer-details",
     component: () => import("../views/OfferDetailsView.vue"),
   },
+  {
+    path: "/onboard-meeting-list",
+    name: "onboard-meeting-list",
+    component: () => import("../views/OnboardMeetingListView.vue"),
+  },
+  {
+    path: "/onboard-meeting-members/:groupId",
+    name: "onboard-meeting-members",
+    component: () => import("../views/OnboardMeetingMembersView.vue"),
+  },
+  {
+    path: "/onboard-meeting-setup",
+    name: "onboard-meeting-setup",
+    component: () => import("../views/OnboardMeetingSetupView.vue"),
+  },
   {
     path: "/project/:id?",
     name: "project",
@@ -174,6 +220,16 @@ const routes: Array<RouteRecordRaw> = [
     name: "quick-action-bvc-end",
     component: () => import("../views/QuickActionBvcEndView.vue"),
   },
+  {
+    path: "/recent-offers-to-user",
+    name: "recent-offers-to-user",
+    component: () => import("../views/RecentOffersToUserView.vue"),
+  },
+  {
+    path: "/recent-offers-to-user-projects",
+    name: "recent-offers-to-user-projects",
+    component: () => import("../views/RecentOffersToUserProjectsView.vue"),
+  },
   {
     path: "/scan-contact",
     name: "scan-contact",
@@ -189,6 +245,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "seed-backup",
     component: () => import("../views/SeedBackupView.vue"),
   },
+  {
+    path: "/share-my-contact-info",
+    name: "share-my-contact-info",
+    component: () => import("@/views/ShareMyContactInfoView.vue"),
+  },
   {
     path: "/shared-photo",
     name: "shared-photo",
@@ -212,6 +273,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "test",
     component: () => import("../views/TestView.vue"),
   },
+  {
+    path: "/userProfile/:id?",
+    name: "userProfile",
+    component: () => import("../views/UserProfileView.vue"),
+  },
 ];
 
 /** @type {*} */
@@ -228,6 +294,7 @@ const errorHandler = (
 ) => {
   // Handle the error here
   console.error("Caught in top level error handler:", error, to, from);
+  alert("Something is very wrong. Try reloading or restarting the app.");
 
   // You can also perform additional actions, such as displaying an error message or redirecting the user to a specific page
 };

src/store/app.ts

@@ -1,20 +0,0 @@
-// @ts-check
-import { defineStore } from "pinia";
-
-export const useAppStore = defineStore({
-  id: "app",
-  state: () => ({
-    _projectId:
-      typeof localStorage.getItem("projectId") === "undefined"
-        ? ""
-        : localStorage.getItem("projectId"),
-  }),
-  getters: {
-    projectId: (state): string => state._projectId as string,
-  },
-  actions: {
-    async setProjectId(newProjectId: string) {
-      localStorage.setItem("projectId", newProjectId);
-    },
-  },
-});

src/test/index.ts

@@ -1,10 +1,9 @@
 import axios from "axios";
 import * as didJwt from "did-jwt";
 import { AppString } from "@/constants/app";
-import { db } from "../db";
+import { retrieveSettingsForActiveAccount } from "../db";
-import { SERVICE_ID } from "../libs/endorserServer";
+import { SERVICE_ID } from "@/libs/endorserServer";
-import { deriveAddress, newIdentifier } from "../libs/crypto";
+import { deriveAddress, newIdentifier } from "@/libs/crypto";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 
 /**
  * Get User #0 to sign & submit a RegisterAction for the user's activeDid.
@@ -17,8 +16,7 @@ export async function testServerRegisterUser() {
 
   const identity0 = newIdentifier(addr, publicHex, privateHex, deriPath);
 
-  await db.open();
+  const settings = await retrieveSettingsForActiveAccount();
-  const settings = await db.settings.get(MASTER_SETTINGS_KEY);
 
   // Make a claim
   const vcClaim = {
@@ -26,7 +24,7 @@ export async function testServerRegisterUser() {
     "@type": "RegisterAction",
     agent: { did: identity0.did },
     object: SERVICE_ID,
-    participant: { did: settings?.activeDid },
+    participant: { did: settings.activeDid },
   };
   // Make a payload for the claim
   const vcPayload = {
@@ -53,7 +51,7 @@ export async function testServerRegisterUser() {
 
   const payload = JSON.stringify({ jwtEncoded: vcJwt });
   const endorserApiServer =
-    settings?.apiServer || AppString.TEST_ENDORSER_API_SERVER;
+    settings.apiServer || AppString.TEST_ENDORSER_API_SERVER;
   const url = endorserApiServer + "/api/claim";
   const headers = {
     "Content-Type": "application/json",

src/views/ClaimAddRawView.vue

@@ -32,11 +32,12 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import { NotificationIface } from "@/constants/app";
-import { db } from "@/db/index";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
-import * as serverUtil from "@/libs/endorserServer";
 import QuickNav from "@/components/QuickNav.vue";
+import { NotificationIface } from "@/constants/app";
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
+import * as serverUtil from "@/libs/endorserServer";
+import * as libsUtil from "@/libs/util";
+import { errorStringForLog } from "@/libs/endorserServer";
 
 @Component({
   components: { QuickNav },
@@ -50,17 +51,60 @@ export default class ClaimAddRawView extends Vue {
   claimStr = "";
 
   async mounted() {
-    await db.open();
+    const settings = await retrieveSettingsForActiveAccount();
-    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+    this.activeDid = settings.activeDid || "";
-    this.activeDid = settings?.activeDid || "";
+    this.apiServer = settings.apiServer || "";
-    this.apiServer = settings?.apiServer || "";
 
     this.claimStr = (this.$route as Router).query["claim"];
-    try {
+    if (this.claimStr) {
-      this.veriClaim = JSON.parse(this.claimStr);
+      try {
-      this.claimStr = JSON.stringify(this.veriClaim, null, 2);
+        const veriClaim = JSON.parse(this.claimStr);
-    } catch (e) {
+        this.claimStr = JSON.stringify(veriClaim, null, 2);
-      // ignore a parse
+      } catch (e) {
+        // ignore a parse error
+      }
+    } else {
+      // there may be no link that uses this, meaning you'd have to enter it in a browser
+      const claimJwtId = (this.$route as Router).query["claimJwtId"];
+      if (claimJwtId) {
+        const urlPath = libsUtil.isGlobalUri(claimJwtId)
+          ? "/api/claim/byHandle/"
+          : "/api/claim/";
+        const url = this.apiServer + urlPath + encodeURIComponent(claimJwtId);
+        const headers = await serverUtil.getHeaders(this.activeDid);
+
+        try {
+          const response = await this.axios.get(url, { headers });
+          if (response.status === 200) {
+            const claim = response.data?.claim;
+            claim.lastClaimId = serverUtil.stripEndorserPrefix(claimJwtId);
+            this.claimStr = JSON.stringify(claim, null, 2);
+          } else {
+            throw {
+              message: "Got an error loading that claim.",
+              response: {
+                status: response.status,
+                statusText: response.statusText,
+                // url is in "fetch" response but not in AxiosResponse
+              },
+            };
+          }
+        } catch (error: unknown) {
+          logConsoleAndDb(
+            "Error retrieving claim: " + errorStringForLog(error),
+            true,
+          );
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error",
+              text: "Got an error retrieving claim data.",
+            },
+            3000,
+          );
+        }
+      }
     }
   }
 
@@ -89,9 +133,9 @@ export default class ClaimAddRawView extends Vue {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "There was a problem submitting the claim. See logs for more info.",
+          text: "There was a problem submitting the claim.",
         },
-        -1,
+        5000,
       );
     }
   }

src/views/ClaimCertificateView.vue

@@ -0,0 +1,270 @@
+<template>
+  <section id="Content">
+    <div class="flex items-center justify-center h-screen">
+      <div v-if="claimData">
+        <router-link :to="'/claim/' + this.claimId">
+          <canvas class="w-full block mx-auto" ref="claimCanvas"></canvas>
+        </router-link>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { nextTick } from "vue";
+import QRCode from "qrcode";
+
+import { APP_SERVER, NotificationIface } from "@/constants/app";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import * as serverUtil from "@/libs/endorserServer";
+
+@Component
+export default class ClaimCertificateView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid = "";
+  allMyDids: Array<string> = [];
+  apiServer = "";
+  claimId = "";
+  claimData = null;
+
+  serverUtil = serverUtil;
+
+  async created() {
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.apiServer = settings.apiServer || "";
+    const pathParams = window.location.pathname.substring(
+      "/claim-cert/".length,
+    );
+    this.claimId = pathParams;
+    await this.fetchClaim();
+  }
+
+  async fetchClaim() {
+    try {
+      const headers = await serverUtil.getHeaders(this.activeDid);
+      const response = await this.axios.get(
+        `${this.apiServer}/api/claim/${this.claimId}`,
+        { headers },
+      );
+      if (response.status === 200) {
+        this.claimData = await response.data;
+        const claimEntryIds = [this.claimId];
+        const headers = await serverUtil.getHeaders(this.activeDid);
+        const confirmerResponse = await this.axios.post(
+          `${this.apiServer}/api/v2/report/confirmers/?claimEntryIds=${this.claimId}`,
+          { claimEntryIds },
+          { headers },
+        );
+        let confirmerIds: Array<string> = [];
+        if (confirmerResponse.status === 200) {
+          confirmerIds = await confirmerResponse.data.data;
+        }
+        await nextTick(); // Wait for the DOM to update
+        if (this.claimData) {
+          this.drawCanvas(this.claimData, confirmerIds);
+        }
+      } else {
+        throw new Error(`Error fetching claim: ${response.statusText}`);
+      }
+    } catch (error) {
+      console.error("Failed to load claim:", error);
+      this.$notify({
+        group: "alert",
+        type: "danger",
+        title: "Error",
+        text: "There was a problem loading the claim.",
+      });
+    }
+  }
+
+  async drawCanvas(
+    claimData: serverUtil.GenericCredWrapper<serverUtil.GenericVerifiableCredential>,
+    confirmerIds: Array<string>,
+  ) {
+    await db.open();
+    const allContacts = await db.contacts.toArray();
+
+    const canvas = this.$refs.claimCanvas as HTMLCanvasElement;
+    if (canvas) {
+      const CANVAS_WIDTH = 1100;
+      const CANVAS_HEIGHT = 850;
+
+      // size to approximate portrait of 8.5"x11"
+      canvas.width = CANVAS_WIDTH;
+      canvas.height = CANVAS_HEIGHT;
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        // Load the background image
+        const backgroundImage = new Image();
+        backgroundImage.src = "/img/background/cert-frame-2.jpg";
+        backgroundImage.onload = async () => {
+          // Draw the background image
+          ctx.drawImage(backgroundImage, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+
+          // Set font and styles
+          ctx.fillStyle = "black";
+
+          // Draw claim type
+          ctx.font = "bold 20px Arial";
+          const claimTypeText =
+            claimData.claimType === "GiveAction"
+              ? "Gift"
+              : claimData.claimType === "PlanAction"
+                ? "Project"
+                : this.serverUtil.capitalizeAndInsertSpacesBeforeCaps(
+                    claimData.claimType || "",
+                  );
+          const claimTypeWidth = ctx.measureText(claimTypeText).width;
+          ctx.fillText(
+            claimTypeText,
+            (CANVAS_WIDTH - claimTypeWidth) / 2, // Center horizontally
+            CANVAS_HEIGHT * 0.33,
+          );
+
+          if (claimData.claimType === "GiveAction" && claimData.claim.agent) {
+            const presentedText = "Thanks To";
+            ctx.font = "14px Arial";
+            const presentedWidth = ctx.measureText(presentedText).width;
+            ctx.fillText(
+              presentedText,
+              (CANVAS_WIDTH - presentedWidth) / 2, // Center horizontally
+              CANVAS_HEIGHT * 0.37,
+            );
+            const agentDid =
+              claimData.claim.agent.identifier || claimData.claim.agent;
+            const agentText = serverUtil.didInfoForCertificate(
+              agentDid,
+              allContacts,
+            );
+            ctx.font = "bold 20px Arial";
+            const agentWidth = ctx.measureText(agentText).width;
+            ctx.fillText(
+              agentText,
+              (CANVAS_WIDTH - agentWidth) / 2, // Center horizontally
+              CANVAS_HEIGHT * 0.41,
+            );
+          }
+
+          // alternatively, show some offer details
+          if (claimData.claimType === "Offer") {
+            const presentedText = "To";
+            ctx.font = "14px Arial";
+            const presentedWidth = ctx.measureText(presentedText).width;
+            ctx.fillText(
+              presentedText,
+              (CANVAS_WIDTH - presentedWidth) / 2, // Center horizontally
+              CANVAS_HEIGHT * 0.37,
+            );
+            // fulfills
+            const agentDid =
+              claimData.claim.agent.identifier || claimData.claim.agent;
+            const agentText = serverUtil.didInfoForCertificate(
+              agentDid,
+              allContacts,
+            );
+            ctx.font = "bold 20px Arial";
+            const agentWidth = ctx.measureText(agentText).width;
+            ctx.fillText(
+              agentText,
+              (CANVAS_WIDTH - agentWidth) / 2, // Center horizontally
+              CANVAS_HEIGHT * 0.41,
+            );
+          }
+
+          const descriptionText =
+            claimData.claim.name ||
+            claimData.claim.description ||
+            claimData.claim.itemOffered?.description; // for Offers
+          if (descriptionText) {
+            const descriptionLine =
+              descriptionText.length > 50
+                ? descriptionText.substring(0, 75) + "..."
+                : descriptionText;
+            ctx.font = "14px Arial";
+            const descriptionWidth = ctx.measureText(descriptionLine).width;
+            ctx.fillText(
+              descriptionLine,
+              (CANVAS_WIDTH - descriptionWidth) / 2,
+              CANVAS_HEIGHT * 0.495,
+            );
+          }
+
+          const possibleObject =
+            claimData.claim.object || // for GiveActions
+            claimData.claim.includesObject; // for Offers
+          if (possibleObject?.amountOfThisGood && possibleObject?.unitCode) {
+            const amount = possibleObject.amountOfThisGood;
+            const unit = possibleObject.unitCode;
+            const amountText = serverUtil.displayAmount(unit, amount);
+            const amountWidth = ctx.measureText(amountText).width;
+            // if there was no description then put this in that spot, otherwise put it below the description
+            const yPos = descriptionText
+              ? CANVAS_HEIGHT * 0.525
+              : CANVAS_HEIGHT * 0.495;
+            ctx.font = "14px Arial";
+            ctx.fillText(amountText, (CANVAS_WIDTH - amountWidth) / 2, yPos);
+          }
+
+          // Draw claim issuer
+          if (
+            claimData.issuer == null ||
+            serverUtil.isHiddenDid(claimData.issuer) ||
+            // don't show if issuer claimed for themselves
+            // (The confirmations are the good stuff anyway, and self-issued certs shouldn't detract from that.)
+            claimData.issuer !== claimData.claim.agent?.identifier
+          ) {
+            ctx.font = "14px Arial";
+            let fullIssuer = serverUtil.didInfoForCertificate(
+              claimData.issuer,
+              allContacts,
+            );
+            if (fullIssuer.length > 30) {
+              fullIssuer = fullIssuer.substring(0, 30) + "...";
+            }
+            const issuerText = "Issued by " + fullIssuer;
+            ctx.fillText(issuerText, CANVAS_WIDTH * 0.3, CANVAS_HEIGHT * 0.6);
+          }
+
+          // Draw number of claim confirmers
+          if (confirmerIds.length > 0) {
+            const confirmerText =
+              "Confirmed by " +
+              confirmerIds.length +
+              (confirmerIds.length === 1 ? " person" : " people");
+            ctx.font = "14px Arial";
+            ctx.fillText(
+              confirmerText,
+              CANVAS_WIDTH * 0.3,
+              CANVAS_HEIGHT * 0.63,
+            );
+          }
+
+          // Draw claim ID
+          ctx.font = "14px Arial";
+          ctx.fillText(this.claimId, CANVAS_WIDTH * 0.3, CANVAS_HEIGHT * 0.7);
+          ctx.fillText(
+            "via EndorserSearch.com",
+            CANVAS_WIDTH * 0.3,
+            CANVAS_HEIGHT * 0.73,
+          );
+
+          // Generate and draw QR code
+          const qrCodeCanvas = document.createElement("canvas");
+          await QRCode.toCanvas(
+            qrCodeCanvas,
+            APP_SERVER + "/claim/" + this.claimId,
+            {
+              width: 150,
+              color: { light: "#0000" /* Transparent background */ },
+            },
+          );
+          ctx.drawImage(qrCodeCanvas, CANVAS_WIDTH * 0.6, CANVAS_HEIGHT * 0.55);
+        };
+      }
+    }
+  }
+}
+</script>

src/views/ClaimReportCertificateView.vue

@@ -0,0 +1,190 @@
+<template>
+  <section id="Content">
+    <div v-if="claimData">
+      <canvas ref="claimCanvas"></canvas>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { nextTick } from "vue";
+import QRCode from "qrcode";
+
+import { APP_SERVER, NotificationIface } from "@/constants/app";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import * as endorserServer from "@/libs/endorserServer";
+
+@Component
+export default class ClaimReportCertificateView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid = "";
+  allMyDids: Array<string> = [];
+  apiServer = "";
+  claimId = "";
+  claimData = null;
+
+  endorserServer = endorserServer;
+
+  async created() {
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.apiServer = settings.apiServer || "";
+    const pathParams = window.location.pathname.substring(
+      "/claim-cert/".length,
+    );
+    this.claimId = pathParams;
+    await this.fetchClaim();
+  }
+
+  async fetchClaim() {
+    try {
+      const response = await fetch(
+        `${this.apiServer}/api/claim/${this.claimId}`,
+      );
+      if (response.ok) {
+        this.claimData = await response.json();
+        await nextTick(); // Wait for the DOM to update
+        if (this.claimData) {
+          this.drawCanvas(this.claimData);
+        }
+      } else {
+        throw new Error(`Error fetching claim: ${response.statusText}`);
+      }
+    } catch (error) {
+      console.error("Failed to load claim:", error);
+      this.$notify({
+        group: "alert",
+        type: "danger",
+        title: "Error",
+        text: "There was a problem loading the claim.",
+      });
+    }
+  }
+
+  async drawCanvas(
+    claimData: endorserServer.GenericCredWrapper<endorserServer.GenericVerifiableCredential>,
+  ) {
+    await db.open();
+    const allContacts = await db.contacts.toArray();
+
+    const canvas = this.$refs.claimCanvas as HTMLCanvasElement;
+    if (canvas) {
+      const CANVAS_WIDTH = 1100;
+      const CANVAS_HEIGHT = 850;
+
+      // size to approximate portrait of 8.5"x11"
+      canvas.width = CANVAS_WIDTH;
+      canvas.height = CANVAS_HEIGHT;
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        // Load the background image
+        const backgroundImage = new Image();
+        backgroundImage.src = "/img/background/cert-frame-2.jpg";
+        backgroundImage.onload = async () => {
+          // Draw the background image
+          ctx.drawImage(backgroundImage, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+
+          // Set font and styles
+          ctx.fillStyle = "black";
+
+          // Draw claim type
+          ctx.font = "bold 20px Arial";
+          const claimTypeText =
+            this.endorserServer.capitalizeAndInsertSpacesBeforeCaps(
+              claimData.claimType || "",
+            );
+          const claimTypeWidth = ctx.measureText(claimTypeText).width;
+          ctx.fillText(
+            claimTypeText,
+            (CANVAS_WIDTH - claimTypeWidth) / 2, // Center horizontally
+            CANVAS_HEIGHT * 0.33,
+          );
+
+          if (claimData.claim.agent) {
+            const presentedText = "Presented to ";
+            ctx.font = "14px Arial";
+            const presentedWidth = ctx.measureText(presentedText).width;
+            ctx.fillText(
+              presentedText,
+              (CANVAS_WIDTH - presentedWidth) / 2, // Center horizontally
+              CANVAS_HEIGHT * 0.37,
+            );
+            const agentText = endorserServer.didInfoForCertificate(
+              claimData.claim.agent,
+              allContacts,
+            );
+            ctx.font = "bold 20px Arial";
+            const agentWidth = ctx.measureText(agentText).width;
+            ctx.fillText(
+              agentText,
+              (CANVAS_WIDTH - agentWidth) / 2, // Center horizontally
+              CANVAS_HEIGHT * 0.4,
+            );
+          }
+
+          const descriptionText =
+            claimData.claim.name || claimData.claim.description;
+          if (descriptionText) {
+            const descriptionLine =
+              descriptionText.length > 50
+                ? descriptionText.substring(0, 75) + "..."
+                : descriptionText;
+            ctx.font = "14px Arial";
+            const descriptionWidth = ctx.measureText(descriptionLine).width;
+            ctx.fillText(
+              descriptionLine,
+              (CANVAS_WIDTH - descriptionWidth) / 2,
+              CANVAS_HEIGHT * 0.45,
+            );
+          }
+
+          // Draw claim issuer & recipient
+          if (claimData.issuer) {
+            ctx.font = "14px Arial";
+            const issuerText =
+              "Issued by " +
+              endorserServer.didInfoForCertificate(
+                claimData.issuer,
+                allContacts,
+              );
+            ctx.fillText(issuerText, CANVAS_WIDTH * 0.3, CANVAS_HEIGHT * 0.6);
+          }
+
+          // Draw claim ID
+          ctx.font = "14px Arial";
+          ctx.fillText(this.claimId, CANVAS_WIDTH * 0.3, CANVAS_HEIGHT * 0.7);
+          ctx.fillText(
+            "via EndorserSearch.com",
+            CANVAS_WIDTH * 0.3,
+            CANVAS_HEIGHT * 0.73,
+          );
+
+          // Generate and draw QR code
+          const qrCodeCanvas = document.createElement("canvas");
+          await QRCode.toCanvas(
+            qrCodeCanvas,
+            APP_SERVER + "/claim/" + this.claimId,
+            {
+              width: 150,
+              color: { light: "#0000" /* Transparent background */ },
+            },
+          );
+          ctx.drawImage(qrCodeCanvas, CANVAS_WIDTH * 0.6, CANVAS_HEIGHT * 0.55);
+        };
+      }
+    }
+  }
+}
+</script>

src/views/ClaimView.vue

@@ -17,40 +17,50 @@
     </div>
 
     <!-- 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 w-full">
-      <div class="block flex gap-4 overflow-hidden">
+      <div class="block flex gap-4 overflow-hidden w-full">
-        <div class="overflow-hidden">
+        <div class="w-full">
-          <h2 class="text-md font-bold">
+          <div class="flex columns-3">
-            {{ capitalizeAndInsertSpacesBeforeCaps(veriClaim.claimType) }}
+            <h2 class="text-md font-bold w-full">
-            <button
+              {{ capitalizeAndInsertSpacesBeforeCaps(veriClaim.claimType) }}
-              v-if="
-                ['GiveAction', 'Offer'].includes(
-                  veriClaim.claimType as string,
-                ) && veriClaim.issuer === activeDid
-              "
-              @click="onClickEditClaim"
-              title="Edit"
-              data-testId="editClaimButton"
-            >
-              <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
-            </button>
-          </h2>
-          <div class="text-sm">
-            <div>
-              {{ veriClaim.id }}
               <button
-                @click="
+                v-if="
-                  libsUtil.doCopyTwoSecRedo(
+                  ['GiveAction', 'Offer', 'PlanAction'].includes(
-                    veriClaim.id as string,
+                    veriClaim.claimType as string,
-                    () => (showIdCopy = !showIdCopy),
+                  ) && veriClaim.issuer === activeDid
-                  )
+                  // a PlanAction agent also could edit one of those,
+                  // but rather than add more Plan-specific logic to detect the agent
+                  // we'll let them click the Project link and edit from there
                 "
-                class="ml-2 mr-2"
+                @click="onClickEditClaim"
+                title="Edit"
+                data-testId="editClaimButton"
               >
-                <fa icon="copy" class="text-slate-400 fa-fw" />
+                <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
               </button>
-              <span v-show="showIdCopy">Copied ID</span>
+            </h2>
+            <div class="flex justify-center w-full">
+              <router-link
+                :to="'/claim-cert/' + encodeURIComponent(veriClaim.id)"
+                class="text-blue-500 mt-2"
+                title="Printable Certificate"
+              >
+                <fa icon="square" class="text-white bg-yellow-500 p-1" />
+              </router-link>
             </div>
+            <!-- show link icon to copy this URL to the clipboard -->
+            <div class="flex justify-end w-full">
+              <button
+                title="Copy Link"
+                @click="
+                  copyToClipboard('A link to this page', window.location.href)
+                "
+              >
+                <fa icon="link" class="text-slate-500" />
+              </button>
+            </div>
+          </div>
+          <div class="text-sm">
             <div data-testId="description">
               <fa icon="message" class="fa-fw text-slate-400" />
               {{
@@ -60,24 +70,11 @@
             </div>
             <div>
               <fa icon="user" class="fa-fw text-slate-400" />
-              {{ veriClaim.issuer }}
+              {{ didInfo(veriClaim.issuer) }}
-              <span v-if="!serverUtil.isEmptyOrHiddenDid(veriClaim.issuer)">
-                <button
-                  @click="
-                    libsUtil.doCopyTwoSecRedo(
-                      veriClaim.issuer as string,
-                      () => (showDidCopy = !showDidCopy),
-                    )
-                  "
-                  class="ml-2 mr-2"
-                >
-                  <fa icon="copy" class="text-slate-400 fa-fw" />
-                </button>
-                <span v-show="showDidCopy">Copied DID</span>
-              </span>
             </div>
             <div>
               <fa icon="calendar" class="fa-fw text-slate-400" />
+              Recorded
               {{ veriClaim.issuedAt?.replace(/T/, " ").replace(/Z/, " UTC") }}
             </div>
             <div v-if="veriClaim.claim.image" class="flex justify-center">
@@ -86,10 +83,19 @@
               </a>
             </div>
 
+            <div v-if="veriClaim.claimType === 'PlanAction'" class="mt-4">
+              <router-link
+                :to="'/project/' + encodeURIComponent(veriClaim.handleId)"
+                class="text-blue-500 mt-2"
+              >
+                Go to Project page
+              </router-link>
+            </div>
+
             <!-- Fullfills Links -->
 
             <!-- fullfills links for a give -->
-            <div v-if="detailsForGive?.fulfillsPlanHandleId">
+            <div v-if="detailsForGive?.fulfillsPlanHandleId" class="mt-4">
               <router-link
                 :to="
                   '/project/' +
@@ -113,7 +119,7 @@
                 @click="
                   showDifferentClaimPage(detailsForGive?.fulfillsHandleId)
                 "
-                class="text-blue-500 mt-4"
+                class="text-blue-500 mt-4 cursor-pointer"
               >
                 Fulfills
                 {{
@@ -136,10 +142,52 @@
                 Offered to a bigger plan...
               </router-link>
             </div>
+
+            <!-- Providers -->
+            <div v-if="providersForGive?.length > 0" class="mt-4">
+              <span>Other assistance provided by:</span>
+              <ul class="ml-4">
+                <li
+                  v-for="provider of providersForGive"
+                  :key="provider.identifier"
+                  class="list-disc ml-4"
+                >
+                  <div class="flex gap-4">
+                    <div class="grow overflow-hidden">
+                      <a
+                        @click="
+                          provider.identifier.startsWith('did:')
+                            ? this.$router.push(
+                                '/did/' +
+                                  encodeURIComponent(provider.identifier),
+                              )
+                            : showDifferentClaimPage(provider.identifier)
+                        "
+                        class="text-blue-500 mt-4 cursor-pointer"
+                      >
+                        an activity...
+                      </a>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </div>
     </div>
+    <div class="mt-2">
+      <fa icon="comment" class="text-slate-400" />
+      {{ issuerName }} posted that.
+    </div>
+    <!--
+    <div>
+      <router-link :to="'/claim-cert/' + encodeURIComponent(veriClaim.id)">
+        <fa icon="file-contract" class="text-slate-400" />
+        <span class="ml-2 text-blue-500">Printable Certificate</span>
+      </router-link>
+    </div>
+    -->
 
     <div class="mt-8">
       <button
@@ -151,6 +199,7 @@
         <fa icon="hand-holding-heart" class="ml-2 text-white cursor-pointer" />
       </button>
     </div>
+    <GiftedDialog ref="customGiveDialog" />
 
     <div v-if="libsUtil.isGiveAction(veriClaim)">
       <div class="flex columns-3">
@@ -182,13 +231,16 @@
           </router-link>
         </span>
       </div>
-      <GiftedDialog ref="customGiveDialog" />
 
-      <span v-if="totalConfirmers() === 0">Nobody has confirmed this.</span>
+      <div class="mt-2">
-      <span v-else-if="totalConfirmers() === 1">
+        <span v-if="totalConfirmers() === 0">Nobody has confirmed this.</span>
-        One person has confirmed this.
+        <span v-else-if="totalConfirmers() === 1">
-      </span>
+          One person has confirmed this.
-      <span v-else> {{ totalConfirmers() }} people have confirmed this. </span>
+        </span>
+        <span v-else>
+          {{ totalConfirmers() }} people have confirmed this.
+        </span>
+      </div>
 
       <div v-if="totalConfirmers() > 0">
         <div
@@ -207,7 +259,7 @@
           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.
+          The following people have confirmed this claim.
           <ul class="ml-4">
             <li
               v-for="confirmerId in confirmerIdList"
@@ -219,16 +271,13 @@
                   <div class="text-sm">
                     {{ didInfo(confirmerId) }}
                     <span v-if="!serverUtil.isEmptyOrHiddenDid(confirmerId)">
-                      <button
+                      <a
-                        @click="
+                        :href="`/did/${confirmerId}`"
-                          copyToClipboard(
+                        target="_blank"
-                            'The DID of ' + confirmerId,
+                        class="text-blue-500"
-                            confirmerId,
-                          )
-                        "
                       >
-                        <fa icon="copy" class="text-slate-400 fa-fw" />
+                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
-                      </button>
+                      </a>
                     </span>
                   </div>
                 </div>
@@ -260,16 +309,13 @@
                   <div class="text-sm">
                     {{ didInfo(confsVisibleTo) }}
                     <span v-if="!serverUtil.isEmptyOrHiddenDid(confsVisibleTo)">
-                      <button
+                      <a
-                        @click="
+                        :href="`/did/${confsVisibleTo}`"
-                          copyToClipboard(
+                        target="_blank"
-                            'The DID of ' + confsVisibleTo,
+                        class="text-blue-500"
-                            confsVisibleTo,
-                          )
-                        "
                       >
-                        <fa icon="copy" class="text-slate-400 fa-fw" />
+                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
-                      </button>
+                      </a>
                     </span>
                   </div>
                 </div>
@@ -293,10 +339,16 @@
       </div>
     </div>
 
-    <div>
+    <!-- Note that a similar section is found in ConfirmGiftView.vue, and kinda in HiddenDidDialog.vue -->
-      <h2 class="font-bold uppercase text-xl mt-8 mb-2">
+    <h2
-        {{ serverUtil.containsHiddenDid(veriClaim) ? "Visible " : "" }}Details
+      class="font-bold uppercase text-xl text-blue-500 mt-8 cursor-pointer"
-      </h2>
+      @click="showVeriClaimDump = !showVeriClaimDump"
+    >
+      Details
+      <fa v-if="showVeriClaimDump" icon="chevron-up" />
+      <fa v-else icon="chevron-right" />
+    </h2>
+    <div v-if="showVeriClaimDump">
       <div
         v-if="
           serverUtil.containsHiddenDid(veriClaim) &&
@@ -307,24 +359,26 @@
         Some of the details are not visible to you; they show as "HIDDEN". They
         are not visible to any of your direct contacts, either.
         <span v-if="canShare">
-          If you'd like to ask any of your contacts to take a look and see if
+          You can ask one of your contacts to take a look and see if their
-          their contacts can see more details,
+          contacts can see more details:
           <a @click="onClickShareClaim()" class="text-blue-500"
-            >click to send them this info</a
+            >click to send them this page info</a
           >
-          and see if they are willing to make an introduction. They are surely
+          and see if they can make an introduction. Someone is connected to
-          connected to someone; if you don't know who to ask, you might try the
+          people closer to them; if you don't know who to ask, try the person
-          person who registered you.
+          who registered you.
         </span>
         <span v-else>
-          If you'd like to ask any of your contacts to take a look and see if
+          You can ask one of your contacts to take a look and see if their
-          their contacts can see more details,
+          contacts can see more details:
           <a
-            @click="copyToClipboard('This page location', windowLocation)"
+            @click="copyToClipboard('A link to this page', windowLocation)"
             class="text-blue-500"
-            >share this page with them</a
+            >click to copy this page info</a
           >
-          and see if they are willing to make an introduction.
+          and see if they can make an introduction. Someone is connected to
+          people closer to them; if you don't know who to ask, try the person
+          who registered you.
         </span>
       </div>
 
@@ -341,7 +395,7 @@
         <span v-else>
           If you'd like an introduction,
           <a
-            @click="copyToClipboard('Location', windowLocation)"
+            @click="copyToClipboard('A link to this page', windowLocation)"
             class="text-blue-500"
             >share this page with them and ask if they'll tell you more about
             about the participants.</a
@@ -368,18 +422,22 @@
                   <span>
                     {{ didInfo(visDid) }}
                     <span v-if="!serverUtil.isEmptyOrHiddenDid(visDid)">
-                      <button
+                      <a
-                        @click="copyToClipboard('The DID of ' + visDid, visDid)"
+                        :href="`/did/${visDid}`"
+                        target="_blank"
+                        class="text-blue-500"
                       >
-                        <fa icon="copy" class="text-slate-400 fa-fw" />
+                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
-                      </button>
+                      </a>
                     </span>
                     <span v-if="veriClaim.publicUrls?.[visDid]"
-                      >, found at
+                      >, found at&nbsp;<a
-                      <fa icon="globe" class="fa-fw text-slate-400" />&nbsp;<a
                         :href="veriClaim.publicUrls?.[visDid]"
+                        target="_blank"
                         class="text-blue-500"
-                        >{{
+                      >
+                        <fa icon="globe" class="fa-fw" />
+                        {{
                           veriClaim.publicUrls[visDid].substring(
                             veriClaim.publicUrls[visDid].indexOf("//") + 2,
                           )
@@ -394,53 +452,51 @@
         </div>
       </div>
       <span v-if="isEditedGlobalId" class="mt-2">
-        This record is an edited version. The latest version is here.
+        This record is an edited version. The latest version is shown.
       </span>
       <br />
-      <button @click="showVeriClaimDump = !showVeriClaimDump" class="ml-2">
-        Details
-        <fa v-if="showVeriClaimDump" icon="chevron-up" class="text-blue-400" />
-        <fa v-else icon="chevron-down" class="text-blue-400" />
-      </button>
       <!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
       <pre
         v-if="showVeriClaimDump"
         class="text-sm overflow-x-scroll bg-slate-100 px-4 py-3 rounded-md"
         >{{ veriClaimDump }}</pre
       >
-    </div>
 
-    <h2 class="font-bold uppercase text-xl mt-8 mb-2">Full Claim</h2>
+      <h2 class="text-xl mt-8 mb-2">Full Claim</h2>
-    <p class="mb-4">
+      <p class="mb-4">
-      The full claim includes the claim as it was originally issued, including
+        The full claim includes the claim as it was originally issued, including
-      the signature (ie. the proof of issuance by that person).
+        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
+      <div v-if="!fullClaim">
-        v-else
+        <p v-if="fullClaimMessage" class="mb-4">
-        class="block w-full text-center text-md uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2"
+          {{ fullClaimMessage }}
-        @click="showFullClaim(veriClaim.id as string)"
+        </p>
-      >
+        <button
-        Load Full Claim Details
+          v-else
-      </button>
+          class="text-blue-500 cursor-pointer"
-    </div>
+          @click="showFullClaim(veriClaim.id as string)"
-    <div v-else>
+        >
-      <pre
+          <fa icon="file-lines" class="fa-fw" />
-        class="text-sm overflow-x-scroll bg-slate-100 px-4 py-3 rounded-md"
+          Load Full Claim Details
-        >{{ fullClaimDump }}</pre
+        </button>
-      >
+      </div>
-    </div>
+      <div v-else>
+        <pre
+          class="text-sm overflow-x-scroll bg-slate-100 px-4 py-3 rounded-md"
+          >{{ fullClaimDump }}</pre
+        >
+      </div>
 
-    <a
+      <a
-      :href="apiServer + '/api/claim/' + veriClaim.id"
+        :href="apiServer + '/api/claim/' + veriClaim.id"
-      target="_blank"
+        target="_blank"
-      class="block w-full text-center text-md uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2"
+        class="text-blue-500 cursor-pointer"
-    >
+      >
-      View on the Public Server
+        <fa icon="file-lines" class="fa-fw" />
-    </a>
+        <fa icon="arrow-up-right-from-square" class="ml-1 fa-fw" />
+        View on the Public Server
+      </a>
+    </div>
   </section>
 </template>
 
@@ -453,19 +509,25 @@ import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
-import { NotificationIface } from "@/constants/app";
-import { accountsDB, db } from "@/db/index";
-import { Contact } from "@/db/tables/contacts";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
-import * as serverUtil from "@/libs/endorserServer";
-import * as libsUtil from "@/libs/util";
 import QuickNav from "@/components/QuickNav.vue";
-import { Account } from "@/db/tables/accounts";
+import { NotificationIface } from "@/constants/app";
+import {
+  db,
+  logConsoleAndDb,
+  retrieveSettingsForActiveAccount,
+} from "@/db/index";
+import { Contact } from "@/db/tables/contacts";
+import * as serverUtil from "@/libs/endorserServer";
 import {
   GenericCredWrapper,
-  GiverReceiverInputInfo,
   OfferVerifiableCredential,
 } from "@/libs/endorserServer";
+import * as libsUtil from "@/libs/util";
+
+interface ProviderInfo {
+  identifier: string; // could be a DID or a handleId
+  linkConfirmed: boolean;
+}
 
 @Component({
   components: { GiftedDialog, QuickNav },
@@ -489,8 +551,9 @@ export default class ClaimView extends Vue {
   fullClaimMessage = "";
   isEditedGlobalId = false;
   isRegistered = false;
+  issuerName = "";
   numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
-  showDidCopy = false;
+  providersForGive: ProviderInfo[] = [];
   showIdCopy = false;
   showVeriClaimDump = false;
   veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
@@ -502,6 +565,7 @@ export default class ClaimView extends Vue {
   yaml = yaml;
   libsUtil = libsUtil;
   serverUtil = serverUtil;
+  window = window;
 
   resetThisValues() {
     this.confirmerIdList = [];
@@ -513,24 +577,38 @@ export default class ClaimView extends Vue {
     this.fullClaimDump = "";
     this.fullClaimMessage = "";
     this.isEditedGlobalId = false;
-    this.isRegistered = false;
     this.numConfsNotVisible = 0;
+    this.providersForGive = [];
     this.veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
     this.veriClaimDump = "";
+    this.veriClaimDidsVisible = {};
   }
 
   async created() {
-    await db.open();
+    const settings = await retrieveSettingsForActiveAccount();
-    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+    this.activeDid = settings.activeDid || "";
-    this.activeDid = settings?.activeDid || "";
+    this.apiServer = settings.apiServer || "";
-    this.apiServer = settings?.apiServer || "";
     this.allContacts = await db.contacts.toArray();
-    this.isRegistered = settings?.isRegistered || false;
+    this.isRegistered = settings.isRegistered || false;
 
-    await accountsDB.open();
+    try {
-    const accounts = accountsDB.accounts;
+      this.allMyDids = await libsUtil.retrieveAccountDids();
-    const accountsArr: Array<Account> = await accounts?.toArray();
+    } catch (error) {
-    this.allMyDids = accountsArr.map((acc) => acc.did);
+      // continue because we want to see claims, even anonymously
+      logConsoleAndDb(
+        "Error retrieving all account DIDs on home page:" + error,
+        true,
+      );
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Loading Profile",
+          text: "See the Help page for problems with your personal data.",
+        },
+        5000,
+      );
+    }
 
     const pathParam = window.location.pathname.substring("/claim/".length);
     let claimId;
@@ -545,7 +623,7 @@ export default class ClaimView extends Vue {
           title: "Error",
           text: "No claim ID was provided.",
         },
-        -1,
+        5000,
       );
     }
 
@@ -591,6 +669,7 @@ export default class ClaimView extends Vue {
       const resp = await this.axios.get(url, { headers });
       if (resp.status === 200) {
         this.veriClaim = resp.data;
+        this.issuerName = this.didInfo(this.veriClaim.issuer);
         this.veriClaimDump = yaml.dump(this.veriClaim);
         this.veriClaimDidsVisible = libsUtil.findAllVisibleToDids(
           this.veriClaim,
@@ -606,7 +685,7 @@ export default class ClaimView extends Vue {
             title: "Error",
             text: "There was a problem retrieving that claim.",
           },
-          -1,
+          5000,
         );
         return;
       }
@@ -623,11 +702,39 @@ export default class ClaimView extends Vue {
         const giveResp = await this.axios.get(giveUrl, {
           headers: giveHeaders,
         });
-        if (giveResp.status === 200) {
+        if (giveResp.status === 200 && giveResp.data.data?.length > 0) {
           this.detailsForGive = giveResp.data.data[0];
         } else {
           console.error("Error getting detailed give info:", giveResp);
         }
+
+        // look for providers
+        const providerUrl =
+          this.apiServer +
+          "/api/v2/report/providersToGive?handleId=" +
+          encodeURIComponent(this.veriClaim.handleId as string);
+        const providerHeaders = await serverUtil.getHeaders(userDid);
+        const providerResp = await this.axios.get(providerUrl, {
+          headers: providerHeaders,
+        });
+        // should be at least an empty array
+        if (
+          providerResp.status === 200 &&
+          Array.isArray(providerResp.data.data)
+        ) {
+          this.providersForGive = providerResp.data.data;
+        } else {
+          console.error("Error getting give providers:", giveResp);
+          this.$notify(
+            {
+              group: "alert",
+              type: "warning",
+              title: "Error",
+              text: "Got error retrieving linked provider data.",
+            },
+            5000,
+          );
+        }
       } else if (this.veriClaim.claimType === "Offer") {
         const offerUrl =
           this.apiServer +
@@ -641,36 +748,29 @@ export default class ClaimView extends Vue {
           this.detailsForOffer = offerResp.data.data[0];
         } else {
           console.error("Error getting detailed offer info:", offerResp);
+          this.$notify(
+            {
+              group: "alert",
+              type: "warning",
+              title: "Error",
+              text: "Got error retrieving linked offer data.",
+            },
+            5000,
+          );
         }
       }
 
       // retrieve the list of confirmers
-      const confirmUrl =
+      const confirmerInfo = await libsUtil.retrieveConfirmerIdList(
-        this.apiServer +
+        this.apiServer,
-        "/api/report/issuersWhoClaimedOrConfirmed?claimId=" +
+        claimId,
-        encodeURIComponent(serverUtil.stripEndorserPrefix(claimId));
+        this.veriClaim.issuer,
-      const confirmHeaders = await serverUtil.getHeaders(userDid);
+        userDid,
-      const response = await this.axios.get(confirmUrl, {
+      );
-        headers: confirmHeaders,
+      if (confirmerInfo) {
-      });
+        this.confirmerIdList = confirmerInfo.confirmerIdList;
-      if (response.status === 200) {
+        this.confsVisibleToIdList = confirmerInfo.confsVisibleToIdList;
-        const resultList1 = response.data.result || [];
+        this.numConfsNotVisible = confirmerInfo.numConfsNotVisible;
-        //const publicUrls = resultList.publicUrls || [];
-        delete resultList1.publicUrls;
-        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.";
@@ -685,7 +785,7 @@ export default class ClaimView extends Vue {
           title: "Error",
           text: "Something went wrong retrieving claim data.",
         },
-        -1,
+        3000,
       );
     }
   }
@@ -708,31 +808,53 @@ export default class ClaimView extends Vue {
             group: "alert",
             type: "danger",
             title: "Error",
-            text: "There was a problem getting that claim. See logs for more info.",
+            text: "There was a problem getting that claim.",
           },
-          -1,
+          5000,
         );
       }
     } catch (error: unknown) {
       console.error("Error retrieving full claim:", error);
       const serverError = error as AxiosError;
       if (serverError.response?.status === 403) {
+        let issuerPhrase = "";
+        const issuerContact = serverUtil.contactForDid(
+          this.veriClaim.issuer,
+          this.allContacts,
+        );
+        if (issuerContact?.name) {
+          issuerPhrase +=
+            "Ask " +
+            issuerContact.name +
+            " to show you the full claim details.";
+        }
+        if (
+          this.confirmerIdList.length > 0 ||
+          this.confsVisibleToIdList.length > 0
+        ) {
+          if (issuerContact?.name) {
+            issuerPhrase +=
+              "You could also ask someone in the Confirmations section to make an introduction.";
+          } else {
+            issuerPhrase +=
+              "Ask someone in the Confirmations section to make an introduction.";
+          }
+        }
         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." +
+          issuerPhrase +
-          " If you cannot see the issuer's DID, ask someone in the Confirmations section above." +
+          " You might ask someone in your network -- like the person who registered you --" +
-          " If there are no connections, you will have to ask people in your" +
+          " if they can find out more and make an introduction: " +
-          " network for their help, some other way; send them to this page and" +
+          " send them this page and see if they can make a connection for you.";
-          " 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.",
+            text: "Something went wrong retrieving that claim.",
           },
-          -1,
+          5000,
         );
       }
     }
@@ -793,9 +915,9 @@ export default class ClaimView extends Vue {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "There was a problem submitting the confirmation. See logs for more info.",
+          text: "There was a problem submitting the confirmation.",
         },
-        -1,
+        5000,
       );
     }
   }
@@ -811,7 +933,7 @@ export default class ClaimView extends Vue {
   }
 
   openFulfillGiftDialog() {
-    const giver: GiverReceiverInputInfo = {
+    const giver: libsUtil.GiverReceiverInputInfo = {
       did: libsUtil.offerGiverDid(
         this.veriClaim as GenericCredWrapper<OfferVerifiableCredential>,
       ),
@@ -841,9 +963,10 @@ export default class ClaimView extends Vue {
   }
 
   onClickShareClaim() {
+    this.copyToClipboard("A link to this page", this.windowLocation);
     window.navigator.share({
       title: "Help Connect Me",
-      text: "I'm trying to find the full details of this claim. Can you help me?",
+      text: "I'm trying to find the people who recorded this. Can you help me?",
       url: this.windowLocation,
     });
   }
@@ -869,6 +992,12 @@ export default class ClaimView extends Vue {
         },
       };
       (this.$router as Router).push(route);
+    } else if (this.veriClaim.claimType === "PlanAction") {
+      const route = {
+        name: "new-edit-project",
+        query: { projectId: this.veriClaim.handleId },
+      };
+      (this.$router as Router).push(route);
     } else {
       console.error(
         "Unrecognized claim type for edit:",
@@ -887,3 +1016,37 @@ export default class ClaimView extends Vue {
   }
 }
 </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/ConfirmGiftView.vue

@@ -25,7 +25,7 @@
         >
           Do you agree?
         </span>
-        <span v-else> Details </span>
+        <span v-else> Confirmation Details </span>
       </h1>
     </div>
 
@@ -54,22 +54,15 @@
           Confirm
           <fa icon="circle-check" class="ml-2 text-white cursor-pointer" />
         </button>
-        <a
-          v-if="isRegistered"
-          class="col-span-1 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-2 px-4 py-2 rounded-md"
-          :href="urlForNewGive"
-        >
-          Record a Similar One
-        </a>
       </div>
 
       <!-- Details -->
       <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mt-4">
-        <div class="block flex gap-4 overflow-hidden">
+        <div class="flex gap-4 overflow-hidden">
           <div class="overflow-hidden">
             <div class="text-sm">
               <div>
-                <fa icon="arrow-down" class="fa-fw text-slate-400" />
+                <fa icon="arrow-left" class="fa-fw text-slate-400" />
                 {{ giverName }}
               </div>
               <div class="ml-6">gave</div>
@@ -84,7 +77,7 @@
               </div>
               <div class="ml-6">to</div>
               <div>
-                <fa icon="arrow-up" class="fa-fw text-slate-400" />
+                <fa icon="arrow-right" class="fa-fw text-slate-400" />
                 {{ recipientName }}
               </div>
               <div>
@@ -100,7 +93,7 @@
                 <router-link
                   :to="
                     '/project/' +
-                    encodeURIComponent(giveDetails?.fulfillsPlanHandleId)
+                    encodeURIComponent(giveDetails?.fulfillsPlanHandleId || '')
                   "
                   class="text-blue-500 mt-2 cursor-pointer"
                   target="_blank"
@@ -121,7 +114,7 @@
                 <router-link
                   :to="
                     '/claim/' +
-                    encodeURIComponent(giveDetails?.fulfillsHandleId)
+                    encodeURIComponent(giveDetails?.fulfillsHandleId || '')
                   "
                   class="text-blue-500 mt-2 cursor-pointer"
                   target="_blank"
@@ -129,7 +122,7 @@
                   This fulfills
                   {{
                     capitalizeAndInsertSpacesBeforeCapsWithAPrefix(
-                      giveDetails.fulfillsType,
+                      giveDetails?.fulfillsType || "",
                     )
                   }}
                   <fa icon="arrow-up-right-from-square" class="fa-fw" />
@@ -172,7 +165,7 @@
             Nobody that you know issued or confirmed this claim.
           </div>
           <div v-if="confirmerIdList.length > 0">
-            The following people issued or confirmed this claim.
+            The following people confirmed this claim.
             <ul class="ml-4">
               <li
                 v-for="confirmerId in confirmerIdList"
@@ -257,19 +250,20 @@
           count as confirming it.
         </div>
         <div v-else-if="serverUtil.containsHiddenDid(veriClaim.claim)">
-          You cannot confirm this because it contains hidden identifiers.
+          You cannot confirm this because some people are hidden.
         </div>
       </div>
 
+      <!-- Note that a similar section is found in ClaimView.vue, and kinda in HiddenDidDialog.vue -->
       <h2
-        class="font-bold uppercase text-xl text-blue-500 mt-8 mb-2 cursor-pointer"
+        class="font-bold uppercase text-xl text-blue-500 mt-8 cursor-pointer"
-        @click="showDetails = !showDetails"
+        @click="showVeriClaimDump = !showVeriClaimDump"
       >
-        {{ serverUtil.containsHiddenDid(veriClaim) ? "Visible " : "" }}Details
+        Details
-        <span v-if="!showDetails"><fa icon="chevron-down" /></span>
+        <fa v-if="showVeriClaimDump" icon="chevron-up" />
-        <span v-else><fa icon="chevron-up" /></span>
+        <fa v-else icon="chevron-right" />
       </h2>
-      <div v-if="showDetails">
+      <div v-if="showVeriClaimDump">
         <div
           v-if="
             serverUtil.containsHiddenDid(veriClaim) &&
@@ -280,22 +274,26 @@
           Some of the details are not visible to you; they show as "HIDDEN".
           They are not visible to any of your direct contacts, either.
           <span v-if="canShare">
-            If you'd like to ask any of your contacts to take a look and see if
+            You can ask one of your contacts to take a look and see if their
-            their contacts can see more details,
+            contacts can see more details:
             <a @click="onClickShareClaim()" class="text-blue-500"
-              >click to send them this info</a
+              >click to send them this page info</a
             >
-            and see if they are willing to make an introduction.
+            and see if they can make an introduction. Someone is connected to
+            people closer to them; if you don't know who to ask, try the person
+            who registered you.
           </span>
           <span v-else>
-            If you'd like to ask any of your contacts to take a look and see if
+            You can ask one of your contacts to take a look and see if their
-            their contacts can see more details,
+            contacts can see more details:
             <a
-              @click="copyToClipboard('Location', windowLocation.href)"
+              @click="copyToClipboard('A link to this page', windowLocation)"
               class="text-blue-500"
-              >share this page with them</a
+              >click to copy this page info</a
             >
-            and see if they are willing to make an introduction.
+            and see if they can make an introduction. Someone is connected to
+            people closer to them; if you don't know who to ask, try the person
+            who registered you.
           </span>
         </div>
 
@@ -312,7 +310,7 @@
           <span v-else>
             If you'd like an introduction,
             <a
-              @click="copyToClipboard('Location', windowLocation.href)"
+              @click="copyToClipboard('A link to this page', windowLocation)"
               class="text-blue-500"
               >share this page with them and ask if they'll tell you more about
               about the participants.</a
@@ -372,20 +370,29 @@
           class="text-sm overflow-x-scroll px-4 py-3 bg-slate-100 rounded-md"
           >{{ veriClaimDump }}</pre
         >
+        <div class="mt-2 ml-2">
+          <a
+            @click="showClaimPage(veriClaim.id)"
+            class="text-blue-500 cursor-pointer"
+          >
+            <fa icon="file-lines" />
+            See All Generic Info
+          </a>
+        </div>
+        <div class="mt-2 ml-2">
+          <a
+            v-if="isRegistered"
+            class="text-blue-500 cursor-pointer"
+            :href="urlForNewGive"
+          >
+            <fa icon="file-lines" />
+            Record a Give Similar to the Original
+          </a>
+        </div>
       </div>
     </div>
     <div v-else-if="!isLoading">This does not have details to confirm.</div>
 
-    <div class="mt-4" v-if="!isLoading">
-      <a
-        @click="showClaimPage(veriClaim.id)"
-        class="text-blue-500 cursor-pointer"
-      >
-        <fa icon="file-lines" class="pl-2" />
-        All Generic Info
-      </a>
-    </div>
-
     <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"
@@ -405,14 +412,12 @@ import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } 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 * as serverUtil from "@/libs/endorserServer";
 import { displayAmount, GiveSummaryRecord } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
-import { isGiveAction } from "@/libs/util";
+import { isGiveAction, retrieveAccountDids } from "@/libs/util";
 import TopMessage from "@/components/TopMessage.vue";
 
 @Component({
@@ -438,12 +443,12 @@ export default class ClaimView extends Vue {
   isRegistered = false;
   numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
   recipientName = "";
-  showDetails = false;
+  showVeriClaimDump = false;
   urlForNewGive = "";
   veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
   veriClaimDump = "";
   veriClaimDidsVisible = {};
-  windowLocation = window.location;
+  windowLocation = window.location.href;
 
   R = R;
   yaml = yaml;
@@ -464,17 +469,13 @@ export default class ClaimView extends Vue {
 
   async mounted() {
     this.isLoading = true;
-    await db.open();
+    const settings = await retrieveSettingsForActiveAccount();
-    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+    this.activeDid = settings.activeDid || "";
-    this.activeDid = settings?.activeDid || "";
+    this.apiServer = settings.apiServer || "";
-    this.apiServer = settings?.apiServer || "";
     this.allContacts = await db.contacts.toArray();
-    this.isRegistered = settings?.isRegistered || false;
+    this.isRegistered = settings.isRegistered || false;
 
-    await accountsDB.open();
+    this.allMyDids = await retrieveAccountDids();
-    const accounts = accountsDB.accounts;
-    const accountsArr: Array<Account> = await accounts?.toArray();
-    this.allMyDids = accountsArr.map((acc) => acc.did);
 
     const pathParam = window.location.pathname.substring(
       "/confirm-gift/".length,
@@ -657,39 +658,21 @@ export default class ClaimView extends Vue {
       }
       if (this.giveDetails.fulfillsPlanHandleId) {
         this.urlForNewGive +=
-          "&projectId=" +
+          "&fulfillsProjectId=" +
           encodeURIComponent(this.giveDetails.fulfillsPlanHandleId);
       }
 
       // retrieve the list of confirmers
-      const confirmUrl =
+      const confirmerInfo = await libsUtil.retrieveConfirmerIdList(
-        this.apiServer +
+        this.apiServer,
-        "/api/report/issuersWhoClaimedOrConfirmed?claimId=" +
+        claimId,
-        encodeURIComponent(serverUtil.stripEndorserPrefix(claimId));
+        this.veriClaim.issuer,
-      const confirmHeaders = await serverUtil.getHeaders(userDid);
+        userDid,
-      const response = await this.axios.get(confirmUrl, {
+      );
-        headers: confirmHeaders,
+      if (confirmerInfo) {
-      });
+        this.confirmerIdList = confirmerInfo.confirmerIdList;
-      if (response.status === 200) {
+        this.confsVisibleToIdList = confirmerInfo.confsVisibleToIdList;
-        const resultList1 = response.data.result || [];
+        this.numConfsNotVisible = confirmerInfo.numConfsNotVisible;
-        //const publicUrls = resultList.publicUrls || [];
-        delete resultList1.publicUrls;
-        // remove any hidden DIDs
-        const resultList2 = R.reject(serverUtil.isHiddenDid, resultList1);
-        // remove confirmations by this user
-        const resultList3 = R.reject(
-          (did: string) => did === this.giveDetails?.issuerDid,
-          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.";
@@ -764,7 +747,7 @@ export default class ClaimView extends Vue {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "There was a problem submitting the confirmation. See logs for more info.",
+          text: "There was a problem submitting the confirmation.",
         },
         5000,
       );
@@ -798,6 +781,17 @@ export default class ClaimView extends Vue {
   }
 
   notifyWhyCannotConfirm() {
+    libsUtil.notifyWhyCannotConfirm(
+      this.$notify,
+      this.isRegistered,
+      this.veriClaim.claimType,
+      this.giveDetails,
+      this.activeDid,
+      this.confirmerIdList,
+    );
+  }
+
+  notifyWhyCannotConfirmBak() {
     if (!this.isRegistered) {
       this.$notify(
         {
@@ -844,7 +838,7 @@ export default class ClaimView extends Vue {
           group: "alert",
           type: "info",
           title: "Cannot Confirm",
-          text: "You cannot confirm this because it contains hidden identifiers.",
+          text: "You cannot confirm this because some people are hidden.",
         },
         3000,
       );
@@ -854,7 +848,7 @@ export default class ClaimView extends Vue {
           group: "alert",
           type: "info",
           title: "Cannot Confirm",
-          text: "You cannot confirm this claim.",
+          text: "You cannot confirm this claim. There are no other details, but we can help more if you contact us and send us screenshots.",
         },
         3000,
       );
@@ -862,10 +856,11 @@ export default class ClaimView extends Vue {
   }
 
   onClickShareClaim() {
+    this.copyToClipboard("A link to this page", this.windowLocation);
     window.navigator.share({
       title: "Help Connect Me",
       text: "I'm trying to find the full details of this claim. Can you help me?",
-      url: this.windowLocation.href,
+      url: this.windowLocation,
     });
   }
 }

src/views/ContactAmountsView.vue

@@ -112,9 +112,8 @@ import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import {
   AgreeVerifiableCredential,
   createEndorserJwtVcFromClaim,
@@ -124,6 +123,7 @@ import {
   GiveVerifiableCredential,
   SCHEMA_ORG_CONTEXT,
 } from "@/libs/endorserServer";
+import { retrieveAccountCount } from "@/libs/util";
 
 @Component({ components: { QuickNav } })
 export default class ContactAmountssView extends Vue {
@@ -138,19 +138,17 @@ export default class ContactAmountssView extends Vue {
   displayAmount = displayAmount;
 
   async beforeCreate() {
-    await accountsDB.open();
+    this.numAccounts = await retrieveAccountCount();
-    this.numAccounts = await accountsDB.accounts.count();
   }
 
   async created() {
     try {
-      await db.open();
       const contactDid = (this.$route as Router).query["contactDid"] as string;
       this.contact = (await db.contacts.get(contactDid)) || null;
 
-      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+      const settings = await retrieveSettingsForActiveAccount();
-      this.activeDid = (settings?.activeDid as string) || "";
+      this.activeDid = settings?.activeDid || "";
-      this.apiServer = (settings?.apiServer as string) || "";
+      this.apiServer = settings?.apiServer || "";
 
       if (this.activeDid && this.contact) {
         this.loadGives(this.activeDid, this.contact);
@@ -167,7 +165,7 @@ export default class ContactAmountssView extends Vue {
             err.userMessage ||
             "There was an error retrieving your settings or contacts or gives.",
         },
-        -1,
+        5000,
       );
     }
   }
@@ -198,7 +196,7 @@ export default class ContactAmountssView extends Vue {
             title: "Error With Server",
             text: "Got an error retrieving your given time from the server.",
           },
-          -1,
+          5000,
         );
       }
 
@@ -225,7 +223,7 @@ export default class ContactAmountssView extends Vue {
             title: "Error With Server",
             text: "Got an error retrieving your given time from the server.",
           },
-          -1,
+          5000,
         );
       }
 
@@ -243,7 +241,7 @@ export default class ContactAmountssView extends Vue {
           title: "Error With Server",
           text: error as string,
         },
-        -1,
+        5000,
       );
     }
   }
@@ -280,7 +278,7 @@ export default class ContactAmountssView extends Vue {
           (origClaim.object?.amountOfThisGood as number) || 1;
       }
     } catch (error) {
-      let userMessage = "There was an error. See logs for more info.";
+      let userMessage = "There was an error.";
       const serverError = error as AxiosError;
       if (serverError) {
         if (serverError.message) {
@@ -299,7 +297,7 @@ export default class ContactAmountssView extends Vue {
           title: "Error With Server",
           text: userMessage,
         },
-        -1,
+        5000,
       );
     }
   }
@@ -312,7 +310,7 @@ export default class ContactAmountssView extends Vue {
         title: "Not Allowed",
         text: "Only the recipient can confirm final receipt.",
       },
-      -1,
+      5000,
     );
   }
 }

src/views/ContactEditView.vue

@@ -0,0 +1,238 @@
+<template>
+  <QuickNav selected="Contacts" />
+  <TopMessage />
+
+  <section id="ContactEdit" class="p-6 max-w-3xl mx-auto">
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 class="text-4xl 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" />
+        </button>
+        {{ contact.name || AppString.NO_CONTACT_NAME }}
+      </h1>
+    </div>
+
+    <!-- Contact Name -->
+    <div class="mt-4 flex" data-testId="contactName">
+      <label
+        for="contactName"
+        class="block text-sm font-medium text-gray-700 mt-2"
+      >
+        Name
+      </label>
+      <input
+        type="text"
+        class="block w-full ml-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+        v-model="contactName"
+      />
+    </div>
+
+    <!-- Contact Notes -->
+    <div class="mt-4">
+      <label for="contactNotes" class="block text-sm font-medium text-gray-700">
+        Notes
+      </label>
+      <textarea
+        id="contactNotes"
+        rows="4"
+        class="block w-full mt-1 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+        v-model="contactNotes"
+      ></textarea>
+    </div>
+
+    <!-- Contact Methods -->
+    <div class="mt-4">
+      <h2 class="text-lg font-medium text-gray-700">Contact Methods</h2>
+      <div
+        v-for="(method, index) in contactMethods"
+        :key="index"
+        class="flex mt-2"
+      >
+        <input
+          type="text"
+          v-model="method.label"
+          class="block w-1/4 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+          placeholder="Label"
+        />
+        <input
+          type="text"
+          v-model="method.type"
+          class="block ml-2 w-1/4 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+          placeholder="Type"
+        />
+        <div class="relative">
+          <button
+            @click="toggleDropdown(index)"
+            class="px-2 py-1 bg-gray-200 rounded-md"
+          >
+            <fa icon="caret-down" class="fa-fw" />
+          </button>
+          <div
+            v-if="dropdownIndex === index"
+            class="absolute bg-white border border-gray-300 rounded-md mt-1"
+          >
+            <div
+              @click="setMethodType(index, 'CELL')"
+              class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
+            >
+              CELL
+            </div>
+            <div
+              @click="setMethodType(index, 'EMAIL')"
+              class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
+            >
+              EMAIL
+            </div>
+            <div
+              @click="setMethodType(index, 'WHATSAPP')"
+              class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
+            >
+              WHATSAPP
+            </div>
+          </div>
+        </div>
+        <input
+          type="text"
+          v-model="method.value"
+          class="block ml-2 w-1/2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+          placeholder="Number, email, etc."
+        />
+        <button @click="removeContactMethod(index)" class="ml-2 text-red-500">
+          <fa icon="trash-can" class="fa-fw" />
+        </button>
+      </div>
+      <button @click="addContactMethod" class="mt-2">
+        <fa
+          icon="plus"
+          class="fa-fw px-2 py-2.5 bg-green-500 text-green-100 rounded-full"
+        />
+      </button>
+    </div>
+
+    <!-- Save Button -->
+    <div class="mt-8 flex justify-between">
+      <button
+        class="px-4 py-2 bg-blue-500 text-white rounded-md"
+        @click="saveEdit"
+      >
+        Save
+      </button>
+      <button
+        class="ml-4 px-4 py-2 bg-slate-500 text-white rounded-md"
+        @click="$router.go(-1)"
+      >
+        Cancel
+      </button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import * as R from "ramda";
+import { Component, Vue } from "vue-facing-decorator";
+import { RouteLocation, Router } from "vue-router";
+
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+import { AppString, NotificationIface } from "@/constants/app";
+import { db } from "@/db/index";
+import { Contact, ContactMethod } from "@/db/tables/contacts";
+
+@Component({
+  components: {
+    QuickNav,
+    TopMessage,
+  },
+})
+export default class ContactEditView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  contact: Contact = {
+    did: "",
+    name: "",
+    notes: "",
+  };
+  contactName = "";
+  contactNotes = "";
+  contactMethods: Array<ContactMethod> = [];
+  dropdownIndex: number | null = null;
+
+  AppString = AppString;
+
+  async created() {
+    const contactDid = (this.$route as RouteLocation).params.did;
+    const contact = await db.contacts.get(contactDid || "");
+    if (contact) {
+      this.contact = contact;
+      this.contactName = contact.name || "";
+      this.contactNotes = contact.notes || "";
+      this.contactMethods = contact.contactMethods || [];
+    } else {
+      this.$notify({
+        group: "alert",
+        type: "danger",
+        title: "Contact Not Found",
+        text: "There is no contact with DID " + contactDid,
+      });
+      (this.$router as Router).push({ path: "/contacts" });
+      return;
+    }
+  }
+
+  addContactMethod() {
+    this.contactMethods.push({ label: "", type: "", value: "" });
+  }
+
+  removeContactMethod(index: number) {
+    this.contactMethods.splice(index, 1);
+  }
+
+  toggleDropdown(index: number) {
+    this.dropdownIndex = this.dropdownIndex === index ? null : index;
+  }
+
+  setMethodType(index: number, type: string) {
+    this.contactMethods[index].type = type;
+    this.dropdownIndex = null;
+  }
+
+  async saveEdit() {
+    // without this conversion, "Failed to execute 'put' on 'IDBObjectStore': [object Array] could not be cloned."
+    const contactMethodsObj = JSON.parse(JSON.stringify(this.contactMethods));
+    const contactMethods = contactMethodsObj.map((method: ContactMethod) =>
+      R.set(R.lensProp("type"), method.type.toUpperCase(), method),
+    );
+    if (!R.equals(contactMethodsObj, contactMethods)) {
+      this.contactMethods = contactMethods;
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Contact Methods Updated",
+          text: "Note that some methods have been updated, such as uppercasing 'email' to 'EMAIL'. Save again if the changes are acceptable.",
+        },
+        15000,
+      );
+      return;
+    }
+    await db.contacts.update(this.contact.did, {
+      name: this.contactName,
+      notes: this.contactNotes,
+      contactMethods: contactMethods,
+    });
+    this.$notify({
+      group: "alert",
+      type: "success",
+      title: "Contact Saved",
+      text: "The contact info has been updated successfully.",
+    });
+    (this.$router as Router).push({
+      path: "/did/" + encodeURIComponent(this.contact.did),
+    });
+  }
+}
+</script>

src/views/ContactGiftingView.vue

@@ -11,8 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           ><fa icon="chevron-left" class="fa-fw"></fa
         ></router-link>
-
+        Given by...
-        Give to Contacts
       </h1>
     </div>
 
@@ -66,21 +65,21 @@
       </li>
     </ul>
 
-    <GiftedDialog ref="customDialog" :projectId="projectId" />
+    <GiftedDialog ref="customDialog" :toProjectId="projectId" />
   </section>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
 import { NotificationIface } from "@/constants/app";
-import { db } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
+import { GiverReceiverInputInfo } from "@/libs/util";
-import { GiverReceiverInputInfo } from "@/libs/endorserServer";
 
 @Component({
   components: { GiftedDialog, QuickNav, EntityIcon },
@@ -91,14 +90,15 @@ export default class ContactGiftingView extends Vue {
   activeDid = "";
   allContacts: Array<Contact> = [];
   apiServer = "";
-  projectId = localStorage.getItem("projectId") || "";
+  description = "";
+  projectId = "";
+  prompt = "";
 
   async created() {
     try {
-      await db.open();
+      const settings = await retrieveSettingsForActiveAccount();
-      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+      this.apiServer = settings.apiServer || "";
-      this.apiServer = settings?.apiServer || "";
+      this.activeDid = settings.activeDid || "";
-      this.activeDid = settings?.activeDid || "";
 
       // .orderBy("name") wouldn't retrieve any entries with a blank name
       // .toCollection.sortBy("name") didn't sort in an order I understood
@@ -107,7 +107,9 @@ export default class ContactGiftingView extends Vue {
         (a.name || "").localeCompare(b.name || ""),
       );
 
-      localStorage.removeItem("projectId");
+      this.projectId = (this.$route as Router).query["projectId"] || "";
+
+      this.prompt = (this.$route as Router).query["prompt"] ?? this.prompt;
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
@@ -121,7 +123,7 @@ export default class ContactGiftingView extends Vue {
             err.message ||
             "There was an error retrieving your settings or contacts.",
         },
-        -1,
+        5000,
       );
     }
   }
@@ -135,6 +137,7 @@ export default class ContactGiftingView extends Vue {
       recipient,
       undefined,
       "Given by " + (giver?.name || "someone not named"),
+      this.prompt,
     );
   }
 }

src/views/ContactImportView.vue

@@ -16,86 +16,134 @@
       Contact Import
     </h1>
 
-    <span>
+    <div v-if="checkingImports" class="text-center">
-      Note that you will have to make them visible one-by-one in the list of
+      <fa icon="spinner" class="animate-spin" />
-      Contacts.
-    </span>
-    <div v-if="sameCount > 0">
-      <span v-if="sameCount == 1"
-        >One contact is the same as an existing contact</span
-      >
-      <span v-else
-        >{{ sameCount }} contacts are the same as existing contacts</span
-      >
     </div>
+    <div v-else>
+      <span
+        v-if="contactsImporting.length > sameCount"
+        class="flex justify-center"
+      >
+        <input type="checkbox" v-model="makeVisible" class="mr-2" />
+        Make my activity visible to these contacts.
+      </span>
 
-    <!-- Results List -->
+      <div v-if="sameCount > 0">
-    <ul v-if="contactsImporting.length > 0" class="border-t border-slate-300">
+        <span v-if="sameCount == 1"
-      <li v-for="(contact, index) in contactsImporting" :key="contact.did">
+          >One contact is the same as an existing contact</span
-        <div
-          v-if="
-            !contactsExisting[contact.did] ||
-            !R.isEmpty(contactDifferences[contact.did])
-          "
-          class="grow overflow-hidden border-b border-slate-300 pt-2.5 pb-4"
         >
-          <h2 class="text-base font-semibold">
+        <span v-else
-            <input type="checkbox" v-model="contactsSelected[index]" />
+          >{{ sameCount }} contacts are the same as existing contacts</span
-            {{ contact.name || AppString.NO_CONTACT_NAME }}
+        >
-            -
+      </div>
-            <span v-if="contactsExisting[contact.did]" class="text-orange-500"
+
-              >Existing</span
+      <!-- Results List -->
-            >
+      <ul
-            <span v-else class="text-green-500">New</span>
+        v-if="contactsImporting.length > sameCount"
-          </h2>
+        class="border-t border-slate-300"
-          <div class="text-sm truncate">
+      >
-            {{ contact.did }}
+        <li v-for="(contact, index) in contactsImporting" :key="contact.did">
-          </div>
+          <div
-          <div v-if="contactDifferences[contact.did]">
+            v-if="
-            <div>
+              !contactsExisting[contact.did] ||
-              <div class="grid grid-cols-3 gap-2">
+              !R.isEmpty(contactDifferences[contact.did])
-                <div class="font-bold">Field</div>
+            "
-                <div class="font-bold">Old Value</div>
+            class="grow overflow-hidden border-b border-slate-300 pt-2.5 pb-4"
-                <div class="font-bold">New Value</div>
+          >
-              </div>
+            <h2 class="text-base font-semibold">
-              <div
+              <input type="checkbox" v-model="contactsSelected[index]" />
-                v-for="(value, contactField) in contactDifferences[contact.did]"
+              {{ contact.name || AppString.NO_CONTACT_NAME }}
-                :key="contactField"
+              -
-                class="grid grid-cols-3 border"
+              <span v-if="contactsExisting[contact.did]" class="text-orange-500"
+                >Existing</span
               >
-                <div class="border p-1">{{ contactField }}</div>
+              <span v-else class="text-green-500">New</span>
-                <div class="border p-1">{{ value.old }}</div>
+            </h2>
-                <div class="border p-1">{{ value.new }}</div>
+            <div class="text-sm truncate">
+              {{ contact.did }}
+            </div>
+            <div v-if="contactDifferences[contact.did]">
+              <div>
+                <div class="grid grid-cols-3 gap-2">
+                  <div></div>
+                  <div class="font-bold">Old Value</div>
+                  <div class="font-bold">New Value</div>
+                </div>
+                <div
+                  v-for="(value, contactField) in contactDifferences[
+                    contact.did
+                  ]"
+                  :key="contactField"
+                  class="grid grid-cols-3 border"
+                >
+                  <div class="border font-bold p-1">
+                    {{ capitalizeAndInsertSpacesBeforeCaps(contactField) }}
+                  </div>
+                  <div class="border p-1">{{ value.old }}</div>
+                  <div class="border p-1">{{ value.new }}</div>
+                </div>
               </div>
             </div>
           </div>
+        </li>
+        <button
+          class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-sm text-white mt-2 px-2 py-1.5 rounded"
+          @click="importContacts"
+        >
+          Import Selected Contacts
+        </button>
+      </ul>
+      <p v-else-if="contactsImporting.length > 0">
+        All those contacts are already in your list with the same information.
+      </p>
+      <div v-else>
+        There are no contacts in that import. If some were sent, try again to
+        get the full text and paste it. (Note that iOS cuts off data in text
+        messages.) Ask the person to send the data a different way, eg. email.
+        <div class="mt-4 text-center">
+          <textarea
+            v-model="inputJwt"
+            placeholder="Contact-import data"
+            class="mt-4 border-2 border-gray-300 p-2 rounded"
+            cols="30"
+            @input="() => checkContactJwt(inputJwt)"
+          />
+          <br />
+          <button
+            @click="() => processContactJwt(inputJwt)"
+            class="ml-2 p-2 bg-blue-500 text-white rounded"
+          >
+            Check Import
+          </button>
         </div>
-      </li>
+      </div>
-      <fa icon="spinner" v-if="importing" class="animate-spin" />
+    </div>
-      <button
-        v-else
-        class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-sm text-white mt-2 px-2 py-1.5 rounded"
-        @click="importContacts"
-      >
-        Import Selected Contacts
-      </button>
-    </ul>
-    <p v-else>There are no contacts to import.</p>
   </section>
 </template>
 
 <script lang="ts">
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
-import { Router } from "vue-router";
+import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 
-import { AppString, NotificationIface } from "@/constants/app";
-import { db } from "@/db/index";
-import { Contact } from "@/db/tables/contacts";
-import * as libsUtil from "@/libs/util";
 import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
 import OfferDialog from "@/components/OfferDialog.vue";
+import { APP_SERVER, AppString, NotificationIface } from "@/constants/app";
+import {
+  db,
+  logConsoleAndDb,
+  retrieveSettingsForActiveAccount,
+} from "@/db/index";
+import { Contact, ContactMethod } from "@/db/tables/contacts";
+import * as libsUtil from "@/libs/util";
+import { decodeEndorserJwt } from "@/libs/crypto/vc";
+import {
+  capitalizeAndInsertSpacesBeforeCaps,
+  errorStringForLog,
+  setVisibilityUtil,
+} from "@/libs/endorserServer";
+import { getContactJwtFromJwtUrl } from "@/libs/crypto";
 
 @Component({
   components: { EntityIcon, OfferDialog, QuickNav },
@@ -104,27 +152,83 @@ export default class ContactImportView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   AppString = AppString;
+  capitalizeAndInsertSpacesBeforeCaps = capitalizeAndInsertSpacesBeforeCaps;
   libsUtil = libsUtil;
   R = R;
 
+  activeDid = "";
+  apiServer = "";
   contactsExisting: Record<string, Contact> = {}; // user's contacts already in the system, keyed by DID
   contactsImporting: Array<Contact> = []; // contacts from the import
   contactsSelected: Array<boolean> = []; // whether each contact in contactsImporting is selected
   contactDifferences: Record<
     string,
-    Record<string, { new: string; old: string }>
+    Record<
+      string,
+      {
+        new: string | boolean | Array<ContactMethod> | undefined;
+        old: string | boolean | Array<ContactMethod> | undefined;
+      }
+    >
   > = {}; // for existing contacts, it shows the difference between imported and existing contacts for each key
-  importing = false;
+  checkingImports = false;
+  inputJwt: string = "";
+  makeVisible = true;
   sameCount = 0;
 
   async created() {
-    // Retrieve the imported contacts from the query parameter
+    const settings = await retrieveSettingsForActiveAccount();
-    const importedContacts =
+    this.activeDid = settings.activeDid || "";
-      ((this.$route as Router).query["contacts"] as string) || "[]";
+    this.apiServer = settings.apiServer || "";
-    this.contactsImporting = JSON.parse(importedContacts);
+
-    this.contactsSelected = new Array(this.contactsImporting.length).fill(
+    // look for any imported contact array from the query parameter
-      false,
+    const importedContacts = (this.$route as RouteLocationNormalizedLoaded)
-    );
+      .query["contacts"] as string;
+    if (importedContacts) {
+      await this.setContactsSelected(JSON.parse(importedContacts));
+    }
+
+    // look for a JWT after /contact-import/ in the window.location.pathname
+    const jwt = window.location.pathname.match(
+      /\/contact-import\/(ey.+)$/,
+    )?.[1];
+    if (jwt) {
+      // would prefer to validate but we've got an error with JWTs on QR codes generated in the future
+      // eslint-disable-next-line prettier/prettier
+      // const parsedJwt: Omit<JWTVerified, "didResolutionResult" | "signer" | "jwt"> = await decodeAndVerifyJwt(jwt);
+      // decode the JWT
+      const parsedJwt = decodeEndorserJwt(jwt);
+
+      const contacts: Array<Contact> =
+        parsedJwt.payload.contacts || // someday this will be the only payload sent to this page
+        (Array.isArray(parsedJwt.payload) ? parsedJwt.payload : undefined);
+      if (!contacts && parsedJwt.payload.own) {
+        // handle this single-contact JWT in the contacts page, better suited to single additions
+        (this.$router as Router).push({
+          name: "contacts",
+          query: { contactJwt: jwt },
+        });
+      }
+      if (contacts) {
+        await this.setContactsSelected(contacts);
+      } else {
+        // no contacts found so default message should be OK
+      }
+    }
+
+    if (
+      this.contactsImporting.length === 1 &&
+      R.isEmpty(this.contactsExisting)
+    ) {
+      // if there is only one contact and it's new, then we will automatically import it
+      this.contactsSelected[0] = true;
+      this.importContacts(); // ... which routes to the contacts list
+    }
+  }
+
+  async setContactsSelected(contacts: Array<Contact>) {
+    this.contactsImporting = contacts;
+    this.contactsSelected = new Array(this.contactsImporting.length).fill(true);
 
     await db.open();
     const baseContacts = await db.contacts.toArray();
@@ -137,12 +241,19 @@ export default class ContactImportView extends Vue {
       if (existingContact) {
         this.contactsExisting[contactIn.did] = existingContact;
 
-        const differences: Record<string, { new: string; old: string }> = {};
+        const differences: Record<
+          string,
+          {
+            new: string | boolean | Array<ContactMethod> | undefined;
+            old: string | boolean | Array<ContactMethod> | undefined;
+          }
+        > = {};
         Object.keys(contactIn).forEach((key) => {
-          if (contactIn[key] !== existingContact[key]) {
+          // eslint-disable-next-line prettier/prettier
+          if (!R.equals(contactIn[key as keyof Contact], existingContact[key as keyof Contact])) {
             differences[key] = {
-              old: existingContact[key],
+              old: existingContact[key as keyof Contact],
-              new: contactIn[key],
+              new: contactIn[key as keyof Contact],
             };
           }
         });
@@ -150,15 +261,66 @@ export default class ContactImportView extends Vue {
         if (R.isEmpty(differences)) {
           this.sameCount++;
         }
-      } else {
+
-        // automatically import new data
+        // don't automatically import previous data
-        this.contactsSelected[i] = true;
+        this.contactsSelected[i] = false;
       }
     }
   }
 
+  // check the contact-import JWT
+  async checkContactJwt(jwtInput: string) {
+    if (
+      jwtInput.endsWith(APP_SERVER) ||
+      jwtInput.endsWith(APP_SERVER + "/") ||
+      jwtInput.endsWith("contact-import") ||
+      jwtInput.endsWith("contact-import/")
+    ) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "That is only part of the contact-import data; it's missing data at the end. Try another way to get the full data.",
+        },
+        5000,
+      );
+    }
+  }
+
+  // process the invite JWT and/or text message containing the URL with the JWT
+  async processContactJwt(jwtInput: string) {
+    this.checkingImports = true;
+
+    try {
+      // (For another approach used with invites, see InviteOneAcceptView.processInvite)
+      const jwt: string = getContactJwtFromJwtUrl(jwtInput);
+      // JWT format: { header, payload, signature, data }
+      const payload = decodeEndorserJwt(jwt).payload;
+
+      if (Array.isArray(payload.contacts)) {
+        await this.setContactsSelected(payload.contacts);
+      } else {
+        throw new Error("Invalid contact-import JWT or URL: " + jwtInput);
+      }
+    } catch (error) {
+      const fullError = "Error importing contacts: " + errorStringForLog(error);
+      logConsoleAndDb(fullError, true);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "There was an error processing the contact-import data.",
+        },
+        3000,
+      );
+    }
+    this.checkingImports = false;
+  }
+
   async importContacts() {
-    this.importing = true;
+    this.checkingImports = true;
     let importedCount = 0,
       updatedCount = 0;
     for (let i = 0; i < this.contactsImporting.length; i++) {
@@ -170,18 +332,54 @@ export default class ContactImportView extends Vue {
           updatedCount++;
         } else {
           // without explicit clone on the Proxy, we get: DataCloneError: Failed to execute 'add' on 'IDBObjectStore': #<Object> could not be cloned.
+          // DataError: Failed to execute 'add' on 'IDBObjectStore': Evaluating the object store's key path yielded a value that is not a valid key.
           await db.contacts.add(R.clone(contact));
           importedCount++;
         }
       }
     }
-    this.importing = false;
+    if (this.makeVisible) {
+      const failedVisibileToContacts = [];
+      for (let i = 0; i < this.contactsImporting.length; i++) {
+        if (this.contactsSelected[i]) {
+          const contact = this.contactsImporting[i];
+          if (contact) {
+            const visResult = await setVisibilityUtil(
+              this.activeDid,
+              this.apiServer,
+              this.axios,
+              db,
+              contact,
+              true,
+            );
+            if (!visResult.success) {
+              failedVisibileToContacts.push(contact);
+            }
+          }
+        }
+      }
+      if (failedVisibileToContacts.length > 0) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Visibility Error",
+            text: `Failed to set visibility for ${failedVisibileToContacts.length} contact${
+              failedVisibileToContacts.length == 1 ? "" : "s"
+            }. You must set them individually: ${failedVisibileToContacts.map((c) => c.name).join(", ")}`,
+          },
+          -1,
+        );
+      }
+    }
+
+    this.checkingImports = false;
 
     this.$notify(
       {
         group: "alert",
         type: "success",
-        title: "Import Success",
+        title: "Imported",
         text:
           `${importedCount} contact${importedCount == 1 ? "" : "s"} imported.` +
           (updatedCount ? ` ${updatedCount} updated.` : ""),

src/views/ContactQRScanShowView.vue

@@ -1,5 +1,5 @@
 <template>
-  <QuickNav selected="Profile"></QuickNav>
+  <QuickNav selected="Profile" />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Breadcrumb -->
@@ -10,7 +10,7 @@
           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>
+          <fa icon="chevron-left" class="fa-fw" />
         </h1>
       </div>
 
@@ -25,14 +25,17 @@
         <span class="text-red">Beware!</span>
         You aren't sharing your name, so quickly
         <br />
-        <router-link
+        <span
-          :to="{ name: 'new-edit-account' }"
+          @click="
+            () => $refs.userNameDialog.open((name) => (this.givenName = name))
+          "
           class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md"
         >
           click here to set it for them.
-        </router-link>
+        </span>
       </p>
     </div>
+    <UserNameDialog ref="userNameDialog" />
 
     <div
       @click="onCopyUrlToClipboard()"
@@ -50,7 +53,7 @@
         class="flex justify-center"
       />
       <span>
-        Click this or QR code to copy your contact URL to your clipboard.
+        Click the QR code to copy your contact info to your clipboard.
       </span>
     </div>
     <div v-else-if="activeDid" class="text-center">
@@ -87,39 +90,33 @@
 
 <script lang="ts">
 import { AxiosError } from "axios";
-import { Buffer } from "buffer/";
-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 QuickNav from "@/components/QuickNav.vue";
+import UserNameDialog from "@/components/UserNameDialog.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { getContactJwtFromJwtUrl } from "@/libs/crypto";
 import {
-  deriveAddress,
+  generateEndorserJwtUrlForAccount,
-  getContactPayloadFromJwtUrl,
-  nextDerivationPath,
-} from "@/libs/crypto";
-import {
-  CONTACT_URL_PREFIX,
-  createEndorserJwtForDid,
-  ENDORSER_JWT_URL_LOCATION,
   isDid,
   register,
   setVisibilityUtil,
 } from "@/libs/endorserServer";
-import { ETHR_DID_PREFIX } from "@/libs/crypto/vc";
+import { decodeEndorserJwt, ETHR_DID_PREFIX } from "@/libs/crypto/vc";
+import { retrieveAccountMetadata } from "@/libs/util";
 
 @Component({
   components: {
     QrcodeStream,
     QRCodeVue3,
     QuickNav,
+    UserNameDialog,
   },
 })
 export default class ContactQRScanShow extends Vue {
@@ -135,54 +132,27 @@ export default class ContactQRScanShow extends Vue {
   ETHR_DID_PREFIX = ETHR_DID_PREFIX;
 
   async created() {
-    await db.open();
+    const settings = await retrieveSettingsForActiveAccount();
-    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    this.activeDid = settings.activeDid || "";
-    this.activeDid = (settings?.activeDid as string) || "";
+    this.apiServer = settings.apiServer || "";
-    this.apiServer = (settings?.apiServer as string) || "";
+    this.givenName = settings.firstName || "";
-    this.givenName = (settings?.firstName as string) || "";
     this.hideRegisterPromptOnNewContact =
-      !!settings?.hideRegisterPromptOnNewContact;
+      !!settings.hideRegisterPromptOnNewContact;
-    this.isRegistered = !!settings?.isRegistered;
+    this.isRegistered = !!settings.isRegistered;
 
-    await accountsDB.open();
+    const account = await retrieveAccountMetadata(this.activeDid);
-    const accounts = await accountsDB.accounts.toArray();
-    const account = R.find((acc) => acc.did === this.activeDid, accounts);
     if (account) {
-      const publicKeyHex = account.publicKeyHex;
+      const name =
-      const publicEncKey = Buffer.from(publicKeyHex, "hex").toString("base64");
+        (settings.firstName || "") +
+        (settings.lastName ? ` ${settings.lastName}` : ""); // lastName is deprecated, pre v 0.1.3
 
-      const contactInfo = {
+      this.qrValue = await generateEndorserJwtUrlForAccount(
-        iat: Date.now(),
+        account,
-        iss: this.activeDid,
+        !!settings.isRegistered,
-        own: {
+        name,
-          name:
+        settings.profileImageUrl,
-            (settings?.firstName || "") +
+        false,
-            (settings?.lastName ? ` ${settings.lastName}` : ""), // deprecated, pre v 0.1.3
+      );
-          publicEncKey,
-          profileImageUrl: settings?.profileImageUrl,
-          registered: settings?.isRegistered,
-        },
-      };
-
-      if (account?.mnemonic && account?.derivationPath) {
-        const newDerivPath = nextDerivationPath(
-          account.derivationPath as string,
-        );
-        const nextPublicHex = deriveAddress(
-          account.mnemonic as string,
-          newDerivPath,
-        )[2];
-        const nextPublicEncKey = Buffer.from(nextPublicHex, "hex");
-        const nextPublicEncKeyHash = sha256(nextPublicEncKey);
-        const nextPublicEncKeyHashBase64 =
-          Buffer.from(nextPublicEncKeyHash).toString("base64");
-        contactInfo.own.nextPublicEncKeyHash = nextPublicEncKeyHashBase64;
-      }
-
-      const vcJwt = await createEndorserJwtForDid(this.activeDid, contactInfo);
-
-      const viewPrefix = CONTACT_URL_PREFIX + ENDORSER_JWT_URL_LOCATION;
-      this.qrValue = viewPrefix + vcJwt;
     }
   }
 
@@ -209,8 +179,8 @@ export default class ContactQRScanShow extends Vue {
     if (url) {
       let newContact: Contact;
       try {
-        const payload = getContactPayloadFromJwtUrl(url);
+        const jwt = getContactJwtFromJwtUrl(url);
-        if (!payload) {
+        if (!jwt) {
           this.$notify(
             {
               group: "alert",
@@ -222,8 +192,9 @@ export default class ContactQRScanShow extends Vue {
           );
           return;
         }
+        const { payload } = decodeEndorserJwt(jwt);
         newContact = {
-          did: payload.iss as string,
+          did: payload.own.did || payload.iss, // ".own.did" is reliable as of v 0.3.49
           name: payload.own.name,
           nextPubKeyHashB64: payload.own.nextPublicEncKeyHash,
           profileImageUrl: payload.own.profileImageUrl,
@@ -390,7 +361,7 @@ export default class ContactQRScanShow extends Vue {
       }
     } catch (error) {
       console.error("Error when registering:", error);
-      let userMessage = "There was an error. See logs for more info.";
+      let userMessage = "There was an error.";
       const serverError = error as AxiosError;
       if (serverError) {
         if (serverError.response?.data?.error?.message) {
@@ -435,7 +406,7 @@ export default class ContactQRScanShow extends Vue {
     useClipboard()
       .copy(this.qrValue)
       .then(() => {
-        console.log("Contact URL:", this.qrValue);
+        // console.log("Contact URL:", this.qrValue);
         this.$notify(
           {
             group: "alert",

src/views/DIDView.vue

@@ -6,7 +6,7 @@
   <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">
+      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
         <!-- Back -->
         <button
           @click="$router.go(-1)"
@@ -19,27 +19,26 @@
     </div>
 
     <!-- Identity Details -->
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
+    <div
+      v-if="!!contactFromDid"
+      class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"
+    >
       <div>
         <h2 class="text-xl font-semibold">
-          {{ contact?.name || "(no name)" }}
+          {{ contactFromDid?.name || "(no name)" }}
-          <button
+          <router-link
-            @click="
+            :to="{ name: 'contact-edit', params: { did: contactFromDid?.did } }"
-              contactEdit = true;
-              contactNewName = contact.name || '';
-            "
-            title="Edit"
           >
             <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
-          </button>
+          </router-link>
         </h2>
         <button
           @click="showDidDetails = !showDidDetails"
           class="ml-2 mr-2 mt-4"
         >
           Details
-          <fa v-if="showDidDetails" icon="chevron-up" class="text-blue-400" />
+          <fa v-if="showDidDetails" icon="chevron-down" class="text-blue-400" />
-          <fa v-else icon="chevron-down" class="text-blue-400" />
+          <fa v-else icon="chevron-right" class="text-blue-400" />
         </button>
         <!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
         <pre
@@ -49,12 +48,15 @@
         >
       </div>
       <div class="flex justify-center mt-4">
-        <span v-if="contact?.profileImageUrl" class="flex justify-between">
+        <span
+          v-if="contactFromDid?.profileImageUrl"
+          class="flex justify-between"
+        >
           <EntityIcon
             :icon-size="96"
-            :profileImageUrl="contact?.profileImageUrl"
+            :profileImageUrl="contactFromDid?.profileImageUrl"
             class="inline-block align-text-bottom border border-slate-300 rounded"
-            @click="showLargeIdenticonUrl = contact?.profileImageUrl"
+            @click="showLargeIdenticonUrl = contactFromDid?.profileImageUrl"
           />
         </span>
       </div>
@@ -63,62 +65,60 @@
           <div v-if="activeDid" class="flex justify-between">
             <div>
               <button
-                v-if="contact?.seesMe && contact.did !== activeDid"
+                v-if="
+                  contactFromDid?.seesMe && contactFromDid.did !== activeDid
+                "
                 class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
-                @click="confirmSetVisibility(contact, false)"
+                @click="confirmSetVisibility(contactFromDid, false)"
                 title="They can see you"
               >
                 <fa icon="eye" class="fa-fw" />
               </button>
               <button
-                v-else-if="!contact?.seesMe && contact?.did !== activeDid"
+                v-else-if="
+                  !contactFromDid?.seesMe && contactFromDid?.did !== activeDid
+                "
                 class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
-                @click="confirmSetVisibility(contact, true)"
+                @click="confirmSetVisibility(contactFromDid, true)"
                 title="They cannot see you"
               >
                 <fa icon="eye-slash" class="fa-fw" />
               </button>
-              <!-- otherwise it's this user so hide it -->
-              <fa v-else icon="eye" class="text-white mx-2.5" />
 
               <button
                 class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
-                @click="checkVisibility(contact)"
+                @click="checkVisibility(contactFromDid)"
                 title="Check Visibility"
-                v-if="contact?.did !== activeDid"
+                v-if="contactFromDid?.did !== activeDid"
               >
                 <fa icon="rotate" class="fa-fw" />
               </button>
-              <!-- otherwise it's this user so hide it -->
-              <fa v-else icon="rotate" class="text-white mx-2.5" />
             </div>
 
             <button
-              @click="confirmRegister(contact)"
+              @click="confirmRegister(contactFromDid)"
               class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-6 mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
-              v-if="contact?.did !== activeDid"
+              v-if="contactFromDid?.did !== activeDid"
               title="Registration"
             >
               <fa
-                v-if="contact?.registered"
+                v-if="contactFromDid?.registered"
                 icon="person-circle-check"
                 class="fa-fw"
               />
               <fa v-else icon="person-circle-question" class="fa-fw" />
             </button>
-            <!-- otherwise it's this user so hide it -->
-            <fa v-else icon="rotate" class="text-white ml-6 px-2.5" />
           </div>
 
           <button
-            @click="confirmDeleteContact(contact)"
+            @click="confirmDeleteContact(contactFromDid)"
             class="text-sm uppercase bg-gradient-to-b from-rose-500 to-rose-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-6 mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
             title="Delete"
           >
             <fa icon="trash-can" class="fa-fw" />
           </button>
         </div>
-        <div v-if="!contact?.profileImageUrl">
+        <div v-if="!contactFromDid?.profileImageUrl">
           <div>Auto-Generated Icon</div>
           <div class="flex justify-center">
             <EntityIcon
@@ -150,30 +150,12 @@
         </div>
       </div>
     </div>
-    <div v-if="contactEdit" class="dialog-overlay">
+    <div v-else class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <div class="dialog">
+      <!-- !contactFromDid -->
-        <h1 class="text-xl font-bold text-center mb-4">Edit Name</h1>
+      <div>
-        <input
+        <h2 class="text-xl font-semibold">
-          type="text"
+          {{ isMyDid ? "You" : "(no name)" }}
-          class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
+        </h2>
-          placeholder="Name"
-          v-model="contactNewName"
-        />
-        <div class="flex justify-between">
-          <button
-            class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded -ml-1.5 border-l border-blue-400"
-            @click="onClickSaveName(contactNewName)"
-          >
-            <fa icon="save" />
-          </button>
-          <span class="inline-block w-2" />
-          <button
-            class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded -ml-1.5 border-l border-blue-400"
-            @click="onClickCancelName()"
-          >
-            <fa icon="ban" />
-          </button>
-        </div>
       </div>
     </div>
 
@@ -186,7 +168,9 @@
     </div>
     <!-- Results List -->
     <div v-if="claims.length > 0" class="mt-4">
-      <div class="text-l font-bold text-center">Claims That Involve Them</div>
+      <div class="text-l font-bold text-center">
+        Claims That Involve {{ isMyDid ? "You" : "Them" }}
+      </div>
     </div>
     <InfiniteScroll @reached-bottom="loadMoreData">
       <ul>
@@ -222,7 +206,8 @@
       v-if="!isLoading && claims.length === 0"
       class="flex justify-center mt-4"
     >
-      <span>They are in no claims visible to you.</span>
+      <span v-if="isMyDid">You have no claims yet.</span>
+      <span v-else>They are in no claims visible to you.</span>
     </div>
   </section>
 </template>
@@ -237,9 +222,9 @@ import QuickNav from "@/components/QuickNav.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
-import { BoundingBox, MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { BoundingBox } from "@/db/tables/settings";
 import {
   capitalizeAndInsertSpacesBeforeCaps,
   didInfoForContact,
@@ -270,15 +255,13 @@ export default class DIDView extends Vue {
   yaml = yaml;
 
   activeDid = "";
-  allMyDids: Array<string> = [];
   apiServer = "";
   claims: Array<GenericCredWrapper<GenericVerifiableCredential>> = [];
-  contact: Contact;
+  contactFromDid?: Contact;
-  contactEdit = false;
-  contactNewName?: string;
   contactYaml = "";
   hitEnd = false;
   isLoading = false;
+  isMyDid = false;
   searchBox: { name: string; bbox: BoundingBox } | null = null;
   showDidDetails = false;
   showLargeIdenticonId?: string;
@@ -290,38 +273,37 @@ export default class DIDView extends Vue {
   displayAmount = displayAmount;
 
   async mounted() {
-    await db.open();
+    const settings = await retrieveSettingsForActiveAccount();
-    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    this.activeDid = settings.activeDid || "";
-    this.activeDid = (settings?.activeDid as string) || "";
+    this.apiServer = settings.apiServer || "";
-    this.apiServer = (settings?.apiServer as string) || "";
 
     const pathParam = window.location.pathname.substring("/did/".length);
-    let theContact: Contact | undefined;
+    let showDid = pathParam;
-    if (pathParam) {
+    if (!showDid) {
-      this.viewingDid = decodeURIComponent(pathParam);
+      showDid = this.activeDid;
-      theContact = await db.contacts.get(this.viewingDid);
+      if (showDid) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "toast",
+            title: "Your Info",
+            text: "No user was specified so showing your info.",
+          },
+          3000,
+        );
+      }
     }
-    if (theContact) {
+    if (showDid) {
-      this.contact = theContact;
+      this.viewingDid = decodeURIComponent(showDid);
-    } else {
+      this.contactFromDid = await db.contacts.get(this.viewingDid);
-      this.$notify(
+      if (this.contactFromDid) {
-        {
+        this.contactYaml = yaml.dump(this.contactFromDid);
-          group: "alert",
+      }
-          type: "danger",
+      await this.loadClaimsAbout();
-          title: "Error",
+
-          text: "No valid claim ID was provided.",
+      const allAccountDids = await libsUtil.retrieveAccountDids();
-        },
+      this.isMyDid = allAccountDids.includes(this.viewingDid);
-        -1,
-      );
-      return;
     }
-
-    this.contactYaml = yaml.dump(this.contact);
-    await this.loadClaimsAbout();
-
-    await accountsDB.open();
-    const allAccounts = await accountsDB.accounts.toArray();
-    this.allMyDids = allAccounts.map((acc) => acc.did);
   }
 
   /**
@@ -336,15 +318,20 @@ export default class DIDView extends Vue {
 
   // prompt with confirmation if they want to delete a contact
   confirmDeleteContact(contact: Contact) {
+    let message =
+      "Are you sure you want to remove " +
+      libsUtil.nameForContact(contact, false) +
+      " from your contact list?";
+    if (contact.seesMe) {
+      message +=
+        " Note that they can see your activity, so if you want to hide your activity from them then you should do that first.";
+    }
     this.$notify(
       {
         group: "modal",
         type: "confirm",
         title: "Delete",
-        text:
+        text: message,
-          "Are you sure you want to remove " +
-          libsUtil.nameForContact(contact, false) +
-          " from your contact list?",
         onYes: async () => {
           await this.deleteContact(contact);
         },
@@ -377,7 +364,7 @@ export default class DIDView extends Vue {
         title: "Register",
         text:
           "Are you sure you want to register " +
-          libsUtil.nameForContact(this.contact, false) +
+          libsUtil.nameForContact(this.contactFromDid, false) +
           (contact.registered
             ? " -- especially since they are already marked as registered"
             : "") +
@@ -430,7 +417,7 @@ export default class DIDView extends Vue {
       }
     } catch (error) {
       console.error("Error when registering:", error);
-      let userMessage = "There was an error. See logs for more info.";
+      let userMessage = "There was an error.";
       const serverError = error as AxiosError;
       if (serverError) {
         if (serverError.response?.data?.error?.message) {
@@ -507,7 +494,7 @@ export default class DIDView extends Vue {
           title: "Error",
           text: e.userMessage || "There was a problem retrieving claims.",
         },
-        -1,
+        3000,
       );
     } finally {
       this.isLoading = false;
@@ -553,17 +540,6 @@ export default class DIDView extends Vue {
     return claim.claim.name || claim.claim.description || "";
   }
 
-  private async onClickCancelName() {
-    this.contactEdit = false;
-  }
-
-  private async onClickSaveName(newName: string) {
-    this.contact.name = newName;
-    return db.contacts
-      .update(this.contact.did, { name: newName })
-      .then(() => (this.contactEdit = false));
-  }
-
   // note that this is also in ContactView.vue
   async confirmSetVisibility(contact: Contact, visibility: boolean) {
     const visibilityPrompt = visibility
@@ -708,6 +684,7 @@ export default class DIDView extends Vue {
 
 <style>
 .dialog-overlay {
+  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;

src/views/DiscoverView.vue

@@ -1,31 +1,75 @@
 <template>
-  <QuickNav selected="Discover"></QuickNav>
+  <QuickNav selected="Discover" />
   <TopMessage />
 
   <!-- CONTENT -->
   <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">
+    <h1 id="ViewHeading" class="text-4xl text-center font-light">
-      Discover Projects
+      Discover Projects & People
     </h1>
 
+    <OnboardingDialog ref="onboardingDialog" />
+
     <!-- Quick Search -->
-    <div id="QuickSearch" class="mb-4 flex" v-on:keyup.enter="searchSelected()">
+    <div
+      id="QuickSearch"
+      class="mt-8 mb-4 flex"
+      :style="{ visibility: isSearchVisible ? 'visible' : 'hidden' }"
+    >
       <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"
+        v-on:keyup.enter="searchSelected()"
       />
       <button
-        @click="searchSelected()"
         class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
+        @click="searchSelected()"
       >
         <fa icon="magnifying-glass" class="fa-fw"></fa>
       </button>
     </div>
 
     <!-- Result Tabs -->
+    <!-- Top Level Selection -->
+    <div class="text-center text-slate-500 border-b border-slate-300 mb-4">
+      <ul class="flex flex-wrap justify-center gap-4 -mb-px">
+        <li>
+          <a
+            href="#"
+            @click="
+              projects = [];
+              userProfiles = [];
+              isProjectsActive = true;
+              isPeopleActive = false;
+              searchSelected();
+            "
+            v-bind:class="computedProjectsTabStyleClassNames()"
+          >
+            Projects
+          </a>
+        </li>
+        <li>
+          <a
+            href="#"
+            @click="
+              projects = [];
+              userProfiles = [];
+              isProjectsActive = false;
+              isPeopleActive = true;
+              searchSelected();
+            "
+            v-bind:class="computedPeopleTabStyleClassNames()"
+          >
+            People
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Secondary Tabs -->
     <div class="text-center text-slate-500 border-b border-slate-300">
       <ul class="flex flex-wrap justify-center gap-4 -mb-px">
         <li>
@@ -33,19 +77,25 @@
             href="#"
             @click="
               projects = [];
+              userProfiles = [];
               isLocalActive = true;
-              isRemoteActive = false;
+              isMappedActive = false;
+              isAnywhereActive = false;
+              isSearchVisible = true;
+              tempSearchBox = null;
               searchLocal();
             "
             v-bind:class="computedLocalTabStyleClassNames()"
           >
             Nearby
+            <!-- restore when the links don't jump around for different numbers
             <span
               class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
               v-if="isLocalActive"
             >
               {{ localCount > -1 ? localCount : "?" }}
             </span>
+            -->
           </a>
         </li>
         <li>
@@ -53,35 +103,80 @@
             href="#"
             @click="
               projects = [];
-              isRemoteActive = true;
+              userProfiles = [];
               isLocalActive = false;
+              isMappedActive = true;
+              isAnywhereActive = false;
+              isSearchVisible = false;
+              searchTerms = '';
+              tempSearchBox = null;
+            "
+            v-bind:class="computedMappedTabStyleClassNames()"
+          >
+            <!-- search is triggered when map component gets to "ready" state -->
+            Mapped
+          </a>
+        </li>
+        <li>
+          <a
+            href="#"
+            @click="
+              projects = [];
+              userProfiles = [];
+              isLocalActive = false;
+              isMappedActive = false;
+              isAnywhereActive = true;
+              isSearchVisible = true;
+              tempSearchBox = null;
               searchAll();
             "
             v-bind:class="computedRemoteTabStyleClassNames()"
           >
             Anywhere
+            <!-- restore when the links don't jump around for different numbers
             <span
               class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
-              v-if="isRemoteActive"
+              v-if="isAnywhereActive"
             >
               {{ remoteCount > -1 ? remoteCount : "?" }}
             </span>
+            -->
           </a>
         </li>
       </ul>
     </div>
 
     <div v-if="isLocalActive">
-      <div>
+      <div class="text-center">
         <button
           class="ml-2 mt-2 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
           @click="$router.push({ name: 'search-area' })"
         >
+          <fa icon="location-dot" class="fa-fw" />
           Select a {{ searchBox ? "Different" : "" }} Location for Nearby Search
         </button>
       </div>
     </div>
 
+    <div v-if="isMappedActive && !tempSearchBox">
+      <div class="mt-4 h-96 w-5/6 mx-auto">
+        <l-map
+          ref="projectMap"
+          @ready="onMapReady"
+          @moveend="onMoveEnd"
+          @movestart="onMoveStart"
+          @zoomend="onZoomEnd"
+          @zoomstart="onZoomStart"
+        >
+          <l-tile-layer
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            layer-type="base"
+            name="OpenStreetMap"
+          />
+        </l-map>
+      </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"
@@ -89,61 +184,157 @@
     >
       <fa icon="spinner" class="fa-spin-pulse"></fa>
     </div>
+    <div
+      v-else-if="projects.length === 0 && userProfiles.length === 0"
+      class="text-center mt-8"
+    >
+      <p class="text-lg text-slate-500">
+        <span v-if="isLocalActive">
+          <span v-if="searchBox"> None found in the selected area. </span>
+          <!-- Otherwise there's no search area selected so we'll just leave the search box for them to click. -->
+        </span>
+        <span v-else-if="isAnywhereActive"
+          >No projects were found with that search.</span
+        >
+      </p>
+    </div>
 
     <!-- Results List -->
     <InfiniteScroll @reached-bottom="loadMoreData">
       <ul id="listDiscoverResults">
-        <li
+        <!-- Projects List -->
-          class="border-b border-slate-300"
+        <template v-if="isProjectsActive">
-          v-for="project in projects"
+          <li
-          :key="project.handleId"
+            class="border-b border-slate-300"
-        >
+            v-for="project in projects"
-          <a
+            :key="project.handleId"
-            @click="onClickLoadProject(project.handleId)"
-            class="block py-4 flex gap-4 cursor-pointer"
           >
-            <div>
+            <a
-              <ProjectIcon
+              @click="onClickLoadItem(project.handleId)"
-                :entityId="project.handleId"
+              class="block py-4 flex gap-4 cursor-pointer"
-                :iconSize="48"
+            >
-                :imageUrl="project.image"
+              <div>
-                class="block border border-slate-300 rounded-md max-h-12 max-w-12"
+                <ProjectIcon
-              />
+                  :entityId="project.handleId"
-            </div>
+                  :iconSize="48"
-
+                  :imageUrl="project.image"
-            <div class="grow">
+                  class="block border border-slate-300 rounded-md max-h-12 max-w-12"
-              <h2 class="text-base font-semibold">{{ project.name }}</h2>
+                />
-              <div class="text-sm">
-                <fa icon="user" class="fa-fw text-slate-400"></fa>
-                {{
-                  didInfo(project.issuerDid, activeDid, allMyDids, allContacts)
-                }}
               </div>
-            </div>
+
-          </a>
+              <div class="grow">
-        </li>
+                <h2 class="text-base font-semibold">{{ project.name }}</h2>
+                <div class="text-sm">
+                  <fa icon="user" class="fa-fw text-slate-400"></fa>
+                  {{
+                    didInfo(
+                      project.issuerDid,
+                      activeDid,
+                      allMyDids,
+                      allContacts,
+                    )
+                  }}
+                </div>
+              </div>
+            </a>
+          </li>
+        </template>
+
+        <!-- Profiles List -->
+        <template v-else>
+          <li
+            class="border-b border-slate-300"
+            v-for="profile in userProfiles"
+            :key="profile.issuerDid"
+          >
+            <a
+              @click="onClickLoadItem(profile?.rowId || '')"
+              class="block py-4 flex gap-4 cursor-pointer"
+            >
+              <div class="grow">
+                <div class="text-sm">
+                  <fa icon="user" class="fa-fw text-slate-400"></fa>
+                  {{
+                    didInfo(
+                      profile.issuerDid,
+                      activeDid,
+                      allMyDids,
+                      allContacts,
+                    )
+                  }}
+                </div>
+                <p
+                  v-if="profile.description"
+                  class="mt-1 text-sm text-slate-600"
+                >
+                  {{ profile.description }}
+                </p>
+                <div
+                  v-if="isAnywhereActive && profile.locLat && profile.locLon"
+                  class="mt-1 text-xs text-slate-500"
+                >
+                  <fa icon="location-dot" class="fa-fw"></fa>
+                  {{
+                    (profile.locLat > 0 ? "North" : "South") +
+                    " in " +
+                    (profile.locLon > 0 ? "Eastern" : "Western") +
+                    " Hemisphere"
+                  }}
+                </div>
+              </div>
+            </a>
+          </li>
+        </template>
       </ul>
     </InfiniteScroll>
   </section>
 </template>
 
 <script lang="ts">
+import "leaflet/dist/leaflet.css";
+import * as L from "leaflet";
 import { Component, Vue } from "vue-facing-decorator";
-import { Router } from "vue-router";
+import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
+import { Router, RouteLocationNormalizedLoaded } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
+import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import TopMessage from "@/components/TopMessage.vue";
-import { NotificationIface } from "@/constants/app";
+import { DEFAULT_PARTNER_API_SERVER, NotificationIface } from "@/constants/app";
-import { accountsDB, db } from "@/db/index";
+import {
+  db,
+  logConsoleAndDb,
+  retrieveSettingsForActiveAccount,
+} from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
-import { BoundingBox, MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { BoundingBox } from "@/db/tables/settings";
-import { didInfo, getHeaders, PlanData } from "@/libs/endorserServer";
+import {
+  didInfo,
+  errorStringForLog,
+  getHeaders,
+  PlanData,
+} from "@/libs/endorserServer";
+import { UserProfile } from "@/libs/partnerServer";
+import { OnboardPage, retrieveAccountDids } from "@/libs/util";
+
+interface Tile {
+  indexLat: number;
+  indexLon: number;
+  minFoundLat: number;
+  maxFoundLat: number;
+  minFoundLon: number;
+  maxFoundLon: number;
+  recordCount: number;
+}
 
 @Component({
   components: {
     InfiniteScroll,
+    LMap,
+    LTileLayer,
+    OnboardingDialog,
     ProjectIcon,
     QuickNav,
     TopMessage,
@@ -151,41 +342,66 @@ import { didInfo, getHeaders, PlanData } from "@/libs/endorserServer";
 })
 export default class DiscoverView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
+  $router!: Router;
+  $route!: RouteLocationNormalizedLoaded;
 
   activeDid = "";
   allContacts: Array<Contact> = [];
   allMyDids: Array<string> = [];
   apiServer = "";
-  searchTerms = "";
-  projects: PlanData[] = [];
   isLoading = false;
   isLocalActive = true;
-  isRemoteActive = false;
+  isMappedActive = false;
+  isAnywhereActive = false;
+  isProjectsActive = true;
+  isPeopleActive = false;
+  isSearchVisible = true;
+  localCenterLat = 0;
+  localCenterLong = 0;
   localCount = -1;
+  markers: { [key: string]: L.Marker } = {};
+  partnerApiServer = DEFAULT_PARTNER_API_SERVER;
+  projects: PlanData[] = [];
   remoteCount = -1;
   searchBox: { name: string; bbox: BoundingBox } | null = null;
+  searchTerms = "";
+  tempSearchBox: BoundingBox | null = null;
+  userProfiles: UserProfile[] = [];
+  zoomedSoDoNotMove = false;
 
   // make this function available to the Vue template
   didInfo = didInfo;
 
   async mounted() {
-    await db.open();
+    const settings = await retrieveSettingsForActiveAccount();
-    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    this.activeDid = (settings.activeDid as string) || "";
-    this.activeDid = (settings?.activeDid as string) || "";
+    this.apiServer = (settings.apiServer as string) || "";
-    this.apiServer = (settings?.apiServer as string) || "";
+    this.partnerApiServer =
-    this.searchBox = settings?.searchBoxes?.[0] || null;
+      (settings.partnerApiServer as string) || this.partnerApiServer;
+    this.searchBox = settings.searchBoxes?.[0] || null;
 
     this.allContacts = await db.contacts.toArray();
 
-    await accountsDB.open();
+    this.allMyDids = await retrieveAccountDids();
-    const allAccounts = await accountsDB.accounts.toArray();
+
-    this.allMyDids = allAccounts.map((acc) => acc.did);
+    this.searchTerms = this.$route.query["searchText"]?.toString() || "";
+
+    if (!settings.finishedOnboarding) {
+      (this.$refs.onboardingDialog as OnboardingDialog).open(
+        OnboardPage.Discover,
+      );
+    }
 
     if (this.searchBox) {
       await this.searchLocal();
+
+      const bbox = this.searchBox.bbox;
+      this.localCenterLat = (bbox.maxLat + bbox.minLat) / 2;
+      this.localCenterLong = (bbox.eastLong + bbox.westLong) / 2;
     } else {
       this.isLocalActive = false;
-      this.isRemoteActive = true;
+      this.isMappedActive = false;
+      this.isAnywhereActive = true;
       await this.searchAll();
     }
   }
@@ -198,6 +414,9 @@ export default class DiscoverView extends Vue {
   public async searchSelected() {
     if (this.isLocalActive) {
       await this.searchLocal();
+    } else if (this.isMappedActive) {
+      const mapRef = this.$refs.projectMap as L.Map;
+      this.requestTiles(mapRef.leafletObject); // not ideal because I found this from experimentation, not documentation
     } else {
       await this.searchAll();
     }
@@ -209,6 +428,7 @@ export default class DiscoverView extends Vue {
     if (!beforeId) {
       // this was an initial search so clear any previous results
       this.projects = [];
+      this.userProfiles = [];
     }
 
     let queryParams = "claimContents=" + encodeURIComponent(this.searchTerms);
@@ -217,64 +437,60 @@ export default class DiscoverView extends Vue {
       queryParams = queryParams + `&beforeId=${beforeId}`;
     }
 
+    const endpoint = this.isProjectsActive
+      ? this.apiServer + "/api/v2/report/plans"
+      : this.partnerApiServer + "/api/partner/userProfile";
+
     try {
       this.isLoading = true;
-      const response = await fetch(
+      const response = await fetch(endpoint + "?" + queryParams, {
-        this.apiServer + "/api/v2/report/plans?" + queryParams,
+        method: "GET",
-        {
+        headers: await getHeaders(this.activeDid),
-          method: "GET",
+      });
-          headers: await getHeaders(this.activeDid),
-        },
-      );
 
       if (response.status !== 200) {
         const details = await response.text();
-        console.error("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: PlanData[] = results.data;
+      if (this.isProjectsActive) {
-      if (plans) {
+        this.userProfiles = [];
-        for (const plan of plans) {
+        const plans: PlanData[] = results.data;
-          const { name, description, handleId, image, issuerDid, rowid } = plan;
+        if (plans) {
-          this.projects.push({
+          this.projects.push(...plans);
-            name,
+          this.remoteCount = this.projects.length;
-            description,
+        } else {
-            handleId,
+          throw JSON.stringify(results);
-            image,
-            issuerDid,
-            rowid,
-          });
         }
-        this.remoteCount = this.projects.length;
       } else {
-        throw JSON.stringify(results);
+        this.projects = [];
+        const profiles: UserProfile[] = results.data;
+        if (profiles) {
+          this.userProfiles.push(...profiles);
+          this.remoteCount = this.userProfiles.length;
+        } else {
+          throw JSON.stringify(results);
+        }
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (e: any) {
-      console.error("Error with feed load:", e);
+      console.error("Error with search all:", e);
       // this sometimes gives different information
-      console.error("Error with feed load (error added): " + e);
+      console.error("Error with search all (error added): " + e);
       this.$notify(
         {
           group: "alert",
           type: "danger",
-          title: "Error",
+          title: "Error Searching",
-          text: e.userMessage || "There was a problem retrieving projects.",
+          text:
+            e.userMessage ||
+            "There was a problem retrieving " +
+              (this.isProjectsActive ? "projects" : "profiles") +
+              ".",
         },
-        -1,
+        5000,
       );
     } finally {
       this.isLoading = false;
@@ -284,14 +500,20 @@ export default class DiscoverView extends Vue {
   public async searchLocal(beforeId?: string) {
     this.resetCounts();
 
-    if (!this.searchBox) {
+    const searchBox =
+      (this.isMappedActive && this.tempSearchBox) ||
+      (this.isLocalActive && this.searchBox?.bbox);
+
+    if (!searchBox) {
       this.projects = [];
+      this.userProfiles = [];
       return;
     }
 
     if (!beforeId) {
       // this was an initial search so clear any previous results
       this.projects = [];
+      this.userProfiles = [];
     }
 
     const claimContents =
@@ -299,74 +521,68 @@ export default class DiscoverView extends Vue {
 
     let queryParams = [
       claimContents,
-      "minLocLat=" + this.searchBox.bbox.minLat,
+      "minLocLat=" + searchBox.minLat,
-      "maxLocLat=" + this.searchBox.bbox.maxLat,
+      "maxLocLat=" + searchBox.maxLat,
-      "westLocLon=" + this.searchBox.bbox.westLong,
+      "minLocLon=" + searchBox.westLong,
-      "eastLocLon=" + this.searchBox.bbox.eastLong,
+      "maxLocLon=" + searchBox.eastLong,
     ].join("&");
 
     if (beforeId) {
       queryParams = queryParams + `&beforeId=${beforeId}`;
     }
 
+    const endpoint = this.isProjectsActive
+      ? this.apiServer + "/api/v2/report/plansByLocation"
+      : this.partnerApiServer + "/api/partner/userProfile";
+
     try {
       this.isLoading = true;
-      const response = await fetch(
+      const response = await fetch(endpoint + "?" + queryParams, {
-        this.apiServer + "/api/v2/report/plansByLocation?" + queryParams,
+        method: "GET",
-        {
+        headers: await getHeaders(this.activeDid),
-          method: "GET",
+      });
-          headers: await getHeaders(this.activeDid),
-        },
-      );
 
       if (response.status !== 200) {
         const details = await response.text();
-        console.error("Problem with nearby search:", details);
+        throw 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 (this.isProjectsActive) {
-        if (beforeId) {
+        this.userProfiles = [];
-          const plans: PlanData[] = results.data;
+        const plans: PlanData[] = results.data;
-          for (const plan of plans) {
+        if (plans) {
-            const { name, description, handleId, issuerDid, rowid } = plan;
+          this.projects.push(...plans);
-            this.projects.push({
+          this.localCount = this.projects.length;
-              name,
-              description,
-              handleId,
-              issuerDid,
-              rowid,
-            });
-          }
         } else {
-          this.projects = results.data;
+          throw JSON.stringify(results);
         }
-        this.localCount = this.projects.length;
       } else {
-        throw JSON.stringify(results);
+        this.projects = [];
+        const profiles: UserProfile[] = results.data;
+        if (profiles) {
+          this.userProfiles.push(...profiles);
+          this.localCount = this.userProfiles.length;
+        } else {
+          throw JSON.stringify(results);
+        }
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (e: any) {
-      console.error("Error with feed load:", e);
+      console.error("Error with search local:", e);
       this.$notify(
         {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: e.userMessage || "There was a problem retrieving projects.",
+          text:
+            e.userMessage ||
+            "There was a problem retrieving " +
+              (this.isProjectsActive ? "projects" : "profiles") +
+              ".",
         },
-        -1,
+        5000,
       );
     } finally {
       this.isLoading = false;
@@ -378,26 +594,156 @@ export default class DiscoverView extends Vue {
    * @param payload is the flag from the InfiniteScroll indicating if it should load
    **/
   async loadMoreData(payload: boolean) {
-    if (this.projects.length > 0 && payload) {
+    if (payload) {
-      const latestProject = this.projects[this.projects.length - 1];
+      if (this.isProjectsActive && this.projects.length > 0) {
-      if (this.isLocalActive) {
+        const latestProject = this.projects[this.projects.length - 1];
-        this.searchLocal(latestProject["rowid"]);
+        if (this.isLocalActive || this.isMappedActive) {
-      } else if (this.isRemoteActive) {
+          this.searchLocal(latestProject.rowId);
-        this.searchAll(latestProject["rowid"]);
+        } else if (this.isAnywhereActive) {
+          this.searchAll(latestProject.rowId);
+        }
+      } else if (this.isPeopleActive && this.userProfiles.length > 0) {
+        const latestProfile = this.userProfiles[this.userProfiles.length - 1];
+        if (this.isLocalActive || this.isMappedActive) {
+          this.searchLocal(latestProfile.rowId || "");
+        } else if (this.isAnywhereActive) {
+          this.searchAll(latestProfile.rowId || "");
+        }
       }
     }
   }
 
+  clearMarkers() {
+    Object.values(this.markers).forEach((marker) => marker.remove());
+    this.markers = {};
+  }
+
+  async onMapReady(map: L.Map) {
+    // doing this here instead of on the l-map element avoids a recentering after a drag then zoom at startup
+    map.setView([this.localCenterLat, this.localCenterLong], 2);
+    this.requestTiles(map);
+  }
+
+  // Tried but failed to use other vue-leaflet methods update:zoom and update:bounds
+  // To access the from this.$refs, use this.$refs.projectMap.leafletObject (or maybe mapObject)
+
+  onMoveStart(/* event: L.LocationEvent */) {
+    // don't remove markers because they follow the map when moving (and the experience is jarring)
+  }
+
+  async onMoveEnd(event: L.LocationEvent) {
+    if (this.zoomedSoDoNotMove) {
+      // since a zoom triggers a moveend, too, don't duplicate a tile request
+      this.zoomedSoDoNotMove = false;
+    } else {
+      // not part of a zoom so request tiles
+      await this.requestTiles(event.target);
+    }
+  }
+
+  onZoomStart(/* event: L.LocationEvent */) {
+    // remove markers because otherwise they jump around at zoom end
+    this.clearMarkers();
+
+    this.zoomedSoDoNotMove = true;
+  }
+
+  async onZoomEnd(event: L.LocationEvent) {
+    await this.requestTiles(event.target);
+  }
+
+  async requestTiles(targetMap: L.Map) {
+    try {
+      const bounds = targetMap.getBounds();
+      const queryParams = [
+        "minLocLat=" + bounds?.getSouthWest().lat,
+        "maxLocLat=" + bounds?.getNorthEast().lat,
+        "westLocLon=" + bounds?.getSouthWest().lng,
+        "eastLocLon=" + bounds?.getNorthEast().lng,
+      ].join("&");
+      const endpoint = this.isProjectsActive
+        ? this.apiServer + "/api/v2/report/planCountsByBBox"
+        : this.partnerApiServer + "/api/partner/userProfileCountsByBBox";
+      const response = await fetch(endpoint + "?" + queryParams);
+      if (response.status === 200) {
+        this.clearMarkers();
+        const results = await response.json();
+        if (results.data?.tiles?.length > 0) {
+          for (const tile: Tile of results.data.tiles) {
+            const pinLat = (tile.minFoundLat + tile.maxFoundLat) / 2;
+            const pinLon = (tile.minFoundLon + tile.maxFoundLon) / 2;
+            const numberIcon = L.divIcon({
+              className: "numbered-marker",
+              html: `<strong>${tile.recordCount}</strong>`,
+              iconSize: [24, 24],
+              // Why isn't this showing?
+              iconAnchor: [12, 12], // coordinates of the tip of the icon relative to the top-left corner of the icon
+            });
+            const marker = L.marker([pinLat, pinLon], { icon: numberIcon });
+            marker.addTo(targetMap);
+            marker.on("click", () => {
+              this.tempSearchBox = {
+                minLat: tile.minFoundLat,
+                maxLat: tile.maxFoundLat,
+                westLong: tile.minFoundLon,
+                eastLong: tile.maxFoundLon,
+              };
+              this.searchLocal();
+            });
+            this.markers[
+              "" +
+                tile.indexLat +
+                "X" +
+                tile.indexLon +
+                "_" +
+                tile.minFoundLat +
+                "X" +
+                tile.minFoundLon +
+                "-" +
+                tile.maxFoundLat +
+                "X" +
+                tile.maxFoundLon
+            ] = marker;
+          }
+        }
+      } else {
+        throw {
+          message: "Got an error loading projects on the map.",
+          response: {
+            status: response.status,
+            statusText: response.statusText,
+            url: response.url,
+          },
+        };
+      }
+    } catch (e) {
+      logConsoleAndDb(
+        "Error loading projects on the map: " + errorStringForLog(e),
+        true,
+      );
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Map Error",
+          text: "There was a problem loading projects on the map.",
+        },
+        3000,
+      );
+    }
+  }
+
   /**
-   * Handle clicking on a project entry found in the list
+   * Handle clicking on a project or profile entry found in the list
-   * @param id of the project
+   * @param id of the project or profile
    **/
-  onClickLoadProject(id: string) {
+  onClickLoadItem(id: string) {
-    localStorage.setItem("projectId", id);
     const route = {
-      path: "/project/" + encodeURIComponent(id),
+      path: this.isProjectsActive
+        ? "/project/" + encodeURIComponent(id)
+        : "/userProfile/" + encodeURIComponent(id),
     };
-    (this.$router as Router).push(route);
+    this.$router.push(route);
   }
 
   public computedLocalTabStyleClassNames() {
@@ -418,6 +764,24 @@ export default class DiscoverView extends Vue {
     };
   }
 
+  public computedMappedTabStyleClassNames() {
+    return {
+      "inline-block": true,
+      "py-3": true,
+      "rounded-t-lg": true,
+      "border-b-2": true,
+
+      active: this.isMappedActive,
+      "text-black": this.isMappedActive,
+      "border-black": this.isMappedActive,
+      "font-semibold": this.isMappedActive,
+
+      "text-blue-600": !this.isMappedActive,
+      "border-transparent": !this.isMappedActive,
+      "hover:border-slate-400": !this.isMappedActive,
+    };
+  }
+
   public computedRemoteTabStyleClassNames() {
     return {
       "inline-block": true,
@@ -425,15 +789,67 @@ export default class DiscoverView extends Vue {
       "rounded-t-lg": true,
       "border-b-2": true,
 
-      active: this.isRemoteActive,
+      active: this.isAnywhereActive,
-      "text-black": this.isRemoteActive,
+      "text-black": this.isAnywhereActive,
-      "border-black": this.isRemoteActive,
+      "border-black": this.isAnywhereActive,
-      "font-semibold": this.isRemoteActive,
+      "font-semibold": this.isAnywhereActive,
 
-      "text-blue-600": !this.isRemoteActive,
+      "text-blue-600": !this.isAnywhereActive,
-      "border-transparent": !this.isRemoteActive,
+      "border-transparent": !this.isAnywhereActive,
-      "hover:border-slate-400": !this.isRemoteActive,
+      "hover:border-slate-400": !this.isAnywhereActive,
+    };
+  }
+
+  public computedProjectsTabStyleClassNames() {
+    return {
+      "inline-block": true,
+      "py-3": true,
+      "rounded-t-lg": true,
+      "border-b-2": true,
+
+      active: this.isProjectsActive,
+      "text-black": this.isProjectsActive,
+      "border-black": this.isProjectsActive,
+      "font-semibold": this.isProjectsActive,
+
+      "text-blue-600": !this.isProjectsActive,
+      "border-transparent": !this.isProjectsActive,
+      "hover:border-slate-400": !this.isProjectsActive,
+    };
+  }
+
+  public computedPeopleTabStyleClassNames() {
+    return {
+      "inline-block": true,
+      "py-3": true,
+      "rounded-t-lg": true,
+      "border-b-2": true,
+
+      active: this.isPeopleActive,
+      "text-black": this.isPeopleActive,
+      "border-black": this.isPeopleActive,
+      "font-semibold": this.isPeopleActive,
+
+      "text-blue-600": !this.isPeopleActive,
+      "border-transparent": !this.isPeopleActive,
+      "hover:border-slate-400": !this.isPeopleActive,
     };
   }
 }
 </script>
+<style>
+.numbered-marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 14px;
+  font-weight: bold;
+  color: white;
+  background: blue;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid white;
+}
+</style>

src/views/GiftedDetailsView.vue

@@ -21,15 +21,25 @@
     <h1 class="text-4xl text-center font-light px-4 mb-4">What Was Given</h1>
 
     <h1 class="text-xl font-bold text-center mb-4">
-      <span>From {{ giverName }}</span>
+      <span>
+        From
+        {{
+          providedByProject
+            ? providerProjectName
+            : providedByGiver
+              ? giverName
+              : "someone not named"
+        }}
+      </span>
+      <br />
       <span>
         to
         {{
           givenToProject
-            ? projectName
+            ? fulfillsProjectName
             : givenToRecipient
               ? recipientName
-              : "someone unidentified"
+              : "someone not named"
         }}</span
       >
     </h1>
@@ -64,7 +74,7 @@
       </div>
     </div>
 
-    <div class="flex justify-center mt-4" data-testid="imagery">
+    <div class="flex justify-center mt-4" data-testId="imagery">
       <span v-if="imageUrl" class="flex justify-between">
         <a :href="imageUrl" target="_blank">
           <img :src="imageUrl" class="h-24 rounded-xl" />
@@ -85,56 +95,132 @@
     </div>
     <ImageMethodDialog ref="imageDialog" />
 
-    <div class="h-7 mt-4 flex">
+    <div class="mt-4 flex justify-between gap-2">
-      <input
+      <!-- First Column for Giver -->
-        v-if="projectId && !givenToRecipient"
+      <div class="flex-grow border border-slate-400 p-2 rounded-md">
-        type="checkbox"
+        <div class="flex">
-        class="h-6 w-6 mr-2"
+          <input
-        v-model="givenToProject"
+            v-if="giverDid && !providedByProject"
-      />
+            type="checkbox"
-      <fa
+            class="h-6 w-6 mr-2"
-        v-else
+            v-model="providedByGiver"
-        icon="square"
+          />
-        class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
+          <fa
-        @click="notifyUserOfProject()"
+            v-else
-      />
+            icon="square"
-      <label class="text-sm mt-1">
+            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
-        {{
+          />
-          projectId
+          <label class="text-sm mt-1">
-            ? "This was given to " + projectName
+            {{
-            : "No project was chosen"
+              giverDid
-        }}
+                ? "This was provided by " + giverName + "."
-      </label>
+                : "No named individual gave."
+            }}
+          </label>
+          <fa
+            v-if="!giverDid || providedByProject"
+            icon="info-circle"
+            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
+            @click="notifyUserOfGiver()"
+          />
+        </div>
+
+        <div class="flex">
+          <input
+            v-if="providerProjectId && !providedByGiver"
+            type="checkbox"
+            class="h-6 w-6 mr-2"
+            v-model="providedByProject"
+          />
+          <fa
+            v-else
+            icon="square"
+            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
+          />
+          <label class="text-sm mt-1">
+            {{
+              providerProjectId
+                ? "This was provided by " + providerProjectName + "."
+                : "This was not provided by a project."
+            }}
+          </label>
+          <fa
+            v-if="!providerProjectId || providedByGiver"
+            icon="info-circle"
+            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
+            @click="notifyUserOfProvidingProject()"
+          />
+        </div>
+      </div>
+
+      <div class="flex-shrink flex justify-center items-center">
+        <fa icon="arrow-right" class="fa-fw h-7" />
+      </div>
+
+      <!-- Third Column for Recipient -->
+      <div class="flex-grow border border-slate-400 p-2 rounded-md">
+        <div class="flex">
+          <input
+            v-if="recipientDid && !givenToProject"
+            type="checkbox"
+            class="h-6 w-6 mr-2"
+            v-model="givenToRecipient"
+          />
+          <fa
+            v-else
+            icon="square"
+            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
+          />
+          <label class="text-sm mt-1">
+            {{
+              recipientDid
+                ? "This was given to " + recipientName + "."
+                : "No individual benefitted."
+            }}
+          </label>
+          <fa
+            v-if="!recipientDid || givenToProject"
+            icon="info-circle"
+            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
+            @click="notifyUserOfRecipient()"
+          />
+        </div>
+
+        <div class="flex">
+          <input
+            v-if="fulfillsProjectId && !givenToRecipient"
+            type="checkbox"
+            class="h-6 w-6 mr-2"
+            v-model="givenToProject"
+          />
+          <fa
+            v-else
+            icon="square"
+            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
+          />
+          <label class="text-sm mt-1">
+            {{
+              fulfillsProjectId
+                ? "This was given to " + fulfillsProjectName + ". "
+                : "No project benefitted."
+            }}
+          </label>
+          <fa
+            v-if="!fulfillsProjectId || givenToRecipient"
+            icon="info-circle"
+            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
+            @click="notifyUserFulfillsProject()"
+          />
+        </div>
+      </div>
     </div>
 
-    <div class="h-7 mt-4 flex">
+    <div class="mt-8 flex">
-      <input
-        v-if="recipientDid && !givenToProject"
-        type="checkbox"
-        class="h-6 w-6 mr-2"
-        v-model="givenToRecipient"
-      />
-      <fa
-        v-else
-        icon="square"
-        class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
-        @click="notifyUserOfRecipient()"
-      />
-      <label class="text-sm mt-1">
-        {{
-          recipientDid
-            ? "This was given to " + recipientName
-            : "No recipient was chosen."
-        }}
-      </label>
-    </div>
-
-    <div class="mt-4 flex">
       <input type="checkbox" class="h-6 w-6 mr-2" v-model="isTrade" />
       <label class="text-sm mt-1">This was a trade (not a gift)</label>
     </div>
 
-    <div class="mt-4 flex">
+    <div v-if="showGeneralAdvanced" class="mt-4 flex">
       <router-link
         :to="{
           name: 'claim-add-raw',
@@ -144,7 +230,7 @@
         }"
         class="text-blue-500"
       >
-        Edit & Submit Raw
+        Edit Raw Data
       </router-link>
     </div>
 
@@ -181,8 +267,7 @@ import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
-import { accountsDB, db } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import {
   createAndSubmitGive,
   didInfo,
@@ -194,7 +279,7 @@ import {
   hydrateGive,
 } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
-import { Contact } from "@/db/tables/contacts";
+import { retrieveAccountDids } from "@/libs/util";
 
 @Component({
   components: {
@@ -212,9 +297,11 @@ export default class GiftedDetails extends Vue {
   amountInput = "0";
   description = "";
   destinationPathAfter = "";
-  givenToProject = false;
+  fulfillsProjectId = "";
-  givenToRecipient = false;
+  fulfillsProjectName = "a project";
-  giverDid: string | undefined;
+  givenToProject = false; // basically static, based on input; if we allow changing then let's fix things (see below)
+  givenToRecipient = false; // basically static, based on input; if we allow changing then let's fix things (see below)
+  giverDid = "";
   giverName = "";
   hideBackButton = false;
   imageUrl = "";
@@ -222,10 +309,13 @@ export default class GiftedDetails extends Vue {
   message = "";
   offerId = "";
   prevCredToEdit?: GenericCredWrapper<GiveVerifiableCredential>;
-  projectId = "";
+  providerProjectId = "";
-  projectName = "a project";
+  providerProjectName = "a project";
+  providedByProject = false; // basically static, based on input; if we allow changing then let's fix things (see below)
+  providedByGiver = false; // basically static, based on input; if we allow changing then let's fix things (see below)
   recipientDid = "";
   recipientName = "";
+  showGeneralAdvanced = false;
   unitCode = "HUR";
 
   libsUtil = libsUtil;
@@ -282,11 +372,31 @@ export default class GiftedDetails extends Vue {
       offer?.identifier ||
       this.offerId) as string;
 
-    // find any project ID
+    // find any fulfills project ID
-    const project = fulfillsArray.find((rec) => rec["@type"] === "PlanAction");
+    const fulfillsProject = fulfillsArray.find(
-    this.projectId = ((this.$route as Router).query["projectId"] ||
+      (rec) => rec["@type"] === "PlanAction",
-      project?.identifier ||
+    );
-      this.projectId) as string;
+    // eslint-disable-next-line prettier/prettier
+    this.fulfillsProjectId =
+      ((this.$route as Router).query["fulfillsProjectId"] ||
+      fulfillsProject?.identifier ||
+      this.fulfillsProjectId) as string;
+
+    // find any provider project ID
+    const provider = this.prevCredToEdit?.claim?.provider;
+    const providerArray = Array.isArray(provider)
+      ? provider
+      : provider
+        ? [provider]
+        : [];
+    const providerProject = providerArray.find(
+      (rec) => rec["@type"] === "PlanAction",
+    );
+    this.providerProjectId = ((this.$route as Router).query[
+      "providerProjectId"
+    ] ||
+      providerProject?.identifier ||
+      this.providerProjectId) as string;
 
     this.recipientDid = ((this.$route as Router).query["recipientDid"] ||
       this.prevCredToEdit?.claim?.recipient?.identifier) as string;
@@ -318,68 +428,65 @@ export default class GiftedDetails extends Vue {
       this.imageUrl = (this.$route as Router).query["shareUrl"] as string;
     }
 
-    try {
+    const settings = await retrieveSettingsForActiveAccount();
-      await db.open();
+    this.apiServer = settings.apiServer || "";
-      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+    this.activeDid = settings.activeDid || "";
-      this.apiServer = settings?.apiServer || "";
-      this.activeDid = settings?.activeDid || "";
 
-      let allContacts: Contact[] = [];
+    if (
-      let allMyDids: string[] = [];
+      (this.giverDid && !this.giverName) ||
-      if (
+      (this.recipientDid && !this.recipientName)
-        (this.giverDid && !this.giverName) ||
+    ) {
-        (this.recipientDid && !this.recipientName)
+      const allContacts = await db.contacts.toArray();
-      ) {
+      const allMyDids = await retrieveAccountDids();
-        allContacts = await db.contacts.toArray();
+      if (this.giverDid && !this.giverName) {
-
+        this.giverName = didInfo(
-        await accountsDB.open();
+          this.giverDid,
-        const allAccounts = await accountsDB.accounts.toArray();
+          this.activeDid,
-        allMyDids = allAccounts.map((acc) => acc.did);
+          allMyDids,
-        if (this.giverDid && !this.giverName) {
+          allContacts,
-          this.giverName = didInfo(
+        );
-            this.giverDid,
+      }
-            this.activeDid,
+      if (this.recipientDid && !this.recipientName) {
-            allMyDids,
+        this.recipientName = didInfo(
-            allContacts,
+          this.recipientDid,
-          );
+          this.activeDid,
-        }
+          allMyDids,
-        if (this.recipientDid && !this.recipientName) {
+          allContacts,
-          this.recipientName = didInfo(
+        );
-            this.recipientDid,
-            this.activeDid,
-            allMyDids,
-            allContacts,
-          );
-        }
       }
-      // these should be functions but something's wrong with the syntax in the <> conditional
-      this.givenToProject = !!this.projectId;
-      this.givenToRecipient = !this.givenToProject && !!this.recipientDid;
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (err: any) {
-      console.error("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,
-      );
     }
+    // these should be functions but something's wrong with the syntax in the <> conditional
+    this.givenToProject = !!this.fulfillsProjectId;
+    this.givenToRecipient = !this.givenToProject && !!this.recipientDid;
 
-    if (this.projectId) {
+    // these should be functions but something's wrong with the syntax in the <> conditional
-      // console.log("Getting project name from cache", this.projectId);
+    this.providedByProject = !!this.providerProjectId;
-      const project = await getPlanFromCache(
+    this.providedByGiver = !this.providedByProject && !!this.giverDid;
-        this.projectId,
+
+    this.showGeneralAdvanced = !!settings.showGeneralAdvanced;
+
+    if (this.fulfillsProjectId) {
+      // console.log("Getting project name from cache", this.fulfillsProjectId);
+      const fulfillsProject = await getPlanFromCache(
+        this.fulfillsProjectId,
         this.axios,
         this.apiServer,
         this.activeDid,
       );
-      this.projectName = project?.name
+      this.fulfillsProjectName = fulfillsProject?.name
-        ? "the project: " + project.name
+        ? `the project "${fulfillsProject.name}"`
+        : "a project";
+    }
+    if (this.providerProjectId) {
+      // console.log("Getting project name from cache", this.providerProjectId);
+      const providerProject = await getPlanFromCache(
+        this.providerProjectId,
+        this.axios,
+        this.apiServer,
+        this.activeDid,
+      );
+      this.providerProjectName = providerProject?.name
+        ? `the project "${providerProject.name}"`
         : "a project";
     }
   }
@@ -470,7 +577,7 @@ export default class GiftedDetails extends Vue {
       console.error("Error deleting image:", error);
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       if ((error as any).response.status === 404) {
-        console.log("The image was already deleted:", error);
+        console.log("Weird: the image was already deleted.", error);
 
         localStorage.removeItem("imageUrl");
         this.imageUrl = "";
@@ -544,25 +651,24 @@ export default class GiftedDetails extends Vue {
     await this.recordGive();
   }
 
-  notifyUserOfProject() {
+  notifyUserOfGiver() {
-    if (!this.projectId) {
+    if (!this.giverDid) {
       this.$notify(
         {
           group: "alert",
           type: "warning",
-          title: "Error",
+          title: "Go To The Contacts Page",
-          text: "To assign to a project, you must open this page through a project.",
+          text: "To assign a giver, you must open this page from a contact.",
         },
         3000,
       );
     } else {
-      // must be because givenToRecipient is true
       this.$notify(
         {
           group: "alert",
           type: "warning",
-          title: "Error",
+          title: "Unavailable",
-          text: "You cannot assign both to a project and to a recipient.",
+          text: "You cannot assign both a giver and a project.",
         },
         3000,
       );
@@ -575,7 +681,7 @@ export default class GiftedDetails extends Vue {
         {
           group: "alert",
           type: "warning",
-          title: "Error",
+          title: "Go To The Contacts Page",
           text: "To assign to a recipient, you must open this page from a contact.",
         },
         3000,
@@ -586,7 +692,7 @@ export default class GiftedDetails extends Vue {
         {
           group: "alert",
           type: "warning",
-          title: "Error",
+          title: "Unavailable",
           text: "You cannot assign both to a recipient and to a project.",
         },
         3000,
@@ -594,6 +700,58 @@ export default class GiftedDetails extends Vue {
     }
   }
 
+  notifyUserOfProvidingProject() {
+    // we're here because they clicked and either there is no provider project or there is a giver chosen
+    if (!this.providerProjectId) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Go To The Project Page",
+          text: "To select a project as a provider, you must open this page through a project.",
+        },
+        3000,
+      );
+    } else {
+      // no providing project was chosen
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Unavailable",
+          text: "You cannot select both a giving project and person.",
+        },
+        3000,
+      );
+    }
+  }
+
+  notifyUserFulfillsProject() {
+    // we're here because they clicked and either there is no fulfills project or there is a recipient chosen
+    if (!this.fulfillsProjectId) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Go To The Project Page",
+          text: "To assign to a project, you must open this page through a project.",
+        },
+        3000,
+      );
+    } else {
+      // no fulfills project was chosen
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Unavailable",
+          text: "You cannot assign both to a project and to a recipient.",
+        },
+        3000,
+      );
+    }
+  }
+
   /**
    *
    * @param giverDid may be null
@@ -603,10 +761,13 @@ export default class GiftedDetails extends Vue {
    */
   public async recordGive() {
     try {
+      const giverDid = this.providedByGiver ? this.giverDid : undefined;
       const recipientDid = this.givenToRecipient
         ? this.recipientDid
         : undefined;
-      const projectId = this.givenToProject ? this.projectId : undefined;
+      const fulfillsProjectId = this.givenToProject
+        ? this.fulfillsProjectId
+        : undefined;
       let result;
       if (this.prevCredToEdit) {
         // don't create from a blank one in case some properties were set from a different interface
@@ -615,30 +776,32 @@ export default class GiftedDetails extends Vue {
           this.apiServer,
           this.prevCredToEdit,
           this.activeDid,
-          this.giverDid,
+          giverDid,
           recipientDid,
           this.description,
           parseFloat(this.amountInput),
           this.unitCode,
-          projectId,
+          fulfillsProjectId,
           this.offerId,
           this.isTrade,
           this.imageUrl,
+          this.providerProjectId,
         );
       } else {
         result = await createAndSubmitGive(
           this.axios,
           this.apiServer,
           this.activeDid,
-          this.giverDid,
+          giverDid,
           recipientDid,
           this.description,
           parseFloat(this.amountInput),
           this.unitCode,
-          projectId,
+          fulfillsProjectId,
           this.offerId,
           this.isTrade,
           this.imageUrl,
+          this.providerProjectId,
         );
       }
 
@@ -655,7 +818,7 @@ export default class GiftedDetails extends Vue {
             title: "Error",
             text: errorMessage || "There was an error creating the give.",
           },
-          -1,
+          5000,
         );
       } else {
         this.$notify(
@@ -665,7 +828,7 @@ export default class GiftedDetails extends Vue {
             title: "Success",
             text: `That ${this.isTrade ? "trade" : "gift"} was recorded.`,
           },
-          5000,
+          3000,
         );
         localStorage.removeItem("imageUrl");
         if (this.destinationPathAfter) {
@@ -688,25 +851,29 @@ export default class GiftedDetails extends Vue {
           title: "Error",
           text: errorMessage,
         },
-        -1,
+        5000,
       );
     }
   }
 
   constructGiveParam() {
+    const giverDid = this.providedByGiver ? this.giverDid : undefined;
     const recipientDid = this.givenToRecipient ? this.recipientDid : undefined;
-    const projectId = this.givenToProject ? this.projectId : undefined;
+    const fulfillsProjectId = this.givenToProject
+      ? this.fulfillsProjectId
+      : undefined;
     const giveClaim = hydrateGive(
       this.prevCredToEdit?.claim as GiveVerifiableCredential,
-      this.giverDid,
+      giverDid,
       recipientDid,
       this.description,
       parseFloat(this.amountInput),
       this.unitCode,
-      projectId,
+      fulfillsProjectId,
       this.offerId,
       this.isTrade,
       this.imageUrl,
+      this.providerProjectId,
       this.prevCredToEdit?.id as string,
     );
     const claimStr = JSON.stringify(giveClaim);
@@ -745,7 +912,7 @@ export default class GiftedDetails extends Vue {
         title: "Data Sharing",
         text: libsUtil.PRIVACY_MESSAGE,
       },
-      -1,
+      7000,
     );
   }
 }

src/views/HelpNotificationTypesView.vue

@@ -0,0 +1,68 @@
+<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 Types
+      </h1>
+    </div>
+
+    <!-- eslint-disable prettier/prettier -->
+    <div>
+      <p>There are two types of notifications:</p>
+
+      <h2 class="text-xl font-semibold mt-4">Reminder Notifications</h2>
+      <div>
+        <p>
+          The Reminder Notification will be sent to you daily with a specific message,
+          at whatever time you choose. Use it to remind
+          yourself to act, for example: pause and consider who has given you
+          something, so you can record thanks in here.
+        </p>
+        <p>
+          This is a reliable message, but it doesn't contain any details about
+          activity that might be especially interesting to you.
+        </p>
+      </div>
+
+      <h2 class="text-xl font-semibold mt-4">New Activity Notifications</h2>
+      <div>
+        <p>
+          The New Activity Notification will be sent to you when there is new, relevant activity for you.
+          It will only trigger if something involves you or a project of interest; it will not
+          bug you for other, general activity.
+        </p>
+        <p>
+          This type is not as reliable as a Reminder Notification because mobile devices often suppress
+          such notifications to save battery. (If you want to quickly check for relevant activity daily,
+          use the Reminder Notification and open the app and look for a large green button that points out new
+          activity that is personal to you. We are working on other ways to notify you more
+          reliably -- <router-link class="text-blue-500" to="/help">go here to follow us or contact us</router-link>.)
+        </p>
+      </div>
+    </div>
+    <!-- eslint-enable -->
+  </section>
+</template>
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+
+import QuickNav from "@/components/QuickNav.vue";
+
+@Component({ components: { QuickNav } })
+export default class HelpNotificationTypesView extends Vue {}
+</script>

src/views/HelpNotificationsView.vue

@@ -39,6 +39,15 @@
         </p>
       </div>
 
+      <h2 class="text-xl font-semibold mt-4">Android Users</h2>
+      <div>
+        <p>
+          Note that you may not receive notifications when the app is in the
+          background. When you're done working, close the app, and then you'll
+          get the reminder notifications.
+        </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. -->
@@ -66,6 +75,7 @@
           <button class="text-blue-500" @click="showNotificationChoice()">
             Click here.
           </button>
+          <PushNotificationPermission ref="pushNotificationPermission" />
         </p>
       </div>
 
@@ -184,14 +194,18 @@
       <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
+          If all else fails, it's best to start over.
-          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
+          well as the contacts & settings -- on the Profile
           <fa icon="circle-user" /> page.
         </p>
+        <p>
+          Here are instructions to uninstall the app and clear out caches and storage.
+          Note that you should first ensure check that the browser tabs with Time Safari are closed.
+          (If any are open then that will interfere with your refresh.)
+        </p>
         <ul class="ml-4 list-disc">
           <li>
             Clear cache.
@@ -295,9 +309,12 @@ import { Component, Vue } from "vue-facing-decorator";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
-import { sendTestThroughPushServer } from "@/libs/util";
+import { DIRECT_PUSH_TITLE, sendTestThroughPushServer } from "@/libs/util";
+import PushNotificationPermission from "@/components/PushNotificationPermission.vue";
+import { db } from "@/db/index";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 
-@Component({ components: { QuickNav } })
+@Component({ components: { PushNotificationPermission, QuickNav } })
 export default class HelpNotificationsView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
@@ -305,8 +322,8 @@ export default class HelpNotificationsView extends Vue {
 
   async mounted() {
     try {
-      const registration = await navigator.serviceWorker.ready;
+      const registration = await navigator.serviceWorker?.ready;
-      const fullSub = await registration.pushManager.getSubscription();
+      const fullSub = await registration?.pushManager.getSubscription();
       this.subscriptionJSON = fullSub?.toJSON();
     } catch (error) {
       console.error("Mount error:", error);
@@ -314,10 +331,10 @@ export default class HelpNotificationsView extends Vue {
   }
 
   alertWebPushSubscription() {
-    console.log(
+    // console.log(
-      "Web push subscription:",
+    //   "Web push subscription:",
-      JSON.parse(JSON.stringify(this.subscriptionJSON)), // gives more info than plain console logging
+    //   JSON.parse(JSON.stringify(this.subscriptionJSON)), // gives more info than plain console logging
-    );
+    // );
     alert(JSON.stringify(this.subscriptionJSON));
   }
 
@@ -331,7 +348,7 @@ export default class HelpNotificationsView extends Vue {
           // Note that this exact verbiage shows in help text.
           text: "You must enable notifications before testing the web push.",
         },
-        -1,
+        5000,
       );
       return;
     }
@@ -348,7 +365,7 @@ export default class HelpNotificationsView extends Vue {
             "Check your device for the test web push message" +
             (skipFilter ? "." : " if there are new items in your feed."),
         },
-        -1,
+        5000,
       );
     } catch (error) {
       console.error("Got an error sending test notification:", error);
@@ -359,14 +376,14 @@ export default class HelpNotificationsView extends Vue {
           title: "Error Sending Test",
           text: "Got an error sending the test web push notification.",
         },
-        -1,
+        5000,
       );
     }
   }
 
   showTestNotification() {
     const TEST_NOTIFICATION_TITLE = "It Worked";
-    navigator.serviceWorker.ready
+    navigator.serviceWorker?.ready
       .then((registration) => {
         return registration.showNotification(TEST_NOTIFICATION_TITLE, {
           body: "This is your test notification.",
@@ -392,20 +409,25 @@ export default class HelpNotificationsView extends Vue {
             title: "Failed",
             text: "Got an error sending a notification.",
           },
-          -1,
+          5000,
         );
       });
   }
 
   showNotificationChoice() {
-    this.$notify(
+    (this.$refs.pushNotificationPermission as PushNotificationPermission).open(
-      {
+      DIRECT_PUSH_TITLE,
-        group: "modal",
+      async (success: boolean, timeText: string, message?: string) => {
-        type: "notification-permission",
+        if (success) {
-        title: "", // unused, only here to satisfy type check
+          await db.settings.update(MASTER_SETTINGS_KEY, {
-        text: "", // unused, only here to satisfy type check
+            notifyingReminderMessage: message,
+            notifyingReminderTime: timeText,
+          });
+          this.notifyingReminder = true;
+          this.notifyingReminderMessage = message || "";
+          this.notifyingReminderTime = timeText;
+        }
       },
-      -1,
     );
   }
 }

src/views/HelpOnboardingView.vue

@@ -12,45 +12,91 @@
       </h1>
     </div>
 
-    <!-- eslint-disable prettier/prettier -->
+    <p>
+      To invite someone the easiest way, send them a link that you generate from
+      this page:
+      <router-link
+        :to="{ name: 'invite-one' }"
+        class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+      >
+        <fa icon="envelope-open-text" class="fa-fw text-xl"
+      /></router-link>
+    </p>
+    <p>Then watch that page to see when they accept their invite.</p>
+    <p>
+      (That page is also reachable from the Contacts <fa icon="users" /> page
+      though the invitation <fa icon="envelope-open-text" /> icon.)
+    </p>
+
+    <h1 class="mt-4 font-bold text-xl">Next Steps</h1>
+    Although not totally necessary, backups are important to understand.
+
     <div class="ml-4">
-      <h1 class="font-bold text-xl">Install</h1>
+      <h1 class="font-bold text-xl">Without a backup, you can lose data.</h1>
       <div>
         <p>
-          1) Have them visit TimeSafari.app in a browser, preferably Chrome or Safari.
+          Exporting backups (from the Account <fa icon="circle-user" /> screen)
+          is important for the case where they lose their device. This is
+          especially true for the Identifier Seed: that is theirs and and theirs
+          alone, and currently nobody else can recover it if they lose it. The
+          good thing is that anyone can create a new account and simply inform
+          their network of their new ID.
+        </p>
+      </div>
+    </div>
+
+    <h1 class="mt-4 font-bold text-xl">Advanced</h1>
+    The following are optional steps for even more functionality.
+
+    <!-- eslint-disable prettier/prettier -->
+    <div class="ml-4">
+
+      <h1 class="font-bold text-xl">Add Contact & Register</h1>
+      <p>
+        You share even more information such as your picture and name when
+        you share with your QR code at these links: <fa icon="qrcode" />
+      </p>
+      <p>
+        Scanning
+        those with your cameras will automatically register people and add them
+        to each other's contact lists.
+      </p>
+      <p>
+        The following are more detailed manual steps:
+      </p>
+      <div>
+        <p>
+          1) Have them follow their yellow prompts.
         </p>
         <p>
-          2) Have them "Install" the site to their desktop.
+          2) Scan their QR, or have them tap on it to copy their info and send it to you.
+          Then you can add them to your Contacts <fa icon="users" />
+        </p>
+        <p>
+          3) You can register them at their info page <fa icon="circle-info" />
+          and click on the register button <fa icon="person-circle-question" />
+        </p>
+        <p>
+          4) Add yourself to their Contacts <fa icon="users" />
         </p>
       </div>
 
-      <h1 class="font-bold text-xl">Add Contact & Register</h1>
+      <h1 class="font-bold text-xl">Install</h1>
       <div>
         <p>
-          3) Have them follow their yellow prompts.
+          Have them visit TimeSafari.app in a browser, preferably Chrome or Safari,
-        </p>
+          and then look for the "Install" selection which adds this app to their desktop.
-        <p>
+          This enables other things, like the ability to "share" a photo from their
-          4) Add them to your contacts <fa icon="users" />
+          device directly to Time Safari, and it makes notifications more reliable.
-        </p>
-        <p>
-          5) Register them <fa icon="person-circle-question" />
-        </p>
-        <p>
-          6) Add yourself to their contacts <fa icon="users" />
         </p>
       </div>
 
       <h1 class="font-bold text-xl">Enable Notifications</h1>
       <div>
         <p>
-          7) Enable notifications from <fa icon="circle-user" />
+          Enable notifications from the Account page <fa icon="circle-user" />.
-        </p>
+          Those notifications might show up on the device depending on your settings.
-      </div>
+          For the most reliable habits, set an alarm or do some other ritual to record gratitude every day.
-
-      <h1 class="font-bold text-xl">Discuss Backups</h1>
-      <div>
-        <p>
-          8) Exporting backups <fa icon="circle-user" /> are important if they lose their phone --- especially for the Identifier Seed!
         </p>
       </div>
 

src/views/HelpView.vue

@@ -21,53 +21,192 @@
       </h1>
     </div>
 
-    <!-- eslint-disable prettier/prettier -->
+    <!-- eslint-disable prettier/prettier max-len -->
     <div>
       <p>
-        This app focuses on gifts & gratitude, using them to build cool things with your network.
+        This app focuses on gifts & gratitude, using them to build cool things together with your network.
+      </p>
+
+      <p class="ml-4">
+        If you'd like to see the page-by-page help,
+        <span
+          @click="unsetFinishedOnboarding()"
+          class="text-blue-500 cursor-pointer"
+        >click here</span>.
       </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.
+        We are building networks of people who want to grow good society from the ground up, using modern
-        First of all, let's build gratitude: see what people have given, and recognize
+        technology that connects people peer-to-peer.
+        First of all, let's showcase gratitude: see what people have given, and recognize
         gifts you've seen. This is done in a way that leaves a permanent record -- one that
-        came from you, and one that the recipient can prove it was for them. This is
+        came from you, and one that the recipient can prove it was for them. This can be
         personally gratifying, but it extends to broader work: volunteers get
-        confirmation of activity, and selectively show off their contributions
+        confirmation of activity, and they can selectively show off their contributions
         and network.
       </p>
-      <p>
+      <p class="mt-2">
-        With this, you highlight giving and also offer help --
+        With this, you highlight giving and you also offer help --
-        which could be conditional on others' willingness to help, too.
+        which could be conditional on others' contributions, too.
         You can record your own ideas and invite others to collaborate.
+        It's a way to organize & build with the resource that everyone has in equal amounts: time.
       </p>
-      <p>
+      <p class="mt-2">
-        This app uses the power of cryptography to build a reputation, recording
+        Note that your personal data is safe: your ID is only shared with those you allow. Neither
-        activity that you can share at your discretion. You put some activity
+        your name nor your contacts' names are shared with anyone -- even our servers --
-        public, but these services don't share your ID with others without explicit consent.
+        though you can explicitly share it with other individuals if you choose.
-        This is in contrast to Meta and Google, who hold
-        your data and allow you use it while they manage sharing...
-        those services are useful but they have the control, whereas this app gives you the control.
       </p>
 
+      <h2 class="text-xl font-semibold">I want to know more because...</h2>
+      <ul class="list-disc list-outside ml-4">
+        <li class="p-2">
+          <div @click="showAlpha = !showAlpha" class="text-blue-500">... I'm a member of Alpha chat.</div>
+          <div v-if="showAlpha">
+            <p>
+              This is a project for public benefit. You are invited to add your gratitude
+              and propose projects on a distributable ledger.
+            </p>
+            <p>
+              The underlying data is on a merkle tree with each verifiable claim, signature and all.
+              The chain includes individual IDs for discovery & visibility, so not all data is distributed -- yet.
+              The goal is to eventually distribute the data on people's devices with their chosen network,
+              where anyone could host their own chain of provenance if they choose.
+              The formats follow standard schemas (eg. schema.org) to encourage interoperability.
+              We're currently at the beginning phase where we're trusting the server to keep IDs private.
+              It's all open-source, and we expect to have a professional audit someday.
+            </p>
+            <p>
+              A person's network of contacts is similar: the server currently knows some of the links between people
+              to allow discovery and visibility. However, even that will be manageable on personal devices someday.
+            </p>
+            <p>
+              There are no tokens to maintain the chain: the purpose is to create software that communities
+              and activists can easily join and use. We're betting that this is a case where network
+              participants have the motivation to run the software. The protocol is meant to be lightweight enough that
+              non-technical people can run it on inexpensive devices they already own. There may be cases for
+              MPC or ZKP in the future when they are more widespread and standard,
+              but our preference is to engineer as simply as possible with "white-magic" cryptography
+              over those "black-magic" functions.
+            </p>
+            <p>
+              Let's make real distributed computing and shared data happen, starting with our own small networks.
+            </p>
+            <p>
+              ... and exemplify the fun along the way.
+            </p>
+          </div>
+        </li>
+        <li class="p-2">
+          <div @click="showGroup = !showGroup" class="text-blue-500">... I want to find a group I'll enjoy working with.</div>
+          <div v-if="showGroup">
+            <p>
+              This app encourages people to offer small bits of time to one another. It's a way to
+              run experiments with other people... tests of working together, which can start small
+              and easy but build into cooperation with people who are like-minded and who work well together.
+            </p>
+            <p>
+              Search the projects and place an offer on an interesting one
+              -- or create your own project and see who offers to help.
+              After your first experiment, you can give and get confirmation about the work, which you might choose
+              to show to future contacts.
+            </p>
+          </div>
+        </li>
+        <li class="p-2">
+          <div @click="showCommunity = !showCommunity" class="text-blue-500">... I want to participate in community projects.</div>
+          <div v-if="showCommunity">
+            <p>
+              These are mostly at the beginning stages, so any of them will appreciate your offers that show interest.
+              In fact, your offers can include your preferences, which give the project owners indications of how to proceed.
+            </p>
+            <p>
+              Search through the projects for issues of interest, locally as well as globally.
+              If you don't see any projects that interest you, create your own and see what kind of offers you get.
+            </p>
+          </div>
+        </li>
+        <li class="p-2">
+          <div @click="showVerifiable = !showVerifiable" class="text-blue-500">... I want to build with verifiable, private data.</div>
+          <div v-if="showVerifiable">
+            <p>
+              Make your claims and get others to confirm them. Then you can use the API to pull your copy of all that
+              data, both claims from you and claims from others about you. These are hard-and-fast credentials that can
+              be shown to others, along with their verifiable time and signature.
+            </p>
+            <p>
+              Furthermore, you can use your network to verify claims by other people, even if they haven't given you
+              visibility. First, on the claim screen you can see if the server detects anyone who is a direct link
+              between you, so you can reach out to those in-between people for more info. If there isn't anyone
+              who is directly in between then you can reach out with a message to your network.
+            </p>
+            <p>
+              This app generated an identifier, based on public & private keys located on your device.
+              That ID is only shared with our server and with people you explicitly allow.
+              The other information -- like gratitude and contributions and projects --
+              are published to a server that protects your ID. (Someday, your devices
+              will share directly P2P and not need a server... you can choose your levels
+              of discovery and privacy.) What this means is that you are in charge of your
+              network, and we provide tools and reporting to help you connect with your network for
+              references and reputation.
+            </p>
+          </div>
+        </li>
+        <li class="p-2">
+          <div @click="showGovernance = !showGovernance" class="text-blue-500">... I want to build governance organically.</div>
+          <div v-if="showGovernance">
+            <p>
+              This requires motivated, dedicated citizens. The good thing is that dedication the primary ingredient;
+              add coordination and we can find ways to replace monopolistic systems.
+            </p>
+            <p>
+              Add projects for your main areas of interest, and offer commitments to projects to kick-start some initiatives.
+            </p>
+            <p>
+              One other feature worth emphasizing: you build a history of credentials, ones that are verifiably
+              yours. But one other good thing is that you get support from those who confirm your activity.
+              You can share this support in a way that others can validate the data for themselves from people
+              in their own network. This kind of reputable project and history of performance is good evidence
+              for your ability to take responsibility for important initiatives.
+            </p>
+          </div>
+        </li>
+        <li class="p-2">
+          <div @click="showBasics = !showBasics" class="text-blue-500">... I want to supply life's basics freely.</div>
+          <div v-if="showBasics">
+            <p>
+              This platform is not optimal for balancing needs and resources at this point,
+              but we continuously seek out and list
+              those kinds of projects. Watch our blog, and watch the project list for words like
+              <router-link class="text-blue-500" to="/discover?searchText=sharing">"sharing"</router-link>
+              or
+              <router-link class="text-blue-500" to="/discover?searchText=basic">"basic"</router-link>
+              or
+              <router-link class="text-blue-500" to="/discover?searchText=free">"free"</router-link>.
+            </p>
+          </div>
+        </li>
+      </ul>
+
       <h2 class="text-xl font-semibold">How do I get started?</h2>
       <p>
-        You need someone to register you, like the person who told you
+        Someone -- like the person who told you about this app -- needs to register you
-        about this app, on the Contacts <fa icon="users" class="fa-fw" /> page.
+        on the Contacts <fa icon="users" class="fa-fw" /> page.
         If you heard about this from our outreach, feel free to contact us (below) for a chat.
-        After someone registers you, you can
+        After someone registers you, you can register others.
-        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. You can also record your own
-        ideas for projects. Each claim is recorded on a
-        custom ledger. The day after being registered, you'll be able to able to
-        register others, too.
       </p>
       <p>
+        Then you can record your appreciation for... whatever: select any contact on the home page
+        (or "Unnamed") and send it. The main goal is to record what people
+        have given you, to grow giving economies. You can also record your own
+        ideas for projects. Each claim is recorded on a
+        custom ledger.
+      </p>
+      <p>
+        The day after being registered, you'll be able to able to register others, too.
         Note that there are limits to how many others you can register.
         Take your time to bring people on... make it an opportunity to get to
-        know their projects, and to show your own.
+        know their projects, and to show off your own.
       </p>
 
       <h2 class="text-xl font-semibold">How do I add someone else?</h2>
@@ -95,7 +234,7 @@
       <h2 class="text-xl font-semibold">How do I backup all my data?</h2>
       <p>
         There are four sets of data to backup: the identifier secrets;
-        the private text data that isn't quite as secret such as settings and contacts;
+        the private text data that isn't as sensitive such as settings and contacts;
         the private image for yourself; and the data that you have sent to the public.
       </p>
 
@@ -185,15 +324,14 @@
 
       <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
+        Before doing this, beware that it is an advanced feature that affects
-        functionality (eg. the words "Alt ID" next to results, backup features)
+        functionality (eg. the words "Alt ID" next to results, backup features). You can
-        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>
+      <h2 class="text-xl font-semibold">How do I erase my data from my device?</h2>
       <p>
         Before doing this, you may want to back up your data with the instructions above.
       </p>
@@ -245,11 +383,11 @@
         How do I access even more functionality?
       </h2>
       <p>
-        There is an "Advanced" section at the bottom of the Account
+        There is an "Advanced" section at the bottom of the Profile
         <fa icon="circle-user" /> page.
       </p>
       <p>
-        There is a even more functionality in a mobile app (and more
+        There is even more functionality in a mobile app (and more
         documentation) at
         <a href="https://endorser.ch" target="_blank" class="text-blue-500">
           EndorserSearch.com
@@ -284,19 +422,19 @@
       </p>
 
       <h2 class="text-xl font-semibold">
-        My app is misbehaving, like showing me a blank screen or failing to show a feed.
+        This app is misbehaving, like showing me a blank screen or failing to show my personal data.
         What can I do?
       </h2>
       <p>
         First, note that clearing the cache will clear all your identity and contact info,
-        so we recommend doing other things first (unless you know you have your backups ready).
+        so we recommend doing other things first -- and only clearing when have your backups ready.
       </p>
       <ul class="list-disc list-outside ml-4">
         <li>
           Drag down on the screen to refresh it; do that multiple times, because
-          it sometimes takes multiple tries for the app to refresh to the current version.
+          it sometimes takes multiple tries for the app to refresh to the latest version.
           You can see the version information at the bottom of this page; the best
-          way to determine the current version is to open this page in an incognito
+          way to determine the latest version is to open this page in an incognito/private
           browser window and look at the version there.
         </li>
         <li>
@@ -342,7 +480,7 @@
 
       <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 public domain. If you like rules, reference
+        This work is public domain. (If you like rules, reference
         <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
@@ -358,14 +496,32 @@
               style="display: inline"
           />
         </a>
+        .) This is offered freely, with the hope that it helps but without any warranty or guarantee;
+        if it helps you then enjoy using it,
+        but if you may try to forcibly collect damages for things you think it should do (or not do)
+        then don't use it.
         <br />
-        For notifications, this service stores push token data; that can be revoked at any time
+        As for data & privacy:
-        by disabling notifications on the Account <fa icon="circle-user" class="fa-fw" /> page.
+        <ul class="list-disc list-outside ml-4">
-        <br />
+          <li>
-        For all other claim data,
+            If using notifications, a server stores push token data. That can be revoked at any time
-        <a href="https://endorser.ch/privacy-policy" target="_blank" class="text-blue-500">
+            by disabling notifications on the Profile <fa icon="circle-user" class="fa-fw" /> page.
-          the Endorser Service has this Privacy Policy.
+          </li>
-        </a>
+          <li>
+            If sending images, a server stores them, too. They can be removed by editing the claim
+            and deleting them.
+          </li>
+          <li>
+            If sending other partner system data (eg. to Trustroots) a public key and message
+            data are stored on a server. Those can be removed via direct personal request.
+          </li>
+          <li>
+            For all other claim data,
+            <a href="https://endorser.ch/privacy-policy" target="_blank" class="text-blue-500">
+              the Endorser Service has this Privacy Policy.
+            </a>
+          </li>
+        </ul>
       </p>
 
       <h2 class="text-xl font-semibold">How can I contribute?</h2>
@@ -382,9 +538,11 @@
           class="text-blue-500 ml-2"
         >
           bc1q90v4ted6cpt63tjfh2lvd5xzfc67sd4g9w8xma
-          <fa v-show="!showDidCopy" icon="copy" class="text-slate-400 fa-fw" />
+          <fa v-show="!showDidCopy" icon="copy" class="text-sm text-slate-400 fa-fw" />
+          <fa v-show="showDidCopy" icon="circle-check" class="text-sm text-green-500 fa-fw"/>
         </button>
-        <span v-show="showDidCopy" class="ml-2 text-sm text-green-500">Copied</span>
+        You can donate online via
+        <a href="https://www.patreon.com/TimeSafari" target="_blank" class="text-blue-500">Patreon here</a>.
         For other donations, contact us.
       </p>
 
@@ -401,7 +559,7 @@
       <p>{{ package.version }} ({{ commitHash }})</p>
 
       <h2 class="text-xl font-semibold">
-        For any other questions, like getting a new account or removing all your data from the public ledger:
+        I have other questions or feedback, like getting a new profile or removing my data or requesting an improvement.
       </h2>
       <p>
         Contact us at
@@ -416,11 +574,16 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
 
 import * as Package from "../../package.json";
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
+import {
+  retrieveSettingsForActiveAccount,
+  updateAccountSettings,
+} from "@/db/index";
 
 @Component({ components: { QuickNav } })
 export default class Help extends Vue {
@@ -428,7 +591,13 @@ export default class Help extends Vue {
 
   package = Package;
   commitHash = import.meta.env.VITE_GIT_HASH;
+  showAlpha = false;
+  showBasics = false;
+  showCommunity = false;
+  showGovernance = false;
+  showGroup = false;
   showDidCopy = false;
+  showVerifiable = false;
 
   // call fn, copy text to the clipboard, then redo fn after 2 seconds
   doCopyTwoSecRedo(text: string, fn: () => void) {
@@ -437,5 +606,15 @@ export default class Help extends Vue {
       .copy(text)
       .then(() => setTimeout(fn, 2000));
   }
+
+  async unsetFinishedOnboarding() {
+    const settings = await retrieveSettingsForActiveAccount();
+    if (settings.activeDid) {
+      await updateAccountSettings(settings.activeDid || "", {
+        finishedOnboarding: false,
+      });
+    }
+    (this.$router as Router).push({ name: "home" });
+  }
 }
 </script>

src/views/HomeView.vue

@@ -4,14 +4,16 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-2 pb-24 max-w-3xl mx-auto">
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-8">
+    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
       {{ AppString.APP_NAME }}
     </h1>
 
-    <!-- prompt to install notifications -->
+    <OnboardingDialog ref="onboardingDialog" />
-    <div class="mb-8">
+
+    <!-- prompt to install notifications with notificationsSupported, which we're making an advanced feature -->
+    <div class="mb-8 mt-8">
       <div
-        v-if="!notificationsSupported()"
+        v-if="false"
         class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
       >
         <p style="display: inline; align-items: center">
@@ -71,7 +73,8 @@
     <div class="mb-8">
       <div v-if="isCreatingIdentifier">
         <p class="text-slate-500 text-center italic mt-4 mb-4">
-          <fa icon="spinner" class="fa-spin-pulse" /> Loading&hellip;
+          <fa icon="spinner" class="fa-spin-pulse" />
+          Loading&hellip;
         </p>
       </div>
 
@@ -84,15 +87,18 @@
             id="noticeSomeoneMustRegisterYou"
             class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
           >
-            <!-- activeDid && !isRegistered -->
+            <!-- !isCreatingIdentifier && !isRegistered -->
             To share, someone must register you.
-            <router-link
+            <div class="block text-center">
-              :to="{ name: 'contact-qr' }"
+              <button
-              class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
+                @click="showNameThenIdDialog()"
-            >
+                class="text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
-              Show Them {{ PASSKEYS_ENABLED ? "Default" : "Your" }} Identifier
+              >
-              Info
+                Show them {{ PASSKEYS_ENABLED ? "default" : "your" }} identifier
-            </router-link>
+                info
+              </button>
+            </div>
+            <UserNameDialog ref="userNameDialog" />
             <div v-if="PASSKEYS_ENABLED" class="flex justify-end w-full">
               <router-link
                 :to="{ name: 'start' }"
@@ -104,60 +110,62 @@
           </div>
 
           <div v-else id="sectionRecordSomethingGiven">
-            <!-- activeDid && isRegistered -->
+            <!-- !isCreatingIdentifier && isRegistered -->
 
             <!-- show the actions for recognizing a give -->
-            <div class="mb-4">
+            <div class="flex">
-              <h2 class="text-xl font-bold">Record Something Given By:</h2>
+              <h2 class="text-xl font-bold">What have you seen someone do?</h2>
+              <button
+                @click="openGiftedPrompts()"
+                class="ml-2 block text-xs text-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 rounded-md"
+              >
+                <fa icon="lightbulb" class="fa-fw" />
+              </button>
             </div>
 
             <ul
-              class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5"
+              class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mt-4"
             >
               <li @click="openDialog()">
                 <img
                   src="../assets/blank-square.svg"
-                  class="mx-auto border border-slate-300 rounded-md mb-1"
+                  class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
                 />
                 <h3
-                  class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+                  class="text-xs text-blue-500 italic font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
                 >
                   Unnamed/Unknown
                 </h3>
               </li>
+              <li v-if="allContacts.length === 0" class="text-sm">
+                (Add friends to see more people worthy of recognition.)
+              </li>
               <li
-                v-for="contact in allContacts.slice(0, 7)"
+                v-for="contact in allContacts.slice(0, 6)"
                 :key="contact.did"
                 @click="openDialog(contact)"
               >
                 <EntityIcon
                   :contact="contact"
                   :iconSize="64"
-                  class="mx-auto border border-slate-300 rounded-md mb-1 cursor-pointer"
+                  class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
                 />
                 <h3
-                  class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+                  class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
                 >
                   {{ contact.name || contact.did }}
                 </h3>
               </li>
+              <li>
+                <router-link
+                  v-if="allContacts.length >= 6"
+                  :to="{ name: 'contact-gift' }"
+                  class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
+                >
+                  ... or someone else...
+                </router-link>
+              </li>
             </ul>
-
-            <div class="flex justify-between">
-              <router-link
-                v-if="allContacts.length >= 7"
-                :to="{ name: 'contact-gift' }"
-                class="block text-center text-md font-bold bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
-              >
-                Choose From All Contacts
-              </router-link>
-              <button
-                @click="openGiftedPrompts()"
-                class="block text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
-              >
-                Ideas...
-              </button>
-            </div>
           </div>
         </div>
       </div>
@@ -167,27 +175,79 @@
     <GiftedPrompts ref="giftedPrompts" />
     <FeedFilters ref="feedFilters" />
 
+    <div class="relative">
+      <button
+        v-if="isRegistered"
+        class="absolute right-6 bottom-0 transform translate-y-1/2 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full"
+        @click="openDialog()"
+      >
+        <fa icon="plus" class="fa-fw" />
+      </button>
+    </div>
+
     <!-- Results List -->
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
+    <div class="bg-slate-100 rounded-md px-4 py-3 mt-4 mb-4">
       <div class="flex items-center mb-4">
-        <h2 class="text-xl font-bold">Latest Activity</h2>
+        <h2 class="text-xl font-bold">
-        <button @click="openFeedFilters()" class="block text-center ml-auto">
+          Latest Activity
-          <span class="text-sm text-white">
+          <button @click="openFeedFilters()">
-            <span
+            <span class="text-xs text-white">
-              v-if="resultsAreFiltered()"
+              <fa
-              class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md"
+                v-if="resultsAreFiltered()"
-            >
+                icon="filter"
-              Filtered
+                class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
+              />
+              <fa
+                v-else
+                icon="filter"
+                class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
+              />
             </span>
-            <span
+          </button>
-              v-else
+        </h2>
-              class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md"
-            >
-              Unfiltered
-            </span>
-          </span>
-        </button>
       </div>
+
+      <div
+        @click="goToActivityToUserPage()"
+        class="border-t p-2 border-slate-300"
+      >
+        <div class="flex justify-center">
+          <div
+            v-if="numNewOffersToUser"
+            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] m-1 px-4 py-4 rounded-md text-white"
+          >
+            <span
+              class="block text-center text-6xl"
+              data-testId="newDirectOffersActivityNumber"
+            >
+              {{ numNewOffersToUser }}{{ newOffersToUserHitLimit ? "+" : "" }}
+            </span>
+            <p class="text-center">
+              new offer{{ numNewOffersToUser === 1 ? "" : "s" }} to you
+            </p>
+          </div>
+          <div
+            v-if="numNewOffersToUserProjects"
+            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] m-1 px-4 py-4 rounded-md text-white"
+          >
+            <span
+              class="block text-center text-6xl"
+              data-testId="newOffersToUserProjectsActivityNumber"
+            >
+              {{ numNewOffersToUserProjects
+              }}{{ newOffersToUserProjectsHitLimit ? "+" : "" }}
+            </span>
+            <p class="text-center">
+              new offer{{ numNewOffersToUserProjects === 1 ? "" : "s" }} to your
+              projects
+            </p>
+          </div>
+        </div>
+        <div class="flex justify-end mt-2">
+          <button class="text-blue-500">View All New Activity For You</button>
+        </div>
+      </div>
+
       <InfiniteScroll @reached-bottom="loadMoreGives">
         <ul id="listLatestActivity" class="border-t border-slate-300">
           <li
@@ -196,7 +256,7 @@
             :key="record.jwtId"
           >
             <div
-              class="border-b border-dashed border-slate-400 text-orange-400 pb-2 mb-2 font-bold text-sm"
+              class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
               v-if="record.jwtId == feedLastViewedClaimId"
             >
               You've already seen all the following
@@ -261,7 +321,7 @@
                 <a @click="onClickLoadClaim(record.jwtId)">
                   <fa
                     icon="file-lines"
-                    class="pl-2 text-blue-500 cursor-pointer"
+                    class="pl-2 text-slate-500 cursor-pointer"
                   />
                 </a>
               </span>
@@ -275,11 +335,20 @@
                 >
                   <fa icon="hammer" class="text-blue-500" />
                 </router-link>
+                <router-link
+                  v-if="record.providerPlanHandleId"
+                  :to="
+                    '/project/' +
+                    encodeURIComponent(record.providerPlanHandleId)
+                  "
+                >
+                  <fa icon="hammer" class="text-blue-500" />
+                </router-link>
               </span>
             </div>
             <div v-if="record.image" class="flex justify-center">
               <a :href="record.image" target="_blank">
-                <img :src="record.image" class="h-24 mt-2 rounded-xl" />
+                <img :src="record.image" class="h-48 mt-2 rounded-xl" />
               </a>
             </div>
           </li>
@@ -297,6 +366,8 @@
       </div>
     </div>
   </section>
+
+  <ChoiceButtonDialog ref="choiceButtonDialog" />
 </template>
 
 <script lang="ts">
@@ -310,20 +381,27 @@ import GiftedDialog from "@/components/GiftedDialog.vue";
 import GiftedPrompts from "@/components/GiftedPrompts.vue";
 import FeedFilters from "@/components/FeedFilters.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
+import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
+import UserNameDialog from "@/components/UserNameDialog.vue";
+import ChoiceButtonDialog from "@/components/ChoiceButtonDialog.vue";
 import {
   AppString,
   NotificationIface,
   PASSKEYS_ENABLED,
 } from "@/constants/app";
-import { db, accountsDB } from "@/db/index";
+import {
+  db,
+  logConsoleAndDb,
+  retrieveSettingsForActiveAccount,
+  updateAccountSettings,
+} from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import {
   BoundingBox,
-  isAnyFeedFilterOn,
+  checkIsAnyFeedFilterOn,
   MASTER_SETTINGS_KEY,
-  Settings,
 } from "@/db/tables/settings";
 import {
   contactForDid,
@@ -331,12 +409,16 @@ import {
   didInfoForContact,
   fetchEndorserRateLimits,
   getHeaders,
+  getNewOffersToUser,
+  getNewOffersToUserProjects,
   getPlanFromCache,
-  GiverReceiverInputInfo,
   GiveSummaryRecord,
 } from "@/libs/endorserServer";
 import {
   generateSaveAndActivateIdentity,
+  retrieveAccountDids,
+  GiverReceiverInputInfo,
+  OnboardPage,
   registerSaveAndActivatePasskey,
 } from "@/libs/util";
 
@@ -347,6 +429,7 @@ interface GiveRecordWithContactInfo extends GiveSummaryRecord {
     profileImageUrl?: string;
   };
   image?: string;
+  providerPlanName?: string;
   recipientProjectName?: string;
   receiver: {
     displayName: string;
@@ -362,13 +445,16 @@ interface GiveRecordWithContactInfo extends GiveSummaryRecord {
     },
   },
   components: {
+    EntityIcon,
+    FeedFilters,
     GiftedDialog,
     GiftedPrompts,
-    FeedFilters,
-    QuickNav,
-    EntityIcon,
     InfiniteScroll,
+    OnboardingDialog,
+    ChoiceButtonDialog,
+    QuickNav,
     TopMessage,
+    UserNameDialog,
   },
 })
 export default class HomeView extends Vue {
@@ -391,6 +477,12 @@ export default class HomeView extends Vue {
   isFeedFilteredByNearby = false;
   isFeedLoading = true;
   isRegistered = false;
+  lastAckedOfferToUserJwtId?: string; // the last JWT ID for offer-to-user that they've acknowledged seeing
+  lastAckedOfferToUserProjectsJwtId?: string; // the last JWT ID for offers-to-user's-projects that they've acknowledged seeing
+  newOffersToUserHitLimit: boolean = false;
+  newOffersToUserProjectsHitLimit: boolean = false;
+  numNewOffersToUser: number = 0; // number of new offers-to-user
+  numNewOffersToUserProjects: number = 0; // number of new offers-to-user's-projects
   searchBoxes: Array<{
     name: string;
     bbox: BoundingBox;
@@ -400,31 +492,45 @@ export default class HomeView extends Vue {
 
   async mounted() {
     try {
-      await accountsDB.open();
+      try {
-      const allAccounts = await accountsDB.accounts.toArray();
+        this.allMyDids = await retrieveAccountDids();
-      if (allAccounts.length > 0) {
+        if (this.allMyDids.length === 0) {
-        this.allMyDids = allAccounts.map((acc) => acc.did);
+          this.isCreatingIdentifier = true;
-      } else {
+          const newDid = await generateSaveAndActivateIdentity();
-        this.isCreatingIdentifier = true;
+          this.isCreatingIdentifier = false;
-        const newDid = await generateSaveAndActivateIdentity();
+          this.allMyDids = [newDid];
-        this.isCreatingIdentifier = false;
+        }
-        this.allMyDids = [newDid];
+      } catch (error) {
+        // continue because we want the feed to work, even anonymously
+        logConsoleAndDb(
+          "Error retrieving all account DIDs on home page:" + error,
+          true,
+        );
+        // some other piece will display an error about personal info
       }
 
-      await db.open();
+      const settings = await retrieveSettingsForActiveAccount();
-      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+      this.apiServer = settings.apiServer || "";
-      this.apiServer = settings?.apiServer || "";
+      this.activeDid = settings.activeDid || "";
-      this.activeDid = settings?.activeDid || "";
       this.allContacts = await db.contacts.toArray();
-      this.feedLastViewedClaimId = settings?.lastViewedClaimId;
+      this.feedLastViewedClaimId = settings.lastViewedClaimId;
-      this.givenName = settings?.firstName || "";
+      this.givenName = settings.firstName || "";
-      this.isFeedFilteredByVisible = !!settings?.filterFeedByVisible;
+      this.isFeedFilteredByVisible = !!settings.filterFeedByVisible;
-      this.isFeedFilteredByNearby = !!settings?.filterFeedByNearby;
+      this.isFeedFilteredByNearby = !!settings.filterFeedByNearby;
-      this.isRegistered = !!settings?.isRegistered;
+      this.isRegistered = !!settings.isRegistered;
-      this.searchBoxes = settings?.searchBoxes || [];
+      this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId;
-      this.showShortcutBvc = !!settings?.showShortcutBvc;
+      this.lastAckedOfferToUserProjectsJwtId =
+        settings.lastAckedOfferToUserProjectsJwtId;
+      this.searchBoxes = settings.searchBoxes || [];
+      this.showShortcutBvc = !!settings.showShortcutBvc;
 
-      this.isAnyFeedFilterOn = isAnyFeedFilterOn(settings);
+      this.isAnyFeedFilterOn = checkIsAnyFeedFilterOn(settings);
+
+      if (!settings.finishedOnboarding) {
+        (this.$refs.onboardingDialog as OnboardingDialog).open(
+          OnboardPage.Home,
+        );
+      }
 
       // someone may have have registered after sharing contact info, so recheck
       if (!this.isRegistered && this.activeDid) {
@@ -435,9 +541,7 @@ export default class HomeView extends Vue {
             this.activeDid,
           );
           if (resp.status === 200) {
-            // we just needed to know that they're registered
+            await updateAccountSettings(this.activeDid, {
-            await db.open();
-            await db.settings.update(MASTER_SETTINGS_KEY, {
               isRegistered: true,
             });
             this.isRegistered = true;
@@ -448,11 +552,33 @@ export default class HomeView extends Vue {
       }
 
       // this returns a Promise but we don't need to wait for it
-      await this.updateAllFeed();
+      this.updateAllFeed();
+
+      if (this.activeDid) {
+        const offersToUserData = await getNewOffersToUser(
+          this.axios,
+          this.apiServer,
+          this.activeDid,
+          this.lastAckedOfferToUserJwtId,
+        );
+        this.numNewOffersToUser = offersToUserData.data.length;
+        this.newOffersToUserHitLimit = offersToUserData.hitLimit;
+      }
+
+      if (this.activeDid) {
+        const offersToUserProjects = await getNewOffersToUserProjects(
+          this.axios,
+          this.apiServer,
+          this.activeDid,
+          this.lastAckedOfferToUserProjectsJwtId,
+        );
+        this.numNewOffersToUserProjects = offersToUserProjects.data.length;
+        this.newOffersToUserProjectsHitLimit = offersToUserProjects.hitLimit;
+      }
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
-      console.error("Error retrieving settings or feed.", err);
+      logConsoleAndDb("Error retrieving settings or feed: " + err, true);
       this.$notify(
         {
           group: "alert",
@@ -462,7 +588,7 @@ export default class HomeView extends Vue {
             err.userMessage ||
             "There was an error retrieving your settings or the latest activity.",
         },
-        -1,
+        5000,
       );
     }
   }
@@ -486,15 +612,14 @@ export default class HomeView extends Vue {
 
   // only called when a setting was changed
   async reloadFeedOnChange() {
-    await db.open();
+    const settings = await retrieveSettingsForActiveAccount();
-    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+    this.isFeedFilteredByVisible = !!settings.filterFeedByVisible;
-    this.isFeedFilteredByVisible = !!settings?.filterFeedByVisible;
+    this.isFeedFilteredByNearby = !!settings.filterFeedByNearby;
-    this.isFeedFilteredByNearby = !!settings?.filterFeedByNearby;
+    this.isAnyFeedFilterOn = checkIsAnyFeedFilterOn(settings);
-    this.isAnyFeedFilterOn = isAnyFeedFilterOn(settings);
 
     this.feedData = [];
     this.feedPreviousOldestId = undefined;
-    this.updateAllFeed();
+    await this.updateAllFeed();
   }
 
   /**
@@ -506,7 +631,7 @@ export default class HomeView extends Vue {
     // and the InfiniteScroll component triggers a load before finished.
     // One alternative is to totally separate the project link loading.
     if (payload && !this.isFeedLoading) {
-      this.updateAllFeed();
+      await this.updateAllFeed();
     }
   }
 
@@ -545,7 +670,7 @@ export default class HomeView extends Vue {
 
             // This has indeed proven problematic. See loadMoreGives
             // We should display it immediately and then get the plan later.
-            const plan = await getPlanFromCache(
+            const fulfillsPlan = await getPlanFromCache(
               record.fulfillsPlanHandleId,
               this.axios,
               this.apiServer,
@@ -561,8 +686,13 @@ export default class HomeView extends Vue {
             if (!anyMatch && this.isFeedFilteredByNearby) {
               // check if the associated project has a location inside user's search box
               if (record.fulfillsPlanHandleId) {
-                if (plan?.locLat && plan?.locLon) {
+                if (fulfillsPlan?.locLat && fulfillsPlan?.locLon) {
-                  if (this.latLongInAnySearchBox(plan.locLat, plan.locLon)) {
+                  if (
+                    this.latLongInAnySearchBox(
+                      fulfillsPlan.locLat,
+                      fulfillsPlan.locLon,
+                    )
+                  ) {
                     anyMatch = true;
                   }
                 }
@@ -572,6 +702,17 @@ export default class HomeView extends Vue {
               continue;
             }
 
+            // checking for arrays due to legacy data
+            const provider = Array.isArray(claim.provider)
+              ? claim.provider[0]
+              : claim.provider;
+            const providedByPlan = await getPlanFromCache(
+              provider?.identifier as string,
+              this.axios,
+              this.apiServer,
+              this.activeDid,
+            );
+
             const newRecord: GiveRecordWithContactInfo = {
               ...record,
               giver: didInfoForContact(
@@ -581,7 +722,9 @@ export default class HomeView extends Vue {
                 this.allMyDids,
               ),
               image: claim.image,
-              recipientProjectName: plan?.name as string,
+              providerPlanHandleId: provider?.identifier as string,
+              providerPlanName: providedByPlan?.name as string,
+              recipientProjectName: fulfillsPlan?.name as string,
               receiver: didInfoForContact(
                 recipientDid,
                 this.activeDid,
@@ -619,7 +762,7 @@ export default class HomeView extends Vue {
       });
     if (this.feedData.length === 0 && !endOfResults) {
       // repeat until there's at least some data
-      this.updateAllFeed();
+      await this.updateAllFeed();
     }
     this.isFeedLoading = false;
   }
@@ -632,13 +775,19 @@ export default class HomeView extends Vue {
    */
   async retrieveGives(endorserApiServer: string, beforeId?: string) {
     const beforeQuery = beforeId == null ? "" : "&beforeId=" + beforeId;
+    const doNotShowErrorAgain = !!beforeId; // don't show error again if we're loading more
+    const headers = await getHeaders(
+      this.activeDid,
+      doNotShowErrorAgain ? undefined : this.$notify,
+    );
+    // retrieve headers for this user, but if an error happens then report it but proceed with the fetch with no header
     const response = await fetch(
       endorserApiServer +
         "/api/v2/report/gives?giftNotTrade=true" +
         beforeQuery,
       {
         method: "GET",
-        headers: await getHeaders(this.activeDid),
+        headers: headers,
       },
     );
 
@@ -675,50 +824,70 @@ export default class HomeView extends Vue {
     }
 
     /**
-     * Only show giver and/or receiver info first if they're named.
+     * Only show giver and/or receiver info first if they're named in your contacts.
      * - If only giver is named, show "... gave"
      * - If only receiver is named, show "... received"
      */
 
     const giverInfo = giveRecord.giver;
     const recipientInfo = giveRecord.receiver;
+
+    // any specific names should be shown first
     if (giverInfo.known && recipientInfo.known) {
       // both giver and recipient are named
       return `${giverInfo.displayName} gave to ${recipientInfo.displayName}: ${gaveAmount}`;
     } else if (giverInfo.known) {
-      // giver is named but recipient is not
+      // giver is known but recipient is not
 
       // show the project name if to one
       if (giveRecord.recipientProjectName) {
-        // retrieve the project name
+        return `${giverInfo.displayName} gave: ${gaveAmount} (to the project "${giveRecord.recipientProjectName}")`;
-        return `${giverInfo.displayName} gave: ${gaveAmount} (to the project ${giveRecord.recipientProjectName})`;
+      } else {
+        // it's not to a project
+        return `${giverInfo.displayName} gave: ${gaveAmount} (to ${recipientInfo.displayName})`;
       }
-
-      // it's not to a project
-      return `${giverInfo.displayName} gave: ${gaveAmount} (to ${recipientInfo.displayName})`;
     } else if (recipientInfo.known) {
-      // recipient is named but giver is not
+      // recipient is known but giver is not
-      return `${recipientInfo.displayName} received: ${gaveAmount} (from ${giverInfo.displayName})`;
+
+      // show the project name if from one
+      if (giveRecord.providerPlanName) {
+        return `${recipientInfo.displayName} received: ${gaveAmount} (from the project "${giveRecord.providerPlanName}")`;
+      } else {
+        // it's not from a project
+        return `${recipientInfo.displayName} received: ${gaveAmount} (from ${giverInfo.displayName})`;
+      }
     } else {
       // neither giver nor recipient are named
 
-      // show the project name if to one
+      // create the part in parens
-      if (giveRecord.recipientProjectName) {
+      let peopleInfo = "";
-        // retrieve the project name
+      if (giveRecord.providerPlanName || giveRecord.recipientProjectName) {
-        return `${gaveAmount} (to the project ${giveRecord.recipientProjectName})`;
+        if (giveRecord.providerPlanName) {
+          peopleInfo = `from the project "${giveRecord.providerPlanName}"`;
+        } else {
+          peopleInfo = `from ${giverInfo.displayName}`;
+        }
+        if (giveRecord.recipientProjectName) {
+          peopleInfo += ` to the project "${giveRecord.recipientProjectName}"`;
+        } else {
+          peopleInfo += ` to ${recipientInfo.displayName}`;
+        }
+      } else {
+        if (giverInfo.displayName === recipientInfo.displayName) {
+          peopleInfo = `between two who are ${giverInfo.displayName}`;
+        } else {
+          peopleInfo = `from ${giverInfo.displayName} to ${recipientInfo.displayName}`;
+        }
       }
 
-      // it's not to a project
-      let peopleInfo;
-      if (giverInfo.displayName === recipientInfo.displayName) {
-        peopleInfo = `between two who are ${giverInfo.displayName}`;
-      } else {
-        peopleInfo = `from ${giverInfo.displayName} to ${recipientInfo.displayName}`;
-      }
       return gaveAmount + " (" + peopleInfo + ")";
     }
   }
 
+  goToActivityToUserPage() {
+    (this.$router as Router).push({ name: "new-activity" });
+  }
+
   onClickLoadClaim(jwtId: string) {
     const route = {
       path: "/claim/" + encodeURIComponent(jwtId),
@@ -734,27 +903,30 @@ export default class HomeView extends Vue {
     return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
   }
 
-  openDialog(giver?: GiverReceiverInputInfo) {
+  openDialog(giver?: GiverReceiverInputInfo, description?: string) {
     (this.$refs.customDialog as GiftedDialog).open(
       giver,
       {
         did: this.activeDid,
         name: "you",
-      },
+      } as GiverReceiverInputInfo,
       undefined,
       "Given by " + (giver?.name || "someone not named"),
+      description,
     );
   }
 
   openGiftedPrompts() {
-    (this.$refs.giftedPrompts as GiftedPrompts).open();
+    (this.$refs.giftedPrompts as GiftedPrompts).open((giver, description) =>
+      this.openDialog(giver as GiverReceiverInputInfo, description),
+    );
   }
 
   openFeedFilters() {
     (this.$refs.feedFilters as FeedFilters).open(this.reloadFeedOnChange);
   }
 
-  toastUser(message) {
+  toastUser(message: string) {
     this.$notify(
       {
         group: "alert",
@@ -769,5 +941,34 @@ export default class HomeView extends Vue {
   computeKnownPersonIconStyleClassNames(known: boolean) {
     return known ? "text-slate-500" : "text-slate-100";
   }
+
+  showNameThenIdDialog() {
+    if (!this.givenName) {
+      (this.$refs.userNameDialog as UserNameDialog).open(() => {
+        this.promptForShareMethod();
+      });
+    } else {
+      this.promptForShareMethod();
+    }
+  }
+
+  promptForShareMethod() {
+    (this.$refs.choiceButtonDialog as ChoiceButtonDialog).open({
+      title: "How can you share your info?",
+      text: "",
+      option1Text: "We are in a meeting together",
+      option2Text: "We are nearby with cameras",
+      option3Text: "We will share some other way",
+      onOption1: () => {
+        (this.$router as Router).push({ name: "onboard-meeting-list" });
+      },
+      onOption2: () => {
+        (this.$router as Router).push({ name: "contact-qr" });
+      },
+      onOption3: () => {
+        (this.$router as Router).push({ name: "share-my-contact-info" });
+      },
+    });
+  }
 }
 </script>

src/views/IdentitySwitcherView.vue

@@ -101,10 +101,15 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import { NotificationIface } from "@/constants/app";
-import { db, accountsDB } from "@/db/index";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import QuickNav from "@/components/QuickNav.vue";
+import { NotificationIface } from "@/constants/app";
+import {
+  accountsDBPromise,
+  db,
+  retrieveSettingsForActiveAccount,
+} from "@/db/index";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { retrieveAllAccountsMetadata } from "@/libs/util";
 
 @Component({ components: { QuickNav } })
 export default class IdentitySwitcherView extends Vue {
@@ -118,14 +123,12 @@ export default class IdentitySwitcherView extends Vue {
 
   async created() {
     try {
-      await db.open();
+      const settings = await retrieveSettingsForActiveAccount();
-      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+      this.activeDid = settings.activeDid || "";
-      this.activeDid = settings?.activeDid || "";
+      this.apiServer = settings.apiServer || "";
-      this.apiServer = settings?.apiServer || "";
+      this.apiServerInput = settings.apiServer || "";
-      this.apiServerInput = settings?.apiServer || "";
 
-      await accountsDB.open();
+      const accounts = await retrieveAllAccountsMetadata();
-      const accounts = await accountsDB.accounts.toArray();
       for (let n = 0; n < accounts.length; n++) {
         const acct = accounts[n];
         this.otherIdentities.push({ id: acct.id as string, did: acct.did });
@@ -141,7 +144,7 @@ export default class IdentitySwitcherView extends Vue {
           title: "Error Loading Accounts",
           text: "Clear your cache and start over (after data backup).",
         },
-        -1,
+        5000,
       );
       console.error("Telling user to clear cache at page create because:", err);
     }
@@ -167,7 +170,8 @@ export default class IdentitySwitcherView extends Vue {
         title: "Delete Identity?",
         text: "Are you sure you want to erase this identity? (There is no undo. You may want to select it and back it up just in case.)",
         onYes: async () => {
-          await accountsDB.open();
+          // one of the few times we use accountsDBPromise directly; try to avoid more usage
+          const accountsDB = await accountsDBPromise;
           await accountsDB.accounts.delete(id);
           this.otherIdentities = this.otherIdentities.filter(
             (ident) => ident.id !== id,
@@ -184,7 +188,7 @@ export default class IdentitySwitcherView extends Vue {
         group: "alert",
         type: "warning",
         title: "Cannot Delete",
-        text: "You cannot delete the active identity.",
+        text: "You cannot delete the active identity. Set to another identity or 'no identity' first.",
       },
       3000,
     );

src/views/ImportAccountView.vue

@@ -53,6 +53,13 @@
         <input type="checkbox" class="mr-2" v-model="shouldErase" />
         <label>Erase the previous identifier.</label>
       </div>
+
+      <div v-if="isNotProdServer()" class="mt-4 text-blue-500">
+        <!-- if they click this, fill in the mnemonic seed-input with the test mnemonic -->
+        <button @click="mnemonic = TEST_USER_0_MNEMONIC">
+          Use mnemonic for Test User #0
+        </button>
+      </div>
     </div>
 
     <div class="mt-8">
@@ -79,41 +86,57 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import { NotificationIface } from "@/constants/app";
+import { AppString, NotificationIface } from "@/constants/app";
-import { accountsDB, db } from "@/db/index";
+import {
+  accountsDBPromise,
+  db,
+  retrieveSettingsForActiveAccount,
+} from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import {
   DEFAULT_ROOT_DERIVATION_PATH,
   deriveAddress,
   newIdentifier,
 } from "@/libs/crypto";
+import { retrieveAccountCount } from "@/libs/util";
 
 @Component({
   components: {},
 })
 export default class ImportAccountView extends Vue {
+  TEST_USER_0_MNEMONIC =
+    "rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage";
   UPORT_DERIVATION_PATH = "m/7696500'/0'/0'/0'"; // for legacy imports, likely never used
 
+  AppString = AppString;
+
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
-  mnemonic = "";
+  apiServer = "";
   address = "";
+  derivationPath = DEFAULT_ROOT_DERIVATION_PATH;
+  mnemonic = "";
   numAccounts = 0;
   privateHex = "";
   publicHex = "";
-  derivationPath = DEFAULT_ROOT_DERIVATION_PATH;
   showAdvanced = false;
   shouldErase = false;
 
   async created() {
-    await accountsDB.open();
+    this.numAccounts = await retrieveAccountCount();
-    this.numAccounts = await accountsDB.accounts.count();
+    // get the server, to help with import on the test server
+    const settings = await retrieveSettingsForActiveAccount();
+    this.apiServer = settings.apiServer || "";
   }
 
   public onCancelClick() {
     (this.$router as Router).back();
   }
 
+  public isNotProdServer() {
+    return this.apiServer !== AppString.PROD_ENDORSER_API_SERVER;
+  }
+
   public async fromMnemonic() {
     const mne: string = this.mnemonic.trim().toLowerCase();
     try {
@@ -129,7 +152,7 @@ export default class ImportAccountView extends Vue {
         this.derivationPath,
       );
 
-      await accountsDB.open();
+      const accountsDB = await accountsDBPromise;
       if (this.shouldErase) {
         await accountsDB.accounts.clear();
       }
@@ -159,7 +182,7 @@ export default class ImportAccountView extends Vue {
             title: "Invalid Mnemonic",
             text: "Please check your mnemonic and try again.",
           },
-          -1,
+          5000,
         );
       } else {
         this.$notify(
@@ -169,7 +192,7 @@ export default class ImportAccountView extends Vue {
             title: "Error",
             text: "Got an error creating that identifier.",
           },
-          -1,
+          5000,
         );
       }
     }

src/views/ImportDerivedAccountView.vue

@@ -33,7 +33,7 @@
           <fa
             v-if="dids[0] == selectedArrayFirstDid"
             icon="circle"
-            class="fa-fw text-blue-400 text-xl mr-3"
+            class="fa-fw text-blue-500 text-xl mr-3"
           ></fa>
           <fa
             v-else
@@ -78,8 +78,9 @@ import {
   newIdentifier,
   nextDerivationPath,
 } from "@/libs/crypto";
-import { accountsDB, db } from "@/db/index";
+import { accountsDBPromise, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { retrieveAllFullyDecryptedAccounts } from "@/libs/util";
 
 @Component({
   components: {},
@@ -90,8 +91,7 @@ export default class ImportAccountView extends Vue {
   selectedArrayFirstDid = "";
 
   async mounted() {
-    await accountsDB.open();
+    const accounts = await retrieveAllFullyDecryptedAccounts(); // let's match derived accounts differently so we don't need the private info
-    const accounts = await accountsDB.accounts.toArray();
     const seedDids: Record<string, Array<string>> = {};
     accounts.forEach((account) => {
       const prevDids: Array<string> = seedDids[account.mnemonic] || [];
@@ -110,11 +110,11 @@ export default class ImportAccountView extends Vue {
   }
 
   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 accountsDB = await accountsDBPromise; // let's match derived accounts differently so we don't need the private info
     const allMatchingAccounts = await accountsDB.accounts
       .where("did")
       .anyOf(...selectedArray)

src/views/InviteOneAcceptView.vue

@@ -0,0 +1,169 @@
+<template>
+  <QuickNav selected="Invite" />
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <div
+      v-if="checkingInvite"
+      class="text-lg text-center font-light relative px-7"
+    >
+      <fa icon="spinner" class="fa-spin-pulse" />
+    </div>
+    <div v-else class="text-center mt-4">
+      <p>That invitation did not work.</p>
+      <p class="mt-2">
+        Go back to your invite message and copy the entire text, then paste it
+        here.
+      </p>
+      <p class="mt-2">
+        If the data looks correct, try Chrome. (For example, iOS may have cut
+        off the invite data, or it may have shown a preview that stole your
+        invite.) If it still complains, you may need the person who invited you
+        to send a new one.
+      </p>
+      <textarea
+        v-model="inputJwt"
+        placeholder="Paste invitation..."
+        class="mt-4 border-2 border-gray-300 p-2 rounded"
+        cols="30"
+        @input="() => checkInvite(inputJwt)"
+      />
+      <br />
+      <button
+        @click="() => processInvite(inputJwt, true)"
+        class="ml-2 p-2 bg-blue-500 text-white rounded"
+      >
+        Accept
+      </button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
+
+import QuickNav from "@/components/QuickNav.vue";
+import { APP_SERVER, NotificationIface } from "@/constants/app";
+import {
+  db,
+  logConsoleAndDb,
+  retrieveSettingsForActiveAccount,
+} from "@/db/index";
+import { decodeEndorserJwt } from "@/libs/crypto/vc";
+import { errorStringForLog } from "@/libs/endorserServer";
+import { generateSaveAndActivateIdentity } from "@/libs/util";
+
+@Component({ components: { QuickNav } })
+export default class InviteOneAcceptView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid: string = "";
+  apiServer: string = "";
+  checkingInvite: boolean = true;
+  inputJwt: string = "";
+
+  async mounted() {
+    this.checkingInvite = true;
+    await db.open();
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.apiServer = settings.apiServer || "";
+
+    if (!this.activeDid) {
+      this.activeDid = await generateSaveAndActivateIdentity();
+    }
+
+    const jwt = window.location.pathname.substring(
+      "/invite-one-accept/".length,
+    );
+    await this.processInvite(jwt, false);
+
+    this.checkingInvite = false;
+  }
+
+  // process the invite JWT and/or text message containing the URL with the JWT
+  async processInvite(jwtInput: string, notifyOnFailure: boolean) {
+    this.checkingInvite = true;
+
+    try {
+      let jwt: string = jwtInput ?? "";
+
+      // parse the string: extract the URL or JWT if surrounded by spaces
+      // and then extract the JWT from the URL
+      // (For another approach used with contacts, see getContactPayloadFromJwtUrl)
+      const urlMatch = jwtInput.match(/(https?:\/\/[^\s]+)/);
+      if (urlMatch && urlMatch[1]) {
+        // extract the JWT from the URL, meaning any character except "?"
+        const internalMatch = urlMatch[1].match(/\/invite-one-accept\/([^?]+)/);
+        if (internalMatch && internalMatch[1]) {
+          jwt = internalMatch[1];
+        }
+      } else {
+        // extract the JWT (which starts with "ey") if it is surrounded by other input
+        const spaceMatch = jwtInput.match(/(ey[\w.-]+)/);
+        if (spaceMatch && spaceMatch[1]) {
+          jwt = spaceMatch[1];
+        }
+      }
+
+      if (!jwt) {
+        if (notifyOnFailure) {
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Missing Invite",
+              text: "There was no invite. Paste the entire text that has the data.",
+            },
+            5000,
+          );
+        }
+      } else {
+        //const payload: JWTPayload =
+        decodeEndorserJwt(jwt);
+
+        // That's good enough for an initial check.
+        // Send them to the contacts page to finish, with inviteJwt in the query string.
+        (this.$router as Router).push({
+          name: "contacts",
+          query: { inviteJwt: jwt },
+        });
+      }
+    } catch (error) {
+      const fullError = "Error accepting invite: " + errorStringForLog(error);
+      logConsoleAndDb(fullError, true);
+      if (notifyOnFailure) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "There was an error processing that invite.",
+          },
+          3000,
+        );
+      }
+    }
+    this.checkingInvite = false;
+  }
+
+  // check the invite JWT
+  async checkInvite(jwtInput: string) {
+    if (
+      jwtInput.endsWith(APP_SERVER) ||
+      jwtInput.endsWith(APP_SERVER + "/") ||
+      jwtInput.endsWith("invite-one-accept") ||
+      jwtInput.endsWith("invite-one-accept/")
+    ) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "That is only part of the invite data; it's missing some at the end. Try another way to get the full data.",
+        },
+        5000,
+      );
+    }
+  }
+}
+</script>

src/views/InviteOneView.vue

@@ -0,0 +1,399 @@
+<template>
+  <QuickNav selected="Invite" />
+  <TopMessage />
+
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- 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 class="text-4xl text-center font-light">Invitations</h1>
+
+    <ul class="ml-8 mt-4 list-outside list-disc w-5/6">
+      <li>
+        Note when sending
+        <span
+          v-if="!showAppleWarning"
+          class="text-blue-500 cursor-pointer"
+          @click="showAppleWarning = !showAppleWarning"
+        >
+          to Apple users...
+        </span>
+        <span v-else>
+          to Apple users: their links often fail because their device cuts off
+          part of the link. You might need to send it to them some other way,
+          like in an email.
+        </span>
+      </li>
+    </ul>
+
+    <!-- New Project -->
+    <button
+      v-if="isRegistered"
+      class="fixed right-6 top-12 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full"
+      @click="createInvite()"
+    >
+      <fa icon="plus" class="fa-fw"></fa>
+    </button>
+
+    <InviteDialog ref="inviteDialog" />
+
+    <!-- Invites Table -->
+    <div v-if="invites.length" class="mt-6">
+      <table class="min-w-full bg-white">
+        <thead>
+          <tr>
+            <th class="py-2">
+              ID
+              <br />
+              (click for link)
+            </th>
+            <th class="py-2">Notes</th>
+            <th class="py-2">Expires At</th>
+            <th class="py-2">Redeemed</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="invite in invites"
+            :key="invite.inviteIdentifier"
+            class="border-t py-2"
+          >
+            <td>
+              <span
+                v-if="
+                  !invite.redeemedAt &&
+                  invite.expiresAt > new Date().toISOString()
+                "
+                @click="
+                  copyInviteAndNotify(invite.inviteIdentifier, invite.jwt)
+                "
+                class="text-center text-blue-500 cursor-pointer"
+                :title="inviteLink(invite.jwt)"
+              >
+                {{ getTruncatedInviteId(invite.inviteIdentifier) }}
+              </span>
+              <span
+                v-else
+                @click="
+                  showInvite(
+                    invite.inviteIdentifier,
+                    !!invite.redeemedAt,
+                    invite.expiresAt < new Date().toISOString(),
+                  )
+                "
+                class="text-center text-slate-500 cursor-pointer"
+                :title="inviteLink(invite.jwt)"
+              >
+                {{ getTruncatedInviteId(invite.inviteIdentifier) }}
+              </span>
+            </td>
+            <td class="text-left" :data-testId="inviteLink(invite.jwt)">
+              {{ invite.notes }}
+            </td>
+            <td class="text-center">
+              {{ invite.redeemedAt ? "" : invite.expiresAt.substring(0, 10) }}
+            </td>
+            <td class="text-center">
+              {{ invite.redeemedAt?.substring(0, 10) }}
+              <br />
+              {{ getTruncatedRedeemedBy(invite.redeemedBy) }}
+              <br />
+              <fa
+                v-if="invite.redeemedBy && !contactsRedeemed[invite.redeemedBy]"
+                icon="plus"
+                class="bg-green-600 text-white px-1 py-1 rounded-full cursor-pointer"
+                @click="addNewContact(invite.redeemedBy, invite.notes)"
+              />
+            </td>
+            <td>
+              <fa
+                icon="trash-can"
+                class="text-red-600 text-xl ml-2 mr-2 cursor-pointer"
+                @click="deleteInvite(invite.inviteIdentifier, invite.notes)"
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <ContactNameDialog ref="contactNameDialog" />
+    </div>
+    <p v-else class="mt-6 text-center">No invites found.</p>
+  </section>
+</template>
+<script lang="ts">
+import axios from "axios";
+import { Component, Vue } from "vue-facing-decorator";
+import { useClipboard } from "@vueuse/core";
+
+import ContactNameDialog from "@/components/ContactNameDialog.vue";
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+import InviteDialog from "@/components/InviteDialog.vue";
+import { APP_SERVER, AppString, NotificationIface } from "@/constants/app";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { Contact } from "@/db/tables/contacts";
+import { createInviteJwt, getHeaders } from "@/libs/endorserServer";
+
+interface Invite {
+  inviteIdentifier: string;
+  expiresAt: string;
+  jwt: string;
+  notes: string;
+  redeemedAt: string | null;
+  redeemedBy: string | null;
+}
+
+@Component({
+  components: { ContactNameDialog, QuickNav, TopMessage, InviteDialog },
+})
+export default class InviteOneView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  invites: Invite[] = [];
+  activeDid: string = "";
+  apiServer: string = "";
+  contactsRedeemed: { [key: string]: Contact } = {};
+  isRegistered: boolean = false;
+  showAppleWarning = false;
+
+  async mounted() {
+    try {
+      await db.open();
+      const settings = await retrieveSettingsForActiveAccount();
+      this.activeDid = settings.activeDid || "";
+      this.apiServer = settings.apiServer || "";
+      this.isRegistered = !!settings.isRegistered;
+
+      const headers = await getHeaders(this.activeDid);
+      const response = await axios.get(
+        this.apiServer + "/api/userUtil/invite",
+        { headers },
+      );
+      this.invites = response.data.data;
+
+      const baseContacts: Contact[] = await db.contacts.toArray();
+      for (const invite of this.invites) {
+        const contact = baseContacts.find(
+          (contact) => contact.did === invite.redeemedBy,
+        );
+        if (contact && invite.redeemedBy) {
+          this.contactsRedeemed[invite.redeemedBy] = contact;
+        }
+      }
+    } catch (error) {
+      console.error("Error fetching invites:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Load Error",
+          text: "Got an error loading your invites.",
+        },
+        5000,
+      );
+    }
+  }
+
+  getTruncatedInviteId(inviteId: string): string {
+    if (inviteId.length <= 9) return inviteId;
+    return `${inviteId.slice(0, 6)}...`;
+  }
+
+  getTruncatedRedeemedBy(redeemedBy: string | null): string {
+    if (!redeemedBy) return "";
+    if (this.contactsRedeemed[redeemedBy]) {
+      return (
+        this.contactsRedeemed[redeemedBy].name || AppString.NO_CONTACT_NAME
+      );
+    }
+    if (redeemedBy.length <= 19) return redeemedBy;
+    return `${redeemedBy.slice(0, 13)}...${redeemedBy.slice(-3)}`;
+  }
+
+  inviteLink(jwt: string): string {
+    return APP_SERVER + "/invite-one-accept/" + jwt;
+  }
+
+  copyInviteAndNotify(inviteId: string, jwt: string) {
+    useClipboard().copy(this.inviteLink(jwt));
+    this.$notify(
+      {
+        group: "alert",
+        type: "success",
+        title: "Copied",
+        text: "Your clipboard now contains the link for invite " + inviteId,
+      },
+      5000,
+    );
+  }
+
+  showInvite(inviteId: string, redeemed: boolean, expired: boolean) {
+    let message = `Your clipboard now contains the invite ID ${inviteId}`;
+    if (redeemed) {
+      message += " (This invite has been used.)";
+    } else if (expired) {
+      message += " (This invite has expired.)";
+    }
+    useClipboard().copy(inviteId);
+    this.$notify(
+      {
+        group: "alert",
+        type: "success",
+        title: "Copied",
+        text: message,
+      },
+      5000,
+    );
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  lookForErrorAndNotify(error: any, title: string, defaultMessage: string) {
+    console.error(title, "-", error);
+    let message = defaultMessage;
+    if (error.response && error.response.data && error.response.data.error) {
+      if (error.response.data.error.message) {
+        message = error.response.data.error.message;
+      } else {
+        message = error.response.data.error;
+      }
+    }
+    this.$notify(
+      {
+        group: "alert",
+        type: "danger",
+        title: title,
+        text: message,
+      },
+      5000,
+    );
+  }
+
+  async createInvite() {
+    const inviteIdentifier =
+      Math.random().toString(36).substring(2) +
+      Math.random().toString(36).substring(2) +
+      Math.random().toString(36).substring(2);
+    (this.$refs.inviteDialog as InviteDialog).open(
+      inviteIdentifier,
+      async (notes, expiresAt) => {
+        try {
+          const headers = await getHeaders(this.activeDid);
+          if (!expiresAt) {
+            throw {
+              response: {
+                data: { error: "You must select an expiration date." },
+              },
+            };
+          }
+          const expiresIn = (new Date(expiresAt).getTime() - Date.now()) / 1000;
+          const inviteJwt = await createInviteJwt(
+            this.activeDid,
+            undefined,
+            inviteIdentifier,
+            expiresIn,
+          );
+          await axios.post(
+            this.apiServer + "/api/userUtil/invite",
+            { inviteJwt: inviteJwt, notes: notes },
+            { headers },
+          );
+          const newInvite = {
+            inviteIdentifier: inviteIdentifier,
+            expiresAt: expiresAt,
+            jwt: inviteJwt,
+            notes: notes,
+            redeemedAt: null,
+            redeemedBy: null,
+          };
+          this.invites = [newInvite, ...this.invites];
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } catch (error: any) {
+          this.lookForErrorAndNotify(
+            error,
+            "Error Creating Invite",
+            "Got an error creating your invite.",
+          );
+        }
+      },
+    );
+  }
+
+  addNewContact(did: string, notes: string) {
+    (this.$refs.contactNameDialog as ContactNameDialog).open(
+      "To Whom Did You Send The Invite?",
+      "Their name will be added to your contact list.",
+      (name) => {
+        // the person obviously registered themselves and this user already granted visibility, so we just add them
+        const contact = {
+          did: did,
+          name: name,
+          registered: true,
+        };
+        db.contacts.add(contact);
+        this.contactsRedeemed[did] = contact;
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Contact Added",
+            text: `${name} has been added to your contacts.`,
+          },
+          3000,
+        );
+      },
+      () => {},
+      notes,
+    );
+  }
+
+  deleteInvite(inviteId: string, notes: string) {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Delete Invite?",
+        text: `Are you sure you want to erase the invite for "${notes}"? (There is no undo.)`,
+        onYes: async () => {
+          const headers = await getHeaders(this.activeDid);
+          try {
+            const result = await axios.delete(
+              this.apiServer + "/api/userUtil/invite/" + inviteId,
+              { headers },
+            );
+            if (result.status !== 204) {
+              throw result.data;
+            }
+            this.invites = this.invites.filter(
+              (invite) => invite.inviteIdentifier !== inviteId,
+            );
+            this.$notify(
+              {
+                group: "alert",
+                type: "success",
+                title: "Deleted",
+                text: "Invite deleted.",
+              },
+              3000,
+            );
+          } catch (e) {
+            this.lookForErrorAndNotify(
+              e,
+              "Error Deleting Invite",
+              "Got an error deleting your invite.",
+            );
+          }
+        },
+      },
+      -1,
+    );
+  }
+}
+</script>

src/views/NewActivityView.vue

@@ -0,0 +1,330 @@
+<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 -->
+        <fa
+          icon="chevron-left"
+          @click="$router.back()"
+          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        />
+        New Activity For You
+      </h1>
+    </div>
+
+    <!-- Display a single row with the name of "New Offers To You" with a count. -->
+    <div class="flex justify-between" data-testId="showOffersToUser">
+      <div>
+        <span class="text-lg font-medium"
+          >{{ newOffersToUser.length
+          }}{{ newOffersToUserHitLimit ? "+" : "" }}</span
+        >
+        <span class="text-lg font-medium ml-4"
+          >New Offer{{ newOffersToUser.length === 1 ? "" : "s" }} To You</span
+        >
+        <fa
+          v-if="newOffersToUser.length > 0"
+          :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
+          class="cursor-pointer ml-4 mr-4 text-lg"
+          @click="expandOffersToUserAndMarkRead()"
+        />
+      </div>
+      <router-link to="/recent-offers-to-user" class="text-blue-500">
+        See&nbsp;all
+      </router-link>
+    </div>
+
+    <div v-if="showOffersDetails" class="ml-4 mt-4">
+      <ul class="list-disc ml-4">
+        <li
+          v-for="offer in newOffersToUser"
+          :key="offer.jwtId"
+          class="mt-4 relative group"
+        >
+          <span>{{
+            didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
+          }}</span>
+          offered
+          <span v-if="offer.objectDescription">{{
+            offer.objectDescription
+          }}</span
+          >{{ offer.objectDescription && offer.amount ? ", and " : "" }}
+          <span v-if="offer.amount">{{
+            displayAmount(offer.unit, offer.amount)
+          }}</span>
+          <router-link
+            :to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
+            class="text-blue-500"
+          >
+            <fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
+          </router-link>
+          <!-- New line that appears on hover or when the offer is clicked -->
+          <div
+            @click="markOffersAsReadStartingWith(offer.jwtId)"
+            class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
+          >
+            <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
+            Click to keep all above as new offers
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Display a single row with the name of "New Offers To Your Projects" with a count. -->
+    <div
+      class="mt-4 flex justify-between"
+      data-testId="showOffersToUserProjects"
+    >
+      <div>
+        <span class="text-lg font-medium"
+          >{{ newOffersToUserProjects.length
+          }}{{ newOffersToUserProjectsHitLimit ? "+" : "" }}</span
+        >
+        <span class="text-lg font-medium ml-4"
+          >New Offer{{ newOffersToUserProjects.length === 1 ? "" : "s" }} To
+          Your Projects</span
+        >
+        <fa
+          v-if="newOffersToUserProjects.length > 0"
+          :icon="
+            showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
+          "
+          class="cursor-pointer ml-4 mr-4 text-lg"
+          @click="expandOffersToUserProjectsAndMarkRead()"
+        />
+      </div>
+      <router-link to="/recent-offers-to-user-projects" class="text-blue-500">
+        See&nbsp;all
+      </router-link>
+    </div>
+
+    <div v-if="showOffersToUserProjectsDetails" class="ml-4 mt-4">
+      <ul class="list-disc ml-4">
+        <li
+          v-for="offer in newOffersToUserProjects"
+          :key="offer.jwtId"
+          class="mt-4 relative group"
+        >
+          <span>{{
+            didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
+          }}</span>
+          offered
+          <span v-if="offer.objectDescription">{{
+            offer.objectDescription
+          }}</span
+          >{{ offer.objectDescription && offer.amount ? ", and " : "" }}
+          <span v-if="offer.amount">{{
+            displayAmount(offer.unit, offer.amount)
+          }}</span>
+          to
+          <span>{{ offer.planName }}</span>
+          <router-link
+            :to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
+            class="text-blue-500"
+          >
+            <fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
+          </router-link>
+          <!-- New line that appears on hover -->
+          <div
+            @click="markOffersToUserProjectsAsReadStartingWith(offer.jwtId)"
+            class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
+          >
+            <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
+            Click to keep all above as new offers
+          </div>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+
+import GiftedDialog from "@/components/GiftedDialog.vue";
+import QuickNav from "@/components/QuickNav.vue";
+import EntityIcon from "@/components/EntityIcon.vue";
+import { NotificationIface } from "@/constants/app";
+import {
+  db,
+  retrieveSettingsForActiveAccount,
+  updateAccountSettings,
+} from "@/db/index";
+import { Contact } from "@/db/tables/contacts";
+import {
+  didInfo,
+  displayAmount,
+  getNewOffersToUser,
+  getNewOffersToUserProjects,
+  OfferSummaryRecord,
+  OfferToPlanSummaryRecord,
+} from "@/libs/endorserServer";
+import { retrieveAccountDids } from "@/libs/util";
+
+@Component({
+  components: { GiftedDialog, QuickNav, EntityIcon },
+})
+export default class NewActivityView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid = "";
+  allContacts: Array<Contact> = [];
+  allMyDids: string[] = [];
+  apiServer = "";
+  lastAckedOfferToUserJwtId = "";
+  lastAckedOfferToUserProjectsJwtId = "";
+  newOffersToUser: Array<OfferSummaryRecord> = [];
+  newOffersToUserHitLimit = false;
+  newOffersToUserProjects: Array<OfferToPlanSummaryRecord> = [];
+  newOffersToUserProjectsHitLimit = false;
+
+  showOffersDetails = false;
+  showOffersToUserProjectsDetails = false;
+  didInfo = didInfo;
+  displayAmount = displayAmount;
+
+  async created() {
+    try {
+      const settings = await retrieveSettingsForActiveAccount();
+      this.apiServer = settings.apiServer || "";
+      this.activeDid = settings.activeDid || "";
+      this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId || "";
+      this.lastAckedOfferToUserProjectsJwtId =
+        settings.lastAckedOfferToUserProjectsJwtId || "";
+
+      this.allContacts = await db.contacts.toArray();
+      this.allMyDids = await retrieveAccountDids();
+
+      const offersToUserData = await getNewOffersToUser(
+        this.axios,
+        this.apiServer,
+        this.activeDid,
+        this.lastAckedOfferToUserJwtId,
+      );
+      this.newOffersToUser = offersToUserData.data;
+      this.newOffersToUserHitLimit = offersToUserData.hitLimit;
+
+      const offersToUserProjectsData = await getNewOffersToUserProjects(
+        this.axios,
+        this.apiServer,
+        this.activeDid,
+        this.lastAckedOfferToUserProjectsJwtId,
+      );
+      this.newOffersToUserProjects = offersToUserProjectsData.data;
+      this.newOffersToUserProjectsHitLimit = offersToUserProjectsData.hitLimit;
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (err: any) {
+      console.error("Error retrieving settings & contacts:", err);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: err.message || "There was an error retrieving your activity.",
+        },
+        5000,
+      );
+    }
+  }
+
+  async expandOffersToUserAndMarkRead() {
+    this.showOffersDetails = !this.showOffersDetails;
+    if (this.showOffersDetails) {
+      await updateAccountSettings(this.activeDid, {
+        lastAckedOfferToUserJwtId: this.newOffersToUser[0].jwtId,
+      });
+      // note that we don't update this.lastAckedOfferToUserJwtId in case they
+      // later choose the last one to keep the offers as new
+      this.$notify(
+        {
+          group: "alert",
+          type: "info",
+          title: "Marked as Read",
+          text: "The offers are marked as viewed. Click in the list to keep them as new.",
+        },
+        5000,
+      );
+    }
+  }
+
+  async markOffersAsReadStartingWith(jwtId: string) {
+    const index = this.newOffersToUser.findIndex(
+      (offer) => offer.jwtId === jwtId,
+    );
+    if (index !== -1 && index < this.newOffersToUser.length - 1) {
+      // Set to the next offer's jwtId
+      await updateAccountSettings(this.activeDid, {
+        lastAckedOfferToUserJwtId: this.newOffersToUser[index + 1].jwtId,
+      });
+    } else {
+      // it's the last entry (or not found), so just keep it the same
+      await updateAccountSettings(this.activeDid, {
+        lastAckedOfferToUserJwtId: this.lastAckedOfferToUserJwtId,
+      });
+    }
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Marked as Unread",
+        text: "All offers above that line are marked as unread.",
+      },
+      3000,
+    );
+  }
+
+  async expandOffersToUserProjectsAndMarkRead() {
+    this.showOffersToUserProjectsDetails =
+      !this.showOffersToUserProjectsDetails;
+    if (this.showOffersToUserProjectsDetails) {
+      await updateAccountSettings(this.activeDid, {
+        lastAckedOfferToUserProjectsJwtId:
+          this.newOffersToUserProjects[0].jwtId,
+      });
+      // note that we don't update this.lastAckedOfferToUserProjectsJwtId in case
+      // they later choose the last one to keep the offers as new
+      this.$notify(
+        {
+          group: "alert",
+          type: "info",
+          title: "Marked as Read",
+          text: "The offers are now marked as viewed. Click in the list to keep them as new.",
+        },
+        5000,
+      );
+    }
+  }
+
+  async markOffersToUserProjectsAsReadStartingWith(jwtId: string) {
+    const index = this.newOffersToUserProjects.findIndex(
+      (offer) => offer.jwtId === jwtId,
+    );
+    if (index !== -1 && index < this.newOffersToUserProjects.length - 1) {
+      // Set to the next offer's jwtId
+      await updateAccountSettings(this.activeDid, {
+        lastAckedOfferToUserProjectsJwtId:
+          this.newOffersToUserProjects[index + 1].jwtId,
+      });
+    } else {
+      // it's the last entry (or not found), so just keep it the same
+      await updateAccountSettings(this.activeDid, {
+        lastAckedOfferToUserProjectsJwtId:
+          this.lastAckedOfferToUserProjectsJwtId,
+      });
+    }
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Marked as Unread",
+        text: "All offers above that line are marked as unread.",
+      },
+      3000,
+    );
+  }
+}
+</script>

src/views/NewEditAccountView.vue

@@ -47,8 +47,8 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import { db } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 
 @Component({
   components: {},
@@ -58,11 +58,10 @@ export default class NewEditAccountView extends Vue {
 
   // 'created' hook runs when the Vue instance is first created
   async created() {
-    await db.open();
+    const settings = await retrieveSettingsForActiveAccount();
-    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
     this.givenName =
-      (settings?.firstName || "") +
+      (settings.firstName || "") +
-      (settings?.lastName ? ` ${settings.lastName}` : ""); // deprecated, pre v 0.1.3
+      (settings.lastName ? ` ${settings.lastName}` : ""); // deprecated, pre v 0.1.3
   }
 
   async onClickSaveChanges() {

src/views/NewEditProjectView.vue

@@ -6,12 +6,14 @@
     <div id="ViewBreadcrumb" class="mb-8">
       <h1 class="text-lg text-center font-light relative px-7">
         <!-- Cancel -->
-        <router-link
+        <!-- Back -->
-          :to="{ name: 'project' }"
+        <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
+        >
-        ></router-link>
+          <fa icon="chevron-left" class="fa-fw"></fa>
-        Edit Idea
+        </button>
+        Edit Project Idea
       </h1>
     </div>
 
@@ -69,15 +71,17 @@
 
     <textarea
       placeholder="Description"
-      class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      class="block w-full rounded border border-slate-400 px-3 py-2"
       rows="5"
       v-model="fullClaim.description"
       maxlength="5000"
     ></textarea>
-    <div class="text-xs text-slate-500 italic -mt-3 mb-4">
+    <div class="text-xs text-slate-500 italic">
-      If you want to be contacted, be sure to include your contact information.
+      If you want to be contacted, be sure to include your contact information
+      -- just remember that this information is public and saved in a public
+      history.
     </div>
-    <div class="text-xs text-slate-500 italic -mt-3 mb-4">
+    <div class="text-xs text-slate-500 italic">
       {{ fullClaim.description?.length }}/5000 max. characters
     </div>
 
@@ -85,33 +89,58 @@
       v-model="fullClaim.url"
       placeholder="Website"
       autocapitalize="none"
-      class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      class="block w-full rounded border border-slate-400 mt-4 px-3 py-2"
     />
 
-    <div class="flex mb-4 columns-3 w-full">
+    <div>
-      <input
+      <div class="flex items-center mt-4">
-        v-model="startDateInput"
+        <span class="mr-2">Starts At</span>
-        placeholder="Start Date"
+        <input
-        type="date"
+          v-model="startDateInput"
-        class="col-span-1 w-full rounded border border-slate-400 px-3 py-2"
+          placeholder="Start Date"
-      />
+          type="date"
-      <input
+          class="rounded border border-slate-400 px-3 py-2"
-        :disabled="!startDateInput"
+        />
-        placeholder="Start Time"
+        <input
-        v-model="startTimeInput"
+          :disabled="!startDateInput"
-        type="time"
+          placeholder="Start Time"
-        class="col-span-1 w-full rounded border border-slate-400 ml-2 px-3 py-2"
+          v-model="startTimeInput"
-      />
+          type="time"
-      <span class="col-span-1 w-full flex justify-center">{{ zoneName }}</span>
+          class="rounded border border-slate-400 ml-2 px-3 py-2"
+        />
+      </div>
+
+      <div class="flex w-full justify-end items-center">
+        <span class="w-full flex justify-end items-center">
+          {{ zoneName }} time zone
+        </span>
+      </div>
+
+      <div class="flex items-center">
+        <div class="mr-2">
+          <span>Ends at</span>
+        </div>
+        <input
+          v-model="endDateInput"
+          placeholder="End Date"
+          type="date"
+          class="ml-2 rounded border border-slate-400 px-3 py-2"
+        />
+        <input
+          :disabled="!endDateInput"
+          placeholder="End Time"
+          v-model="endTimeInput"
+          type="time"
+          class="rounded border border-slate-400 ml-2 px-3 py-2"
+        />
+      </div>
     </div>
 
-    <div class="flex items-center mb-4">
+    <div
-      <input
+      class="flex items-center mt-4"
-        type="checkbox"
+      @click="includeLocation = !includeLocation"
-        class="mr-2"
+    >
-        v-model="includeLocation"
+      <input type="checkbox" class="mr-2" v-model="includeLocation" />
-        @click="includeLocation = !includeLocation"
-      />
       <label for="includeLocation">Include Location</label>
     </div>
     <div v-if="includeLocation" class="mb-4 aspect-video">
@@ -145,6 +174,28 @@
       </l-map>
     </div>
 
+    <div
+      v-if="showGeneralAdvanced && includeLocation"
+      class="items-center mb-4"
+    >
+      <div class="flex" @click="sendToTrustroots = !sendToTrustroots">
+        <input type="checkbox" class="mr-2" v-model="sendToTrustroots" />
+        <label>Send to Trustroots</label>
+        <fa
+          icon="circle-info"
+          class="text-blue-500 ml-2 cursor-pointer"
+          @click.stop="showNostrPartnerInfo"
+        />
+      </div>
+      <!--
+      <div class="flex" @click="sendToTripHopping = !sendToTripHopping">
+        <input type="checkbox" class="mr-2" v-model="sendToTripHopping" />
+        <label>Send to TripHopping</label>
+        <fa icon="circle-info" class="text-blue-500 ml-2 cursor-pointer" @click.stop="showNostrPartnerInfo" />
+      </div>
+      -->
+    </div>
+
     <div class="mt-8">
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
         <button
@@ -178,28 +229,46 @@
 import "leaflet/dist/leaflet.css";
 import { AxiosError, AxiosRequestHeaders } from "axios";
 import { DateTime } from "luxon";
+import { hexToBytes } from "@noble/hashes/utils";
+// these core imports could also be included as "import type ..."
+import {
+  EventTemplate,
+  UnsignedEvent,
+  VerifiedEvent,
+} from "nostr-tools/lib/types/core";
+import {
+  accountFromExtendedKey,
+  extendedKeysFromSeedWords,
+} from "nostr-tools/nip06";
+import { finalizeEvent, serializeEvent } from "nostr-tools/pure";
 import { Component, Vue } from "vue-facing-decorator";
 import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
-import { Router } from "vue-router";
+import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 
 import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
-import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
+import {
-import { accountsDB, db } from "@/db/index";
+  DEFAULT_IMAGE_API_SERVER,
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+  DEFAULT_PARTNER_API_SERVER,
+  NotificationIface,
+} from "@/constants/app";
+import { retrieveSettingsForActiveAccount } from "@/db/index";
 import {
   createEndorserJwtVcFromClaim,
   getHeaders,
   PlanVerifiableCredential,
 } from "@/libs/endorserServer";
-import { useAppStore } from "@/store/app";
+import {
+  retrieveAccountCount,
+  retrieveFullyDecryptedAccount,
+} from "@/libs/util";
 
 @Component({
   components: { ImageMethodDialog, LMap, LMarker, LTileLayer, QuickNav },
 })
 export default class NewEditProjectView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
-  errNote(message) {
+  errNote(message: string) {
     this.$notify(
       { group: "alert", type: "danger", title: "Error", text: message },
       5000,
@@ -209,6 +278,8 @@ export default class NewEditProjectView extends Vue {
   activeDid = "";
   agentDid = "";
   apiServer = "";
+  endDateInput?: string;
+  endTimeInput?: string;
   errorMessage = "";
   fullClaim: PlanVerifiableCredential = {
     "@context": "https://schema.org",
@@ -224,21 +295,26 @@ export default class NewEditProjectView extends Vue {
   latitude = 0;
   longitude = 0;
   numAccounts = 0;
-  projectId = localStorage.getItem("projectId") || "";
+  projectId = "";
   projectIssuerDid = "";
+  sendToTrustroots = false;
+  sendToTripHopping = false;
+  showGeneralAdvanced = false;
   startDateInput?: string;
   startTimeInput?: string;
   zoneName = DateTime.local().zoneName;
   zoom = 2;
 
   async mounted() {
-    await accountsDB.open();
+    this.numAccounts = await retrieveAccountCount();
-    this.numAccounts = await accountsDB.accounts.count();
 
-    await db.open();
+    const settings = await retrieveSettingsForActiveAccount();
-    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    this.activeDid = settings.activeDid || "";
-    this.activeDid = (settings?.activeDid as string) || "";
+    this.apiServer = settings.apiServer || "";
-    this.apiServer = (settings?.apiServer as string) || "";
+    this.showGeneralAdvanced = !!settings.showGeneralAdvanced;
+
+    this.projectId =
+      (this.$route as RouteLocationNormalizedLoaded).query["projectId"] || "";
 
     if (this.projectId) {
       if (this.numAccounts === 0) {
@@ -278,6 +354,13 @@ export default class NewEditProjectView extends Vue {
           this.startDateInput = localDateTime.toFormat("yyyy-MM-dd");
           this.startTimeInput = localDateTime.toFormat("HH:mm");
         }
+        if (this.fullClaim.endTime) {
+          const localDateTime = DateTime.fromISO(
+            this.fullClaim.endTime as string,
+          ).toLocal();
+          this.endDateInput = localDateTime.toFormat("yyyy-MM-dd");
+          this.endTimeInput = localDateTime.toFormat("HH:mm");
+        }
       }
     } catch (error) {
       console.error("Got error retrieving that project", error);
@@ -357,7 +440,7 @@ export default class NewEditProjectView extends Vue {
     }
   }
 
-  private async saveProject(issuerDid: string) {
+  private async saveProject() {
     // Make a claim
     const vcClaim: PlanVerifiableCredential = this.fullClaim;
     if (this.projectId) {
@@ -376,13 +459,26 @@ export default class NewEditProjectView extends Vue {
       delete vcClaim.image;
     }
     if (this.includeLocation) {
-      vcClaim.location = {
+      if (!this.latitude || !this.longitude) {
-        geo: {
+        this.$notify(
-          "@type": "GeoCoordinates",
+          {
-          latitude: this.latitude,
+            group: "alert",
-          longitude: this.longitude,
+            type: "danger",
-        },
+            title: "Location Error",
-      };
+            text: "The location was invalid so it was not set.",
+          },
+          5000,
+        );
+        delete vcClaim.location;
+      } else {
+        vcClaim.location = {
+          geo: {
+            "@type": "GeoCoordinates",
+            latitude: this.latitude,
+            longitude: this.longitude,
+          },
+        };
+      }
     } else {
       delete vcClaim.location;
     }
@@ -399,8 +495,8 @@ export default class NewEditProjectView extends Vue {
           {
             group: "alert",
             type: "danger",
-            title: "Error",
+            title: "Date Error",
-            text: "The date was invalid so it was not set.",
+            text: "The start date was invalid so it was not set.",
           },
           5000,
         );
@@ -408,24 +504,94 @@ export default class NewEditProjectView extends Vue {
     } else {
       delete vcClaim.startTime;
     }
-    const vcJwt = await createEndorserJwtVcFromClaim(issuerDid, vcClaim);
+    if (this.endDateInput) {
+      try {
+        const endTimeFull = this.endTimeInput || "23:59:59";
+        const fullTimeString = this.endDateInput + " " + endTimeFull;
+        // throw an error on an invalid date or time string
+        vcClaim.endTime = new Date(fullTimeString).toISOString(); // ensure timezone is part of it
+      } catch {
+        // it's not a valid date so erase it and tell the user
+        delete vcClaim.endTime;
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Date Error",
+            text: "The end date was invalid so it was not set.",
+          },
+          5000,
+        );
+      }
+    } else {
+      delete vcClaim.endTime;
+    }
+    const vcJwt = await createEndorserJwtVcFromClaim(this.activeDid, vcClaim);
 
     // Make the xhr request payload
 
     const payload = JSON.stringify({ jwtEncoded: vcJwt });
     const url = this.apiServer + "/api/v2/claim";
-    const headers = await getHeaders(issuerDid);
+    const headers = await getHeaders(this.activeDid);
 
     try {
       const resp = await this.axios.post(url, payload, { headers });
       if (resp.data?.success?.handleId) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Saved",
+            text: "The project was saved successfully.",
+          },
+          3000,
+        );
+
         this.errorMessage = "";
 
-        useAppStore()
+        const projectPath = encodeURIComponent(resp.data.success.handleId);
-          .setProjectId(resp.data.success.handleId)
+
-          .then(() => {
+        if (this.sendToTrustroots || this.sendToTripHopping) {
-            (this.$router as Router).push({ name: "project" });
+          if (this.latitude && this.longitude) {
-          });
+            let payloadAndKey; // sign something to prove ownership of pubkey
+            if (this.sendToTrustroots) {
+              payloadAndKey = await this.signSomePayload();
+              // not going to await... the save was successful, so we'll continue to the next page
+              this.sendToNostrPartner(
+                "NOSTR-EVENT-TRUSTROOTS",
+                "Trustroots",
+                resp.data.success.claimId,
+                payloadAndKey.signedEvent,
+                payloadAndKey.publicExtendedKey,
+              );
+            }
+            if (this.sendToTripHopping) {
+              if (!payloadAndKey) {
+                payloadAndKey = await this.signSomePayload();
+              }
+              // not going to await... the save was successful, so we'll continue to the next page
+              this.sendToNostrPartner(
+                "NOSTR-EVENT-TRIPHOPPING",
+                "TripHopping",
+                resp.data.success.claimId,
+                payloadAndKey.signedEvent,
+                payloadAndKey.publicExtendedKey,
+              );
+            }
+          } else {
+            this.$notify(
+              {
+                group: "alert",
+                type: "danger",
+                title: "Partner Error",
+                text: "A partner was selected but the location was not set, so it was not sent to any partner.",
+              },
+              5000,
+            );
+          }
+        }
+
+        (this.$router as Router).push({ path: "/project/" + projectPath });
       } else {
         console.error(
           "Got unexpected 'data' inside response from server",
@@ -438,7 +604,7 @@ export default class NewEditProjectView extends Vue {
             title: "Error Saving Idea",
             text: "Server did not save the idea. Try again.",
           },
-          -1,
+          5000,
         );
       }
     } catch (error) {
@@ -459,7 +625,7 @@ export default class NewEditProjectView extends Vue {
               title: "User Message",
               text: userMessage,
             },
-            -1,
+            5000,
           );
         } else {
           this.$notify(
@@ -469,7 +635,7 @@ export default class NewEditProjectView extends Vue {
               title: "Server Message",
               text: JSON.stringify(serverError.toJSON()),
             },
-            -1,
+            5000,
           );
         }
       } else {
@@ -481,7 +647,7 @@ export default class NewEditProjectView extends Vue {
             title: "Claim Error",
             text: error as string,
           },
-          -1,
+          5000,
         );
       }
       // Now set that error for the user to see.
@@ -489,6 +655,127 @@ export default class NewEditProjectView extends Vue {
     }
   }
 
+  /**
+   * @return a signed payload and an extended public key for later transmission
+   */
+  private async signSomePayload(): Promise<{
+    signedEvent: VerifiedEvent;
+    publicExtendedKey: string;
+  }> {
+    const account = await retrieveFullyDecryptedAccount(this.activeDid);
+    // get the last number of the derivationPath
+    const finalDerNum = account?.derivationPath?.split?.("/")?.reverse()[0];
+    // remove any trailing '
+    const finalDerNumNoApostrophe = finalDerNum?.replace(/'/g, "");
+    const accountNum = Number(finalDerNumNoApostrophe || 0);
+    const extPubPri = extendedKeysFromSeedWords(
+      account?.mnemonic as string,
+      "",
+      accountNum,
+    );
+    const publicExtendedKey: string = extPubPri?.publicExtendedKey;
+    const privateExtendedKey = extPubPri?.privateExtendedKey;
+    const privateKey = accountFromExtendedKey(privateExtendedKey).privateKey;
+    const privateBytes = hexToBytes(privateKey);
+    // No real content is necessary, we just want something signed,
+    // so we might as well use nostr libs for nostr functions.
+    // Besides: someday we may create real content that we can relay.
+    const event: EventTemplate = {
+      kind: 30402,
+      tags: [[]],
+      content: "",
+      created_at: 0,
+    };
+    const signedEvent: VerifiedEvent = finalizeEvent(
+      // Why does IntelliJ not see matching types?
+      event as EventTemplate,
+      privateBytes,
+    ) as VerifiedEvent;
+    return { signedEvent, publicExtendedKey };
+  }
+
+  private async sendToNostrPartner(
+    linkCode: string,
+    serviceName: string,
+    jwtId: string,
+    signedPayload: VerifiedEvent,
+    publicExtendedKey: string,
+  ) {
+    try {
+      let partnerServer = DEFAULT_PARTNER_API_SERVER;
+      const settings = await retrieveSettingsForActiveAccount();
+      if (settings.partnerApiServer) {
+        partnerServer = settings.partnerApiServer;
+      }
+      const endorserPartnerUrl = partnerServer + "/api/partner/link";
+      const timeSafariUrl = window.location.origin + "/claim/" + jwtId;
+      const content = this.fullClaim.name + " - see " + timeSafariUrl;
+      const publicKeyHex = accountFromExtendedKey(publicExtendedKey).publicKey;
+      const unsignedPayload: UnsignedEvent = {
+        // why doesn't "...signedPayload" work?
+        kind: signedPayload.kind,
+        tags: signedPayload.tags,
+        content: signedPayload.content,
+        created_at: signedPayload.created_at,
+        pubkey: publicKeyHex,
+      };
+      // Why does IntelliJ not see matching types?
+      const payload = serializeEvent(unsignedPayload as UnsignedEvent);
+      const partnerParams = {
+        jwtId: jwtId,
+        linkCode: linkCode,
+        inputJson: JSON.stringify(content),
+        pubKeyHex: publicKeyHex,
+        pubKeyImage: payload,
+        pubKeySigHex: signedPayload.sig,
+      };
+      const headers = await getHeaders(this.activeDid);
+      const linkResp = await this.axios.post(
+        endorserPartnerUrl,
+        partnerParams,
+        { headers },
+      );
+      if (linkResp.status === 201) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: `Sent to ${serviceName}`,
+            text: `The project info was sent to ${serviceName}.`,
+          },
+          5000,
+        );
+      } else {
+        // axios never gets here because it throws an error, but just in case
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: `Failed Sending to ${serviceName}`,
+            text: JSON.stringify(linkResp.data),
+          },
+          5000,
+        );
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      console.error(`Error sending to ${serviceName}`, error);
+      let errorMessage = `There was an error sending to ${serviceName}.`;
+      if (error.response?.data?.error?.message) {
+        errorMessage = error.response.data.error.message;
+      }
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: `Error Sending to ${serviceName}`,
+          text: errorMessage,
+        },
+        7000,
+      );
+    }
+  }
+
   public async onSaveProjectClick() {
     this.isHiddenSave = true;
     this.isHiddenSpinner = false;
@@ -496,7 +783,7 @@ export default class NewEditProjectView extends Vue {
     if (this.numAccounts === 0) {
       console.error("Error: there is no account.");
     } else {
-      this.saveProject(this.activeDid);
+      this.saveProject();
     }
   }
 
@@ -524,5 +811,17 @@ export default class NewEditProjectView extends Vue {
   public onCancelClick() {
     (this.$router as Router).back();
   }
+
+  public showNostrPartnerInfo() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "About Nostr Events",
+        text: "This will submit this project to a partner on the nostr network. It will contain your public key data which may allow correlation, so don't allow this if you're not comfortable with that.",
+      },
+      7000,
+    );
+  }
 }
 </script>

src/views/NewIdentifierView.vue

@@ -22,8 +22,8 @@
     </div>
 
     <div class="flex justify-center py-12">
-      <span />
+      <div />
-      <span v-if="loading">
+      <div v-if="loading">
         <span class="text-xl">Creating...&nbsp;</span>
         <fa
           icon="spinner"
@@ -31,8 +31,8 @@
           color="green"
           size="128"
         ></fa>
-      </span>
+      </div>
-      <span v-else>
+      <div v-else>
         <span class="text-xl">Created!</span>
         <fa
           icon="burst"
@@ -45,8 +45,8 @@
             --fa-beat-scale: 6;
           "
         ></fa>
-      </span>
+      </div>
-      <span />
+      <div />
     </div>
   </section>
 </template>

src/views/OfferDetailsView.vue

@@ -28,14 +28,14 @@
             ? projectName
             : offeredToRecipient
               ? recipientName
-              : "someone unidentified"
+              : "someone not named"
         }}</span
       >
     </h1>
     <textarea
       class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
       placeholder="What is offered"
-      v-model="itemDescription"
+      v-model="descriptionOfItem"
       data-testId="itemDescription"
     />
     <div class="flex flex-row justify-center">
@@ -74,7 +74,7 @@
       <textarea
         class="w-full border border-slate-400 px-3 py-2 rounded-r"
         placeholder="Prerequisites, other people to include, etc."
-        v-model="conditionDescription"
+        v-model="descriptionOfCondition"
       />
     </div>
 
@@ -135,7 +135,7 @@
       </label>
     </div>
 
-    <div class="mt-4 flex">
+    <div v-if="showGeneralAdvanced" class="mt-4 flex">
       <router-link
         :to="{
           name: 'claim-add-raw',
@@ -181,8 +181,7 @@ import { Router } from "vue-router";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import {
   createAndSubmitOffer,
   didInfo,
@@ -193,7 +192,7 @@ import {
   OfferVerifiableCredential,
 } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
-import { Contact } from "@/db/tables/contacts";
+import { retrieveAccountDids } from "@/libs/util";
 
 @Component({
   components: {
@@ -208,20 +207,21 @@ export default class OfferDetailsView extends Vue {
   apiServer = "";
 
   amountInput = "0";
-  conditionDescription = "";
+  descriptionOfCondition = "";
-  itemDescription = "";
+  descriptionOfItem = "";
   destinationPathAfter = "";
+  hideBackButton = false;
+  message = "";
   offeredToProject = false;
   offeredToRecipient = false;
   offererDid: string | undefined;
-  hideBackButton = false;
-  message = "";
   offerId = "";
   prevCredToEdit?: GenericCredWrapper<OfferVerifiableCredential>;
   projectId = "";
   projectName = "a project";
   recipientDid = "";
   recipientName = "";
+  showGeneralAdvanced = false;
   unitCode = "HUR";
   validThroughDateInput = "";
 
@@ -242,7 +242,7 @@ export default class OfferDetailsView extends Vue {
           title: "Retrieval Error",
           text: "The previous record isn't available for editing. If you submit, you'll create a new record.",
         },
-        6000,
+        5000,
       );
     }
 
@@ -256,12 +256,12 @@ export default class OfferDetailsView extends Vue {
       this.prevCredToEdit?.claim?.includesObject?.unitCode ||
       this.unitCode) as string;
 
-    this.conditionDescription =
+    this.descriptionOfCondition =
-      this.prevCredToEdit?.claim?.description || this.conditionDescription;
+      this.prevCredToEdit?.claim?.description || this.descriptionOfCondition;
-    this.itemDescription =
+    this.descriptionOfItem =
       (this.$route as Router).query["description"] ||
       this.prevCredToEdit?.claim?.itemOffered?.description ||
-      this.itemDescription;
+      this.descriptionOfItem;
     this.destinationPathAfter = (this.$route as Router).query[
       "destinationPathAfter"
     ];
@@ -296,19 +296,14 @@ export default class OfferDetailsView extends Vue {
       this.prevCredToEdit?.claim?.validThrough || this.validThroughDateInput;
 
     try {
-      await db.open();
+      const settings = await retrieveSettingsForActiveAccount();
-      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+      this.apiServer = settings.apiServer ?? "";
-      this.apiServer = settings?.apiServer || "";
+      this.activeDid = settings.activeDid ?? "";
-      this.activeDid = settings?.activeDid || "";
+      this.showGeneralAdvanced = settings.showGeneralAdvanced ?? false;
 
-      let allContacts: Contact[] = [];
-      let allMyDids: string[] = [];
       if (this.recipientDid && !this.recipientName) {
-        allContacts = await db.contacts.toArray();
+        const allContacts = await db.contacts.toArray();
-
+        const allMyDids = await retrieveAccountDids();
-        await accountsDB.open();
-        const allAccounts = await accountsDB.accounts.toArray();
-        allMyDids = allAccounts.map((acc) => acc.did);
         this.recipientName = didInfo(
           this.recipientDid,
           this.activeDid,
@@ -330,7 +325,7 @@ export default class OfferDetailsView extends Vue {
           title: "Error",
           text: err.message || "There was an error retrieving your settings.",
         },
-        -1,
+        5000,
       );
     }
 
@@ -402,7 +397,7 @@ export default class OfferDetailsView extends Vue {
       );
       return;
     }
-    if (!this.itemDescription && !parseFloat(this.amountInput)) {
+    if (!this.descriptionOfItem && !parseFloat(this.amountInput)) {
       this.$notify(
         {
           group: "alert",
@@ -502,10 +497,10 @@ export default class OfferDetailsView extends Vue {
           this.apiServer,
           this.prevCredToEdit,
           this.activeDid,
-          this.itemDescription,
+          this.descriptionOfItem,
           parseFloat(this.amountInput),
           this.unitCode,
-          this.conditionDescription,
+          this.descriptionOfCondition,
           this.validThroughDateInput,
           recipientDid,
           projectId,
@@ -515,10 +510,10 @@ export default class OfferDetailsView extends Vue {
           this.axios,
           this.apiServer,
           this.activeDid,
-          this.itemDescription,
+          this.descriptionOfItem,
           parseFloat(this.amountInput),
           this.unitCode,
-          this.conditionDescription,
+          this.descriptionOfCondition,
           this.validThroughDateInput,
           recipientDid,
           projectId,
@@ -535,7 +530,7 @@ export default class OfferDetailsView extends Vue {
             title: "Error",
             text: errorMessage || "There was an error creating the offer.",
           },
-          -1,
+          5000,
         );
       } else {
         this.$notify(
@@ -568,7 +563,7 @@ export default class OfferDetailsView extends Vue {
           title: "Error",
           text: errorMessage,
         },
-        -1,
+        5000,
       );
     }
   }
@@ -582,10 +577,10 @@ export default class OfferDetailsView extends Vue {
       this.prevCredToEdit?.claim as OfferVerifiableCredential,
       this.activeDid,
       recipientDid,
-      this.itemDescription,
+      this.descriptionOfItem,
       parseFloat(this.amountInput),
       this.unitCode,
-      this.conditionDescription,
+      this.descriptionOfCondition,
       projectId,
       this.validThroughDateInput,
       this.prevCredToEdit?.id as string,
@@ -626,7 +621,7 @@ export default class OfferDetailsView extends Vue {
         title: "Data Sharing",
         text: libsUtil.PRIVACY_MESSAGE,
       },
-      -1,
+      7000,
     );
   }
 }

src/views/OnboardMeetingListView.vue

@@ -0,0 +1,343 @@
+<template>
+  <QuickNav selected="Contacts" />
+  <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 mb-8">
+      Onboarding Meetings
+    </h1>
+
+    <!-- Loading State -->
+    <div v-if="isLoading" class="flex justify-center items-center py-8">
+      <fa icon="spinner" class="fa-spin-pulse" />
+    </div>
+
+    <div v-else-if="attendingMeeting">
+      <p>You are in this meeting.</p>
+      <div
+        class="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer"
+        @click="promptPassword(attendingMeeting)"
+      >
+        <div class="flex justify-between items-center">
+          <h2 class="text-xl font-medium">{{ attendingMeeting.name }}</h2>
+          <button
+            @click.stop="leaveMeeting"
+            class="text-red-600 hover:text-red-700 p-2"
+            title="Leave Meeting"
+          >
+            <fa icon="right-from-bracket" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Meeting List -->
+    <div v-else class="space-y-4">
+      <div
+        v-for="meeting in meetings"
+        :key="meeting.groupId"
+        class="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer"
+        @click="promptPassword(meeting)"
+      >
+        <h2 class="text-xl font-medium">{{ meeting.name }}</h2>
+      </div>
+
+      <p v-if="meetings.length === 0" class="text-center text-gray-500 py-8">
+        No onboarding meetings available
+      </p>
+    </div>
+
+    <!-- Password Dialog -->
+    <div
+      v-if="showPasswordDialog"
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4"
+    >
+      <div class="bg-white rounded-lg p-6 max-w-sm w-full">
+        <h3 class="text-lg font-medium mb-4">Enter Meeting Password</h3>
+        <input
+          ref="passwordInput"
+          v-model="password"
+          type="text"
+          class="w-full px-3 py-2 border rounded-md mb-4"
+          placeholder="Enter password"
+          @keyup.enter="submitPassword"
+        />
+        <div class="flex justify-end space-x-4">
+          <button
+            @click="cancelPasswordDialog"
+            class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
+          >
+            Cancel
+          </button>
+          <button
+            @click="submitPassword"
+            class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            Submit
+          </button>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { nextTick } from "vue";
+import { Router } from "vue-router";
+
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
+import {
+  errorStringForLog,
+  getHeaders,
+  serverMessageForUser,
+} from "@/libs/endorserServer";
+import { encryptMessage } from "@/libs/crypto";
+
+interface Meeting {
+  name: string;
+  groupId: number;
+}
+
+@Component({
+  components: {
+    QuickNav,
+    TopMessage,
+  },
+})
+export default class OnboardMeetingListView extends Vue {
+  $notify!: (
+    notification: {
+      group: string;
+      type: string;
+      title: string;
+      text: string;
+      onYes?: () => void;
+      yesText?: string;
+    },
+    timeout?: number,
+  ) => void;
+
+  activeDid = "";
+  apiServer = "";
+  attendingMeeting: Meeting | null = null;
+  firstName = "";
+  isLoading = false;
+  isRegistered = false;
+  meetings: Meeting[] = [];
+  password = "";
+  selectedMeeting: Meeting | null = null;
+  showPasswordDialog = false;
+
+  async created() {
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.apiServer = settings.apiServer || "";
+    this.firstName = settings.firstName || "";
+    this.isRegistered = !!settings.isRegistered;
+    await this.fetchMeetings();
+  }
+
+  async fetchMeetings() {
+    this.isLoading = true;
+    try {
+      // get the meeting that the user is attending
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.get(
+        this.apiServer + "/api/partner/groupOnboardMember",
+        { headers },
+      );
+
+      if (response.data?.data) {
+        // they're in a meeting already
+        const attendingMeetingId = response.data.data.groupId;
+        // retrieve the meeting details
+        const headers2 = await getHeaders(this.activeDid);
+        const response2 = await this.axios.get(
+          this.apiServer + "/api/partner/groupOnboard/" + attendingMeetingId,
+          { headers: headers2 },
+        );
+
+        if (response2.data?.data) {
+          this.attendingMeeting = response2.data.data;
+          return;
+        } else {
+          // this should never happen
+          logConsoleAndDb(
+            "Error fetching meeting for user after saying they are in one.",
+            true,
+          );
+        }
+      }
+
+      const headers2 = await getHeaders(this.activeDid);
+      const response2 = await this.axios.get(
+        this.apiServer + "/api/partner/groupsOnboarding",
+        { headers: headers2 },
+      );
+
+      if (response2.data?.data) {
+        this.meetings = response2.data.data;
+      }
+    } catch (error) {
+      logConsoleAndDb(
+        "Error fetching meetings: " + errorStringForLog(error),
+        true,
+      );
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: serverMessageForUser(error) || "Failed to fetch meetings.",
+        },
+        5000,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  promptPassword(meeting: Meeting) {
+    this.password = "";
+    this.selectedMeeting = meeting;
+    this.showPasswordDialog = true;
+    nextTick(() => {
+      const input = this.$refs.passwordInput as HTMLInputElement;
+      if (input) {
+        input.focus();
+      }
+    });
+  }
+
+  cancelPasswordDialog() {
+    this.password = "";
+    this.selectedMeeting = null;
+    this.showPasswordDialog = false;
+  }
+
+  async submitPassword() {
+    if (!this.selectedMeeting) {
+      // this should never happen
+      logConsoleAndDb(
+        "No meeting selected when prompting for password, which should never happen.",
+        true,
+      );
+      return;
+    }
+
+    try {
+      // Create member data object
+      const memberData = {
+        name: this.firstName,
+        did: this.activeDid,
+        isRegistered: this.isRegistered,
+      };
+      const memberDataString = JSON.stringify(memberData);
+      const encryptedMemberData = await encryptMessage(
+        memberDataString,
+        this.password,
+      );
+
+      // Get headers for authentication
+      const headers = await getHeaders(this.activeDid);
+
+      // Encrypt the member data
+      const postResult = await this.axios.post(
+        this.apiServer + "/api/partner/groupOnboardMember",
+        {
+          groupId: this.selectedMeeting.groupId,
+          content: encryptedMemberData,
+        },
+        { headers },
+      );
+
+      if (postResult.data && postResult.data.success) {
+        // Navigate to members view with password and groupId
+        (this.$router as Router).push({
+          name: "onboard-meeting-members",
+          params: {
+            groupId: this.selectedMeeting.groupId.toString(),
+          },
+          query: {
+            password: this.password,
+            memberId: postResult.data.memberId,
+          },
+        });
+
+        this.cancelPasswordDialog();
+      } else {
+        throw { response: postResult };
+      }
+    } catch (error) {
+      logConsoleAndDb(
+        "Error joining meeting: " + errorStringForLog(error),
+        true,
+      );
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text:
+            serverMessageForUser(error) || "You failed to join the meeting.",
+        },
+        5000,
+      );
+    }
+  }
+
+  async leaveMeeting() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Leave Meeting",
+        text: "Are you sure you want to leave this meeting?",
+        onYes: async () => {
+          try {
+            const headers = await getHeaders(this.activeDid);
+            await this.axios.delete(
+              this.apiServer + "/api/partner/groupOnboardMember",
+              { headers },
+            );
+
+            this.attendingMeeting = null;
+            await this.fetchMeetings();
+
+            this.$notify(
+              {
+                group: "alert",
+                type: "success",
+                title: "Success",
+                text: "You left the meeting.",
+              },
+              5000,
+            );
+          } catch (error) {
+            logConsoleAndDb(
+              "Error leaving meeting: " + errorStringForLog(error),
+              true,
+            );
+            this.$notify(
+              {
+                group: "alert",
+                type: "danger",
+                title: "Error",
+                text:
+                  serverMessageForUser(error) ||
+                  "You failed to leave the meeting.",
+              },
+              5000,
+            );
+          }
+        },
+      },
+      -1,
+    );
+  }
+}
+</script>

src/views/OnboardMeetingMembersView.vue

@@ -0,0 +1,216 @@
+<template>
+  <QuickNav selected="Contacts" />
+  <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 mb-8">
+      Meeting Members
+    </h1>
+
+    <!-- Loading Animation -->
+    <div
+      class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
+      v-if="isLoading"
+    >
+      <fa icon="spinner" class="fa-spin-pulse"></fa>
+    </div>
+
+    <!-- Error State -->
+    <div v-else-if="errorMessage">
+      <div class="text-center text-red-600 py-8">
+        {{ errorMessage }}
+      </div>
+      <div class="text-center">
+        For authorization, wait for your meeting organizer to approve you.
+      </div>
+    </div>
+
+    <!-- Members List -->
+    <MembersList v-else :password="password" @error="handleError" />
+  </section>
+
+  <UserNameDialog
+    ref="userNameDialog"
+    :callback-on-cancel="true"
+    sharing-explanation="This is encrypted and shared only with people in this meeting."
+  />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { RouteLocation } from "vue-router";
+
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+import MembersList from "@/components/MembersList.vue";
+import UserNameDialog from "@/components/UserNameDialog.vue";
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
+import { encryptMessage } from "@/libs/crypto";
+import {
+  errorStringForLog,
+  getHeaders,
+  serverMessageForUser,
+} from "@/libs/endorserServer";
+import { generateSaveAndActivateIdentity } from "@/libs/util";
+
+@Component({
+  components: {
+    QuickNav,
+    TopMessage,
+    MembersList,
+    UserNameDialog,
+  },
+})
+export default class OnboardMeetingMembersView extends Vue {
+  activeDid = "";
+  apiServer = "";
+  errorMessage = "";
+  firstName = "";
+  isRegistered = false;
+  isLoading = true;
+
+  $refs!: {
+    userNameDialog: InstanceType<typeof UserNameDialog>;
+  };
+
+  get groupId(): string {
+    return (this.$route as RouteLocation).params.groupId as string;
+  }
+
+  get password(): string {
+    return (this.$route as RouteLocation).query.password as string;
+  }
+
+  async created() {
+    if (!this.groupId) {
+      this.errorMessage = "The group info is missing. Go back and try again.";
+      return;
+    }
+    if (!this.password) {
+      this.errorMessage = "The password is missing. Go back and try again.";
+      return;
+    }
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.apiServer = settings.apiServer || "";
+    this.firstName = settings.firstName || "";
+    this.isRegistered = settings.isRegistered || false;
+    try {
+      if (!this.activeDid) {
+        this.activeDid = await generateSaveAndActivateIdentity();
+        this.isRegistered = false;
+      }
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.get(
+        `${this.apiServer}/api/partner/groupOnboardMember`,
+        { headers },
+      );
+      const member = response.data?.data;
+      if (!member) {
+        if (!this.firstName) {
+          this.$refs.userNameDialog.open(this.addMemberToMeeting);
+          // addMemberToMeeting sets isLoading to false
+        } else {
+          await this.addMemberToMeeting(this.firstName);
+          // addMemberToMeeting sets isLoading to false
+        }
+      } else if (String(member.groupId) !== this.groupId) {
+        this.errorMessage =
+          "You are already in a different meeting. Reload or go back and try again.";
+        this.isLoading = false;
+      } else {
+        // must be already in the right meeting
+        if (!this.firstName) {
+          this.$refs.userNameDialog.open(this.updateMemberInMeeting);
+          // updateMemberInMeeting sets isLoading to false
+        } else {
+          await this.updateMemberInMeeting(this.firstName);
+          // updateMemberInMeeting sets isLoading to false
+        }
+      }
+    } catch (error) {
+      this.errorMessage =
+        serverMessageForUser(error) ||
+        "There was an error checking for that meeting. Reload or go back and try again.";
+      logConsoleAndDb(
+        "Error checking meeting: " + errorStringForLog(error),
+        true,
+      );
+      this.isLoading = false;
+    }
+  }
+
+  async addMemberToMeeting(name?: string) {
+    if (name != null) {
+      this.firstName = name;
+    }
+
+    const memberData = {
+      name: this.firstName,
+      did: this.activeDid,
+      isRegistered: this.isRegistered,
+    };
+    const memberDataString = JSON.stringify(memberData);
+    const encryptedMemberData = await encryptMessage(
+      memberDataString,
+      this.password,
+    );
+
+    const headers = await getHeaders(this.activeDid);
+    try {
+      await this.axios.post(
+        `${this.apiServer}/api/partner/groupOnboardMember`,
+        { groupId: this.groupId, content: encryptedMemberData },
+        { headers },
+      );
+    } catch (error) {
+      logConsoleAndDb(
+        "Error adding member to meeting: " + errorStringForLog(error),
+        true,
+      );
+      this.errorMessage =
+        serverMessageForUser(error) ||
+        "You're not in a meeting and couldn't be added to this one. Reload or go back and try again.";
+    }
+    this.isLoading = false;
+  }
+
+  async updateMemberInMeeting(name?: string) {
+    if (name != null) {
+      this.firstName = name;
+    }
+    const memberData = {
+      name: this.firstName,
+      did: this.activeDid,
+      isRegistered: this.isRegistered,
+    };
+    const memberDataString = JSON.stringify(memberData);
+    const encryptedMemberData = await encryptMessage(
+      memberDataString,
+      this.password,
+    );
+    const headers = await getHeaders(this.activeDid);
+    try {
+      await this.axios.put(
+        `${this.apiServer}/api/partner/groupOnboardMember`,
+        { content: encryptedMemberData },
+        { headers },
+      );
+    } catch (error) {
+      logConsoleAndDb(
+        "Error updating member in meeting: " + errorStringForLog(error),
+        true,
+      );
+      this.errorMessage =
+        serverMessageForUser(error) ||
+        "There was an error updating your name. Reload or go back and try again.";
+    }
+    this.isLoading = false;
+  }
+
+  handleError(message: string) {
+    this.errorMessage = message;
+  }
+}
+</script>

src/views/OnboardMeetingSetupView.vue

@@ -0,0 +1,673 @@
+<template>
+  <QuickNav selected="Contacts" />
+  <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">
+      Onboarding Meeting
+    </h1>
+
+    <!-- Existing Meeting Section -->
+    <div
+      v-if="!isLoading && currentMeeting != null && !isInEditOrCreateMode()"
+      class="mt-8 p-4 border rounded-lg bg-white shadow"
+    >
+      <div class="flex items-center justify-between mb-4">
+        <div class="flex items-center">
+          <h2 class="text-2xl">Current Meeting</h2>
+          <button
+            @click="startEditing"
+            class="mb-4 text-blue-600 hover:text-blue-800 transition-colors duration-200 ml-2"
+            title="Edit Meeting"
+          >
+            <fa icon="pen" class="fa-fw" />
+            <span class="sr-only">{{
+              isInCreateMode() ? "Create Meeting" : "Edit Meeting"
+            }}</span>
+          </button>
+        </div>
+        <button
+          @click="confirmDelete"
+          class="text-red-600 hover:text-red-800 transition-colors duration-200"
+          :disabled="isDeleting"
+          :class="{ 'opacity-50 cursor-not-allowed': isDeleting }"
+          title="Delete Meeting"
+        >
+          <fa icon="trash-can" class="fa-fw" />
+          <span class="sr-only">{{
+            isDeleting ? "Deleting..." : "Delete Meeting"
+          }}</span>
+        </button>
+      </div>
+      <div class="space-y-2">
+        <p><strong>Name:</strong> {{ currentMeeting.name }}</p>
+        <p>
+          <strong>Expires:</strong>
+          {{ formatExpirationTime(currentMeeting.expiresAt) }}
+        </p>
+
+        <div v-if="currentMeeting.password" class="mt-4">
+          <p class="text-gray-600">
+            Share the password with the people you want to onboard.
+          </p>
+        </div>
+        <div v-else class="text-red-600">
+          Your copy of the password is not saved. Edit the meeting, or delete it
+          and create a new meeting.
+        </div>
+      </div>
+    </div>
+
+    <!-- Delete Confirmation Dialog -->
+    <div
+      v-if="showDeleteConfirm"
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4"
+    >
+      <div class="bg-white rounded-lg p-6 max-w-sm w-full">
+        <h3 class="text-lg font-medium mb-4">Delete Meeting?</h3>
+        <p class="text-gray-600 mb-6">
+          This action cannot be undone. Are you sure you want to delete this
+          meeting?
+        </p>
+        <div class="flex justify-between space-x-4">
+          <button
+            @click="showDeleteConfirm = false"
+            class="px-4 py-2 bg-slate-500 text-white rounded hover:bg-slate-700"
+          >
+            Cancel
+          </button>
+          <button
+            @click="deleteMeeting"
+            class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Create/Edit Meeting Form -->
+    <div
+      v-if="
+        !isLoading &&
+        isInEditOrCreateMode() &&
+        newOrUpdatedMeeting != null /* duplicate check is for typechecks */
+      "
+      class="mt-8"
+    >
+      <h2 class="text-2xl mb-4">
+        {{ isInCreateMode() ? "Create New Meeting" : "Edit Meeting" }}
+      </h2>
+      <!-- This is my first form. Not sure if I like it; will see if the browser benefits extend to the native app. -->
+      <form
+        @submit.prevent="isInCreateMode() ? createMeeting() : updateMeeting()"
+        class="space-y-4"
+      >
+        <div>
+          <label
+            for="meetingName"
+            class="block text-sm font-medium text-gray-700"
+            >Meeting Name</label
+          >
+          <input
+            id="meetingName"
+            v-model="newOrUpdatedMeeting.name"
+            type="text"
+            required
+            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
+            placeholder="Enter meeting name"
+          />
+        </div>
+
+        <div>
+          <label
+            for="expirationTime"
+            class="block text-sm font-medium text-gray-700"
+            >Meeting Expiration Time</label
+          >
+          <input
+            id="expirationTime"
+            v-model="newOrUpdatedMeeting.expiresAt"
+            type="datetime-local"
+            required
+            :min="minDateTime"
+            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
+          />
+        </div>
+
+        <div>
+          <label for="password" class="block text-sm font-medium text-gray-700"
+            >Meeting Password</label
+          >
+          <input
+            id="password"
+            v-model="newOrUpdatedMeeting.password"
+            type="text"
+            required
+            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
+            placeholder="Enter meeting password"
+          />
+        </div>
+
+        <div>
+          <label for="userName" class="block text-sm font-medium text-gray-700"
+            >Your Name</label
+          >
+          <input
+            id="userName"
+            v-model="newOrUpdatedMeeting.userFullName"
+            type="text"
+            required
+            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
+            placeholder="Your name"
+          />
+        </div>
+
+        <button
+          type="submit"
+          class="w-full bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md hover:from-green-500 hover:to-green-800"
+          :disabled="isLoading"
+        >
+          {{
+            isLoading
+              ? isInCreateMode()
+                ? "Creating..."
+                : "Updating..."
+              : isInCreateMode()
+                ? "Create Meeting"
+                : "Update Meeting"
+          }}
+        </button>
+        <button
+          v-if="isInEditOrCreateMode()"
+          type="button"
+          @click="cancelEditing"
+          class="w-full bg-slate-500 text-white px-4 py-2 rounded-md hover:bg-slate-600"
+        >
+          Cancel
+        </button>
+      </form>
+    </div>
+
+    <!-- Members Section -->
+    <div
+      v-if="!isLoading && currentMeeting != null && !!currentMeeting.password"
+      class="mt-8 p-4 border rounded-lg bg-white shadow"
+    >
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-2xl">Meeting Members</h2>
+      </div>
+      <router-link
+        v-if="!!currentMeeting.password"
+        :to="onboardMeetingMembersLink()"
+        class="inline-block text-blue-600"
+        target="_blank"
+      >
+        &bull; Open shortcut page for members <fa icon="external-link" />
+      </router-link>
+
+      <MembersList
+        :password="currentMeeting.password || ''"
+        :show-organizer-tools="true"
+        @error="handleMembersError"
+        class="mt-4"
+      />
+    </div>
+
+    <div v-else-if="isLoading">
+      <div class="flex justify-center items-center h-full">
+        <fa icon="spinner" class="fa-spin-pulse" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+import MembersList from "@/components/MembersList.vue";
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
+import {
+  errorStringForLog,
+  getHeaders,
+  serverMessageForUser,
+} from "@/libs/endorserServer";
+import { encryptMessage } from "@/libs/crypto";
+
+interface ServerMeeting {
+  groupId: number; // from the server
+  name: string; // from the server
+  expiresAt: string; // from the server
+  userFullName?: string; // from the user's session
+  password?: string; // from the user's session
+}
+
+interface MeetingSetupInfo {
+  name: string;
+  expiresAt: string;
+  userFullName: string;
+  password: string;
+}
+
+@Component({
+  components: {
+    QuickNav,
+    TopMessage,
+    MembersList,
+  },
+})
+export default class OnboardMeetingView extends Vue {
+  $notify!: (
+    notification: { group: string; type: string; title: string; text: string },
+    timeout?: number,
+  ) => void;
+
+  currentMeeting: ServerMeeting | null = null;
+  newOrUpdatedMeeting: MeetingSetupInfo | null = null;
+  activeDid = "";
+  apiServer = "";
+  isDeleting = false;
+  isLoading = true;
+  isRegistered = false;
+  showDeleteConfirm = false;
+  fullName = "";
+  get minDateTime() {
+    const now = new Date();
+    now.setMinutes(now.getMinutes() + 5); // Set minimum 5 minutes in the future
+    return this.formatDateForInput(now);
+  }
+
+  async created() {
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.apiServer = settings.apiServer || "";
+    this.fullName = settings.firstName || "";
+    this.isRegistered = !!settings.isRegistered;
+
+    await this.fetchCurrentMeeting();
+    this.isLoading = false;
+  }
+
+  isInCreateMode(): boolean {
+    return this.newOrUpdatedMeeting != null && this.currentMeeting == null;
+  }
+
+  isInEditOrCreateMode(): boolean {
+    return this.newOrUpdatedMeeting != null;
+  }
+
+  getDefaultExpirationTime(): string {
+    const date = new Date();
+    // Round up to the next hour
+    date.setMinutes(0);
+    date.setSeconds(0);
+    date.setMilliseconds(0);
+    date.setHours(date.getHours() + 1); // Round up to next hour
+    date.setHours(date.getHours() + 2); // Add 2 more hours
+    return this.formatDateForInput(date);
+  }
+
+  // Format a date object to YYYY-MM-DDTHH:mm format for datetime-local input
+  private formatDateForInput(date: Date): string {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+
+    return `${year}-${month}-${day}T${hours}:${minutes}`;
+  }
+
+  blankMeeting(): MeetingSetupInfo {
+    return {
+      // no groupId yet
+      name: "",
+      expiresAt: this.getDefaultExpirationTime(),
+      userFullName: this.fullName,
+      password: (this.currentMeeting?.password as string) || "",
+    };
+  }
+
+  async fetchCurrentMeeting() {
+    try {
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.get(
+        this.apiServer + "/api/partner/groupOnboard",
+        { headers },
+      );
+
+      if (response?.data?.data) {
+        this.currentMeeting = {
+          ...response.data.data,
+          userFullName: this.fullName,
+          password: this.currentMeeting?.password || "",
+        };
+      } else {
+        // no meeting found
+        this.newOrUpdatedMeeting = this.blankMeeting();
+      }
+    } catch (error) {
+      // no meeting found
+      this.newOrUpdatedMeeting = this.blankMeeting();
+    }
+  }
+
+  async createMeeting() {
+    this.isLoading = true;
+
+    try {
+      if (!this.newOrUpdatedMeeting) {
+        throw Error(
+          "There was no meeting data to create. We should never get here.",
+        );
+      }
+
+      // Convert local time to UTC for comparison and server submission
+      const localExpiresAt = new Date(this.newOrUpdatedMeeting.expiresAt);
+      const now = new Date();
+      if (localExpiresAt <= now) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "warning",
+            title: "Invalid Time",
+            text: "Select a future time for the meeting expiration.",
+          },
+          5000,
+        );
+        return;
+      }
+      if (!this.newOrUpdatedMeeting.userFullName) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "warning",
+            title: "Invalid Name",
+            text: "Please enter your name.",
+          },
+          5000,
+        );
+        return;
+      }
+      if (!this.newOrUpdatedMeeting.password) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "warning",
+            title: "Invalid Password",
+            text: "Please enter a password.",
+          },
+          5000,
+        );
+        return;
+      }
+
+      // create content with user's name and DID encrypted with password
+      const content = {
+        name: this.newOrUpdatedMeeting.userFullName,
+        did: this.activeDid,
+        isRegistered: this.isRegistered,
+      };
+      const encryptedContent = await encryptMessage(
+        JSON.stringify(content),
+        this.newOrUpdatedMeeting.password,
+      );
+
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.post(
+        this.apiServer + "/api/partner/groupOnboard",
+        {
+          name: this.newOrUpdatedMeeting.name,
+          expiresAt: localExpiresAt.toISOString(),
+          content: encryptedContent,
+        },
+        { headers },
+      );
+
+      if (response.data && response.data.success) {
+        this.currentMeeting = {
+          ...this.newOrUpdatedMeeting,
+          groupId: response.data.success.groupId,
+        };
+
+        this.newOrUpdatedMeeting = null;
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Success",
+            text: "Meeting created.",
+          },
+          3000,
+        );
+      } else {
+        throw { response: response };
+      }
+    } catch (error) {
+      logConsoleAndDb(
+        "Error creating meeting: " + errorStringForLog(error),
+        true,
+      );
+      const errorMessage = serverMessageForUser(error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text:
+            errorMessage ||
+            "Failed to create meeting. Try reloading or submitting again.",
+        },
+        5000,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  formatExpirationTime(expiresAt: string): string {
+    const expiration = new Date(expiresAt); // Server time is in UTC
+    const now = new Date();
+    const diffHours = Math.round(
+      (expiration.getTime() - now.getTime()) / (1000 * 60 * 60),
+    );
+
+    if (diffHours < 0) {
+      return "Expired";
+    } else if (diffHours < 1) {
+      return "Less than an hour";
+    } else if (diffHours === 1) {
+      return "1 hour";
+    } else {
+      return `${diffHours} hours`;
+    }
+  }
+
+  confirmDelete() {
+    this.showDeleteConfirm = true;
+  }
+
+  async deleteMeeting() {
+    this.isDeleting = true;
+    try {
+      const headers = await getHeaders(this.activeDid);
+      await this.axios.delete(this.apiServer + "/api/partner/groupOnboard", {
+        headers,
+      });
+
+      this.currentMeeting = null;
+      this.newOrUpdatedMeeting = this.blankMeeting();
+      this.showDeleteConfirm = false;
+
+      this.$notify(
+        {
+          group: "alert",
+          type: "success",
+          title: "Success",
+          text: "Meeting deleted successfully.",
+        },
+        3000,
+      );
+    } catch (error) {
+      console.error("Error deleting meeting:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: serverMessageForUser(error) || "Failed to delete meeting.",
+        },
+        5000,
+      );
+    } finally {
+      this.isDeleting = false;
+    }
+  }
+
+  startEditing() {
+    // Populate form with existing meeting data
+    if (this.currentMeeting) {
+      const localExpiresAt = new Date(this.currentMeeting.expiresAt);
+      this.newOrUpdatedMeeting = {
+        name: this.currentMeeting.name,
+        expiresAt: this.formatDateForInput(localExpiresAt),
+        userFullName: this.currentMeeting.userFullName || "",
+        password: this.currentMeeting.password || "",
+      };
+    } else {
+      console.error(
+        "There is no current meeting to edit. We should never get here.",
+      );
+    }
+  }
+
+  cancelEditing() {
+    // Reset form data
+    this.newOrUpdatedMeeting = null;
+  }
+
+  async updateMeeting() {
+    this.isLoading = true;
+    if (!this.newOrUpdatedMeeting) {
+      throw Error("There was no meeting data to update.");
+    }
+
+    try {
+      // Convert local time to UTC for comparison and server submission
+      const localExpiresAt = new Date(this.newOrUpdatedMeeting.expiresAt);
+      const now = new Date();
+      if (localExpiresAt <= now) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "warning",
+            title: "Invalid Time",
+            text: "Select a future time for the meeting expiration.",
+          },
+          5000,
+        );
+        return;
+      }
+      if (!this.newOrUpdatedMeeting.userFullName) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "warning",
+            title: "Invalid Name",
+            text: "Please enter your name.",
+          },
+          5000,
+        );
+        return;
+      }
+      if (!this.newOrUpdatedMeeting.password) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "warning",
+            title: "Invalid Password",
+            text: "Please enter a password.",
+          },
+          5000,
+        );
+        return;
+      }
+      // create content with user's name and DID encrypted with password
+      const content = {
+        name: this.newOrUpdatedMeeting.userFullName,
+        did: this.activeDid,
+        isRegistered: this.isRegistered,
+      };
+      const encryptedContent = await encryptMessage(
+        JSON.stringify(content),
+        this.newOrUpdatedMeeting.password,
+      );
+
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.put(
+        this.apiServer + "/api/partner/groupOnboard",
+        {
+          // the groupId is in the currentMeeting but it's not necessary while users only have one meeting
+          name: this.newOrUpdatedMeeting.name,
+          expiresAt: localExpiresAt.toISOString(),
+          content: encryptedContent,
+        },
+        { headers },
+      );
+
+      if (response.data && response.data.success) {
+        // Update the current meeting with only the necessary fields
+        this.currentMeeting = {
+          ...this.newOrUpdatedMeeting,
+          groupId: (this.currentMeeting?.groupId as number) || -1,
+        };
+        this.newOrUpdatedMeeting = null;
+      } else {
+        throw { response: response };
+      }
+    } catch (error) {
+      logConsoleAndDb(
+        "Error updating meeting: " + errorStringForLog(error),
+        true,
+      );
+      const errorMessage = serverMessageForUser(error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text:
+            errorMessage ||
+            "Failed to update meeting. Try reloading or submitting again.",
+        },
+        5000,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  onboardMeetingMembersLink(): string {
+    if (this.currentMeeting) {
+      return `/onboard-meeting-members/${this.currentMeeting?.groupId}?password=${encodeURIComponent(
+        this.currentMeeting?.password || "",
+      )}`;
+    }
+    return "";
+  }
+
+  handleMembersError(message: string) {
+    this.$notify(
+      {
+        group: "alert",
+        type: "danger",
+        title: "Error",
+        text: message,
+      },
+      5000,
+    );
+  }
+}
+</script>

src/views/ProjectsView.vue

@@ -1,15 +1,17 @@
 <template>
-  <QuickNav selected="Projects"></QuickNav>
+  <QuickNav selected="Projects" />
   <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">
+    <h1 id="ViewHeading" class="text-4xl text-center font-light">
-      Your Ideas
+      Your Project Ideas
     </h1>
 
+    <OnboardingDialog ref="onboardingDialog" />
+
     <!-- Result Tabs -->
-    <div class="text-center text-slate-500 border-b border-slate-300">
+    <div class="text-center text-slate-500 border-b border-slate-300 mt-8">
       <ul class="flex flex-wrap justify-center gap-4 -mb-px">
         <li>
           <a
@@ -63,7 +65,7 @@
     <!-- New Project -->
     <button
       v-if="isRegistered && showProjects"
-      class="fixed right-6 top-24 text-center text-4xl leading-none bg-blue-600 text-white w-14 py-2.5 rounded-full"
+      class="fixed right-6 top-24 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full"
       @click="onClickNewProject()"
     >
       <fa icon="plus" class="fa-fw"></fa>
@@ -152,7 +154,10 @@
                       <span
                         v-if="offer.amountGivenConfirmed >= offer.amountGiven"
                       >
-                        <!-- no need for green icon; unnecessary if there's already a green, confusing if there's a yellow -->
+                        <!--
+                         There's no need for a green icon:
+                         it's unnecessary if there's already a green, and confusing if there's a yellow.
+                        -->
                         all
                       </span>
                       <span v-else>
@@ -206,10 +211,19 @@
           Hit the big
           <fa
             icon="plus"
-            class="bg-blue-600 text-white px-1 py-1 rounded-full"
+            class="bg-green-600 text-white px-1.5 py-1 rounded-full"
           />
           button. You'll never know until you try.
         </div>
+        <div v-else>
+          <button
+            @click="showNameThenIdDialog()"
+            class="text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
+          >
+            Get someone to onboard you.
+          </button>
+          <UserNameDialog ref="userNameDialog" />
+        </div>
       </div>
       <ul id="listProjects" class="border-t border-slate-300">
         <li
@@ -249,13 +263,15 @@ import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import EntityIcon from "@/components/EntityIcon.vue";
-import * as libsUtil from "@/libs/util";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
+import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
 import TopMessage from "@/components/TopMessage.vue";
+import UserNameDialog from "@/components/UserNameDialog.vue";
+import { Contact } from "@/db/tables/contacts";
 import {
   didInfo,
   getHeaders,
@@ -263,11 +279,19 @@ import {
   OfferSummaryRecord,
   PlanData,
 } from "@/libs/endorserServer";
-import EntityIcon from "@/components/EntityIcon.vue";
+import * as libsUtil from "@/libs/util";
-import { Contact } from "@/db/tables/contacts";
+import { OnboardPage } from "@/libs/util";
 
 @Component({
-  components: { EntityIcon, InfiniteScroll, QuickNav, ProjectIcon, TopMessage },
+  components: {
+    EntityIcon,
+    InfiniteScroll,
+    QuickNav,
+    OnboardingDialog,
+    ProjectIcon,
+    TopMessage,
+    UserNameDialog,
+  },
 })
 export default class ProjectsView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
@@ -282,36 +306,41 @@ export default class ProjectsView extends Vue {
   allContacts: Array<Contact> = [];
   allMyDids: Array<string> = [];
   apiServer = "";
-  projects: PlanData[] = [];
+  givenName = "";
   isLoading = false;
   isRegistered = false;
   offers: OfferSummaryRecord[] = [];
   projectNameFromHandleId: Record<string, string> = {}; // mapping from handleId to description
-  showOffers = true;
+  projects: PlanData[] = [];
-  showProjects = false;
+  showOffers = false;
+  showProjects = true;
 
   libsUtil = libsUtil;
   didInfo = didInfo;
 
   async mounted() {
     try {
-      await db.open();
+      const settings = await retrieveSettingsForActiveAccount();
-      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+      this.activeDid = settings.activeDid || "";
-      this.activeDid = (settings?.activeDid as string) || "";
+      this.apiServer = settings.apiServer || "";
-      this.apiServer = (settings?.apiServer as string) || "";
+      this.isRegistered = !!settings.isRegistered;
-      this.isRegistered = !!settings?.isRegistered;
+      this.givenName = settings.firstName || "";
 
       this.allContacts = await db.contacts.toArray();
 
-      await accountsDB.open();
+      this.allMyDids = await libsUtil.retrieveAccountDids();
-      const allAccounts = await accountsDB.accounts.toArray();
-      this.allMyDids = allAccounts.map((acc) => acc.did);
 
-      if (allAccounts.length === 0) {
+      if (!settings.finishedOnboarding) {
+        (this.$refs.onboardingDialog as OnboardingDialog).open(
+          OnboardPage.Create,
+        );
+      }
+
+      if (this.allMyDids.length === 0) {
         console.error("No accounts found.");
         this.errNote("You need an identifier to load your projects.");
       } else {
-        await this.loadOffers();
+        await this.loadProjects();
       }
     } catch (err) {
       console.error("Error initializing:", err);
@@ -326,20 +355,20 @@ export default class ProjectsView extends Vue {
    **/
   async projectDataLoader(url: string) {
     try {
-      const headers = await getHeaders(this.activeDid);
+      const headers = await getHeaders(this.activeDid, this.$notify);
       this.isLoading = true;
       const resp = await this.axios.get(url, { headers } as AxiosRequestConfig);
       if (resp.status === 200 && resp.data.data) {
         const plans: PlanData[] = resp.data.data;
         for (const plan of plans) {
-          const { name, description, handleId, image, issuerDid, rowid } = plan;
+          const { name, description, handleId, image, issuerDid, rowId } = plan;
           this.projects.push({
             name,
             description,
             image,
             handleId,
             issuerDid,
-            rowid,
+            rowId,
           });
         }
       } else {
@@ -366,7 +395,7 @@ export default class ProjectsView extends Vue {
   async loadMoreProjectData(payload: boolean) {
     if (this.projects.length > 0 && payload) {
       const latestProject = this.projects[this.projects.length - 1];
-      await this.loadProjects(`beforeId=${latestProject.rowid}`);
+      await this.loadProjects(`beforeId=${latestProject.rowId}`);
     }
   }
 
@@ -385,7 +414,6 @@ export default class ProjectsView extends Vue {
    * @param id of the project
    **/
   onClickLoadProject(id: string) {
-    localStorage.setItem("projectId", id);
     const route = {
       path: "/project/" + encodeURIComponent(id),
     };
@@ -396,7 +424,6 @@ export default class ProjectsView extends Vue {
    * Handling clicking on the new project button
    **/
   onClickNewProject(): void {
-    localStorage.removeItem("projectId");
     const route = {
       name: "new-edit-project",
     };
@@ -432,18 +459,8 @@ export default class ProjectsView extends Vue {
               this.activeDid,
             );
             const projectName = project?.name as string;
-            console.log(
-              "now have name for",
-              offer.fulfillsPlanHandleId,
-              projectName,
-            );
             this.projectNameFromHandleId[offer.fulfillsPlanHandleId] =
               projectName;
-            console.log(
-              "now have a real name for",
-              offer.fulfillsPlanHandleId,
-              this.projectNameFromHandleId[offer.fulfillsPlanHandleId],
-            );
           }
           this.offers = this.offers.concat([offer]);
         }
@@ -458,9 +475,9 @@ export default class ProjectsView extends Vue {
             group: "alert",
             type: "danger",
             title: "Error",
-            text: "Failed to get offers from the server. Try again later.",
+            text: "Failed to get offers from the server.",
           },
-          -1,
+          5000,
         );
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -473,7 +490,7 @@ export default class ProjectsView extends Vue {
           title: "Error",
           text: "Got an error loading offers.",
         },
-        -1,
+        5000,
       );
     } finally {
       this.isLoading = false;
@@ -501,6 +518,37 @@ export default class ProjectsView extends Vue {
     await this.offerDataLoader(url);
   }
 
+  showNameThenIdDialog() {
+    if (!this.givenName) {
+      (this.$refs.userNameDialog as UserNameDialog).open(() => {
+        this.promptForShareMethod();
+      });
+    } else {
+      this.promptForShareMethod();
+    }
+  }
+
+  promptForShareMethod() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Are you nearby with cameras?",
+        text: "If so, we'll use those with QR codes to share.",
+        onCancel: async () => {},
+        onNo: async () => {
+          (this.$router as Router).push({ name: "share-my-contact-info" });
+        },
+        onYes: async () => {
+          (this.$router as Router).push({ name: "contact-qr" });
+        },
+        noText: "we will share another way",
+        yesText: "we are nearby with cameras",
+      },
+      -1,
+    );
+  }
+
   public computedOfferTabClassNames() {
     return {
       "inline-block": true,

src/views/QuickActionBvcBeginView.vue

@@ -67,12 +67,13 @@
 <script lang="ts">
 import axios from "axios";
 import { DateTime } from "luxon";
+import { Router } from "vue-router";
 import { Component, Vue } from "vue-facing-decorator";
 
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import { NotificationIface } from "@/constants/app";
-import { db } from "@/db/index";
+import { retrieveSettingsForActiveAccount } from "@/db/index";
 import {
   BVC_MEETUPS_PROJECT_CLAIM_ID,
   bvcMeetingJoinClaim,
@@ -80,7 +81,6 @@ import {
   createAndSubmitGive,
 } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 
 @Component({
   components: {
@@ -117,10 +117,9 @@ export default class QuickActionBvcBeginView extends Vue {
   }
 
   async record() {
-    await db.open();
+    const settings = await retrieveSettingsForActiveAccount();
-    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+    const activeDid = settings.activeDid || "";
-    const activeDid = settings?.activeDid || "";
+    const apiServer = settings.apiServer || "";
-    const apiServer = settings?.apiServer || "";
 
     try {
       const hoursNum = libsUtil.numberOrZero(this.hoursStr);
@@ -202,6 +201,7 @@ export default class QuickActionBvcBeginView extends Vue {
           },
           3000,
         );
+        (this.$router as Router).push({ path: "/quick-action-bvc" });
       }
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/views/QuickActionBvcEndView.vue

@@ -22,7 +22,7 @@
     <div>
       <h2 class="text-2xl m-2">Confirm</h2>
       <div v-if="loadingConfirms" class="flex justify-center">
-        <fa icon="spinner" class="animate-spin" />
+        <fa icon="spinner" class="fa-spin-pulse" />
       </div>
       <div v-else-if="claimsToConfirm.length === 0">
         There are no claims yet today for you to confirm.
@@ -97,7 +97,7 @@
       <h2 class="text-2xl m-2">Anything else?</h2>
       <div class="m-2 flex">
         <input type="checkbox" v-model="someoneGave" class="h-6 w-6" />
-        <span class="pb-2 pl-2 pr-2">Someone else gave</span>
+        <span class="pb-2 pl-2 pr-2">The group provided</span>
         <span v-if="someoneGave">
           <input
             type="text"
@@ -106,7 +106,8 @@
             class="border border-slate-400 h-6 px-2"
           />
           <br />
-          (Everyone likes personalized messages! 😁)
+          (Everyone likes personalized messages! 😁 ... and for a pic:
+          <input type="checkbox" v-model="supplyGiftDetails" />)
         </span>
         <!-- This is to match input height to avoid shifting when hiding & showing. -->
         <span v-else class="h-6">...</span>
@@ -144,9 +145,12 @@ import { Router } from "vue-router";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db } from "@/db/index";
+import {
+  accountsDBPromise,
+  db,
+  retrieveSettingsForActiveAccount,
+} from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import {
   BVC_MEETUPS_PROJECT_CLAIM_ID,
   claimSpecialDescription,
@@ -180,17 +184,16 @@ export default class QuickActionBvcBeginView extends Vue {
   description = "breakfast";
   loadingConfirms = true;
   someoneGave = false;
+  supplyGiftDetails = false;
 
   async created() {
-    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();
-  }
-
-  async mounted() {
     this.loadingConfirms = true;
+
+    const settings = await retrieveSettingsForActiveAccount();
+    this.apiServer = settings.apiServer || "";
+    this.activeDid = settings.activeDid || "";
+    this.allContacts = await db.contacts.toArray();
+
     let currentOrPreviousSat = DateTime.now().setZone("America/Denver");
     if (currentOrPreviousSat.weekday < 6) {
       // it's not Saturday or Sunday,
@@ -208,6 +211,7 @@ export default class QuickActionBvcBeginView extends Vue {
         suppressMilliseconds: true,
       }) || "";
 
+    const accountsDB = await accountsDBPromise;
     await accountsDB.open();
     const allAccounts = await accountsDB.accounts.toArray();
     this.allMyDids = allAccounts.map((acc) => acc.did);
@@ -265,7 +269,9 @@ export default class QuickActionBvcBeginView extends Vue {
 
   async record() {
     try {
-      this.$notify({ group: "alert", type: "toast", title: "Sent..." }, 1000);
+      if (this.claimsToConfirmSelected.length > 0) {
+        this.$notify({ group: "alert", type: "toast", title: "Sent..." }, 1000);
+      }
 
       // in parallel, make a confirmation for each selected claim and send them all to the server
       const confirmResults = await Promise.allSettled(
@@ -307,7 +313,7 @@ export default class QuickActionBvcBeginView extends Vue {
 
       // now send the give for the description
       let giveSucceeded = false;
-      if (this.someoneGave) {
+      if (this.someoneGave && !this.supplyGiftDetails) {
         const giveResult = await createAndSubmitGive(
           axios,
           this.apiServer,
@@ -317,6 +323,10 @@ export default class QuickActionBvcBeginView extends Vue {
           this.description,
           undefined,
           undefined,
+          undefined,
+          undefined,
+          false,
+          undefined,
           BVC_MEETUPS_PROJECT_CLAIM_ID,
         );
         giveSucceeded = giveResult.type === "success";
@@ -335,29 +345,60 @@ export default class QuickActionBvcBeginView extends Vue {
           );
         }
       }
-
+      if (this.someoneGave && this.supplyGiftDetails) {
-      if (confirmsSucceeded.length > 0 || giveSucceeded) {
+        // we'll give a success message for the confirmations and go to the gifted details page
-        const confirms =
+        if (confirmsSucceeded.length > 0) {
-          confirmsSucceeded.length === 1 ? "confirmation" : "confirmations";
+          const actions =
-        const actions =
+            confirmsSucceeded.length === 1
-          confirmsSucceeded.length > 0 && giveSucceeded
+              ? `Your confirmation has been recorded.`
-            ? `Your ${confirms} and that give have been recorded.`
+              : `Your confirmations have been recorded.`;
-            : giveSucceeded
+          this.$notify(
-              ? "That give has been recorded."
+            {
-              : "Your " +
+              group: "alert",
-                confirms +
+              type: "success",
-                " " +
+              title: "Success",
-                (confirmsSucceeded.length === 1 ? "has" : "have") +
+              text: actions,
-                " been recorded.";
+            },
-        this.$notify(
+            3000,
-          {
+          );
-            group: "alert",
+        }
-            type: "success",
+        (this.$router as Router).push({
-            title: "Success",
+          name: "gifted-details",
-            text: actions,
+          query: {
+            description: this.description,
+            destinationPathAfter: "/",
+            providerProjectId: BVC_MEETUPS_PROJECT_CLAIM_ID,
+            recipientDid: this.activeDid,
           },
-          3000,
+        });
-        );
+      } else {
+        // just go ahead and print a message for all the activity
+        if (confirmsSucceeded.length > 0 || giveSucceeded) {
+          const confirms =
+            confirmsSucceeded.length === 1 ? "confirmation" : "confirmations";
+          const actions =
+            confirmsSucceeded.length > 0 && giveSucceeded
+              ? `Your ${confirms} and that give have been recorded.`
+              : giveSucceeded
+                ? "That give has been recorded."
+                : "Your " +
+                  confirms +
+                  " " +
+                  (confirmsSucceeded.length === 1 ? "has" : "have") +
+                  " been recorded.";
+          this.$notify(
+            {
+              group: "alert",
+              type: "success",
+              title: "Success",
+              text: actions,
+            },
+            3000,
+          );
+          (this.$router as Router).push({ path: "/" });
+        } else {
+          // errors should have already shown
+        }
       }
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/views/RecentOffersToUserProjectsView.vue

@@ -0,0 +1,166 @@
+<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 -->
+        <fa
+          icon="chevron-left"
+          @click="$router.back()"
+          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        />
+        Offers to Your Projects
+      </h1>
+    </div>
+
+    <div v-if="newOffersToUserProjects.length === 0">
+      <p>Nobody has given any offers to your projects.</p>
+      <p class="mt-2">
+        Maybe there are already some projects you can help on the
+        <router-link to="/discover" class="text-blue-500">
+          Discover page <fa icon="search" />
+        </router-link>
+      </p>
+      <p class="mt-2">
+        You can announce more of your own on
+        <router-link to="/contacts" class="text-blue-500">
+          Your Ideas page <fa icon="hand" />
+        </router-link>
+      </p>
+    </div>
+
+    <InfiniteScroll @reached-bottom="loadMoreOffersToUserProjects">
+      <ul
+        data-testId="listRecentOffersToUserProjects"
+        class="border-t border-slate-300"
+      >
+        <li
+          v-for="offer in newOffersToUserProjects"
+          :key="offer.jwtId"
+          class="mt-4 relative group"
+        >
+          <div
+            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
+            v-if="offer.jwtId == lastAckedOfferToUserProjectsJwtId"
+          >
+            You've already seen all the following
+          </div>
+
+          <span>{{
+            didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
+          }}</span>
+          offered
+          <span v-if="offer.objectDescription">{{
+            offer.objectDescription
+          }}</span
+          >{{ offer.objectDescription && offer.amount ? ", and " : "" }}
+          <span v-if="offer.amount">{{
+            displayAmount(offer.unit, offer.amount)
+          }}</span>
+          to
+          <span>{{ offer.planName }}</span>
+          <router-link
+            :to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
+            class="text-blue-500"
+          >
+            <fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
+          </router-link>
+        </li>
+      </ul>
+    </InfiniteScroll>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+
+import EntityIcon from "@/components/EntityIcon.vue";
+import GiftedDialog from "@/components/GiftedDialog.vue";
+import InfiniteScroll from "@/components/InfiniteScroll.vue";
+import QuickNav from "@/components/QuickNav.vue";
+import { NotificationIface } from "@/constants/app";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { Contact } from "@/db/tables/contacts";
+import {
+  didInfo,
+  displayAmount,
+  getNewOffersToUserProjects,
+  OfferToPlanSummaryRecord,
+} from "@/libs/endorserServer";
+import { retrieveAccountDids } from "@/libs/util";
+
+@Component({
+  components: { EntityIcon, GiftedDialog, InfiniteScroll, QuickNav },
+})
+export default class RecentOffersToUserView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid = "";
+  allContacts: Array<Contact> = [];
+  allMyDids: string[] = [];
+  apiServer = "";
+  lastAckedOfferToUserProjectsJwtId = "";
+  newOffersToUserProjects: Array<OfferToPlanSummaryRecord> = [];
+  newOffersToUserProjectsAtEnd = false;
+
+  showOffersDetails = false;
+  showOffersToUserProjectsDetails = false;
+  didInfo = didInfo;
+  displayAmount = displayAmount;
+
+  async created() {
+    try {
+      const settings = await retrieveSettingsForActiveAccount();
+      this.apiServer = settings.apiServer || "";
+      this.activeDid = settings.activeDid || "";
+      this.lastAckedOfferToUserProjectsJwtId =
+        settings.lastAckedOfferToUserProjectsJwtId || "";
+
+      this.allContacts = await db.contacts.toArray();
+
+      this.allMyDids = await retrieveAccountDids();
+
+      const offersToUserProjectsData = await getNewOffersToUserProjects(
+        this.axios,
+        this.apiServer,
+        this.activeDid,
+        undefined,
+        undefined,
+      );
+      this.newOffersToUserProjects = offersToUserProjectsData.data;
+      this.newOffersToUserProjectsAtEnd = !offersToUserProjectsData.hitLimit;
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (err: any) {
+      console.error("Error retrieving settings & contacts:", err);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: err.message || "There was an error retrieving your activity.",
+        },
+        5000,
+      );
+    }
+  }
+
+  async loadMoreOffersToUserProjects() {
+    if (this.newOffersToUserProjectsAtEnd) {
+      return;
+    }
+    const offersToUserProjectsData = await getNewOffersToUserProjects(
+      this.axios,
+      this.apiServer,
+      this.activeDid,
+      undefined,
+      this.newOffersToUserProjects[this.newOffersToUserProjects.length - 1]
+        .jwtId,
+    );
+    this.newOffersToUserProjects.push(...offersToUserProjectsData.data);
+    this.newOffersToUserProjectsAtEnd = !offersToUserProjectsData.hitLimit;
+  }
+}
+</script>

src/views/RecentOffersToUserView.vue

@@ -0,0 +1,157 @@
+<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 -->
+        <fa
+          icon="chevron-left"
+          @click="$router.back()"
+          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        />
+        Offers to You
+      </h1>
+    </div>
+
+    <div v-if="newOffersToUser.length === 0">
+      <p>Nobody has given you an offer.</p>
+      <p class="mt-2">
+        You can start the cycle on the
+        <router-link to="/contacts" class="text-blue-500">
+          Contacts page <fa icon="users" />
+        </router-link>
+        with an "Offer" directly to someone. Hopefully you'll find a common
+        interest!
+      </p>
+    </div>
+    <InfiniteScroll @reached-bottom="loadMoreOffersToUser">
+      <ul
+        data-testId="listRecentOffersToUser"
+        class="border-t border-slate-300"
+      >
+        <li
+          v-for="offer in newOffersToUser"
+          :key="offer.jwtId"
+          class="mt-4 relative group"
+        >
+          <div
+            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
+            v-if="offer.jwtId == lastAckedOfferToUserJwtId"
+          >
+            You've already seen all the following
+          </div>
+
+          <span>{{
+            didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
+          }}</span>
+          offered
+          <span v-if="offer.objectDescription">{{
+            offer.objectDescription
+          }}</span
+          >{{ offer.objectDescription && offer.amount ? ", and " : "" }}
+          <span v-if="offer.amount">{{
+            displayAmount(offer.unit, offer.amount)
+          }}</span>
+          <router-link
+            :to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
+            class="text-blue-500"
+          >
+            <fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
+          </router-link>
+        </li>
+      </ul>
+    </InfiniteScroll>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+
+import GiftedDialog from "@/components/GiftedDialog.vue";
+import EntityIcon from "@/components/EntityIcon.vue";
+import InfiniteScroll from "@/components/InfiniteScroll.vue";
+import QuickNav from "@/components/QuickNav.vue";
+import { NotificationIface } from "@/constants/app";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { Contact } from "@/db/tables/contacts";
+import {
+  didInfo,
+  displayAmount,
+  getNewOffersToUser,
+  OfferSummaryRecord,
+} from "@/libs/endorserServer";
+import { retrieveAccountDids } from "@/libs/util";
+
+@Component({
+  components: { EntityIcon, GiftedDialog, InfiniteScroll, QuickNav },
+})
+export default class RecentOffersToUserView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid = "";
+  allContacts: Array<Contact> = [];
+  allMyDids: string[] = [];
+  apiServer = "";
+  lastAckedOfferToUserJwtId = "";
+  newOffersToUser: Array<OfferSummaryRecord> = [];
+  newOffersToUserAtEnd = false;
+
+  showOffersDetails = false;
+  showOffersToUserProjectsDetails = false;
+  didInfo = didInfo;
+  displayAmount = displayAmount;
+
+  async created() {
+    try {
+      const settings = await retrieveSettingsForActiveAccount();
+      this.apiServer = settings.apiServer || "";
+      this.activeDid = settings.activeDid || "";
+      this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId || "";
+
+      this.allContacts = await db.contacts.toArray();
+
+      this.allMyDids = await retrieveAccountDids();
+
+      const offersToUserData = await getNewOffersToUser(
+        this.axios,
+        this.apiServer,
+        this.activeDid,
+        undefined,
+        undefined,
+      );
+      this.newOffersToUser = offersToUserData.data;
+      this.newOffersToUserAtEnd = !offersToUserData.hitLimit;
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (err: any) {
+      console.error("Error retrieving settings & contacts:", err);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: err.message || "There was an error retrieving your activity.",
+        },
+        5000,
+      );
+    }
+  }
+
+  async loadMoreOffersToUser() {
+    if (this.newOffersToUserAtEnd) {
+      return;
+    }
+    const offersToUserData = await getNewOffersToUser(
+      this.axios,
+      this.apiServer,
+      this.activeDid,
+      undefined,
+      this.newOffersToUser[this.newOffersToUser.length - 1].jwtId,
+    );
+    this.newOffersToUser.push(...offersToUserData.data);
+    this.newOffersToUserAtEnd = !offersToUserData.hitLimit;
+  }
+}
+</script>

src/views/SearchAreaView.vue

@@ -26,7 +26,7 @@
       your device to run searches but it is not stored on our servers.
     </div>
 
-    <div>
+    <div class="text-center">
       <button v-if="!searchBox && !isNewMarkerSet" class="m-4 px-4 py-2">
         Click to Choose a Location for Nearby Search
       </button>
@@ -35,6 +35,7 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="storeSearchBox"
       >
+        <fa icon="save" class="fa-fw" />
         Store This Location for Nearby Search
       </button>
       <button
@@ -42,6 +43,7 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="forgetSearchBox"
       >
+        <fa icon="trash-can" class="fa-fw" />
         Delete Stored Location
       </button>
       <button
@@ -49,13 +51,15 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="resetLatLong"
       >
-        Reset Marker
+        <fa icon="rotate" class="fa-fw" />
+        Reset To Original
       </button>
       <button
         v-if="isNewMarkerSet"
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="isNewMarkerSet = false"
       >
+        <fa icon="eraser" class="fa-fw" />
         Erase Marker
       </button>
       <div v-if="isNewMarkerSet">
@@ -64,7 +68,7 @@
       </div>
     </div>
 
-    <div class="mb-4 aspect-video">
+    <div class="aspect-video">
       <l-map
         ref="map"
         :center="[localCenterLat, localCenterLong]"
@@ -109,7 +113,7 @@ import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
-import { db } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { BoundingBox, MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 
 const DEFAULT_LAT_LONG_DIFF = 0.01;
@@ -125,7 +129,7 @@ const DEFAULT_ZOOM = 2;
     LTileLayer,
   },
 })
-export default class DiscoverView extends Vue {
+export default class SearchAreaView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   isChoosingSearchBox = false;
@@ -142,9 +146,8 @@ export default class DiscoverView extends Vue {
   searchBox: { name: string; bbox: BoundingBox } | null = null;
 
   async mounted() {
-    await db.open();
+    const settings = await retrieveSettingsForActiveAccount();
-    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    this.searchBox = settings.searchBoxes?.[0] || null;
-    this.searchBox = settings?.searchBoxes?.[0] || null;
     this.resetLatLong();
   }
 
@@ -163,8 +166,10 @@ export default class DiscoverView extends Vue {
       // This doesn't seem like the right approach but it's the only way I can find to get the screen bounds.
       const bounds = event.target.boxZoom?._map?.getBounds();
       if (bounds) {
-        latDiff = Math.abs(bounds._northEast.lat - bounds._southWest.lat) / 8;
+        latDiff =
-        longDiff = Math.abs(bounds._northEast.lng - bounds._southWest.lng) / 8;
+          Math.abs(bounds.getNorthEast().lat - bounds.getSouthWest().lat) / 8;
+        longDiff =
+          Math.abs(bounds.getNorthEast().lng - bounds.getSouthWest().lng) / 8;
       }
       this.localLatDiff = latDiff;
       this.localLongDiff = longDiff;
@@ -223,7 +228,7 @@ export default class DiscoverView extends Vue {
             title: "Error Updating Search Settings",
             text: "Try going to a different page and then coming back.",
           },
-          -1,
+          5000,
         );
         console.error(
           "Telling user to retry the location search setting because:",
@@ -238,7 +243,7 @@ export default class DiscoverView extends Vue {
           title: "No Location Selected",
           text: "Select a location on the map.",
         },
-        -1,
+        5000,
       );
     }
   }
@@ -266,7 +271,7 @@ export default class DiscoverView extends Vue {
           title: "Error Updating Search Settings",
           text: "Try going to a different page and then coming back.",
         },
-        -1,
+        5000,
       );
       console.error(
         "Telling user to retry the location search setting because:",

src/views/SeedBackupView.vue

@@ -94,20 +94,22 @@
         </button>
       </div>
     </div>
-    <div v-else>You do not have an active identifier.</div>
+    <div v-else>You do not have an active identity.</div>
   </section>
 </template>
 
 <script lang="ts">
-import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db } from "@/db/index";
+import { retrieveSettingsForActiveAccount } from "@/db/index";
 import { Account } from "@/db/tables/accounts";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import {
+  retrieveAccountCount,
+  retrieveFullyDecryptedAccount,
+} from "@/libs/util";
 
 @Component({ components: { QuickNav } })
 export default class SeedBackupView extends Vue {
@@ -122,24 +124,21 @@ export default class SeedBackupView extends Vue {
   // 'created' hook runs when the Vue instance is first created
   async created() {
     try {
-      await db.open();
+      const settings = await retrieveSettingsForActiveAccount();
-      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+      const activeDid = settings.activeDid || "";
-      const activeDid = settings?.activeDid || "";
 
-      await accountsDB.open();
+      this.numAccounts = await retrieveAccountCount();
-      const accounts = await accountsDB.accounts.toArray();
+      this.activeAccount = await retrieveFullyDecryptedAccount(activeDid);
-      this.numAccounts = accounts.length;
-      this.activeAccount = R.find((acc) => acc.did === activeDid, accounts);
     } catch (err: unknown) {
       console.error("Got an error loading an identifier:", err);
       this.$notify(
         {
           group: "alert",
           type: "danger",
-          title: "Error Loading Account",
+          title: "Error Loading Profile",
           text: "Got an error loading your seed data.",
         },
-        -1,
+        3000,
       );
     }
   }

src/views/ShareMyContactInfoView.vue

@@ -0,0 +1,120 @@
+<template>
+  <QuickNav />
+  <TopMessage />
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-2 pb-24 max-w-3xl mx-auto">
+    <!-- Breadcrumb -->
+    <div>
+      <!-- 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" />
+        </h1>
+      </div>
+
+      <!-- Heading -->
+      <h1 id="ViewHeading" class="text-4xl text-center font-light">
+        Share Your Contact Info
+      </h1>
+    </div>
+
+    <div class="flex justify-center mt-8">
+      <button
+        class="block w-fit text-center text-lg font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+        @click="onClickShare()"
+      >
+        Copy to Clipboard
+      </button>
+    </div>
+    <div class="ml-12">
+      <div class="mt-8">Click to copy your info, then send it to them.</div>
+      <div>
+        They will paste it in the input box on the Contacts
+        <fa icon="users" /> screen.
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
+import { useClipboard } from "@vueuse/core";
+
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+import { NotificationIface } from "@/constants/app";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { generateEndorserJwtUrlForAccount } from "@/libs/endorserServer";
+import { retrieveAccountMetadata } from "@/libs/util";
+
+@Component({
+  components: { QuickNav, TopMessage },
+})
+export default class ShareMyContactInfoView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  async onClickShare() {
+    const settings = await retrieveSettingsForActiveAccount();
+    const activeDid = settings.activeDid || "";
+    const givenName = settings.firstName || "";
+    const isRegistered = !!settings.isRegistered;
+    const profileImageUrl = settings.profileImageUrl || "";
+
+    const account = await retrieveAccountMetadata(activeDid);
+
+    const numContacts = await db.contacts.count();
+
+    if (account) {
+      const message = await generateEndorserJwtUrlForAccount(
+        account,
+        isRegistered,
+        givenName,
+        profileImageUrl,
+        true,
+      );
+      useClipboard()
+        .copy(message)
+        .then(() => {
+          this.$notify(
+            {
+              group: "alert",
+              type: "info",
+              title: "Copied",
+              text: "Your contact info was copied to the clipboard. Have them paste it in the box on their 'Contacts' screen.",
+            },
+            5000,
+          );
+          if (numContacts > 0) {
+            setTimeout(() => {
+              this.$notify(
+                {
+                  group: "alert",
+                  type: "success",
+                  title: "Share Other Contacts",
+                  text: "You may want to share some of your contacts with them. Select them below to copy and send.",
+                },
+                10000,
+              );
+            }, 3000);
+          }
+        });
+      (this.$router as Router).push({ name: "contacts" });
+    } else {
+      this.$notify(
+        {
+          group: "alert",
+          type: "error",
+          title: "Error",
+          text: "No account was found for the active DID.",
+        },
+        5000,
+      );
+    }
+  }
+}
+</script>

src/views/SharedPhotoView.vue

@@ -75,7 +75,7 @@ import {
   IMAGE_TYPE_PROFILE,
   NotificationIface,
 } from "@/constants/app";
-import { db } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import { base64ToBlob, SHARED_PHOTO_BASE64_KEY } from "@/libs/util";
@@ -94,9 +94,8 @@ export default class SharedPhotoView extends Vue {
   // 'created' hook runs when the Vue instance is first created
   async mounted() {
     try {
-      await db.open();
+      const settings = await retrieveSettingsForActiveAccount();
-      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+      this.activeDid = settings.activeDid;
-      this.activeDid = settings?.activeDid as string;
 
       const temp = await db.temp.get(SHARED_PHOTO_BASE64_KEY);
       const imageB64 = temp?.blobB64 as string;
@@ -121,7 +120,7 @@ export default class SharedPhotoView extends Vue {
           title: "Error",
           text: "Got an error loading this data.",
         },
-        -1,
+        3000,
       );
     }
   }

src/views/StartView.vue

@@ -58,6 +58,7 @@
           <a
             @click="onClickNewSeed()"
             class="block w-full text-center text-lg uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2 cursor-pointer"
+            data-testId="newSeed"
           >
             Generate one with a new seed
           </a>
@@ -91,9 +92,11 @@ import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
 import { AppString, PASSKEYS_ENABLED } from "@/constants/app";
-import { accountsDB, db } from "@/db/index";
+import { retrieveSettingsForActiveAccount } from "@/db/index";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
+import {
-import { registerSaveAndActivatePasskey } from "@/libs/util";
+  registerSaveAndActivatePasskey,
+  retrieveAccountCount,
+} from "@/libs/util";
 
 @Component({
   components: {},
@@ -105,12 +108,10 @@ export default class StartView extends Vue {
   numAccounts = 0;
 
   async mounted() {
-    await db.open();
+    const settings = await retrieveSettingsForActiveAccount();
-    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+    this.givenName = settings.firstName || "";
-    this.givenName = settings?.firstName || "";
 
-    await accountsDB.open();
+    this.numAccounts = await retrieveAccountCount();
-    this.numAccounts = await accountsDB.accounts.count();
   }
 
   public onClickNewSeed() {

src/views/StatisticsView.vue

@@ -25,12 +25,13 @@
       Here is a view of the activity you can see.
       <ul class="list-disc outside ml-4">
         <li>Each identity and claim has a unique position.</li>
-        <!-- eslint-disable prettier/prettier --><!-- If we format prettier then there is extra space at the start of the line. -->
+        <li>
-        <li>Each will show at their time of appearance relative to all others.</li>
+          Each will show at their time of appearance relative to all others.
-        <li>Note that the ones on the left and right edges are randomized
+        </li>
-          because their data isn't all visible to you.
+        <li>
+          Note that the ones on the left and right edges are randomized because
+          their data isn't all visible to you.
         </li>
-        <!-- eslint-enable -->
       </ul>
     </div>
 
@@ -46,7 +47,9 @@
         {{ worldProperties.animationDurationSeconds }} seconds
       </div>
     </div>
-    <button class="float-right text-blue-600" @click="captureGraphics()">Screenshot</button>
+    <button class="float-right text-blue-600" @click="captureGraphics()">
+      Screenshot
+    </button>
     <div id="scene-container" class="h-screen"></div>
   </section>
 </template>
@@ -88,7 +91,7 @@ export default class StatisticsView extends Vue {
           title: "Mounting Error",
           text: error.message,
         },
-        -1,
+        5000,
       );
     }
   }

src/views/TestView.vue

@@ -35,7 +35,7 @@
             5000,
           )
         "
-        class="font-bold uppercase bg-slate-900 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-slate-900 text-white px-3 py-2 rounded-md mr-2"
       >
         Toast
       </button>
@@ -49,10 +49,10 @@
               title: 'Information Alert',
               text: 'Just wanted you to know.',
             },
-            -1,
+            5000,
           )
         "
-        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
       >
         Info
       </button>
@@ -66,10 +66,10 @@
               title: 'Success Alert',
               text: 'Congratulations!',
             },
-            -1,
+            5000,
           )
         "
-        class="font-bold uppercase bg-emerald-600 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-emerald-600 text-white px-3 py-2 rounded-md mr-2"
       >
         Success
       </button>
@@ -83,10 +83,10 @@
               title: 'Warning Alert',
               text: 'You might wanna look at this.',
             },
-            -1,
+            5000,
           )
         "
-        class="font-bold uppercase bg-amber-600 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-amber-600 text-white px-3 py-2 rounded-md mr-2"
       >
         Warning
       </button>
@@ -100,10 +100,10 @@
               title: 'Danger Alert',
               text: 'Something terrible has happened!',
             },
-            -1,
+            5000,
           )
         "
-        class="font-bold uppercase bg-rose-600 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-rose-600 text-white px-3 py-2 rounded-md mr-2"
       >
         Danger
       </button>
@@ -118,7 +118,7 @@
             -1,
           )
         "
-        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
       >
         Notif ON
       </button>
@@ -133,7 +133,7 @@
             -1,
           )
         "
-        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
       >
         Notif MUTE
       </button>
@@ -148,7 +148,7 @@
             -1,
           )
         "
-        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
       >
         Notif OFF
       </button>
@@ -157,7 +157,7 @@
     <div class="mt-8">
       <h2 class="text-xl font-bold mb-4">Image Sharing</h2>
       Populates the "shared-photo" view as if they used "share_target".
-      <input type="file" data-testid="fileInput" @change="uploadFile" />
+      <input type="file" data-testId="fileInput" @change="uploadFile" />
       <router-link
         v-if="showFileNextStep()"
         :to="{
@@ -165,7 +165,7 @@
           query: { fileName },
         }"
         class="block w-full text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2 mt-2"
-        data-testid="fileUploadButton"
+        data-testId="fileUploadButton"
       >
         Go to Shared Page
       </router-link>
@@ -184,7 +184,7 @@
         Register Passkey
         <button
           @click="register()"
-          class="font-bold uppercase bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
         >
           Simplewebauthn
         </button>
@@ -194,13 +194,13 @@
         Create JWT
         <button
           @click="createJwtSimplewebauthn()"
-          class="font-bold uppercase bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
         >
           Simplewebauthn
         </button>
         <button
           @click="createJwtNavigator()"
-          class="font-bold uppercase bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
         >
           Navigator
         </button>
@@ -210,19 +210,19 @@
         Verify New JWT
         <button
           @click="verifySimplewebauthn()"
-          class="font-bold uppercase bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
         >
           Simplewebauthn
         </button>
         <button
           @click="verifyWebCrypto()"
-          class="font-bold uppercase bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
         >
           WebCrypto
         </button>
         <button
           @click="verifyP256()"
-          class="font-bold uppercase bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
         >
           p256 - broken
         </button>
@@ -230,11 +230,25 @@
       <div v-else>Verify New JWT -- requires creation first</div>
       <button
         @click="verifyMyJwt()"
-        class="font-bold uppercase bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
       >
         Verify Hard-Coded JWT
       </button>
     </div>
+
+    <div class="mt-8">
+      <h2 class="text-xl font-bold mb-4">Encryption & Decryption</h2>
+      See console for more output.
+      <div>
+        <button
+          @click="testEncryptionDecryption()"
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+        >
+          Run Test
+        </button>
+        Result: {{ encryptionTestResult }}
+      </div>
+    </div>
   </section>
 </template>
 
@@ -247,8 +261,8 @@ import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { AppString, NotificationIface } from "@/constants/app";
-import { accountsDB, db } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import * as cryptoLib from "@/libs/crypto";
 import * as vcLib from "@/libs/crypto/vc";
 import {
   PeerSetup,
@@ -259,7 +273,7 @@ import {
 import {
   AccountKeyInfo,
   blobToBase64,
-  getAccount,
+  retrieveAccountMetadata,
   registerAndSavePasskey,
   SHARED_PHOTO_BASE64_KEY,
 } from "@/libs/util";
@@ -280,6 +294,9 @@ const TEST_PAYLOAD = {
 export default class Help extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
+  // for encryption/decryption
+  encryptionTestResult?: boolean;
+
   // for file import
   fileName?: string;
 
@@ -290,17 +307,14 @@ export default class Help extends Vue {
   peerSetup?: PeerSetup;
   userName?: string;
 
-  async mounted() {
+  cryptoLib = cryptoLib;
-    await db.open();
-    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-    this.activeDid = (settings?.activeDid as string) || "";
-    this.userName = settings?.firstName as string;
 
-    await accountsDB.open();
+  async mounted() {
-    const account: { identity?: string } | undefined = await accountsDB.accounts
+    const settings = await retrieveSettingsForActiveAccount();
-      .where("did")
+    this.activeDid = settings.activeDid || "";
-      .equals(this.activeDid)
+    this.userName = settings.firstName;
-      .first();
+
+    const account = await retrieveAccountMetadata(this.activeDid);
     if (this.activeDid) {
       if (account) {
         this.credIdHex = account.passkeyCredIdHex as string;
@@ -369,8 +383,12 @@ export default class Help extends Vue {
     this.credIdHex = account.passkeyCredIdHex;
   }
 
+  public async testEncryptionDecryption() {
+    this.encryptionTestResult = await cryptoLib.testEncryptionDecryption();
+  }
+
   public async createJwtSimplewebauthn() {
-    const account: AccountKeyInfo | undefined = await getAccount(
+    const account: AccountKeyInfo | undefined = await retrieveAccountMetadata(
       this.activeDid || "",
     );
     if (!vcLib.isFromPasskey(account)) {
@@ -387,7 +405,7 @@ export default class Help extends Vue {
   }
 
   public async createJwtNavigator() {
-    const account: AccountKeyInfo | undefined = await getAccount(
+    const account: AccountKeyInfo | undefined = await retrieveAccountMetadata(
       this.activeDid || "",
     );
     if (!vcLib.isFromPasskey(account)) {

src/views/UserProfileView.vue

@@ -0,0 +1,184 @@
+<template>
+  <QuickNav selected="Discover" />
+  <TopMessage />
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Breadcrumb -->
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 id="ViewHeading" 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>
+        Individual Profile
+      </h1>
+    </div>
+
+    <!-- Loading Animation -->
+    <div
+      class="fixed left-6 mt-16 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>
+
+    <div v-else-if="profile">
+      <!-- Profile Info -->
+      <div class="mt-8">
+        <div class="text-sm">
+          <fa icon="user" class="fa-fw text-slate-400"></fa>
+          {{ didInfo(profile.issuerDid, activeDid, allMyDids, allContacts) }}
+        </div>
+        <p v-if="profile.description" class="mt-4 text-slate-600">
+          {{ profile.description }}
+        </p>
+      </div>
+
+      <!-- Map for first coordinates -->
+      <div v-if="profile?.locLat && profile?.locLon" class="mt-4">
+        <h2 class="text-lg font-semibold">Location</h2>
+        <div class="h-96 mt-2 w-full">
+          <l-map
+            ref="profileMap"
+            :center="[profile.locLat, profile.locLon]"
+            :zoom="12"
+          >
+            <l-tile-layer
+              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+              layer-type="base"
+              name="OpenStreetMap"
+            />
+            <l-marker :lat-lng="[profile.locLat, profile.locLon]">
+              <l-popup>{{
+                didInfo(profile.issuerDid, activeDid, allMyDids, allContacts)
+              }}</l-popup>
+            </l-marker>
+          </l-map>
+        </div>
+      </div>
+
+      <!-- Map for second coordinates -->
+      <div v-if="profile?.locLat2 && profile?.locLon2" class="mt-4">
+        <h2 class="text-lg font-semibold">Second Location</h2>
+        <div class="h-96 mt-2 w-full">
+          <l-map
+            ref="profileMap"
+            :center="[profile.locLat2, profile.locLon2]"
+            :zoom="12"
+          >
+            <l-tile-layer
+              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+              layer-type="base"
+              name="OpenStreetMap"
+            />
+            <l-marker :lat-lng="[profile.locLat2, profile.locLon2]">
+              <l-popup>{{
+                didInfo(profile.issuerDid, activeDid, allMyDids, allContacts)
+              }}</l-popup>
+            </l-marker>
+          </l-map>
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="text-center mt-8">
+      <p class="text-lg text-slate-500">Profile not found.</p>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import "leaflet/dist/leaflet.css";
+import { Component, Vue } from "vue-facing-decorator";
+import { LMap, LTileLayer, LMarker, LPopup } from "@vue-leaflet/vue-leaflet";
+import { Router, RouteLocationNormalizedLoaded } from "vue-router";
+
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+import { DEFAULT_PARTNER_API_SERVER, NotificationIface } from "@/constants/app";
+import { db } from "@/db/index";
+import { Contact } from "@/db/tables/contacts";
+import { didInfo, getHeaders } from "@/libs/endorserServer";
+import { UserProfile } from "@/libs/partnerServer";
+import { retrieveAccountDids } from "@/libs/util";
+
+@Component({
+  components: {
+    LMap,
+    LMarker,
+    LPopup,
+    LTileLayer,
+    QuickNav,
+    TopMessage,
+  },
+})
+export default class UserProfileView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+  $router!: Router;
+  $route!: RouteLocationNormalizedLoaded;
+
+  activeDid = "";
+  allContacts: Array<Contact> = [];
+  allMyDids: Array<string> = [];
+  isLoading = true;
+  partnerApiServer = DEFAULT_PARTNER_API_SERVER;
+  profile: UserProfile | null = null;
+
+  // make this function available to the Vue template
+  didInfo = didInfo;
+
+  async mounted() {
+    const settings = await db.settings.toArray();
+    this.activeDid = settings[0]?.activeDid || "";
+    this.partnerApiServer =
+      settings[0]?.partnerApiServer || this.partnerApiServer;
+
+    this.allContacts = await db.contacts.toArray();
+    this.allMyDids = await retrieveAccountDids();
+
+    await this.loadProfile();
+  }
+
+  async loadProfile() {
+    const profileId: string = this.$route.params.id as string;
+    if (!profileId) {
+      this.isLoading = false;
+      return;
+    }
+
+    try {
+      const response = await fetch(
+        `${this.partnerApiServer}/api/partner/userProfile/${encodeURIComponent(profileId)}`,
+        {
+          method: "GET",
+          headers: await getHeaders(this.activeDid),
+        },
+      );
+
+      if (response.status === 200) {
+        const result = await response.json();
+        this.profile = result.data;
+      } else {
+        throw new Error("Failed to load profile");
+      }
+    } catch (error) {
+      console.error("Error loading profile:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "There was a problem loading the profile.",
+        },
+        5000,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+}
+</script>

sw_scripts/additional-scripts.js

@@ -5,6 +5,7 @@ importScripts(
   "https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js",
 );
 
+// similar method is in the src/db/index.ts file
 function logConsoleAndDb(message, arg1, arg2) {
   // in chrome://serviceworker-internals note that the arg1 and arg2 here will show as "[object Object]" in that page but will show as expandable objects in the console
   console.log(`${new Date().toISOString()} ${message}`, arg1, arg2);
@@ -13,10 +14,18 @@ function logConsoleAndDb(message, arg1, arg2) {
   if (appendDailyLog) {
     let fullMessage = `${new Date().toISOString()} ${message}`;
     if (arg1) {
-      fullMessage += `\n${JSON.stringify(arg1)}`;
+      if (typeof arg1 === "string") {
+        fullMessage += `\n${arg1}`;
+      } else {
+        fullMessage += `\n${JSON.stringify(arg1)}`;
+      }
     }
     if (arg2) {
-      fullMessage += `\n${JSON.stringify(arg2)}`;
+      if (typeof arg2 === "string") {
+        fullMessage += `\n${arg2}`;
+      } else {
+        fullMessage += `\n${JSON.stringify(arg2)}`;
+      }
     }
     // appendDailyLog is injected from safari-notifications.js at build time by the vue.config.js configureWebpack apply plugin
     // eslint-disable-next-line no-undef
@@ -63,16 +72,16 @@ self.addEventListener("push", function (event) {
         // See https://gitea.anomalistdesign.com/trent_larson/py-push-server/src/commit/c1ed026662e754348a5f91542680bd4f57e5b81e/app.py#L217
         const DAILY_UPDATE_TITLE = "DAILY_CHECK";
 
-        // 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 notification-test code and should be a constant. Look for the same name in HelpNotificationsView.vue
-        // Make sure it is something other than the DAILY_UPDATE_TITLE.
+        // This is a special value that tells the service worker to send a direct notification to the device, skipping filters.
+        // Make sure it is something different from the DAILY_UPDATE_TITLE.
         const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";
 
         let title;
         let message = "Got some empty message.";
         if (payload && payload.title == DIRECT_PUSH_TITLE) {
           // skip any search logic and show the message directly
-          title = "Direct Notification";
+          title = "Direct Message";
           message = payload.message || "No details were provided.";
         } else {
           // any other title will run through regular filtering logic
@@ -106,7 +115,7 @@ self.addEventListener("push", function (event) {
 self.addEventListener("message", (event) => {
   logConsoleAndDb("Service worker got a message...", event);
   if (event.data && event.data.type === "SEND_LOCAL_DATA") {
-    self.secret = event.data.data;
+    self.secret = event.data.data; // used in safari-notifications.js to decrypt the account identity
     event.ports[0].postMessage({ success: true });
   }
   logConsoleAndDb("Service worker posted a message.");
@@ -133,7 +142,8 @@ self.addEventListener("notificationclick", (event) => {
 
 // This is invoked when the user chooses this as a share_target, mapped to share-target in the manifest.
 self.addEventListener("fetch", (event) => {
-  logConsoleAndDb("Service worker got fetch event.", event);
+  // Skipping this because we get so many of them, at startup and other times, all with an event of: {isTrusted:true}
+  //logConsoleAndDb("Service worker got fetch event.", event);
 
   // Bypass any regular requests not related to Web Share Target
   // and also requests that are not exactly to the timesafari.app

sw_scripts/safari-notifications.js

@@ -515,6 +515,7 @@ async function getNotificationCount() {
 
   const identity = activeAccount && activeAccount["identity"];
   if (identity && "secret" in self) {
+    // get the "secret" pulled in additional-scripts.js to decrypt the "identity" inside the IndexedDB; see account.ts
     const secret = self.secret;
     const secretUint8Array = self.decodeBase64(secret);
     const messageWithNonceAsUint8Array = self.decodeBase64(identity);

test-playwright/00-noid-tests.spec.ts

@@ -1,27 +1,13 @@
 import { test, expect } from '@playwright/test';
+import { deleteContact, generateAndRegisterEthrUser, importUser } from './testUtils';
 
-test('Confirm usage of test API (may fail if you are running your own Time Safari)', async ({ page }, testInfo) => {
+test('Check activity feed - check that server is running', async ({ page }) => {
-  // Load account view
-  await page.goto('./account');
-  await page.getByRole('heading', { name: 'Advanced' }).click();
-
-  // look into the config file: if it starts Time Safari, it might say which server it should set by default
-  const webServer = testInfo.config.webServer;
-  const endorserWords = webServer?.command.split(' ');
-  const ENDORSER_ENV_NAME = 'VITE_DEFAULT_ENDORSER_API_SERVER';
-  const endorserTerm = endorserWords?.find(word => word.startsWith(ENDORSER_ENV_NAME + '='));
-  const endorserTermInConfig = endorserTerm?.substring(ENDORSER_ENV_NAME.length + 1);
-
-  const endorserServer = endorserTermInConfig || 'https://test-api.endorser.ch';
-  await expect(page.getByRole('textbox').nth(1)).toHaveValue(endorserServer);
-});
-
-test('Check activity feed', async ({ page }) => {
   // Load app homepage
   await page.goto('./');
+  await page.getByTestId('closeOnboardingAndFinish').click();
 
   // Check that initial 10 activities have been loaded
-  await page.locator('ul#listLatestActivity li:nth-child(10)');
+  await expect(page.locator('ul#listLatestActivity li:nth-child(10)')).toBeVisible();
 
   // Scroll down a bit to trigger loading additional activities
   await page.locator('ul#listLatestActivity li:nth-child(50)').scrollIntoViewIfNeeded();
@@ -32,20 +18,12 @@ test('Check discover results', async ({ page }) => {
   await page.goto('./discover');
 
   // Check that initial 10 projects have been loaded
-  await page.locator('ul#listDiscoverResults li.border-b:nth-child(10)');
+  await expect(page.locator('ul#listDiscoverResults li.border-b:nth-child(10)')).toBeVisible();
 
   // Scroll down a bit to trigger loading additional projects
   await page.locator('ul#listDiscoverResults li.border-b:nth-child(20)').scrollIntoViewIfNeeded();
 });
 
-test('Check no-ID messaging in homepage', async ({ page }) => {
-  // Load app homepage
-  await page.goto('./');
-
-  // Check 'someone must register you' notice
-  await expect(page.getByText('To share, someone must register you.')).toBeVisible();
-});
-
 test('Check no-ID messaging in account', async ({ page }) => {
   // Load account view
   await page.goto('./account');
@@ -60,6 +38,17 @@ test('Check no-ID messaging in account', async ({ page }) => {
   await expect(page.locator('#sectionIdentityDetails code.truncate')).toBeEmpty();
 });
 
+test('Check ability to share contact', async ({ page }) => {
+  // Load Discover view
+  await page.goto('./discover');
+
+  // Check that initial 10 projects have been loaded
+  await expect(page.locator('ul#listDiscoverResults li.border-b:nth-child(10)')).toBeVisible();
+
+  // Scroll down a bit to trigger loading additional projects
+  await page.locator('ul#listDiscoverResults li.border-b:nth-child(20)').scrollIntoViewIfNeeded();
+});
+
 test('Check ID generation', async ({ page }) => {
   // Load Account view
   await page.goto('./account');
@@ -73,9 +62,85 @@ test('Check ID generation', async ({ page }) => {
   // Wait for activity feed to start loading, as a delay
   await expect(page.locator('ul#listLatestActivity li:nth-child(10)')).toBeVisible();
 
+  // Check 'someone must register you' notice
+  await expect(page.getByText('To share, someone must register you.')).toBeVisible();
+
   // Go back to Account view
   await page.goto('./account');
 
   // Check that ID is now generated
   await expect(page.locator('#sectionIdentityDetails code.truncate')).toContainText('did:ethr:');
-});
+});
+
+
+test('Check setting name & sharing info', async ({ page }) => {
+  // Load homepage to trigger ID generation (?)
+  await page.goto('./');
+  await page.getByTestId('closeOnboardingAndFinish').click();
+  // Check 'someone must register you' notice
+  await expect(page.getByText('someone must register you.')).toBeVisible();
+  await page.getByRole('button', { name: /Show them/}).click();
+  // fill in a name
+  await expect(page.getByText('Set Your Name')).toBeVisible();
+  await page.getByRole('textbox').fill('Me Test User');
+  await page.locator('button:has-text("Save")').click();
+  await expect(page.getByText('share some other way')).toBeVisible();
+  await page.getByRole('button', { name: /share some other way/ }).click();
+  await expect(page.getByRole('button', { name: 'copy to clipboard' })).toBeVisible();
+  await page.getByRole('button', { name: 'copy to clipboard' }).click();
+  await expect(page.getByText('contact info was copied')).toBeVisible();
+  // dismiss alert and wait for it to go away
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click();
+  await expect(page.getByText('contact info was copied')).toBeHidden();
+  // check that they're on the Contacts screen
+  await expect(page.getByText('your contacts')).toBeVisible();
+});
+
+test('Confirm test API setting (may fail if you are running your own Time Safari)', async ({ page }, testInfo) => {
+  // Load account view
+  await page.goto('./account');
+  await page.getByRole('heading', { name: 'Advanced' }).click();
+
+  // look into the config file: if it starts Time Safari, it might say which server it should set by default
+  const webServer = testInfo.config.webServer;
+  const endorserWords = webServer?.command.split(' ');
+  const ENDORSER_ENV_NAME = 'VITE_DEFAULT_ENDORSER_API_SERVER';
+  const endorserTerm = endorserWords?.find(word => word.startsWith(ENDORSER_ENV_NAME + '='));
+  const endorserTermInConfig = endorserTerm?.substring(ENDORSER_ENV_NAME.length + 1);
+
+  const endorserServer = endorserTermInConfig || 'https://test-api.endorser.ch';
+  await expect(page.getByRole('textbox').nth(1)).toHaveValue(endorserServer);
+});
+
+test('Check User 0 can register a random person', async ({ page }) => {
+  await importUser(page, '00');
+  const newDid = await generateAndRegisterEthrUser(page);
+  expect(newDid).toContain('did:ethr:');
+
+  await page.goto('./');
+  await page.getByTestId('closeOnboardingAndFinish').click();
+  await page.getByRole('heading', { name: 'Unnamed/Unknown' }).click();
+  await page.getByPlaceholder('What was given').fill('Gave me access!');
+  await page.getByRole('button', { name: 'Sign & Send' }).click();
+  await expect(page.getByText('That gift was recorded.')).toBeVisible();
+  // now ensure that alert goes away
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss alert
+  await expect(page.getByText('That gift was recorded.')).toBeHidden();
+
+  // now delete the contact to test that pages still do reasonable things
+  await deleteContact(page, newDid);
+  // go the activity page for this new person
+  await page.goto('./did/' + encodeURIComponent(newDid));
+  // maybe replace by: const popupPromise = page.waitForEvent('popup');
+  let error;
+  try {
+    await page.waitForSelector('div[role="alert"]', { timeout: 2000 });
+    error = new Error('Error alert should not show.');
+  } catch (error) {
+    // success
+  } finally {
+    if (error) {
+      throw error;
+    }
+  }
+});