add commentary for other attempts

Where I intend to hook the onboarding dialogs to

.env.development

@@ -1,5 +1,7 @@
 
-# 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
+# I tried setting values here and using `vue-cli-service build --mode development`
+# but it didn't create some things in "dist":
+# - the "css" directory with the CSS extracted from Vue files
+# - the sw_scripts-combined* files
+#
+# ¯\_(ツ)_/¯

.env.production

@@ -1,6 +1,4 @@
-# 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
+# Only the variables that start with VUE_APP_ are seen in the application process.env in Vue.
+VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01GXYPFF7FA03NXKPYY142PY4H
+VUE_APP_DEFAULT_ENDORSER_API_SERVER=https://api.endorser.ch
+VUE_APP_DEFAULT_IMAGE_API_SERVER=https://image-api.timesafari.app

.eslintrc.js

@@ -2,7 +2,6 @@ module.exports = {
   root: true,
   env: {
     node: true,
-    es2022: true,
   },
   extends: [
     "plugin:vue/vue3-essential",
@@ -10,25 +9,12 @@ module.exports = {
     "@vue/typescript/recommended",
     "plugin:prettier/recommended",
   ],
-  // parserOptions: {
-  //   ecmaVersion: 2020,
-  // },
+  parserOptions: {
+    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",
   },
 };

.github/workflows/playwright.yml

@@ -1,27 +0,0 @@
-name: Playwright Tests
-on:
-  push:
-    branches: [ main, master ]
-  pull_request:
-    branches: [ main, master ]
-jobs:
-  test:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: lts/*
-    - name: Install dependencies
-      run: npm ci
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npx playwright test
-    - uses: actions/upload-artifact@v4
-      if: always()
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30

.gitignore

@@ -27,7 +27,3 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/

CHANGELOG.md

@@ -5,330 +5,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-
-## [0.3.57] - 2025.02.11
-### Added
-- Automatic user creation in onboarding meetings
-
-
-## [0.3.55] - 2025.02.07
-### Added
-- 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
-
-
-## [0.3.20] - 2024.08.18 - 4064eb75a9743ca268bf00016fa0a5fc5dec4e30
-### Fixed
-- Bad "give" verbiage on offer page
-- Failing offer test
-
-
-## [0.3.19] - 2024.08.18 - ee9c14942ceba993bf21a11249601f205158ec71
-### Added
-- Update of an offer
-- Recipient description in offer list
-### Fixed
-- List of offers wasn't showing.
-- Destination page after sharing photo was wrong.
-
-
-## [0.3.17] - 2024.07.11 - cefa384ff1a2d922848c370640c096c529920fab
-### Added
-- Photos on more screens
-### Fixed
-- Share of a photo, including sharing a photo from webkit/Safari which never worked
-### Changed in DB or environment
-- Nothing (though there's a new temp field in IndexedDB)
-
-
-## [0.3.15] - 2024.08.04 - c8f0f2c2b16b9f0b4b47d40f7bf29058c7baa68e
-### Added
-- Edit gives
-- Page to edit claim JSON before submitting
-- Update of imported contacts
-- Improve messaging on give dialog
-- Section for gives provided by plan
-- Deletion of an identity
-- UI for choosing a passkey creation (not enabled on prod)
-- Cache signatures for reports for passkey-signed requests
-- Refactor: consolidate alternative signing, eg. for passkeys & did:peer
-- Playwright tests
-### Changed
-- Linked projects display below description (instead of at bottom)
-### Fixed
-- Visibility toggle appearance
-### Changed in DB or environment
-- Nothing
-
-
-## [0.3.14] - 2024.06.22 - 1611d22892f683f43856d2503eee7f391b6bbce8
-### Added
-- Clearer give-confirmation screen
-- BX currency https://thebx.medium.com/
-- Deselection of project on gifted details page
-### Fixed
-- Don't show registration pop-up for a new contact that is registered
-### Changed in DB or environment
-- Nothing
-
-
-## [0.3.13] - 2024.05.24 - 08b67984e443c58d9178ad3776013b0bce7afddc
-### Added
-- Photos on projects
-### Changed in DB or environment
-- Nothing
-
-
-## [0.3.12] - 2024.05.19 - 141fb39ad19c44d82fe1a33bf85115beacf50870
-### Fixed
-- Photo share (share_target) failed because requests were sent to server
-### Changed in DB or environment
-- Nothing
-
-
-## [0.3.11] - 2024.05.19 - 567bcad88dfb7e9ac8fea72530d1163985e4a7cc
-### Added
-- Choose a file for gifts, and a URL for gifts & profiles
-### Fixed
-- Multiple button pushes were required to switch camera
-### Changed in DB or environment
-- Nothing
-
-
-## [0.3.10] - 2024.05.11 - 03ac31d98110f7828cf9acb366db8d01b185f64c
-### Added
-- Share an image
-- Choose a file on the device for a profile image
-### Changed in DB or environment
-- Nothing
-
-
-## [0.3.9] - 2024.04.28 - 874e717e698b93a1ace9f588e675b8a3dccd7617
-### Added
-- Offers on contacts page
-- Checks on front page until they show as registered
-### Changed
-- Scanned contacts now add immediately and prompt for registration.
-- Better UI for gives on contact page
-- Better UI for all confirmation messages
-### Fixed
-- Repeated elements at top of main feed
-### Changed in DB or environment
-- Nothing
-
-
-## [0.3.8] - 2024.04.20 - 15c026c80ce03a26cae3ff80b0888934c101c7e2
-### Added
-- Profile image for user
-### Fixed
-- Slow loading of home page feed
-### Changed in DB or environment
-- Nothing
-
-
-## [0.3.7] - 2024.04.10 - cf18f1543a700d62a5f9e764905a4aafe1fb229b
-### Added
-- Filter on home page feed
-- Ability to set time of daily notification
-- Jump to app on click of notification
-### Changed
-- Built with vite
-- Descriptions on home page to include projects
+## [Unreleased]
 ### Changed in DB or environment
 - Nothing
 

CONTRIBUTING.md

@@ -2,10 +2,5 @@
 
 Welcome! We are happy to have your help with this project.
 
-We expect contributions to include automated tests and pass linting. Run the `test-all` task.
-Note that some previous features don't have tests and adding more will make you friends quick.
-
-Note that all contributions will be under our [license, modeled after SQLite](https://github.com/trentlarson/endorser-ch/blob/master/LICENSE).
-
-If you want to see a code of conduct, we're probably not the people you want to hang with.
-Basically, we'll work together as long as we both enjoy it, and we'll stop when that stops.
+Note that all contributions will be under our
+[license, modeled after SQLite](https://github.com/trentlarson/endorser-ch/blob/master/LICENSE).

LICENSE

@@ -1,8 +0,0 @@
-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,131 +10,60 @@ See [project.task.yaml](project.task.yaml) for current priorities.
 
 ## Setup
 
-We like pkgx: `sh <(curl https://pkgx.sh) +vite sh`
+We have pkgx.dev set up in package.json, so you can use `dev` to set up the dev environment.
 
 ```
 npm install
 ```
 
-### Compile and hot-reloads for development
-```
-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
+### Compiles and hot-reloads for development
 ```
 npm run serve
 ```
 
-### Lint and fix files
+### Lints and fixes files
 ```
 npm run lint
 ```
 
-### Run all UI tests
-
-Look below for the "test-all" instructions.
-
-
-### Compile and minify for test & production
+### Compiles and minifies for production
 
 * If there are DB changes: before updating the test server, open browser(s) with current version to test DB migrations.
 
 * `npx prettier --write ./sw_scripts/`
 
-* Update the ClickUp tasks & CHANGELOG.md & the version in package.json, run `npm install`.
+* Update the project.task.yaml & CHANGELOG.md & the version in package.json, run `npm install`.
 
-* 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).
-
-* 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):
+* Run the correct build
 
+  * Test
 ```
-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
+# (See .env.development for more details.)
+# 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" VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HNTZYJJXTGT0EZS3VEJGX7AK VUE_APP_DEFAULT_ENDORSER_API_SERVER=https://test-api.endorser.ch VUE_APP_DEFAULT_IMAGE_API_SERVER=https://test-image-api.timesafari.app npm run build
 ```
 
-   ... and transfer to the test server: `rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntutest@test.timesafari.app:time-safari`
+  * Production
+```
+# This picks up values from .env.production
+npm run build
+```
 
-    (Let's replace that with a .env.development or .env.staging file.)
+* Get on the server and back up 3 DBs and the time-safari folder.
 
-    (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.)
+* `rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntutest@test.timesafari.app:time-safari`
 
-* 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.
+* 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.
 
+* [Tag with the new version.](https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/releases)
 
 
 
 
 ## Tests
 
-### Automated
-
-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
-```
-
-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
-```
-
-Note that a test will sometimes fail and rerunning may succeed (and repeat if a different test fails).
-
-
-
-
-It's possible to use the global test Endorser (ledger) server (but currently the tests don't all succeed):
-`npx playwright test`
-
-
-
-
-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
-NODE_ENV=test-local npm run test test/controller0
-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
@@ -161,11 +90,11 @@ To add an icon, add to main.ts and reference with `fa` element and `icon` attrib
 
 ### Manual walk-through test
 
-- Backup seed & data & get a CSV dump from Endorser Mobile.
-- If there were any DB changes, check that you're on the old version and reload the page and ensure you can still act and haven't lost data (ie. contacts, identities).
+- If there were any DB changes, check that you're on the old version and reload the page and ensure you can still act.
 - Use a mobile user as well as a desktop user.
+- Backup seed & data & get a CSV dump from Endorser Mobile.
 - Check that the version is updated.
-  - Clear the browser data & add identity & import Time Safari contacts and then CSV contacts.
+- Clear the browser data & add identity & import Time Safari contacts and then CSV contacts.
 - Make sure that it's using the test API (under Identity in 'Advanced').
 - Clear the browser data again. (See "Reset" below.)
   - Go to the account page before visiting the home page to see that there is no ID.
@@ -175,19 +104,15 @@ To add an icon, add to main.ts and reference with `fa` element and `icon` attrib
     - Copy the contact URL.
   - On each page, verify the messaging, and that they cannot take action.
   - On the discovery page, check that they can see projects, and set a search area to see projects nearby.
-  - On the contacts page, check that they can add a contact even without their own ID.
-- Install the PWA.
-- As User 0 in another browser on the test API, add a give & a project.
-  - Note that some combinations of desktop with mobile emulation stretch the image.
-  - Import User 0 with seed: `rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage`
-  - Add new user as a contact (which allows them to see User 0).
-  - With the new user on the home page, see the feed that shows User 0 in network but without the name.
-- As the new user, import contacts & identifiers.
-- As the new user on the contacts page, add User 0 as a contact.
-  - On the home page, see the feed that shows User 0 with a name.
+  - On the contacts page, check that they can add User #0 even without their own ID.
+- As User #0 in another browser on the test API, add a give & a project.
+  - `rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage`
+  - With the new user on the home page, see the feed that shows User #0 in network but without the name.
+- As the new user on the contacts page, add User #0 as a contact.
+  - On the home page, see the feed that shows User #0 with a name.
 - Switch back to the generated identifier.
   - On the account page, check that they see messages on limits.
-- As User 0, register the ID.
+- As User #0, register the ID.
 - As the new user on the home page, check that they can now record a gift, and record an offer & delivery.
 - On the contacts page, check that they cannot register someone else yet.
 - Walk through the functions on each page.
@@ -195,7 +120,6 @@ To add an icon, add to main.ts and reference with `fa` element and `icon` attrib
 - Export & import, both seed and contacts & settings.
 - Choose location on the search map.
 - Offer, deliver a give, and confirm. Create a third user and test connections.
-- On mobile, share an image with the app.
 - Switch to "no identifier" to see that things look OK without any ID.
 
 ### Clear/Reset data & restart

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};

doc/README.md

@@ -1,76 +0,0 @@
-# TimeSafari Docs
-
-## Generating PDF from Markdown on OSx
-
-This uses Pandoc and BasicTex (LaTeX) Installed through Homebrew.
-
-### Set Up
-
-```bash 
-brew install pandoc
-
-brew install basictex
-
-# Setting up LaTex packages
-
-# First update tlmgr
-sudo tlmgr update --self
-
-# Then install LaTex packages
-sudo tlmgr install bbding
-sudo tlmgr install enumitem
-sudo tlmgr install environ
-sudo tlmgr install fancyhdr
-sudo tlmgr install framed
-sudo tlmgr install import
-sudo tlmgr install lastpage  # Enables Page X of Y
-sudo tlmgr install mdframed
-sudo tlmgr install multirow
-sudo tlmgr install needspace
-sudo tlmgr install ntheorem
-sudo tlmgr install tabu
-sudo tlmgr install tcolorbox
-sudo tlmgr install textpos
-sudo tlmgr install titlesec
-sudo tlmgr install titling  # Required for the fancy headers used
-sudo tlmgr install threeparttable
-sudo tlmgr install trimspaces
-sudo tlmgr install tocloft  # Required for \tableofcontents generation
-sudo tlmgr install varwidth
-sudo tlmgr install wrapfig
-
-# Install fonts
-sudo tlmgr install cmbright
-sudo tlmgr install collection-fontsrecommended # And set up fonts
-sudo tlmgr install fira
-sudo tlmgr install fontaxes
-sudo tlmgr install libertine # The main font the doc uses
-sudo tlmgr install opensans
-sudo tlmgr install sourceserifpro
-
-```
-
-#### References
-
-The following guide was adapted to this project except that we install with Brew and have a few more packages.
-
-Guide: https://daniel.feldroy.com/posts/setting-up-latex-on-mac-os-x
-
-### Usage
-
-Use the `pandoc` command to generate a PDF.
-
-```bash
-pandoc usage-guide.md -o usage-guide.pdf 
-```
-
-And you can open the PDF with the `open` command.
-
-```bash
-open usage-guide.pdf
-```
-
-Or use this one-liner
-```bash
-pandoc usage-guide.md -o usage-guide.pdf && open usage-guide.pdf
-```

doc/usage-guide.md

@@ -1,316 +0,0 @@
----
-geometry: margin=1in
-header-includes:
-    - \usepackage{graphicx}
-    - \usepackage{titling}
-    - \usepackage{fancyhdr}
-    - \usepackage{lastpage}
-    - \pagestyle{fancy}
-    - \fancyhead[L]{Time Safari Usage Guide}
-    - \fancyhead[C]{Page \thepage\ of \pageref{LastPage}}
-    - \fancyhead[R]{}
-    - \fancyfoot[L]{}
-    - \fancyfoot[C]{}
-    - \fancyfoot[R]{\includegraphics[width=1cm]{images/timesafari-logo-binoculars.png}}
-    - \usepackage{tocloft}
-    - \usepackage{libertine}
-    - \renewcommand{\familydefault}{\sfdefault}
-    - \fancypagestyle{tocstyle}{
-      \fancyhead[L]{Time Safari Usage Guide}
-      \fancyhead[C]{Page \thepage\ of \pageref{LastPage}}
-      \fancyhead[R]{}
-      \fancyfoot[L]{}
-      \fancyfoot[C]{}
-      \fancyfoot[R]{\includegraphics[width=1cm]{images/timesafari-logo-binoculars.png}}}
----
-
-\begin{titlepage}
-\centering
-\vspace*{\fill}
-{\huge\textbf{TimeSafari Usage guide}}
-
-\vspace{1cm}
-{\Large Signing up users, adding contacts, and adding gifts.}
-
-\vspace{1cm}
-\includegraphics[width=0.5\textwidth]{images/timesafari-logo.png}
-\vspace*{\fill}
-
-\vspace{1cm}
-{\Large Trent Larson, Kent Bull}
-
-\vspace{0.5cm}
-{\large 2024-06-25}
-
-\end{titlepage}
-
-\clearpage
-
-\begin{center}
-\includegraphics[width=2cm]{images/timesafari-logo-binoculars.png}
-\end{center}
-\tableofcontents
-
-\clearpage
-
-
-# Purpose of Document
-
-Both end-users and development team members need to know how to use TimeSafari. 
-This document serves to show how to use every feature of the TimeSafari platform.
-
-Sections of this document are geared specifically for software developers and quality assurance
-team members.
-
-Companion videos will also describe end-to-end workflows for the end-user.
-
-# TimeSafari 
-
-## Overview
-
-\pagebreak
-
-# 1 - End Users
-
-This section covers application usage for people who will use TimeSafari as intended. It is a
-simplified guide illustrating how to gain value from using TimeSafari.
-
-\pagebreak
-
-# 2 - Software Developers
-
-This section is tailored for software developers seeking to use the application during development,
-quality assurance, and testing.
-
-# Bootstrapping a local development environment
-
-The first concern a software developer has when working on TimeSafari is to set up a local
-development environment. This section will guide you through the process.
-
-## Prerequisites
-
-1. Have the following installed on your local machine:
-  - Node.js and NPM
-  - A web browser. For this guide, we will use Google Chrome.
-  - Git
-  - A code editor
-
-2. Create an API key on Infura. This is necessary for the Endorser API to connect to the Ethereum
-   blockchain. 
-  - You can create an account on Infura [here](https://infura.io/).\
-    Click "CREATE NEW API KEY" and label the key. Then click "API Keys" in the top menu bar to
-    be taken back to the list of keys.
-    
-    Click "VIEW STATS" on the key you want to use.   
-    
-    ![](images/01_infura-api-keys.png){ width=550px }
-  
-  - Go to the key detail page. Then click "MANAGE API KEY".
-  
-    ![](images/02-infura-key-detail.png){ width=550px }
-  
-  - Click the copy and paste button next to the string of alphanumeric characters.\
-    This is your API, also known as your project ID.
-  
-    ![](images/03-infura-api-key-id.png){width=550px }
-  
-  - Save this for later during the Endorser API setup. This will go in your `INFURA_PROJECT_ID` 
-    environment variable.
-    
-
-## Setup steps
-
-### 1. Clone the following repositories from their respective Git hosts:
-  - [TimeSafari Frontend](https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa)\
-    This is a Progressive Web App (PWA) built with VueJS and TypeScript.
-    Note that the clone command here is different from the one you would use for GitHub.
-    
-```bash
-git clone git clone \
-  ssh://git@gitea.anomalistdesign.com:222/trent_larson/crowd-funder-for-time-pwa.git
-```
-  
-  - [TimeSafari Backend - Endorser API](https://github.com/trentlarson/endorser-ch)\
-    This is a NodeJS service providing the backend for TimeSafari.
-    
-    ```bash
-    git clone git@github.com:trentlarson/endorser-ch.git
-    ```
-
-\pagebreak
-
-### 2. Database creation
-
-#### Alternative 1 - use test data
-
-To generate a development database and perform user setup you can run a local test with instructions
-below to generate sample data. Then copy the test database, rename it to `-dev` as below:\
-`cp ../endorser-ch-test-local.sqlite3 ../endorser-ch-dev.sqlite3` \
-and rerun `npm run dev` to give yourself user #0 and others from the ETHR_CRED_DATA in [the endorser.ch test util file](https://github.com/trentlarson/endorser-ch/blob/master/test/util.js#L90)
-
-#### Alternative 2 - boostrap single seed user 
-
-In this method you will end up with two accounts in the database, one for the first boostrap user,
-and the second as the primary user you will use during testing. The first user will invite the
-second user to the app.
-
-1. Install dependencies and environment variables.\
-   In endorser-ch install dependencies and set up environment variables to allow starting it up in
-   development mode.
-   ```bash
-   cd endorser-ch
-   npm clean install  # or npm ci
-   cp .env.local .env
-   ```
-   Edit the .env file's INFURA_PROJECT_ID with the value you saved earlier in the
-   prerequisites.\
-   Then create the SQLite database by running `npm run flyway migrate` with environment variables
-   set correctly to select the default SQLite development user as follows.
-   ```bash
-   export NODE_ENV=dev 
-   export DBUSER=sa 
-   export DBPASS=sasa 
-   npm run flyway migrate
-   ``` 
-   The first run of flyway migrate may take some time to complete because the entire Flyway 
-   distribution must be downloaded prior to executing migrations.
-    
-   Successful output looks similar to the following:
-    
-```
-Database: jdbc:sqlite:../endorser-ch-dev.sqlite3 (SQLite 3.41)
-Schema history table "main"."flyway_schema_history" does not exist yet
-Successfully validated 10 migrations (execution time 00:00.034s)
-Creating Schema History table "main"."flyway_schema_history" ...
-Current version of schema "main": << Empty Schema >>
-Migrating schema "main" to version "1 - initial-anew"
-Migrating schema "main" to version "2 - registration"
-Migrating schema "main" to version "3 - plan project"
-Migrating schema "main" to version "4 - offer gave"
-Migrating schema "main" to version "5 - more confirmations"
-Migrating schema "main" to version "6 - providers urls"
-Migrating schema "main" to version "7 - hash nonce"
-Migrating schema "main" to version "8 - project location"
-Migrating schema "main" to version "9 - plan links"
-Migrating schema "main" to version "10 - gift or trade"
-Successfully applied 10 migrations to schema "main", now at version v10 (execution time 00:00.043s)
-A Flyway report has been generated here: /Users/kbull/code/timesafari/endorser-ch/report.html
-```
-
-\pagebreak
-
-2. Generate the first user in TimeSafari PWA and bootstrap that user in Endorser's database.\
-   As TimeSafari is an invite-only platform the first user must be manually bootstrapped since
-   no other users exist to be able to invite the first user. This first user must be added manually
-   to the SQLite database used by Endorser. In this setup you generate the first user from the PWA. 
-   
-   This user is automatically generated on first usage of the TimeSafari PWA. Bootstrapping that 
-   user is required so that this first user can register other users.
-   - Change directories into `crowd-funder-for-time-pwa`
-     
-     ```bash
-     cd ..
-     cd crowd-funder-for-time-pwa 
-     ```
-   
-   - Ensure the `.env.development` file exists and has the following values:
-   
-     ```env
-     VITE_DEFAULT_ENDORSER_API_SERVER=http://127.0.0.1:3000
-     ```
-   
-   - Install dependencies and run in dev mode. For now don't worry about configuring the app. All we
-     need is to generate the first root user and this happens automatically on app startup.
-  
-     ```bash
-     npm clean install  # or npm ci
-     npm run dev
-     ```
-  
-   - Open the app in a browser and go to the developer tools. It is recommended to use a completely
-     separate browser profile so you do not clear out your existing user account. We will be
-     completely resetting the PWA app state prior to generating the first user.
-   
-     In the Developer Tools go to the Application tab.
-     
-     ![](images/04-pwa-chrome-devtools.png){width=350px} 
-   
-     Click the "Clear site data" button and then refresh the page.
-   
-   - Click the account button in the bottom right corner of the page.
-   
-     ![](images/05-pwa-account-button.png){width=150px}
-   
-   - This will take you to the account page titled "Your Identity" on which you can see your DID,
-     a `did:ethr` DID in this case.
-   
-     ![](images/06-pwa-account-page.png){width=350px}
-   
-   - Copy the DID by selecting it and copying it to the clipboard or by clicking the copy and paste
-     button as shown in the image.
-   
-     ![](images/07-pwa-did-copied.png){width=200px}
-    
-     In our case this DID is:\
-     `did:ethr:0xe4B783c74c8B0e229524e44d0cD898D272E02CD6`
-   
-  - Add that DID to the following echoed SQL statement where it says `YOUR_DID`
-  
-    ```bash
-    echo "INSERT INTO registration (did, maxClaims, maxRegs, epoch) 
-    VALUES ('YOUR_DID', 100, 10000, 1719348718092);"
-    | sqlite3 ./endorser-ch-dev.sqlite3
-    ```
-    
-    and run this command in the parent directory just above the `endorser-ch` directory.
-    
-    It needs to be the parent directory of your `endorser-ch` repository because when 
-    `endorser-ch` creates the SQLite database it depends on it creates it in the parent directory
-    of `endorser-ch`.
-    
-  - You can verify with an SQL browser tool that your record has been added to the `registration`
-    table.
-  
-    ![](images/08-endorser-sqlite-row-added.png){width=350px}
-
-3. Then start the Endorser service in development mode with the following commands.
-  
-    ```bash
-    cd ./endorser-ch
-    export NODE_ENV=dev
-    npm run dev
-    ```
-  
-    This starts the Endorser service on port 3000.
-4. Create the second user by opening up a separate browser profile or incognito session, opening the
-   TimeSafari PWA at `http://localhost:8080`. You will see the yellow banner stating "Someone must
-   register you before you can give or offer."
-   
-   ![](images/09-pwa-second-profile-first-open.png){width=350px}
-   
-   - If you want to ensure you have a fresh user account then open the developer tools, clear the
-     Application data as before, and then refresh the page. This will generate a new user in the 
-     browser's IndexedDB database.
-5. Go to the second users' account page to copy the DID.
-    
-    ![](images/10-pwa-second-user-did.png){width=350px}
-
-6. Copy the DID and put it in the text bar on the "Your Contacts" page for the first account
-
-    ![](images/11-pwa-first-user-add-contact.png){width=350px}
-
-7. Click the "+" plus icon to add the user.
-
-    ![](images/12-pwa-first-user-contact-added.png){width=350px}
-
-8. Then click the register button to register the second user.
-
-    ![](images/13-pwa-first-user-register-second-user-btn.png){width=350px}
-
-9. Click "YES" on the dialog that shows up.
-
-    ![](images/14-pwa-first-user-register-yes.png){width=350px}
-
-    After this a notification will pop up indicating whether registration was successful or not.
-
-10. You have finished the initial set up of users.

index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="/favicon.ico">
-    <title>TimeSafari</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but TimeSafari doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

package.json

@@ -1,109 +1,96 @@
 {
   "name": "TimeSafari",
-  "version": "0.3.57",
+  "version": "0.3.7-beta",
+  "private": true,
   "scripts": {
-    "dev": "vite",
-    "serve": "vite preview",
-    "build": "VITE_GIT_HASH=`git log -1 --pretty=format:%h` vite build",
-    "lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore src",
-    "lint-fix": "eslint --ext .js,.ts,.vue --ignore-path .gitignore --fix src",
-    "prebuild": "eslint --ext .js,.ts,.vue --ignore-path .gitignore src && node sw_combine.js",
-    "test-local": "npx playwright test -c playwright.config-local.ts --trace on",
-    "test-all": "npm run build && npx playwright test -c playwright.config-local.ts --trace on"
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
   },
   "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",
+    "@dicebear/collection": "^5.3.5",
+    "@dicebear/core": "^5.3.5",
     "@ethersproject/hdnode": "^5.7.0",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/vue-fontawesome": "^3.0.6",
-    "@peculiar/asn1-ecc": "^2.3.8",
-    "@peculiar/asn1-schema": "^2.3.8",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/vue-fontawesome": "^3.0.3",
     "@pvermeer/dexie-encrypted-addon": "^3.0.0",
-    "@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",
-    "@veramo/did-manager": "^5.6.0",
-    "@veramo/did-provider-ethr": "^5.6.0",
-    "@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",
+    "@tweenjs/tween.js": "^21.0.0",
+    "@types/js-yaml": "^4.0.9",
+    "@types/luxon": "^3.4.2",
+    "@veramo/core": "^5.4.1",
+    "@veramo/credential-w3c": "^5.4.1",
+    "@veramo/data-store": "^5.4.1",
+    "@veramo/did-manager": "^5.4.1",
+    "@veramo/did-provider-ethr": "^5.4.1",
+    "@veramo/did-resolver": "^5.4.1",
+    "@veramo/key-manager": "^5.4.1",
+    "@vueuse/core": "^10.4.1",
     "@zxing/text-encoding": "^0.9.0",
-    "asn1-ber": "^1.2.2",
-    "axios": "^1.6.8",
-    "cbor-x": "^1.5.9",
+    "axios": "^1.5.0",
+    "buffer": "^6.0.3",
     "class-transformer": "^0.5.1",
-    "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",
+    "core-js": "^3.32.1",
+    "dexie": "^3.2.4",
+    "dexie-export-import": "^4.0.7",
+    "did-jwt": "^7.2.7",
+    "ethereum-cryptography": "^2.1.2",
     "ethereumjs-util": "^7.1.5",
+    "ethr-did-resolver": "^8.1.2",
+    "git-describe": "^4.1.1",
     "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",
+    "localstorage-slim": "^2.5.0",
     "luxon": "^3.4.4",
     "merkletreejs": "^0.3.11",
-    "nostr-tools": "^2.7.2",
+    "moment": "^2.29.4",
     "notiwind": "^2.0.2",
     "papaparse": "^5.4.1",
     "pina": "^0.20.2204228",
-    "pinia-plugin-persistedstate": "^3.2.1",
+    "pinia-plugin-persistedstate": "^3.2.0",
     "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",
+    "ramda": "^0.29.0",
+    "readable-stream": "^4.4.2",
+    "reflect-metadata": "^0.1.13",
     "register-service-worker": "^1.7.2",
     "simple-vue-camera": "^1.1.3",
     "three": "^0.156.1",
     "ua-parser-js": "^1.0.37",
     "util": "^0.12.5",
-    "vue": "^3.4.21",
+    "v-onboarding": "^2.8.1",
+    "vue": "^3.3.4",
     "vue-axios": "^3.5.2",
-    "vue-facing-decorator": "^3.0.4",
-    "vue-picture-cropper": "^0.7.0",
-    "vue-qrcode-reader": "^5.5.3",
-    "vue-router": "^4.3.0",
+    "vue-facing-decorator": "^3.0.2",
+    "vue-qrcode-reader": "^5.4.1",
+    "vue-router": "^4.2.4",
     "web-did-resolver": "^2.0.27"
   },
   "devDependencies": {
-    "@playwright/test": "^1.45.2",
-    "@types/js-yaml": "^4.0.9",
-    "@types/leaflet": "^1.9.8",
-    "@types/luxon": "^3.4.2",
-    "@types/node": "^20.14.11",
-    "@types/ramda": "^0.29.11",
+    "@types/leaflet": "^1.9.4",
+    "@types/ramda": "^0.29.3",
     "@types/three": "^0.155.1",
     "@types/ua-parser-js": "^0.7.39",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
+    "@vue-leaflet/vue-leaflet": "^0.10.1",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-pwa": "~5.0.8",
+    "@vue/cli-plugin-router": "~5.0.8",
+    "@vue/cli-plugin-typescript": "~5.0.8",
+    "@vue/cli-plugin-vuex": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "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",
-    "postcss": "^8.4.38",
-    "prettier": "^3.2.5",
-    "tailwindcss": "^3.4.1",
-    "typescript": "~5.2.2",
-    "vite": "^5.2.0",
-    "vite-plugin-pwa": "^0.19.8"
+    "autoprefixer": "^10.4.15",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "leaflet": "^1.9.4",
+    "postcss": "^8.4.29",
+    "prettier": "^3.1.0",
+    "tailwindcss": "^3.3.3",
+    "typescript": "~5.2.2"
   }
 }

playwright.config-local.ts

@@ -1,98 +0,0 @@
-import { defineConfig, devices } from "@playwright/test";
-
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// import dotenv from 'dotenv';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig({
-  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. */
-  forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  /* 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",
-  /* 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:8081",
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: "on-first-retry",
-  },
-
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: "chromium",
-      use: {
-        ...devices["Desktop Chrome"],
-        permissions: ["clipboard-read"],
-      },
-    },
-
-    {
-      name: "firefox",
-      use: { ...devices["Desktop Firefox"] },
-    },
-
-    {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] },
-    },
-
-    /* Test against mobile viewports. */
-    {
-      name: "Mobile Chrome",
-      use: { ...devices["Pixel 5"] },
-    },
-    {
-      name: "Mobile Safari",
-      use: { ...devices["iPhone 12"] },
-    },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    {
-      name: "Google 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: 30000, // various tests fail at various times with 25000
-
-  /* Run your local dev server before starting the tests */
-  /**
-   * This could be an array of servers, meaning we could start the Endorser server as well:
-   *     {
-   *       command: "cd ../endorser-ch; NODE_ENV=test-local npm run dev",
-   *       url: 'http://localhost:3000',
-   *       reuseExistingServer: !process.env.CI,
-   *     },
-   *
-   * But if we do then the testInfo.config.webServer is null and the API-setting test 00 fails.
-   * It is worth considering a change such that Time Safari's default Endorser API server is NOT set
-   * in the user's settings so that it can be blanked out and the default is used.
-   */
-  webServer: {
-    command:
-      "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:8081",
-    reuseExistingServer: !process.env.CI,
-  },
-});

playwright.config.ts

@@ -1,82 +0,0 @@
-import { defineConfig, devices } from '@playwright/test';
-
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// import dotenv from 'dotenv';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig({
-  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. */
-  forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  /* 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',
-  /* 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: 'https://test.timesafari.app',
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
-  },
-
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome'],
-        permissions: ["clipboard-read"],
-      },
-    },
-
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-
-    /* Test against mobile viewports. */
-    {
-      name: 'Mobile Chrome',
-      use: { ...devices['Pixel 5'] },
-    },
-    {
-      name: 'Mobile Safari',
-      use: { ...devices['iPhone 12'] },
-    },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
-  ],
-
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command:
-  //     "VITE_PASSKEYS_ENABLED=true VITE_DEFAULT_ENDORSER_API_SERVER=http://localhost:3000 npm run dev",
-  //   url: "http://localhost:8080",
-  //   reuseExistingServer: !process.env.CI,
-  // },
-});

project.task.yaml

@@ -1,4 +1,178 @@
 
 tasks :
 
