Merge branch 'master' into test-playwright

doc/README.md

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

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

src/components/FeedFilters.vue

@@ -133,18 +133,18 @@ export default class FeedFilters extends Vue {
     this.visible = true;
   }
 
-  toggleHasVisibleDid() {
+  async toggleHasVisibleDid() {
     this.settingChanged = true;
     this.hasVisibleDid = !this.hasVisibleDid;
-    db.settings.update(MASTER_SETTINGS_KEY, {
+    await db.settings.update(MASTER_SETTINGS_KEY, {
       filterFeedByVisible: this.hasVisibleDid,
     });
   }
 
-  toggleNearby() {
+  async toggleNearby() {
     this.settingChanged = true;
     this.isNearby = !this.isNearby;
-    db.settings.update(MASTER_SETTINGS_KEY, {
+    await db.settings.update(MASTER_SETTINGS_KEY, {
       filterFeedByNearby: this.isNearby,
     });
   }
@@ -154,7 +154,7 @@ export default class FeedFilters extends Vue {
       this.settingChanged = true;
     }
 
-    db.settings.update(MASTER_SETTINGS_KEY, {
+    await db.settings.update(MASTER_SETTINGS_KEY, {
       filterFeedByNearby: false,
       filterFeedByVisible: false,
     });
@@ -168,7 +168,7 @@ export default class FeedFilters extends Vue {
       this.settingChanged = true;
     }
 
-    db.settings.update(MASTER_SETTINGS_KEY, {
+    await db.settings.update(MASTER_SETTINGS_KEY, {
       filterFeedByNearby: true,
       filterFeedByVisible: true,
     });

src/components/GiftedDialog.vue

@@ -291,8 +291,8 @@ export default class GiftedDialog extends Vue {
         this.axios,
         this.apiServer,
         this.activeDid,
-        giverDid,
-        this.receiver?.did as string,
+        giverDid as string,
+        recipientDid as string,
         description,
         amount,
         unitCode,

src/db/index.ts

@@ -51,8 +51,8 @@ db.version(2).stores({
 db.version(3).stores(TempSchema);
 
 // Event handler to initialize the non-sensitive database with default settings
-db.on("populate", () => {
-  db.settings.add({
+db.on("populate", async () => {
+  await db.settings.add({
     id: MASTER_SETTINGS_KEY,
     apiServer: DEFAULT_ENDORSER_API_SERVER,
   });

src/db/tables/settings.ts

@@ -26,6 +26,7 @@ export type Settings = {
   lastName?: string; // deprecated - put all names in firstName
   lastNotifiedClaimId?: string;
   lastViewedClaimId?: string;
+  passkeyExpirationMinutes?: number; // passkey access token time-to-live in minutes
   profileImageUrl?: string;
   reminderTime?: number; // Time in milliseconds since UNIX epoch for reminders
   reminderOn?: boolean; // Toggle to enable or disable reminders
@@ -46,7 +47,7 @@ export type Settings = {
 };
 
 export function isAnyFeedFilterOn(settings: Settings): boolean {
-  return !!(settings.filterFeedByNearby || settings.filterFeedByVisible);
+  return !!(settings?.filterFeedByNearby || settings?.filterFeedByVisible);
 }
 
 /**
@@ -60,3 +61,5 @@ export const SettingsSchema = {
  * Constants.
  */
 export const MASTER_SETTINGS_KEY = 1;
+
+export const DEFAULT_PASSKEY_EXPIRATION_MINUTES = 15;

src/libs/crypto/index.ts

@@ -85,7 +85,7 @@ export const generateSeed = (): string => {
 };
 
 /**
- * Retreive an access token
+ * Retrieve an access token, or "" if no DID is provided.
  *
  * @return {*}
  */

src/libs/crypto/vc/index.ts

@@ -67,7 +67,7 @@ export async function createEndorserJwtForKey(
  *  The SimpleSigner returns a configured function for signing data.
  *
  *  @example
- *  const signer = SimpleSigner(import.meta.env.PRIVATE_KEY)
+ *  const signer = SimpleSigner(privateKeyHexString)
  *  signer(data, (err, signature) => {
  *    ...
  *  })

src/libs/crypto/vc/passkeyDidPeer.ts

@@ -411,13 +411,21 @@ async function peerDidToDidDocument(did: string): Promise<DIDResolutionResult> {
   }
   // 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/jws-2020/v1",
+      "https://w3id.org/security/suites/secp256k1-2019/v1",
     ],
     assertionMethod: [did + "#" + encnumbasis],
     authentication: [did + "#" + encnumbasis],

src/libs/endorserServer.ts

@@ -6,7 +6,7 @@ import { DEFAULT_IMAGE_API_SERVER } from "@/constants/app";
 import { Contact } from "@/db/tables/contacts";
 import { accessToken } from "@/libs/crypto";
 import { NonsensitiveDexie } from "@/db/index";
-import { getAccount } from "@/libs/util";
+import { getAccount, getPasskeyExpirationSeconds } from "@/libs/util";
 import { createEndorserJwtForKey, KeyMeta } from "@/libs/crypto/vc";
 
 export const SCHEMA_ORG_CONTEXT = "https://schema.org";
@@ -48,29 +48,31 @@ export interface ClaimResult {
 }
 
 export interface GenericVerifiableCredential {
-  "@context": string;
+  "@context"?: string;
   "@type": string;
   [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
-export interface GenericCredWrapper extends GenericVerifiableCredential {
+export interface GenericCredWrapper<T extends GenericVerifiableCredential> {
+  "@context": string;
+  "@type": string;
+  claim: T;
+  claimType?: string;
   handleId: string;
   id: string;
   issuedAt: string;
   issuer: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  claim: Record<string, any>;
-  claimType?: string;
 }
-export const BLANK_GENERIC_SERVER_RECORD: GenericCredWrapper = {
-  "@context": SCHEMA_ORG_CONTEXT,
-  "@type": "",
-  claim: {},
-  handleId: "",
-  id: "",
-  issuedAt: "",
-  issuer: "",
-};
+export const BLANK_GENERIC_SERVER_RECORD: GenericCredWrapper<GenericVerifiableCredential> =
+  {
+    "@context": SCHEMA_ORG_CONTEXT,
+    "@type": "",
+    claim: { "@type": "" },
+    handleId: "",
+    id: "",
+    issuedAt: "",
+    issuer: "",
+  };
 
 // a summary record; the VC is found the fullClaim field
 export interface GiveSummaryRecord {
@@ -123,7 +125,7 @@ export interface PlanSummaryRecord {
 
 // Note that previous VCs may have additional fields.
 // https://endorser.ch/doc/html/transactions.html#id4
-export interface GiveVerifiableCredential {
+export interface GiveVerifiableCredential extends GenericVerifiableCredential {
   "@context"?: string; // optional when embedded, eg. in an Agree
   "@type": "GiveAction";
   agent?: { identifier: string };
@@ -191,7 +193,7 @@ export interface PlanData {
    */
   issuerDid: string;
   /**
-   * The Identier of the project -- different from jwtId, needs to be fixed
+   * The identifier of the project -- different from jwtId, needs to be fixed
    **/
   rowid?: string;
 }
@@ -447,12 +449,57 @@ export function didInfo(
   return didInfoForContact(did, activeDid, contact, allMyDids).displayName;
 }
 
+let passkeyAccessToken: string = "";
+let passkeyTokenExpirationEpochSeconds: number = 0;
+
+export function clearPasskeyToken() {
+  passkeyAccessToken = "";
+  passkeyTokenExpirationEpochSeconds = 0;
+}
+
+export function tokenExpiryTimeDescription() {
+  if (
+    !passkeyAccessToken ||
+    passkeyTokenExpirationEpochSeconds < new Date().getTime() / 1000
+  ) {
+    return "Token has expired";
+  } else {
+    return (
+      "Token expires at " +
+      new Date(passkeyTokenExpirationEpochSeconds * 1000).toLocaleString()
+    );
+  }
+}
+
+/**
+ * Get the headers for a request, potentially including Authorization
+ */
 export async function getHeaders(did?: string) {
   const headers: { "Content-Type": string; Authorization?: string } = {
     "Content-Type": "application/json",
   };
   if (did) {
-    const token = await accessToken(did);
+    let token;
+    const account = await getAccount(did);
+    if (account?.passkeyCredIdHex) {
+      if (
+        passkeyAccessToken &&
+        passkeyTokenExpirationEpochSeconds > Date.now() / 1000
+      ) {
+        // there's an active current passkey token
+        token = passkeyAccessToken;
+      } else {
+        // there's no current passkey token or it's expired
+        token = await accessToken(did);
+
+        passkeyAccessToken = token;
+        const passkeyExpirationSeconds = await getPasskeyExpirationSeconds();
+        passkeyTokenExpirationEpochSeconds =
+          Date.now() / 1000 + passkeyExpirationSeconds;
+      }
+    } else {
+      token = await accessToken(did);
+    }
     headers["Authorization"] = "Bearer " + token;
   } else {
     // it's often OK to request without auth; we assume necessary checks are done earlier
@@ -517,8 +564,9 @@ export async function setPlanInCache(
 /**
  * Construct GiveAction VC for submission to server
  */
-export function constructGive(
-  fromDid?: string | null,
+export function hydrateGive(
+  vcClaimOrig?: GiveVerifiableCredential,
+  fromDid?: string,
   toDid?: string,
   description?: string,
   amount?: number,
@@ -527,42 +575,68 @@ export function constructGive(
   fulfillsOfferHandleId?: string,
   isTrade: boolean = false,
   imageUrl?: string,
+  lastClaimId?: string,
 ): GiveVerifiableCredential {
-  const vcClaim: GiveVerifiableCredential = {
-    "@context": SCHEMA_ORG_CONTEXT,
-    "@type": "GiveAction",
-    recipient: toDid ? { identifier: toDid } : undefined,
-    agent: fromDid ? { identifier: fromDid } : undefined,
-    description: description || undefined,
-    object: amount
-      ? { amountOfThisGood: amount, unitCode: unitCode || "HUR" }
-      : undefined,
-    fulfills: [{ "@type": isTrade ? "TradeAction" : "DonateAction" }],
-  };
+  // Remember: replace values or erase if it's null
+
+  const vcClaim: GiveVerifiableCredential = vcClaimOrig
+    ? R.clone(vcClaimOrig)
+    : {
+        "@context": SCHEMA_ORG_CONTEXT,
+        "@type": "GiveAction",
+      };
+
+  if (lastClaimId) {
+    vcClaim.lastClaimId = lastClaimId;
+    delete vcClaim.identifier;
+  }
+
+  vcClaim.agent = fromDid ? { identifier: fromDid } : undefined;
+  vcClaim.recipient = toDid ? { identifier: toDid } : undefined;
+  vcClaim.description = description || undefined;
+  vcClaim.object = amount
+    ? { amountOfThisGood: amount, unitCode: unitCode || "HUR" }
+    : undefined;
+
+  // ensure fulfills is an array
+  if (!Array.isArray(vcClaim.fulfills)) {
+    vcClaim.fulfills = vcClaim.fulfills ? [vcClaim.fulfills] : [];
+  }
+  // ... and replace or add each element, ending with Trade or Donate
+  // I realize this doesn't change any elements that are not PlanAction or Offer or Trade/Action.
   if (fulfillsProjectHandleId) {
-    vcClaim.fulfills = vcClaim.fulfills || []; // weird that it won't typecheck without this
+    vcClaim.fulfills = vcClaim.fulfills.filter(
+      (elem) => elem["@type"] !== "PlanAction",
+    );
     vcClaim.fulfills.push({
       "@type": "PlanAction",
       identifier: fulfillsProjectHandleId,
     });
   }
   if (fulfillsOfferHandleId) {
-    vcClaim.fulfills = vcClaim.fulfills || []; // weird that it won't typecheck without this
+    vcClaim.fulfills = vcClaim.fulfills.filter(
+      (elem) => elem["@type"] !== "Offer",
+    );
     vcClaim.fulfills.push({
       "@type": "Offer",
       identifier: fulfillsOfferHandleId,
     });
   }
-  if (imageUrl) {
-    vcClaim.image = imageUrl;
-  }
+  // do Trade/Donate last because current endorser.ch only looks at the first for plans & offers
+  vcClaim.fulfills = vcClaim.fulfills.filter(
+    (elem) =>
+      elem["@type"] !== "DonateAction" && elem["@type"] !== "TradeAction",
+  );
+  vcClaim.fulfills.push({ "@type": isTrade ? "TradeAction" : "DonateAction" });
+
+  vcClaim.image = imageUrl || undefined;
+
   return vcClaim;
 }
 
 /**
- * For result, see https://api.endorser.ch/api-docs/#/claims/post_api_v2_claim
+ *  For result, see https://api.endorser.ch/api-docs/#/claims/post_api_v2_claim
  *
- * @param identity
  * @param fromDid may be null
  * @param toDid
  * @param description may be null; should have this or amount
@@ -572,7 +646,7 @@ export async function createAndSubmitGive(
   axios: Axios,
   apiServer: string,
   issuerDid: string,
-  fromDid?: string | null,
+  fromDid?: string,
   toDid?: string,
   description?: string,
   amount?: number,
@@ -582,7 +656,8 @@ export async function createAndSubmitGive(
   isTrade: boolean = false,
   imageUrl?: string,
 ): Promise<CreateAndSubmitClaimResult> {
-  const vcClaim = constructGive(
+  const vcClaim = hydrateGive(
+    undefined,
     fromDid,
     toDid,
     description,
@@ -594,7 +669,51 @@ export async function createAndSubmitGive(
     imageUrl,
   );
   return createAndSubmitClaim(
-    vcClaim as GenericCredWrapper,
+    vcClaim as GenericVerifiableCredential,
+    issuerDid,
+    apiServer,
+    axios,
+  );
+}
+
+/**
+ * For result, see https://api.endorser.ch/api-docs/#/claims/post_api_v2_claim
+ *
+ * @param fromDid may be null
+ * @param toDid
+ * @param description may be null; should have this or amount
+ * @param amount may be null; should have this or description
+ */
+export async function editAndSubmitGive(
+  axios: Axios,
+  apiServer: string,
+  fullClaim: GenericCredWrapper<GiveVerifiableCredential>,
+  issuerDid: string,
+  fromDid?: string,
+  toDid?: string,
+  description?: string,
+  amount?: number,
+  unitCode?: string,
+  fulfillsProjectHandleId?: string,
+  fulfillsOfferHandleId?: string,
+  isTrade: boolean = false,
+  imageUrl?: string,
+): Promise<CreateAndSubmitClaimResult> {
+  const vcClaim = hydrateGive(
+    fullClaim.claim,
+    fromDid,
+    toDid,
+    description,
+    amount,
+    unitCode,
+    fulfillsProjectHandleId,
+    fulfillsOfferHandleId,
+    isTrade,
+    imageUrl,
+    fullClaim.id,
+  );
+  return createAndSubmitClaim(
+    vcClaim as GenericVerifiableCredential,
     issuerDid,
     apiServer,
     axios,
@@ -647,7 +766,7 @@ export async function createAndSubmitOffer(
     };
   }
   return createAndSubmitClaim(
-    vcClaim as GenericCredWrapper,
+    vcClaim as OfferVerifiableCredential,
     issuerDid,
     apiServer,
     axios,
@@ -706,7 +825,7 @@ export async function createAndSubmitClaim(
     return { type: "success", response };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (error: any) {
-    console.error("Error creating claim:", error);
+    console.error("Error submitting claim:", error);
     const errorMessage: string =
       error.response?.data?.error?.message ||
       error.message ||
@@ -775,24 +894,29 @@ export const capitalizeAndInsertSpacesBeforeCaps = (text: string) => {
  similar code is also contained in endorser-mobile
  **/
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const claimSummary = (claim: Record<string, any>) => {
+const claimSummary = (
+  claim: GenericCredWrapper<GenericVerifiableCredential>,
+) => {
   if (!claim) {
     // to differentiate from "something" above
     return "something";
   }
+  let specificClaim:
+    | GenericVerifiableCredential
+    | GenericCredWrapper<GenericVerifiableCredential> = claim;
   if (claim.claim) {
     // probably a Verified Credential
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    claim = claim.claim as Record<string, any>;
+    specificClaim = claim.claim;
   }
-  if (Array.isArray(claim)) {
-    if (claim.length === 1) {
-      claim = claim[0];
+  if (Array.isArray(specificClaim)) {
+    if (specificClaim.length === 1) {
+      specificClaim = specificClaim[0];
     } else {
       return "multiple claims";
     }
   }
-  const type = claim["@type"];
+  const type = specificClaim["@type"];
   if (!type) {
     return "a claim";
   } else {
@@ -813,7 +937,7 @@ const claimSummary = (claim: Record<string, any>) => {
  similar code is also contained in endorser-mobile
  **/
 export const claimSpecialDescription = (
-  record: GenericCredWrapper,
+  record: GenericCredWrapper<GenericVerifiableCredential>,
   activeDid: string,
   identifiers: Array<string>,
   contacts: Array<Contact>,
@@ -907,7 +1031,11 @@ export const claimSpecialDescription = (
       "...]"
     );
   } else {
-    return issuer + " declared " + claimSummary(claim as GenericCredWrapper);
+    return (
+      issuer +
+      " declared " +
+      claimSummary(claim as GenericCredWrapper<GenericVerifiableCredential>)
+    );
   }
 };
 

src/libs/util.ts

@@ -1,21 +1,28 @@
 // many of these are also found in endorser-mobile utility.ts
 
 import axios, { AxiosResponse } from "axios";
-import { IIdentifier } from "@veramo/core";
 import { useClipboard } from "@vueuse/core";
 
 import { DEFAULT_PUSH_SERVER } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
 import { Account } from "@/db/tables/accounts";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import {
+  DEFAULT_PASSKEY_EXPIRATION_MINUTES,
+  MASTER_SETTINGS_KEY,
+} from "@/db/tables/settings";
 import { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
-import { GenericCredWrapper, containsHiddenDid } from "@/libs/endorserServer";
+import {
+  containsHiddenDid,
+  GenericCredWrapper,
+  GenericVerifiableCredential,
+  OfferVerifiableCredential,
+} from "@/libs/endorserServer";
 import * as serverUtil from "@/libs/endorserServer";
 import { registerCredential } from "@/libs/crypto/vc/passkeyDidPeer";
 
 import { Buffer } from "buffer";
-import {KeyMeta} from "@/libs/crypto/vc";
-import {createPeerDid} from "@/libs/crypto/vc/didPeer";
+import { KeyMeta } from "@/libs/crypto/vc";
+import { createPeerDid } from "@/libs/crypto/vc/didPeer";
 
 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.";
@@ -77,7 +84,9 @@ export const isGlobalUri = (uri: string) => {
   return uri && uri.match(new RegExp(/^[A-Za-z][A-Za-z0-9+.-]+:/));
 };
 
-export const isGiveAction = (veriClaim: GenericCredWrapper) => {
+export const isGiveAction = (
+  veriClaim: GenericCredWrapper<GenericVerifiableCredential>,
+) => {
   return veriClaim.claimType === "GiveAction";
 };
 
@@ -93,7 +102,7 @@ export const doCopyTwoSecRedo = (text: string, fn: () => void) => {
  * @param veriClaim is expected to have fields: claim, claimType, and issuer
  */
 export const isGiveRecordTheUserCanConfirm = (
-  veriClaim: GenericCredWrapper,
+  veriClaim: GenericCredWrapper<GenericVerifiableCredential>,
   activeDid: string,
   confirmerIdList: string[] = [],
 ) => {
@@ -109,9 +118,9 @@ export const isGiveRecordTheUserCanConfirm = (
  * @returns the DID of the person who offered, or undefined if hidden
  * @param veriClaim is expected to have fields: claim and issuer
  */
-export const offerGiverDid: (arg0: GenericCredWrapper) => string | undefined = (
-  veriClaim,
-) => {
+export const offerGiverDid: (
+  arg0: GenericCredWrapper<OfferVerifiableCredential>,
+) => string | undefined = (veriClaim) => {
   let giver;
   if (
     veriClaim.claim.offeredBy?.identifier &&
@@ -128,8 +137,13 @@ export const offerGiverDid: (arg0: GenericCredWrapper) => string | undefined = (
  * @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) => {
-  return !!(veriClaim.claimType === "Offer" && offerGiverDid(veriClaim));
+export const canFulfillOffer = (
+  veriClaim: GenericCredWrapper<GenericVerifiableCredential>,
+) => {
+  return !!(
+    veriClaim.claimType === "Offer" &&
+    offerGiverDid(veriClaim as GenericCredWrapper<OfferVerifiableCredential>)
+  );
 };
 
 // return object with paths and arrays of DIDs for any keys ending in "VisibleToDid"
@@ -273,6 +287,15 @@ export const registerSaveAndActivatePasskey = async (
   return account;
 };
 
+export const getPasskeyExpirationSeconds = async (): Promise<number> => {
+  await db.open();
+  const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+  const passkeyExpirationSeconds =
+    (settings?.passkeyExpirationMinutes ?? DEFAULT_PASSKEY_EXPIRATION_MINUTES) *
+    60;
+  return passkeyExpirationSeconds;
+};
+
 export const sendTestThroughPushServer = async (
   subscriptionJSON: PushSubscriptionJSON,
   skipFilter: boolean,

src/views/AccountViewView.vue

@@ -152,7 +152,7 @@
 
       <div class="text-blue-500 text-sm font-bold">
         <router-link :to="{ path: '/did/' + encodeURIComponent(activeDid) }">
-          Activity
+          Your Activity
         </router-link>
       </div>
     </div>
@@ -216,7 +216,6 @@
       <div class="mb-2 font-bold">Location</div>
       <router-link
         :to="{ name: 'search-area' }"
-        v-if="activeDid"
         class="block w-full text-center text-m bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2 mt-6"
       >
         Set Search Area…
@@ -304,6 +303,22 @@
       >
         If no download happened yet, click again here to download now.
       </a>
+      <div v-if="downloadUrl">
+        <p>
+          After the download, you can save the file in your preferred storage
+          location.
+        </p>
+        <ul>
+          <li class="list-disc list-outside ml-4">
+            On iOS: Choose "More..." and select anyplace in iCloud, or go "Back"
+            and save to another location.
+          </li>
+          <li class="list-disc list-outside ml-4">
+            On Android: Choose "Open" and then share to your prefered place.
+            <fa icon="share-nodes" class="fa-fw" />
+          </li>
+        </ul>
+      </div>
     </div>
 
     <!-- id used by puppeteer test script -->
@@ -622,6 +637,26 @@
         </button>
       </div>
 
+      <div class="flex justify-between">
+        <span>
+          <span class="text-slate-500 text-sm font-bold mb-2">
+            Passkey Expiration Minutes
+          </span>
+          <br />
+          <span class="text-sm ml-2">
+            {{ passkeyExpirationDescription }}
+          </span>
+        </span>
+        <div class="relative ml-2">
+          <input
+            type="number"
+            class="border border-slate-400 rounded px-2 py-2 text-center w-20"
+            v-model="passkeyExpirationMinutes"
+            @change="updatePasskeyExpiration"
+          />
+        </div>
+      </div>
+
       <label
         for="toggleShowGeneralAdvanced"
         class="flex items-center justify-between cursor-pointer mt-4"
@@ -675,14 +710,20 @@ import {
 } from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
 import { Account } from "@/db/tables/accounts";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
-import { accessToken } from "@/libs/crypto";
 import {
+  DEFAULT_PASSKEY_EXPIRATION_MINUTES,
+  MASTER_SETTINGS_KEY,
+  Settings,
+} from "@/db/tables/settings";
+import {
+  clearPasskeyToken,
   ErrorResponse,
   EndorserRateLimits,
-  ImageRateLimits,
   fetchEndorserRateLimits,
   fetchImageRateLimits,
+  getHeaders,
+  ImageRateLimits,
+  tokenExpiryTimeDescription,
 } from "@/libs/endorserServer";
 import { getAccount } from "@/libs/util";
 
@@ -713,6 +754,9 @@ export default class AccountViewView extends Vue {
   limitsMessage = "";
   loadingLimits = false;
   notificationMaybeChanged = false;
+  passkeyExpirationDescription = "";
+  passkeyExpirationMinutes = DEFAULT_PASSKEY_EXPIRATION_MINUTES;
+  previousPasskeyExpirationMinutes = DEFAULT_PASSKEY_EXPIRATION_MINUTES;
   profileImageUrl?: string;
   publicHex = "";
   publicBase64 = "";
@@ -745,12 +789,32 @@ export default class AccountViewView extends Vue {
       await this.initializeState();
       await this.processIdentity();
 
+      this.passkeyExpirationDescription = tokenExpiryTimeDescription();
+
+      /**
+       * Beware! I've seen where this "ready" never resolves.
+       */
       const registration = await navigator.serviceWorker.ready;
       this.subscription = await registration.pushManager.getSubscription();
       this.isSubscribed = !!this.subscription;
+      console.log("Got to the end of 'mounted' call.");
+      /**
+       * Beware! I've seen where we never get to this point because "ready" never resolves.
+       */
     } catch (error) {
-      console.error("Mount error:", error);
-      this.handleError(error);
+      console.error(
+        "Telling user to clear cache at page create because:",
+        error,
+      );
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Loading Account",
+          text: "Clear your cache and start over (after data backup).",
+        },
+        -1,
+      );
     }
   }
 
@@ -780,6 +844,10 @@ export default class AccountViewView extends Vue {
     this.showContactGives = !!settings?.showContactGivesInline;
     this.hideRegisterPromptOnNewContact =
       !!settings?.hideRegisterPromptOnNewContact;
+    this.passkeyExpirationMinutes =
+      (settings?.passkeyExpirationMinutes as number) ??
+      DEFAULT_PASSKEY_EXPIRATION_MINUTES;
+    this.previousPasskeyExpirationMinutes = this.passkeyExpirationMinutes;
     this.showGeneralAdvanced = !!settings?.showGeneralAdvanced;
     this.showShortcutBvc = !!settings?.showShortcutBvc;
     this.warnIfProdServer = !!settings?.warnIfProdServer;
@@ -835,11 +903,11 @@ export default class AccountViewView extends Vue {
       this.publicHex = identity.keys[0].publicKeyHex;
       this.publicBase64 = Buffer.from(this.publicHex, "hex").toString("base64");
       this.derivationPath = identity.keys[0].meta?.derivationPath as string;
-      this.checkLimitsFor(this.activeDid);
+      await this.checkLimitsFor(this.activeDid);
     } else if (account?.publicKeyHex) {
       this.publicHex = account.publicKeyHex as string;
       this.publicBase64 = Buffer.from(this.publicHex, "hex").toString("base64");
-      this.checkLimitsFor(this.activeDid);
+      await this.checkLimitsFor(this.activeDid);
     }
   }
 
@@ -868,75 +936,18 @@ export default class AccountViewView extends Vue {
     this.notificationMaybeChanged = true;
   }
 
-  /**
-   * Handles errors and updates the component's state accordingly.
-   * @param {Error} err - The error object.
-   */
-  handleError(err: unknown) {
-    if (
-      err instanceof Error &&
-      err.message ===
-        "Attempted to load account records with no identifier available."
-    ) {
-      this.limitsMessage = "No identifier.";
-    } else {
-      console.error("Telling user to clear cache at page create because:", err);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error Loading Account",
-          text: "Clear your cache and start over (after data backup).",
-        },
-        -1,
-      );
-    }
-  }
-
   public async updateShowContactAmounts() {
-    try {
-      await db.open();
-      await db.settings.update(MASTER_SETTINGS_KEY, {
-        showContactGivesInline: this.showContactGives,
-      });
-    } catch (err) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error Updating Contact Setting",
-          text: "The setting may not have saved. Try again, maybe after restarting the app.",
-        },
-        -1,
-      );
-      console.error(
-        "Telling user to try again after contact-amounts setting update because:",
-        err,
-      );
-    }
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      showContactGivesInline: this.showContactGives,
+    });
   }
 
   public async updateShowGeneralAdvanced() {
-    try {
-      await db.open();
-      await db.settings.update(MASTER_SETTINGS_KEY, {
-        showGeneralAdvanced: this.showGeneralAdvanced,
-      });
-    } catch (err) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error Updating Advanced Setting",
-          text: "The setting may not have saved. Try again, maybe after restarting the app.",
-        },
-        -1,
-      );
-      console.error(
-        "Telling user to try again after general-advanced setting update because:",
-        err,
-      );
-    }
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      showGeneralAdvanced: this.showGeneralAdvanced,
+    });
   }
 
   public async updateWarnIfProdServer(newSetting: boolean) {
@@ -963,71 +974,35 @@ export default class AccountViewView extends Vue {
   }
 
   public async updateWarnIfTestServer(newSetting: boolean) {
-    try {
-      await db.open();
-      await db.settings.update(MASTER_SETTINGS_KEY, {
-        warnIfTestServer: newSetting,
-      });
-    } catch (err) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error Updating Test Warning",
-          text: "The setting may not have saved. Try again, maybe after restarting the app.",
-        },
-        -1,
-      );
-      console.error(
-        "Telling user to try again after test-server-warning setting update because:",
-        err,
-      );
-    }
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      warnIfTestServer: newSetting,
+    });
   }
 
   public async toggleHideRegisterPromptOnNewContact() {
     const newSetting = !this.hideRegisterPromptOnNewContact;
-    try {
-      await db.open();
-      await db.settings.update(MASTER_SETTINGS_KEY, {
-        hideRegisterPromptOnNewContact: newSetting,
-      });
-      this.hideRegisterPromptOnNewContact = newSetting;
-    } catch (err) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error Updating Setting",
-          text: "The setting may not have saved. Try again, maybe after restarting the app.",
-        },
-        -1,
-      );
-      console.error("Telling user to try again because:", err);
-    }
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      hideRegisterPromptOnNewContact: newSetting,
+    });
+    this.hideRegisterPromptOnNewContact = newSetting;
+  }
+
+  public async updatePasskeyExpiration() {
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      passkeyExpirationMinutes: this.passkeyExpirationMinutes,
+    });
+    clearPasskeyToken();
+    this.passkeyExpirationDescription = tokenExpiryTimeDescription();
   }
 
   public async updateShowShortcutBvc(newSetting: boolean) {
-    try {
-      await db.open();
-      await db.settings.update(MASTER_SETTINGS_KEY, {
-        showShortcutBvc: newSetting,
-      });
-    } catch (err) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error Updating BVC Shortcut Setting",
-          text: "The setting may not have saved. Try again, maybe after restarting the app.",
-        },
-        -1,
-      );
-      console.error(
-        "Telling user to try again after BVC-shortcut setting update because:",
-        err,
-      );
-    }
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      showShortcutBvc: newSetting,
+    });
   }
 
   /**
@@ -1133,7 +1108,7 @@ export default class AccountViewView extends Vue {
   }
 
   async uploadImportFile(event: Event) {
-    inputImportFileNameRef.value = event.target.files[0];
+    inputImportFileNameRef.value = (event.target as EventTarget).files[0];
   }
 
   showContactImport() {
@@ -1220,7 +1195,7 @@ export default class AccountViewView extends Vue {
           // the user was not known to be registered, but now they are (because we got no error) so let's record it
           try {
             await db.open();
-            db.settings.update(MASTER_SETTINGS_KEY, {
+            await db.settings.update(MASTER_SETTINGS_KEY, {
               isRegistered: true,
             });
             this.isRegistered = true;
@@ -1247,7 +1222,7 @@ export default class AccountViewView extends Vue {
 
       try {
         await db.open();
-        db.settings.update(MASTER_SETTINGS_KEY, {
+        await db.settings.update(MASTER_SETTINGS_KEY, {
           isRegistered: false,
         });
         this.isRegistered = false;
@@ -1272,8 +1247,8 @@ export default class AccountViewView extends Vue {
         (data?.error?.message as string) || "Bad server response.";
       console.error(
         "Got bad response retrieving limits, which usually means user isn't registered.",
+        error,
       );
-      //console.error(error);
     } else {
       this.limitsMessage = "Got an error retrieving limits.";
       console.error("Got some error retrieving limits:", error);
@@ -1350,7 +1325,7 @@ export default class AccountViewView extends Vue {
 
   async onClickSaveApiServer() {
     await db.open();
-    db.settings.update(MASTER_SETTINGS_KEY, {
+    await db.settings.update(MASTER_SETTINGS_KEY, {
       apiServer: this.apiServerInput,
     });
     this.apiServer = this.apiServerInput;
@@ -1358,7 +1333,7 @@ export default class AccountViewView extends Vue {
 
   async onClickSavePushServer() {
     await db.open();
-    db.settings.update(MASTER_SETTINGS_KEY, {
+    await db.settings.update(MASTER_SETTINGS_KEY, {
       webPushServer: this.webPushServerInput,
     });
     this.webPushServer = this.webPushServerInput;
@@ -1377,7 +1352,7 @@ export default class AccountViewView extends Vue {
     (this.$refs.imageMethodDialog as ImageMethodDialog).open(
       async (imgUrl) => {
         await db.open();
-        db.settings.update(MASTER_SETTINGS_KEY, {
+        await db.settings.update(MASTER_SETTINGS_KEY, {
           profileImageUrl: imgUrl,
         });
         this.profileImageUrl = imgUrl;
@@ -1407,16 +1382,13 @@ export default class AccountViewView extends Vue {
       return;
     }
     try {
-      const token = await accessToken(this.activeDid);
+      const headers = await getHeaders(this.activeDid);
+      this.passkeyExpirationDescription = tokenExpiryTimeDescription();
       const response = await this.axios.delete(
         DEFAULT_IMAGE_API_SERVER +
           "/image/" +
           encodeURIComponent(this.profileImageUrl),
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        },
+        { headers },
       );
       if (response.status === 204) {
         // don't bother with a notification
@@ -1436,7 +1408,7 @@ export default class AccountViewView extends Vue {
       }
 
       await db.open();
-      db.settings.update(MASTER_SETTINGS_KEY, {
+      await db.settings.update(MASTER_SETTINGS_KEY, {
         profileImageUrl: undefined,
       });
 
@@ -1448,7 +1420,7 @@ export default class AccountViewView extends Vue {
         console.error("The image was already deleted:", error);
 
         await db.open();
-        db.settings.update(MASTER_SETTINGS_KEY, {
+        await db.settings.update(MASTER_SETTINGS_KEY, {
           profileImageUrl: undefined,
         });
 

src/views/ClaimAddRawView.vue

@@ -29,16 +29,15 @@
 </template>
 
 <script lang="ts">
-import { IIdentifier } from "@veramo/core";
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db } from "@/db/index";
+import { db } from "@/db/index";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import * as serverUtil from "@/libs/endorserServer";
 import QuickNav from "@/components/QuickNav.vue";
-import { Account } from "@/db/tables/accounts";
 
 @Component({
   components: { GiftedDialog, QuickNav },
@@ -57,7 +56,7 @@ export default class ClaimAddRawView extends Vue {
     this.activeDid = settings?.activeDid || "";
     this.apiServer = settings?.apiServer || "";
 
-    this.claimStr = this.$route.query.claim;
+    this.claimStr = (this.$route as Router).query["claim"];
     try {
       this.veriClaim = JSON.parse(this.claimStr);
       this.claimStr = JSON.stringify(this.veriClaim, null, 2);

src/views/ClaimView.vue

@@ -22,6 +22,16 @@
         <div class="overflow-hidden">
           <h2 class="text-md font-bold">
             {{ capitalizeAndInsertSpacesBeforeCaps(veriClaim.claimType) }}
+            <button
+              v-if="
+                veriClaim.claimType === 'GiveAction' &&
+                veriClaim.issuer === activeDid
+              "
+              @click="onClickEditClaim"
+              title="Edit"
+            >
+              <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1"></fa>
+            </button>
           </h2>
           <div class="text-sm">
             <div>
@@ -368,6 +378,9 @@
           </div>
         </div>
       </div>
+      <span v-if="isEditedGlobalId" class="mt-2">
+        This record is an edited version. The latest version is being shown.
+      </span>
       <!-- 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"
@@ -410,8 +423,8 @@
 import { AxiosError } from "axios";
 import * as yaml from "js-yaml";
 import * as R from "ramda";
-import { IIdentifier } from "@veramo/core";
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
@@ -423,7 +436,11 @@ import * as serverUtil from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
 import QuickNav from "@/components/QuickNav.vue";
 import { Account } from "@/db/tables/accounts";
-import { GiverReceiverInputInfo } from "@/libs/endorserServer";
+import {
+  GenericCredWrapper,
+  GiverReceiverInputInfo,
+  OfferVerifiableCredential,
+} from "@/libs/endorserServer";
 
 @Component({
   components: { GiftedDialog, QuickNav },
@@ -445,6 +462,7 @@ export default class ClaimView extends Vue {
   fullClaim = null;
   fullClaimDump = "";
   fullClaimMessage = "";
+  isEditedGlobalId = false;
   numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
   showDidCopy = false;
   showIdCopy = false;
@@ -467,6 +485,7 @@ export default class ClaimView extends Vue {
     this.fullClaim = null;
     this.fullClaimDump = "";
     this.fullClaimMessage = "";
+    this.isEditedGlobalId = false;
     this.numConfsNotVisible = 0;
     this.veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
     this.veriClaimDump = "";
@@ -563,6 +582,8 @@ export default class ClaimView extends Vue {
         return;
       }
 
+      this.isEditedGlobalId = !this.veriClaim.handleId.endsWith(claimId);
+
       // retrieve more details on Give, Offer, or Plan
       if (this.veriClaim.claimType === "GiveAction") {
         const giveUrl =
@@ -754,7 +775,7 @@ export default class ClaimView extends Vue {
     const route = {
       path: "/claim/" + encodeURIComponent(claimId),
     };
-    this.$router.push(route).then(async () => {
+    (this.$router as Router).push(route).then(async () => {
       this.resetThisValues();
       await this.loadClaim(claimId, this.activeDid);
     });
@@ -762,7 +783,9 @@ export default class ClaimView extends Vue {
 
   openFulfillGiftDialog() {
     const giver: GiverReceiverInputInfo = {
-      did: libsUtil.offerGiverDid(this.veriClaim),
+      did: libsUtil.offerGiverDid(
+        this.veriClaim as GenericCredWrapper<OfferVerifiableCredential>,
+      ),
     };
     (this.$refs.customGiveDialog as GiftedDialog).open(
       giver,
@@ -795,5 +818,17 @@ export default class ClaimView extends Vue {
       url: this.windowLocation,
     });
   }
+
+  onClickEditClaim() {
+    const route = {
+      name: "gifted-details",
+      query: {
+        prevCredToEdit: JSON.stringify(this.veriClaim),
+        destinationPathAfter:
+          "/claim/" + encodeURIComponent(this.veriClaim.handleId),
+      },
+    };
+    (this.$router as Router).push(route);
+  }
 }
 </script>

src/views/ConfirmGiftView.vue

@@ -396,9 +396,9 @@
 import { AxiosError } from "axios";
 import * as yaml from "js-yaml";
 import * as R from "ramda";
-import { IIdentifier } from "@veramo/core";
 import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
+import { Router } from "vue-router";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
@@ -408,7 +408,12 @@ import { Account } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import * as serverUtil from "@/libs/endorserServer";
-import { displayAmount, GiverReceiverInputInfo } from "@/libs/endorserServer";
+import {
+  displayAmount,
+  GenericCredWrapper,
+  GiverReceiverInputInfo,
+  OfferVerifiableCredential,
+} from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
 import { isGiveAction } from "@/libs/util";
 
@@ -760,7 +765,7 @@ export default class ClaimView extends Vue {
     const route = {
       path: "/claim/" + encodeURIComponent(claimId),
     };
-    this.$router.push(route).then(async () => {
+    (this.$router as Router).push(route).then(async () => {
       this.resetThisValues();
       await this.loadClaim(claimId, this.activeDid);
     });
@@ -768,7 +773,9 @@ export default class ClaimView extends Vue {
 
   openFulfillGiftDialog() {
     const giver: GiverReceiverInputInfo = {
-      did: libsUtil.offerGiverDid(this.veriClaim),
+      did: libsUtil.offerGiverDid(
+        this.veriClaim as GenericCredWrapper<OfferVerifiableCredential>,
+      ),
     };
     (this.$refs.customGiveDialog as GiftedDialog).open(
       giver,

src/views/ContactAmountsView.vue

@@ -55,7 +55,7 @@
             {{ 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) }}
                 <span v-if="record.amountConfirmed" title="Confirmed">
@@ -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,7 +79,7 @@
             </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) }}
                 <span v-if="record.amountConfirmed" title="Confirmed">
@@ -105,16 +105,16 @@
 </template>
 
 <script lang="ts">
-import { AxiosError } from "axios";
+import { AxiosError, AxiosRequestHeaders } from "axios";
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { accessToken } from "@/libs/crypto";
 import {
   AgreeVerifiableCredential,
   createEndorserJwtVcFromClaim,
@@ -145,7 +145,7 @@ export default class ContactAmountssView extends Vue {
   async created() {
     try {
       await db.open();
-      const contactDid = this.$route.query.contactDid as string;
+      const contactDid = (this.$route as Router).query["contactDid"] as string;
       this.contact = (await db.contacts.get(contactDid)) || null;
 
       const settings = await db.settings.get(MASTER_SETTINGS_KEY);
@@ -271,11 +271,7 @@ export default class ContactAmountssView extends Vue {
     // Make the xhr request payload
     const payload = JSON.stringify({ jwtEncoded: vcJwt });
     const url = this.apiServer + "/api/v2/claim";
-    const token = await accessToken(this.activeDid);
-    const headers = {
-      "Content-Type": "application/json",
-      Authorization: "Bearer " + token,
-    };
+    const headers = getHeaders(this.activeDid) as AxiosRequestHeaders;
 
     try {
       const resp = await this.axios.post(url, payload, { headers });

src/views/ContactGiftingView.vue

@@ -77,8 +77,7 @@ 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, accountsDB } from "@/db/index";
-import { AccountsSchema } from "@/db/tables/accounts";
+import { db } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { GiverReceiverInputInfo } from "@/libs/endorserServer";
@@ -92,13 +91,8 @@ export default class ContactGiftingView extends Vue {
   activeDid = "";
   allContacts: Array<Contact> = [];
   apiServer = "";
-  accounts: typeof AccountsSchema;
   projectId = localStorage.getItem("projectId") || "";
 
-  async beforeCreate() {
-    accountsDB.open();
-  }
-
   async created() {
     try {
       await db.open();

src/views/ContactQRScanShowView.vue

@@ -278,7 +278,7 @@ export default class ContactQRScanShow extends Vue {
                   text: "Do you want to register them?",
                   onCancel: async (stopAsking: boolean) => {
                     if (stopAsking) {
-                      db.settings.update(MASTER_SETTINGS_KEY, {
+                      await db.settings.update(MASTER_SETTINGS_KEY, {
                         hideRegisterPromptOnNewContact: stopAsking,
                       });
                       this.hideRegisterPromptOnNewContact = stopAsking;
@@ -286,7 +286,7 @@ export default class ContactQRScanShow extends Vue {
                   },
                   onNo: async (stopAsking: boolean) => {
                     if (stopAsking) {
-                      db.settings.update(MASTER_SETTINGS_KEY, {
+                      await db.settings.update(MASTER_SETTINGS_KEY, {
                         hideRegisterPromptOnNewContact: stopAsking,
                       });
                       this.hideRegisterPromptOnNewContact = stopAsking;

src/views/ContactsView.vue

@@ -691,7 +691,7 @@ export default class ContactsView extends Vue {
                   text: "Do you want to register them?",
                   onCancel: async (stopAsking: boolean) => {
                     if (stopAsking) {
-                      db.settings.update(MASTER_SETTINGS_KEY, {
+                      await db.settings.update(MASTER_SETTINGS_KEY, {
                         hideRegisterPromptOnNewContact: stopAsking,
                       });
                       this.hideRegisterPromptOnNewContact = stopAsking;
@@ -699,7 +699,7 @@ export default class ContactsView extends Vue {
                   },
                   onNo: async (stopAsking: boolean) => {
                     if (stopAsking) {
-                      db.settings.update(MASTER_SETTINGS_KEY, {
+                      await db.settings.update(MASTER_SETTINGS_KEY, {
                         hideRegisterPromptOnNewContact: stopAsking,
                       });
                       this.hideRegisterPromptOnNewContact = stopAsking;
@@ -1109,7 +1109,7 @@ export default class ContactsView extends Vue {
     const newShowValue = !this.showGiveNumbers;
     try {
       await db.open();
-      db.settings.update(MASTER_SETTINGS_KEY, {
+      await db.settings.update(MASTER_SETTINGS_KEY, {
         showContactGivesInline: newShowValue,
       });
     } catch (err) {

src/views/DIDView.vue

@@ -105,10 +105,7 @@
               {{ claimDescription(claim) }}
             </span>
             <span class="col-span-1">
-              <a
-                @click="onClickLoadClaim(claim.handleId)"
-                class="cursor-pointer"
-              >
+              <a @click="onClickLoadClaim(claim.id)" class="cursor-pointer">
                 <fa icon="file-lines" class="pl-2 pt-1 text-blue-500" />
               </a>
             </span>
@@ -128,6 +125,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
@@ -162,7 +160,7 @@ export default class DIDView extends Vue {
   activeDid = "";
   allMyDids: Array<string> = [];
   apiServer = "";
-  claims: Array<GenericCredWrapper> = [];
+  claims: Array<GenericCredWrapper<GenericVerifiableCredential>> = [];
   contact?: Contact;
   hitEnd = false;
   isLoading = false;
@@ -275,7 +273,7 @@ export default class DIDView extends Vue {
     const route = {
       path: "/claim/" + encodeURIComponent(jwtId),
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   public claimAmount(claim: GenericVerifiableCredential) {

src/views/DiscoverView.vue

@@ -129,6 +129,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
@@ -394,7 +395,7 @@ export default class DiscoverView extends Vue {
     const route = {
       path: "/project/" + encodeURIComponent(id),
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   public computedLocalTabStyleClassNames() {

src/views/GiftedDetails.vue

@@ -175,6 +175,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
@@ -183,13 +184,16 @@ import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import {
-  constructGive,
   createAndSubmitGive,
   didInfo,
+  editAndSubmitGive,
+  GenericCredWrapper,
+  getHeaders,
   getPlanFromCache,
+  GiveVerifiableCredential,
+  hydrateGive,
 } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
-import { accessToken } from "@/libs/crypto";
 import { Contact } from "@/db/tables/contacts";
 
 @Component({
@@ -207,7 +211,7 @@ export default class GiftedDetails extends Vue {
 
   amountInput = "0";
   description = "";
-  destinationNameAfter = "";
+  destinationPathAfter = "";
   givenToProject = false;
   givenToRecipient = false;
   giverDid: string | undefined;
@@ -217,6 +221,7 @@ export default class GiftedDetails extends Vue {
   isTrade = false;
   message = "";
   offerId = "";
+  prevCredToEdit?: GenericCredWrapper<GiveVerifiableCredential>;
   projectId = "";
   projectName = "a project";
   recipientDid = "";
@@ -226,38 +231,89 @@ export default class GiftedDetails extends Vue {
   libsUtil = libsUtil;
 
   async mounted() {
+    try {
+      this.prevCredToEdit = (this.$route as Router).query["prevCredToEdit"]
+        ? (JSON.parse(
+            (this.$route as Router).query["prevCredToEdit"],
+          ) as GenericCredWrapper<GiveVerifiableCredential>)
+        : undefined;
+    } catch (error) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Retrieval Error",
+          text: "The previous record isn't available for editing. If you submit, you'll create a new record.",
+        },
+        6000,
+      );
+    }
+
     this.amountInput =
-      (this.$route.query.amountInput as string) || this.amountInput;
-    this.description = (this.$route.query.description as string) || "";
-    this.destinationNameAfter = this.$route.query
-      .destinationNameAfter as string;
-    this.giverDid = this.$route.query.giverDid as string;
-    this.giverName = (this.$route.query.giverName as string) || "";
-    this.hideBackButton = this.$route.query.hideBackButton === "true";
-    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.recipientDid = this.$route.query.recipientDid as string;
-    this.recipientName = (this.$route.query.recipientName as string) || "";
-    this.unitCode = (this.$route.query.unitCode as string) || this.unitCode;
+      (this.$route as Router).query["amountInput"] ||
+      String(this.prevCredToEdit?.claim?.object?.amountOfThisGood) ||
+      this.amountInput;
+    this.description =
+      (this.$route as Router).query["description"] ||
+      this.prevCredToEdit?.claim?.description ||
+      this.description;
+    this.destinationPathAfter = (this.$route as Router).query[
+      "destinationPathAfter"
+    ];
+    this.giverDid = ((this.$route as Router).query["giverDid"] ||
+      this.prevCredToEdit?.claim?.agent?.identifier ||
+      this.giverDid) as string;
+    this.giverName =
+      ((this.$route as Router).query["giverName"] as string) || "";
+    this.hideBackButton =
+      (this.$route as Router).query["hideBackButton"] === "true";
+    this.message = ((this.$route as Router).query["message"] as string) || "";
+    // find any offer ID
+    const fulfills = this.prevCredToEdit?.claim?.fulfills;
+    const fulfillsArray = Array.isArray(fulfills)
+      ? fulfills
+      : fulfills
+        ? [fulfills]
+        : [];
+    const offer = fulfillsArray.find((rec) => rec.claimType === "Offer");
+    this.offerId = ((this.$route as Router).query["offerId"] ||
+      offer?.identifier ||
+      this.offerId) as string;
+
+    // find any project ID
+    const project = fulfillsArray.find((rec) => rec.claimType === "PlanAction");
+    this.projectId = ((this.$route as Router).query["projectId"] ||
+      project?.identifier ||
+      this.projectId) as string;
+
+    this.recipientDid = ((this.$route as Router).query["recipientDid"] ||
+      this.prevCredToEdit?.claim?.recipient?.identifier) as string;
+    this.recipientName =
+      ((this.$route as Router).query["recipientName"] as string) || "";
+    this.unitCode = ((this.$route as Router).query["unitCode"] ||
+      this.prevCredToEdit?.claim?.object?.unitCode ||
+      this.unitCode) as string;
 
     this.imageUrl =
-      (this.$route.query.imageUrl as string) ||
+      ((this.$route as Router).query["imageUrl"] as string) ||
+      this.prevCredToEdit?.claim?.image ||
       localStorage.getItem("imageUrl") ||
-      "";
+      this.imageUrl;
 
     // this is an endpoint for sharing project info to highlight something given
     // https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target
-    if (this.$route.query.shareTitle) {
-      this.description = this.$route.query.shareTitle as string;
-    }
-    if (this.$route.query.shareText) {
+    if ((this.$route as Router).query["shareTitle"]) {
       this.description =
-        (this.description ? this.description + " " : "") +
-        (this.$route.query.shareText as string);
+        ((this.$route as Router).query["shareTitle"] as string) +
+        (this.description ? "\n" + this.description : "");
     }
-    if (this.$route.query.shareUrl) {
-      this.imageUrl = this.$route.query.shareUrl as string;
+    if ((this.$route as Router).query["shareText"]) {
+      this.description =
+        (this.description ? this.description + "\n" : "") +
+        ((this.$route as Router).query["shareText"] as string);
+    }
+    if ((this.$route as Router).query["shareUrl"]) {
+      this.imageUrl = (this.$route as Router).query["shareUrl"] as string;
     }
 
     try {
@@ -344,16 +400,16 @@ export default class GiftedDetails extends Vue {
 
   cancel() {
     this.deleteImage(); // not awaiting, so they'll go back immediately
-    if (this.destinationNameAfter) {
-      this.$router.push({ name: this.destinationNameAfter });
+    if (this.destinationPathAfter) {
+      (this.$router as Router).push({ path: this.destinationPathAfter });
     } else {
-      this.$router.back();
+      (this.$router as Router).back();
     }
   }
 
   cancelBack() {
     this.deleteImage(); // not awaiting, so they'll go back immediately
-    this.$router.back();
+    (this.$router as Router).back();
   }
 
   openImageDialog() {
@@ -380,16 +436,12 @@ export default class GiftedDetails extends Vue {
       return;
     }
     try {
-      const token = await accessToken(this.activeDid);
+      const headers = await getHeaders(this.activeDid);
       const response = await this.axios.delete(
         DEFAULT_IMAGE_API_SERVER +
           "/image/" +
           encodeURIComponent(this.imageUrl),
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        },
+        { headers },
       );
       if (response.status === 204) {
         // don't bother with a notification
@@ -552,20 +604,40 @@ export default class GiftedDetails extends Vue {
         ? this.recipientDid
         : undefined;
       const projectId = this.givenToProject ? this.projectId : undefined;
-      const result = await createAndSubmitGive(
-        this.axios,
-        this.apiServer,
-        this.activeDid,
-        this.giverDid,
-        recipientDid,
-        this.description,
-        parseFloat(this.amountInput),
-        this.unitCode,
-        projectId,
-        this.offerId,
-        this.isTrade,
-        this.imageUrl,
-      );
+      let result;
+      if (this.prevCredToEdit) {
+        // don't create from a blank one in case some properties were set from a different interface
+        result = await editAndSubmitGive(
+          this.axios,
+          this.apiServer,
+          this.prevCredToEdit,
+          this.activeDid,
+          this.giverDid,
+          recipientDid,
+          this.description,
+          parseFloat(this.amountInput),
+          this.unitCode,
+          projectId,
+          this.offerId,
+          this.isTrade,
+          this.imageUrl,
+        );
+      } else {
+        result = await createAndSubmitGive(
+          this.axios,
+          this.apiServer,
+          this.activeDid,
+          this.giverDid,
+          recipientDid,
+          this.description,
+          parseFloat(this.amountInput),
+          this.unitCode,
+          projectId,
+          this.offerId,
+          this.isTrade,
+          this.imageUrl,
+        );
+      }
 
       if (
         result.type === "error" ||
@@ -593,10 +665,10 @@ export default class GiftedDetails extends Vue {
           5000,
         );
         localStorage.removeItem("imageUrl");
-        if (this.destinationNameAfter) {
-          this.$router.push({ name: this.destinationNameAfter });
+        if (this.destinationPathAfter) {
+          (this.$router as Router).push({ path: this.destinationPathAfter });
         } else {
-          this.$router.back();
+          (this.$router as Router).back();
         }
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -621,7 +693,9 @@ export default class GiftedDetails extends Vue {
   constructGiveParam() {
     const recipientDid = this.givenToRecipient ? this.recipientDid : undefined;
     const projectId = this.givenToProject ? this.projectId : undefined;
-    const giveClaim = constructGive(
+    // const giveClaim = constructGive(
+    const giveClaim = hydrateGive(
+      this.prevCredToEdit?.claim as GiveVerifiableCredential,
       this.giverDid,
       recipientDid,
       this.description,
@@ -631,6 +705,7 @@ export default class GiftedDetails extends Vue {
       this.offerId,
       this.isTrade,
       this.imageUrl,
+      this.prevCredToEdit?.id as string,
     );
     const claimStr = JSON.stringify(giveClaim);
     return claimStr;

src/views/HelpView.vue

@@ -24,23 +24,22 @@
     <!-- eslint-disable prettier/prettier -->
     <div>
       <p>
-        This app is a window into data that you and your friends own, focused on
-        gifts and collaboration.
+        This app focuses on gifts & gratitude, using them to build cool things with your network.
       </p>
 
       <h2 class="text-xl font-semibold">What is the idea here?</h2>
       <p>
         We are building networks of people who want to grow a giving society.
-        First of all, you can see what people have given, and also recognize
-        gifts you've seen, in a way that leaves a permanent record -- one that
-        came from you, and the recipient can prove it was for them. This is
+        First of all, let's build gratitude: see what people have given, and recognize
+        gifts you've seen. This is done in a way that leaves a permanent record -- one that
+        came from you, and one that the recipient can prove it was for them. This is
         personally gratifying, but it extends to broader work: volunteers get
         confirmation of activity, and selectively show off their contributions
         and network.
       </p>
       <p>
-        You highlight giving and also offer help to ideas -- which could be
-        conditional on others' willingness to help, too.
+        With this, you highlight giving and also offer help --
+        which could be conditional on others' willingness to help, too.
         You can record your own ideas and invite others to collaborate.
       </p>
       <p>
@@ -59,23 +58,15 @@
         <fa icon="users" class="fa-fw" /> page. After they register you, you can
         select any contact on the home page (or "anonymous") and record your
         appreciation for... whatever. The main goal is to record what people
-        have given you, to grow giving economies. Each claim is recorded on a
+        have given you, to grow giving economies. You can also record your own
+        ideas for projects. Each claim is recorded on a
         custom ledger. The day after being registered, you'll be able to able to
-        register others; later, you can create projects, too.
+        register others, too.
       </p>
       <p>
-        Note that there are rate limits to how many others you can register,
-        so it may take some time to register everyone you want. Take your time...
-        make it an opportunity to get to know their projects, and show your own.
-      </p>
-
-      <h2 class="text-xl font-semibold">
-        I had an identifier, but I reinstalled and I got a new one automatically.
-        How do I restore my old one?
-      </h2>
-      <p>
-        Go
-        <router-link class="text-blue-500" to="/import-account">import your identifier</router-link>.
+        Note that there are limits to how many others you can register.
+        Take your time to bring people on... make it an opportunity to get to
+        know their projects, and to show your own.
       </p>
 
       <h2 class="text-xl font-semibold">How do I add someone else?</h2>
@@ -91,11 +82,20 @@
         and paste it into the text box on the Contacts <fa icon="users" class="fa-fw" /> page.
       </p>
 
+      <h2 class="text-xl font-semibold">
+        I had an identifier, but I reinstalled and I got a new one automatically.
+        How do I restore my old one?
+      </h2>
+      <p>
+        Go
+        <router-link class="text-blue-500" to="/import-account">import your identifier</router-link>.
+      </p>
+
       <h2 class="text-xl font-semibold">How do I backup all my data?</h2>
       <p>
-        There are three sets of data to backup: the identifier secrets;
-        the non-public textual data that isn't quite a secret such as settings and contacts;
-        the non-public image for yourself; and the data that you have sent to the public.
+        There are four sets of data to backup: the identifier secrets;
+        the private text data that isn't quite as secret such as settings and contacts;
+        the private image for yourself; and the data that you have sent to the public.
       </p>
 
       <div class="px-4">
@@ -200,6 +200,9 @@
         <li class="list-disc list-outside ml-4">
           Mobile
           <ul>
+            <li class="list-disc list-outside ml-4">
+              Home Screen: hold down on the icon, and choose to delete it
+            </li>
             <li class="list-disc list-outside ml-4">
               Chrome: Settings -> Privacy and Security -> Clear Browsing Data
             </li>
@@ -378,9 +381,9 @@
           class="text-blue-500 ml-2"
         >
           bc1q90v4ted6cpt63tjfh2lvd5xzfc67sd4g9w8xma
-          <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+          <fa v-show="!showDidCopy" icon="copy" class="text-slate-400 fa-fw" />
         </button>
-        <span v-show="showDidCopy">Copied</span>
+        <span v-show="showDidCopy" class="ml-2 text-sm text-green-500">Copied</span>
         For other donations, contact us.
       </p>
 

src/views/HomeView.vue

@@ -77,58 +77,29 @@
 
       <div v-else>
         <!-- !isCreatingIdentifier -->
-        <div
-          v-if="!activeDid"
-          class="bg-amber-200 rounded-md text-center px-4 py-3 mb-4"
-        >
-          <div v-if="PASSKEYS_ENABLED">
-            <p class="text-lg mb-3">
-              Choose how to see info from your contacts or share contributions:
-            </p>
-            <div class="flex justify-between">
-              <button
-                class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
-                @click="generateIdentifier()"
-              >
-                Let me start the easiest (with a passkey).
-              </button>
-              <router-link
-                :to="{ name: 'start' }"
-                class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
-              >
-                Give me all the options.
-              </router-link>
-            </div>
-          </div>
-          <div v-else>
-            <p class="text-lg mb-3">
-              To recognize giving or collaborate, have someone register you:
-            </p>
-            <router-link
-              :to="{ name: 'contact-qr' }"
-              class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
-            >
-              Share your contact info.
-            </router-link>
-          </div>
-        </div>
-
-        <div v-else class="mb-4">
-          <!-- activeDid -->
-
+        <!-- They should have an identifier, even if it's an auto-generated one that they'll never use. -->
+        <div class="mb-4">
           <div
             v-if="!isRegistered"
             class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
           >
             <!-- activeDid && !isRegistered -->
-            Someone must register you before you can give kudos or make offers
-            or create projects... basically before doing anything.
+            To share, someone must register you.
             <router-link
               :to="{ name: 'contact-qr' }"
               class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
             >
-              Show Them Your Identifier Info
+              Show Them {{ PASSKEYS_ENABLED ? "Default" : "Your" }} Identifier
+              Info
             </router-link>
+            <div v-if="PASSKEYS_ENABLED" class="flex justify-end w-full">
+              <router-link
+                :to="{ name: 'start' }"
+                class="block text-right text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
+              >
+                See all your options first
+              </router-link>
+            </div>
           </div>
 
           <div v-else>
@@ -340,7 +311,11 @@ import FeedFilters from "@/components/FeedFilters.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
-import { AppString, NotificationIface, PASSKEYS_ENABLED } from "@/constants/app";
+import {
+  AppString,
+  NotificationIface,
+  PASSKEYS_ENABLED,
+} from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import {
@@ -359,7 +334,10 @@ import {
   GiverReceiverInputInfo,
   GiveSummaryRecord,
 } from "@/libs/endorserServer";
-import { registerSaveAndActivatePasskey } from "@/libs/util";
+import {
+  generateSaveAndActivateIdentity,
+  registerSaveAndActivatePasskey,
+} from "@/libs/util";
 
 interface GiveRecordWithContactInfo extends GiveSummaryRecord {
   giver: {
@@ -423,7 +401,14 @@ export default class HomeView extends Vue {
     try {
       await accountsDB.open();
       const allAccounts = await accountsDB.accounts.toArray();
-      this.allMyDids = allAccounts.map((acc) => acc.did);
+      if (allAccounts.length > 0) {
+        this.allMyDids = allAccounts.map((acc) => acc.did);
+      } else {
+        this.isCreatingIdentifier = true;
+        const newDid = await generateSaveAndActivateIdentity();
+        this.isCreatingIdentifier = false;
+        this.allMyDids = [newDid];
+      }
 
       await db.open();
       const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
@@ -451,7 +436,7 @@ export default class HomeView extends Vue {
           if (resp.status === 200) {
             // we just needed to know that they're registered
             await db.open();
-            db.settings.update(MASTER_SETTINGS_KEY, {
+            await db.settings.update(MASTER_SETTINGS_KEY, {
               isRegistered: true,
             });
             this.isRegistered = true;
@@ -481,7 +466,7 @@ export default class HomeView extends Vue {
     }
   }
 
-  async generateIdentifier() {
+  async generatePasskeyIdentifier() {
     this.isCreatingIdentifier = true;
     const account = await registerSaveAndActivatePasskey(
       AppString.APP_NAME + (this.givenName ? " - " + this.givenName : ""),
@@ -613,7 +598,7 @@ export default class HomeView extends Vue {
             this.feedLastViewedClaimId < results.data[0].jwtId
           ) {
             await db.open();
-            db.settings.update(MASTER_SETTINGS_KEY, {
+            await db.settings.update(MASTER_SETTINGS_KEY, {
               lastViewedClaimId: results.data[0].jwtId,
             });
           }

src/views/IdentitySwitcherView.vue

@@ -99,6 +99,7 @@
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import { NotificationIface } from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
@@ -155,7 +156,7 @@ export default class IdentitySwitcherView extends Vue {
     await db.settings.update(MASTER_SETTINGS_KEY, {
       activeDid: did,
     });
-    this.$router.push({ name: "account" });
+    (this.$router as Router).push({ name: "account" });
   }
 
   async deleteAccount(id: string) {

src/views/ImportAccountView.vue

@@ -77,6 +77,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import { NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
@@ -110,7 +111,7 @@ export default class ImportAccountView extends Vue {
   }
 
   public onCancelClick() {
-    this.$router.back();
+    (this.$router as Router).back();
   }
 
   public async fromMnemonic() {
@@ -143,10 +144,10 @@ export default class ImportAccountView extends Vue {
 
       // record that as the active DID
       await db.open();
-      db.settings.update(MASTER_SETTINGS_KEY, {
+      await db.settings.update(MASTER_SETTINGS_KEY, {
         activeDid: newId.did,
       });
-      this.$router.push({ name: "account" });
+      (this.$router as Router).push({ name: "account" });
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       console.error("Error saving mnemonic & updating settings:", err);

src/views/ImportDerivedAccountView.vue

@@ -70,6 +70,8 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
+
 import {
   DEFAULT_ROOT_DERIVATION_PATH,
   deriveAddress,
@@ -100,7 +102,7 @@ export default class ImportAccountView extends Vue {
   }
 
   public onCancelClick() {
-    this.$router.back();
+    (this.$router as Router).back();
   }
 
   public switchAccount(did: string) {
@@ -124,9 +126,11 @@ export default class ImportAccountView extends Vue {
       }
     });
     // increment the last number in that max derivation path
-    const newDerivPath = nextDerivationPath(accountWithMaxDeriv.derivationPath);
+    const newDerivPath = nextDerivationPath(
+      accountWithMaxDeriv.derivationPath as string,
+    );
 
-    const mne: string = accountWithMaxDeriv.mnemonic;
+    const mne: string = accountWithMaxDeriv.mnemonic as string;
 
     const [address, privateHex, publicHex] = deriveAddress(mne, newDerivPath);
 
@@ -144,10 +148,10 @@ export default class ImportAccountView extends Vue {
 
       // record that as the active DID
       await db.open();
-      db.settings.update(MASTER_SETTINGS_KEY, {
+      await db.settings.update(MASTER_SETTINGS_KEY, {
         activeDid: newId.did,
       });
-      this.$router.push({ name: "account" });
+      (this.$router as Router).push({ name: "account" });
     } catch (err) {
       console.error("Error saving mnemonic & updating settings:", err);
     }

src/views/NewEditAccountView.vue

@@ -45,6 +45,8 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
+
 import { db } from "@/db/index";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 
@@ -63,16 +65,16 @@ export default class NewEditAccountView extends Vue {
       (settings?.lastName ? ` ${settings.lastName}` : ""); // deprecated, pre v 0.1.3
   }
 
-  onClickSaveChanges() {
-    db.settings.update(MASTER_SETTINGS_KEY, {
+  async onClickSaveChanges() {
+    await db.settings.update(MASTER_SETTINGS_KEY, {
       firstName: this.givenName,
       lastName: "", // deprecated, pre v 0.1.3
     });
-    this.$router.back();
+    (this.$router as Router).back();
   }
 
   onClickCancel() {
-    this.$router.back();
+    (this.$router as Router).back();
   }
 }
 </script>

src/views/NewEditProjectView.vue

@@ -74,6 +74,9 @@
       v-model="fullClaim.description"
       maxlength="5000"
     ></textarea>
+    <div class="text-xs text-slate-500 italic -mt-3 mb-4">
+      If you want to be contacted, be sure to include your contact information.
+    </div>
     <div class="text-xs text-slate-500 italic -mt-3 mb-4">
       {{ fullClaim.description?.length }}/5000 max. characters
     </div>
@@ -173,19 +176,20 @@
 
 <script lang="ts">
 import "leaflet/dist/leaflet.css";
-import { AxiosError } from "axios";
+import { AxiosError, AxiosRequestHeaders } from "axios";
 import { DateTime } from "luxon";
 import { Component, Vue } from "vue-facing-decorator";
 import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
+import { Router } from "vue-router";
 
 import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { accessToken } from "@/libs/crypto";
 import {
   createEndorserJwtVcFromClaim,
+  getHeaders,
   PlanVerifiableCredential,
 } from "@/libs/endorserServer";
 import { useAppStore } from "@/store/app";
@@ -250,11 +254,7 @@ export default class NewEditProjectView extends Vue {
       this.apiServer +
       "/api/claim/byHandle/" +
       encodeURIComponent(this.projectId);
-    const token = await accessToken(userDid);
-    const headers = {
-      "Content-Type": "application/json",
-      Authorization: "Bearer " + token,
-    };
+    const headers = await getHeaders(userDid);
 
     try {
       const resp = await this.axios.get(url, { headers });
@@ -309,16 +309,12 @@ export default class NewEditProjectView extends Vue {
       return;
     }
     try {
-      const token = await accessToken(this.activeDid);
+      const headers = getHeaders(this.activeDid) as AxiosRequestHeaders;
       const response = await this.axios.delete(
         DEFAULT_IMAGE_API_SERVER +
           "/image/" +
           encodeURIComponent(this.imageUrl),
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        },
+        { headers },
       );
       if (response.status === 204) {
         // don't bother with a notification
@@ -418,11 +414,7 @@ export default class NewEditProjectView extends Vue {
 
     const payload = JSON.stringify({ jwtEncoded: vcJwt });
     const url = this.apiServer + "/api/v2/claim";
-    const token = await accessToken(issuerDid);
-    const headers = {
-      "Content-Type": "application/json",
-      Authorization: "Bearer " + token,
-    };
+    const headers = await getHeaders(issuerDid);
 
     try {
       const resp = await this.axios.post(url, payload, { headers });
@@ -432,7 +424,7 @@ export default class NewEditProjectView extends Vue {
         useAppStore()
           .setProjectId(resp.data.success.handleId)
           .then(() => {
-            this.$router.push({ name: "project" });
+            (this.$router as Router).push({ name: "project" });
           });
       } else {
         console.error(
@@ -530,7 +522,7 @@ export default class NewEditProjectView extends Vue {
   }
 
   public onCancelClick() {
-    this.$router.back();
+    (this.$router as Router).back();
   }
 }
 </script>

src/views/NewIdentifierView.vue

@@ -54,6 +54,8 @@
 <script lang="ts">
 import "dexie-export-import";
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
+
 import { generateSaveAndActivateIdentity } from "@/libs/util";
 import QuickNav from "@/components/QuickNav.vue";
 
@@ -65,7 +67,7 @@ export default class NewIdentifierView extends Vue {
     await generateSaveAndActivateIdentity();
     this.loading = false;
     setTimeout(() => {
-      this.$router.push({ name: "home" });
+      (this.$router as Router).push({ name: "home" });
     }, 1000);
   }
 }

src/views/ProjectViewView.vue

@@ -404,6 +404,7 @@
 <script lang="ts">
 import { AxiosError } from "axios";
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import OfferDialog from "@/components/OfferDialog.vue";
@@ -416,7 +417,6 @@ import { accountsDB, db } from "@/db/index";
 import { Account } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
-import { accessToken } from "@/libs/crypto";
 import * as libsUtil from "@/libs/util";
 import {
   BLANK_GENERIC_SERVER_RECORD,
@@ -424,7 +424,9 @@ import {
   getHeaders,
   GiverReceiverInputInfo,
   GiveSummaryRecord,
+  GiveVerifiableCredential,
   OfferSummaryRecord,
+  OfferVerifiableCredential,
   PlanSummaryRecord,
 } from "@/libs/endorserServer";
 import * as serverUtil from "@/libs/endorserServer";
@@ -497,7 +499,7 @@ export default class ProjectViewView extends Vue {
     const route = {
       name: "new-edit-project",
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   // Isn't there a better way to make this available to the template?
@@ -583,11 +585,6 @@ export default class ProjectViewView extends Vue {
 
     this.loadPlanFulfillersTo();
 
-    // now load fulfilled-by, a single project
-    if (this.activeDid) {
-      const token = await accessToken(this.activeDid);
-      headers["Authorization"] = "Bearer " + token;
-    }
     const fulfilledByUrl =
       this.apiServer +
       "/api/v2/report/planFulfilledByPlan?planHandleId=" +
@@ -826,7 +823,7 @@ export default class ProjectViewView extends Vue {
     const route = {
       path: "/project/" + encodeURIComponent(projectId),
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
     this.loadProject(projectId, this.activeDid);
   }
 
@@ -862,18 +859,18 @@ export default class ProjectViewView extends Vue {
     const route = {
       name: "contact-gift",
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   onClickLoadClaim(jwtId: string) {
     const route = {
       path: "/claim/" + encodeURIComponent(jwtId),
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   checkIsFulfillable(offer: OfferSummaryRecord) {
-    const offerRecord: GenericCredWrapper = {
+    const offerRecord: GenericCredWrapper<OfferVerifiableCredential> = {
       ...BLANK_GENERIC_SERVER_RECORD,
       claim: offer.fullClaim,
       claimType: "Offer",
@@ -883,7 +880,7 @@ export default class ProjectViewView extends Vue {
   }
 
   onClickFulfillGiveToOffer(offer: OfferSummaryRecord) {
-    const offerRecord: GenericCredWrapper = {
+    const offerRecord: GenericCredWrapper<OfferVerifiableCredential> = {
       ...BLANK_GENERIC_SERVER_RECORD,
       claim: offer.fullClaim,
       issuer: offer.offeredByDid,
@@ -928,7 +925,7 @@ export default class ProjectViewView extends Vue {
   }
 
   checkIsConfirmable(give: GiveSummaryRecord) {
-    const giveDetails: GenericCredWrapper = {
+    const giveDetails: GenericCredWrapper<GiveVerifiableCredential> = {
       ...BLANK_GENERIC_SERVER_RECORD,
       claim: give.fullClaim,
       claimType: "GiveAction",

src/views/ProjectsView.vue

@@ -229,17 +229,21 @@
 <script lang="ts">
 import { AxiosRequestConfig } from "axios";
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import { NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { accessToken } from "@/libs/crypto";
 import * as libsUtil from "@/libs/util";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
 import TopMessage from "@/components/TopMessage.vue";
-import { OfferSummaryRecord, PlanData } from "@/libs/endorserServer";
+import {
+  getHeaders,
+  OfferSummaryRecord,
+  PlanData,
+} from "@/libs/endorserServer";
 import EntityIcon from "@/components/EntityIcon.vue";
 
 @Component({
@@ -293,13 +297,9 @@ export default class ProjectsView extends Vue {
    * @param url the url used to fetch the data
    * @param token Authorization token
    **/
-  async projectDataLoader(url: string, token: string) {
-    const headers: { [key: string]: string } = {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
-    };
-
+  async projectDataLoader(url: string) {
     try {
+      const headers = await getHeaders(this.activeDid);
       this.isLoading = true;
       const resp = await this.axios.get(url, { headers } as AxiosRequestConfig);
       if (resp.status === 200 && resp.data.data) {
@@ -353,8 +353,7 @@ export default class ProjectsView extends Vue {
    **/
   async loadProjects(activeDid?: string, urlExtra: string = "") {
     const url = `${this.apiServer}/api/v2/report/plansByIssuer?${urlExtra}`;
-    const token: string = await accessToken(activeDid);
-    await this.projectDataLoader(url, token);
+    await this.projectDataLoader(url);
   }
 
   /**
@@ -366,7 +365,7 @@ export default class ProjectsView extends Vue {
     const route = {
       path: "/project/" + encodeURIComponent(id),
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   /**
@@ -377,14 +376,14 @@ export default class ProjectsView extends Vue {
     const route = {
       name: "new-edit-project",
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   onClickLoadClaim(jwtId: string) {
     const route = {
       path: "/claim/" + encodeURIComponent(jwtId),
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   /**
@@ -392,11 +391,8 @@ export default class ProjectsView extends Vue {
    * @param url the url used to fetch the data
    * @param token Authorization token
    **/
-  async offerDataLoader(url: string, token: string) {
-    const headers: { [key: string]: string } = {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
-    };
+  async offerDataLoader(url: string) {
+    const headers = getHeaders(this.activeDid);
 
     try {
       this.isLoading = true;
@@ -454,8 +450,7 @@ export default class ProjectsView extends Vue {
    **/
   async loadOffers(issuerDid?: string, urlExtra: string = "") {
     const url = `${this.apiServer}/api/v2/report/offers?offeredByDid=${issuerDid}${urlExtra}`;
-    const token: string = await accessToken(issuerDid);
-    await this.offerDataLoader(url, token);
+    await this.offerDataLoader(url);
   }
 
   public computedOfferTabClassNames() {

src/views/QuickActionBvcEndView.vue

@@ -139,6 +139,7 @@ import axios from "axios";
 import { DateTime } from "luxon";
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
@@ -174,7 +175,7 @@ export default class QuickActionBvcBeginView extends Vue {
   apiServer = "";
   claimCountByUser = 0;
   claimCountWithHidden = 0;
-  claimsToConfirm: GenericCredWrapper[] = [];
+  claimsToConfirm: GenericCredWrapper<GenericVerifiableCredential>[] = [];
   claimsToConfirmSelected: string[] = [];
   description = "breakfast";
   loadingConfirms = true;
@@ -227,7 +228,8 @@ export default class QuickActionBvcBeginView extends Vue {
       }
       await response.json().then((data) => {
         const dataByOthers = R.reject(
-          (claim: GenericCredWrapper) => claim.issuer === this.activeDid,
+          (claim: GenericCredWrapper<GenericVerifiableCredential>) =>
+            claim.issuer === this.activeDid,
           data,
         );
         const dataByOthersWithoutHidden = R.reject(
@@ -258,7 +260,7 @@ export default class QuickActionBvcBeginView extends Vue {
     const route = {
       path: "/claim/" + encodeURIComponent(jwtId),
     };
-    this.$router.push(route);
+    (this.$router as Router).push(route);
   }
 
   async record() {

src/views/SearchAreaView.vue

@@ -105,6 +105,7 @@ import {
   LRectangle,
   LTileLayer,
 } from "@vue-leaflet/vue-leaflet";
+import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
@@ -198,7 +199,7 @@ export default class DiscoverView extends Vue {
           },
         };
         await db.open();
-        db.settings.update(MASTER_SETTINGS_KEY, {
+        await db.settings.update(MASTER_SETTINGS_KEY, {
           searchBoxes: [newSearchBox],
         });
         this.searchBox = newSearchBox;
@@ -213,7 +214,7 @@ export default class DiscoverView extends Vue {
           },
           7000,
         );
-        this.$router.back();
+        (this.$router as Router).back();
       } catch (err) {
         this.$notify(
           {
@@ -245,7 +246,7 @@ export default class DiscoverView extends Vue {
   public async forgetSearchBox() {
     try {
       await db.open();
-      db.settings.update(MASTER_SETTINGS_KEY, {
+      await db.settings.update(MASTER_SETTINGS_KEY, {
         searchBoxes: [],
         filterFeedByNearby: false,
       });

src/views/SeedBackupView.vue

@@ -33,30 +33,65 @@
       <p class="text-center mb-4">
         <b class="text-red-600">BEWARE!</b> Anyone who has this seed phrase will
         be able impersonate you and take over any digital holdings based on it.
-        Reveal it when you are somewhere only you can see your screen, and
-        record it somewhere only you have access.
-        <i>Don't take a screenshot or send it to any online service.</i>
+        Reveal it when you are somewhere private, when only you can see your
+        screen, and record it somewhere only you have access. A password manager
+        is a good idea, and so is a piece of paper in a vault.
+        <i
+          >We recommend you do NOT take a screenshot or send it to any online
+          service.</i
+        >
       </p>
 
       <p v-if="numAccounts > 1">
         <b class="text-orange-600">Note:</b> You have more than one identifier
         stored in this browser. If they are all based on the same seed as the
-        current identifier, this one backup is sufficient; however, if you have
-        different seeds for other identifiers, you will have to back them up
-        separately.
+        current identifier, this one backup is sufficient, as long as you also
+        record the derivation path. However, if you have different seeds for
+        other identifiers, you will have to back them up separately.
       </p>
 
       <div class="bg-slate-100 rounded-md overflow-hidden p-4 mb-4">
+        <p v-if="showSeed" class="text-center text-slate-700 mt-2">
+          {{ activeAccount.mnemonic }}
+          <button
+            v-show="!showCopiedSeed"
+            @click="
+              doCopyTwoSecRedo(
+                activeAccount.mnemonic as string,
+                () => (showCopiedSeed = !showCopiedSeed),
+              )
+            "
+          >
+            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+          </button>
+          <span v-show="showCopiedSeed" class="text-sm text-green-500">
+            Copied
+          </span>
+          <br />
+          <br />
+          Derivation Path: {{ activeAccount.derivationPath }}
+          <button
+            v-show="!showCopiedDeri"
+            @click="
+              doCopyTwoSecRedo(
+                activeAccount.derivationPath as string,
+                () => (showCopiedDeri = !showCopiedDeri),
+              )
+            "
+          >
+            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+          </button>
+          <span v-show="showCopiedDeri" class="text-sm text-green-500"
+            >Copied</span
+          >
+        </p>
         <button
+          v-else
           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="showSeedPhrase"
+          @click="showSeed = true"
         >
           Reveal my Seed Phrase
         </button>
-
-        <p v-if="showSeed" class="text-center text-slate-700 mt-2">
-          {{ activeAccount.mnemonic }}
-        </p>
       </div>
     </div>
     <div v-else>You do not have an active identifier.</div>
@@ -64,8 +99,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
 import * as R from "ramda";
+import { Component, Vue } from "vue-facing-decorator";
+import { useClipboard } from "@vueuse/core";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
@@ -79,6 +115,8 @@ export default class SeedBackupView extends Vue {
 
   activeAccount: Account | null | undefined = null;
   numAccounts = 0;
+  showCopiedDeri = false;
+  showCopiedSeed = false;
   showSeed = false;
 
   // 'created' hook runs when the Vue instance is first created
@@ -106,8 +144,12 @@ export default class SeedBackupView extends Vue {
     }
   }
 
-  showSeedPhrase() {
-    this.showSeed = true;
+  // call fn, copy text to the clipboard, then redo fn after 2 seconds
+  doCopyTwoSecRedo(text: string, fn: () => void) {
+    fn();
+    useClipboard()
+      .copy(text)
+      .then(() => setTimeout(fn, 2000));
   }
 }
 </script>

src/views/SharedPhotoView.vue

@@ -55,6 +55,7 @@
 <script lang="ts">
 import axios from "axios";
 import { Component, Vue } from "vue-facing-decorator";
+import { RouteLocationRaw, Router } from "vue-router";
 
 import PhotoDialog from "@/components/PhotoDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
@@ -65,7 +66,7 @@ import {
 } from "@/constants/app";
 import { db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { accessToken } from "@/libs/crypto";
+import { getHeaders } from "@/libs/endorserServer";
 
 @Component({ components: { PhotoDialog, QuickNav } })
 export default class SharedPhotoView extends Vue {
@@ -92,7 +93,9 @@ export default class SharedPhotoView extends Vue {
         // clear the temp image
         db.temp.delete("shared-photo");
 
-        this.imageFileName = this.$route.query.fileName as string;
+        this.imageFileName = (this.$route as Router).query[
+          "fileName"
+        ] as string;
       }
     } catch (err: unknown) {
       console.error("Got an error loading an identifier:", err);
@@ -111,15 +114,17 @@ export default class SharedPhotoView extends Vue {
   async recordGift() {
     await this.sendToImageServer("GiveAction").then((url) => {
       if (url) {
-        this.$router.push({
+        const route = {
           name: "gifted-details",
+          // this might be wrong since "name" goes with params, but it works so test well when you change it
           query: {
-            destinationNameAfter: "home",
+            destinationPathAfter: "/home",
             hideBackButton: true,
             imageUrl: url,
             recipientDid: this.activeDid,
           },
-        });
+        } as RouteLocationRaw;
+        (this.$router as Router).push(route);
       }
     });
   }
@@ -127,10 +132,10 @@ export default class SharedPhotoView extends Vue {
   recordProfile() {
     (this.$refs.photoDialog as PhotoDialog).open(
       async (imgUrl) => {
-        db.settings.update(MASTER_SETTINGS_KEY, {
+        await db.settings.update(MASTER_SETTINGS_KEY, {
           profileImageUrl: imgUrl,
         });
-        this.$router.push({ name: "account" });
+        (this.$router as Router).push({ name: "account" });
       },
       IMAGE_TYPE_PROFILE,
       true,
@@ -142,7 +147,7 @@ export default class SharedPhotoView extends Vue {
   async cancel() {
     this.imageBlob = undefined;
     this.imageFileName = undefined;
-    this.$router.push({ name: "home" });
+    (this.$router as Router).push({ name: "home" });
   }
 
   async sendToImageServer(imageType: string) {
@@ -151,10 +156,7 @@ export default class SharedPhotoView extends Vue {
     let result;
     try {
       // send the image to the server
-      const token = await accessToken(this.activeDid);
-      const headers = {
-        Authorization: "Bearer " + token,
-      };
+      const headers = await getHeaders(this.activeDid);
       const formData = new FormData();
       formData.append(
         "image",

src/views/StartView.vue

@@ -27,7 +27,7 @@
         <p class="text-center text-xl font-light">
           How do you want to create this identifier?
         </p>
-        <p class="text-center font-light mt-6">
+        <p v-if="PASSKEYS_ENABLED" class="text-center font-light mt-6">
           A <strong>passkey</strong> is easy to manage, though it is less
           interoperable with other systems for advanced uses.
           <a
@@ -49,6 +49,7 @@
         </p>
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-4">
           <a
+            v-if="PASSKEYS_ENABLED"
             @click="onClickNewPasskey()"
             class="block w-full text-center text-lg uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2 cursor-pointer"
           >
@@ -87,8 +88,9 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
-import { AppString } from "@/constants/app";
+import { AppString, PASSKEYS_ENABLED } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { registerSaveAndActivatePasskey } from "@/libs/util";
@@ -97,6 +99,8 @@ import { registerSaveAndActivatePasskey } from "@/libs/util";
   components: {},
 })
 export default class StartView extends Vue {
+  PASSKEYS_ENABLED = PASSKEYS_ENABLED;
+
   givenName = "";
   numAccounts = 0;
 
@@ -110,22 +114,22 @@ export default class StartView extends Vue {
   }
 
   public onClickNewSeed() {
-    this.$router.push({ name: "new-identifier" });
+    (this.$router as Router).push({ name: "new-identifier" });
   }
 
   public async onClickNewPasskey() {
     const keyName =
       AppString.APP_NAME + (this.givenName ? " - " + this.givenName : "");
     await registerSaveAndActivatePasskey(keyName);
-    this.$router.push({ name: "account" });
+    (this.$router as Router).push({ name: "account" });
   }
 
   public onClickNo() {
-    this.$router.push({ name: "import-account" });
+    (this.$router as Router).push({ name: "import-account" });
   }
 
   public onClickDerive() {
-    this.$router.push({ name: "import-derive" });
+    (this.$router as Router).push({ name: "import-derive" });
   }
 }
 </script>

src/views/TestView.vue

@@ -242,6 +242,7 @@ import { Buffer } from "buffer/";
 import { Base64URLString } from "@simplewebauthn/types";
 import { ref } from "vue";
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { AppString, NotificationIface } from "@/constants/app";
@@ -254,7 +255,11 @@ import {
   verifyJwtSimplewebauthn,
   verifyJwtWebCrypto,
 } from "@/libs/crypto/vc/passkeyDidPeer";
-import {AccountKeyInfo, getAccount, registerAndSavePasskey} from "@/libs/util";
+import {
+  AccountKeyInfo,
+  getAccount,
+  registerAndSavePasskey,
+} from "@/libs/util";
 
 const inputFileNameRef = ref<Blob>();
 
@@ -345,7 +350,7 @@ export default class Help extends Vue {
             this.userName = DEFAULT_USERNAME;
           },
           onYes: async () => {
-            this.$router.push({ name: "new-edit-account" });
+            (this.$router as Router).push({ name: "new-edit-account" });
           },
           noText: "try again and use " + DEFAULT_USERNAME,
         },

src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string;
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}