Merge branch 'master' into misc2

Reviewed-on: trent_larson/crowd-funder-for-time-pwa#74

CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+
+## [Unreleased]
+
+
+## [0.1.2] - 2023.11.01
+### Added
+- Basics: create ID, record a give, declare a project, search, and get notifications.

README.md

@@ -1,6 +1,9 @@
 # kickstart-for-time-pwa
 
 ## Project setup
+
+We have pkgx.dev set up in package.json, so you can use `dev` to set up the dev environment.
+
 ```
 npm install
 ```
@@ -23,6 +26,12 @@ npm run build
 npm run lint
 ```
 
+## Tests
+
+###
+
+For your own web-push tests, change the 'vapid' URL in App.vue, and install apps on the same domain.
+
 ### Test key contents
 
 See [this page](openssl_signing_console.rst)
@@ -86,15 +95,6 @@ Clear cache for localhost, then go to http://localhost:8080/start
 
 
 
-## Dependencies
-
-See https://tea.xyz
-
-| Project    | Version   |
-| ---------- | --------- |
-| nodejs.org | ^16.0.0   |
-| npmjs.com  | ^8.0.0    |
-
 ## Other
 
 ### Reference Material

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kickstart-for-time-pwa",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -52,6 +52,7 @@
     "vue": "^3.3.4",
     "vue-axios": "^3.5.2",
     "vue-facing-decorator": "^2.1.20",
+    "vue-qrcode-reader": "^5.3.4",
     "vue-router": "^4.2.3",
     "web-did-resolver": "^2.0.27"
   },
@@ -80,5 +81,6 @@
     "prettier": "^3.0.0",
     "tailwindcss": "^3.3.2",
     "typescript": "~5.1.6"
-  }
+  },
+  "pkgx": "node^18 npm^10"
 }

project.task.yaml

@@ -1,15 +1,16 @@
 
 tasks:
 
-- 08 Scan QR code to import into contacts assignee:matthew
-    - SEE - https://github.com/gruhn/vue-qrcode-reader
-
 - in endorser-push-server - mount folder for persistent sqlite DB outside of container
 - test alerts on all pages -- or refactor to new "notify" (since AlertMessage refactoring may require a change, et. ContactQRScanShowView)
-- .2 bug - on contacts view, click on "to" & "from" and nothing happens
 - 40 notifications :
   - push, where we trigger a ServiceWorker(?) in the app to reach out and check for new data assignee:matthew
 
+- 01 bug - we get a 404 when reloading the page anyplace except "/", and it's hard to get back
+- .1 test - make sure that a registration failure (including network failure) doesn't give a success message (which may have happened during board meeting)
+
+- .1 don't allow to even see the claim actions if they're not registered
+
 - 01 Replace Gifted/Give in ContactsView with GiftedDialog assignee:matthew
 
 - 01 fix the Discovery map display to not show on top of bottom icons (and any other UI tweaks on the map flow) assignee-group:ui
@@ -26,17 +27,23 @@ tasks:
 
 - 24 Move to Vite assignee:matthew
 
-- .2 Edit Plan does not have icons across the bottom assignee-group:ui
-- .5 include the hash of the latest commit, and maybe a version
+- .2 fit more icons on home screen, with a "more" button to contacts page if there is more than 2 rows
+- .1 Remove notification alert visuals on home page
+- .5 Add infinite scroll to gifts on the home page
+- .5 bug - search for "Safari" does not find the project, but if already on the "Anywhere" tab it shows all
+- .2 figure out why endorser-mobile search doesn't find recently created PlanAction
+- .1 when creating a plan, select location and then make sure you can deselect on Android
+- .5 include a version, maybe the hash of the latest commit -- figuring out how it works on prod now
 - .5 add link to further project / people when a project pays ahead
 - .5 add project ID to the URL, to make a project publicly-accessible
-- .5 remove edit from project page for projects owned by others
 - .5 fix where user 0 sees no txns from user 1 on contacts page but sees them on list page
 - .2 on ProjectViewView, show different messages for "to" and "from" sections if none exist assignee-group:ui
 - .2 fix static icon to the right on project page (Matthew - I've made "Rotary" into issuer?) assignee:jose assignee-group:ui
 - .2 fix rate limit verbiage (with the new one-per-day allowance) assignee:trent
 - .1 remove the logic to exclude beforeId in list of plans after server has commit 26b25af605e715600d4f12b6416ed9fd7142d164
 - .2 in SeedBackupView, don't load the mnemonic and keep it in memory; only load it when they click "show"
+- .1 Make give description text box into something that expands as they type
+- .1 Make contact info specific to Time Safari - rather pointing at CommunityCred.org
 
 - Discuss whether the remaining tasks are worthwhile before MVP release.
 
@@ -49,6 +56,8 @@ tasks:
 - .2 Show a warning if both giver and recipient are the same (but still allow?) assignee-group:ui
 - 01 Would it look better to shrink the buttons on many pages so they don't expand to the width of the screen? assignee-group:ui
 - .5 Display a more appealing confirmation on the map when erasing the marker assignee-group:ui
+- .5 make a VC details page
+- .1 Add units or different icon to the coins (to distinguish $, BTC, etc)
 
 - contacts v+ :
   - 01 Import all the non-sensitive data (ie. contacts & settings).
@@ -72,6 +81,11 @@ tasks:
   - Test PWA features on Android and iOS.
   blocks: ref:https://raw.githubusercontent.com/trentlarson/lives-of-gifts/master/project.yaml#kickstarter%20for%20time
 
+- .5 show seed phrase in a QR code for transfer to another device
+
+- 32 accept images for projects
+- 32 accept images for contacts
+
 - linking between projects or plans :
   - show total time given to & from a project
   - terminology:

src/constants/app.ts

@@ -1,8 +1,10 @@
 /**
  * Generic strings that could be used throughout the app.
+ *
+ * See also ../libs/veramo/setup.ts
  */
 export enum AppString {
-  APP_NAME = "Kick-Start with Time",
+  APP_NAME = "Time Safari",
 
   PROD_ENDORSER_API_SERVER = "https://api.endorser.ch",
   TEST_ENDORSER_API_SERVER = "https://test-api.endorser.ch",
@@ -10,3 +12,13 @@ export enum AppString {
 
   DEFAULT_ENDORSER_API_SERVER = TEST_ENDORSER_API_SERVER,
 }
+
+/**
+ * See notiwind package
+ */
+export interface NotificationIface {
+  group: string;
+  type: string; // "toast" | "info" | "success" | "warning" | "danger"
+  title: string;
+  text: string;
+}

src/db/tables/contacts.ts

@@ -7,5 +7,5 @@ export interface Contact {
 }
 
 export const ContactsSchema = {
-  contacts: "++did, name, publicKeyBase64, registered, seesMe",
+  contacts: "&did, name, publicKeyBase64, registered, seesMe",
 };

src/libs/crypto/index.ts

@@ -1,5 +1,4 @@
 import { IIdentifier } from "@veramo/core";
-import { DEFAULT_DID_PROVIDER_NAME } from "../veramo/setup";
 import { getRandomBytesSync } from "ethereum-cryptography/random";
 import { entropyToMnemonic } from "ethereum-cryptography/bip39";
 import { wordlist } from "ethereum-cryptography/bip39/wordlists/english";
@@ -7,7 +6,10 @@ import { HDNode } from "@ethersproject/hdnode";
 import * as didJwt from "did-jwt";
 import * as u8a from "uint8arrays";
 
-export const DEFAULT_ROOT_DERIVATION_PATH = "m/76798669'/0'/0'/0'";
+import { ENDORSER_JWT_URL_LOCATION } from "@/libs/endorserServer";
+import { DEFAULT_DID_PROVIDER_NAME } from "../veramo/setup";
+
+export const DEFAULT_ROOT_DERIVATION_PATH = "m/84737769'/0'/0'/0'";
 
 /**
  *
@@ -150,3 +152,24 @@ export function fromJose(signature: string): {
 export function bytesToHex(b: Uint8Array): string {
   return u8a.toString(b, "base16");
 }
+
+/**
+ @return results of uportJwtPayload:
+ { iat: number, iss: string (DID), own: { name, publicEncKey (base64-encoded key) } }
+
+ Note that similar code is also contained in time-safari
+ */
+export const getContactPayloadFromJwtUrl = (jwtUrlText: string) => {
+  let jwtText = jwtUrlText;
+  const endorserContextLoc = jwtText.indexOf(ENDORSER_JWT_URL_LOCATION);
+  if (endorserContextLoc > -1) {
+    jwtText = jwtText.substring(
+      endorserContextLoc + ENDORSER_JWT_URL_LOCATION.length,
+    );
+  }
+
+  // JWT format: { header, payload, signature, data }
+  const jwt = didJwt.decodeJWT(jwtText);
+
+  return jwt.payload;
+};

src/libs/endorserServer.ts

@@ -6,7 +6,12 @@ import { Axios, AxiosResponse } from "axios";
 import { Contact } from "@/db/tables/contacts";
 
 export const SCHEMA_ORG_CONTEXT = "https://schema.org";
+// the object in RegisterAction claims
 export const SERVICE_ID = "endorser.ch";
+// the prefix for the contact URL
+export const CONTACT_URL_PREFIX = "https://endorser.ch";
+// the suffix for the contact URL
+export const ENDORSER_JWT_URL_LOCATION = "/contact?jwt=";
 
 export interface AgreeVerifiableCredential {
   "@context": string;
@@ -111,6 +116,8 @@ export function isHiddenDid(did: string) {
 
 /**
  always returns text, maybe UNNAMED_VISIBLE or UNKNOWN_ENTITY
+
+ Similar logic is found in endorser-mobile.
  **/
 export function didInfo(
   did: string,
@@ -118,14 +125,14 @@ export function didInfo(
   allMyDids: string[],
   contacts: Contact[],
 ): string {
+  if (!did) return "Someone Anonymous";
+
   const myId = R.find(R.equals(did), allMyDids);
   if (myId) return `You${myId !== activeDid ? " (Alt ID)" : ""}`;
 
   const contact = R.find((c) => c.did === did, contacts);
   return contact
-    ? contact.name || "Someone Unnamed in Contacts"
-    : !did
-    ? "Unspecified Person"
+    ? contact.name || "Contact With No Name"
     : isHiddenDid(did)
     ? "Someone Not In Network"
     : "Someone Not In Contacts";

src/libs/veramo/setup.ts

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

src/main.ts

@@ -13,6 +13,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import {
   faArrowLeft,
   faArrowRight,
+  faBan,
   faBurst,
   faCalendar,
   faChevronLeft,
@@ -59,6 +60,7 @@ import {
 library.add(
   faArrowLeft,
   faArrowRight,
+  faBan,
   faBurst,
   faCalendar,
   faChevronLeft,

src/router/index.ts

@@ -58,6 +58,14 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: "contact-amounts" */ "../views/ContactAmountsView.vue"
       ),
   },
+  {
+    path: "/contact-gives",
+    name: "contact-gives",
+    component: () =>
+      import(
+        /* webpackChunkName: "contact-gives" */ "../views/ContactGiftingView.vue"
+      ),
+  },
   {
     path: "/contact-qr",
     name: "contact-qr",
@@ -185,11 +193,11 @@ const routes: Array<RouteRecordRaw> = [
       ),
   },
   {
-    path: "/contact-gives",
-    name: "contact-gives",
+    path: "/test",
+    name: "test",
     component: () =>
       import(
-        /* webpackChunkName: "contact-gives" */ "../views/ContactGiftingView.vue"
+        /* webpackChunkName: "test" */ "../views/TestView.vue"
       ),
   },
 ];

src/test/index.ts

@@ -2,7 +2,7 @@ import axios from "axios";
 import * as didJwt from "did-jwt";
 import { AppString } from "@/constants/app";
 import { db } from "../db";
-import { SERVICE_ID } from "../libs/veramo/setup";
+import { SERVICE_ID } from "../libs/endorserServer";
 import { deriveAddress, newIdentifier } from "../libs/crypto";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 

src/views/AccountViewView.vue

@@ -244,7 +244,9 @@
       </div>
     </div>
 
+    <!-- id used by puppeteer test script -->
     <h3
+      id="advanced"
       class="text-sm uppercase font-semibold mb-3"
       @click="showAdvanced = !showAdvanced"
     >
@@ -277,7 +279,9 @@
       </label>
 
       <div class="flex py-2">
+        <!-- id used by puppeteer test script -->
         <router-link
+          id="switch-identity-link"
           :to="{ name: 'identity-switcher' }"
           class="block text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
         >
@@ -339,11 +343,11 @@ import "dexie-export-import";
 import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 
+import QuickNav from "@/components/QuickNav.vue";
 import { AppString } from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
-import QuickNav from "@/components/QuickNav.vue";
 import { IIdentifier } from "@veramo/core";
 import { ErrorResponse, RateLimits } from "@/libs/endorserServer";
 

src/views/ContactQRScanShowView.vue

@@ -3,7 +3,7 @@
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
     <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4">
       Your Contact Info
     </h1>
 
@@ -17,12 +17,17 @@
       :dotsOptions="{ type: 'square' }"
       class="flex justify-center"
     />
+
+    <h1 class="text-4xl text-center font-light pt-4">Scan Contact Info</h1>
+    <qrcode-stream @detect="onScanDetect" @error="onScanError" />
   </section>
 </template>
 
 <script lang="ts">
 import QRCodeVue3 from "qr-code-generator-vue3";
 import { Component, Vue } from "vue-facing-decorator";
+import { QrcodeStream } from "vue-qrcode-reader";
+
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import * as R from "ramda";
@@ -30,6 +35,10 @@ import { SimpleSigner } from "@/libs/crypto";
 import * as didJwt from "did-jwt";
 import QuickNav from "@/components/QuickNav.vue";
 import { Account } from "@/db/tables/accounts";
+import {
+  CONTACT_URL_PREFIX,
+  ENDORSER_JWT_URL_LOCATION,
+} from "@/libs/endorserServer";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
@@ -43,6 +52,7 @@ interface Notification {
 
 @Component({
   components: {
+    QrcodeStream,
     QRCodeVue3,
     QuickNav,
   },
@@ -112,9 +122,47 @@ export default class ContactQRScanShow extends Vue {
         issuer: identity.did,
         signer: signer,
       });
-      const viewPrefix = "https://endorser.ch/contact?jwt=";
+      const viewPrefix = CONTACT_URL_PREFIX + ENDORSER_JWT_URL_LOCATION;
       this.qrValue = viewPrefix + vcJwt;
     }
   }
+
+  /**
+   *
+   * @param content is the result of a QR scan, an array with one item with a rawValue property
+   */
+  // Unfortunately, there are not typescript definitions for the qrcode-stream component yet.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onScanDetect(content: any) {
+    if (content[0]?.rawValue) {
+      console.log("onDetect", content[0].rawValue);
+      localStorage.setItem("contactEndorserUrl", content[0].rawValue);
+      this.$router.push({ name: "contacts" });
+    } else {
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Invalid Contact QR Code",
+          text: "No QR code detected with contact information.",
+        },
+        -1,
+      );
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onScanError(error: any) {
+    console.log("Scan was invalid:", error);
+    this.$notify(
+      {
+        group: "alert",
+        type: "warning",
+        title: "Invalid Scan",
+        text: "The scan was invalid.",
+      },
+      -1,
+    );
+  }
 }
 </script>

src/views/ContactsView.vue

@@ -20,6 +20,11 @@
 
     <!-- New Contact -->
     <div class="mb-4 flex">
+      <span class="self-center bg-slate-500 text-white px-1.5 py-1 rounded-md">
+        <router-link :to="{ name: 'contact-qr' }">
+          <fa icon="qrcode" class="fa-fw" />
+        </router-link>
+      </span>
       <input
         type="text"
         placeholder="DID, Name, Public Key"
@@ -88,6 +93,16 @@
               class="inline-block align-text-bottom border border-slate-300 rounded"
             ></EntityIcon>
             {{ contact.name || "(no name)" }}
+            <button
+              class="text-sm uppercase bg-slate-500 text-white px-1 rounded-md"
+              @click="
+                contactEdit = contact;
+                contactNewName = contact.name;
+              "
+              title="Edit"
+            >
+              <fa icon="pen" class="fa-fw" />
+            </button>
           </h2>
           <div class="text-sm truncate">{{ contact.did }}</div>
           <div class="text-sm truncate" v-if="contact.publicKeyBase64">
@@ -204,6 +219,31 @@
       </li>
     </ul>
     <p v-else>This identity has no contacts.</p>
+
+    <div v-if="contactEdit !== null" class="dialog-overlay">
+      <div class="dialog">
+        <h1 class="text-xl font-bold text-center mb-4">Edit Name</h1>
+        <input
+          type="text"
+          class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
+          placeholder="Name"
+          v-model="contactNewName"
+        />
+        <button
+          class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded -ml-1.5 border-l border-blue-400"
+          @click="onClickSaveName(contactEdit, contactNewName)"
+        >
+          <fa icon="save" />
+        </button>
+        <span class="inline-block w-2" />
+        <button
+          class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded -ml-1.5 border-l border-blue-400"
+          @click="onClickCancelName()"
+        >
+          <fa icon="ban" />
+        </button>
+      </div>
+    </div>
   </section>
 </template>
 
@@ -211,11 +251,17 @@
 import { AxiosError } from "axios";
 import * as didJwt from "did-jwt";
 import * as R from "ramda";
+
+import { NotificationIface } from "@/constants/app";
 import { IIdentifier } from "@veramo/core";
 import { accountsDB, db } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { accessToken, SimpleSigner } from "@/libs/crypto";
+import {
+  accessToken,
+  getContactPayloadFromJwtUrl,
+  SimpleSigner,
+} from "@/libs/crypto";
 import {
   GiveServerRecord,
   GiveVerifiableCredential,
@@ -229,23 +275,19 @@ import EntityIcon from "@/components/EntityIcon.vue";
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
 @Component({
   components: { QuickNav, EntityIcon },
 })
 export default class ContactsView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   activeDid = "";
   apiServer = "";
   contacts: Array<Contact> = [];
+  contactEndorserUrl = localStorage.getItem("contactEndorserUrl") || "";
   contactInput = "";
+  contactEdit: Contact | null = null;
+  contactNewName = "";
   // { "did:...": concatenated-descriptions } entry for each contact
   givenByMeDescriptions: Record<string, string> = {};
   // { "did:...": amount } entry for each contact
@@ -279,6 +321,12 @@ export default class ContactsView extends Vue {
       (a: Contact, b) => (a.name || "").localeCompare(b.name || ""),
       allContacts,
     );
+
+    if (this.contactEndorserUrl) {
+      await this.newContactFromScan(this.contactEndorserUrl);
+      localStorage.removeItem("contactEndorserUrl");
+      this.contactEndorserUrl = "";
+    }
   }
 
   public async getIdentity(activeDid: string) {
@@ -414,6 +462,18 @@ export default class ContactsView extends Vue {
   }
 
   async onClickNewContact(): Promise<void> {
+    if (!this.contactInput) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "No Contact",
+          text: "There was no contact info to add.",
+        },
+        -1,
+      );
+      return;
+    }
     let did = this.contactInput;
     let name, publicKeyBase64;
     const commaPos1 = this.contactInput.indexOf(",");
@@ -432,12 +492,74 @@ export default class ContactsView extends Vue {
       publicKeyBase64 = Buffer.from(publicKeyBase64, "hex").toString("base64");
     }
     const newContact = { did, name, publicKeyBase64 };
-    await db.contacts.add(newContact);
+    return this.addContact(newContact);
+  }
+
+  async newContactFromScan(url: string): Promise<void> {
+    const payload = getContactPayloadFromJwtUrl(url);
+    if (!payload) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "No Contact Info",
+          text: "The contact info could not be parsed.",
+        },
+        -1,
+      );
+      return;
+    } else {
+      return this.addContact({
+        did: payload.iss,
+        name: payload.own.name,
+        publicKeyBase64: payload.own.publicEncKey,
+      } as Contact);
+    }
+  }
+
+  async addContact(newContact: Contact) {
+    if (!newContact.did) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Incomplete Contact",
+          text: "Cannot add a contact without a DID.",
+        },
+        -1,
+      );
+      return;
+    }
+    return db.contacts
+      .add(newContact)
+      .then(() => {
         const allContacts = this.contacts.concat([newContact]);
         this.contacts = R.sort(
           (a: Contact, b) => (a.name || "").localeCompare(b.name || ""),
           allContacts,
         );
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Contact added",
+            text: newContact.name + " was added.",
+          },
+          -1,
+        );
+      })
+      .catch((err) => {
+        console.error("Error when adding contact to storage:", err);
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Contact Not Added",
+            text: "An error prevented importing.",
+          },
+          -1,
+        );
+      });
   }
 
   async deleteContact(contact: Contact) {
@@ -876,6 +998,18 @@ export default class ContactsView extends Vue {
     }
   }
 
+  private async onClickCancelName() {
+    this.contactEdit = null;
+    this.contactNewName = "";
+  }
+
+  private async onClickSaveName(contact: Contact, newName: string) {
+    contact.name = newName;
+    return db.contacts
+      .update(contact.did, { name: newName })
+      .then(() => (this.contactEdit = null));
+  }
+
   public toggleShowGiveTotals() {
     if (this.showGiveTotals) {
       this.showGiveTotals = false;
@@ -900,6 +1034,26 @@ export default class ContactsView extends Vue {
 </script>
 
 <style>
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.5rem;
+}
+.dialog {
+  background-color: white;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  width: 100%;
+  max-width: 500px;
+}
+
 /* Tooltip from https://www.w3schools.com/css/css_tooltip.asp */
 /* Tooltip container */
 .tooltip {
@@ -907,7 +1061,6 @@ export default class ContactsView extends Vue {
   display: inline-block;
   border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
 }
-
 /* Tooltip text */
 .tooltip .tooltiptext {
   visibility: hidden;

src/views/HelpView.vue

@@ -41,14 +41,15 @@
         You need someone to register you -- usually the person who told you
         about this app, on the Contacts
         <fa icon="circle-user" class="fa-fw" /> page. After they register you,
-        and after you have contacts, you can select any contact on the home page
-        and record your appreciation for... whatever. That is a claim recorded
+        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 gifting economies. Each claim is recorded
         on a custom ledger. The day after being registered, you'll be able to
-        register others; later, you can create projects, too.
+        able to register others; later, you can create projects, too.
       </p>
       <p>
-        Note that there are limits to how many each person can register, so you
-        may have to wait.
+        Note that there are limits to how many others each person can register,
+        so you may have to wait.
       </p>
 
       <h2 class="text-xl font-semibold">How do I backup all my data?</h2>
@@ -130,7 +131,9 @@
 
       <h2 class="text-xl font-semibold">How do I create another identity?</h2>
       <p>
-        Go
+        Before doing this, note that it is an advanced feature that affects
+        functionality (eg. the words "Alt ID" next to results, backup features)
+        so beware if you think that may cause confusion. You can
         <router-link to="start" class="text-blue-500">
           create another identity here.
         </router-link>

src/views/HomeView.vue

@@ -7,141 +7,7 @@
     </h1>
 
     <div class="mb-8">
-      <h2 class="text-xl font-bold mb-4">Notiwind Alert Test Suite</h2>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'alert',
-              type: 'toast',
-              text: 'I\'m a toast. Don\'t mind me.',
-            },
-            5000,
-          )
-        "
-        class="font-bold uppercase bg-slate-400 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Toast (self-dismiss)
-      </button>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'alert',
-              type: 'info',
-              title: 'Information Alert',
-              text: 'Just wanted you to know.',
-            },
-            -1,
-          )
-        "
-        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Info
-      </button>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'alert',
-              type: 'success',
-              title: 'Success Alert',
-              text: 'Congratulations!',
-            },
-            -1,
-          )
-        "
-        class="font-bold uppercase bg-emerald-600 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Success
-      </button>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'alert',
-              type: 'warning',
-              title: 'Warning Alert',
-              text: 'You might wanna look at this.',
-            },
-            -1,
-          )
-        "
-        class="font-bold uppercase bg-amber-600 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Warning
-      </button>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'alert',
-              type: 'danger',
-              title: 'Danger Alert',
-              text: 'Something terrible has happened!',
-            },
-            -1,
-          )
-        "
-        class="font-bold uppercase bg-rose-600 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Danger
-      </button>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'modal',
-              type: 'notification-permission',
-            },
-            -1,
-          )
-        "
-        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Notif ON
-      </button>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'modal',
-              type: 'notification-mute',
-            },
-            -1,
-          )
-        "
-        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Notif MUTE
-      </button>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'modal',
-              type: 'notification-off',
-            },
-            -1,
-          )
-        "
-        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Notif OFF
-      </button>
-    </div>
-
-    <div class="mb-8">
-      <h2 class="text-xl font-bold">Quick Action</h2>
-      <p class="mb-4">Record a gift from a contact:</p>
+      <h2 class="text-xl font-bold">Record a Gift</h2>
 
       <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
         <li @click="openDialog()">
@@ -415,6 +281,7 @@ export default class HomeView extends Vue {
   }
 
   giveDescription(giveRecord: GiveServerRecord) {
+    // similar code is in endorser-mobile utility.ts
     // claim.claim happen for some claims wrapped in a Verifiable Credential
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const claim = (giveRecord.fullClaim as any).claim || giveRecord.fullClaim;
@@ -427,9 +294,18 @@ export default class HomeView extends Vue {
       this.allMyDids,
       this.allContacts,
     );
-    const gaveAmount = claim.object?.amountOfThisGood
+    let gaveAmount = claim.object?.amountOfThisGood
       ? this.displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
-      : claim.description || "something unknown";
+      : "";
+    if (claim.description) {
+      if (gaveAmount) {
+        gaveAmount = gaveAmount + ", and also: ";
+      }
+      gaveAmount = gaveAmount + claim.description;
+    }
+    if (!gaveAmount) {
+      gaveAmount = "something not described";
+    }
     // recipient.did is for legacy data, before March 2023
     const gaveRecipientId =
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -443,7 +319,7 @@ export default class HomeView extends Vue {
           this.allContacts,
         )
       : "";
-    return giverInfo + " gave " + gaveAmount + gaveRecipientInfo;
+    return giverInfo + " gave" + gaveRecipientInfo + ": " + gaveAmount;
   }
 
   displayAmount(code: string, amt: number) {
@@ -523,15 +399,18 @@ export default class HomeView extends Vue {
         hours,
       );
 
-      if (this.isGiveCreationError(result)) {
+      if (
+        result.type === "error" ||
+        this.isGiveCreationError(result.response)
+      ) {
         const errorMessage = this.getGiveCreationErrorMessage(result);
-        console.log("Error with give result:", result);
+        console.log("Error with give creation result:", result);
         this.$notify(
           {
             group: "alert",
             type: "danger",
             title: "Error",
-            text: errorMessage || "There was an error recording the give.",
+            text: errorMessage || "There was an error creating the give.",
           },
           -1,
         );
@@ -548,7 +427,7 @@ export default class HomeView extends Vue {
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
-      console.log("Error with give caught:", error);
+      console.log("Error with give recordation caught:", error);
       const message =
         error.userMessage ||
         error.response?.data?.error?.message ||
@@ -567,14 +446,26 @@ export default class HomeView extends Vue {
 
   // Helper functions for readability
 
+  /**
+   * @param result response "data" from the server
+   * @returns true if the result indicates an error
+   */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   isGiveCreationError(result: any) {
     return result.status !== 201 || result.data?.error;
   }
 
+  /**
+   * @param result direct response eg. ErrorResult or SuccessResult (potentially with embedded "data")
+   * @returns best guess at an error message
+   */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getGiveCreationErrorMessage(result: any) {
-    return result.data?.error?.message;
+    return (
+      result.error?.userMessage ||
+      result.error?.error ||
+      result.response?.data?.error?.message
+    );
   }
 }
 </script>

src/views/IdentitySwitcherView.vue

@@ -49,7 +49,9 @@
     </ul>
 
     <!-- Actions -->
+    <!-- id used by puppeteer test script -->
     <router-link
+      id="start-link"
       :to="{ name: 'start' }"
       class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
     >

src/views/ImportAccountView.vue

@@ -17,7 +17,9 @@
     <p class="text-center text-xl mb-4 font-light">
       Enter your seed phrase below to import your identity on this device.
     </p>
+    <!-- id used by puppeteer test script -->
     <input
+      id="seed-input"
       type="text"
       placeholder="Seed Phrase"
       class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"

src/views/NewEditProjectView.vue

@@ -1,4 +1,5 @@
 <template>
+  <QuickNav selected="Projects"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
     <!-- Breadcrumb -->
@@ -107,6 +108,7 @@ import * as didJwt from "did-jwt";
 import { Component, Vue } from "vue-facing-decorator";
 import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
 
+import QuickNav from "@/components/QuickNav.vue";
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken, SimpleSigner } from "@/libs/crypto";
@@ -122,7 +124,7 @@ interface Notification {
 }
 
 @Component({
-  components: { LMap, LMarker, LTileLayer },
+  components: { LMap, LMarker, LTileLayer, QuickNav },
 })
 export default class NewEditProjectView extends Vue {
   $notify!: (notification: Notification, timeout?: number) => void;

src/views/NewIdentifierView.vue

@@ -46,7 +46,7 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import QuickNav from "@/components/QuickNav.vue";
 
 @Component({ components: { QuickNav } })
-export default class AccountViewView extends Vue {
+export default class NewIdentifierView extends Vue {
   loading = true;
 
   async mounted() {

src/views/StartView.vue

@@ -8,7 +8,8 @@
       Start Here
     </h1>
 
-    <div class="mt-8">
+    <!-- id used by puppeteer test script -->
+    <div id="start-question" class="mt-8">
       <p class="text-center text-xl mb-4 font-light">
         Do you have an identity to import?
       </p>

src/views/TestView.vue

@@ -0,0 +1,151 @@
+<template>
+  <QuickNav selected="Profile"></QuickNav>
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24">
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      Test
+    </h1>
+
+    <div class="mb-8">
+      <h2 class="text-xl font-bold mb-4">Notiwind Alert Test Suite</h2>
+
+      <button
+        @click="
+          this.$notify(
+            {
+              group: 'alert',
+              type: 'toast',
+              text: 'I\'m a toast. Don\'t mind me.',
+            },
+            5000,
+          )
+        "
+        class="font-bold uppercase bg-slate-400 text-white px-3 py-2 rounded-md mr-2"
+      >
+        Toast (self-dismiss)
+      </button>
+
+      <button
+        @click="
+          this.$notify(
+            {
+              group: 'alert',
+              type: 'info',
+              title: 'Information Alert',
+              text: 'Just wanted you to know.',
+            },
+            -1,
+          )
+        "
+        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+      >
+        Info
+      </button>
+
+      <button
+        @click="
+          this.$notify(
+            {
+              group: 'alert',
+              type: 'success',
+              title: 'Success Alert',
+              text: 'Congratulations!',
+            },
+            -1,
+          )
+        "
+        class="font-bold uppercase bg-emerald-600 text-white px-3 py-2 rounded-md mr-2"
+      >
+        Success
+      </button>
+
+      <button
+        @click="
+          this.$notify(
+            {
+              group: 'alert',
+              type: 'warning',
+              title: 'Warning Alert',
+              text: 'You might wanna look at this.',
+            },
+            -1,
+          )
+        "
+        class="font-bold uppercase bg-amber-600 text-white px-3 py-2 rounded-md mr-2"
+      >
+        Warning
+      </button>
+
+      <button
+        @click="
+          this.$notify(
+            {
+              group: 'alert',
+              type: 'danger',
+              title: 'Danger Alert',
+              text: 'Something terrible has happened!',
+            },
+            -1,
+          )
+        "
+        class="font-bold uppercase bg-rose-600 text-white px-3 py-2 rounded-md mr-2"
+      >
+        Danger
+      </button>
+
+      <button
+        @click="
+          this.$notify(
+            {
+              group: 'modal',
+              type: 'notification-permission',
+            },
+            -1,
+          )
+        "
+        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+      >
+        Notif ON
+      </button>
+
+      <button
+        @click="
+          this.$notify(
+            {
+              group: 'modal',
+              type: 'notification-mute',
+            },
+            -1,
+          )
+        "
+        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+      >
+        Notif MUTE
+      </button>
+
+      <button
+        @click="
+          this.$notify(
+            {
+              group: 'modal',
+              type: 'notification-off',
+            },
+            -1,
+          )
+        "
+        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+      >
+        Notif OFF
+      </button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import QuickNav from "@/components/QuickNav.vue";
+
+@Component({ components: { QuickNav } })
+export default class Help extends Vue {}
+</script>