-- This list has moved - see https://sharing.clickup.com/9014278710/l/h/6-901402735154-1/685f1be3f9b150d
+- 24 contextual tutorials https://docs.google.com/document/d/11C_K3RM0rgo0onih20KFhcIzukZyq_CRWqaWX5om_kM/edit#heading=h.iwiwcydou5hw
+
+- 24 Move to Vite
+
+- .1 add KindSpring link to ideas
+- .1 on feed, don't show "to someone anonymous" if it's to a project
+- .1 on ideas, put an "x" to close it assignee-group:ui
+- 16 save data backups in Google
+- 16 generate and use passkeys for identities
+- .5 show "give" buttons (eg. from anonymous) even if they can't give, greyed out, and give them a warning and instructions
+- .2 when adding a claim on home screen, push that claim to the top of the list
+
+- .2 fix give dialog from "more contacts" off home page to allow giving to this user
+- .2 fix bottom of project selection map, where the icons are hidden but a tap goes to the icon's page assignee-group:ui
+- .5 stop from seeing an error on the first page when browser doesn't support service workers (which I've seen on iPhone; visible in Firefox private window)
+- .2 don't show a warning on a totally new project when the authorized agent is set
+- .2 anchor hash into BTC
+- .2 list the "show more" contacts alphabetically
+
+- .5 make Time Safari a share_target for images
+
+- 08 add image on profile
+
+- ask to detect location & record it in settings
+- if personal location is set, show potential local affiliations
+
+- 24 compelling UI for credential presentations
+  - discover who in my network has activity on a project
+
+- 24 compelling UI for statistics (eg. World?)
+
+- 01 in the feed, group by project or contact or topic or time/$ (via BC); new projects, offers, search area, etc assignee-group:ui
+- 01 separate not-on-platform vs totally anonymous; terminology "unidentified"?
+- .2 add links between projects assignee-group:ui
+- 24 make the contact browsing on the front page something that invites more action
+
+- .5 change server plan & project endpoints to use jwtId as identifier rather than rowid
+- 16 edit offers & gives, or revoke allowing re-creation
+- .1 When available in the server, give message for 'nonAmountGiven' on offers on ProjectsView page.
+- .1 Add help instructions for "Encryption key has changed" error. (It is a problem if localStorage is cleared, but the contacts & settings remain and they have to restore their seeds.)
+- .1 show better error when user with no ID goes to the "My Project" page
+- 01 in front page prompt for ideas for gratitude :
+  - randomize (not show in order)
+  - checkboxes - show non-person-oriented messages, show only contacts, show only projects
+
+- .5 add a notice on the front page if their notifications are off
+- 08 allow user to add a time when they want their daily notification
+
+- .5 prompt for the name directly when they visit the QR scan page
+- 01 mark a project as inactive
+- 01 add share button for sending a message to confirmers when we can't see the claim (like the "visible" links)
+- .5 add TimeSafari as a shareable app https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target
+- .5 choose a project's alternative agent ("authorized representative") via a contact chooser (not just copy-paste a DID)
+- .5 find out why clicking quickly back-and-forth onto the "my project" page often shows error "You need an identifier to load your projects." (easier to reproduce on desktop?)
+- .5 bug - it didn't show the "fulfills offer" on the claim detail page for a give that had one - https://test.timesafari.app/claim/01HMFWRPA3PD6Q9EYFKX3MC41J
+- 01 replace all "confirm" prompts with nicer modal
+- .1 hide project-create button on project page if not registered
+- .1 hide offer & give buttons on project list page if not registered
+- .1 add cursor-pointer on the icons for giving on the project page, and on the list of projects on the discover page
+- .2 record when InfiniteScroll hits the end of the list and don't trigger any more loads (feed, project list, give & offer lists)
+
+- bug (that is hard to reproduce) - got blank screen and errors on iPhone with no bottom tabs
+- bug - turning notifications on from the help screen did not stay, though account screen toggle did stay (From Jason on iPhone.)
+- refactor - supply the projectId to the OfferDialog just like we do with the GiftedDialog offerId (in the "open" method, maybe as well as an attribute)
+- the confirm button on each give on the ProjectViewView page doesn't have all the context of the ClaimView page, so it can show sometimes inappropriately; consider consolidation
+- make the "give" on contact screen work like other give (allowing donation vs current blank)
+- .2 on ClaimView, the "ask someone" should refer to "visible" IDs, or to confirmations only if confirmations are visible
+- message "send them to this page" on ClaimView should be a link (for installed app)
+- When we update a version, desktop browser users have seen nothing happen after clicking on the contact page QR and on the account page "Help"; errors show in the console. Reload fixed it. If this happens on mobile, ask the user to reload.
+
+- 01 show my VCs - most interesting, or via search
+- 04 allow user to download & prove chains of VCs, mine + ones I can see about me from others
+
+- revenue to support server operation
+
+- .1 copy button for seed
+- .5 If notifications are not enabled, add message to front page with link/button to enable
+- make server endpoint for full English description of limits
+- create a help-desk document & add screenshots
+
+- .1 update "offer" units to have same functionality as "give" units
+- .5 add a link to any 'give' records that fulfill an offer on ClaimView
+- 01 on home page, prompt for install check in addition to "supports notifications" check (since they won't get notified if Chrome is closed)
+- 01 on Mac (& Windows?) desktop, add a help blurb so that they can find it again (since it doesn't show in Application list)
+- bug (that is hard to reproduce) - got error adding on Firefox user #0 as contact for themselves
+- bug (that is hard to reproduce) - in Chrome, install app then delete app and try from Chrome browser and see log errors "Uncaught TypeError: self.appendDailyLog is not a function"
+- bug (that is hard to reproduce) - on the second 'give' recorded on prod it showed me as the agent
+- 04 remove 'rowid' references (that are sqlite-specific); may involve server
+- 04 look at other examples for better onboarding UI, eg friend.tech
+- .5 Add inactive flag / end date, start date to project
+- .3 check that Android shows "back" buttons on screens without bottom tray
+- .1 Make give description text box into something that expands as they type?
+- .2 Show a warning if both giver and recipient are the same (but still allow?)
+- 01 Would it look better to shrink the buttons on many pages so they don't expand to the width of the screen? assignee-group:ui
+- .5 Display a more appealing confirmation on the map when erasing the marker
+- .5 remove references to localStorage for projectId (now that it's pulling from the path)
+- switch some checks for activeDid to check for isRegistered
+- .2 in SeedBackupView, don't load the mnemonic and keep it in memory; only load it when they click "show"
+- .5 fix cert generation on server (since it didn't happen automatically for Nov 30)
+- warn if they're using the web (android only?)
+  https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getInstalledRelatedApps
+  https://web.dev/articles/get-installed-related-apps
+- .5 fix the "onboarding help" list of instructions so that it always formats right (currently doesn't show numbers aligned on Google Pixel 6a, iPhone 11 Pro, iPhone 12 mini)
+- .5 make the "onboarding help" it so that it doesn't cover the QR icon on the contacts page
+- .5 fix masked icon (because some of the top-right of the binoculars is cut off)
+
+- contacts v+ :
+  - 01 Import all the non-sensitive data (ie. contacts & settings).
+  - .2 show error to user when adding a duplicate contact
+  - 01 parse input more robustly (with CSV lib and not commas)
+
+- stats v1 :
+  - 01 show numeric stats
+  - 04 show different graphic for projects vs people (gnome?) on world
+  - 01 link to world for specific stats
+  - .5 don't load another instance of a bush if it already exists
+  - maybe - allow type annotations in World.js & landmarks.js (since we get this error - "Types are not supported by current JavaScript version")
+  - 08 convert to cleaner implementation (maybe Drie -- https://github.com/janvorisek/drie)
+
+- .5 show seed phrase in a QR code for transfer to another device
+- .5 on DiscoverView, switch to a filter UI (eg. just from friend
+- .5 don't show "Offer" on project screen if they aren't registered
+- 01 especially for iOS, check for new version & update, eg. https://stackoverflow.com/questions/52221805/any-way-yet-to-auto-update-or-just-clear-the-cache-on-a-pwa-on-ios
+
+- 24 allow a person record with interests, including location; purpose? contact methods? enhance other connections the same? (suggestion from Philippines) assignee-group:ui
+- 24 brief introduction slides https://docs.google.com/document/d/11C_K3RM0rgo0onih20KFhcIzukZyq_CRWqaWX5om_kM/edit#heading=h.iwiwcydou5hw
+- 12 feedback https://docs.google.com/document/d/11C_K3RM0rgo0onih20KFhcIzukZyq_CRWqaWX5om_kM/edit#heading=h.iwiwcydou5hw
+
+- 32 accept images for projects
+- 32 accept images for contacts
+- import project interactions from GitHub/GitLab and manage signing
+
+- show total time offered to & fulfilled to a project
+- show total time offered by & fulfilled by a contact
+
+- linking between projects or plans :
+  - show total time given to & from a project
+  - terminology:
+    - for subtasks: fulfills (is it really the same?), feeds, contributes to, supplies, boosts, advances
+    - for blocking: blocks, precedes, comes before, is sought by -- vs follows, seeks, builds on ("contributes to" isn't specific enough, "succeeds" has different, possibly confusing meaning)
+
+- .5 fit as many icons as possible on home & project view screens but only going halfway down the page assignee-group:ui
+- .5 Replace Gifted/Give in ContactsView with GiftedDialog
+
+- Stats :
+  - 01 point out user's location on the world
+  - 01 present a credential selected from the stats
+  - 04 show gives spreading to other places
+  - badge for most gives/receives/confirms per day/week/month
+  - badge for amount given/offered to your project
+  - set a goal of given/offers
+
+- automated tests, eg. pup-test or cypress
+
+- Notifications (wake on the phone, push notifications)
+  - 02 change push server so that the web-push/subscribe call sets up a thread for the 10-seconds-later push notification, but returns immediately to the callee
+  - pull instead of push, maybe via scheduled runs
+  - have a notification pop-up on Mac screen
+
+- 16 Connect with phone contacts - this may be a whole different app, because we want a quick link A) to the same phone contact and B) from the phone contact app
+
+- Support KERI AIDs
+- Support Peer DIDs
+- Support messaging through DIDComm
+- Write to or read from a different ledger (eg. private ACDC, EAS & attest.sh)
+
+- 01 On nearby search, if user starts changing their box but cancels and goes back to the map it is zoomed far out. Fix to fit the box better.
+
+- allow some gives even if they aren't registered - maybe someday as a gift to the world, but we really want this to be built via personal connections -- and that allows spam
+- .1 When Chrome shows compatibility https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API#api.navigator.canshare
+  then change the canShare check in this app to check the real canShare() method.
+
+log :
+- videos for multiple identities https://youtu.be/p8L87AeD76w and for adding time to contacts https://youtu.be/7Yylczevp10 done:2023-03-29
+- project lists, contact totals & actions, multiple identifiers, stats-world, activity feed, rename of this project file (use "--follow --") milestone:2 done:2023-06-27

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

@@ -1,86 +0,0 @@
-<?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>

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

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">{{ truncateLongWords(notification.text) }}</p>
+              <p class="text-sm">{{ 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">{{ truncateLongWords(notification.text) }}</p>
+              <p class="text-sm">{{ 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">{{ truncateLongWords(notification.text) }}</p>
+              <p class="text-sm">{{ 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">{{ truncateLongWords(notification.text) }}</p>
+              <p class="text-sm">{{ notification.text }}</p>
 
               <button
                 @click="close(notification.id)"
@@ -129,10 +129,7 @@
     </div>
   </NotificationGroup>
 
-  <!--
-    This "group" of "modal" is the prompt for an answer.
-    Set "type" as follows: "confirm" for yes/no, and "notification" ones: "-permission", "-mute", "-off"
-  -->
+  <!-- These are general-purpose messages - except there are some for turning app notifications on and off. -->
   <NotificationGroup group="modal">
     <div class="fixed z-[100] top-0 inset-x-0 w-full">
       <Notification
@@ -146,19 +143,13 @@
         move="transition duration-500"
         move-delay="delay-300"
       >
-        <!-- see NotificationIface in constants/app.ts -->
         <div
           v-for="notification in notifications"
           :key="notification.id"
           class="w-full"
           role="alert"
         >
-          <!--
-           Type of "confirm" will post a message.
-           With onYes function, show a "Yes" button to call that function.
-           With onNo function, show a "No" button to call that function,
-             and pass it state of "askAgain" field shown if you set promptToStopAsking.
-          -->
+          <!-- type "confirm" will post a message and, with onYes function, show a "Yes" button to call that function -->
           <div
             v-if="notification.type === 'confirm'"
             class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
@@ -167,10 +158,9 @@
               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">
+                <p class="text-lg mb-4">
                   {{ notification.title }}
-                </span>
-                <p class="text-sm mb-2">{{ notification.text }}</p>
+                </p>
 
                 <button
                   v-if="notification.onYes"
@@ -180,57 +170,11 @@
                   "
                   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{{
-                    notification.yesText ? ", " + notification.yesText : ""
-                  }}
+                  Yes
                 </button>
 
                 <button
-                  v-if="notification.onNo"
-                  @click="
-                    notification.onNo(stopAsking);
-                    close(notification.id);
-                    stopAsking = false; // reset value
-                  "
-                  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 : "" }}
-                </button>
-
-                <label
-                  v-if="notification.promptToStopAsking && notification.onNo"
-                  for="toggleStopAsking"
-                  class="flex items-center justify-between cursor-pointer my-4"
-                  @click="stopAsking = !stopAsking"
-                >
-                  <!-- label -->
-                  <span class="ml-2">... and do not ask again.</span>
-                  <!-- toggle -->
-                  <div class="relative ml-2">
-                    <!-- input -->
-                    <input
-                      type="checkbox"
-                      v-model="stopAsking"
-                      name="stopAsking"
-                      class="sr-only"
-                    />
-                    <!-- line -->
-                    <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
-                    <!-- dot -->
-                    <div
-                      class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
-                    ></div>
-                  </div>
-                </label>
-
-                <button
-                  @click="
-                    notification.onCancel
-                      ? notification.onCancel(stopAsking)
-                      : null;
-                    close(notification.id);
-                    stopAsking = false; // reset value for next time they open this modal
-                  "
+                  @click="close(notification.id)"
                   class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
                 >
                   {{ notification.onYes ? "Cancel" : "Close" }}
@@ -238,7 +182,43 @@
               </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 <b>turn on</b> notifications for this app?
+                </p>
+                <p v-else class="text-lg mb-4">
+                  Waiting for system initialization, which may take up to 10
+                  seconds...
+                  <fa icon="spinner" spin />
+                </p>
 
+                <button
+                  v-if="serviceWorkerReady"
+                  class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
+                  @click="
+                    close(notification.id);
+                    turnOnNotifications();
+                  "
+                >
+                  Turn on Notifications
+                </button>
+
+                <button
+                  @click="close(notification.id)"
+                  class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
+                >
+                  Maybe Later
+                </button>
+              </div>
+            </div>
+          </div>
           <div
             v-if="notification.type === 'notification-mute'"
             class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
@@ -252,17 +232,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 Day
+                  For 1 Hour
                 </button>
                 <button
                   class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
                 >
-                  For 2 Days
+                  For 8 Hours
                 </button>
                 <button
                   class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
                 >
-                  For 1 Week
+                  For 24 Hours
                 </button>
                 <button
                   class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
@@ -278,7 +258,6 @@
               </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"
@@ -288,17 +267,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> this notification?
+                  Would you like to <b>turn off</b> notifications for this app?
                 </p>
 
                 <button
                   @click="
                     close(notification.id);
-                    turnOffNotifications(notification);
+                    turnOffNotifications();
                   "
                   class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md mb-2"
                 >
-                  Turn Off Notification
+                  Turn Off Notifications
                 </button>
                 <button
                   @click="close(notification.id)"
@@ -319,115 +298,351 @@
 
 <script lang="ts">
 import { Vue, Component } from "vue-facing-decorator";
+import axios from "axios";
+interface ServiceWorkerMessage {
+  type: string;
+  data: string;
+}
 
-import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
-import { NotificationIface } from "./constants/app";
+interface ServiceWorkerResponse {
+  // Define the properties and their types
+  success: boolean;
+  message?: string;
+}
+
+// Example interface for error
+interface ErrorResponse {
+  message: string;
+  // Other properties as needed
+}
+
+interface VapidResponse {
+  data: {
+    vapidKey: string;
+  };
+}
+
+import { DEFAULT_PUSH_SERVER, 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 = "";
+  serviceWorkerReady = false;
 
-  truncateLongWords(sentence: string) {
-    return sentence
-      .split(" ")
-      .map((word) => (word.length > 30 ? word.slice(0, 30) + "..." : word))
-      .join(" ");
+  async mounted() {
+    try {
+      await db.open();
+      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+      let pushUrl = DEFAULT_PUSH_SERVER;
+      if (settings?.webPushServer) {
+        pushUrl = settings.webPushServer;
+      }
+
+      await axios
+        .get(pushUrl + "/web-push/vapid")
+        .then((response: VapidResponse) => {
+          this.b64 = response.data?.vapidKey || "";
+          console.log("Got vapid key:", this.b64);
+          navigator.serviceWorker.addEventListener("controllerchange", () => {
+            console.log("New service worker is now controlling the page");
+          });
+        });
+      if (!this.b64) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error Setting Notifications",
+            text: "Could not set notifications.",
+          },
+          -1,
+        );
+      }
+    } catch (error) {
+      if (window.location.host.startsWith("localhost")) {
+        console.log("Ignoring the error getting VAPID for local development.");
+      } else {
+        console.error("Got an error initializing notifications:", error);
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error Setting Notifications",
+            text: "Got an error setting notifications.",
+          },
+          -1,
+        );
+      }
+    }
+    // there may be a long pause here on first initialization
+    navigator.serviceWorker?.ready.then(() => {
+      this.serviceWorkerReady = true;
+    });
   }
 
-  async turnOffNotifications(notification: NotificationIface) {
-    let subscription: object | null = null;
+  private sendMessageToServiceWorker(
+    message: ServiceWorkerMessage,
+  ): Promise<unknown> {
+    return new Promise((resolve, reject) => {
+      if (navigator.serviceWorker.controller) {
+        const messageChannel = new MessageChannel();
 
-    let allGoingOff = false;
-    const settings = await retrieveSettingsForActiveAccount();
-    const notifyingNewActivity = !!settings?.notifyingNewActivityTime;
-    const notifyingReminder = !!settings?.notifyingReminderTime;
-    if (!notifyingNewActivity || !notifyingReminder) {
-      // the other notification is already off, so fully unsubscribe now
-      allGoingOff = true;
+        messageChannel.port1.onmessage = (event: MessageEvent) => {
+          if (event.data.error) {
+            reject(event.data.error as ErrorResponse);
+          } else {
+            resolve(event.data as ServiceWorkerResponse);
+          }
+        };
+
+        navigator.serviceWorker.controller.postMessage(message, [
+          messageChannel.port2,
+        ]);
+      } else {
+        reject("Service worker controller not available");
+      }
+    });
+  }
+
+  private askPermission(): Promise<NotificationPermission> {
+    console.log("Requesting permission for notifications:", navigator);
+    if (!("serviceWorker" in navigator && navigator.serviceWorker.controller)) {
+      return Promise.reject("Service worker not available.");
     }
 
-    await navigator.serviceWorker?.ready
+    const secret = localStorage.getItem("secret");
+    if (!secret) {
+      return Promise.reject("No secret found.");
+    }
+
+    return this.sendSecretToServiceWorker(secret)
+      .then(() => this.checkNotificationSupport())
+      .then(() => this.requestNotificationPermission())
+      .catch((error) => Promise.reject(error));
+  }
+
+  private sendSecretToServiceWorker(secret: string): Promise<void> {
+    const message: ServiceWorkerMessage = {
+      type: "SEND_LOCAL_DATA",
+      data: secret,
+    };
+
+    return this.sendMessageToServiceWorker(message).then((response) => {
+      console.log("Response from service worker:", response);
+    });
+  }
+
+  private checkNotificationSupport(): Promise<void> {
+    if (!("Notification" in window)) {
+      alert("This browser does not support notifications.");
+      return Promise.reject("This browser does not support notifications.");
+    }
+    if (Notification.permission === "granted") {
+      return Promise.resolve();
+    }
+    return Promise.resolve();
+  }
+
+  private requestNotificationPermission(): Promise<NotificationPermission> {
+    return Notification.requestPermission().then((permission) => {
+      if (permission !== "granted") {
+        alert(
+          "Allow this app permission to make notifications for personal reminders." +
+            " You can adjust them at any time in your settings.",
+        );
+        throw new Error("We weren't granted permission.");
+      }
+      return permission;
+    });
+  }
+
+  public async turnOnNotifications() {
+    return this.askPermission()
+      .then((permission) => {
+        console.log("Permission granted:", permission);
+
+        // Call the function and handle promises
+        this.subscribeToPush()
+          .then(() => {
+            console.log("Subscribed successfully.");
+            return navigator.serviceWorker?.ready;
+          })
+          .then((registration) => {
+            return registration.pushManager.getSubscription();
+          })
+          .then(async (subscription) => {
+            if (subscription) {
+              await this.$notify(
+                {
+                  group: "alert",
+                  type: "info",
+                  title: "Notification Setup Underway",
+                  text: "Setting up notifications for interesting activity, which takes about 10 seconds. If you don't see a final confirmation, check the 'Troubleshoot' page.",
+                },
+                -1,
+              );
+              this.sendSubscriptionToServer(subscription);
+              return subscription;
+            } else {
+              throw new Error("Subscription object is not available.");
+            }
+          })
+          .then(async (subscription) => {
+            console.log(
+              "Subscription data sent to server and all finished successfully.",
+            );
+            await sendTestThroughPushServer(subscription, true);
+            this.$notify(
+              {
+                group: "alert",
+                type: "success",
+                title: "Notifications Turned On",
+                text: "Notifications are on. You should see at least one on your device; if not, check the 'Troubleshoot' page.",
+              },
+              -1,
+            );
+          })
+          .catch((error) => {
+            console.error(
+              "Subscription or server communication failed:",
+              error,
+            );
+            alert(
+              "Subscription or server communication failed. Try again in a while.",
+            );
+          });
+      })
+      .catch((error) => {
+        console.error(
+          "An error occurred setting notification permissions:",
+          error,
+        );
+        alert("Some error occurred setting notification permissions.");
+      });
+  }
+
+  private urlBase64ToUint8Array(base64String: string): Uint8Array {
+    const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+    const base64 = (base64String + padding)
+      .replace(/-/g, "+")
+      .replace(/_/g, "/");
+    const rawData = window.atob(base64);
+    const outputArray = new Uint8Array(rawData.length);
+
+    for (let i = 0; i < rawData.length; ++i) {
+      outputArray[i] = rawData.charCodeAt(i);
+    }
+    return outputArray;
+  }
+
+  private subscribeToPush(): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      if (!("serviceWorker" in navigator && "PushManager" in window)) {
+        const errorMsg = "Push messaging is not supported";
+        console.warn(errorMsg);
+        return reject(new Error(errorMsg));
+      }
+
+      if (Notification.permission !== "granted") {
+        const errorMsg = "Notification permission not granted";
+        console.warn(errorMsg);
+        return reject(new Error(errorMsg));
+      }
+
+      const applicationServerKey = this.urlBase64ToUint8Array(this.b64);
+      const options: PushSubscriptionOptions = {
+        userVisibleOnly: true,
+        applicationServerKey: applicationServerKey,
+      };
+
+      navigator.serviceWorker.ready
+        .then((registration) => {
+          return registration.pushManager.subscribe(options);
+        })
+        .then((subscription) => {
+          console.log("Push subscription successful:", subscription);
+          resolve();
+        })
+        .catch((error) => {
+          console.error("Push subscription failed:", error, options);
+
+          // Inform the user about the issue
+          alert(
+            "We encountered an issue setting up push notifications. " +
+              "If you wish to revoke notification permissions, please do so in your browser settings.",
+          );
+
+          reject(error);
+        });
+    });
+  }
+
+  private sendSubscriptionToServer(
+    subscription: PushSubscription,
+  ): Promise<void> {
+    console.log("About to send subscription...", subscription);
+    return fetch("/web-push/subscribe", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(subscription),
+    }).then((response) => {
+      if (!response.ok) {
+        throw new Error("Failed to send subscription to server");
+      }
+      console.log("Subscription sent to server successfully.");
+    });
+  }
+
+  async turnOffNotifications() {
+    let subscription;
+    const pushProviderSuccess = await navigator.serviceWorker?.ready
       .then((registration) => {
         return registration.pushManager.getSubscription();
       })
-      .then(async (subscript: PushSubscription | null) => {
-        if (subscript) {
-          subscription = subscript.toJSON();
-          if (allGoingOff) {
-            await subscript.unsubscribe();
-          }
+      .then((subscript) => {
+        subscription = subscript;
+        if (subscription) {
+          return subscription.unsubscribe();
         } else {
-          logConsoleAndDb("Subscription object is not available.");
+          console.log("Subscription object is not available.");
+          return false;
         }
       })
       .catch((error) => {
-        logConsoleAndDb(
-          "Push provider server communication failed: " + JSON.stringify(error),
-          true,
-        );
+        console.error("Push provider server communication failed:", error);
+        return false;
       });
 
-    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(serverSubscription),
+      body: JSON.stringify(subscription),
     })
       .then((response) => {
         return response.ok;
       })
       .catch((error) => {
-        logConsoleAndDb(
-          "Push server communication failed: " + JSON.stringify(error),
-          true,
-        );
+        console.error("Push server communication failed:", error);
         return false;
       });
 
-    let message;
-    if (pushServerSuccess) {
-      message = "Notification is off.";
-    } else {
-      message = "Notification is still on. Try to turn it off again.";
-    }
-    this.$notify(
-      {
-        group: "alert",
-        type: "info",
-        title: "Finished",
-        text: message,
-      },
-      5000,
+    alert(
+      "Notifications are off. Push provider unsubscribe " +
+        (pushProviderSuccess ? "succeeded" : "failed") +
+        (pushProviderSuccess === pushServerSuccess ? " and" : " but") +
+        " push server unsubscribe " +
+        (pushServerSuccess ? "succeeded" : "failed") +
+        ".",
     );
-
-    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/assets/styles/tailwind.css

@@ -1,8 +1,9 @@
-@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
+
 @layer base {
     html {
         font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;

src/components/ChoiceButtonDialog.vue

@@ -1,152 +0,0 @@
-<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

@@ -1,102 +0,0 @@
-<!-- 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/EntityIcon.vue

@@ -5,36 +5,20 @@
 import { createAvatar, StyleOptions } from "@dicebear/core";
 import { avataaars } from "@dicebear/collection";
 import { Vue, Component, Prop } from "vue-facing-decorator";
-import { Contact } from "@/db/tables/contacts";
 
 @Component
 export default class EntityIcon extends Vue {
-  @Prop contact: Contact;
-  @Prop entityId = ""; // overridden by contact.did or profileImageUrl
+  @Prop entityId = "";
   @Prop iconSize = 0;
-  @Prop profileImageUrl = ""; // overridden by contact.profileImageUrl
 
   generateIcon() {
-    const imageUrl = this.contact?.profileImageUrl || this.profileImageUrl;
-    if (imageUrl) {
-      return `<img src="${imageUrl}" class="rounded" width="${this.iconSize}" height="${this.iconSize}" />`;
-    } else {
-      const identifier = this.contact?.did || this.entityId;
-      if (!identifier) {
-        return `<img src="../src/assets/blank-square.svg" class="rounded" width="${this.iconSize}" height="${this.iconSize}" />`;
-      }
-      // https://api.dicebear.com/8.x/avataaars/svg?seed=
-      // ... does not render things with the same seed as this library.
-      // "did:ethr:0x222BB77E6Ff3774d34c751f3c1260866357B677b" yields a girl with flowers in her hair and a lightning earring
-      // ... which looks similar to '' at the dicebear site but which is different.
-      const options: StyleOptions<object> = {
-        seed: (identifier as string) || "",
-        size: this.iconSize,
-      };
-      const avatar = createAvatar(avataaars, options);
-      const svgString = avatar.toString();
-      return svgString;
-    }
+    const options: StyleOptions<object> = {
+      seed: this.entityId || "",
+      size: this.iconSize,
+    };
+    const avatar = createAvatar(avataaars, options);
+    const svgString = avatar.toString();
+    return svgString;
   }
 }
 </script>

src/components/FeedFilters.vue

@@ -1,219 +0,0 @@
-<template>
-  <div v-if="visible" id="dialogFeedFilters" class="dialog-overlay">
-    <div class="dialog">
-      <h1 class="text-xl font-bold text-center mb-4">Feed Filters</h1>
-
-      <p class="mb-4 font-bold">Show only activities that…</p>
-
-      <div class="grid grid-cols-1 gap-2">
-        <div
-          class="flex items-center justify-between cursor-pointer"
-          @click="toggleHasVisibleDid()"
-        >
-          <!-- label -->
-          <div>Include someone visible to me</div>
-          <!-- toggle -->
-          <div class="relative ml-2">
-            <!-- input -->
-            <input
-              type="checkbox"
-              v-model="hasVisibleDid"
-              name="toggleFilterFromMyContacts"
-              class="sr-only"
-            />
-            <!-- line -->
-            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
-            <!-- dot -->
-            <div
-              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
-            ></div>
-          </div>
-        </div>
-
-        <em>or</em>
-
-        <div
-          class="flex items-center justify-between cursor-pointer"
-          @click="
-            hasSearchBox
-              ? toggleNearby()
-              : $router.push({ name: 'search-area' })
-          "
-        >
-          <!-- label -->
-          <div>Are nearby</div>
-          <!-- toggle -->
-          <div v-if="hasSearchBox" class="relative ml-2">
-            <!-- input -->
-            <input
-              type="checkbox"
-              v-model="isNearby"
-              name="toggleFilterNearby"
-              class="sr-only"
-            />
-            <!-- line -->
-            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
-            <!-- dot -->
-            <div
-              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
-            ></div>
-          </div>
-          <div v-else class="relative ml-2">
-            <button class="ml-2 px-4 py-2 rounded-md bg-blue-200 text-blue-500">
-              Select Location
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mt-4">
-        <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"
-          @click="setAll()"
-        >
-          Set All
-        </button>
-        <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"
-          @click="clearAll()"
-        >
-          Clear All
-        </button>
-        <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"
-          @click="done()"
-        >
-          Done
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component } from "vue-facing-decorator";
-import {
-  LMap,
-  LMarker,
-  LRectangle,
-  LTileLayer,
-} from "@vue-leaflet/vue-leaflet";
-
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
-
-@Component({
-  components: {
-    LRectangle,
-    LMap,
-    LMarker,
-    LTileLayer,
-  },
-})
-export default class FeedFilters extends Vue {
-  onCloseIfChanged = () => {};
-  hasSearchBox = false;
-  hasVisibleDid = false;
-  isNearby = false;
-  settingChanged = false;
-  visible = false;
-
-  async open(onCloseIfChanged: () => void) {
-    this.onCloseIfChanged = onCloseIfChanged;
-
-    const settings = await retrieveSettingsForActiveAccount();
-    this.hasVisibleDid = !!settings.filterFeedByVisible;
-    this.isNearby = !!settings.filterFeedByNearby;
-    if (settings.searchBoxes && settings.searchBoxes.length > 0) {
-      this.hasSearchBox = true;
-    }
-
-    this.settingChanged = false;
-    this.visible = true;
-  }
-
-  async toggleHasVisibleDid() {
-    this.settingChanged = true;
-    this.hasVisibleDid = !this.hasVisibleDid;
-    await db.settings.update(MASTER_SETTINGS_KEY, {
-      filterFeedByVisible: this.hasVisibleDid,
-    });
-  }
-
-  async toggleNearby() {
-    this.settingChanged = true;
-    this.isNearby = !this.isNearby;
-    await db.settings.update(MASTER_SETTINGS_KEY, {
-      filterFeedByNearby: this.isNearby,
-    });
-  }
-
-  async clearAll() {
-    if (this.hasVisibleDid || this.isNearby) {
-      this.settingChanged = true;
-    }
-
-    await db.settings.update(MASTER_SETTINGS_KEY, {
-      filterFeedByNearby: false,
-      filterFeedByVisible: false,
-    });
-
-    this.hasVisibleDid = false;
-    this.isNearby = false;
-  }
-
-  async setAll() {
-    if (!this.hasVisibleDid || !this.isNearby) {
-      this.settingChanged = true;
-    }
-
-    await db.settings.update(MASTER_SETTINGS_KEY, {
-      filterFeedByNearby: true,
-      filterFeedByVisible: true,
-    });
-
-    this.hasVisibleDid = true;
-    this.isNearby = true;
-  }
-
-  close() {
-    if (this.settingChanged) {
-      this.onCloseIfChanged();
-    }
-    this.visible = false;
-  }
-
-  done() {
-    this.close();
-  }
-}
-</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;
-}
-
-#dialogFeedFilters.dialog-overlay {
-  z-index: 100;
-  overflow: scroll;
-}
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
-</style>

src/components/GiftedDialog.vue

@@ -2,12 +2,12 @@
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
       <h1 class="text-xl font-bold text-center mb-4">
-        {{ customTitle }}
+        {{ message }} {{ giver?.name || "somebody not named" }}
       </h1>
       <input
         type="text"
         class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
-        :placeholder="prompt || 'What was given?'"
+        placeholder="What was received"
         v-model="description"
       />
       <div class="flex flex-row justify-center">
@@ -15,7 +15,7 @@
           class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
           @click="changeUnitCode()"
         >
-          {{ libsUtil.UNIT_SHORT[unitCode] || unitCode }}
+          {{ libsUtil.UNIT_SHORT[unitCode] }}
         </span>
         <div
           class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
@@ -24,7 +24,6 @@
           <fa icon="chevron-left" />
         </div>
         <input
-          id="inputGivenAmount"
           type="number"
           class="border border-r-0 border-slate-400 px-2 py-2 text-center w-20"
           v-model="amountInput"
@@ -46,17 +45,15 @@
                 description,
                 giverDid: giver?.did,
                 giverName: giver?.name,
+                message,
                 offerId,
-                fulfillsProjectId: toProjectId,
-                providerProjectId: fromProjectId,
-                recipientDid: receiver?.did,
-                recipientName: receiver?.name,
+                projectId,
                 unitCode,
               },
             }"
             class="text-blue-500"
           >
-            Photo & more options ...
+            Photo, ...
           </router-link>
         </span>
       </div>
@@ -68,20 +65,18 @@
           @click="explainData()"
         />
       </p>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-        <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"
-          @click="confirm"
-        >
-          Sign &amp; Send
-        </button>
-        <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"
-          @click="cancel"
-        >
-          Cancel
-        </button>
-      </div>
+      <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="confirm"
+      >
+        Sign &amp; Send
+      </button>
+      <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"
+        @click="cancel"
+      >
+        Cancel
+      </button>
     </div>
   </div>
 </template>
@@ -93,19 +88,20 @@ import { NotificationIface } from "@/constants/app";
 import {
   createAndSubmitGive,
   didInfo,
-  serverMessageForUser,
+  GiverInputInfo,
 } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { accountsDB, db } 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 fromProjectId = "";
-  @Prop toProjectId = "";
+  @Prop message = "";
+  @Prop projectId = "";
+  @Prop showGivenToUser = false;
 
   activeDid = "";
   allContacts: Array<Contact> = [];
@@ -113,46 +109,37 @@ export default class GiftedDialog extends Vue {
   apiServer = "";
 
   amountInput = "0";
-  callbackOnSuccess?: (amount: number) => void = () => {};
-  customTitle?: string;
   description = "";
-  giver?: libsUtil.GiverReceiverInputInfo; // undefined means no identified giver agent
+  givenToUser = false;
+  giver?: GiverInputInfo; // undefined means no identified giver agent
   isTrade = false;
   offerId = "";
-  prompt = "";
-  receiver?: libsUtil.GiverReceiverInputInfo;
   unitCode = "HUR";
   visible = false;
 
   libsUtil = libsUtil;
 
-  async open(
-    giver?: libsUtil.GiverReceiverInputInfo,
-    receiver?: libsUtil.GiverReceiverInputInfo,
-    offerId?: string,
-    customTitle?: string,
-    prompt?: string,
-    callbackOnSuccess?: (amount: number) => void,
-  ) {
-    this.customTitle = customTitle;
-    this.giver = giver;
-    this.prompt = prompt || "";
-    this.receiver = receiver;
+  async open(giver?: GiverInputInfo, offerId?: string) {
+    this.description = "";
+    this.giver = giver || {};
     // if we show "given to user" selection, default checkbox to true
+    this.givenToUser = this.showGivenToUser;
     this.amountInput = "0";
-    this.callbackOnSuccess = callbackOnSuccess;
     this.offerId = offerId || "";
 
     try {
-      const settings = await retrieveSettingsForActiveAccount();
-      this.apiServer = settings.apiServer || "";
-      this.activeDid = settings.activeDid || "";
+      await db.open();
+      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+      this.apiServer = settings?.apiServer || "";
+      this.activeDid = settings?.activeDid || "";
 
       this.allContacts = await db.contacts.toArray();
 
-      this.allMyDids = await retrieveAccountDids();
+      await accountsDB.open();
+      const allAccounts = await accountsDB.accounts.toArray();
+      this.allMyDids = allAccounts.map((acc) => acc.did);
 
-      if (this.giver && !this.giver.name) {
+      if (!this.giver.name) {
         this.giver.name = didInfo(
           this.giver.did,
           this.activeDid,
@@ -207,8 +194,8 @@ export default class GiftedDialog extends Vue {
   eraseValues() {
     this.description = "";
     this.giver = undefined;
+    this.givenToUser = this.showGivenToUser;
     this.amountInput = "0";
-    this.prompt = "";
     this.unitCode = "HUR";
   }
 
@@ -265,7 +252,6 @@ export default class GiftedDialog extends Vue {
     // this is asynchronous, but we don't need to wait for it to complete
     await this.recordGive(
       (this.giver?.did as string) || null,
-      (this.receiver?.did as string) || null,
       this.description,
       parseFloat(this.amountInput),
       this.unitCode,
@@ -277,33 +263,30 @@ export default class GiftedDialog extends Vue {
   /**
    *
    * @param giverDid may be null
-   * @param recipientDid may be null
    * @param description may be an empty string
-   * @param amount may be 0
+   * @param amountInput may be 0
    * @param unitCode may be omitted, defaults to "HUR"
    */
-  async recordGive(
+  public async recordGive(
     giverDid: string | null,
-    recipientDid: string | null,
     description: string,
-    amount: number,
+    amountInput: number,
     unitCode: string = "HUR",
   ) {
     try {
+      const identity = await libsUtil.getIdentity(this.activeDid);
       const result = await createAndSubmitGive(
         this.axios,
         this.apiServer,
-        this.activeDid,
-        giverDid as string,
-        recipientDid as string,
+        identity,
+        giverDid,
+        this.givenToUser ? this.activeDid : undefined,
         description,
-        amount,
+        amountInput,
         unitCode,
-        this.toProjectId,
+        this.projectId,
         this.offerId,
         this.isTrade,
-        undefined,
-        this.fromProjectId,
       );
 
       if (
@@ -331,23 +314,20 @@ export default class GiftedDialog extends Vue {
           },
           7000,
         );
-        if (this.callbackOnSuccess) {
-          this.callbackOnSuccess(amount);
-        }
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
       console.error("Error with give recordation caught:", error);
-      const errorMessage =
+      const message =
         error.userMessage ||
-        serverMessageForUser(error) ||
+        error.response?.data?.error?.message ||
         "There was an error recording the give.";
       this.$notify(
         {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: errorMessage,
+          text: message,
         },
         -1,
       );
@@ -394,7 +374,6 @@ export default class GiftedDialog extends Vue {
 
 <style>
 .dialog-overlay {
-  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;

src/components/GiftedPhotoDialog.vue

@@ -4,7 +4,7 @@
       <div class="text-lg text-center font-light relative z-50">
         <div
           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"
+          class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-2 bg-black/50 text-white leading-none"
         >
           <span v-if="uploading"> Uploading... </span>
           <span v-else-if="blob"> Look Good? </span>
@@ -12,7 +12,7 @@
         </div>
 
         <div
-          class="text-lg text-center px-2 py-0.5 leading-none absolute right-0 top-0 text-white"
+          class="text-lg text-center p-2 leading-none absolute right-0 top-0 text-white"
           @click="close()"
         >
           <fa icon="xmark" class="w-[1em]"></fa>
@@ -20,64 +20,32 @@
       </div>
 
       <div v-if="uploading" class="flex justify-center">
-        <fa
-          icon="spinner"
-          class="fa-spin fa-3x text-center block px-12 py-12"
-        />
+        <fa icon="spinner" class="fa-spin fa-3x text-center block" />
       </div>
       <div v-else-if="blob">
-        <div v-if="crop">
-          <VuePictureCropper
-            :boxStyle="{
-              backgroundColor: '#f8f8f8',
-              margin: 'auto',
-            }"
-            :img="createBlobURL(blob)"
-            :options="{
-              viewMode: 1,
-              dragMode: 'crop',
-              aspectRatio: 9 / 9,
-            }"
-            class="max-h-[90vh] max-w-[90vw] object-contain"
-          />
-          <!-- This gives a round cropper.
-            :presetMode="{
-              mode: 'round',
-            }"
-          -->
-        </div>
-        <div v-else>
-          <div class="flex justify-center">
-            <img
-              :src="createBlobURL(blob)"
-              class="mt-2 rounded max-h-[90vh] max-w-[90vw] object-contain"
-            />
-          </div>
-        </div>
-        <div class="absolute bottom-[1rem] left-[1rem] px-2 py-1">
+        <div
+          class="flex justify-center gap-2 absolute bottom-[1rem] left-[1rem] right-[1rem] bg-black/50 px-4 py-2"
+        >
           <button
             @click="uploadImage"
-            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 py-1 px-2 rounded-md"
+            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 font-bold py-2 px-4 rounded-md"
           >
             <span>Upload</span>
           </button>
-        </div>
-        <div
-          v-if="showRetry"
-          class="absolute bottom-[1rem] right-[1rem] px-2 py-1"
-        >
           <button
             @click="retryImage"
-            class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-1 px-2 rounded-md"
+            class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white font-bold py-2 px-4 rounded-md"
           >
             <span>Retry</span>
           </button>
         </div>
+        <div class="flex justify-center">
+          <img :src="URL.createObjectURL(blob)" class="mt-2 rounded" />
+        </div>
       </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
@@ -124,26 +92,23 @@
 import axios from "axios";
 import Camera from "simple-vue-camera";
 import { Component, Vue } from "vue-facing-decorator";
-import VuePictureCropper, { cropper } from "vue-picture-cropper";
 
 import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
-import { retrieveSettingsForActiveAccount } from "@/db/index";
+import { getIdentity } from "@/libs/util";
+import { db } from "@/db/index";
+import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 
-@Component({ components: { Camera, VuePictureCropper } })
-export default class PhotoDialog extends Vue {
+@Component({ components: { Camera } })
+export default class GiftedPhotoDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   activeDeviceNumber = 0;
   activeDid = "";
-  blob?: Blob;
-  claimType = "";
-  crop = false;
-  fileName?: string;
+  blob: Blob | null = null;
   mirror = false;
   numDevices = 0;
-  setImageCallback: (arg: string) => void = () => {};
-  showRetry = true;
+  setImage: (arg: string) => void = () => {};
   uploading = false;
   visible = false;
 
@@ -151,8 +116,9 @@ export default class PhotoDialog extends Vue {
 
   async mounted() {
     try {
-      const settings = await retrieveSettingsForActiveAccount();
-      this.activeDid = settings.activeDid || "";
+      await db.open();
+      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+      this.activeDid = settings?.activeDid || "";
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       console.error("Error retrieving settings from database:", err);
@@ -168,31 +134,13 @@ export default class PhotoDialog extends Vue {
     }
   }
 
-  open(
-    setImageFn: (arg: string) => void,
-    claimType: string,
-    crop?: boolean,
-    blob?: Blob, // for image upload, just to use the cropping function
-    inputFileName?: string,
-  ) {
+  open(setImageFn: (arg: string) => void) {
     this.visible = true;
-    this.claimType = claimType;
-    this.crop = !!crop;
     const bottomNav = document.querySelector("#QuickNav") as HTMLElement;
     if (bottomNav) {
       bottomNav.style.display = "none";
     }
-    this.setImageCallback = setImageFn;
-    if (blob) {
-      this.blob = blob;
-      this.fileName = inputFileName;
-      // doesn't make sense to retry the file upload; they can cancel if they picked the wrong one
-      this.showRetry = false;
-    } else {
-      this.blob = undefined;
-      this.fileName = undefined;
-      this.showRetry = true;
-    }
+    this.setImage = setImageFn;
   }
 
   close() {
@@ -201,7 +149,7 @@ export default class PhotoDialog extends Vue {
     if (bottomNav) {
       bottomNav.style.display = "";
     }
-    this.blob = undefined;
+    this.blob = null;
   }
 
   async cameraStarted() {
@@ -209,12 +157,6 @@ export default class PhotoDialog extends Vue {
     if (cameraComponent) {
       this.numDevices = (await cameraComponent.devices(["videoinput"])).length;
       this.mirror = cameraComponent.facingMode === "user";
-      // figure out which device is active
-      const currentDeviceId = cameraComponent.currentDeviceID();
-      const devices = await cameraComponent.devices(["videoinput"]);
-      this.activeDeviceNumber = devices.findIndex(
-        (device) => device.deviceId === currentDeviceId,
-      );
     }
   }
 
@@ -222,9 +164,7 @@ export default class PhotoDialog extends Vue {
     const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
     this.activeDeviceNumber = (this.activeDeviceNumber + 1) % this.numDevices;
     const devices = await cameraComponent?.devices(["videoinput"]);
-    await cameraComponent?.changeCamera(
-      devices[this.activeDeviceNumber].deviceId,
-    );
+    cameraComponent?.changeCamera(devices[this.activeDeviceNumber].deviceId);
   }
 
   async takeImage(/* payload: MouseEvent */) {
@@ -265,13 +205,10 @@ export default class PhotoDialog extends Vue {
 
     // The resolution is only necessary because of that mobile portrait-orientation case.
     // The mobile emulation in a browser shows something stretched vertically, but real devices work fine.
-    this.blob =
-      (await cameraComponent?.snapshot({
-        height: imageHeight,
-        width: imageWidth,
-      })) || undefined;
-    // png is default
-    this.fileName = "snapshot.png";
+    this.blob = await cameraComponent?.snapshot({
+      height: imageHeight,
+      width: imageWidth,
+    }); // png is default; if that changes, change extension in formData.append
     if (!this.blob) {
       this.$notify(
         {
@@ -286,12 +223,8 @@ export default class PhotoDialog extends Vue {
     }
   }
 
-  private createBlobURL(blob: Blob): string {
-    return URL.createObjectURL(blob);
-  }
-
   async retryImage() {
-    this.blob = undefined;
+    this.blob = null;
   }
 
   /****
@@ -341,15 +274,10 @@ export default class PhotoDialog extends Vue {
 
   async uploadImage() {
     this.uploading = true;
-
-    if (this.crop) {
-      this.blob = (await cropper?.getBlob()) || undefined;
-    }
-
-    const token = await accessToken(this.activeDid);
+    const identifier = await getIdentity(this.activeDid);
+    const token = await accessToken(identifier);
     const headers = {
       Authorization: "Bearer " + token,
-      // axios fills in Content-Type of multipart/form-data
     };
     const formData = new FormData();
     if (!this.blob) {
@@ -366,8 +294,8 @@ export default class PhotoDialog extends Vue {
       this.uploading = false;
       return;
     }
-    formData.append("image", this.blob, this.fileName || "snapshot.png");
-    formData.append("claimType", this.claimType);
+    formData.append("image", this.blob, "snapshot.png"); // png is set in snapshot()
+    formData.append("claimType", "GiveAction");
     try {
       const response = await axios.post(
         DEFAULT_IMAGE_API_SERVER + "/image",
@@ -376,8 +304,9 @@ export default class PhotoDialog extends Vue {
       );
       this.uploading = false;
 
-      this.close();
-      this.setImageCallback(response.data.url as string);
+      this.visible = false;
+      this.blob = null;
+      this.setImage(response.data.url as string);
     } catch (error) {
       console.error("Error uploading the image", error);
       this.$notify(
@@ -385,12 +314,12 @@ export default class PhotoDialog extends Vue {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "There was an error saving the picture.",
+          text: "There was an error saving the picture. Please try again.",
         },
         5000,
       );
       this.uploading = false;
-      this.blob = undefined;
+      this.blob = null;
     }
   }
 
@@ -409,7 +338,6 @@ export default class PhotoDialog extends Vue {
 
 <style>
 .dialog-overlay {
-  z-index: 60;
   position: fixed;
   top: 0;
   left: 0;

src/components/GiftedPrompts.vue

@@ -1,18 +1,9 @@
 <template>
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
-      <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"
-          @click="cancel"
-        >
-          <fa icon="xmark" class="w-[1em]"></fa>
-        </div>
-      </h1>
-      <span class="mt-2 flex justify-between">
+      <h1 class="text-xl font-bold text-center mb-4">Here's one:</h1>
+      <span class="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()"
         >
@@ -20,21 +11,21 @@
         </span>
 
         <div class="m-2">
-          <span v-if="currentCategory === CATEGORY_IDEAS">
-            <p class="text-center text-lg">
+          <span v-if="currentIdeaIndex < IDEAS.length">
+            <p class="text-center text-lg font-bold">
               {{ IDEAS[currentIdeaIndex] }}
             </p>
           </span>
-          <div v-if="currentCategory === CATEGORY_CONTACTS">
+          <div v-if="currentIdeaIndex == IDEAS.length + 0">
             <p class="text-center">
               <span
                 v-if="currentContact == null"
-                class="text-orange-500 text-lg"
+                class="text-orange-500 text-lg font-bold"
               >
                 That's all your contacts.
               </span>
               <span v-else>
-                <span class="text-lg">
+                <span class="text-lg font-bold">
                   Did {{ currentContact.name || AppString.NO_CONTACT_NAME }}
                   <br />
                   or someone near them do anything &ndash; maybe a while ago?
@@ -62,7 +53,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="proceed"
+        @click="cancel"
       >
         That's it!
       </button>
@@ -72,175 +63,155 @@
 
 <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 = [
-    "What food did someone make? (How did it free up your time for something? Was something doable because it eased your stress?)",
-    "What did a family member do? (How did you take better action because it made you feel loved?)",
-    "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? (What project tasks were enabled because you could depend on them?)",
-    "What did you see someone give to someone else? (What is the effect of the positivity you gained from seeing that?)",
-    "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 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 could you accomplish with better grace or resilience after seeing their example?)",
-    "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? (What kind of bond or revitalization did that bring to a situation?)",
-    "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?)",
-    "Who forgave you or overlooked a mistake? (How did that free you or build trust that enabled better relationships?)",
-    "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?)",
-    "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 their guidance enhance your attitude or actions?)",
-    "What is a surprise gift you received? (What extra possibilities did it give you?)",
+    "Did anyone fix food for you?",
+    "Did a family member do something for you?",
+    "Did anyone give you a compliment?",
+    "Who is someone you can always rely on, and how did they demonstrate that?",
+    "Did you see anyone give to someone else?",
+    "Is there someone who you have never met who has helped you somehow?",
+    "How did an artist or musician or author inspire you?",
+    "What inspiration did you get from someone who handled tragedy well?",
+    "Did some organization give something worth respect?",
+    "Who last gave you a good laugh?",
+    "Do you recall anything that was given to you while you were young?",
+    "Did someone forgive you or overlook a mistake?",
+    "Do you know of a way an ancestor contributed to your life?",
+    "Did anyone give you help at work?",
+    "How did a teacher or mentor or great example help 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: Array<boolean> = [];
+  shownContactDbIndices: number[] = [];
   visible = false;
 
   AppString = AppString;
 
-  async open(
-    callbackOnFullGiftInfo?: (
-      contactInfo?: GiverReceiverInputInfo,
-      description?: string,
-    ) => void,
-  ) {
+  async open() {
     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
   }
 
-  cancel() {
-    this.currentCategory = this.CATEGORY_IDEAS;
-    this.currentContact = undefined;
-    this.currentIdeaIndex = 0;
-    this.numContacts = 0;
-    this.shownContactDbIndices = [];
-
+  close() {
+    // close the dialog but don't change values (just in case some actions are added later)
     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() {
-    // check if the next one is an idea or a contact
-    if (this.currentCategory === this.CATEGORY_IDEAS) {
-      this.currentIdeaIndex++;
-      if (this.currentIdeaIndex === this.IDEAS.length) {
-        // must have just finished ideas so move to contacts
-        this.findNextUnshownContact();
-      }
-    } else {
-      // must be this.CATEGORY_CONTACTS
+    // if we're incrementing to the contact prompt
+    // or if we're at the contact prompt and there was a previous contact...
+    if (
+      this.currentIdeaIndex == this.CONTACT_PROMPT_INDEX - 1 ||
+      (this.currentIdeaIndex == this.CONTACT_PROMPT_INDEX &&
+        this.shownContactDbIndices.length < this.numContacts)
+    ) {
+      this.currentIdeaIndex = this.CONTACT_PROMPT_INDEX;
       this.findNextUnshownContact();
-      // when that's finished, it'll reset to ideas
+    } else {
+      // we're not at the contact prompt (or we ran out), so increment the idea index
+      this.currentIdeaIndex =
+        (this.currentIdeaIndex + 1) % (this.IDEAS.length + this.OTHER_PROMPTS);
+      // ... and clear out any other prompt info
+      this.currentContact = undefined;
+      this.shownContactDbIndices = [];
     }
   }
 
-  /**
-   * Get the previous idea.
-   * If it is a contact prompt, loop through.
-   */
-  async prevIdea() {
-    // check if the next one is an idea or a contact
-    if (this.currentCategory === this.CATEGORY_IDEAS) {
+  prevIdea() {
+    if (
+      this.currentIdeaIndex ==
+        (this.CONTACT_PROMPT_INDEX + 1) %
+          (this.IDEAS.length + this.OTHER_PROMPTS) ||
+      (this.currentIdeaIndex == this.CONTACT_PROMPT_INDEX &&
+        this.shownContactDbIndices.length < this.numContacts)
+    ) {
+      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) {
-        // must have just finished ideas so move to contacts
-        this.findNextUnshownContact();
+        this.currentIdeaIndex = this.IDEAS.length - 1 + this.OTHER_PROMPTS;
       }
-    } else {
-      // must be this.CATEGORY_CONTACTS
-      this.findNextUnshownContact();
-      // when that's finished, it'll reset to ideas
+      // ... and clear out any other prompt info
+      this.currentContact = undefined;
+      this.shownContactDbIndices = [];
     }
   }
 
   nextIdeaPastContacts() {
+    this.currentIdeaIndex = 0;
     this.currentContact = undefined;
-    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;
+    this.shownContactDbIndices = [];
   }
 
   async findNextUnshownContact() {
-    if (this.currentCategory === this.CATEGORY_IDEAS) {
-      // we're not in the contact prompts, so reset index array
-      this.shownContactDbIndices = new Array<boolean>(this.numContacts);
-    }
-    this.currentCategory = this.CATEGORY_CONTACTS;
-
-    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();
+    // get a random contact
+    if (this.shownContactDbIndices.length === this.numContacts) {
+      // no more contacts to show
+      this.currentContact = undefined;
     } else {
+      // 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();
+
       // 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

@@ -1,182 +0,0 @@
-<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

@@ -1,178 +0,0 @@
-<template>
-  <div v-if="visible" class="dialog-overlay z-[60]">
-    <div class="dialog relative">
-      <div class="text-lg text-center font-light relative z-50">
-        <div
-          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"
-        >
-          Add Photo
-        </div>
-        <div
-          class="text-lg text-center px-2 py-0.5 leading-none absolute right-0 top-0 text-white"
-          @click="close()"
-        >
-          <fa icon="xmark" class="w-[1em]"></fa>
-        </div>
-      </div>
-
-      <div>
-        <div class="text-center mt-8">
-          <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"
-              @click="openPhotoDialog()"
-            />
-          </div>
-          <div class="mt-4">
-            <input type="file" @change="uploadImageFile" />
-          </div>
-          <div class="mt-4">
-            <span class="mt-2">
-              ... or paste a URL:
-              <input type="text" v-model="imageUrl" class="border-2" />
-            </span>
-            <span class="ml-2">
-              <fa
-                v-if="imageUrl"
-                icon="check"
-                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 cursor-pointer"
-                @click="acceptUrl"
-              />
-              <!-- so that there's no shifting when it becomes visible -->
-              <fa v-else icon="check" class="text-white bg-white px-2 py-2" />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <PhotoDialog ref="photoDialog" />
-</template>
-
-<script lang="ts">
-import axios from "axios";
-import { ref } from "vue";
-import { Component, Vue } from "vue-facing-decorator";
-
-import PhotoDialog from "@/components/PhotoDialog.vue";
-import { NotificationIface } from "@/constants/app";
-
-const inputImageFileNameRef = ref<Blob>();
-
-@Component({
-  components: { PhotoDialog },
-})
-export default class ImageMethodDialog extends Vue {
-  $notify!: (notification: NotificationIface, timeout?: number) => void;
-
-  claimType: string;
-  crop: boolean = false;
-  imageCallback: (imageUrl?: string) => void = () => {};
-  imageUrl?: string;
-  visible = false;
-
-  open(setImageFn: (arg: string) => void, claimType: string, crop?: boolean) {
-    this.claimType = claimType;
-    this.crop = !!crop;
-    this.imageCallback = setImageFn;
-
-    this.visible = true;
-  }
-
-  openPhotoDialog(blob?: Blob, fileName?: string) {
-    this.visible = false;
-
-    (this.$refs.photoDialog as PhotoDialog).open(
-      this.imageCallback,
-      this.claimType,
-      this.crop,
-      blob,
-      fileName,
-    );
-  }
-
-  async uploadImageFile(event: Event) {
-    this.visible = false;
-
-    inputImageFileNameRef.value = event.target.files[0];
-    // https://developer.mozilla.org/en-US/docs/Web/API/File
-    // ... plus it has a `type` property from my testing
-    const file = inputImageFileNameRef.value;
-    if (file != null) {
-      const reader = new FileReader();
-      reader.onload = async (e) => {
-        const data = e.target?.result as ArrayBuffer;
-        if (data) {
-          const blob = new Blob([new Uint8Array(data)], {
-            type: file.type,
-          });
-          this.openPhotoDialog(blob, file.name as string);
-        }
-      };
-      reader.readAsArrayBuffer(file as Blob);
-    }
-  }
-
-  async acceptUrl() {
-    this.visible = false;
-    if (this.crop) {
-      try {
-        const urlBlobResponse: Blob = await axios.get(this.imageUrl as string, {
-          responseType: "blob", // This ensures the data is returned as a Blob
-        });
-        const fullUrl = new URL(this.imageUrl as string);
-        const fileName = fullUrl.pathname.split("/").pop() as string;
-        (this.$refs.photoDialog as PhotoDialog).open(
-          this.imageCallback,
-          this.claimType,
-          this.crop,
-          urlBlobResponse.data as Blob,
-          fileName,
-        );
-      } catch (error) {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "There was an error retrieving that image.",
-          },
-          5000,
-        );
-      }
-    } else {
-      this.imageCallback(this.imageUrl);
-    }
-  }
-
-  close() {
-    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: 700px;
-}
-</style>

src/components/InviteDialog.vue

@@ -1,119 +0,0 @@
-<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

@@ -1,522 +0,0 @@
-<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

@@ -4,9 +4,8 @@
       <h1 class="text-xl font-bold text-center mb-4">Offer Help</h1>
       <input
         type="text"
-        data-testId="inputDescription"
         class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
-        placeholder="Description of what is offered"
+        placeholder="Description, prerequisites, terms, etc."
         v-model="description"
       />
       <div class="flex flex-row mt-2">
@@ -24,7 +23,6 @@
           <fa icon="chevron-left" />
         </div>
         <input
-          data-testId="inputOfferAmount"
           type="number"
           class="w-full border border-r-0 border-slate-400 px-2 py-2 text-center"
           v-model="amountInput"
@@ -36,45 +34,34 @@
           <fa icon="chevron-right" />
         </div>
       </div>
-      <div class="mt-4 flex justify-center">
-        <span>
-          <router-link
-            :to="{
-              name: 'offer-details',
-              query: {
-                amountInput,
-                description,
-                offererDid: activeDid,
-                projectId,
-                projectName,
-                recipientDid,
-                recipientName,
-                unitCode: amountUnitCode,
-              },
-            }"
-            class="text-blue-500"
-          >
-            Conditions & more options...
-          </router-link>
+      <div class="flex flex-row mt-2">
+        <span
+          class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center px-2 py-2"
+        >
+          Expiration
         </span>
+        <input
+          type="text"
+          class="w-full border border-slate-400 px-2 py-2 rounded-r"
+          :placeholder="'Date, eg. ' + new Date().toISOString().slice(0, 10)"
+          v-model="expirationDateInput"
+        />
       </div>
       <p class="text-center mt-6 mb-2 italic">
         Sign & Send to publish to the world
       </p>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-        <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"
-          @click="confirm"
-        >
-          Sign &amp; Send
-        </button>
-        <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"
-          @click="cancel"
-        >
-          Cancel
-        </button>
-      </div>
+      <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="confirm"
+      >
+        Sign &amp; Send
+      </button>
+      <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"
+        @click="cancel"
+      >
+        Cancel
+      </button>
     </div>
   </div>
 </template>
@@ -83,19 +70,17 @@
 import { Vue, Component, Prop } from "vue-facing-decorator";
 
 import { NotificationIface } from "@/constants/app";
-import {
-  createAndSubmitOffer,
-  serverMessageForUser,
-} from "@/libs/endorserServer";
+import { createAndSubmitOffer } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
-import { retrieveSettingsForActiveAccount } from "@/db/index";
+import { db } 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?: string;
-  @Prop projectName?: string;
+  @Prop message = "";
+  @Prop projectId = "";
 
   activeDid = "";
   apiServer = "";
@@ -104,21 +89,16 @@ export default class OfferDialog extends Vue {
   amountUnitCode = "HUR";
   description = "";
   expirationDateInput = "";
-  recipientDid? = "";
-  recipientName? = "";
   visible = false;
 
   libsUtil = libsUtil;
 
-  async open(recipientDid?: string, recipientName?: string) {
+  async open() {
     try {
-      this.recipientDid = recipientDid;
-      this.recipientName = recipientName;
-
-      const settings = await retrieveSettingsForActiveAccount();
-      this.apiServer = settings.apiServer || "";
-      this.activeDid = settings.activeDid || "";
-
+      await db.open();
+      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+      this.apiServer = settings?.apiServer || "";
+      this.activeDid = settings?.activeDid || "";
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       console.error("Error retrieving settings from database:", err);
@@ -210,9 +190,9 @@ export default class OfferDialog extends Vue {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "You must select an identity before you can record an offer.",
+          text: "You must select an identifier before you can record an offer.",
         },
-        7000,
+        -1,
       );
       return;
     }
@@ -231,16 +211,15 @@ export default class OfferDialog extends Vue {
     }
 
     try {
+      const identity = await libsUtil.getIdentity(this.activeDid);
       const result = await createAndSubmitOffer(
         this.axios,
         this.apiServer,
-        this.activeDid,
+        identity,
         description,
         amount,
         unitCode,
-        "",
         expirationDateInput,
-        this.recipientDid,
         this.projectId,
       );
 
@@ -267,7 +246,7 @@ export default class OfferDialog extends Vue {
             title: "Success",
             text: "That offer was recorded.",
           },
-          5000,
+          10000,
         );
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -307,9 +286,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
     );
   }
 }
@@ -317,7 +296,6 @@ export default class OfferDialog extends Vue {
 
 <style>
 .dialog-overlay {
-  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;

src/components/OnboardingDialog.vue

@@ -1,286 +1,164 @@
-<!-- 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>
+    <VOnboardingWrapper ref="wrapper" :steps="steps">
+      <template
+        #default="{ previous, next, step, exit, isFirst, isLast, index }"
+      >
+        <VOnboardingStep>
+          <div class="bg-white shadow sm:rounded-lg">
+            <div class="px-4 py-5 sm:p-6">
+              <div class="sm:flex sm:items-center sm:justify-between">
+                <div v-if="step.content">
+                  <h3 v-if="step.content.title" class="flex justify-between">
+                    <span
+                      class="text-lg font-medium leading-normal text-gray-900"
+                    >
+                      {{ step.content.title }}
+                    </span>
+                    <button
+                      @click="exit"
+                      class="inline-flex align-center justify-center w-6 h-6 shrink-0 rounded-full"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-4 w-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M6 18L18 6M6 6l12 12"
+                        ></path>
+                      </svg>
+                    </button>
+                  </h3>
+                  <div
+                    v-if="step.content.description"
+                    class="mt-2 max-w-xl text-sm text-gray-500"
+                  >
+                    <p>{{ step.content.description }}</p>
+                  </div>
+                </div>
+                <div
+                  class="mt-5 space-x-4 sm:mt-0 sm:ml-6 sm:flex sm:flex-shrink-0 sm:items-center relative"
+                >
+                  <span
+                    class="absolute right-0 bottom-full mb-2 mr-2 text-gray-600 font-medium text-xs"
+                  >
+                    {{ `${index + 1}/${steps.length}` }}
+                  </span>
+                  <template v-if="!isFirst">
+                    <button
+                      @click="previous"
+                      type="button"
+                      class="inline-flex items-center justify-center rounded-md border border-transparent bg-yellow-100 px-4 py-2 font-medium text-yellow-700 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 sm:text-sm"
+                    >
+                      Previous
+                    </button>
+                  </template>
+                  <button
+                    @click="next"
+                    type="button"
+                    class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:text-sm"
+                  >
+                    {{ isLast ? "Finish" : "Next" }}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </VOnboardingStep>
+      </template>
+    </VOnboardingWrapper>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
-import { Router } from "vue-router";
-
-import { NotificationIface } from "@/constants/app";
+import { Vue, Component } from "vue-facing-decorator";
+import { ref } from "vue";
 import {
-  db,
-  retrieveSettingsForActiveAccount,
-  updateAccountSettings,
-} from "@/db/index";
-import { OnboardPage } from "@/libs/util";
+  VOnboardingWrapper,
+  VOnboardingStep,
+  useVOnboarding,
+} from "v-onboarding";
 
 @Component({
-  computed: {
-    OnboardPage() {
-      return OnboardPage;
-    },
+  components: {
+    VOnboardingWrapper,
+    VOnboardingStep,
   },
-  components: { OnboardPage },
 })
 export default class OnboardingDialog extends Vue {
-  $notify!: (notification: NotificationIface, timeout?: number) => void;
+  setup() {
+    const wrapper = ref(null);
+    const { start, goToStep, finish } = useVOnboarding(wrapper);
+    const steps = [
+      {
+        attachTo: { element: "#headingRecordSomething" },
+        content: { title: "Welcome!" },
+      },
+      {
+        attachTo: { element: "#headingLatestActivity" },
+        content: {
+          title: "Testing v-onboarding..",
+          description:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.",
+        },
+      },
+    ];
 
-  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" });
-      }
-    }
+    return {
+      wrapper,
+      steps,
+      start,
+      finish,
+      goToStep,
+    };
   }
 }
 </script>
-
 <style>
-.dialog-overlay {
-  z-index: 40;
-  position: fixed;
+[data-v-onboarding-wrapper] [data-popper-arrow]::before {
+  content: "";
+  background: var(--v-onboarding-step-arrow-background, white);
   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;
+  transition:
+    transform 0.2s ease-out,
+    visibility 0.2s ease-out;
+  visibility: visible;
+  transform: translateX(0px) rotate(45deg);
+  transform-origin: center;
+  width: var(--v-onboarding-step-arrow-size, 10px);
+  height: var(--v-onboarding-step-arrow-size, 10px);
+  position: absolute;
+  z-index: -1;
 }
 
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
+[data-v-onboarding-wrapper]
+  [data-popper-placement^="top"]
+  > [data-popper-arrow] {
+  bottom: 5px;
+}
+
+[data-v-onboarding-wrapper]
+  [data-popper-placement^="right"]
+  > [data-popper-arrow] {
+  left: -4px;
+}
+
+[data-v-onboarding-wrapper]
+  [data-popper-placement^="bottom"]
+  > [data-popper-arrow] {
+  top: -4px;
+}
+
+[data-v-onboarding-wrapper]
+  [data-popper-placement^="left"]
+  > [data-popper-arrow] {
+  right: -4px;
 }
 </style>

src/components/ProjectIcon.vue

@@ -1,17 +1,5 @@
 <template>
-  <a
-    v-if="linkToFull && imageUrl"
-    :href="imageUrl"
-    target="_blank"
-    class="h-full w-full object-contain"
-  >
-    <div v-html="generateIdenticon()" class="h-full w-full object-contain" />
-  </a>
-  <div
-    v-else
-    v-html="generateIdenticon()"
-    class="h-full w-full object-contain"
-  />
+  <div v-html="generateIdenticon()" class="w-fit"></div>
 </template>
 <script lang="ts">
 import { toSvg } from "jdenticon";
@@ -33,17 +21,11 @@ const BLANK_CONFIG = {
 export default class ProjectIcon extends Vue {
   @Prop entityId = "";
   @Prop iconSize = 0;
-  @Prop imageUrl = "";
-  @Prop linkToFull = false;
 
   generateIdenticon() {
-    if (this.imageUrl) {
-      return `<img src="${this.imageUrl}" class="w-full h-full object-contain" />`;
-    } else {
-      const config = this.entityId ? undefined : BLANK_CONFIG;
-      const svgString = toSvg(this.entityId, this.iconSize, config);
-      return svgString;
-    }
+    const config = this.entityId ? undefined : BLANK_CONFIG;
+    const svgString = toSvg(this.entityId, this.iconSize, config);
+    return svgString;
   }
 }
 </script>

src/components/PushNotificationPermission.vue

@@ -1,574 +0,0 @@
-<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,11 +11,8 @@
           'text-slate-500': selected !== 'Home',
         }"
       >
-        <router-link :to="{ name: 'home' }" class="block text-center py-2 px-1">
-          <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 :to="{ name: 'home' }" class="block text-center py-3 px-1">
+          <fa icon="house-chimney" class="fa-fw"></fa>
         </router-link>
       </li>
       <!-- Search -->
@@ -29,12 +26,9 @@
       >
         <router-link
           :to="{ name: 'discover' }"
-          class="block text-center py-2 px-1"
+          class="block text-center py-3 px-1"
         >
-          <div class="flex flex-col items-center">
-            <fa icon="magnifying-glass" class="fa-fw" />
-            <span class="text-xs mt-1">search</span>
-          </div>
+          <fa icon="magnifying-glass" class="fa-fw"></fa>
         </router-link>
       </li>
       <!-- Projects -->
@@ -48,12 +42,9 @@
       >
         <router-link
           :to="{ name: 'projects' }"
-          class="block text-center py-2 px-1"
+          class="block text-center py-3 px-1"
         >
-          <div class="flex flex-col items-center">
-            <fa icon="hand" class="fa-fw" />
-            <span class="text-xs mt-1">your work</span>
-          </div>
+          <fa icon="folder-open" class="fa-fw"></fa>
         </router-link>
       </li>
       <!-- Contacts -->
@@ -67,12 +58,9 @@
       >
         <router-link
           :to="{ name: 'contacts' }"
-          class="block text-center py-2 px-1"
+          class="block text-center py-3 px-1"
         >
-          <div class="flex flex-col items-center">
-            <fa icon="users" class="fa-fw" />
-            <span class="text-xs mt-1">contacts</span>
-          </div>
+          <fa icon="users" class="fa-fw"></fa>
         </router-link>
       </li>
       <!-- Profile -->
@@ -86,18 +74,9 @@
       >
         <router-link
           :to="{ name: 'account' }"
-          class="block text-center py-2 px-1"
+          class="block text-center py-3 px-1"
         >
-          <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>
+          <fa icon="circle-user" class="fa-fw"></fa>
         </router-link>
       </li>
     </ul>

src/components/TopMessage.vue

@@ -1,22 +1,13 @@
 <template>
-  <div class="absolute right-5 top-3">
-    <span class="align-center text-red-500 mr-2">{{ message }}</span>
-    <span class="ml-2">
-      <router-link
-        :to="{ name: 'help' }"
-        class="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 ml-1"
-      >
-        Help
-      </router-link>
-    </span>
-  </div>
+  <div class="text-center text-red-500">{{ message }}</div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-facing-decorator";
 
 import { AppString, NotificationIface } from "@/constants/app";
-import { retrieveSettingsForActiveAccount } from "@/db/index";
+import { db } from "@/db/index";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 
 @Component
 export default class TopMessage extends Vue {
@@ -28,15 +19,17 @@ export default class TopMessage extends Vue {
 
   async mounted() {
     try {
-      const settings = await retrieveSettingsForActiveAccount();
+      await db.open();
+
+      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

@@ -1,108 +0,0 @@
-<!-- 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

@@ -1,10 +1,12 @@
 import axios from "axios";
+import * as R from "ramda";
 import * as THREE from "three";
 import { GLTFLoader } from "three/addons/loaders/GLTFLoader";
 import * as SkeletonUtils from "three/addons/utils/SkeletonUtils";
 import * as TWEEN from "@tweenjs/tween.js";
-import { retrieveSettingsForActiveAccount } from "@/db";
-import { getHeaders } from "@/libs/endorserServer";
+import { accountsDB, db } from "@/db";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { accessToken } from "@/libs/crypto";
 
 const ANIMATION_DURATION_SECS = 10;
 const ENDORSER_ENTITY_PREFIX = "https://endorser.ch/entity/";
@@ -13,10 +15,21 @@ export async function loadLandmarks(vue, world, scene, loop) {
   vue.setWorldProperty("animationDurationSeconds", ANIMATION_DURATION_SECS);
 
   try {
-    const settings = await retrieveSettingsForActiveAccount();
-    const activeDid = settings.activeDid || "";
-    const apiServer = settings.apiServer;
-    const headers = await getHeaders(activeDid);
+    await db.open();
+    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    const activeDid = settings?.activeDid || "";
+    const apiServer = settings?.apiServer;
+    await accountsDB.open();
+    const accounts = await accountsDB.accounts.toArray();
+    const account = R.find((acc) => acc.did === activeDid, accounts);
+    const headers = {
+      "Content-Type": "application/json",
+    };
+    const identity = JSON.parse(account?.identity || "null");
+    if (identity) {
+      const token = await accessToken(identity);
+      headers["Authorization"] = "Bearer " + token;
+    }
 
     const url = apiServer + "/api/v2/report/claims?claimType=GiveAction";
     const resp = await axios.get(url, { headers: headers });

src/constants/app.ts

@@ -4,66 +4,40 @@
  * See also ../libs/veramo/setup.ts
  */
 export enum AppString {
-  // This is used in titles and verbiage inside the app.
-  // There is also an app name without spaces, for packaging in the package.json file used in the manifest.
-  APP_NAME = "Time Safari",
-
   PROD_ENDORSER_API_SERVER = "https://api.endorser.ch",
   TEST_ENDORSER_API_SERVER = "https://test-api.endorser.ch",
   LOCAL_ENDORSER_API_SERVER = "http://localhost:3000",
 
-  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",
 
+  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",
+
   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 ||
+  process.env.VUE_APP_DEFAULT_ENDORSER_API_SERVER ||
   AppString.TEST_ENDORSER_API_SERVER;
 
 export const DEFAULT_IMAGE_API_SERVER =
-  import.meta.env.VITE_DEFAULT_IMAGE_API_SERVER ||
+  process.env.VUE_APP_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;
 
-export const IMAGE_TYPE_PROFILE = "profile";
-
-export const PASSKEYS_ENABLED =
-  !!import.meta.env.VITE_PASSKEYS_ENABLED || false;
-
 /**
  * The possible values for "group" and "type" are in App.vue.
- * Some of this comes from the notiwind package, some is custom.
+ * From the notiwind package
  */
 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>;
-  onNo?: (stopAsking?: boolean) => Promise<void>;
+  text: string;
   onYes?: () => Promise<void>;
-  promptToStopAsking?: boolean;
-  yesText?: string;
 }

src/db/index.ts

@@ -1,246 +1,57 @@
 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,
   SettingsSchema,
 } from "./tables/settings";
-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>;
   logs: Table<Log>;
   settings: Table<Settings>;
-  temp: Table<Temp>;
 };
 
 // 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 the DBs, starting with the sensitive ones.
+// Initialize Dexie databases for sensitive and non-sensitive data
+export const accountsDB = new BaseDexie("TimeSafariAccounts") as SensitiveDexie;
+const SensitiveSchemas = { ...AccountsSchema };
 
-// 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;
-
-// Only the tables with index modifications need listing. https://dexie.org/docs/Tutorial/Design#database-versioning
-
-// v1 also had contacts & settings
-// v2 added Log
-db.version(2).stores({
+const NonsensitiveSchemas = {
   ...ContactSchema,
   ...LogSchema,
-  ...{ 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,
+  ...SettingsSchema,
 };
 
+// Manage the encryption key. If not present in localStorage, create and store it.
+const secret =
+  localStorage.getItem("secret") || Encryption.createRandomEncryptionKey();
+if (!localStorage.getItem("secret")) localStorage.setItem("secret", secret);
+
+// Apply encryption to the sensitive database using the secret key
+encrypted(accountsDB, { secretKey: secret });
+
+// Define the schema for our databases
+accountsDB.version(1).stores(SensitiveSchemas);
+// v1 was contacts & settings
+// v2 added logs
+db.version(2).stores(NonsensitiveSchemas);
+
 // Event handler to initialize the non-sensitive database with default settings
-db.on("populate", async () => {
-  await db.settings.add(DEFAULT_SETTINGS);
+db.on("populate", () => {
+  db.settings.add({
+    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

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

src/db/tables/accounts.ts

@@ -3,52 +3,47 @@
  */
 export type Account = {
   /**
-   * Auto-generated ID by Dexie
+   * Auto-generated ID by Dexie.
    */
-  id?: number; // this is only blank on input, when the database assigns it
+  id?: number;
 
   /**
-   * The date the account was created
+   * The date the account was created.
    */
   dateCreated: string;
 
   /**
-   * The derivation path for the account, if this is from a mnemonic
+   * The derivation path for the account.
    */
-  derivationPath?: string;
+  derivationPath: string;
 
   /**
-   * Decentralized Identifier (DID) for the account
+   * Decentralized Identifier (DID) for the account.
    */
   did: string;
 
   /**
-   * Stringified JSON containing underlying key material, if generated from a mnemonic
-   * Based on the IIdentifier type from Veramo
+   * Stringified JSON containing underlying key material.
+   * Based on the IIdentifier type from Veramo.
    * @see {@link https://github.com/uport-project/veramo/blob/next/packages/core-types/src/types/IIdentifier.ts}
    */
-  identity?: string;
+  identity: string;
 
   /**
-   * The mnemonic phrase for the account, if this is from a mnemonic
-   */
-  mnemonic?: string;
-
-  /**
-   * The Webauthn credential ID in hex, if this is from a passkey
-   */
-  passkeyCredIdHex?: string;
-
-  /**
-   * The public key in hexadecimal format
+   * The public key in hexadecimal format.
    */
   publicKeyHex: string;
+
+  /**
+   * The mnemonic passphrase for the account.
+   */
+  mnemonic: string;
 };
 
 /**
  * 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#added-schema-syntax}
+ * @see {@link https://github.com/PVermeer/dexie-addon-suite-monorepo/tree/master/packages/dexie-encrypted-addon}
  */
 export const AccountsSchema = {
   accounts:

src/db/tables/contacts.ts

@@ -1,22 +1,10 @@
-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
-  registered?: boolean; // cached value of the server setting
+  seesMe?: boolean;
+  registered?: boolean;
 }
 
 export const ContactSchema = {

src/db/tables/secret.ts

@@ -1,18 +0,0 @@
-/**
- * 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,42 +12,17 @@ export type BoundingBox = {
  * Settings type encompasses user-specific configuration details.
  */
 export type Settings = {
-  // 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
+  id: number; // Only one entry, keyed with MASTER_SETTINGS_KEY
 
-  // if supplied, this settings record overrides the master record when the user switches to this account
-  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, may be null if unwanted for a particular account
-  hideRegisterPromptOnNewContact?: boolean;
+  activeDid?: string; // Active Decentralized ID
+  apiServer?: string; // API server URL
+  firstName?: string; // User's first name
   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; // may be null if unwanted for a particular account
+  lastNotifiedClaimId?: string; // Last notified claim ID
+  lastViewedClaimId?: string; // Last viewed claim ID
+  reminderTime?: number; // Time in milliseconds since UNIX epoch for reminders
+  reminderOn?: boolean; // Toggle to enable or disable reminders
 
   // Array of named search boxes defined by bounding boxes
   searchBoxes?: Array<{
@@ -56,28 +31,21 @@ export type Settings = {
   }>;
 
   showContactGivesInline?: boolean; // Display contact inline or not
-  showGeneralAdvanced?: boolean; // Show advanced features which don't have their own flag
-  showShortcutBvc?: boolean; // Show shortcut for Bountiful Voluntaryist Community actions
+  showShortcutBvc?: boolean; // Show shortcut for BVC actions
   vapid?: string; // VAPID (Voluntary Application Server Identification) field for web push
   warnIfProdServer?: boolean; // Warn if using a production server
   warnIfTestServer?: boolean; // Warn if using a testing server
   webPushServer?: string; // Web Push server URL
 };
 
-export function checkIsAnyFeedFilterOn(settings: Settings): boolean {
-  return !!(settings?.filterFeedByNearby || settings?.filterFeedByVisible);
-}
-
 /**
  * Schema for the Settings table in the database.
  */
 export const SettingsSchema = {
-  settings: "id, &accountDid",
+  settings: "id",
 };
 
 /**
  * Constants.
  */
 export const MASTER_SETTINGS_KEY = 1;
-
-export const DEFAULT_PASSKEY_EXPIRATION_MINUTES = 15;

src/db/tables/temp.ts

@@ -1,12 +0,0 @@
-// for ephemeral uses, eg. passing a blob from the service worker to the main thread
-
-export type Temp = {
-  id: string;
-  blob?: Blob; // deprecated because webkit (Safari) does not support Blob
-  blobB64?: string; // base64-encoded blob
-};
-
-/**
- * Schema for the Temp table in the database.
- */
-export const TempSchema = { temp: "id" };

src/libs/crypto/index.ts

@@ -3,19 +3,14 @@ import { getRandomBytesSync } from "ethereum-cryptography/random";
 import { entropyToMnemonic } from "ethereum-cryptography/bip39";
 import { wordlist } from "ethereum-cryptography/bip39/wordlists/english";
 import { HDNode } from "@ethersproject/hdnode";
+import * as didJwt from "did-jwt";
+import * as u8a from "uint8arrays";
 
-import {
-  CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI,
-  createEndorserJwtForDid,
-  CONTACT_URL_PATH_ENDORSER_CH_OLD,
-  CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI,
-} from "@/libs/endorserServer";
+import { ENDORSER_JWT_URL_LOCATION } from "@/libs/endorserServer";
 import { DEFAULT_DID_PROVIDER_NAME } from "../veramo/setup";
 
 export const DEFAULT_ROOT_DERIVATION_PATH = "m/84737769'/0'/0'/0'";
 
-export const LOCAL_KMS_NAME = "local";
-
 /**
  *
  *
@@ -36,7 +31,7 @@ export const newIdentifier = (
     keys: [
       {
         kid: publicHex,
-        kms: LOCAL_KMS_NAME,
+        kms: "local",
         meta: { derivationPath: derivationPath },
         privateKeyHex: privateHex,
         publicKeyHex: publicHex,
@@ -52,7 +47,7 @@ export const newIdentifier = (
  *
  *
  * @param {string} mnemonic
- * @return {[string, string, string, string]} address, privateHex, publicHex, derivationPath
+ * @return {*}  {[string, string, string, string]}
  */
 export const deriveAddress = (
   mnemonic: string,
@@ -69,10 +64,6 @@ export const deriveAddress = (
   return [address, privateHex, publicHex, derivationPath];
 };
 
-export const generateRandomBytes = (numBytes: number): Uint8Array => {
-  return getRandomBytesSync(numBytes);
-};
-
 /**
  *
  *
@@ -86,51 +77,101 @@ export const generateSeed = (): string => {
 };
 
 /**
- * Retrieve an access token, or "" if no DID is provided.
+ * Retreive an access token
  *
- * @param {string} did
- * @return {string} JWT with basic payload
+ * @param {IIdentifier} identifier
+ * @return {*}
  */
-export const accessToken = async (did?: string) => {
-  if (did) {
-    const nowEpoch = Math.floor(Date.now() / 1000);
-    const endEpoch = nowEpoch + 60; // add one minute
-    const tokenPayload = { exp: endEpoch, iat: nowEpoch, iss: did };
-    return createEndorserJwtForDid(did, tokenPayload);
-  } else {
-    return "";
-  }
+export const accessToken = async (identifier: IIdentifier) => {
+  const did: string = identifier.did;
+  const privateKeyHex: string = identifier.keys[0].privateKeyHex as string;
+
+  const signer = SimpleSigner(privateKeyHex);
+
+  const nowEpoch = Math.floor(Date.now() / 1000);
+  const endEpoch = nowEpoch + 60; // add one minute
+
+  const tokenPayload = { exp: endEpoch, iat: nowEpoch, iss: did };
+  const alg = undefined; // defaults to 'ES256K', more standardized but harder to verify vs ES256K-R
+  const jwt: string = await didJwt.createJWT(tokenPayload, {
+    alg,
+    issuer: did,
+    signer,
+  });
+  return jwt;
+};
+
+export const sign = async (privateKeyHex: string) => {
+  const signer = SimpleSigner(privateKeyHex);
+
+  return signer;
 };
 
 /**
- @return payload of JWT pulled out of any recognized URL path (if any)
+ *  Copied out of did-jwt since it's deprecated in that library.
+ *
+ *  The SimpleSigner returns a configured function for signing data.
+ *
+ *  @example
+ *  const signer = SimpleSigner(process.env.PRIVATE_KEY)
+ *  signer(data, (err, signature) => {
+ *    ...
+ *  })
+ *
+ *  @param    {String}         hexPrivateKey    a hex encoded private key
+ *  @return   {Function}                     a configured signer function
  */
-export const getContactJwtFromJwtUrl = (jwtUrlText: string) => {
+export function SimpleSigner(hexPrivateKey: string): didJwt.Signer {
+  const signer = didJwt.ES256KSigner(didJwt.hexToBytes(hexPrivateKey), true);
+  return async (data) => {
+    const signature = (await signer(data)) as string;
+    return fromJose(signature);
+  };
+}
+
+// from did-jwt/util; see SimpleSigner above
+export function fromJose(signature: string): {
+  r: string;
+  s: string;
+  recoveryParam?: number;
+} {
+  const signatureBytes: Uint8Array = didJwt.base64ToBytes(signature);
+  if (signatureBytes.length < 64 || signatureBytes.length > 65) {
+    throw new TypeError(
+      `Wrong size for signature. Expected 64 or 65 bytes, but got ${signatureBytes.length}`,
+    );
+  }
+  const r = bytesToHex(signatureBytes.slice(0, 32));
+  const s = bytesToHex(signatureBytes.slice(32, 64));
+  const recoveryParam =
+    signatureBytes.length === 65 ? signatureBytes[64] : undefined;
+  return { r, s, recoveryParam };
+}
+
+// from did-jwt/util; see SimpleSigner above
+export function bytesToHex(b: Uint8Array): string {
+  return u8a.toString(b, "base16");
+}
+
+/**
+ @return results of uportJwtPayload:
+ { iat: number, iss: string (DID), own: { name, publicEncKey (base64-encoded key) } }
+
+ Note that similar code is also contained in time-safari
+ */
+export const getContactPayloadFromJwtUrl = (jwtUrlText: string) => {
   let jwtText = jwtUrlText;
-  const appImportConfirmUrlLoc = jwtText.indexOf(
-    CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI,
-  );
-  if (appImportConfirmUrlLoc > -1) {
+  const endorserContextLoc = jwtText.indexOf(ENDORSER_JWT_URL_LOCATION);
+  if (endorserContextLoc > -1) {
     jwtText = jwtText.substring(
-      appImportConfirmUrlLoc +
-        CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI.length,
+      endorserContextLoc + ENDORSER_JWT_URL_LOCATION.length,
     );
   }
-  const appImportOneUrlLoc = jwtText.indexOf(
-    CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI,
-  );
-  if (appImportOneUrlLoc > -1) {
-    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;
+
+  // JWT format: { header, payload, signature, data }
+  const jwt = didJwt.decodeJWT(jwtText);
+
+  return jwt.payload;
 };
 
 export const nextDerivationPath = (origDerivPath: string) => {
@@ -148,156 +189,3 @@ 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

@@ -1,46 +0,0 @@
-/**
- * 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/didPeer.ts

@@ -1,96 +0,0 @@
-import { Buffer } from "buffer/";
-import { decode as cborDecode } from "cbor-x";
-import { bytesToMultibase, multibaseToBytes } from "did-jwt";
-
-import { getWebCrypto } from "@/libs/crypto/vc/passkeyHelpers";
-
-export const PEER_DID_PREFIX = "did:peer:";
-const PEER_DID_MULTIBASE_PREFIX = PEER_DID_PREFIX + "0";
-
-/**
- *
- *
- * similar code is in crowd-funder-for-time-pwa libs/crypto/vc/passkeyDidPeer.ts verifyJwtWebCrypto
- *
- * @returns {Promise<boolean>}
- */
-export async function verifyPeerSignature(
-  payloadBytes: Buffer,
-  issuerDid: string,
-  signatureBytes: Uint8Array,
-): Promise<boolean> {
-  const publicKeyBytes = peerDidToPublicKeyBytes(issuerDid);
-
-  const WebCrypto = await getWebCrypto();
-  const verifyAlgorithm = {
-    name: "ECDSA",
-    hash: { name: "SHA-256" },
-  };
-  const publicKeyJwk = cborToKeys(publicKeyBytes).publicKeyJwk;
-  const keyAlgorithm = {
-    name: "ECDSA",
-    namedCurve: publicKeyJwk.crv,
-  };
-  const publicKeyCryptoKey = await WebCrypto.subtle.importKey(
-    "jwk",
-    publicKeyJwk,
-    keyAlgorithm,
-    false,
-    ["verify"],
-  );
-  const verified = await WebCrypto.subtle.verify(
-    verifyAlgorithm,
-    publicKeyCryptoKey,
-    signatureBytes,
-    payloadBytes,
-  );
-  return verified;
-}
-
-export function cborToKeys(publicKeyBytes: Uint8Array) {
-  const jwkObj = cborDecode(publicKeyBytes);
-  if (
-    jwkObj[1] != 2 || // kty "EC"
-    jwkObj[3] != -7 || // alg "ES256"
-    jwkObj[-1] != 1 || // crv "P-256"
-    jwkObj[-2].length != 32 || // x
-    jwkObj[-3].length != 32 // y
-  ) {
-    throw new Error("Unable to extract key.");
-  }
-  const publicKeyJwk = {
-    alg: "ES256",
-    crv: "P-256",
-    kty: "EC",
-    x: arrayToBase64Url(jwkObj[-2]),
-    y: arrayToBase64Url(jwkObj[-3]),
-  };
-  const publicKeyBuffer = Buffer.concat([
-    Buffer.from(jwkObj[-2]),
-    Buffer.from(jwkObj[-3]),
-  ]);
-  return { publicKeyJwk, publicKeyBuffer };
-}
-
-export function toBase64Url(anythingB64: string) {
-  return anythingB64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
-}
-
-export function arrayToBase64Url(anything: Uint8Array) {
-  return toBase64Url(Buffer.from(anything).toString("base64"));
-}
-
-export function peerDidToPublicKeyBytes(did: string) {
-  return multibaseToBytes(did.substring(PEER_DID_MULTIBASE_PREFIX.length));
-}
-
-export function createPeerDid(publicKeyBytes: Uint8Array) {
-  // https://github.com/decentralized-identity/veramo/blob/next/packages/did-provider-peer/src/peer-did-provider.ts#L67
-  //const provider = new PeerDIDProvider({ defaultKms: LOCAL_KMS_NAME });
-  const methodSpecificId = bytesToMultibase(
-    publicKeyBytes,
-    "base58btc",
-    "p256-pub",
-  );
-  return PEER_DID_MULTIBASE_PREFIX + methodSpecificId;
-}

src/libs/crypto/vc/index.ts

@@ -1,201 +0,0 @@
-/**
- * Verifiable Credential & DID functions, specifically for EndorserSearch.org tools
- *
- * The goal is to make this folder similar across projects, then move it to a library.
- * Other projects: endorser-ch, image-api
- *
- */
-
-import { Buffer } from "buffer/";
-import * as didJwt from "did-jwt";
-import { JWTVerified } from "did-jwt";
-import { Resolver } from "did-resolver";
-import { IIdentifier } from "@veramo/core";
-import * as u8a from "uint8arrays";
-
-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
- */
-export interface KeyMeta {
-  /**
-   * Decentralized ID for the key
-   */
-  did: string;
-  /**
-   * Stringified IIDentifier object from Veramo
-   */
-  identity?: string;
-  /**
-   * The Webauthn credential ID in hex, if this is from a passkey
-   */
-  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
- */
-export function isFromPasskey(keyMeta?: KeyMeta): boolean {
-  return !!keyMeta?.passkeyCredIdHex;
-}
-
-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);
-    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 {
-    throw new Error("No identity data found to sign for DID " + account.did);
-  }
-}
-
-/**
- *  Copied out of did-jwt since it's deprecated in that library.
- *
- *  The SimpleSigner returns a configured function for signing data.
- *
- *  @example
- *  const signer = SimpleSigner(privateKeyHexString)
- *  signer(data, (err, signature) => {
- *    ...
- *  })
- *
- *  @param    {String}         hexPrivateKey    a hex encoded private key
- *  @return   {Function}                     a configured signer function
- */
-function SimpleSigner(hexPrivateKey: string): didJwt.Signer {
-  const signer = didJwt.ES256KSigner(didJwt.hexToBytes(hexPrivateKey), true);
-  return async (data) => {
-    const signature = (await signer(data)) as string;
-    return fromJose(signature);
-  };
-}
-
-// from did-jwt/util; see SimpleSigner above
-function fromJose(signature: string): {
-  r: string;
-  s: string;
-  recoveryParam?: number;
-} {
-  const signatureBytes: Uint8Array = didJwt.base64ToBytes(signature);
-  if (signatureBytes.length < 64 || signatureBytes.length > 65) {
-    throw new TypeError(
-      `Wrong size for signature. Expected 64 or 65 bytes, but got ${signatureBytes.length}`,
-    );
-  }
-  const r = bytesToHex(signatureBytes.slice(0, 32));
-  const s = bytesToHex(signatureBytes.slice(32, 64));
-  const recoveryParam =
-    signatureBytes.length === 65 ? signatureBytes[64] : undefined;
-  return { r, s, recoveryParam };
-}
-
-// from did-jwt/util; see SimpleSigner above
-function bytesToHex(b: Uint8Array): string {
-  return u8a.toString(b, "base16");
-}
-
-// 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

@@ -1,549 +0,0 @@
-import { Buffer } from "buffer/";
-import { JWTPayload } from "did-jwt";
-import { DIDResolutionResult } from "did-resolver";
-import { sha256 } from "ethereum-cryptography/sha256.js";
-import {
-  startAuthentication,
-  startRegistration,
-} from "@simplewebauthn/browser";
-import {
-  generateAuthenticationOptions,
-  generateRegistrationOptions,
-  verifyAuthenticationResponse,
-  verifyRegistrationResponse,
-} from "@simplewebauthn/server";
-import { VerifyAuthenticationResponseOpts } from "@simplewebauthn/server/esm/authentication/verifyAuthenticationResponse";
-import {
-  Base64URLString,
-  PublicKeyCredentialCreationOptionsJSON,
-  PublicKeyCredentialRequestOptionsJSON,
-} from "@simplewebauthn/types";
-
-import { AppString } from "@/constants/app";
-import { unwrapEC2Signature } from "@/libs/crypto/vc/passkeyHelpers";
-import {
-  arrayToBase64Url,
-  cborToKeys,
-  peerDidToPublicKeyBytes,
-  verifyPeerSignature,
-} from "@/libs/crypto/vc/didPeer";
-
-export interface JWK {
-  kty: string;
-  crv: string;
-  x: string;
-  y: string;
-}
-
-export async function registerCredential(passkeyName?: string) {
-  const options: PublicKeyCredentialCreationOptionsJSON =
-    await generateRegistrationOptions({
-      rpName: AppString.APP_NAME,
-      rpID: window.location.hostname,
-      userName: passkeyName || AppString.APP_NAME + " User",
-      // Don't prompt users for additional information about the authenticator
-      // (Recommended for smoother UX)
-      attestationType: "none",
-      authenticatorSelection: {
-        // Defaults
-        residentKey: "preferred",
-        userVerification: "preferred",
-        // Optional
-        authenticatorAttachment: "platform",
-      },
-    });
-  // someday, instead of simplwebauthn, we'll go direct: navigator.credentials.create with PublicKeyCredentialCreationOptions
-  // with pubKeyCredParams: { type: "public-key", alg: -7 }
-  const attResp = await startRegistration(options);
-  const verification = await verifyRegistrationResponse({
-    response: attResp,
-    expectedChallenge: options.challenge,
-    expectedOrigin: window.location.origin,
-    expectedRPID: window.location.hostname,
-  });
-
-  // references for parsing auth data and getting the public key
-  // https://github.com/MasterKale/SimpleWebAuthn/blob/master/packages/server/src/helpers/parseAuthenticatorData.ts#L11
-  // https://chatgpt.com/share/78a5c91d-099d-46dc-aa6d-fc0c916509fa
-  // https://chatgpt.com/share/3c13f061-6031-45bc-a2d7-3347c1e7a2d7
-
-  const credIdBase64Url = verification.registrationInfo?.credentialID as string;
-  if (attResp.rawId !== credIdBase64Url) {
-    console.log("Warning! The raw ID does not match the credential ID.");
-  }
-  const credIdHex = Buffer.from(
-    base64URLStringToArrayBuffer(credIdBase64Url),
-  ).toString("hex");
-  const { publicKeyJwk } = cborToKeys(
-    verification.registrationInfo?.credentialPublicKey as Uint8Array,
-  );
-
-  return {
-    authData: verification.registrationInfo?.attestationObject,
-    credIdHex: credIdHex,
-    publicKeyJwk: publicKeyJwk,
-    publicKeyBytes: verification.registrationInfo
-      ?.credentialPublicKey as Uint8Array,
-  };
-}
-
-export class PeerSetup {
-  public authenticatorData?: ArrayBuffer;
-  public challenge?: Uint8Array;
-  public clientDataJsonBase64Url?: Base64URLString;
-  public signature?: Base64URLString;
-
-  public async createJwtSimplewebauthn(
-    issuerDid: string,
-    payload: object,
-    credIdHex: string,
-    expMinutes: number = 1,
-  ) {
-    const credentialId = arrayBufferToBase64URLString(
-      Buffer.from(credIdHex, "hex").buffer,
-    );
-    const issuedAt = Math.floor(Date.now() / 1000);
-    const expiryTime = Math.floor(Date.now() / 1000) + expMinutes * 60; // some minutes from now
-    const fullPayload = {
-      ...payload,
-      exp: expiryTime,
-      iat: issuedAt,
-      iss: issuerDid,
-    };
-    this.challenge = new Uint8Array(Buffer.from(JSON.stringify(fullPayload)));
-    // const payloadHash: Uint8Array = sha256(this.challenge);
-    const options: PublicKeyCredentialRequestOptionsJSON =
-      await generateAuthenticationOptions({
-        challenge: this.challenge,
-        rpID: window.location.hostname,
-        allowCredentials: [{ id: credentialId }],
-      });
-    // console.log("simple authentication options", options);
-
-    const clientAuth = await startAuthentication(options);
-    // console.log("simple credential get", clientAuth);
-
-    const authenticatorDataBase64Url = clientAuth.response.authenticatorData;
-    this.authenticatorData = Buffer.from(
-      clientAuth.response.authenticatorData,
-      "base64",
-    ).buffer;
-    this.clientDataJsonBase64Url = clientAuth.response.clientDataJSON;
-    // console.log("simple authenticatorData for signing", this.authenticatorData);
-    this.signature = clientAuth.response.signature;
-
-    // Our custom type of JWANT means the signature is based on a concatenation of the two Webauthn properties
-    const header: JWTPayload = { typ: "JWANT", alg: "ES256" };
-    const headerBase64 = Buffer.from(JSON.stringify(header))
-      .toString("base64")
-      .replace(/\+/g, "-")
-      .replace(/\//g, "_")
-      .replace(/=+$/, "");
-
-    const dataInJwt = {
-      AuthenticationDataB64URL: authenticatorDataBase64Url,
-      ClientDataJSONB64URL: this.clientDataJsonBase64Url,
-      exp: expiryTime,
-      iat: issuedAt,
-      iss: issuerDid,
-    };
-    const dataInJwtString = JSON.stringify(dataInJwt);
-    const payloadBase64 = Buffer.from(dataInJwtString)
-      .toString("base64")
-      .replace(/\+/g, "-")
-      .replace(/\//g, "_")
-      .replace(/=+$/, "");
-
-    const signature = clientAuth.response.signature;
-
-    return headerBase64 + "." + payloadBase64 + "." + signature;
-  }
-
-  public async createJwtNavigator(
-    issuerDid: string,
-    payload: object,
-    credIdHex: string,
-    expMinutes: number = 1,
-  ) {
-    const issuedAt = Math.floor(Date.now() / 1000);
-    const expiryTime = Math.floor(Date.now() / 1000) + expMinutes * 60; // some minutes from now
-    const fullPayload = {
-      ...payload,
-      exp: expiryTime,
-      iat: issuedAt,
-      iss: issuerDid,
-    };
-    const dataToSignString = JSON.stringify(fullPayload);
-    const dataToSignBuffer = Buffer.from(dataToSignString);
-    const credentialId = Buffer.from(credIdHex, "hex");
-
-    // console.log("lower credentialId", credentialId);
-    this.challenge = new Uint8Array(dataToSignBuffer);
-    const options = {
-      publicKey: {
-        allowCredentials: [
-          {
-            id: credentialId,
-            type: "public-key" as const,
-          },
-        ],
-        challenge: this.challenge.buffer,
-        rpID: window.location.hostname,
-        userVerification: "preferred" as const,
-      },
-    };
-
-    const credential = await navigator.credentials.get(options);
-    // console.log("nav credential get", credential);
-
-    this.authenticatorData = credential?.response.authenticatorData;
-    const authenticatorDataBase64Url = arrayBufferToBase64URLString(
-      this.authenticatorData as ArrayBuffer,
-    );
-
-    this.clientDataJsonBase64Url = arrayBufferToBase64URLString(
-      credential?.response.clientDataJSON,
-    );
-
-    // Our custom type of JWANT means the signature is based on a concatenation of the two Webauthn properties
-    const header: JWTPayload = { typ: "JWANT", alg: "ES256" };
-    const headerBase64 = Buffer.from(JSON.stringify(header))
-      .toString("base64")
-      .replace(/\+/g, "-")
-      .replace(/\//g, "_")
-      .replace(/=+$/, "");
-
-    const dataInJwt = {
-      AuthenticationDataB64URL: authenticatorDataBase64Url,
-      ClientDataJSONB64URL: this.clientDataJsonBase64Url,
-      exp: expiryTime,
-      iat: issuedAt,
-      iss: issuerDid,
-    };
-    const dataInJwtString = JSON.stringify(dataInJwt);
-    const payloadBase64 = Buffer.from(dataInJwtString)
-      .toString("base64")
-      .replace(/\+/g, "-")
-      .replace(/\//g, "_")
-      .replace(/=+$/, "");
-
-    const origSignature = Buffer.from(credential?.response.signature).toString(
-      "base64",
-    );
-    this.signature = origSignature
-      .replace(/\+/g, "-")
-      .replace(/\//g, "_")
-      .replace(/=+$/, "");
-
-    const jwt = headerBase64 + "." + payloadBase64 + "." + this.signature;
-    return jwt;
-  }
-
-  // To use this, add the asn1-ber library and add this import:
-  // import asn1 from "asn1-ber";
-  //
-  // return a low-level signing function, similar to createJWS approach
-  // async webAuthnES256KSigner(credentialID: string) {
-  //   return async (data: string | Uint8Array) => {
-  //     // get signature from WebAuthn
-  //     const signature = await this.generateWebAuthnSignature(data);
-  //
-  //     // This converts from the browser ArrayBuffer to a Node.js Buffer, which is a requirement for the asn1 library.
-  //     const signatureBuffer = Buffer.from(signature);
-  //     console.log("lower signature inside signer", signature);
-  //     console.log("lower buffer signature inside signer", signatureBuffer);
-  //     console.log("lower base64 buffer signature inside signer", signatureBuffer.toString("base64"));
-  //     // Decode the DER-encoded signature to extract R and S values
-  //     const reader = new asn1.BerReader(signatureBuffer);
-  //     console.log("lower after reader");
-  //     reader.readSequence();
-  //     console.log("lower after read sequence");
-  //     const r = reader.readString(asn1.Ber.Integer, true);
-  //     console.log("lower after r");
-  //     const s = reader.readString(asn1.Ber.Integer, true);
-  //     console.log("lower after r & s");
-  //
-  //     // Ensure R and S are 32 bytes each
-  //     const rBuffer = Buffer.from(r);
-  //     const sBuffer = Buffer.from(s);
-  //     console.log("lower after rBuffer & sBuffer", rBuffer, sBuffer);
-  //     const rWithoutPrefix = rBuffer.length > 32 ? rBuffer.slice(1) : rBuffer;
-  //     const sWithoutPrefix = sBuffer.length > 32 ? sBuffer.slice(1) : sBuffer;
-  //     const rPadded =
-  //       rWithoutPrefix.length < 32
-  //         ? Buffer.concat([Buffer.alloc(32 - rWithoutPrefix.length), rBuffer])
-  //         : rWithoutPrefix;
-  //     const sPadded =
-  //       rWithoutPrefix.length < 32
-  //         ? Buffer.concat([Buffer.alloc(32 - sWithoutPrefix.length), sBuffer])
-  //         : sWithoutPrefix;
-  //
-  //     // Concatenate R and S to form the 64-byte array (ECDSA signature format expected by JWT)
-  //     const combinedSignature = Buffer.concat([rPadded, sPadded]);
-  //     console.log(
-  //       "lower combinedSignature",
-  //       combinedSignature.length,
-  //       combinedSignature,
-  //     );
-  //
-  //     const combSig64 = combinedSignature.toString("base64");
-  //     console.log("lower combSig64", combSig64);
-  //     const combSig64Url = combSig64
-  //       .replace(/\+/g, "-")
-  //       .replace(/\//g, "_")
-  //       .replace(/=+$/, "");
-  //     console.log("lower combSig64Url", combSig64Url);
-  //     return combSig64Url;
-  //   };
-  // }
-}
-
-export async function createDidPeerJwt(
-  did: string,
-  credIdHex: string,
-  payload: object,
-): Promise<string> {
-  const peerSetup = new PeerSetup();
-  const jwt = await peerSetup.createJwtNavigator(did, payload, credIdHex);
-  return jwt;
-}
-
-// I'd love to use this but it doesn't verify.
-// Requires:
-// npm install @noble/curves
-// ... and this import:
-// import { p256 } from "@noble/curves/p256";
-export async function verifyJwtP256(
-  credIdHex: string,
-  issuerDid: string,
-  authenticatorData: ArrayBuffer,
-  challenge: Uint8Array,
-  clientDataJsonBase64Url: Base64URLString,
-  signature: Base64URLString,
-) {
-  const authDataFromBase = Buffer.from(authenticatorData);
-  const clientDataFromBase = Buffer.from(clientDataJsonBase64Url, "base64");
-  const sigBuffer = Buffer.from(signature, "base64");
-  const finalSigBuffer = unwrapEC2Signature(sigBuffer);
-  const publicKeyBytes = peerDidToPublicKeyBytes(issuerDid);
-
-  // Hash the client data
-  const hash = sha256(clientDataFromBase);
-
-  // Construct the preimage
-  const preimage = Buffer.concat([authDataFromBase, hash]);
-
-  const isValid = p256.verify(
-    finalSigBuffer,
-    new Uint8Array(preimage),
-    publicKeyBytes,
-  );
-  return isValid;
-}
-
-export async function verifyJwtSimplewebauthn(
-  credIdHex: string,
-  issuerDid: string,
-  authenticatorData: ArrayBuffer,
-  challenge: Uint8Array,
-  clientDataJsonBase64Url: Base64URLString,
-  signature: Base64URLString,
-) {
-  const authData = arrayToBase64Url(Buffer.from(authenticatorData));
-  const publicKeyBytes = peerDidToPublicKeyBytes(issuerDid);
-  const credId = arrayBufferToBase64URLString(
-    Buffer.from(credIdHex, "hex").buffer,
-  );
-  const authOpts: VerifyAuthenticationResponseOpts = {
-    authenticator: {
-      credentialID: credId,
-      credentialPublicKey: publicKeyBytes,
-      counter: 0,
-    },
-    expectedChallenge: arrayToBase64Url(challenge),
-    expectedOrigin: window.location.origin,
-    expectedRPID: window.location.hostname,
-    response: {
-      authenticatorAttachment: "platform",
-      clientExtensionResults: {},
-      id: credId,
-      rawId: credId,
-      response: {
-        authenticatorData: authData,
-        clientDataJSON: clientDataJsonBase64Url,
-        signature: signature,
-      },
-      type: "public-key",
-    },
-  };
-  const verification = await verifyAuthenticationResponse(authOpts);
-  return verification.verified;
-}
-
-// similar code is in endorser-ch util-crypto.ts verifyPeerSignature
-export async function verifyJwtWebCrypto(
-  credId: Base64URLString,
-  issuerDid: string,
-  authenticatorData: ArrayBuffer,
-  challenge: Uint8Array,
-  clientDataJsonBase64Url: Base64URLString,
-  signature: Base64URLString,
-) {
-  const authDataFromBase = Buffer.from(authenticatorData);
-  const clientDataFromBase = Buffer.from(clientDataJsonBase64Url, "base64");
-  const sigBuffer = Buffer.from(signature, "base64");
-  const finalSigBuffer = unwrapEC2Signature(sigBuffer);
-
-  // Hash the client data
-  const hash = sha256(clientDataFromBase);
-
-  // Construct the preimage
-  const preimage = Buffer.concat([authDataFromBase, hash]);
-  return verifyPeerSignature(preimage, issuerDid, finalSigBuffer);
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-async function peerDidToDidDocument(did: string): Promise<DIDResolutionResult> {
-  if (!did.startsWith("did:peer:0z")) {
-    throw new Error(
-      "This only verifies a peer DID, method 0, encoded base58btc.",
-    );
-  }
-  // this is basically hard-coded from https://www.w3.org/TR/did-core/#example-various-verification-method-types
-  // (another reference is the @aviarytech/did-peer resolver)
-
-  /**
-   * Looks like JsonWebKey2020 isn't too difficult:
-   * - change context security/suites link to jws-2020/v1
-   * - change publicKeyMultibase to publicKeyJwk generated with cborToKeys
-   * - change type to JsonWebKey2020
-   */
-
-  const id = did.split(":")[2];
-  const multibase = id.slice(1);
-  const encnumbasis = multibase.slice(1);
-  const didDocument = {
-    "@context": [
-      "https://www.w3.org/ns/did/v1",
-      "https://w3id.org/security/suites/secp256k1-2019/v1",
-    ],
-    assertionMethod: [did + "#" + encnumbasis],
-    authentication: [did + "#" + encnumbasis],
-    capabilityDelegation: [did + "#" + encnumbasis],
-    capabilityInvocation: [did + "#" + encnumbasis],
-    id: did,
-    keyAgreement: undefined,
-    service: undefined,
-    verificationMethod: [
-      {
-        controller: did,
-        id: did + "#" + encnumbasis,
-        publicKeyMultibase: multibase,
-        type: "EcdsaSecp256k1VerificationKey2019",
-      },
-    ],
-  };
-  return {
-    didDocument,
-    didDocumentMetadata: {},
-    didResolutionMetadata: { contentType: "application/did+ld+json" },
-  };
-}
-
-// convert COSE public key to PEM format
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function COSEtoPEM(cose: Buffer) {
-  // const alg = cose.get(3); // Algorithm
-  const x = cose[-2]; // x-coordinate
-  const y = cose[-3]; // y-coordinate
-
-  // Ensure the coordinates are in the correct format
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error because it complains about the type of x and y
-  const pubKeyBuffer = Buffer.concat([Buffer.from([0x04]), x, y]);
-
-  // Convert to PEM format
-  const pem = `-----BEGIN PUBLIC KEY-----
-${pubKeyBuffer.toString("base64")}
------END PUBLIC KEY-----`;
-
-  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 base64urlDecodeArrayBuffer(input: string) {
-  input = input.replace(/-/g, "+").replace(/_/g, "/");
-  const pad = input.length % 4 === 0 ? "" : "====".slice(input.length % 4);
-  const str = atob(input + pad);
-  const bytes = new Uint8Array(str.length);
-  for (let i = 0; i < str.length; i++) {
-    bytes[i] = str.charCodeAt(i);
-  }
-  return bytes.buffer;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function base64urlEncodeArrayBuffer(buffer: ArrayBuffer) {
-  const str = String.fromCharCode(...new Uint8Array(buffer));
-  return base64urlEncodeString(str);
-}
-
-// from @simplewebauthn/browser
-function arrayBufferToBase64URLString(buffer: ArrayBuffer) {
-  const bytes = new Uint8Array(buffer);
-  let str = "";
-  for (const charCode of bytes) {
-    str += String.fromCharCode(charCode);
-  }
-  const base64String = btoa(str);
-  return base64String.replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
-}
-
-// from @simplewebauthn/browser
-function base64URLStringToArrayBuffer(base64URLString: string) {
-  const base64 = base64URLString.replace(/-/g, "+").replace(/_/g, "/");
-  const padLength = (4 - (base64.length % 4)) % 4;
-  const padded = base64.padEnd(base64.length + padLength, "=");
-  const binary = atob(padded);
-  const buffer = new ArrayBuffer(binary.length);
-  const bytes = new Uint8Array(buffer);
-  for (let i = 0; i < binary.length; i++) {
-    bytes[i] = binary.charCodeAt(i);
-  }
-  return buffer;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-async function pemToCryptoKey(pem: string) {
-  const binaryDerString = atob(
-    pem
-      .split("\n")
-      .filter((x) => !x.includes("-----"))
-      .join(""),
-  );
-  const binaryDer = new Uint8Array(binaryDerString.length);
-  for (let i = 0; i < binaryDerString.length; i++) {
-    binaryDer[i] = binaryDerString.charCodeAt(i);
-  }
-  // console.log("binaryDer", binaryDer.buffer);
-  return await window.crypto.subtle.importKey(
-    "spki",
-    binaryDer.buffer,
-    {
-      name: "RSASSA-PKCS1-v1_5",
-      hash: "SHA-256",
-    },
-    true,
-    ["verify"],
-  );
-}

src/libs/crypto/vc/passkeyHelpers.ts

@@ -1,105 +0,0 @@
-// from https://github.com/MasterKale/SimpleWebAuthn/blob/master/packages/server/src/helpers/iso/isoCrypto/unwrapEC2Signature.ts
-import { AsnParser } from "@peculiar/asn1-schema";
-import { ECDSASigValue } from "@peculiar/asn1-ecc";
-
-/**
- * In WebAuthn, EC2 signatures are wrapped in ASN.1 structure so we need to peel r and s apart.
- *
- * See https://www.w3.org/TR/webauthn-2/#sctn-signature-attestation-types
- */
-export function unwrapEC2Signature(signature: Uint8Array): Uint8Array {
-  const parsedSignature = AsnParser.parse(signature, ECDSASigValue);
-  let rBytes = new Uint8Array(parsedSignature.r);
-  let sBytes = new Uint8Array(parsedSignature.s);
-
-  if (shouldRemoveLeadingZero(rBytes)) {
-    rBytes = rBytes.slice(1);
-  }
-
-  if (shouldRemoveLeadingZero(sBytes)) {
-    sBytes = sBytes.slice(1);
-  }
-
-  const finalSignature = isoUint8ArrayConcat([rBytes, sBytes]);
-
-  return finalSignature;
-}
-
-/**
- * Determine if the DER-specific `00` byte at the start of an ECDSA signature byte sequence
- * should be removed based on the following logic:
- *
- * "If the leading byte is 0x0, and the the high order bit on the second byte is not set to 0,
- * then remove the leading 0x0 byte"
- */
-function shouldRemoveLeadingZero(bytes: Uint8Array): boolean {
-  return bytes[0] === 0x0 && (bytes[1] & (1 << 7)) !== 0;
-}
-
-// from https://github.com/MasterKale/SimpleWebAuthn/blob/master/packages/server/src/helpers/iso/isoUint8Array.ts#L49
-/**
- * Combine multiple Uint8Arrays into a single Uint8Array
- */
-export function isoUint8ArrayConcat(arrays: Uint8Array[]): Uint8Array {
-  let pointer = 0;
-  const totalLength = arrays.reduce((prev, curr) => prev + curr.length, 0);
-
-  const toReturn = new Uint8Array(totalLength);
-
-  arrays.forEach((arr) => {
-    toReturn.set(arr, pointer);
-    pointer += arr.length;
-  });
-
-  return toReturn;
-}
-
-// from https://github.com/MasterKale/SimpleWebAuthn/blob/master/packages/server/src/helpers/iso/isoCrypto/getWebCrypto.ts
-let webCrypto: { subtle: SubtleCrypto } | undefined = undefined;
-export function getWebCrypto(): Promise<{ subtle: SubtleCrypto }> {
-  /**
-   * Hello there! If you came here wondering why this method is asynchronous when use of
-   * `globalThis.crypto` is not, it's to minimize a bunch of refactor related to making this
-   * synchronous. For example, `generateRegistrationOptions()` and `generateAuthenticationOptions()`
-   * become synchronous if we make this synchronous (since nothing else in that method is async)
-   * which represents a breaking API change in this library's core API.
-   *
-   * TODO: If it's after February 2025 when you read this then consider whether it still makes sense
-   * to keep this method asynchronous.
-   */
-  const toResolve: Promise<{ subtle: SubtleCrypto }> = new Promise(
-    (resolve, reject) => {
-      if (webCrypto) {
-        return resolve(webCrypto);
-      }
-      /**
-       * Naively attempt to access Crypto as a global object, which popular ESM-centric run-times
-       * support (and Node v20+)
-       */
-      const _globalThisCrypto =
-        _getWebCryptoInternals.stubThisGlobalThisCrypto();
-      if (_globalThisCrypto) {
-        webCrypto = _globalThisCrypto;
-        return resolve(webCrypto);
-      }
-      // We tried to access it both in Node and globally, so bail out
-      return reject(new MissingWebCrypto());
-    },
-  );
-  return toResolve;
-}
-class MissingWebCrypto extends Error {
-  constructor() {
-    const message = "An instance of the Crypto API could not be located";
-    super(message);
-    this.name = "MissingWebCrypto";
-  }
-}
-// Make it possible to stub return values during testing
-const _getWebCryptoInternals = {
-  stubThisGlobalThisCrypto: () => globalThis.crypto,
-  // Make it possible to reset the `webCrypto` at the top of the file
-  setCachedCrypto: (newCrypto: { subtle: SubtleCrypto }) => {
-    webCrypto = newCrypto;
-  },
-};

src/libs/crypto/vc/util.ts

@@ -1,11 +0,0 @@
-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/partnerServer.ts

@@ -1,9 +0,0 @@
-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

@@ -1,54 +1,26 @@
 // many of these are also found in endorser-mobile utility.ts
 
 import axios, { AxiosResponse } from "axios";
-import { Buffer } from "buffer";
-import * as R from "ramda";
+import { IIdentifier } from "@veramo/core";
 import { useClipboard } from "@vueuse/core";
 
-import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app";
-import {
-  accountsDBPromise,
-  retrieveSettingsForActiveAccount,
-  updateAccountSettings,
-  updateDefaultSettings,
-} from "@/db/index";
+import { DEFAULT_PUSH_SERVER } from "@/constants/app";
+import { accountsDB, db } from "@/db/index";
 import { Account } from "@/db/tables/accounts";
-import { Contact } from "@/db/tables/contacts";
-import { DEFAULT_PASSKEY_EXPIRATION_MINUTES } from "@/db/tables/settings";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
+import { GenericServerRecord, containsHiddenDid } from "@/libs/endorserServer";
 import * as serverUtil from "@/libs/endorserServer";
-import {
-  containsHiddenDid,
-  GenericCredWrapper,
-  GenericVerifiableCredential,
-  GiveSummaryRecord,
-  OfferVerifiableCredential,
-} 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",
-}
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const Buffer = require("buffer/").Buffer;
 
 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";
+  "The data you send be visible to the world -- except: your IDs and the IDs of anyone you tag will stay private, only visible to those you allow.";
 
 /* eslint-disable prettier/prettier */
 export const UNIT_SHORT: Record<string, string> = {
   "BTC": "BTC",
-  "BX": "BX",
   "ETH": "ETH",
   "HUR": "Hours",
   "USD": "US $",
@@ -58,7 +30,6 @@ export const UNIT_SHORT: Record<string, string> = {
 /* eslint-disable prettier/prettier */
 export const UNIT_LONG: Record<string, string> = {
   "BTC": "Bitcoin",
-  "BX": "Buxbe",
   "ETH": "Ethereum",
   "HUR": "hours",
   "USD": "dollars",
@@ -85,13 +56,9 @@ export function iconForUnitCode(unitCode: string) {
 }
 
 // from https://stackoverflow.com/a/175787/845494
-// ... though it appears even this isn't precisely right so keep doing "|| 0" or something in sensitive places
 //
 export function isNumeric(str: string): boolean {
-  // This ignore commentary is because typescript complains when you pass a string to isNaN.
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  return !isNaN(str) && !isNaN(parseFloat(str));
+  return !isNaN(+str);
 }
 
 export function numberOrZero(str: string): number {
@@ -102,51 +69,8 @@ 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 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 = (
-  activeDid: string,
-  contacts: Array<Contact>,
-  did: string,
-): string => {
-  if (did === activeDid) {
-    return "you";
-  }
-  const contact = R.find((con) => con.did == did, contacts);
-  return nameForContact(contact);
-};
-
-export const nameForContact = (
-  contact?: Contact,
-  capitalize?: boolean,
-): string => {
-  return (
-    (contact?.name as string) ||
-    (capitalize ? "This" : "this") + " unnamed user"
-  );
+export const giveIsConfirmable = (veriClaim: GenericServerRecord) => {
+  return veriClaim.claimType === "GiveAction";
 };
 
 export const doCopyTwoSecRedo = (text: string, fn: () => void) => {
@@ -156,211 +80,30 @@ 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 function isGiveRecordTheUserCanConfirm(
-  isRegistered: boolean,
-  veriClaim: GenericCredWrapper<GenericVerifiableCredential>,
+export const isGiveRecordTheUserCanConfirm = (
+  veriClaim: GenericServerRecord,
   activeDid: string,
   confirmerIdList: string[] = [],
-): boolean {
+) => {
   return (
-    isRegistered &&
-    isGiveAction(veriClaim) &&
+    giveIsConfirmable(veriClaim) &&
     !confirmerIdList.includes(activeDid) &&
     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) => {
-    const reader = new FileReader();
-    reader.onloadend = () => resolve(reader.result as string); // potential problem if it returns an ArrayBuffer?
-    reader.onerror = reject;
-    reader.readAsDataURL(blob);
-  });
-}
-
-export function base64ToBlob(base64DataUrl: string, sliceSize = 512) {
-  // Extract the content type and the Base64 data
-  const [metadata, base64] = base64DataUrl.split(",");
-  const contentTypeMatch = metadata.match(/data:(.*?);base64/);
-  const contentType = contentTypeMatch ? contentTypeMatch[1] : "";
-
-  const byteCharacters = atob(base64);
-  const byteArrays = [];
-
-  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
-    const slice = byteCharacters.slice(offset, offset + sliceSize);
-
-    const byteNumbers = new Array(slice.length);
-    for (let i = 0; i < slice.length; i++) {
-      byteNumbers[i] = slice.charCodeAt(i);
-    }
-
-    const byteArray = new Uint8Array(byteNumbers);
-    byteArrays.push(byteArray);
-  }
-  return new Blob(byteArrays, { type: contentType });
-}
+};
 
 /**
  * @returns the DID of the person who offered, or undefined if hidden
  * @param veriClaim is expected to have fields: claim and issuer
  */
-export function offerGiverDid(
-  veriClaim: GenericCredWrapper<OfferVerifiableCredential>,
-): string | undefined {
+export const offerGiverDid: (
+  arg0: GenericServerRecord,
+) => string | undefined = (veriClaim) => {
   let giver;
   if (
     veriClaim.claim.offeredBy?.identifier &&
@@ -371,19 +114,14 @@ export function offerGiverDid(
     giver = veriClaim.issuer;
   }
   return giver;
-}
+};
 
 /**
  * @returns true if the user can fulfill the offer
  * @param veriClaim is expected to have fields: claim, claimType, and issuer
  */
-export const canFulfillOffer = (
-  veriClaim: GenericCredWrapper<GenericVerifiableCredential>,
-) => {
-  return (
-    veriClaim.claimType === "Offer" &&
-    !!offerGiverDid(veriClaim as GenericCredWrapper<OfferVerifiableCredential>)
-  );
+export const canFulfillOffer = (veriClaim: GenericServerRecord) => {
+  return !!(veriClaim.claimType === "Offer" && offerGiverDid(veriClaim));
 };
 
 // return object with paths and arrays of DIDs for any keys ending in "VisibleToDid"
@@ -452,72 +190,20 @@ export function findAllVisibleToDids(
  *
  **/
 
-export interface AccountKeyInfo extends Account, KeyMeta {}
-
-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> => {
-  // one of the few times we use accountsDBPromise directly; try to avoid more usage
-  const accountsDB = await accountsDBPromise;
+export const getIdentity = async (activeDid: string): Promise<IIdentifier> => {
+  await accountsDB.open();
   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;
+  const identity = JSON.parse(account?.identity || "null");
+
+  if (!identity) {
+    throw new Error(
+      `Attempted to load Offer records for DID ${activeDid} but no identifier was found`,
+    );
   }
-};
-
-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)
-    .first()) as Account;
-  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;
+  return identity;
 };
 
 /**
@@ -533,8 +219,7 @@ export const generateSaveAndActivateIdentity = async (): Promise<string> => {
   const newId = newIdentifier(address, publicHex, privateHex, derivationPath);
   const identity = JSON.stringify(newId);
 
-  // one of the few times we use accountsDBPromise directly; try to avoid more usage
-  const accountsDB = await accountsDBPromise;
+  await accountsDB.open();
   await accountsDB.accounts.add({
     dateCreated: new Date().toISOString(),
     derivationPath: derivationPath,
@@ -544,70 +229,50 @@ export const generateSaveAndActivateIdentity = async (): Promise<string> => {
     publicKeyHex: newId.keys[0].publicKeyHex,
   });
 
-  await updateDefaultSettings({ activeDid: newId.did });
-  //console.log("Updated default settings in util");
-  await updateAccountSettings(newId.did, { isRegistered: false });
+  await db.settings.update(MASTER_SETTINGS_KEY, {
+    activeDid: newId.did,
+  });
 
   return newId.did;
 };
 
-export const registerAndSavePasskey = async (
-  keyName: string,
-): Promise<Account> => {
-  const cred = await registerCredential(keyName);
-  const publicKeyBytes = cred.publicKeyBytes;
-  const did = createPeerDid(publicKeyBytes as Uint8Array);
-  const passkeyCredIdHex = cred.credIdHex as string;
-
-  const account = {
-    dateCreated: new Date().toISOString(),
-    did,
-    passkeyCredIdHex,
-    publicKeyHex: Buffer.from(publicKeyBytes).toString("hex"),
-  };
-  // 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;
-};
-
-export const registerSaveAndActivatePasskey = async (
-  keyName: string,
-): Promise<Account> => {
-  const account = await registerAndSavePasskey(keyName);
-  await updateDefaultSettings({ activeDid: account.did });
-  await updateAccountSettings(account.did, { isRegistered: false });
-  return account;
-};
-
-export const getPasskeyExpirationSeconds = async (): Promise<number> => {
-  const settings = await retrieveSettingsForActiveAccount();
-  return (
-    (settings?.passkeyExpirationMinutes ?? DEFAULT_PASSKEY_EXPIRATION_MINUTES) *
-    60
-  );
-};
-
-// 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,
+  subscription: PushSubscription,
   skipFilter: boolean,
 ): Promise<AxiosResponse> => {
-  const settings = await retrieveSettingsForActiveAccount();
+  await db.open();
+  const settings = await db.settings.get(MASTER_SETTINGS_KEY);
   let pushUrl: string = DEFAULT_PUSH_SERVER as string;
   if (settings?.webPushServer) {
     pushUrl = settings.webPushServer;
   }
 
+  // This is a special value that tells the service worker to send a direct notification to the device, skipping filters.
+  // This is shared with the service worker and should be a constant. Look for the same name in additional-scripts.js
+  // Use something other than "Daily Update" https://gitea.anomalistdesign.com/trent_larson/py-push-server/src/commit/3c0e196c11bc98060ec5934e99e7dbd591b5da4d/app.py#L213
+  const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";
+
+  const auth = Buffer.from(subscription.getKey("auth"));
+  const authB64 = auth
+    .toString("base64")
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=+$/, "");
+  const p256dh = Buffer.from(subscription.getKey("p256dh"));
+  const p256dhB64 = p256dh
+    .toString("base64")
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=+$/, "");
   const newPayload = {
-    ...subscriptionJSON,
-    // ... overridden with the following
-    // eslint-disable-next-line prettier/prettier
-    message: `Test, where you will see this message ${ skipFilter ? "un" : "" }filtered.`,
+    endpoint: subscription.endpoint,
+    keys: {
+      auth: authB64,
+      p256dh: p256dhB64,
+    },
+    message: `Test, where you will see this message ${
+      skipFilter ? "un" : ""
+    }filtered.`,
     title: skipFilter ? DIRECT_PUSH_TITLE : "Your Web Push",
   };
   console.log("Sending a test web push message:", newPayload);

src/main.ts

@@ -1,34 +1,28 @@
 import { createPinia } from "pinia";
-import { App as VueApp, ComponentPublicInstance, createApp } from "vue";
+import { createApp } from "vue";
 import App from "./App.vue";
 import "./registerServiceWorker";
 import router from "./router";
 import axios from "axios";
 import VueAxios from "vue-axios";
 import Notifications from "notiwind";
+import { useVOnboarding } from "v-onboarding";
 
 import "./assets/styles/tailwind.css";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
-  faArrowDown,
   faArrowLeft,
   faArrowRight,
-  faArrowRotateBackward,
   faArrowUpRightFromSquare,
-  faArrowUp,
   faBan,
   faBitcoinSign,
   faBurst,
   faCalendar,
   faCamera,
-  faCaretDown,
-  faChair,
   faCheck,
-  faChevronDown,
   faChevronLeft,
   faChevronRight,
-  faChevronUp,
   faCircle,
   faCircleCheck,
   faCircleInfo,
@@ -39,15 +33,10 @@ import {
   faComment,
   faCopy,
   faDollar,
-  faEllipsis,
   faEllipsisVertical,
-  faEnvelopeOpenText,
-  faEraser,
   faEye,
   faEyeSlash,
-  faFileContract,
   faFileLines,
-  faFilter,
   faFloppyDisk,
   faFolderOpen,
   faForward,
@@ -55,13 +44,9 @@ import {
   faGlobe,
   faHammer,
   faHand,
-  faHandHoldingDollar,
   faHandHoldingHeart,
   faHouseChimney,
-  faImagePortrait,
   faLeftRight,
-  faLightbulb,
-  faLink,
   faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,
@@ -74,11 +59,9 @@ import {
   faPlus,
   faQuestion,
   faQrcode,
-  faRightFromBracket,
   faRotate,
   faShareNodes,
   faSpinner,
-  faSquare,
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
@@ -90,24 +73,17 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
-  faArrowDown,
   faArrowLeft,
   faArrowRight,
-  faArrowRotateBackward,
   faArrowUpRightFromSquare,
-  faArrowUp,
   faBan,
   faBitcoinSign,
   faBurst,
   faCalendar,
   faCamera,
-  faCaretDown,
-  faChair,
   faCheck,
-  faChevronDown,
   faChevronLeft,
   faChevronRight,
-  faChevronUp,
   faCircle,
   faCircleCheck,
   faCircleInfo,
@@ -118,15 +94,10 @@ library.add(
   faComment,
   faCopy,
   faDollar,
-  faEllipsis,
   faEllipsisVertical,
-  faEnvelopeOpenText,
-  faEraser,
   faEye,
   faEyeSlash,
-  faFileContract,
   faFileLines,
-  faFilter,
   faFloppyDisk,
   faFolderOpen,
   faForward,
@@ -134,13 +105,9 @@ library.add(
   faGlobe,
   faHammer,
   faHand,
-  faHandHoldingDollar,
   faHandHoldingHeart,
   faHouseChimney,
-  faImagePortrait,
   faLeftRight,
-  faLightbulb,
-  faLink,
   faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,
@@ -154,10 +121,8 @@ library.add(
   faQrcode,
   faQuestion,
   faRotate,
-  faRightFromBracket,
   faShareNodes,
   faSpinner,
-  faSquare,
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
@@ -171,41 +136,12 @@ library.add(
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import Camera from "simple-vue-camera";
 
-// Can trigger this with a 'throw' inside some top-level function, eg. on the HomeView
-function setupGlobalErrorHandler(app: VueApp) {
-  // @ts-expect-error 'cause we cannot see why config is not defined
-  app.config.errorHandler = (
-    err: Error,
-    instance: ComponentPublicInstance | null,
-    info: string,
-  ) => {
-    console.error(
-      "Ouch! Global Error Handler.",
-      "Error:",
-      err,
-      "- Error toString:",
-      err.toString(),
-      "- Info:",
-      info,
-      "- Instance:",
-      instance,
-    );
-    // Want to show a nice notiwind notification but can't figure out how.
-    alert(
-      (err.message || "Something bad happened") +
-        " - Try reloading or restarting the app.",
-    );
-  };
-}
-
-const app = createApp(App)
+createApp(App)
   .component("fa", FontAwesomeIcon)
   .component("camera", Camera)
   .use(createPinia())
   .use(VueAxios, axios)
   .use(router)
-  .use(Notifications);
-
-setupGlobalErrorHandler(app);
-
-app.mount("#app");
+  .use(Notifications)
+  .use(useVOnboarding)
+  .mount("#app");

src/registerServiceWorker.ts

@@ -2,8 +2,7 @@
 
 import { register } from "register-service-worker";
 
-// NODE_ENV is "production" by default with "vite build". See https://vitejs.dev/guide/env-and-mode
-if (import.meta.env.NODE_ENV === "production") {
+if (process.env.NODE_ENV === "production") {
   register("/sw_scripts-combined.js", {
     ready() {
       console.log(

src/router/index.ts

@@ -5,7 +5,7 @@ import {
   RouteLocationNormalized,
   RouteRecordRaw,
 } from "vue-router";
-import { accountsDBPromise } from "@/db/index";
+import { accountsDB } from "@/db/index";
 
 /**
  *
@@ -18,8 +18,7 @@ const enterOrStart = async (
   from: RouteLocationNormalized,
   next: NavigationGuardNext,
 ) => {
-  // one of the few times we use accountsDBPromise directly; try to avoid more usage
-  const accountsDB = await accountsDBPromise;
+  await accountsDB.open();
   const num_accounts = await accountsDB.accounts.count();
   if (num_accounts > 0) {
     next();
@@ -32,257 +31,229 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: "/account",
     name: "account",
-    component: () => import("../views/AccountViewView.vue"),
+    component: () =>
+      import(/* webpackChunkName: "account" */ "../views/AccountViewView.vue"),
   },
   {
     path: "/claim/:id?",
     name: "claim",
-    component: () => import("../views/ClaimView.vue"),
-  },
-  {
-    path: "/claim-add-raw/:id?",
-    name: "claim-add-raw",
-    component: () => import("../views/ClaimAddRawView.vue"),
-  },
-  {
-    path: "/claim-cert/:id",
-    name: "claim-cert",
-    component: () => import("../views/ClaimCertificateView.vue"),
+    component: () =>
+      import(/* webpackChunkName: "claim" */ "../views/ClaimView.vue"),
   },
   {
     path: "/confirm-contact",
     name: "confirm-contact",
-    component: () => import("../views/ConfirmContactView.vue"),
-  },
-  {
-    path: "/confirm-gift/:id?",
-    name: "confirm-gift",
-    component: () => import("@/views/ConfirmGiftView.vue"),
+    component: () =>
+      import(
+        /* webpackChunkName: "confirm-contact" */ "../views/ConfirmContactView.vue"
+      ),
   },
   {
     path: "/contact-amounts",
     name: "contact-amounts",
-    component: () => import("../views/ContactAmountsView.vue"),
+    component: () =>
+      import(
+        /* webpackChunkName: "contact-amounts" */ "../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/:jwt?",
-    name: "contact-import",
-    component: () => import("../views/ContactImportView.vue"),
+    path: "/contact-gives",
+    name: "contact-gives",
+    component: () =>
+      import(
+        /* webpackChunkName: "contact-gives" */ "../views/ContactGiftingView.vue"
+      ),
   },
   {
     path: "/contact-qr",
     name: "contact-qr",
-    component: () => import("../views/ContactQRScanShowView.vue"),
+    component: () =>
+      import(
+        /* webpackChunkName: "contact-qr" */ "../views/ContactQRScanShowView.vue"
+      ),
   },
   {
     path: "/contacts",
     name: "contacts",
-    component: () => import("../views/ContactsView.vue"),
-  },
-  {
-    path: "/did/:did?",
-    name: "did",
-    component: () => import("../views/DIDView.vue"),
+    component: () =>
+      import(/* webpackChunkName: "contacts" */ "../views/ContactsView.vue"),
   },
   {
     path: "/discover",
     name: "discover",
-    component: () => import("../views/DiscoverView.vue"),
+    component: () =>
+      import(/* webpackChunkName: "discover" */ "../views/DiscoverView.vue"),
   },
   {
     path: "/gifted-details",
     name: "gifted-details",
-    component: () => import("@/views/GiftedDetailsView.vue"),
+    component: () =>
+      import(
+        /* webpackChunkName: "gifted-details" */ "../views/GiftedDetails.vue"
+      ),
   },
   {
     path: "/help",
     name: "help",
-    component: () => import("../views/HelpView.vue"),
+    component: () =>
+      import(/* webpackChunkName: "help" */ "../views/HelpView.vue"),
   },
   {
     path: "/help-notifications",
     name: "help-notifications",
-    component: () => import("../views/HelpNotificationsView.vue"),
-  },
-  {
-    path: "/help-notification-types",
-    name: "help-notification-types",
-    component: () => import("../views/HelpNotificationTypesView.vue"),
+    component: () =>
+      import(
+        /* webpackChunkName: "help-notifications" */ "../views/HelpNotificationsView.vue"
+      ),
   },
   {
     path: "/help-onboarding",
     name: "help-onboarding",
-    component: () => import("../views/HelpOnboardingView.vue"),
+    component: () =>
+      import(
+        /* webpackChunkName: "help-onboarding" */ "../views/HelpOnboardingView.vue"
+      ),
   },
   {
     path: "/",
     name: "home",
-    component: () => import("../views/HomeView.vue"),
+    component: () =>
+      import(/* webpackChunkName: "home" */ "../views/HomeView.vue"),
   },
   {
     path: "/identity-switcher",
     name: "identity-switcher",
-    component: () => import("../views/IdentitySwitcherView.vue"),
+    component: () =>
+      import(
+        /* webpackChunkName: "identity-switcher" */ "../views/IdentitySwitcherView.vue"
+      ),
   },
   {
     path: "/import-account",
     name: "import-account",
-    component: () => import("../views/ImportAccountView.vue"),
+    component: () =>
+      import(
+        /* webpackChunkName: "import-account" */ "../views/ImportAccountView.vue"
+      ),
   },
   {
     path: "/import-derive",
     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"),
+    component: () =>
+      import(
+        /* webpackChunkName: "import-derive" */ "../views/ImportDerivedAccountView.vue"
+      ),
   },
   {
     path: "/new-edit-account",
     name: "new-edit-account",
-    component: () => import("../views/NewEditAccountView.vue"),
+    component: () =>
+      import(
+        /* webpackChunkName: "new-edit-account" */ "../views/NewEditAccountView.vue"
+      ),
   },
   {
     path: "/new-edit-project",
     name: "new-edit-project",
-    component: () => import("../views/NewEditProjectView.vue"),
+    component: () =>
+      import(
+        /* webpackChunkName: "new-edit-project" */ "../views/NewEditProjectView.vue"
+      ),
   },
   {
     path: "/new-identifier",
     name: "new-identifier",
-    component: () => import("../views/NewIdentifierView.vue"),
-  },
-  {
-    path: "/offer-details/:id?",
-    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"),
+    component: () =>
+      import(
+        /* webpackChunkName: "new-identifier" */ "../views/NewIdentifierView.vue"
+      ),
   },
   {
     path: "/project/:id?",
     name: "project",
-    component: () => import("../views/ProjectViewView.vue"),
+    component: () =>
+      import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),
   },
   {
     path: "/projects",
     name: "projects",
-    component: () => import("../views/ProjectsView.vue"),
+    component: () =>
+      import(/* webpackChunkName: "projects" */ "../views/ProjectsView.vue"),
     beforeEnter: enterOrStart,
   },
   {
     path: "/quick-action-bvc",
     name: "quick-action-bvc",
-    component: () => import("../views/QuickActionBvcView.vue"),
+    component: () =>
+      import(
+        /* webpackChunkName: "quick-action-bvc" */ "../views/QuickActionBvcView.vue"
+      ),
   },
   {
     path: "/quick-action-bvc-begin",
     name: "quick-action-bvc-begin",
-    component: () => import("../views/QuickActionBvcBeginView.vue"),
+    component: () =>
+      import(
+        /* webpackChunkName: "quick-action-bvc-begin" */ "../views/QuickActionBvcBeginView.vue"
+      ),
   },
   {
     path: "/quick-action-bvc-end",
     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"),
+    component: () =>
+      import(
+        /* webpackChunkName: "quick-action-bvc-end" */ "../views/QuickActionBvcEndView.vue"
+      ),
   },
   {
     path: "/scan-contact",
     name: "scan-contact",
-    component: () => import("../views/ContactScanView.vue"),
+    component: () =>
+      import(
+        /* webpackChunkName: "scan-contact" */ "../views/ContactScanView.vue"
+      ),
   },
   {
     path: "/search-area",
     name: "search-area",
-    component: () => import("../views/SearchAreaView.vue"),
+    component: () =>
+      import(
+        /* webpackChunkName: "search-area" */ "../views/SearchAreaView.vue"
+      ),
   },
   {
     path: "/seed-backup",
     name: "seed-backup",
-    component: () => import("../views/SeedBackupView.vue"),
+    component: () =>
+      import(
+        /* webpackChunkName: "seed-backup" */ "../views/SeedBackupView.vue"
+      ),
   },
-  {
-    path: "/share-my-contact-info",
-    name: "share-my-contact-info",
-    component: () => import("@/views/ShareMyContactInfoView.vue"),
-  },
-  {
-    path: "/shared-photo",
-    name: "shared-photo",
-    component: () => import("@/views/SharedPhotoView.vue"),
-  },
-
-  // /share-target is also an endpoint in the service worker
-
   {
     path: "/start",
     name: "start",
-    component: () => import("../views/StartView.vue"),
+    component: () =>
+      import(/* webpackChunkName: "start" */ "../views/StartView.vue"),
   },
   {
     path: "/statistics",
     name: "statistics",
-    component: () => import("../views/StatisticsView.vue"),
+    component: () =>
+      import(
+        /* webpackChunkName: "statistics" */ "../views/StatisticsView.vue"
+      ),
   },
   {
     path: "/test",
     name: "test",
-    component: () => import("../views/TestView.vue"),
-  },
-  {
-    path: "/userProfile/:id?",
-    name: "userProfile",
-    component: () => import("../views/UserProfileView.vue"),
+    component: () =>
+      import(/* webpackChunkName: "test" */ "../views/TestView.vue"),
   },
 ];
 
 /** @type {*} */
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHistory(process.env.BASE_URL),
   routes,
 });
 
@@ -294,7 +265,6 @@ 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

@@ -0,0 +1,20 @@
+// @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,13 +1,11 @@
 import axios from "axios";
 import * as didJwt from "did-jwt";
 import { AppString } from "@/constants/app";
-import { retrieveSettingsForActiveAccount } from "../db";
-import { SERVICE_ID } from "@/libs/endorserServer";
-import { deriveAddress, newIdentifier } from "@/libs/crypto";
+import { db } from "../db";
+import { SERVICE_ID } from "../libs/endorserServer";
+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.
- */
 export async function testServerRegisterUser() {
   const testUser0Mnem =
     "seminar accuse mystery assist delay law thing deal image undo guard initial shallow wrestle list fragile borrow velvet tomorrow awake explain test offer control";
@@ -16,7 +14,8 @@ export async function testServerRegisterUser() {
 
   const identity0 = newIdentifier(addr, publicHex, privateHex, deriPath);
 
-  const settings = await retrieveSettingsForActiveAccount();
+  await db.open();
+  const settings = await db.settings.get(MASTER_SETTINGS_KEY);
 
   // Make a claim
   const vcClaim = {
@@ -24,7 +23,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 = {
@@ -51,7 +50,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/util.d.ts

@@ -1,5 +1,4 @@
 // from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/node/util.d.ts
-/* eslint-disable */
 /**
  * The `node:util` module supports the needs of Node.js internal APIs. Many of the
  * utilities are useful for application and module developers as well. To access

src/views/ClaimAddRawView.vue

@@ -1,143 +0,0 @@
-<template>
-  <QuickNav />
-  <!-- CONTENT -->
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Back -->
-        <button
-          @click="$router.go(-1)"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        >
-          <fa icon="chevron-left" class="fa-fw" />
-        </button>
-        Raw Claim
-      </h1>
-    </div>
-
-    <div class="flex">
-      <textarea rows="20" class="border-2 w-full" v-model="claimStr"></textarea>
-    </div>
-    <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"
-      @click="submitClaim()"
-    >
-      Sign &amp; Send
-    </button>
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
-import { Router } from "vue-router";
-
-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 },
-})
-export default class ClaimAddRawView extends Vue {
-  $notify!: (notification: NotificationIface, timeout?: number) => void;
-
-  accountIdentityStr: string = "null";
-  activeDid = "";
-  apiServer = "";
-  claimStr = "";
-
-  async mounted() {
-    const settings = await retrieveSettingsForActiveAccount();
-    this.activeDid = settings.activeDid || "";
-    this.apiServer = settings.apiServer || "";
-
-    this.claimStr = (this.$route as Router).query["claim"];
-    if (this.claimStr) {
-      try {
-        const veriClaim = JSON.parse(this.claimStr);
-        this.claimStr = JSON.stringify(veriClaim, null, 2);
-      } 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,
-          );
-        }
-      }
-    }
-  }
-
-  async submitClaim() {
-    const fullClaim = JSON.parse(this.claimStr);
-    const result = await serverUtil.createAndSubmitClaim(
-      fullClaim,
-      this.activeDid,
-      this.apiServer,
-      this.axios,
-    );
-    if (result.type === "success") {
-      this.$notify(
-        {
-          group: "alert",
-          type: "success",
-          title: "Success",
-          text: "Claim submitted.",
-        },
-        5000,
-      );
-    } else {
-      console.error("Got error submitting the claim:", result);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "There was a problem submitting the claim.",
-        },
-        5000,
-      );
-    }
-  }
-}
-</script>

src/views/ClaimCertificateView.vue

@@ -1,270 +0,0 @@
-<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

@@ -1,190 +0,0 @@
-<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/ConfirmContactView.vue

@@ -30,19 +30,17 @@
     </div>
 
     <div class="mt-8">
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-        <input
-          type="submit"
-          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"
-          value="Add Contact"
-        />
-        <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-1.5 py-2 rounded-md"
-        >
-          Cancel
-        </button>
-      </div>
+      <input
+        type="submit"
+        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"
+        value="Add Contact"
+      />
+      <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-1.5 py-2 rounded-md"
+      >
+        Cancel
+      </button>
     </div>
   </section>
 </template>

src/views/ConfirmGiftView.vue

@@ -1,867 +0,0 @@
-<template>
-  <QuickNav />
-  <TopMessage />
-  <!-- CONTENT -->
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Back -->
-        <button
-          @click="$router.go(-1)"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        >
-          <fa icon="chevron-left" class="fa-fw" />
-        </button>
-        <span
-          v-if="
-            libsUtil.isGiveRecordTheUserCanConfirm(
-              isRegistered,
-              veriClaim,
-              activeDid,
-              confirmerIdList,
-            )
-          "
-        >
-          Do you agree?
-        </span>
-        <span v-else> Confirmation Details </span>
-      </h1>
-    </div>
-
-    <div v-if="giveDetails && !isLoading">
-      <div class="flex justify-center">
-        <button
-          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 px-4 py-2 rounded-md"
-          v-if="
-            libsUtil.isGiveRecordTheUserCanConfirm(
-              isRegistered,
-              veriClaim,
-              activeDid,
-              confirmerIdList,
-            )
-          "
-          @click="confirmConfirmClaim()"
-        >
-          Confirm
-          <fa icon="circle-check" class="ml-2 text-white cursor-pointer" />
-        </button>
-        <button
-          v-else
-          @click="notifyWhyCannotConfirm()"
-          class="col-span-1 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"
-        >
-          Confirm
-          <fa icon="circle-check" class="ml-2 text-white cursor-pointer" />
-        </button>
-      </div>
-
-      <!-- Details -->
-      <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mt-4">
-        <div class="flex gap-4 overflow-hidden">
-          <div class="overflow-hidden">
-            <div class="text-sm">
-              <div>
-                <fa icon="arrow-left" class="fa-fw text-slate-400" />
-                {{ giverName }}
-              </div>
-              <div class="ml-6">gave</div>
-              <div v-if="giveDetails.amount">
-                <fa icon="hand-holding-dollar" class="fa-fw text-slate-400" />
-                {{ displayAmount(giveDetails.unit, giveDetails.amount) }}
-              </div>
-              <div v-if="giveDetails.description">
-                <fa icon="message" class="fa-fw text-slate-400" />
-                {{ giveDetails.amount ? "and:" : "" }}
-                {{ giveDetails.description }}
-              </div>
-              <div class="ml-6">to</div>
-              <div>
-                <fa icon="arrow-right" class="fa-fw text-slate-400" />
-                {{ recipientName }}
-              </div>
-              <div>
-                <fa icon="calendar" class="fa-fw text-slate-400" />
-                on
-                {{ giveDetails.issuedAt.substring(0, 10) }}
-              </div>
-
-              <!-- Fullfills Links -->
-
-              <!-- fullfills links for a give -->
-              <div class="mt-2" v-if="giveDetails?.fulfillsPlanHandleId">
-                <router-link
-                  :to="
-                    '/project/' +
-                    encodeURIComponent(giveDetails?.fulfillsPlanHandleId || '')
-                  "
-                  class="text-blue-500 mt-2 cursor-pointer"
-                  target="_blank"
-                >
-                  This fulfills a bigger plan
-                  <fa icon="arrow-up-right-from-square" class="fa-fw" />
-                </router-link>
-              </div>
-              <!-- if there's another, it's probably fulfilling an offer, too -->
-              <div
-                v-if="
-                  giveDetails?.fulfillsType &&
-                  giveDetails?.fulfillsType !== 'PlanAction' &&
-                  giveDetails?.fulfillsHandleId
-                "
-              >
-                <!-- router-link to /claim/ only changes URL path -->
-                <router-link
-                  :to="
-                    '/claim/' +
-                    encodeURIComponent(giveDetails?.fulfillsHandleId || '')
-                  "
-                  class="text-blue-500 mt-2 cursor-pointer"
-                  target="_blank"
-                >
-                  This fulfills
-                  {{
-                    capitalizeAndInsertSpacesBeforeCapsWithAPrefix(
-                      giveDetails?.fulfillsType || "",
-                    )
-                  }}
-                  <fa icon="arrow-up-right-from-square" class="fa-fw" />
-                </router-link>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="mt-2">
-        <fa icon="comment" class="text-slate-400" />
-        {{ issuerName }} posted that.
-      </div>
-
-      <div v-if="libsUtil.isGiveAction(veriClaim)" class="mt-4">
-        <h2 class="font-bold uppercase text-xl mt-8 mb-2">Confirmations</h2>
-
-        <span v-if="totalConfirmers() === 0">Nobody has confirmed this.</span>
-        <span v-else-if="totalConfirmers() === 1">
-          One person confirmed this.
-        </span>
-        <span v-else> {{ totalConfirmers() }} people confirmed this. </span>
-
-        <div v-if="totalConfirmers() > 0">
-          <div
-            v-if="
-              confirmerIdList.length === 0 && confsVisibleToIdList.length === 0
-            "
-          >
-            Nobody that you know confirmed this claim, nor do they have any
-            confirmers in their network.
-          </div>
-
-          <div
-            v-if="
-              confirmerIdList.length === 0 && confsVisibleToIdList.length > 0
-            "
-          >
-            <!-- Only show if this person has links to confirmers (below). -->
-            Nobody that you know issued or confirmed this claim.
-          </div>
-          <div v-if="confirmerIdList.length > 0">
-            The following people confirmed this claim.
-            <ul class="ml-4">
-              <li
-                v-for="confirmerId in confirmerIdList"
-                :key="confirmerId"
-                class="list-disc ml-4"
-              >
-                <div class="flex gap-4">
-                  <div class="grow overflow-hidden">
-                    <div class="text-sm">
-                      {{ didInfo(confirmerId) }}
-                      <span v-if="!serverUtil.isEmptyOrHiddenDid(confirmerId)">
-                        <button
-                          @click="
-                            copyToClipboard(
-                              'The DID of ' + confirmerId,
-                              confirmerId,
-                            )
-                          "
-                        >
-                          <fa icon="copy" class="text-slate-400 fa-fw" />
-                        </button>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </div>
-
-          <!--
-           Never need to show this message:
-           "Nobody that you know can see someone who confirmed this claim."
-
-           If there is nobody in the confirmerIdList then we'll show the combined "nobody" message.
-           If there is somebody in the confirmerIdList then that's all they need to show.
-           -->
-
-          <!-- Now show anyone linked to confirmers. -->
-          <div v-if="confsVisibleToIdList.length > 0">
-            The following people can connect you with people who issued or
-            confirmed this claim.
-            <ul class="ml-4">
-              <li
-                v-for="confsVisibleTo in confsVisibleToIdList"
-                :key="confsVisibleTo"
-                class="list-disc ml-4"
-              >
-                <div class="flex gap-4">
-                  <div class="grow overflow-hidden">
-                    <div class="text-sm">
-                      {{ didInfo(confsVisibleTo) }}
-                      <span
-                        v-if="!serverUtil.isEmptyOrHiddenDid(confsVisibleTo)"
-                      >
-                        <button
-                          @click="
-                            copyToClipboard(
-                              'The DID of ' + confsVisibleTo,
-                              confsVisibleTo,
-                            )
-                          "
-                        >
-                          <fa icon="copy" class="text-slate-400 fa-fw" />
-                        </button>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        <!-- explain if user cannot confirm -->
-        <!-- Note that these conditions are mirrored in userCanConfirm(). -->
-        <div v-if="!isRegistered">
-          You cannot confirm this because you are not registered. Find someone
-          to register you, maybe on the Help page.
-        </div>
-        <div v-else-if="giveDetails.issuerDid == activeDid">
-          You cannot confirm this because you issued this claim, so you already
-          count as confirming it.
-        </div>
-        <div v-else-if="serverUtil.containsHiddenDid(veriClaim.claim)">
-          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 cursor-pointer"
-        @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) &&
-            R.isEmpty(veriClaimDidsVisible)
-          "
-          class="mb-2"
-        >
-          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">
-            You can ask one of your contacts to take a look and see if their
-            contacts can see more details:
-            <a @click="onClickShareClaim()" class="text-blue-500"
-              >click to send them this page info</a
-            >
-            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>
-            You can ask one of your contacts to take a look and see if their
-            contacts can see more details:
-            <a
-              @click="copyToClipboard('A link to this page', windowLocation)"
-              class="text-blue-500"
-              >click to copy this page info</a
-            >
-            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>
-
-        <div v-if="!R.isEmpty(veriClaimDidsVisible)">
-          Some of the details are not visible to you but they are visible to
-          some of your contacts.
-          <span v-if="canShare">
-            If you'd like an introduction,
-            <a @click="onClickShareClaim()" class="text-blue-500"
-              >click to share the information with them and ask if they'll tell
-              you more about the participants.</a
-            >
-          </span>
-          <span v-else>
-            If you'd like an introduction,
-            <a
-              @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
-            >
-          </span>
-
-          <div
-            v-for="(visibleDidPath, index) of Object.keys(veriClaimDidsVisible)"
-            :key="index"
-            class="list-disc p-4"
-          >
-            <div class="text-sm">
-              <fa icon="minus" class="fa-fw" />
-              The {{ visibleDidPath }} is visible to:
-            </div>
-            <div class="ml-12 p-1">
-              <ul>
-                <li
-                  v-for="(visDid, idx2) of veriClaimDidsVisible[visibleDidPath]"
-                  :key="idx2"
-                  class="list-disc"
-                >
-                  <div class="text-sm mt-2">
-                    <span>
-                      {{ didInfo(visDid) }}
-                      <span v-if="!serverUtil.isEmptyOrHiddenDid(visDid)">
-                        <button
-                          @click="
-                            copyToClipboard('The DID of ' + visDid, visDid)
-                          "
-                        >
-                          <fa icon="copy" class="text-slate-400 fa-fw" />
-                        </button>
-                      </span>
-                      <span v-if="veriClaim.publicUrls?.[visDid]"
-                        >, found at
-                        <fa icon="globe" class="fa-fw text-slate-400" />
-                        <a
-                          :href="veriClaim.publicUrls?.[visDid]"
-                          class="text-blue-500"
-                          >{{
-                            veriClaim.publicUrls[visDid].substring(
-                              veriClaim.publicUrls[visDid].indexOf("//") + 2,
-                            )
-                          }}
-                        </a>
-                      </span>
-                    </span>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-        <!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
-        <pre
-          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="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
-      v-if="isLoading"
-    >
-      <fa icon="spinner" class="fa-spin-pulse"></fa>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { AxiosError } from "axios";
-import * as yaml from "js-yaml";
-import * as R from "ramda";
-import { Component, Vue } from "vue-facing-decorator";
-import { useClipboard } from "@vueuse/core";
-import { Router } from "vue-router";
-
-import QuickNav from "@/components/QuickNav.vue";
-import { NotificationIface } from "@/constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
-import { Contact } from "@/db/tables/contacts";
-import * as serverUtil from "@/libs/endorserServer";
-import { displayAmount, GiveSummaryRecord } from "@/libs/endorserServer";
-import * as libsUtil from "@/libs/util";
-import { isGiveAction, retrieveAccountDids } from "@/libs/util";
-import TopMessage from "@/components/TopMessage.vue";
-
-@Component({
-  methods: { displayAmount },
-  components: { TopMessage, QuickNav },
-})
-export default class ClaimView extends Vue {
-  $notify!: (notification: NotificationIface, timeout?: number) => void;
-
-  activeDid = "";
-  allMyDids: Array<string> = [];
-  allContacts: Array<Contact> = [];
-  apiServer = "";
-
-  canShare = false;
-  confirmerIdList: string[] = []; // list of DIDs that have confirmed this claim excluding the issuer
-  confsVisibleErrorMessage = "";
-  confsVisibleToIdList: string[] = []; // list of DIDs that can see any confirmer
-  giveDetails?: GiveSummaryRecord;
-  giverName = "";
-  issuerName = "";
-  isLoading = false;
-  isRegistered = false;
-  numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
-  recipientName = "";
-  showVeriClaimDump = false;
-  urlForNewGive = "";
-  veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
-  veriClaimDump = "";
-  veriClaimDidsVisible = {};
-  windowLocation = window.location.href;
-
-  R = R;
-  yaml = yaml;
-  libsUtil = libsUtil;
-  serverUtil = serverUtil;
-
-  resetThisValues() {
-    this.confirmerIdList = [];
-    this.confsVisibleErrorMessage = "";
-    this.confsVisibleToIdList = [];
-    this.giveDetails = undefined;
-    this.isRegistered = false;
-    this.numConfsNotVisible = 0;
-    this.urlForNewGive = "";
-    this.veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
-    this.veriClaimDump = "";
-  }
-
-  async mounted() {
-    this.isLoading = true;
-    const settings = await retrieveSettingsForActiveAccount();
-    this.activeDid = settings.activeDid || "";
-    this.apiServer = settings.apiServer || "";
-    this.allContacts = await db.contacts.toArray();
-    this.isRegistered = settings.isRegistered || false;
-
-    this.allMyDids = await retrieveAccountDids();
-
-    const pathParam = window.location.pathname.substring(
-      "/confirm-gift/".length,
-    );
-    let claimId;
-    if (pathParam) {
-      claimId = decodeURIComponent(pathParam);
-      await this.loadClaim(claimId, this.activeDid);
-    } else {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "No claim ID was provided.",
-        },
-        3000,
-      );
-    }
-
-    // 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;
-
-    this.isLoading = false;
-  }
-
-  // insert a space before any capital letters except the initial letter
-  // (and capitalize initial letter, just in case)
-  capitalizeAndInsertSpacesBeforeCaps(text: string) {
-    return !text
-      ? ""
-      : text[0].toUpperCase() + text.substr(1).replace(/([A-Z])/g, " $1");
-  }
-
-  capitalizeAndInsertSpacesBeforeCapsWithAPrefix(text: string) {
-    const word = this.capitalizeAndInsertSpacesBeforeCaps(text);
-    if (word) {
-      // if the word starts with a vowel, use "an" instead of "a"
-      const firstLetter = word[0].toLowerCase();
-      const vowels = ["a", "e", "i", "o", "u"];
-      const particle = vowels.includes(firstLetter) ? "an" : "a";
-      return particle + " " + word;
-    } else {
-      return "";
-    }
-  }
-
-  totalConfirmers() {
-    return (
-      this.numConfsNotVisible +
-      this.confirmerIdList.length +
-      this.confsVisibleToIdList.length
-    );
-  }
-
-  // Isn't there a better way to make this available to the template?
-  didInfo(did: string | undefined) {
-    return serverUtil.didInfo(
-      did,
-      this.activeDid,
-      this.allMyDids,
-      this.allContacts,
-    );
-  }
-
-  async loadClaim(claimId: string, userDid: string) {
-    const urlPath = libsUtil.isGlobalUri(claimId)
-      ? "/api/claim/byHandle/"
-      : "/api/claim/";
-    const url = this.apiServer + urlPath + encodeURIComponent(claimId);
-
-    try {
-      const headers = await serverUtil.getHeaders(userDid);
-      const resp = await this.axios.get(url, { headers });
-      // resp.data is:
-      // - a Jwt from https://api.endorser.ch/api-docs/
-      // - with a Give from https://endorser.ch/doc/html/transactions.html#id3
-      if (resp.status === 200) {
-        this.veriClaim = resp.data;
-        this.veriClaimDump = yaml.dump(this.veriClaim);
-        this.veriClaimDidsVisible = libsUtil.findAllVisibleToDids(
-          this.veriClaim,
-          true,
-        );
-      } else {
-        // actually, axios typically throws an error so we never get here
-        console.error("Error getting claim:", resp);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "There was a problem retrieving that claim.",
-          },
-          3000,
-        );
-        return;
-      }
-
-      // retrieve more details on Give, Offer, or Plan
-      if (this.veriClaim.claimType !== "GiveAction") {
-        // no need to go further... this page is for gifts
-        return;
-      }
-
-      this.issuerName = this.didInfo(this.veriClaim.issuer);
-
-      // use give record when possible since it may include edits
-      const giveUrl =
-        this.apiServer +
-        "/api/v2/report/gives?handleId=" +
-        encodeURIComponent(this.veriClaim.handleId as string);
-      const giveHeaders = await serverUtil.getHeaders(userDid);
-      const giveResp = await this.axios.get(giveUrl, {
-        headers: giveHeaders,
-      });
-      // giveResp.data is a Give from https://api.endorser.ch/api-docs/
-      if (giveResp.status === 200) {
-        this.giveDetails = giveResp.data.data[0];
-      } else {
-        console.error("Error getting detailed give info:", giveResp);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Something went wrong retrieving gift data.",
-          },
-          3000,
-        );
-        return;
-      }
-
-      // the logic already stops earlier if the claim doesn't exist but this helps with typechecking
-      if (!this.giveDetails) {
-        return;
-      }
-
-      this.urlForNewGive = "/gifted-details?";
-      if (this.giveDetails.amount) {
-        this.urlForNewGive +=
-          "&amountInput=" + encodeURIComponent(String(this.giveDetails.amount));
-      }
-      if (this.giveDetails.unit) {
-        this.urlForNewGive +=
-          "&unitCode=" + encodeURIComponent(this.giveDetails.unit);
-      }
-      if (this.giveDetails.description) {
-        this.urlForNewGive +=
-          "&description=" + encodeURIComponent(this.giveDetails.description);
-      }
-      this.giverName = this.didInfo(this.giveDetails.agentDid);
-      if (this.giveDetails.agentDid) {
-        this.urlForNewGive +=
-          "&giverDid=" +
-          encodeURIComponent(this.giveDetails.agentDid) +
-          "&giverName=" +
-          encodeURIComponent(this.giverName);
-      }
-      this.recipientName = this.didInfo(this.giveDetails.recipientDid);
-      if (this.giveDetails.recipientDid) {
-        this.urlForNewGive +=
-          "&recipientDid=" +
-          encodeURIComponent(this.giveDetails.recipientDid) +
-          "&recipientName=" +
-          encodeURIComponent(this.recipientName);
-      }
-      if (this.giveDetails.fullClaim.image) {
-        this.urlForNewGive +=
-          "&image=" + encodeURIComponent(this.giveDetails.fullClaim.image);
-      }
-      if (
-        this.giveDetails.type == "Offer" &&
-        this.giveDetails.fulfillsHandleId
-      ) {
-        this.urlForNewGive +=
-          "&offerId=" +
-          encodeURIComponent(this.giveDetails?.fulfillsHandleId as string);
-      }
-      if (this.giveDetails.fulfillsPlanHandleId) {
-        this.urlForNewGive +=
-          "&fulfillsProjectId=" +
-          encodeURIComponent(this.giveDetails.fulfillsPlanHandleId);
-      }
-
-      // retrieve the list of confirmers
-      const confirmerInfo = await libsUtil.retrieveConfirmerIdList(
-        this.apiServer,
-        claimId,
-        this.veriClaim.issuer,
-        userDid,
-      );
-      if (confirmerInfo) {
-        this.confirmerIdList = confirmerInfo.confirmerIdList;
-        this.confsVisibleToIdList = confirmerInfo.confsVisibleToIdList;
-        this.numConfsNotVisible = confirmerInfo.numConfsNotVisible;
-      } else {
-        this.confsVisibleErrorMessage =
-          "Had problems retrieving confirmations.";
-      }
-    } catch (error: unknown) {
-      const serverError = error as AxiosError;
-      console.error("Error retrieving claim:", serverError);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Something went wrong retrieving claim data.",
-        },
-        3000,
-      );
-    }
-  }
-
-  confirmConfirmClaim() {
-    this.$notify(
-      {
-        group: "modal",
-        type: "confirm",
-        title: "Confirm",
-        text: "Do you personally confirm that this is true?",
-        onYes: async () => {
-          await this.confirmClaim();
-        },
-      },
-      -1,
-    );
-  }
-
-  // similar code is found in ProjectViewView
-  async confirmClaim() {
-    // similar logic is found in endorser-mobile
-    const goodClaim = serverUtil.removeSchemaContext(
-      serverUtil.removeVisibleToDids(
-        serverUtil.addLastClaimOrHandleAsIdIfMissing(
-          this.veriClaim.claim,
-          this.veriClaim.id,
-          this.veriClaim.handleId,
-        ),
-      ),
-    );
-    const confirmationClaim: serverUtil.GenericVerifiableCredential = {
-      "@context": "https://schema.org",
-      "@type": "AgreeAction",
-      object: goodClaim,
-    };
-    const result = await serverUtil.createAndSubmitClaim(
-      confirmationClaim,
-      this.activeDid,
-      this.apiServer,
-      this.axios,
-    );
-    if (result.type === "success") {
-      this.$notify(
-        {
-          group: "alert",
-          type: "success",
-          title: "Success",
-          text: "Confirmation submitted.",
-        },
-        3000,
-      );
-    } else {
-      console.error("Got error submitting the confirmation:", result);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "There was a problem submitting the confirmation.",
-        },
-        5000,
-      );
-    }
-  }
-
-  showClaimPage(claimId: string) {
-    const route = {
-      path: "/claim/" + encodeURIComponent(claimId),
-    };
-    (this.$router as Router).push(route).then(async () => {
-      this.resetThisValues();
-      await this.loadClaim(claimId, this.activeDid);
-    });
-  }
-
-  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,
-        );
-      });
-  }
-
-  notifyWhyCannotConfirm() {
-    libsUtil.notifyWhyCannotConfirm(
-      this.$notify,
-      this.isRegistered,
-      this.veriClaim.claimType,
-      this.giveDetails,
-      this.activeDid,
-      this.confirmerIdList,
-    );
-  }
-
-  notifyWhyCannotConfirmBak() {
-    if (!this.isRegistered) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "info",
-          title: "Not Registered",
-          text: "Someone needs to register you before you can contribute.",
-        },
-        3000,
-      );
-    } else if (!isGiveAction(this.veriClaim)) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "info",
-          title: "Not A Give",
-          text: "This is not a giving action to confirm.",
-        },
-        3000,
-      );
-    } else if (this.confirmerIdList.includes(this.activeDid)) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "info",
-          title: "Already Confirmed",
-          text: "You already confirmed this claim.",
-        },
-        3000,
-      );
-    } else if (this.giveDetails?.issuerDid == this.activeDid) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "info",
-          title: "Cannot Confirm",
-          text: "You cannot confirm this because you issued this claim.",
-        },
-        3000,
-      );
-    } else if (serverUtil.containsHiddenDid(this.giveDetails?.fullClaim)) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "info",
-          title: "Cannot Confirm",
-          text: "You cannot confirm this because some people are hidden.",
-        },
-        3000,
-      );
-    } else {
-      this.$notify(
-        {
-          group: "alert",
-          type: "info",
-          title: "Cannot Confirm",
-          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,
-      );
-    }
-  }
-
-  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,
-    });
-  }
-}
-</script>

src/views/ContactAmountsView.vue

@@ -55,9 +55,9 @@
             {{ new Date(record.issuedAt).toLocaleString() }}
           </td>
           <td class="p-1">
-            <span v-if="record.agentDid == contact?.did">
+            <span v-if="record.agentDid == contact.did">
               <div class="font-bold">
-                {{ displayAmount(record.unit, record.amount) }}
+                {{ record.amount }} {{ record.unit }}
                 <span v-if="record.amountConfirmed" title="Confirmed">
                   <fa icon="circle-check" class="text-green-600 fa-fw" />
                 </span>
@@ -71,7 +71,7 @@
             </span>
           </td>
           <td class="p-1">
-            <span v-if="record.agentDid == contact?.did">
+            <span v-if="record.agentDid == contact.did">
               <fa icon="arrow-left" class="text-slate-400 fa-fw" />
             </span>
             <span v-else>
@@ -79,9 +79,9 @@
             </span>
           </td>
           <td class="p-1">
-            <span v-if="record.agentDid != contact?.did">
+            <span v-if="record.agentDid != contact.did">
               <div class="font-bold">
-                {{ displayAmount(record.unit, record.amount) }}
+                {{ record.amount }} {{ record.unit }}
                 <span v-if="record.amountConfirmed" title="Confirmed">
                   <fa icon="circle-check" class="text-green-600 fa-fw" />
                 </span>
@@ -105,25 +105,24 @@
 </template>
 
 <script lang="ts">
-import { AxiosError, AxiosRequestHeaders } from "axios";
+import { AxiosError } from "axios";
+import * as didJwt from "did-jwt";
 import * as R from "ramda";
+import { IIdentifier } from "@veramo/core";
 import { Component, Vue } from "vue-facing-decorator";
-import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { accountsDB, db } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { accessToken, SimpleSigner } from "@/libs/crypto";
 import {
   AgreeVerifiableCredential,
-  createEndorserJwtVcFromClaim,
-  displayAmount,
-  getHeaders,
-  GiveSummaryRecord,
+  GiveServerRecord,
   GiveVerifiableCredential,
   SCHEMA_ORG_CONTEXT,
 } from "@/libs/endorserServer";
-import { retrieveAccountCount } from "@/libs/util";
 
 @Component({ components: { QuickNav } })
 export default class ContactAmountssView extends Vue {
@@ -132,21 +131,46 @@ export default class ContactAmountssView extends Vue {
   activeDid = "";
   apiServer = "";
   contact: Contact | null = null;
-  giveRecords: Array<GiveSummaryRecord> = [];
+  giveRecords: Array<GiveServerRecord> = [];
   numAccounts = 0;
 
-  displayAmount = displayAmount;
-
   async beforeCreate() {
-    this.numAccounts = await retrieveAccountCount();
+    await accountsDB.open();
+    this.numAccounts = await accountsDB.accounts.count();
+  }
+
+  public async getIdentity(activeDid: string) {
+    await accountsDB.open();
+    const account = await accountsDB.accounts
+      .where("did")
+      .equals(activeDid)
+      .first();
+    const identity = JSON.parse(account?.identity || "null");
+
+    if (!identity) {
+      throw new Error(
+        "Attempted to load Give records with no identifier available.",
+      );
+    }
+    return identity;
+  }
+
+  public async getHeaders(identity: IIdentifier) {
+    const token = await accessToken(identity);
+    const headers = {
+      "Content-Type": "application/json",
+      Authorization: "Bearer " + token,
+    };
+    return headers;
   }
 
   async created() {
     try {
-      const contactDid = (this.$route as Router).query["contactDid"] as string;
+      await db.open();
+      const contactDid = this.$route.query.contactDid as string;
       this.contact = (await db.contacts.get(contactDid)) || null;
 
-      const settings = await retrieveSettingsForActiveAccount();
+      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
       this.activeDid = settings?.activeDid || "";
       this.apiServer = settings?.apiServer || "";
 
@@ -165,21 +189,22 @@ export default class ContactAmountssView extends Vue {
             err.userMessage ||
             "There was an error retrieving your settings or contacts or gives.",
         },
-        5000,
+        -1,
       );
     }
   }
 
   async loadGives(activeDid: string, contact: Contact) {
     try {
-      let result: Array<GiveSummaryRecord> = [];
+      const identity = await this.getIdentity(this.activeDid);
+      let result: Array<GiveServerRecord> = [];
       const url =
         this.apiServer +
         "/api/v2/report/gives?agentDid=" +
-        encodeURIComponent(this.activeDid) +
+        encodeURIComponent(identity.did) +
         "&recipientDid=" +
         encodeURIComponent(contact.did);
-      const headers = await getHeaders(activeDid);
+      const headers = await this.getHeaders(identity);
       const resp = await this.axios.get(url, { headers });
       if (resp.status === 200) {
         result = resp.data.data;
@@ -196,7 +221,7 @@ export default class ContactAmountssView extends Vue {
             title: "Error With Server",
             text: "Got an error retrieving your given time from the server.",
           },
-          5000,
+          -1,
         );
       }
 
@@ -205,8 +230,8 @@ export default class ContactAmountssView extends Vue {
         "/api/v2/report/gives?agentDid=" +
         encodeURIComponent(contact.did) +
         "&recipientDid=" +
-        encodeURIComponent(this.activeDid);
-      const headers2 = await getHeaders(activeDid);
+        encodeURIComponent(identity.did);
+      const headers2 = await this.getHeaders(identity);
       const resp2 = await this.axios.get(url2, { headers: headers2 });
       if (resp2.status === 200) {
         result = R.concat(result, resp2.data.data);
@@ -223,11 +248,11 @@ export default class ContactAmountssView extends Vue {
             title: "Error With Server",
             text: "Got an error retrieving your given time from the server.",
           },
-          5000,
+          -1,
         );
       }
 
-      const sortedResult: Array<GiveSummaryRecord> = R.sort(
+      const sortedResult: Array<GiveServerRecord> = R.sort(
         (a, b) =>
           new Date(b.issuedAt).getTime() - new Date(a.issuedAt).getTime(),
         result,
@@ -241,12 +266,12 @@ export default class ContactAmountssView extends Vue {
           title: "Error With Server",
           text: error as string,
         },
-        5000,
+        -1,
       );
     }
   }
 
-  async confirm(record: GiveSummaryRecord) {
+  async confirm(record: GiveServerRecord) {
     // Make claim
     // I use clone here because otherwise it gets a Proxy object.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -261,44 +286,66 @@ export default class ContactAmountssView extends Vue {
       object: origClaim,
     };
 
-    const vcJwt: string = await createEndorserJwtVcFromClaim(
-      this.activeDid,
-      vcClaim,
-    );
+    // Make a payload for the claim
+    const vcPayload = {
+      vc: {
+        "@context": ["https://www.w3.org/2018/credentials/v1"],
+        type: ["VerifiableCredential"],
+        credentialSubject: vcClaim,
+      },
+    };
 
-    // Make the xhr request payload
-    const payload = JSON.stringify({ jwtEncoded: vcJwt });
-    const url = this.apiServer + "/api/v2/claim";
-    const headers = (await getHeaders(this.activeDid)) as AxiosRequestHeaders;
+    // Create a signature using private key of identity
+    const identity = await this.getIdentity(this.activeDid);
+    if (identity.keys[0].privateKeyHex !== null) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const privateKeyHex: string = identity.keys[0].privateKeyHex!;
+      const signer = await SimpleSigner(privateKeyHex);
+      const alg = undefined;
+      // Create a JWT for the request
+      const vcJwt: string = await didJwt.createJWT(vcPayload, {
+        alg: alg,
+        issuer: identity.did,
+        signer: signer,
+      });
 
-    try {
-      const resp = await this.axios.post(url, payload, { headers });
-      if (resp.data?.success) {
-        record.amountConfirmed =
-          (origClaim.object?.amountOfThisGood as number) || 1;
-      }
-    } catch (error) {
-      let userMessage = "There was an error.";
-      const serverError = error as AxiosError;
-      if (serverError) {
-        if (serverError.message) {
-          userMessage = serverError.message; // Info for the user
-        } else {
-          userMessage = JSON.stringify(serverError.toJSON());
+      // Make the xhr request payload
+      const payload = JSON.stringify({ jwtEncoded: vcJwt });
+      const url = this.apiServer + "/api/v2/claim";
+      const token = await accessToken(identity);
+      const headers = {
+        "Content-Type": "application/json",
+        Authorization: "Bearer " + token,
+      };
+
+      try {
+        const resp = await this.axios.post(url, payload, { headers });
+        if (resp.data?.success) {
+          record.amountConfirmed = origClaim.object?.amountOfThisGood || 1;
         }
-      } else {
-        userMessage = error as string;
+      } catch (error) {
+        let userMessage = "There was an error. See logs for more info.";
+        const serverError = error as AxiosError;
+        if (serverError) {
+          if (serverError.message) {
+            userMessage = serverError.message; // Info for the user
+          } else {
+            userMessage = JSON.stringify(serverError.toJSON());
+          }
+        } else {
+          userMessage = error as string;
+        }
+        // Now set that error for the user to see.
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error With Server",
+            text: userMessage,
+          },
+          -1,
+        );
       }
-      // Now set that error for the user to see.
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error With Server",
-          text: userMessage,
-        },
-        5000,
-      );
     }
   }
 
@@ -310,7 +357,7 @@ export default class ContactAmountssView extends Vue {
         title: "Not Allowed",
         text: "Only the recipient can confirm final receipt.",
       },
-      5000,
+      -1,
     );
   }
 }

src/views/ContactEditView.vue

@@ -1,238 +0,0 @@
-<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,7 +11,8 @@
           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>
 
@@ -25,7 +26,7 @@
               width="32"
               class="inline-block align-middle border border-slate-300 rounded-md mr-1"
             />
-            Unnamed/Unknown
+            Anonymous/Unnamed
           </span>
           <span class="text-right">
             <button
@@ -46,7 +47,7 @@
         <h2 class="text-base flex gap-4 items-center">
           <span class="grow font-semibold">
             <EntityIcon
-              :contact="contact"
+              :entityId="contact.did"
               :iconSize="32"
               class="inline-block align-middle border border-slate-300 rounded-md mr-1"
             />
@@ -65,21 +66,28 @@
       </li>
     </ul>
 
-    <GiftedDialog ref="customDialog" :toProjectId="projectId" />
+    <GiftedDialog
+      ref="customDialog"
+      message="Received from"
+      :projectId="projectId"
+    />
   </section>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
-import { Router } from "vue-router";
+import { IIdentifier } from "@veramo/core";
 
 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 } from "@/db/index";
+import { db, accountsDB } from "@/db/index";
+import { Account, AccountsSchema } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
-import { GiverReceiverInputInfo } from "@/libs/util";
+import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
+import { accessToken } from "@/libs/crypto";
+import { GiverInputInfo } from "@/libs/endorserServer";
 
 @Component({
   components: { GiftedDialog, QuickNav, EntityIcon },
@@ -90,26 +98,24 @@ export default class ContactGiftingView extends Vue {
   activeDid = "";
   allContacts: Array<Contact> = [];
   apiServer = "";
-  description = "";
-  projectId = "";
-  prompt = "";
+  accounts: typeof AccountsSchema;
+  numAccounts = 0;
+  projectId = localStorage.getItem("projectId") || "";
+
+  async beforeCreate() {
+    accountsDB.open();
+    this.numAccounts = await accountsDB.accounts.count();
+  }
 
   async created() {
     try {
-      const settings = await retrieveSettingsForActiveAccount();
-      this.apiServer = settings.apiServer || "";
-      this.activeDid = settings.activeDid || "";
+      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.orderBy("name").toArray();
 
-      // .orderBy("name") wouldn't retrieve any entries with a blank name
-      // .toCollection.sortBy("name") didn't sort in an order I understood
-      const baseContacts = await db.contacts.toArray();
-      this.allContacts = baseContacts.sort((a, b) =>
-        (a.name || "").localeCompare(b.name || ""),
-      );
-
-      this.projectId = (this.$route as Router).query["projectId"] || "";
-
-      this.prompt = (this.$route as Router).query["prompt"] ?? this.prompt;
+      localStorage.removeItem("projectId");
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
@@ -123,22 +129,38 @@ export default class ContactGiftingView extends Vue {
             err.message ||
             "There was an error retrieving your settings or contacts.",
         },
-        5000,
+        -1,
       );
     }
   }
 
-  openDialog(giver?: GiverReceiverInputInfo) {
-    const recipient = this.projectId
-      ? undefined
-      : { did: this.activeDid, name: "you" };
-    (this.$refs.customDialog as GiftedDialog).open(
-      giver,
-      recipient,
-      undefined,
-      "Given by " + (giver?.name || "someone not named"),
-      this.prompt,
-    );
+  public async getIdentity(activeDid: string) {
+    await accountsDB.open();
+    const account = (await accountsDB.accounts
+      .where("did")
+      .equals(activeDid)
+      .first()) as Account;
+    const identity = JSON.parse(account?.identity || "null");
+
+    if (!identity) {
+      throw new Error(
+        "Attempted to load Give records with no identifier available.",
+      );
+    }
+    return identity;
+  }
+
+  public async getHeaders(identity: IIdentifier) {
+    const token = await accessToken(identity);
+    const headers = {
+      "Content-Type": "application/json",
+      Authorization: "Bearer " + token,
+    };
+    return headers;
+  }
+
+  openDialog(giver: GiverInputInfo) {
+    (this.$refs.customDialog as GiftedDialog).open(giver);
   }
 }
 </script>

src/views/ContactImportView.vue

@@ -1,392 +0,0 @@
-<template>
-  <QuickNav selected="Contacts"></QuickNav>
-  <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 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Contact Import
-    </h1>
-
-    <div v-if="checkingImports" class="text-center">
-      <fa icon="spinner" class="animate-spin" />
-    </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>
-
-      <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>
-
-      <!-- Results List -->
-      <ul
-        v-if="contactsImporting.length > sameCount"
-        class="border-t border-slate-300"
-      >
-        <li v-for="(contact, index) in contactsImporting" :key="contact.did">
-          <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">
-              <input type="checkbox" v-model="contactsSelected[index]" />
-              {{ contact.name || AppString.NO_CONTACT_NAME }}
-              -
-              <span v-if="contactsExisting[contact.did]" class="text-orange-500"
-                >Existing</span
-              >
-              <span v-else class="text-green-500">New</span>
-            </h2>
-            <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>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import * as R from "ramda";
-import { Component, Vue } from "vue-facing-decorator";
-import { RouteLocationNormalizedLoaded, Router } from "vue-router";
-
-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 },
-})
-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 | 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
-  checkingImports = false;
-  inputJwt: string = "";
-  makeVisible = true;
-  sameCount = 0;
-
-  async created() {
-    const settings = await retrieveSettingsForActiveAccount();
-    this.activeDid = settings.activeDid || "";
-    this.apiServer = settings.apiServer || "";
-
-    // look for any imported contact array from the query parameter
-    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();
-    // set the existing contacts, keyed by DID, if they exist in contactsImporting
-    for (let i = 0; i < this.contactsImporting.length; i++) {
-      const contactIn = this.contactsImporting[i];
-      const existingContact = baseContacts.find(
-        (contact) => contact.did === contactIn.did,
-      );
-      if (existingContact) {
-        this.contactsExisting[contactIn.did] = existingContact;
-
-        const differences: Record<
-          string,
-          {
-            new: string | boolean | Array<ContactMethod> | undefined;
-            old: string | boolean | Array<ContactMethod> | undefined;
-          }
-        > = {};
-        Object.keys(contactIn).forEach((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 as keyof Contact],
-              new: contactIn[key as keyof Contact],
-            };
-          }
-        });
-        this.contactDifferences[contactIn.did] = differences;
-        if (R.isEmpty(differences)) {
-          this.sameCount++;
-        }
-
-        // don't automatically import previous data
-        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.checkingImports = true;
-    let importedCount = 0,
-      updatedCount = 0;
-    for (let i = 0; i < this.contactsImporting.length; i++) {
-      if (this.contactsSelected[i]) {
-        const contact = this.contactsImporting[i];
-        const existingContact = this.contactsExisting[contact.did];
-        if (existingContact) {
-          await db.contacts.update(contact.did, contact);
-          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++;
-        }
-      }
-    }
-    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: "Imported",
-        text:
-          `${importedCount} contact${importedCount == 1 ? "" : "s"} imported.` +
-          (updatedCount ? ` ${updatedCount} updated.` : ""),
-      },
-      3000,
-    );
-    (this.$router as Router).push({ name: "contacts" });
-  }
-}
-</script>

src/views/ContactQRScanShowView.vue

@@ -1,5 +1,5 @@
 <template>
-  <QuickNav selected="Profile" />
+  <QuickNav selected="Profile"></QuickNav>
   <!-- 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 icon="chevron-left" class="fa-fw"></fa>
         </h1>
       </div>
 
@@ -24,24 +24,16 @@
       >
         <span class="text-red">Beware!</span>
         You aren't sharing your name, so quickly
-        <br />
-        <span
-          @click="
-            () => $refs.userNameDialog.open((name) => (this.givenName = name))
-          "
+        <router-link
+          :to="{ name: 'new-edit-account' }"
           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.
-        </span>
+        </router-link>
       </p>
     </div>
-    <UserNameDialog ref="userNameDialog" />
 
-    <div
-      @click="onCopyUrlToClipboard()"
-      v-if="activeDid && activeDid.startsWith(ETHR_DID_PREFIX)"
-      class="text-center"
-    >
+    <div @click="onCopyToClipboard()" v-if="activeDid" class="text-center">
       <!--
         Play with display options: https://qr-code-styling.com/
         See docs: https://www.npmjs.com/package/qr-code-generator-vue3
@@ -52,18 +44,7 @@
         :dotsOptions="{ type: 'square' }"
         class="flex justify-center"
       />
-      <span>
-        Click the QR code to copy your contact info to your clipboard.
-      </span>
-    </div>
-    <div v-else-if="activeDid" class="text-center">
-      <!-- Not an ETHR DID so force them to paste it. (Passkey Peer DIDs are too big.) -->
-      <span @click="onCopyDidToClipboard()" class="text-blue-500">
-        Click here to copy your DID to your clipboard.
-      </span>
-      <span>
-        Then give it to them so they can paste it in their list of People.
-      </span>
+      <span> Click QR to copy your contact URL to your clipboard. </span>
     </div>
     <div class="text-center" v-else>
       You have no identitifiers yet, so
@@ -89,34 +70,33 @@
 </template>
 
 <script lang="ts">
-import { AxiosError } from "axios";
+import * as didJwt from "did-jwt";
+import { sha256 } from "ethereum-cryptography/sha256.js";
 import QRCodeVue3 from "qr-code-generator-vue3";
+import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
 import { QrcodeStream } from "vue-qrcode-reader";
 import { useClipboard } from "@vueuse/core";
 
-import QuickNav from "@/components/QuickNav.vue";
-import UserNameDialog from "@/components/UserNameDialog.vue";
 import { NotificationIface } from "@/constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
-import { Contact } from "@/db/tables/contacts";
+import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { getContactJwtFromJwtUrl } from "@/libs/crypto";
+import { deriveAddress, nextDerivationPath, SimpleSigner } from "@/libs/crypto";
+import QuickNav from "@/components/QuickNav.vue";
+import { Account } from "@/db/tables/accounts";
 import {
-  generateEndorserJwtUrlForAccount,
-  isDid,
-  register,
-  setVisibilityUtil,
+  CONTACT_URL_PREFIX,
+  ENDORSER_JWT_URL_LOCATION,
 } from "@/libs/endorserServer";
-import { decodeEndorserJwt, ETHR_DID_PREFIX } from "@/libs/crypto/vc";
-import { retrieveAccountMetadata } from "@/libs/util";
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const Buffer = require("buffer/").Buffer;
 
 @Component({
   components: {
     QrcodeStream,
     QRCodeVue3,
     QuickNav,
-    UserNameDialog,
   },
 })
 export default class ContactQRScanShow extends Vue {
@@ -125,47 +105,71 @@ export default class ContactQRScanShow extends Vue {
   activeDid = "";
   apiServer = "";
   givenName = "";
-  hideRegisterPromptOnNewContact = false;
-  isRegistered = false;
   qrValue = "";
 
-  ETHR_DID_PREFIX = ETHR_DID_PREFIX;
+  public async getIdentity(activeDid: string) {
+    await accountsDB.open();
+    const accounts = await accountsDB.accounts.toArray();
+    const account: Account | undefined = R.find(
+      (acc) => acc.did === activeDid,
+      accounts,
+    );
+    const identity = JSON.parse(account?.identity || "null");
 
-  async created() {
-    const settings = await retrieveSettingsForActiveAccount();
-    this.activeDid = settings.activeDid || "";
-    this.apiServer = settings.apiServer || "";
-    this.givenName = settings.firstName || "";
-    this.hideRegisterPromptOnNewContact =
-      !!settings.hideRegisterPromptOnNewContact;
-    this.isRegistered = !!settings.isRegistered;
-
-    const account = await retrieveAccountMetadata(this.activeDid);
-    if (account) {
-      const name =
-        (settings.firstName || "") +
-        (settings.lastName ? ` ${settings.lastName}` : ""); // lastName is deprecated, pre v 0.1.3
-
-      this.qrValue = await generateEndorserJwtUrlForAccount(
-        account,
-        !!settings.isRegistered,
-        name,
-        settings.profileImageUrl,
-        false,
+    if (!identity) {
+      throw new Error(
+        "Attempted to show contact info with no identifier available.",
       );
     }
+    return identity;
   }
 
-  danger(message: string, title: string = "Error", timeout = 5000) {
-    this.$notify(
-      {
-        group: "alert",
-        type: "danger",
-        title: title,
-        text: message,
-      },
-      timeout,
-    );
+  async created() {
+    await db.open();
+    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    this.activeDid = settings?.activeDid || "";
+    this.apiServer = settings?.apiServer || "";
+    this.givenName = settings?.firstName || "";
+
+    await accountsDB.open();
+    const accounts = await accountsDB.accounts.toArray();
+    const account = R.find((acc) => acc.did === this.activeDid, accounts);
+    if (account) {
+      const identity = await this.getIdentity(this.activeDid);
+      const publicKeyHex = identity.keys[0].publicKeyHex;
+      const publicEncKey = Buffer.from(publicKeyHex, "hex").toString("base64");
+
+      const newDerivPath = nextDerivationPath(account.derivationPath);
+      const nextPublicHex = deriveAddress(account.mnemonic, newDerivPath)[2];
+      const nextPublicEncKey = Buffer.from(nextPublicHex, "hex");
+      const nextPublicEncKeyHash = sha256(nextPublicEncKey);
+      const nextPublicEncKeyHashBase64 =
+        Buffer.from(nextPublicEncKeyHash).toString("base64");
+
+      const contactInfo = {
+        iat: Date.now(),
+        iss: this.activeDid,
+        own: {
+          name:
+            (settings?.firstName || "") +
+            (settings?.lastName ? ` ${settings.lastName}` : ""), // deprecated, pre v 0.1.3
+          publicEncKey,
+          nextPublicEncKeyHash: nextPublicEncKeyHashBase64,
+        },
+      };
+
+      const alg = undefined;
+      const privateKeyHex: string = identity.keys[0].privateKeyHex;
+      const signer = await SimpleSigner(privateKeyHex);
+      // create a JWT for the request
+      const vcJwt: string = await didJwt.createJWT(contactInfo, {
+        alg: alg,
+        issuer: identity.did,
+        signer: signer,
+      });
+      const viewPrefix = CONTACT_URL_PREFIX + ENDORSER_JWT_URL_LOCATION;
+      this.qrValue = viewPrefix + vcJwt;
+    }
   }
 
   /**
@@ -174,215 +178,19 @@ export default class ContactQRScanShow extends Vue {
    */
   // Unfortunately, there are not typescript definitions for the qrcode-stream component yet.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  async onScanDetect(content: any) {
-    const url = content[0]?.rawValue;
-    if (url) {
-      let newContact: Contact;
-      try {
-        const jwt = getContactJwtFromJwtUrl(url);
-        if (!jwt) {
-          this.$notify(
-            {
-              group: "alert",
-              type: "danger",
-              title: "No Contact Info",
-              text: "The contact info could not be parsed.",
-            },
-            3000,
-          );
-          return;
-        }
-        const { payload } = decodeEndorserJwt(jwt);
-        newContact = {
-          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,
-          publicKeyBase64: payload.own.publicEncKey,
-          registered: payload.own.registered,
-        };
-        if (!newContact.did) {
-          this.danger("There is no DID.", "Incomplete Contact");
-          return;
-        }
-        if (!isDid(newContact.did)) {
-          this.danger("The DID must begin with 'did:'", "Invalid DID");
-          return;
-        }
-      } catch (e) {
-        console.error("Error parsing QR info:", e);
-        this.danger("Could not parse the QR info.", "Read Error");
-        return;
-      }
-
-      try {
-        await db.open();
-        await db.contacts.add(newContact);
-
-        let addedMessage;
-        if (this.activeDid) {
-          await this.setVisibility(newContact, true);
-          newContact.seesMe = true; // didn't work inside setVisibility
-          addedMessage =
-            "They were added, and your activity is visible to them.";
-        } else {
-          addedMessage = "They were added.";
-        }
-        this.$notify(
-          {
-            group: "alert",
-            type: "success",
-            title: "Contact Added",
-            text: addedMessage,
-          },
-          3000,
-        );
-
-        if (this.isRegistered) {
-          if (!this.hideRegisterPromptOnNewContact && !newContact.registered) {
-            setTimeout(() => {
-              this.$notify(
-                {
-                  group: "modal",
-                  type: "confirm",
-                  title: "Register",
-                  text: "Do you want to register them?",
-                  onCancel: async (stopAsking: boolean) => {
-                    if (stopAsking) {
-                      await db.settings.update(MASTER_SETTINGS_KEY, {
-                        hideRegisterPromptOnNewContact: stopAsking,
-                      });
-                      this.hideRegisterPromptOnNewContact = stopAsking;
-                    }
-                  },
-                  onNo: async (stopAsking: boolean) => {
-                    if (stopAsking) {
-                      await db.settings.update(MASTER_SETTINGS_KEY, {
-                        hideRegisterPromptOnNewContact: stopAsking,
-                      });
-                      this.hideRegisterPromptOnNewContact = stopAsking;
-                    }
-                  },
-                  onYes: async () => {
-                    await this.register(newContact);
-                  },
-                  promptToStopAsking: true,
-                },
-                -1,
-              );
-            }, 500);
-          }
-        }
-      } catch (e) {
-        console.error("Error saving contact info:", e);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Contact Error",
-            text: "Could not save contact info. Check if it already exists.",
-          },
-          5000,
-        );
-      }
+  onScanDetect(content: any) {
+    if (content[0]?.rawValue) {
+      localStorage.setItem("contactEndorserUrl", content[0].rawValue);
+      this.$router.push({ name: "contacts" });
     } else {
       this.$notify(
         {
           group: "alert",
-          type: "danger",
+          type: "warning",
           title: "Invalid Contact QR Code",
           text: "No QR code detected with contact information.",
         },
-        5000,
-      );
-    }
-  }
-
-  async setVisibility(contact: Contact, visibility: boolean) {
-    const result = await setVisibilityUtil(
-      this.activeDid,
-      this.apiServer,
-      this.axios,
-      db,
-      contact,
-      visibility,
-    );
-    if (result.error) {
-      this.danger(result.error as string, "Error Setting Visibility");
-    } else if (!result.success) {
-      console.error("Got strange result from setting visibility:", result);
-    }
-  }
-
-  async register(contact: Contact) {
-    this.$notify(
-      {
-        group: "alert",
-        type: "toast",
-        text: "",
-        title: "Registration submitted...",
-      },
-      1000,
-    );
-
-    try {
-      const regResult = await register(
-        this.activeDid,
-        this.apiServer,
-        this.axios,
-        contact,
-      );
-      if (regResult.success) {
-        contact.registered = true;
-        db.contacts.update(contact.did, { registered: true });
-
-        this.$notify(
-          {
-            group: "alert",
-            type: "success",
-            title: "Registration Success",
-            text:
-              (contact.name || "That unnamed person") + " has been registered.",
-          },
-          5000,
-        );
-      } else {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Registration Error",
-            text:
-              (regResult.error as string) ||
-              "Something went wrong during registration.",
-          },
-          5000,
-        );
-      }
-    } catch (error) {
-      console.error("Error when registering:", error);
-      let userMessage = "There was an error.";
-      const serverError = error as AxiosError;
-      if (serverError) {
-        if (serverError.response?.data?.error?.message) {
-          userMessage = serverError.response.data.error.message;
-        } else if (serverError.message) {
-          userMessage = serverError.message; // Info for the user
-        } else {
-          userMessage = JSON.stringify(serverError.toJSON());
-        }
-      } else {
-        userMessage = error as string;
-      }
-      // Now set that error for the user to see.
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Registration Error",
-          text: userMessage,
-        },
-        5000,
+        -1,
       );
     }
   }
@@ -393,20 +201,19 @@ export default class ContactQRScanShow extends Vue {
     this.$notify(
       {
         group: "alert",
-        type: "danger",
+        type: "warning",
         title: "Invalid Scan",
         text: "The scan was invalid.",
       },
-      5000,
+      -1,
     );
   }
 
-  onCopyUrlToClipboard() {
-    //this.onScanDetect([{ rawValue: this.qrValue }]); // good for testing
+  onCopyToClipboard() {
     useClipboard()
       .copy(this.qrValue)
       .then(() => {
-        // console.log("Contact URL:", this.qrValue);
+        console.log("Contact URL:", this.qrValue);
         this.$notify(
           {
             group: "alert",
@@ -418,22 +225,5 @@ export default class ContactQRScanShow extends Vue {
         );
       });
   }
-
-  onCopyDidToClipboard() {
-    //this.onScanDetect([{ rawValue: this.qrValue }]); // good for testing
-    useClipboard()
-      .copy(this.activeDid)
-      .then(() => {
-        this.$notify(
-          {
-            group: "alert",
-            type: "info",
-            title: "Copied",
-            text: "Your DID was copied to the clipboard. Have them paste it in the box on their 'People' screen to add you.",
-          },
-          5000,
-        );
-      });
-  }
 }
 </script>

src/views/ContactScanView.vue

@@ -65,19 +65,17 @@
     />
 
     <div class="mt-8">
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-        <input
-          type="submit"
-          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"
-          value="Look Up Contact"
-        />
-        <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-1.5 py-2 rounded-md"
-        >
-          Cancel
-        </button>
-      </div>
+      <input
+        type="submit"
+        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"
+        value="Look Up Contact"
+      />
+      <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-1.5 py-2 rounded-md"
+      >
+        Cancel
+      </button>
     </div>
   </section>
 </template>

src/views/DIDView.vue

@@ -1,706 +0,0 @@
-<template>
-  <QuickNav selected="Contacts" />
-  <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>
-        Identifier Details
-      </h1>
-    </div>
-
-    <!-- Identity Details -->
-    <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">
-          {{ contactFromDid?.name || "(no name)" }}
-          <router-link
-            :to="{ name: 'contact-edit', params: { did: contactFromDid?.did } }"
-          >
-            <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
-          </router-link>
-        </h2>
-        <button
-          @click="showDidDetails = !showDidDetails"
-          class="ml-2 mr-2 mt-4"
-        >
-          Details
-          <fa v-if="showDidDetails" 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
-          v-if="showDidDetails"
-          class="text-sm overflow-x-scroll px-4 py-3 bg-slate-100 rounded-md"
-          >{{ contactYaml }}</pre
-        >
-      </div>
-      <div class="flex justify-center mt-4">
-        <span
-          v-if="contactFromDid?.profileImageUrl"
-          class="flex justify-between"
-        >
-          <EntityIcon
-            :icon-size="96"
-            :profileImageUrl="contactFromDid?.profileImageUrl"
-            class="inline-block align-text-bottom border border-slate-300 rounded"
-            @click="showLargeIdenticonUrl = contactFromDid?.profileImageUrl"
-          />
-        </span>
-      </div>
-      <div class="flex justify-between mt-4">
-        <div class="flex items-center">
-          <div v-if="activeDid" class="flex justify-between">
-            <div>
-              <button
-                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(contactFromDid, false)"
-                title="They can see you"
-              >
-                <fa icon="eye" class="fa-fw" />
-              </button>
-              <button
-                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(contactFromDid, true)"
-                title="They cannot see you"
-              >
-                <fa icon="eye-slash" class="fa-fw" />
-              </button>
-
-              <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(contactFromDid)"
-                title="Check Visibility"
-                v-if="contactFromDid?.did !== activeDid"
-              >
-                <fa icon="rotate" class="fa-fw" />
-              </button>
-            </div>
-
-            <button
-              @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="contactFromDid?.did !== activeDid"
-              title="Registration"
-            >
-              <fa
-                v-if="contactFromDid?.registered"
-                icon="person-circle-check"
-                class="fa-fw"
-              />
-              <fa v-else icon="person-circle-question" class="fa-fw" />
-            </button>
-          </div>
-
-          <button
-            @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="!contactFromDid?.profileImageUrl">
-          <div>Auto-Generated Icon</div>
-          <div class="flex justify-center">
-            <EntityIcon
-              :entityId="viewingDid"
-              :iconSize="64"
-              class="inline-block align-middle border border-slate-300 rounded-md mr-1"
-              @click="showLargeIdenticonId = viewingDid"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        v-if="showLargeIdenticonId || showLargeIdenticonUrl"
-        class="fixed z-[100] top-0 inset-x-0 w-full"
-      >
-        <div
-          class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
-        >
-          <EntityIcon
-            :entityId="showLargeIdenticonId"
-            :iconSize="512"
-            :profileImageUrl="showLargeIdenticonUrl"
-            class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
-            @click="
-              showLargeIdenticonId = undefined;
-              showLargeIdenticonUrl = undefined;
-            "
-          />
-        </div>
-      </div>
-    </div>
-    <div v-else class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <!-- !contactFromDid -->
-      <div>
-        <h2 class="text-xl font-semibold">
-          {{ isMyDid ? "You" : "(no name)" }}
-        </h2>
-      </div>
-    </div>
-
-    <!-- Loading Animation -->
-    <div
-      class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
-      v-if="isLoading"
-    >
-      <fa icon="spinner" class="fa-spin-pulse"></fa>
-    </div>
-    <!-- Results List -->
-    <div v-if="claims.length > 0" class="mt-4">
-      <div class="text-l font-bold text-center">
-        Claims That Involve {{ isMyDid ? "You" : "Them" }}
-      </div>
-    </div>
-    <InfiniteScroll @reached-bottom="loadMoreData">
-      <ul>
-        <li
-          class="border-b border-slate-300"
-          v-for="claim in claims"
-          :key="claim.handleId"
-        >
-          <div class="grid grid-cols-12 gap-4">
-            <span class="col-span-2">
-              {{ claim.issuedAt.substring(0, 10) }}
-            </span>
-            <span class="col-span-2">
-              {{ capitalizeAndInsertSpacesBeforeCaps(claim.claimType) }}
-            </span>
-            <span class="col-span-2">
-              {{ claimAmount(claim) }}
-            </span>
-            <span class="col-span-5">
-              {{ claimDescription(claim) }}
-            </span>
-            <span class="col-span-1">
-              <a @click="onClickLoadClaim(claim.id)" class="cursor-pointer">
-                <fa icon="file-lines" class="pl-2 pt-1 text-blue-500" />
-              </a>
-            </span>
-          </div>
-        </li>
-      </ul>
-    </InfiniteScroll>
-
-    <div
-      v-if="!isLoading && claims.length === 0"
-      class="flex justify-center mt-4"
-    >
-      <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>
-
-<script lang="ts">
-import { AxiosError } from "axios";
-import * as yaml from "js-yaml";
-import { Component, Vue } from "vue-facing-decorator";
-import { Router } from "vue-router";
-
-import QuickNav from "@/components/QuickNav.vue";
-import InfiniteScroll from "@/components/InfiniteScroll.vue";
-import TopMessage from "@/components/TopMessage.vue";
-import { NotificationIface } from "@/constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
-import { Contact } from "@/db/tables/contacts";
-import { BoundingBox } from "@/db/tables/settings";
-import {
-  capitalizeAndInsertSpacesBeforeCaps,
-  didInfoForContact,
-  displayAmount,
-  getHeaders,
-  GenericCredWrapper,
-  GenericVerifiableCredential,
-  GiveVerifiableCredential,
-  OfferVerifiableCredential,
-  register,
-  setVisibilityUtil,
-} from "@/libs/endorserServer";
-import * as libsUtil from "@/libs/util";
-import EntityIcon from "@/components/EntityIcon.vue";
-
-@Component({
-  components: {
-    EntityIcon,
-    InfiniteScroll,
-    QuickNav,
-    TopMessage,
-  },
-})
-export default class DIDView extends Vue {
-  $notify!: (notification: NotificationIface, timeout?: number) => void;
-
-  libsUtil = libsUtil;
-  yaml = yaml;
-
-  activeDid = "";
-  apiServer = "";
-  claims: Array<GenericCredWrapper<GenericVerifiableCredential>> = [];
-  contactFromDid?: Contact;
-  contactYaml = "";
-  hitEnd = false;
-  isLoading = false;
-  isMyDid = false;
-  searchBox: { name: string; bbox: BoundingBox } | null = null;
-  showDidDetails = false;
-  showLargeIdenticonId?: string;
-  showLargeIdenticonUrl?: string;
-  viewingDid?: string;
-
-  capitalizeAndInsertSpacesBeforeCaps = capitalizeAndInsertSpacesBeforeCaps;
-  didInfoForContact = didInfoForContact;
-  displayAmount = displayAmount;
-
-  async mounted() {
-    const settings = await retrieveSettingsForActiveAccount();
-    this.activeDid = settings.activeDid || "";
-    this.apiServer = settings.apiServer || "";
-
-    const pathParam = window.location.pathname.substring("/did/".length);
-    let showDid = pathParam;
-    if (!showDid) {
-      showDid = this.activeDid;
-      if (showDid) {
-        this.$notify(
-          {
-            group: "alert",
-            type: "toast",
-            title: "Your Info",
-            text: "No user was specified so showing your info.",
-          },
-          3000,
-        );
-      }
-    }
-    if (showDid) {
-      this.viewingDid = decodeURIComponent(showDid);
-      this.contactFromDid = await db.contacts.get(this.viewingDid);
-      if (this.contactFromDid) {
-        this.contactYaml = yaml.dump(this.contactFromDid);
-      }
-      await this.loadClaimsAbout();
-
-      const allAccountDids = await libsUtil.retrieveAccountDids();
-      this.isMyDid = allAccountDids.includes(this.viewingDid);
-    }
-  }
-
-  /**
-   * Data loader used by infinite scroller
-   * @param payload is the flag from the InfiniteScroll indicating if it should load
-   **/
-  async loadMoreData(payload: boolean) {
-    if (this.claims.length > 0 && !this.hitEnd && payload) {
-      this.loadClaimsAbout();
-    }
-  }
-
-  // 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: message,
-        onYes: async () => {
-          await this.deleteContact(contact);
-        },
-      },
-      -1,
-    );
-  }
-
-  async deleteContact(contact: Contact) {
-    await db.open();
-    await db.contacts.delete(contact.did);
-    this.$notify(
-      {
-        group: "alert",
-        type: "success",
-        title: "Deleted",
-        text: "Contact has been removed.",
-      },
-      3000,
-    );
-    (this.$router as Router).push({ name: "contacts" });
-  }
-
-  // confirm to register a new contact
-  async confirmRegister(contact: Contact) {
-    this.$notify(
-      {
-        group: "modal",
-        type: "confirm",
-        title: "Register",
-        text:
-          "Are you sure you want to register " +
-          libsUtil.nameForContact(this.contactFromDid, false) +
-          (contact.registered
-            ? " -- especially since they are already marked as registered"
-            : "") +
-          "?",
-        onYes: async () => {
-          await this.register(contact);
-        },
-      },
-      -1,
-    );
-  }
-
-  // note that this is also in ContactView.vue
-  async register(contact: Contact) {
-    this.$notify({ group: "alert", type: "toast", title: "Sent..." }, 1000);
-
-    try {
-      const regResult = await register(
-        this.activeDid,
-        this.apiServer,
-        this.axios,
-        contact,
-      );
-      if (regResult.success) {
-        contact.registered = true;
-        await db.contacts.update(contact.did, { registered: true });
-
-        this.$notify(
-          {
-            group: "alert",
-            type: "success",
-            title: "Registration Success",
-            text:
-              (contact.name || "That unnamed person") + " has been registered.",
-          },
-          5000,
-        );
-      } else {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Registration Error",
-            text:
-              (regResult.error as string) ||
-              "Something went wrong during registration.",
-          },
-          5000,
-        );
-      }
-    } catch (error) {
-      console.error("Error when registering:", error);
-      let userMessage = "There was an error.";
-      const serverError = error as AxiosError;
-      if (serverError) {
-        if (serverError.response?.data?.error?.message) {
-          userMessage = serverError.response.data.error.message;
-        } else if (serverError.message) {
-          userMessage = serverError.message; // Info for the user
-        } else {
-          userMessage = JSON.stringify(serverError.toJSON());
-        }
-      } else {
-        userMessage = error as string;
-      }
-      // Now set that error for the user to see.
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Registration Error",
-          text: userMessage,
-        },
-        5000,
-      );
-    }
-  }
-
-  public async loadClaimsAbout() {
-    if (!this.viewingDid) {
-      console.error("This should never be called without a DID.");
-      return;
-    }
-
-    const queryParams = "claimContents=" + encodeURIComponent(this.viewingDid);
-    let postfix = "";
-    if (this.claims.length > 0) {
-      postfix = "&beforeId=" + this.claims[this.claims.length - 1].id;
-    }
-
-    try {
-      this.isLoading = true;
-      const response = await fetch(
-        this.apiServer + "/api/v2/report/claims?" + queryParams + postfix,
-        {
-          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.`,
-          },
-          5000,
-        );
-        return;
-      }
-
-      const results = await response.json();
-      this.claims = this.claims.concat(results.data);
-      this.hitEnd = !results.hitLimit;
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (e: any) {
-      console.error("Error with feed load:", e);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: e.userMessage || "There was a problem retrieving claims.",
-        },
-        3000,
-      );
-    } finally {
-      this.isLoading = false;
-    }
-  }
-
-  onClickLoadClaim(jwtId: string) {
-    const route = {
-      path: "/claim/" + encodeURIComponent(jwtId),
-    };
-    (this.$router as Router).push(route);
-  }
-
-  public claimAmount(claim: GenericVerifiableCredential) {
-    if (claim.claimType === "GiveAction") {
-      const giveClaim = claim.claim as GiveVerifiableCredential;
-      if (giveClaim.object?.unitCode && giveClaim.object?.amountOfThisGood) {
-        return displayAmount(
-          giveClaim.object.unitCode,
-          giveClaim.object.amountOfThisGood,
-        );
-      } else {
-        return "";
-      }
-    } else if (claim.claimType === "Offer") {
-      const offerClaim = claim.claim as OfferVerifiableCredential;
-      if (
-        offerClaim.includesObject?.unitCode &&
-        offerClaim.includesObject?.amountOfThisGood
-      ) {
-        return displayAmount(
-          offerClaim.includesObject.unitCode,
-          offerClaim.includesObject.amountOfThisGood,
-        );
-      } else {
-        return "";
-      }
-    }
-    return "";
-  }
-
-  claimDescription(claim: GenericVerifiableCredential) {
-    return claim.claim.name || claim.claim.description || "";
-  }
-
-  // note that this is also in ContactView.vue
-  async confirmSetVisibility(contact: Contact, visibility: boolean) {
-    const visibilityPrompt = visibility
-      ? "Are you sure you want to make your activity visible to them?"
-      : "Are you sure you want to hide all your activity from them?";
-    this.$notify(
-      {
-        group: "modal",
-        type: "confirm",
-        title: "Set Visibility",
-        text: visibilityPrompt,
-        onYes: async () => {
-          const success = await this.setVisibility(contact, visibility, true);
-          if (success) {
-            contact.seesMe = visibility; // didn't work inside setVisibility
-          }
-        },
-      },
-      -1,
-    );
-  }
-
-  // note that this is also in ContactView.vue
-  async setVisibility(
-    contact: Contact,
-    visibility: boolean,
-    showSuccessAlert: boolean,
-  ) {
-    const result = await setVisibilityUtil(
-      this.activeDid,
-      this.apiServer,
-      this.axios,
-      db,
-      contact,
-      visibility,
-    );
-    if (result.success) {
-      //contact.seesMe = visibility; // why doesn't it affect the UI from here?
-      //console.log("Set result & seesMe", result, contact.seesMe, contact.did);
-      if (showSuccessAlert) {
-        this.$notify(
-          {
-            group: "alert",
-            type: "success",
-            title: "Visibility Set",
-            text:
-              (contact.name || "That user") +
-              " can " +
-              (visibility ? "" : "not ") +
-              "see your activity.",
-          },
-          3000,
-        );
-      }
-      return true;
-    } else {
-      console.error("Got strange result from setting visibility:", result);
-      const message =
-        (result.error as string) || "Could not set visibility on the server.";
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error Setting Visibility",
-          text: message,
-        },
-        5000,
-      );
-      return false;
-    }
-  }
-
-  // note that this is also in ContactView.vue
-  async checkVisibility(contact: Contact) {
-    const url =
-      this.apiServer +
-      "/api/report/canDidExplicitlySeeMe?did=" +
-      encodeURIComponent(contact.did);
-    const headers = await getHeaders(this.activeDid);
-    if (!headers["Authorization"]) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "No Identity",
-          text: "There is no identity to use to check visibility.",
-        },
-        3000,
-      );
-      return;
-    }
-
-    try {
-      const resp = await this.axios.get(url, { headers });
-      if (resp.status === 200) {
-        const visibility = resp.data;
-        contact.seesMe = visibility;
-        //console.log("Visi check:", visibility, contact.seesMe, contact.did);
-        await db.contacts.update(contact.did, { seesMe: visibility });
-
-        this.$notify(
-          {
-            group: "alert",
-            type: "info",
-            title: "Visibility Refreshed",
-            text:
-              libsUtil.nameForContact(contact, true) +
-              " can " +
-              (visibility ? "" : "not ") +
-              "see your activity.",
-          },
-          3000,
-        );
-      } else {
-        console.error("Got bad server response checking visibility:", resp);
-        const message = resp.data.error?.message || "Got bad server response.";
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error Checking Visibility",
-            text: message,
-          },
-          5000,
-        );
-      }
-    } catch (err) {
-      console.error("Caught error from request to check visibility:", err);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error Checking Visibility",
-          text: "Check connectivity and try again.",
-        },
-        3000,
-      );
-    }
-  }
-}
-</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/views/DiscoverView.vue

@@ -1,75 +1,31 @@
 <template>
-  <QuickNav selected="Discover" />
+  <QuickNav selected="Discover"></QuickNav>
   <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">
-      Discover Projects & People
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      Discover
     </h1>
 
-    <OnboardingDialog ref="onboardingDialog" />
-
     <!-- Quick Search -->
-    <div
-      id="QuickSearch"
-      class="mt-8 mb-4 flex"
-      :style="{ visibility: isSearchVisible ? 'visible' : 'hidden' }"
-    >
+    <div id="QuickSearch" class="mb-4 flex" v-on:keyup.enter="searchSelected()">
       <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
-        class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
         @click="searchSelected()"
+        class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
       >
         <fa icon="magnifying-glass" class="fa-fw"></fa>
       </button>
     </div>
 
     <!-- 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>
@@ -77,25 +33,19 @@
             href="#"
             @click="
               projects = [];
-              userProfiles = [];
               isLocalActive = true;
-              isMappedActive = false;
-              isAnywhereActive = false;
-              isSearchVisible = true;
-              tempSearchBox = null;
+              isRemoteActive = false;
               searchLocal();
             "
-            v-bind:class="computedLocalTabStyleClassNames()"
+            v-bind:class="computedLocalTabClassNames()"
           >
             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>
@@ -103,80 +53,35 @@
             href="#"
             @click="
               projects = [];
-              userProfiles = [];
+              isRemoteActive = true;
               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()"
+            v-bind:class="computedRemoteTabClassNames()"
           >
             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="isAnywhereActive"
+              v-if="isRemoteActive"
             >
               {{ remoteCount > -1 ? remoteCount : "?" }}
             </span>
-            -->
           </a>
         </li>
       </ul>
     </div>
 
     <div v-if="isLocalActive">
-      <div class="text-center">
+      <div>
         <button
-          class="ml-2 mt-2 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
+          class="ml-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"
@@ -184,157 +89,62 @@
     >
       <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">
-        <!-- Projects List -->
-        <template v-if="isProjectsActive">
-          <li
-            class="border-b border-slate-300"
-            v-for="project in projects"
-            :key="project.handleId"
+      <ul>
+        <li
+          class="border-b border-slate-300"
+          v-for="project in projects"
+          :key="project.handleId"
+        >
+          <a
+            @click="onClickLoadProject(project.handleId)"
+            class="block py-4 flex gap-4"
           >
-            <a
-              @click="onClickLoadItem(project.handleId)"
-              class="block py-4 flex gap-4 cursor-pointer"
-            >
-              <div>
-                <ProjectIcon
-                  :entityId="project.handleId"
-                  :iconSize="48"
-                  :imageUrl="project.image"
-                  class="block border border-slate-300 rounded-md max-h-12 max-w-12"
-                />
-              </div>
+            <div class="w-12">
+              <ProjectIcon
+                :entityId="project.handleId"
+                :iconSize="48"
+                class="block border border-slate-300 rounded-md"
+              ></ProjectIcon>
+            </div>
 
-              <div class="grow">
-                <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 class="grow">
+              <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>
-            </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>
+            </div>
+          </a>
+        </li>
       </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 { 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 EntityIcon from "@/components/EntityIcon.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
-import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import TopMessage from "@/components/TopMessage.vue";
-import { DEFAULT_PARTNER_API_SERVER, NotificationIface } from "@/constants/app";
-import {
-  db,
-  logConsoleAndDb,
-  retrieveSettingsForActiveAccount,
-} from "@/db/index";
+import { NotificationIface } from "@/constants/app";
+import { accountsDB, db } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
-import { BoundingBox } from "@/db/tables/settings";
-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;
-}
+import { BoundingBox, MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { accessToken } from "@/libs/crypto";
+import { didInfo, PlanData } from "@/libs/endorserServer";
 
 @Component({
   components: {
+    EntityIcon,
     InfiniteScroll,
-    LMap,
-    LTileLayer,
-    OnboardingDialog,
     ProjectIcon,
     QuickNav,
     TopMessage,
@@ -342,66 +152,41 @@ interface Tile {
 })
 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;
-  isMappedActive = false;
-  isAnywhereActive = false;
-  isProjectsActive = true;
-  isPeopleActive = false;
-  isSearchVisible = true;
-  localCenterLat = 0;
-  localCenterLong = 0;
+  isRemoteActive = false;
   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() {
-    const settings = await retrieveSettingsForActiveAccount();
-    this.activeDid = (settings.activeDid as string) || "";
-    this.apiServer = (settings.apiServer as string) || "";
-    this.partnerApiServer =
-      (settings.partnerApiServer as string) || this.partnerApiServer;
-    this.searchBox = settings.searchBoxes?.[0] || null;
+    await db.open();
+    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    this.activeDid = (settings?.activeDid as string) || "";
+    this.apiServer = (settings?.apiServer as string) || "";
+    this.searchBox = settings?.searchBoxes?.[0] || null;
 
     this.allContacts = await db.contacts.toArray();
 
-    this.allMyDids = await retrieveAccountDids();
-
-    this.searchTerms = this.$route.query["searchText"]?.toString() || "";
-
-    if (!settings.finishedOnboarding) {
-      (this.$refs.onboardingDialog as OnboardingDialog).open(
-        OnboardPage.Discover,
-      );
-    }
+    await accountsDB.open();
+    const allAccounts = await accountsDB.accounts.toArray();
+    this.allMyDids = allAccounts.map((acc) => acc.did);
 
     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.isMappedActive = false;
-      this.isAnywhereActive = true;
+      this.isRemoteActive = true;
       await this.searchAll();
     }
   }
@@ -414,21 +199,41 @@ 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();
     }
   }
 
+  public async buildHeaders(): Promise<HeadersInit> {
+    const headers: HeadersInit = {
+      "Content-Type": "application/json",
+    };
+
+    if (this.activeDid) {
+      await accountsDB.open();
+      const allAccounts = await accountsDB.accounts.toArray();
+      const account = allAccounts.find((acc) => acc.did === this.activeDid);
+      const identity = JSON.parse(account?.identity || "null");
+
+      if (!identity) {
+        throw new Error(
+          "An ID is chosen but there are no keys for it so it cannot be used to talk with the service. Switch your ID.",
+        );
+      }
+
+      headers["Authorization"] = "Bearer " + (await accessToken(identity));
+    } else {
+      // it's OK without auth... we just won't get any identifiers
+    }
+    return headers;
+  }
+
   public async searchAll(beforeId?: string) {
     this.resetCounts();
 
     if (!beforeId) {
       // this was an initial search so clear any previous results
       this.projects = [];
-      this.userProfiles = [];
     }
 
     let queryParams = "claimContents=" + encodeURIComponent(this.searchTerms);
@@ -437,60 +242,55 @@ 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(endpoint + "?" + queryParams, {
-        method: "GET",
-        headers: await getHeaders(this.activeDid),
-      });
+      const response = await fetch(
+        this.apiServer + "/api/v2/report/plans?" + queryParams,
+        {
+          method: "GET",
+          headers: await this.buildHeaders(),
+        },
+      );
 
       if (response.status !== 200) {
         const details = await response.text();
+        console.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();
 
-      if (this.isProjectsActive) {
-        this.userProfiles = [];
-        const plans: PlanData[] = results.data;
-        if (plans) {
-          this.projects.push(...plans);
-          this.remoteCount = this.projects.length;
-        } else {
-          throw JSON.stringify(results);
+      const plans: PlanData[] = results.data;
+      if (plans) {
+        for (const plan of plans) {
+          const { name, description, handleId, issuerDid, rowid } = plan;
+          this.projects.push({ name, description, handleId, issuerDid, rowid });
         }
+        this.remoteCount = this.projects.length;
       } else {
-        this.projects = [];
-        const profiles: UserProfile[] = results.data;
-        if (profiles) {
-          this.userProfiles.push(...profiles);
-          this.remoteCount = this.userProfiles.length;
-        } else {
-          throw JSON.stringify(results);
-        }
+        throw JSON.stringify(results);
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (e: any) {
-      console.error("Error with search all:", e);
-      // this sometimes gives different information
-      console.error("Error with search all (error added): " + e);
+      console.error("Error with feed load:", e);
       this.$notify(
         {
           group: "alert",
           type: "danger",
-          title: "Error Searching",
-          text:
-            e.userMessage ||
-            "There was a problem retrieving " +
-              (this.isProjectsActive ? "projects" : "profiles") +
-              ".",
+          title: "Error",
+          text: e.userMessage || "There was a problem retrieving projects.",
         },
-        5000,
+        -1,
       );
     } finally {
       this.isLoading = false;
@@ -500,20 +300,14 @@ export default class DiscoverView extends Vue {
   public async searchLocal(beforeId?: string) {
     this.resetCounts();
 
-    const searchBox =
-      (this.isMappedActive && this.tempSearchBox) ||
-      (this.isLocalActive && this.searchBox?.bbox);
-
-    if (!searchBox) {
+    if (!this.searchBox) {
       this.projects = [];
-      this.userProfiles = [];
       return;
     }
 
     if (!beforeId) {
       // this was an initial search so clear any previous results
       this.projects = [];
-      this.userProfiles = [];
     }
 
     const claimContents =
@@ -521,68 +315,74 @@ export default class DiscoverView extends Vue {
 
     let queryParams = [
       claimContents,
-      "minLocLat=" + searchBox.minLat,
-      "maxLocLat=" + searchBox.maxLat,
-      "minLocLon=" + searchBox.westLong,
-      "maxLocLon=" + searchBox.eastLong,
+      "minLocLat=" + this.searchBox.bbox.minLat,
+      "maxLocLat=" + this.searchBox.bbox.maxLat,
+      "westLocLon=" + this.searchBox.bbox.westLong,
+      "eastLocLon=" + this.searchBox.bbox.eastLong,
     ].join("&");
 
     if (beforeId) {
       queryParams = queryParams + `&beforeId=${beforeId}`;
     }
 
-    const endpoint = this.isProjectsActive
-      ? this.apiServer + "/api/v2/report/plansByLocation"
-      : this.partnerApiServer + "/api/partner/userProfile";
-
     try {
       this.isLoading = true;
-      const response = await fetch(endpoint + "?" + queryParams, {
-        method: "GET",
-        headers: await getHeaders(this.activeDid),
-      });
+      const response = await fetch(
+        this.apiServer + "/api/v2/report/plansByLocation?" + queryParams,
+        {
+          method: "GET",
+          headers: await this.buildHeaders(),
+        },
+      );
 
       if (response.status !== 200) {
         const details = await response.text();
-        throw details;
+        console.error("Problem with nearby search:", details);
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "There was a problem accessing the server. Try again later.",
+          },
+          -1,
+        );
+        throw await response.text();
       }
 
       const results = await response.json();
 
-      if (this.isProjectsActive) {
-        this.userProfiles = [];
-        const plans: PlanData[] = results.data;
-        if (plans) {
-          this.projects.push(...plans);
-          this.localCount = this.projects.length;
+      if (results.data) {
+        if (beforeId) {
+          const plans: PlanData[] = results.data;
+          for (const plan of plans) {
+            const { name, description, handleId, issuerDid, rowid } = plan;
+            this.projects.push({
+              name,
+              description,
+              handleId,
+              issuerDid,
+              rowid,
+            });
+          }
         } else {
-          throw JSON.stringify(results);
+          this.projects = results.data;
         }
+        this.localCount = this.projects.length;
       } else {
-        this.projects = [];
-        const profiles: UserProfile[] = results.data;
-        if (profiles) {
-          this.userProfiles.push(...profiles);
-          this.localCount = this.userProfiles.length;
-        } else {
-          throw JSON.stringify(results);
-        }
+        throw JSON.stringify(results);
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (e: any) {
-      console.error("Error with search local:", e);
+      console.error("Error with feed load:", e);
       this.$notify(
         {
           group: "alert",
           type: "danger",
           title: "Error",
-          text:
-            e.userMessage ||
-            "There was a problem retrieving " +
-              (this.isProjectsActive ? "projects" : "profiles") +
-              ".",
+          text: e.userMessage || "There was a problem retrieving projects.",
         },
-        5000,
+        -1,
       );
     } finally {
       this.isLoading = false;
@@ -594,159 +394,29 @@ export default class DiscoverView extends Vue {
    * @param payload is the flag from the InfiniteScroll indicating if it should load
    **/
   async loadMoreData(payload: boolean) {
-    if (payload) {
-      if (this.isProjectsActive && this.projects.length > 0) {
-        const latestProject = this.projects[this.projects.length - 1];
-        if (this.isLocalActive || this.isMappedActive) {
-          this.searchLocal(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 || "");
-        }
+    if (this.projects.length > 0 && payload) {
+      const latestProject = this.projects[this.projects.length - 1];
+      if (this.isLocalActive) {
+        this.searchLocal(latestProject["rowid"]);
+      } else if (this.isRemoteActive) {
+        this.searchAll(latestProject["rowid"]);
       }
     }
   }
 
-  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 or profile entry found in the list
-   * @param id of the project or profile
+   * Handle clicking on a project entry found in the list
+   * @param id of the project
    **/
-  onClickLoadItem(id: string) {
+  onClickLoadProject(id: string) {
+    localStorage.setItem("projectId", id);
     const route = {
-      path: this.isProjectsActive
-        ? "/project/" + encodeURIComponent(id)
-        : "/userProfile/" + encodeURIComponent(id),
+      path: "/project/" + encodeURIComponent(id),
     };
     this.$router.push(route);
   }
 
-  public computedLocalTabStyleClassNames() {
+  public computedLocalTabClassNames() {
     return {
       "inline-block": true,
       "py-3": true,
@@ -764,92 +434,22 @@ export default class DiscoverView extends Vue {
     };
   }
 
-  public computedMappedTabStyleClassNames() {
+  public computedRemoteTabClassNames() {
     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,
+      active: this.isRemoteActive,
+      "text-black": this.isRemoteActive,
+      "border-black": this.isRemoteActive,
+      "font-semibold": this.isRemoteActive,
 
-      "text-blue-600": !this.isMappedActive,
-      "border-transparent": !this.isMappedActive,
-      "hover:border-slate-400": !this.isMappedActive,
-    };
-  }
-
-  public computedRemoteTabStyleClassNames() {
-    return {
-      "inline-block": true,
-      "py-3": true,
-      "rounded-t-lg": true,
-      "border-b-2": true,
-
-      active: this.isAnywhereActive,
-      "text-black": this.isAnywhereActive,
-      "border-black": this.isAnywhereActive,
-      "font-semibold": this.isAnywhereActive,
-
-      "text-blue-600": !this.isAnywhereActive,
-      "border-transparent": !this.isAnywhereActive,
-      "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,
+      "text-blue-600": !this.isRemoteActive,
+      "border-transparent": !this.isRemoteActive,
+      "hover:border-slate-400": !this.isRemoteActive,
     };
   }
 }
 </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/GiftedDetails.vue

@@ -0,0 +1,457 @@
+<template>
+  <QuickNav />
+  <TopMessage />
+
+  <!-- CONTENT -->
+  <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="cancel()"
+      >
+        <fa icon="chevron-left" class="fa-fw"></fa>
+      </h1>
+    </div>
+
+    <!-- Heading -->
+    <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">
+      {{ message }} {{ giverName || "somebody not named" }}
+    </h1>
+    <textarea
+      class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
+      placeholder="What was received"
+      v-model="description"
+    />
+    <div class="flex flex-row justify-center">
+      <span
+        class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
+        @click="changeUnitCode()"
+      >
+        {{ libsUtil.UNIT_SHORT[unitCode] }}
+      </span>
+      <div
+        class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
+        @click="amountInput === '0' ? null : decrement()"
+      >
+        <fa icon="chevron-left" />
+      </div>
+      <input
+        type="number"
+        class="border border-r-0 border-slate-400 px-2 py-2 text-center w-20"
+        v-model="amountInput"
+      />
+      <div
+        class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
+        @click="increment()"
+      >
+        <fa icon="chevron-right" />
+      </div>
+    </div>
+
+    <div class="flex justify-center mt-4">
+      <span v-if="imageUrl" class="flex justify-between">
+        <a :href="imageUrl" target="_blank" class="text-blue-500 ml-4">
+          <img :src="imageUrl" class="h-24 rounded-xl" />
+        </a>
+        <fa
+          icon="trash-can"
+          @click="confirmDeleteImage"
+          class="text-red-500 fa-fw ml-8 mt-10"
+        />
+      </span>
+      <span v-else>
+        <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"
+          @click="openPhotoDialog"
+        />
+      </span>
+    </div>
+    <GiftedPhotoDialog ref="photoDialog" />
+
+    <div v-if="projectId" class="mt-4">
+      <fa
+        icon="check"
+        class="bg-slate-500 text-white h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
+      />
+      <label class="text-sm">This is given to a project</label>
+    </div>
+
+    <div v-if="!projectId" class="mt-4">
+      <input type="checkbox" class="h-6 w-6 mr-2" v-model="givenToUser" />
+      <label class="text-sm">Given to you</label>
+    </div>
+
+    <div class="mt-4">
+      <input type="checkbox" class="h-6 w-6 mr-2" v-model="isTrade" />
+      <label class="text-sm">Trade (not a gift)</label>
+    </div>
+
+    <p class="text-center mb-2 mt-6 italic">
+      Sign & Send to publish to the world
+      <fa
+        icon="circle-info"
+        class="pl-2 text-blue-500 cursor-pointer"
+        @click="explainData()"
+      />
+    </p>
+    <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="confirm"
+    >
+      Sign &amp; Send
+    </button>
+    <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"
+      @click="cancel"
+    >
+      Cancel
+    </button>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+
+import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+import { db } from "@/db/index";
+import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
+import { createAndSubmitGive } from "@/libs/endorserServer";
+import * as libsUtil from "@/libs/util";
+import { accessToken } from "@/libs/crypto";
+import GiftedDialog from "@/components/GiftedDialog.vue";
+import GiftedPhotoDialog from "@/components/GiftedPhotoDialog.vue";
+
+@Component({
+  components: {
+    GiftedDialog,
+    GiftedPhotoDialog,
+    QuickNav,
+    TopMessage,
+  },
+})
+export default class GiftedDetails extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid = "";
+  apiServer = "";
+
+  amountInput = "0";
+  description = "";
+  givenToUser = false;
+  giverDid: string | undefined;
+  giverName = "";
+  imageUrl = "";
+  isTrade = false;
+  message = "";
+  offerId = "";
+  projectId = "";
+  unitCode = "HUR";
+
+  libsUtil = libsUtil;
+
+  async mounted() {
+    this.amountInput = this.$route.query.amountInput as string;
+    this.description = this.$route.query.description as string;
+    this.giverDid = this.$route.query.giverDid as string;
+    this.giverName = this.$route.query.giverName as string;
+    this.message = this.$route.query.message as string;
+    this.offerId = this.$route.query.offerId as string;
+    this.projectId = this.$route.query.projectId as string;
+    this.unitCode = this.$route.query.unitCode as string;
+
+    this.imageUrl = localStorage.getItem("imageUrl") || "";
+
+    this.givenToUser = !this.projectId;
+
+    try {
+      await db.open();
+      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+      this.apiServer = settings?.apiServer || "";
+      this.activeDid = settings?.activeDid || "";
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (err: any) {
+      console.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,
+      );
+    }
+  }
+
+  changeUnitCode() {
+    const units = Object.keys(this.libsUtil.UNIT_SHORT);
+    const index = units.indexOf(this.unitCode);
+    this.unitCode = units[(index + 1) % units.length];
+  }
+
+  increment() {
+    this.amountInput = `${(parseFloat(this.amountInput) || 0) + 1}`;
+  }
+
+  decrement() {
+    this.amountInput = `${Math.max(
+      0,
+      (parseFloat(this.amountInput) || 1) - 1,
+    )}`;
+  }
+
+  cancel() {
+    this.deleteImage(); // not awaiting, so they'll go back immediately
+    this.$router.back();
+  }
+
+  openPhotoDialog() {
+    (this.$refs.photoDialog as GiftedPhotoDialog).open((imgUrl) => {
+      this.imageUrl = imgUrl;
+    });
+  }
+
+  confirmDeleteImage() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Are you sure you want to delete the image?",
+        text: "",
+        onYes: this.deleteImage,
+      },
+      -1,
+    );
+  }
+
+  async deleteImage() {
+    if (!this.imageUrl) {
+      return;
+    }
+    try {
+      const identity = await libsUtil.getIdentity(this.activeDid);
+      const token = await accessToken(identity);
+      const response = await this.axios.delete(
+        DEFAULT_IMAGE_API_SERVER +
+          "/image/" +
+          encodeURIComponent(this.imageUrl),
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        },
+      );
+      if (response.status === 204) {
+        // don't bother with a notification
+        // (either they'll simply continue or they're canceling and going back)
+      } else {
+        console.error("Non-success deleting image:", response);
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "There was a problem deleting the image.",
+          },
+          5000,
+        );
+        // keep the imageUrl in localStorage so the user can try again if they want
+        return;
+      }
+
+      localStorage.removeItem("imageUrl");
+      this.imageUrl = "";
+    } catch (error) {
+      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);
+
+        localStorage.removeItem("imageUrl");
+        this.imageUrl = "";
+
+        // it already doesn't exist so we won't say anything to the user
+      } else {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "There was an error deleting the image.",
+          },
+          5000,
+        );
+      }
+    }
+  }
+
+  async confirm() {
+    if (!this.activeDid) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "You must select an identifier before you can record a give.",
+        },
+        2000,
+      );
+      return;
+    }
+    if (parseFloat(this.amountInput) < 0) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          text: "You may not send a negative number.",
+          title: "",
+        },
+        2000,
+      );
+      return;
+    }
+    if (!this.description && !parseFloat(this.amountInput)) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: `You must enter a description or some number of ${
+            this.libsUtil.UNIT_LONG[this.unitCode]
+          }.`,
+        },
+        2000,
+      );
+      return;
+    }
+
+    this.$notify(
+      {
+        group: "alert",
+        type: "toast",
+        text: "Recording the give...",
+        title: "",
+      },
+      1000,
+    );
+
+    // this is asynchronous, but we don't need to wait for it to complete
+    await this.recordGive();
+  }
+
+  /**
+   *
+   * @param giverDid may be null
+   * @param description may be an empty string
+   * @param amountInput may be 0
+   * @param unitCode may be omitted, defaults to "HUR"
+   */
+  public async recordGive() {
+    try {
+      const identity = await libsUtil.getIdentity(this.activeDid);
+      const result = await createAndSubmitGive(
+        this.axios,
+        this.apiServer,
+        identity,
+        this.giverDid,
+        this.givenToUser ? this.activeDid : undefined,
+        this.description,
+        parseFloat(this.amountInput),
+        this.unitCode,
+        this.projectId,
+        this.offerId,
+        this.isTrade,
+        this.imageUrl,
+      );
+
+      if (
+        result.type === "error" ||
+        this.isGiveCreationError(result.response)
+      ) {
+        const errorMessage = this.getGiveCreationErrorMessage(result);
+        console.error("Error with give creation result:", result);
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: errorMessage || "There was an error creating the give.",
+          },
+          -1,
+        );
+      } else {
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Success",
+            text: `That ${this.isTrade ? "trade" : "gift"} was recorded.`,
+          },
+          5000,
+        );
+        localStorage.removeItem("imageUrl");
+        this.$router.back();
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      console.error("Error with give recordation caught:", error);
+      const message =
+        error.userMessage ||
+        error.response?.data?.error?.message ||
+        "There was an error recording the give.";
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: message,
+        },
+        -1,
+      );
+    }
+  }
+
+  // Helper functions for readability
+
+  /**
+   * @param result response "data" from the server
+   * @returns true if the result indicates an error
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  isGiveCreationError(result: any) {
+    return result.status !== 201 || result.data?.error;
+  }
+
+  /**
+   * @param result direct response eg. ErrorResult or SuccessResult (potentially with embedded "data")
+   * @returns best guess at an error message
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getGiveCreationErrorMessage(result: any) {
+    return (
+      result.error?.userMessage ||
+      result.error?.error ||
+      result.response?.data?.error?.message
+    );
+  }
+
+  explainData() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "success",
+        title: "Data Sharing",
+        text: libsUtil.PRIVACY_MESSAGE,
+      },
+      -1,
+    );
+  }
+}
+</script>