change the default image server port

Reviewed-on: #103

.env.development

@@ -0,0 +1,6 @@
+# Only the variables that start with VUE_APP_ are seen in the application process.env in Vue.
+
+# this won't resolve as a URL on production; it's a URN only found in the test system
+VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HNTZYJJXTGT0EZS3VEJGX7AK
+VUE_APP_DEFAULT_ENDORSER_API_SERVER=http://localhost:3000
+VUE_APP_DEFAULT_IMAGE_API_SERVER=http://localhost:3002

.env.production

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

CHANGELOG.md

@@ -6,13 +6,27 @@ 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]
-### Changed in DB
-- ?
+### Added
+- Photo on gift records
+### Fixed
+- Environment variable for BVC meetings project
+### Changed in DB or environment
+- Test that a new browser session will get the right default API
+- Test that a new browser session will send the right BVC meetings project
 
 
-## [0.2.14] - 2024.02.14
+## [0.2.17] - 2024.03.01 - 3612ea42240c5e1b7d7eff29a39ff18f1b869b36
+### Added
+- Shortcut page for Bountiful Voluntaryist Community
 ### Changed
-- Combine all service worker scripts into a single file
+- More readable, targeted summaries in home-page feed items
+### Changed in DB
+- Nothing
+
+
+## [0.2.14] - 2024.02.14 - 5f9edea1167dbfb64e16648764eed8c09b24eaeb
+### Changed
+- Combine all service worker scripts into a single file.
 ### Changed in DB
 - Nothing
 

README.md

@@ -32,21 +32,22 @@ npm run lint
 
 * `npx prettier --write ./sw_scripts/`
 
-* Update the project.task.yaml & CHANGELOG.md & the version in package.json, run `npm install`, and commit.
+* Update the project.task.yaml & CHANGELOG.md & the version in package.json, run `npm install`.
 
-* [Tag wth the new version.](https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/releases)
+* If production: change package.json to remove "_Test". Also record what version is on production.
 
-... though maybe you do that after testing and release, since that isn't used in the build (and you often increment a lot during testing).
-
-* If production: change src/constants/app.ts DEFAULT_*_SERVER to be "PROD" and package.json to remove "_Test". Also record what version is on production.
-
-* `npm run build`
+* `npm run build-dev` for test servers or `npm run build` for production.
 
 * Get on the server and back up the time-safari folder.
 
 * `rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntutest@test.timesafari.app:time-safari`
 
-* Revert src/constants/app.ts and package.json (if that was prod), edit package.json to increment version & add "-beta", `npm install`, and commit. Tag if you didn't before. Also record what version is on production.
+* Revert src/constants/app.ts and package.json (if that was prod).
+
+* Commit changes. Record the new hash in the changelog. Edit package.json to increment version & add "-beta", `npm install`, and commit. Also record what version is on production.
+
+* [Tag with the new version.](https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/releases)
+
 
 
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "TimeSafari_Test",
-  "version": "0.2.15-beta",
+  "version": "0.2.18-beta",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "TimeSafari_Test",
-      "version": "0.2.15-beta",
+      "version": "0.2.18-beta",
       "dependencies": {
         "@dicebear/collection": "^5.3.5",
         "@dicebear/core": "^5.3.5",
@@ -17,6 +17,7 @@
         "@pvermeer/dexie-encrypted-addon": "^3.0.0",
         "@tweenjs/tween.js": "^21.0.0",
         "@types/js-yaml": "^4.0.9",
+        "@types/luxon": "^3.4.2",
         "@veramo/core": "^5.4.1",
         "@veramo/credential-w3c": "^5.4.1",
         "@veramo/data-store": "^5.4.1",
@@ -41,7 +42,7 @@
         "js-generate-password": "^0.1.9",
         "js-yaml": "^4.1.0",
         "localstorage-slim": "^2.5.0",
-        "luxon": "^3.4.3",
+        "luxon": "^3.4.4",
         "merkletreejs": "^0.3.11",
         "moment": "^2.29.4",
         "notiwind": "^2.0.2",
@@ -53,6 +54,7 @@
         "readable-stream": "^4.4.2",
         "reflect-metadata": "^0.1.13",
         "register-service-worker": "^1.7.2",
+        "simple-vue-camera": "^1.1.3",
         "three": "^0.156.1",
         "ua-parser-js": "^1.0.37",
         "util": "^0.12.5",
@@ -9170,6 +9172,11 @@
         "@types/geojson": "*"
       }
     },
+    "node_modules/@types/luxon": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.4.2.tgz",
+      "integrity": "sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA=="
+    },
     "node_modules/@types/mime": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.3.tgz",
@@ -20251,9 +20258,9 @@
       }
     },
     "node_modules/luxon": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.3.tgz",
-      "integrity": "sha512-tFWBiv3h7z+T/tDaoxA8rqTxy1CHV6gHS//QdaH4pulbq/JuBSGgQspQQqcgnwdAx6pNI7cmvz5Sv/addzHmUg==",
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
+      "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==",
       "engines": {
         "node": ">=12"
       }
@@ -25432,6 +25439,11 @@
         "node": ">= 5.10.0"
       }
     },
+    "node_modules/simple-vue-camera": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/simple-vue-camera/-/simple-vue-camera-1.1.3.tgz",
+      "integrity": "sha512-GVAYq1BMI9cHt+h24tu2dfIFFvhjVQ1M8IkK5LmrKcYoBA8FZlLNlhrHC2NnTPbMAXIvJn1Bqx8X6Q31+Y2+jA=="
+    },
     "node_modules/sirv": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz",

package.json

@@ -1,10 +1,11 @@
 {
   "name": "TimeSafari_Test",
-  "version": "0.2.15-beta",
+  "version": "0.2.18-beta",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build-dev": "vue-cli-service build --mode development",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
@@ -17,6 +18,7 @@
     "@pvermeer/dexie-encrypted-addon": "^3.0.0",
     "@tweenjs/tween.js": "^21.0.0",
     "@types/js-yaml": "^4.0.9",
+    "@types/luxon": "^3.4.2",
     "@veramo/core": "^5.4.1",
     "@veramo/credential-w3c": "^5.4.1",
     "@veramo/data-store": "^5.4.1",
@@ -41,7 +43,7 @@
     "js-generate-password": "^0.1.9",
     "js-yaml": "^4.1.0",
     "localstorage-slim": "^2.5.0",
-    "luxon": "^3.4.3",
+    "luxon": "^3.4.4",
     "merkletreejs": "^0.3.11",
     "moment": "^2.29.4",
     "notiwind": "^2.0.2",
@@ -53,6 +55,7 @@
     "readable-stream": "^4.4.2",
     "reflect-metadata": "^0.1.13",
     "register-service-worker": "^1.7.2",
+    "simple-vue-camera": "^1.1.3",
     "three": "^0.156.1",
     "ua-parser-js": "^1.0.37",
     "util": "^0.12.5",

project.task.yaml

@@ -1,43 +1,49 @@
 
 tasks :
 
-- 01 release server & client for fix to project-editing
+- alert & stop if give amount < 0
+- onboarding video
 
-- .5 fix timeSafari.org cert renewals
+- .1 on feed, don't show "to someone anonymous" if it's to a project
+- .1 on ideas, put an "x" to close it
+
+- .2 fix give dialog from "more contacts" off home page to allow giving to this user
+- .2 fix bottom of project selection map, where the icons are hidden but a tap goes to the icon's page
+- .5 stop from seeing an error on the first page when browser doesn't support service workers (which I've seen on iPhone; visible in Firefox private window)
+- .2 don't show a warning on a totally new project when the authorized agent is set
 - .2 anchor hash into BTC
-- .1 add step 1 to onboarding hints to "install"
+- .2 list the "show more" contacts alphabetically
 
-- 01 bookmarks for BVC
+- 32 image on give :
+  - upload a photo from elsewhere
+  - go-live - create cert for new image domain, set up haproxy redirect, test-image-api.timesafari.app
+  - make Time Safari a share_target for images
+
+- 08 add image on profile
+
+- ask to detect location & record it in settings
+- if personal location is set, show potential local affiliations
 
 - 24 compelling UI for credential presentations
   - discover who in my network has activity on a project
+
 - 24 compelling UI for statistics (eg. World?)
 
-- .5 stop from seeing an error on the first page when browser doesn't support service workers (which I've seen on iPhone; visible in Firefox private window)
+- 01 in the feed, group by project or contact or topic or time/$ (via BC)
+- 01 separate not-on-platform vs totally anonymous; terminology "unidentified"?
 - .2 add links between projects
-- 32 image on give :
-  - Show a camera to take a picture
-  - Scale the image to a reasonable size
-  - Upload to a public readable place
-  - check the rate limits
-  - use CID
-  - put the image URL in the claim
-  - Rates - images erased?
-  - image not associated with JWT ULID since that's assigned later
-
 - 24 make the contact browsing on the front page something that invites more action
 
-- .2 list the "show more" contacts alphabetically
 - .5 change server plan & project endpoints to use jwtId as identifier rather than rowid
 - 16 edit offers & gives, or revoke allowing re-creation
 - .1 When available in the server, give message for 'nonAmountGiven' on offers on ProjectsView page.
 - .1 Add help instructions for "Encryption key has changed" error. (It is a problem if localStorage is cleared, but the contacts & settings remain and they have to restore their seeds.)
-- .5 add more detail on TimeSafari.org
 - .1 show better error when user with no ID goes to the "My Project" page
-- 08 add button to front page to prompt for ideas for gratitude :
-  - show previous on "Your" screen
-  - checkboxes - randomize vs show in order, show non-person-oriented messages, show only contacts, show only projects
+- 01 in front page prompt for ideas for gratitude :
+  - randomize (not show in order)
+  - checkboxes - show non-person-oriented messages, show only contacts, show only projects
 
+- .5 add a notice on the front page if their notifications are off
 - 08 allow user to add a time when they want their daily notification
 
 - .5 prompt for the name directly when they visit the QR scan page
@@ -74,6 +80,7 @@ tasks :
 - create a help-desk document & add screenshots
 
 - .1 update "offer" units to have same functionality as "give" units
+- .5 add a link to any 'give' records that fulfill an offer on ClaimView
 - 01 on home page, prompt for install check in addition to "supports notifications" check (since they won't get notified if Chrome is closed)
 - 01 on Mac (& Windows?) desktop, add a help blurb so that they can find it again (since it doesn't show in Application list)
 - bug (that is hard to reproduce) - got error adding on Firefox user #0 as contact for themselves

src/App.vue

@@ -148,6 +148,37 @@
           class="w-full"
           role="alert"
         >
+          <div
+            v-if="notification.type === 'confirm'"
+            class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
+          >
+            <div
+              class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
+            >
+              <div class="w-full px-6 py-6 text-slate-900 text-center">
+                <p class="text-lg mb-4">
+                  {{ notification.title }}
+                </p>
+
+                <button
+                  @click="
+                    notification.onYes();
+                    close(notification.id);
+                  "
+                  class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  Yes
+                </button>
+
+                <button
+                  @click="close(notification.id)"
+                  class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </div>
           <div
             v-if="notification.type === 'notification-permission'"
             class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
@@ -288,21 +319,14 @@ interface VapidResponse {
   };
 }
 
-import { DEFAULT_PUSH_SERVER } from "@/constants/app";
+import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app";
 import { db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { sendTestThroughPushServer } from "@/libs/util";
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
 @Component
 export default class App extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   b64 = "";
   serviceWorkerReady = false;
@@ -589,7 +613,7 @@ export default class App extends Vue {
         }
       })
       .catch((error) => {
-        console.log("Push provider server communication failed:", error);
+        console.error("Push provider server communication failed:", error);
         return false;
       });
 
@@ -604,7 +628,7 @@ export default class App extends Vue {
         return response.ok;
       })
       .catch((error) => {
-        console.log("Push server communication failed:", error);
+        console.error("Push server communication failed:", error);
         return false;
       });
 

src/components/GiftedDialog.vue

@@ -10,23 +10,22 @@
         placeholder="What was received"
         v-model="description"
       />
-      <div class="flex flex-row">
+      <div class="flex flex-row justify-center">
         <span
-          class="rounded-l border border-r-0 border-slate-400 bg-slate-200 w-1/3 text-center text-blue-500 px-2 py-2"
+          class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center text-blue-500 px-2 py-2 w-20"
           @click="changeUnitCode()"
         >
           {{ libsUtil.UNIT_SHORT[unitCode] }}
         </span>
         <div
           class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
-          @click="decrement()"
-          v-if="amountInput !== '0'"
+          @click="amountInput === '0' ? null : decrement()"
         >
           <fa icon="chevron-left" />
         </div>
         <input
           type="number"
-          class="w-full border border-r-0 border-slate-400 px-2 py-2 text-center"
+          class="border border-r-0 border-slate-400 px-2 py-2 text-center w-20"
           v-model="amountInput"
         />
         <div
@@ -36,14 +35,26 @@
           <fa icon="chevron-right" />
         </div>
       </div>
-      <div class="mt-2 text-right">
-        <span v-if="showGivenToUser" class="mr-16">
-          <input type="checkbox" class="mr-2" v-model="givenToUser" />
-          <label class="text-sm">Given to you</label>
-        </span>
+      <div class="mt-4 flex justify-center">
         <span>
-          <input type="checkbox" class="mr-2" v-model="isTrade" />
-          <label class="text-sm">Trade (not a gift)</label>
+          <router-link
+            :to="{
+              name: 'gifted-details',
+              query: {
+                amountInput,
+                description,
+                giverDid: giver?.did,
+                giverName: giver?.name,
+                message,
+                offerId,
+                projectId,
+                unitCode,
+              },
+            }"
+            class="text-blue-500"
+          >
+            More Options
+          </router-link>
         </span>
       </div>
       <p class="text-center mb-2 mt-6 italic">
@@ -67,6 +78,8 @@
 
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-facing-decorator";
+
+import { NotificationIface } from "@/constants/app";
 import {
   createAndSubmitGive,
   didInfo,
@@ -75,19 +88,11 @@ import {
 import * as libsUtil from "@/libs/util";
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
-import { Account } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
 @Component
 export default class GiftedDialog extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   @Prop message = "";
   @Prop projectId = "";
@@ -99,9 +104,9 @@ export default class GiftedDialog extends Vue {
   apiServer = "";
 
   amountInput = "0";
-  giver?: GiverInputInfo; // undefined means no identified giver agent
   description = "";
   givenToUser = false;
+  giver?: GiverInputInfo; // undefined means no identified giver agent
   isTrade = false;
   offerId = "";
   unitCode = "HUR";
@@ -211,22 +216,6 @@ export default class GiftedDialog extends Vue {
     });
   }
 
-  public async getIdentity(activeDid: string) {
-    await accountsDB.open();
-    const account = (await accountsDB.accounts
-      .where("did")
-      .equals(activeDid)
-      .first()) as Account;
-    const identity = JSON.parse(account?.identity || "null");
-
-    if (!identity) {
-      throw new Error(
-        "Attempted to load Give records for DID ${activeDid} but no identifier was found",
-      );
-    }
-    return identity;
-  }
-
   /**
    *
    * @param giverDid may be null
@@ -267,7 +256,7 @@ export default class GiftedDialog extends Vue {
     }
 
     try {
-      const identity = await this.getIdentity(this.activeDid);
+      const identity = await libsUtil.getIdentity(this.activeDid);
       const result = await createAndSubmitGive(
         this.axios,
         this.apiServer,

src/components/GiftedPhotoDialog.vue

@@ -0,0 +1,211 @@
+<template>
+  <div v-if="visible" class="dialog-overlay">
+    <!-- Breadcrumb -->
+    <div class="dialog">
+      <!-- Back -->
+      <div class="text-lg text-center font-light relative px-7">
+        <h1
+          class="text-lg text-center px-2 py-1 absolute -right-2 -top-1"
+          @click="close()"
+        >
+          <fa icon="xmark" class="fa-fw"></fa>
+        </h1>
+      </div>
+
+      <!-- Heading -->
+      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4">
+        <span v-if="uploading"> Uploading... </span>
+        <span v-else-if="blob"> Look Good? </span>
+        <span v-else> Say "Cheese"! </span>
+      </h1>
+
+      <div v-if="uploading" class="flex justify-center">
+        <fa icon="spinner" class="fa-spin fa-3x text-center block" />
+      </div>
+      <div v-else-if="blob">
+        <div class="flex justify-around">
+          <button
+            @click="uploadImage"
+            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full"
+          >
+            <span>Upload</span>
+          </button>
+          <button
+            @click="retryImage"
+            class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-2 px-2 rounded-full"
+          >
+            <span>Retry</span>
+          </button>
+        </div>
+        <img :src="URL.createObjectURL(blob)" class="mt-2 w-full" />
+      </div>
+      <div v-else>
+        <!--
+          Camera "resolution" doesn't change how it shows on screen but rather stretches the result, eg the following which just stretches it vertically:
+          :resolution="{ width: 375, height: 812 }"
+        -->
+        <camera facingMode="environment" autoplay ref="camera">
+          <div class="absolute bottom-0 w-full flex justify-center pb-4">
+            <!-- Button -->
+            <button
+              @click="takeImage"
+              class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded-full"
+            >
+              <fa icon="camera" class="fa-fw"></fa>
+            </button>
+          </div>
+        </camera>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import axios from "axios";
+import Camera from "simple-vue-camera";
+import { Component, Vue } from "vue-facing-decorator";
+
+import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
+import { getIdentity } from "@/libs/util";
+import { db } from "@/db/index";
+import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
+import { accessToken } from "@/libs/crypto";
+
+@Component({ components: { Camera } })
+export default class GiftedPhotoDialog extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid = "";
+  blob: Blob | null = null;
+  setImage: (arg: string) => void = () => {};
+  uploading = false;
+  visible = false;
+
+  URL = window.URL || window.webkitURL;
+
+  async mounted() {
+    try {
+      await db.open();
+      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+      this.activeDid = settings?.activeDid || "";
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (err: any) {
+      console.error("Error retrieving settings from database:", err);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: err.message || "There was an error retrieving your settings.",
+        },
+        -1,
+      );
+    }
+  }
+
+  open(setImageFn: (arg: string) => void) {
+    this.visible = true;
+    this.setImage = setImageFn;
+  }
+
+  close() {
+    this.visible = false;
+    this.blob = null;
+  }
+
+  async takeImage(/* payload: MouseEvent */) {
+    const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
+    this.blob = await cameraComponent?.snapshot(); // png is default; if that changes, change extension in formData.append
+    if (!this.blob) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "There was an error taking the picture. Please try again.",
+        },
+        5000,
+      );
+      return;
+    }
+  }
+
+  async retryImage() {
+    this.blob = null;
+  }
+
+  async uploadImage() {
+    this.uploading = true;
+    const identifier = await getIdentity(this.activeDid);
+    const token = await accessToken(identifier);
+    const headers = {
+      Authorization: "Bearer " + token,
+    };
+    const formData = new FormData();
+    if (!this.blob) {
+      // yeah, this should never happen, but it helps with subsequent type checking
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "There was an error finding the picture. Please try again.",
+        },
+        5000,
+      );
+      this.uploading = false;
+      return;
+    }
+    formData.append("image", this.blob, "snapshot.png"); // png is set in snapshot()
+    formData.append("claimType", "GiveAction");
+    try {
+      const response = await axios.post(
+        DEFAULT_IMAGE_API_SERVER + "/image",
+        formData,
+        { headers },
+      );
+      this.uploading = false;
+
+      this.visible = false;
+      this.blob = null;
+      this.setImage(response.data.url as string);
+    } catch (error) {
+      console.error("Error uploading the image", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "There was an error saving the picture. Please try again.",
+        },
+        5000,
+      );
+      this.uploading = false;
+      this.blob = null;
+    }
+  }
+}
+</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: 700px;
+}
+</style>

src/components/GiftedPrompts.vue

@@ -64,20 +64,13 @@
 <script lang="ts">
 import { Vue, Component } from "vue-facing-decorator";
 
-import { AppString } from "@/constants/app";
+import { AppString, NotificationIface } from "@/constants/app";
 import { db } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
 @Component
 export default class GivenPrompts extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   IDEAS = [
     "Did anyone fix food for you?",

src/components/OfferDialog.vue

@@ -68,22 +68,16 @@
 
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-facing-decorator";
+
+import { NotificationIface } from "@/constants/app";
 import { createAndSubmitOffer } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
-import { accountsDB, db } from "@/db/index";
+import { db } from "@/db/index";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
-import { Account } from "@/db/tables/accounts";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
 
 @Component
 export default class OfferDialog extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   @Prop message = "";
   @Prop projectId = "";
@@ -107,7 +101,7 @@ export default class OfferDialog extends Vue {
       this.activeDid = settings?.activeDid || "";
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
-      console.log("Error retrieving settings from database:", err);
+      console.error("Error retrieving settings from database:", err);
       this.$notify(
         {
           group: "alert",
@@ -178,22 +172,6 @@ export default class OfferDialog extends Vue {
     });
   }
 
-  public async getIdentity(activeDid: string) {
-    await accountsDB.open();
-    const account = (await accountsDB.accounts
-      .where("did")
-      .equals(activeDid)
-      .first()) as Account;
-    const identity = JSON.parse(account?.identity || "null");
-
-    if (!identity) {
-      throw new Error(
-        `Attempted to load Offer records for DID ${activeDid} but no identifier was found`,
-      );
-    }
-    return identity;
-  }
-
   /**
    *
    * @param description may be an empty string
@@ -233,7 +211,7 @@ export default class OfferDialog extends Vue {
     }
 
     try {
-      const identity = await this.getIdentity(this.activeDid);
+      const identity = await libsUtil.getIdentity(this.activeDid);
       const result = await createAndSubmitOffer(
         this.axios,
         this.apiServer,
@@ -250,7 +228,7 @@ export default class OfferDialog extends Vue {
         this.isOfferCreationError(result.response)
       ) {
         const errorMessage = this.getOfferCreationErrorMessage(result);
-        console.log("Error with offer creation result:", result);
+        console.error("Error with offer creation result:", result);
         this.$notify(
           {
             group: "alert",
@@ -273,7 +251,7 @@ export default class OfferDialog extends Vue {
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
-      console.log("Error with offer recordation caught:", error);
+      console.error("Error with offer recordation caught:", error);
       const message =
         error.userMessage ||
         error.response?.data?.error?.message ||

src/components/TopMessage.vue

@@ -4,20 +4,14 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-facing-decorator";
+
+import { AppString, NotificationIface } from "@/constants/app";
 import { db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { AppString } from "@/constants/app";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
 
 @Component
 export default class TopMessage extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   @Prop selected = "";
 

src/constants/app.ts

@@ -12,10 +12,20 @@ export enum AppString {
   TEST1_PUSH_SERVER = "https://test.timesafari.app",
   TEST2_PUSH_SERVER = "https://timesafari-pwa.anomalistlabs.com",
 
+  PROD_IMAGE_API_SERVER = "https://image-api.timesafari.app",
+  TEST_IMAGE_API_SERVER = "https://test-image-api.timesafari.app",
+  LOCAL_IMAGE_API_SERVER = "http://localhost:3001",
+
   NO_CONTACT_NAME = "(no name)",
 }
 
-export const DEFAULT_ENDORSER_API_SERVER = AppString.TEST_ENDORSER_API_SERVER;
+export const DEFAULT_ENDORSER_API_SERVER =
+  process.env.VUE_APP_DEFAULT_ENDORSER_API_SERVER ||
+  AppString.TEST_ENDORSER_API_SERVER;
+
+export const DEFAULT_IMAGE_API_SERVER =
+  process.env.VUE_APP_DEFAULT_IMAGE_API_SERVER ||
+  AppString.TEST_IMAGE_API_SERVER;
 
 export const DEFAULT_PUSH_SERVER =
   window.location.protocol + "//" + window.location.host;
@@ -29,4 +39,5 @@ export interface NotificationIface {
   type: string; // "toast" | "info" | "success" | "warning" | "danger"
   title: string;
   text: string;
+  onYes?: () => Promise<void>;
 }

src/db/tables/settings.ts

@@ -31,6 +31,7 @@ export type Settings = {
   }>;
 
   showContactGivesInline?: boolean; // Display contact inline or not
+  showShortcutBvc?: boolean; // Show shortcut for BVC actions
   vapid?: string; // VAPID (Voluntary Application Server Identification) field for web push
   warnIfProdServer?: boolean; // Warn if using a production server
   warnIfTestServer?: boolean; // Warn if using a testing server

src/libs/endorserServer.ts

@@ -22,7 +22,7 @@ export interface AgreeVerifiableCredential {
   "@type": string;
   // "any" because arbitrary objects can be subject of agreement
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  object: Record<any, any>;
+  object: Record<string, any>;
 }
 
 export interface GiverInputInfo {
@@ -46,23 +46,28 @@ export interface ClaimResult {
 export interface GenericVerifiableCredential {
   "@context": string;
   "@type": string;
+  [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 export interface GenericServerRecord extends GenericVerifiableCredential {
   handleId?: string;
-  id?: string;
-  issuedAt?: string;
-  issuer?: string;
+  id: string;
+  issuedAt: string;
+  issuer: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  claim: Record<any, any>;
+  claim: Record<string, any>;
   claimType?: string;
 }
 export const BLANK_GENERIC_SERVER_RECORD: GenericServerRecord = {
   "@context": SCHEMA_ORG_CONTEXT,
   "@type": "",
   claim: {},
+  id: "",
+  issuedAt: "",
+  issuer: "",
 };
 
+// a summary record; the VC is found the fullClaim field
 export interface GiveServerRecord {
   agentDid: string;
   amount: number;
@@ -77,6 +82,7 @@ export interface GiveServerRecord {
   unit: string;
 }
 
+// a summary record; the VC is found the fullClaim field
 export interface OfferServerRecord {
   amount: number;
   amountGiven: number;
@@ -94,13 +100,14 @@ export interface OfferServerRecord {
   validThrough: string;
 }
 
+// a summary record; the VC is not currently part of this record
 export interface PlanServerRecord {
   agentDid?: string; // optional, if the issuer wants someone else to manage as well
   description: string;
   endTime?: string;
   fulfillsPlanHandleId: string;
-  issuerDid: string;
   handleId: string;
+  issuerDid: string;
   locLat?: number;
   locLon?: number;
   startTime?: string;
@@ -116,6 +123,7 @@ export interface GiveVerifiableCredential {
   description?: string;
   fulfills?: { "@type": string; identifier?: string; lastClaimId?: string }[];
   identifier?: string;
+  image?: string;
   object?: { amountOfThisGood: number; unitCode: string };
   recipient?: { identifier: string };
 }
@@ -179,7 +187,7 @@ export interface PlanData {
   rowid?: string;
 }
 
-export interface RateLimits {
+export interface EndorserRateLimits {
   doneClaimsThisWeek: string;
   doneRegistrationsThisMonth: string;
   maxClaimsPerWeek: string;
@@ -188,6 +196,12 @@ export interface RateLimits {
   nextWeekBeginDateTime: string;
 }
 
+export interface ImageRateLimits {
+  doneImagesThisWeek: string;
+  maxImagesPerWeek: string;
+  nextWeekBeginDateTime: string;
+}
+
 export interface VerifiableCredential {
   "@context": string;
   "@type": string;
@@ -226,16 +240,16 @@ export interface ErrorResponse {
   };
 }
 
-export interface ErrorResult {
-  type: "error";
-  error: InternalError;
-}
-
 export interface InternalError {
   error: string; // for system logging
   userMessage?: string; // for user display
 }
 
+export interface ErrorResult extends ResultWithType {
+  type: "error";
+  error: InternalError;
+}
+
 export type CreateAndSubmitClaimResult = SuccessResult | ErrorResult;
 
 // This is used to check for hidden info.
@@ -327,7 +341,7 @@ export function addLastClaimOrHandleAsIdIfMissing(
 }
 
 // return clone of object without any nested *VisibleToDids keys
-// similar logic is found in endorser-mobile
+// similar code is also contained in endorser-mobile
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function removeVisibleToDids(input: any): any {
   if (input instanceof Object) {
@@ -337,7 +351,6 @@ export function removeVisibleToDids(input: any): any {
       const result: Record<string, any> = {};
       for (const key in input) {
         if (!key.endsWith("VisibleToDids")) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           result[key] = removeVisibleToDids(R.clone(input[key]));
         }
       }
@@ -346,16 +359,59 @@ export function removeVisibleToDids(input: any): any {
       // it's an array
       return R.map(removeVisibleToDids, input);
     }
-    return false;
   } else {
     return input;
   }
 }
 
-/**
- always returns text, maybe UNNAMED_VISIBLE or UNKNOWN_ENTITY
+export function contactForDid(
+  did: string | undefined,
+  contacts: Contact[],
+): Contact | undefined {
+  return isEmptyOrHiddenDid(did)
+    ? undefined
+    : R.find((c) => c.did === did, contacts);
+}
 
- Similar logic is found in endorser-mobile.
+/**
+ *
+ * Similar logic is found in endorser-mobile.
+ *
+ * @param did
+ * @param activeDid
+ * @param contact
+ * @param allMyDids
+ * @return { known: boolean, displayName: string } where known is true if the display name is some easily-recogizable name, false if it's a generic name like "Someone Anonymous"
+ */
+export function didInfoForContact(
+  did: string | undefined,
+  activeDid: string | undefined,
+  contact?: Contact,
+  allMyDids: string[] = [],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): { known: boolean; displayName: string } {
+  if (!did) return { displayName: "Someone Anonymous", known: false };
+  if (contact) {
+    return {
+      displayName: contact.name || "Contact With No Name",
+      known: !!contact.name,
+    };
+  } else if (did === activeDid) {
+    return { displayName: "You", known: true };
+  } else {
+    const myId = R.find(R.equals(did), allMyDids);
+    return myId
+      ? { displayName: "You (Alt ID)", known: true }
+      : isHiddenDid(did)
+        ? { displayName: "Someone Outside Your Network", known: false }
+        : { displayName: "Someone Outside Contacts", known: false };
+  }
+}
+
+/**
+ always returns text, maybe something like "unnamed" or "unknown"
+
+ Now that we're using more informational didInfoForContact under the covers, we might want to consolidate.
  **/
 export function didInfo(
   did: string | undefined,
@@ -363,19 +419,8 @@ export function didInfo(
   allMyDids: string[],
   contacts: Contact[],
 ): string {
-  if (!did) return "Someone Anonymous";
-
-  const contact = R.find((c) => c.did === did, contacts);
-  if (contact) {
-    return contact.name || "Contact With No Name";
-  } else {
-    const myId = R.find(R.equals(did), allMyDids);
-    return myId
-      ? `You${myId !== activeDid ? " (Alt ID)" : ""}`
-      : isHiddenDid(did)
-        ? "Someone Not In Network"
-        : "Someone Not In Contacts";
-  }
+  const contact = contactForDid(did, contacts);
+  return didInfoForContact(did, activeDid, contact, allMyDids).displayName;
 }
 
 /**
@@ -399,6 +444,7 @@ export async function createAndSubmitGive(
   fulfillsProjectHandleId?: string,
   fulfillsOfferHandleId?: string,
   isTrade: boolean = false,
+  imageUrl?: string,
 ): Promise<CreateAndSubmitClaimResult> {
   const vcClaim: GiveVerifiableCredential = {
     "@context": "https://schema.org",
@@ -425,6 +471,9 @@ export async function createAndSubmitGive(
       identifier: fulfillsOfferHandleId,
     });
   }
+  if (imageUrl) {
+    vcClaim.image = imageUrl;
+  }
   return createAndSubmitClaim(
     vcClaim as GenericServerRecord,
     identity,
@@ -482,6 +531,28 @@ export async function createAndSubmitOffer(
   );
 }
 
+// similar logic is found in endorser-mobile
+export const createAndSubmitConfirmation = async (
+  identifier: IIdentifier,
+  claim: GenericVerifiableCredential,
+  lastClaimId: string, // used to set the lastClaimId
+  handleId: string | undefined,
+  apiServer: string,
+  axios: Axios,
+) => {
+  const goodClaim = removeSchemaContext(
+    removeVisibleToDids(
+      addLastClaimOrHandleAsIdIfMissing(claim, lastClaimId, handleId),
+    ),
+  );
+  const confirmationClaim: GenericVerifiableCredential = {
+    "@context": "https://schema.org",
+    "@type": "AgreeAction",
+    object: goodClaim,
+  };
+  return createAndSubmitClaim(confirmationClaim, identifier, apiServer, axios);
+};
+
 export async function createAndSubmitClaim(
   vcClaim: GenericVerifiableCredential,
   identity: IIdentifier,
@@ -546,12 +617,199 @@ export async function createAndSubmitClaim(
   }
 }
 
-// from https://stackoverflow.com/a/175787/845494
-//
-export function isNumeric(str: string): boolean {
-  return !isNaN(+str);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const isAccept = (claim: Record<string, any>) => {
+  return (
+    claim &&
+    claim["@context"] === SCHEMA_ORG_CONTEXT &&
+    claim["@type"] === "AcceptAction"
+  );
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const isOffer = (claim: Record<string, any>) => {
+  return (
+    claim &&
+    claim["@context"] === SCHEMA_ORG_CONTEXT &&
+    claim["@type"] === "Offer"
+  );
+};
+
+export function currencyShortWordForCode(unitCode: string, single: boolean) {
+  return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
 }
 
-export function numberOrZero(str: string): number {
-  return isNumeric(str) ? +str : 0;
+export function displayAmount(code: string, amt: number) {
+  return "" + amt + " " + currencyShortWordForCode(code, amt === 1);
 }
+
+// insert a space before any capital letters except the initial letter
+// (and capitalize initial letter, just in case)
+export const capitalizeAndInsertSpacesBeforeCaps = (text: string) => {
+  return !text
+    ? ""
+    : text[0].toUpperCase() + text.substr(1).replace(/([A-Z])/g, " $1");
+};
+
+/**
+ return readable summary of claim, or something generic
+
+ similar code is also contained in endorser-mobile
+ **/
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const claimSummary = (claim: Record<string, any>) => {
+  if (!claim) {
+    // to differentiate from "something" above
+    return "something";
+  }
+  if (claim.claim) {
+    // probably a Verified Credential
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    claim = claim.claim as Record<string, any>;
+  }
+  if (Array.isArray(claim)) {
+    if (claim.length === 1) {
+      claim = claim[0];
+    } else {
+      return "multiple claims";
+    }
+  }
+  const type = claim["@type"];
+  if (!type) {
+    return "a claim";
+  } else {
+    let typeExpl = capitalizeAndInsertSpacesBeforeCaps(type);
+    if (typeExpl === "Person") {
+      typeExpl += " claim";
+    }
+    return "a " + typeExpl;
+  }
+};
+
+/**
+ return readable description of claim if possible, as a past-tense action
+
+ identifiers is a list of objects with a 'did' field, each representing the user
+ contacts is a list of objects with a 'did' field for others and a 'name' field for their name
+
+ similar code is also contained in endorser-mobile
+ **/
+export const claimSpecialDescription = (
+  record: GenericServerRecord,
+  activeDid: string,
+  identifiers: Array<string>,
+  contacts: Array<Contact>,
+) => {
+  let claim = record.claim;
+  if (claim.claim) {
+    // it's probably a Verified Credential
+    claim = claim.claim;
+  }
+
+  const issuer = didInfo(record.issuer, activeDid, identifiers, contacts);
+  const type = claim["@type"] || "UnknownType";
+
+  if (type === "AgreeAction") {
+    return issuer + " agreed with " + claimSummary(claim.object);
+  } else if (isAccept(claim)) {
+    return issuer + " accepted " + claimSummary(claim.object);
+  } else if (type === "GiveAction") {
+    // agent.did is for legacy data, before March 2023
+    const giver = claim.agent?.identifier || claim.agent?.did;
+    const giverInfo = didInfo(giver, activeDid, identifiers, contacts);
+    let gaveAmount = claim.object?.amountOfThisGood
+      ? displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
+      : "";
+    if (claim.description) {
+      if (gaveAmount) {
+        gaveAmount = gaveAmount + ", and also: ";
+      }
+      gaveAmount = gaveAmount + claim.description;
+    }
+    if (!gaveAmount) {
+      gaveAmount = "something not described";
+    }
+    // recipient.did is for legacy data, before March 2023
+    const gaveRecipientId = claim.recipient?.identifier || claim.recipient?.did;
+    const gaveRecipientInfo = gaveRecipientId
+      ? " to " + didInfo(gaveRecipientId, activeDid, identifiers, contacts)
+      : "";
+    return giverInfo + " gave" + gaveRecipientInfo + ": " + gaveAmount;
+  } else if (type === "JoinAction") {
+    // agent.did is for legacy data, before March 2023
+    const agent = claim.agent?.identifier || claim.agent?.did;
+    const contactInfo = didInfo(agent, activeDid, identifiers, contacts);
+
+    let eventOrganizer =
+      claim.event && claim.event.organizer && claim.event.organizer.name;
+    eventOrganizer = eventOrganizer || "";
+    let eventName = claim.event && claim.event.name;
+    eventName = eventName ? " " + eventName : "";
+    let fullEvent = eventOrganizer + eventName;
+    fullEvent = fullEvent ? " attended the " + fullEvent : "";
+
+    let eventDate = claim.event && claim.event.startTime;
+    eventDate = eventDate ? " at " + eventDate : "";
+    return contactInfo + fullEvent + eventDate;
+  } else if (isOffer(claim)) {
+    const offerer = claim.offeredBy?.identifier;
+    const contactInfo = didInfo(offerer, activeDid, identifiers, contacts);
+    let offering = "";
+    if (claim.includesObject) {
+      offering +=
+        " " +
+        displayAmount(
+          claim.includesObject.unitCode,
+          claim.includesObject.amountOfThisGood,
+        );
+    }
+    if (claim.itemOffered?.description) {
+      offering += ", saying: " + claim.itemOffered?.description;
+    }
+    // recipient.did is for legacy data, before March 2023
+    const offerRecipientId =
+      claim.recipient?.identifier || claim.recipient?.did;
+    const offerRecipientInfo = offerRecipientId
+      ? " to " + didInfo(offerRecipientId, activeDid, identifiers, contacts)
+      : "";
+    return contactInfo + " offered" + offering + offerRecipientInfo;
+  } else if (type === "PlanAction") {
+    const claimer = claim.agent?.identifier || record.issuer;
+    const claimerInfo = didInfo(claimer, activeDid, identifiers, contacts);
+    return claimerInfo + " announced a project: " + claim.name;
+  } else if (type === "Tenure") {
+    // party.did is for legacy data, before March 2023
+    const claimer = claim.party?.identifier || claim.party?.did;
+    const contactInfo = didInfo(claimer, activeDid, identifiers, contacts);
+    const polygon = claim.spatialUnit?.geo?.polygon || "";
+    return (
+      contactInfo +
+      " possesses [" +
+      polygon.substring(0, polygon.indexOf(" ")) +
+      "...]"
+    );
+  } else {
+    return issuer + " declared " + claimSummary(claim as GenericServerRecord);
+  }
+};
+
+export const BVC_MEETUPS_PROJECT_CLAIM_ID =
+  process.env.VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID ||
+  "https://endorser.ch/entity/01HNTZYJJXTGT0EZS3VEJGX7AK"; // this won't resolve as a URL on production; it's a URN only found in the test system
+
+export const bvcMeetingJoinClaim = (did: string, startTime: string) => {
+  return {
+    "@context": SCHEMA_ORG_CONTEXT,
+    "@type": "JoinAction",
+    agent: {
+      identifier: did,
+    },
+    event: {
+      organizer: {
+        name: "Bountiful Voluntaryist Community",
+      },
+      name: "Saturday Morning Meeting",
+      startTime: startTime,
+    },
+  };
+};

src/libs/util.ts

@@ -1,14 +1,16 @@
 // 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 { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
 import { GenericServerRecord, containsHiddenDid } from "@/libs/endorserServer";
 import * as serverUtil from "@/libs/endorserServer";
-import { useClipboard } from "@vueuse/core";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
@@ -16,7 +18,7 @@ const Buffer = require("buffer/").Buffer;
 // If you edit this, check that the numbers still line up on the side in the alert (on mobile, too),
 // and make sure they can take all actions while the notification shows.
 export const ONBOARD_MESSAGE =
-  "1) Check that they have entered their name on the profile page in their device. 2) Add them to your Contacts by scanning with the QR icon that is by the input box. 3) Click the person icon to register them. 4) Have them go to their Contact page and scan your QR to add you to their list.";
+  "1) Read through all their yellow prompts. 2) Add them to your Contacts by scanning with the QR icon that is by the input box. 3) Click the person icon to register them. 4) Show them your QR so they'll scan you. 5) Have them enable notifications.";
 
 /* eslint-disable prettier/prettier */
 export const UNIT_SHORT: Record<string, string> = {
@@ -55,6 +57,16 @@ export function iconForUnitCode(unitCode: string) {
   return UNIT_CODES[unitCode]?.faIcon || "question";
 }
 
+// from https://stackoverflow.com/a/175787/845494
+//
+export function isNumeric(str: string): boolean {
+  return !isNaN(+str);
+}
+
+export function numberOrZero(str: string): number {
+  return isNumeric(str) ? +str : 0;
+}
+
 export const isGlobalUri = (uri: string) => {
   return uri && uri.match(new RegExp(/^[A-Za-z][A-Za-z0-9+.-]+:/));
 };
@@ -180,6 +192,22 @@ export function findAllVisibleToDids(
  *
  **/
 
+export const getIdentity = async (activeDid: string): Promise<IIdentifier> => {
+  await accountsDB.open();
+  const account = (await accountsDB.accounts
+    .where("did")
+    .equals(activeDid)
+    .first()) as Account;
+  const identity = JSON.parse(account?.identity || "null");
+
+  if (!identity) {
+    throw new Error(
+      `Attempted to load Offer records for DID ${activeDid} but no identifier was found`,
+    );
+  }
+  return identity;
+};
+
 /**
  * Generates a new identity, saves it to the database, and sets it as the active identity.
  * @return {Promise<string>} with the DID of the new identity

src/main.ts

@@ -18,6 +18,8 @@ import {
   faBitcoinSign,
   faBurst,
   faCalendar,
+  faCamera,
+  faCheck,
   faChevronLeft,
   faChevronRight,
   faCircle,
@@ -76,6 +78,8 @@ library.add(
   faBitcoinSign,
   faBurst,
   faCalendar,
+  faCamera,
+  faCheck,
   faChevronLeft,
   faChevronRight,
   faCircle,
@@ -127,9 +131,11 @@ library.add(
 );
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import Camera from "simple-vue-camera";
 
 createApp(App)
   .component("fa", FontAwesomeIcon)
+  .component("camera", Camera)
   .use(createPinia())
   .use(VueAxios, axios)
   .use(router)

src/router/index.ts

@@ -28,12 +28,6 @@ const enterOrStart = async (
 };
 
 const routes: Array<RouteRecordRaw> = [
-  {
-    path: "/",
-    name: "home",
-    component: () =>
-      import(/* webpackChunkName: "home" */ "../views/HomeView.vue"),
-  },
   {
     path: "/account",
     name: "account",
@@ -90,12 +84,26 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "discover" */ "../views/DiscoverView.vue"),
   },
+  {
+    path: "/gifted-details",
+    name: "gifted-details",
+    component: () =>
+      import(
+        /* webpackChunkName: "gifted-details" */ "../views/GiftedDetails.vue"
+      ),
+  },
   {
     path: "/help",
     name: "help",
     component: () =>
       import(/* webpackChunkName: "help" */ "../views/HelpView.vue"),
   },
+  {
+    path: "/",
+    name: "home",
+    component: () =>
+      import(/* webpackChunkName: "home" */ "../views/HomeView.vue"),
+  },
   {
     path: "/help-notifications",
     name: "help-notifications",
@@ -165,6 +173,30 @@ const routes: Array<RouteRecordRaw> = [
       import(/* webpackChunkName: "projects" */ "../views/ProjectsView.vue"),
     beforeEnter: enterOrStart,
   },
+  {
+    path: "/quick-action-bvc",
+    name: "quick-action-bvc",
+    component: () =>
+      import(
+        /* webpackChunkName: "quick-action-bvc" */ "../views/QuickActionBvcView.vue"
+      ),
+  },
+  {
+    path: "/quick-action-bvc-begin",
+    name: "quick-action-bvc-begin",
+    component: () =>
+      import(
+        /* webpackChunkName: "quick-action-bvc-begin" */ "../views/QuickActionBvcBeginView.vue"
+      ),
+  },
+  {
+    path: "/quick-action-bvc-end",
+    name: "quick-action-bvc-end",
+    component: () =>
+      import(
+        /* webpackChunkName: "quick-action-bvc-end" */ "../views/QuickActionBvcEndView.vue"
+      ),
+  },
   {
     path: "/scan-contact",
     name: "scan-contact",

src/views/AccountViewView.vue

@@ -1,5 +1,5 @@
 <template>
-  <QuickNav selected="Profile"></QuickNav>
+  <QuickNav selected="Profile" />
   <TopMessage />
 
   <!-- CONTENT -->
@@ -96,7 +96,7 @@
     <!-- Registration notice -->
     <!-- We won't show any loading indicator because it usually doesn't change anything. We'll just pop the message in only if we discover that they need it. -->
     <div
-      v-if="!loadingLimits && !limits?.nextWeekBeginDateTime"
+      v-if="!loadingLimits && !endorserLimits?.nextWeekBeginDateTime"
       class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
     >
       <p class="mb-4">
@@ -157,28 +157,39 @@
       <div>
         {{ limitsMessage }}
       </div>
-      <div v-if="!!limits?.nextWeekBeginDateTime">
-        <p class="mb-3 text-sm">
-          You have done <b>{{ limits.doneClaimsThisWeek }}</b> claims out of
-          <b>{{ limits.maxClaimsPerWeek }}</b> for this week. Your claims
-          counter resets at
-          <b class="whitespace-nowrap">{{
-            readableTime(limits.nextWeekBeginDateTime)
-          }}</b>
-        </p>
+      <div v-if="!!endorserLimits?.nextWeekBeginDateTime">
         <p class="text-sm">
           You have done
-          <b>{{ limits.doneRegistrationsThisMonth }}</b> registrations out of
-          <b>{{ limits.maxRegistrationsPerMonth }}</b> for this month.
+          <b>{{ endorserLimits.doneClaimsThisWeek }} claims</b> out of
+          <b>{{ endorserLimits.maxClaimsPerWeek }}</b> for this week. Your
+          claims counter resets at
+          <b class="whitespace-nowrap">{{
+            readableDate(endorserLimits.nextWeekBeginDateTime)
+          }}</b>
+        </p>
+        <p class="mt-3 text-sm">
+          You have done
+          <b>{{ endorserLimits.doneRegistrationsThisMonth }} registrations</b>
+          out of <b>{{ endorserLimits.maxRegistrationsPerMonth }}</b> for this
+          month.
           <i
             >(You can register nobody on your first day, and after that only one
             a day in your first month.)</i
           >
           Your registration counter resets at
           <b class="whitespace-nowrap">
-            {{ readableTime(limits.nextMonthBeginDateTime) }}
+            {{ readableDate(endorserLimits.nextMonthBeginDateTime) }}
           </b>
         </p>
+        <p class="mt-3 text-sm" v-if="!!imageLimits">
+          You have uploaded
+          <b>{{ imageLimits?.doneImagesThisWeek }} images</b> out of
+          <b>{{ imageLimits?.maxImagesPerWeek }}</b> for this week. Your image
+          counter resets at
+          <b class="whitespace-nowrap">{{
+            readableDate(imageLimits?.nextWeekBeginDateTime)
+          }}</b>
+        </p>
       </div>
       <button
         class="block float-right w-fit text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mt-2"
@@ -299,7 +310,7 @@
       <label
         for="toggleShowAmounts"
         class="flex items-center justify-between cursor-pointer my-4"
-        @click="handleChange"
+        @click="toggleShowContactAmounts"
       >
         <!-- label -->
         <span class="text-slate-500 text-sm font-bold">Contacts Display</span>
@@ -439,6 +450,28 @@
         {{ DEFAULT_PUSH_SERVER }}
       </span>
 
+      <label
+        for="toggleShowShortcutBvc"
+        class="flex items-center justify-between cursor-pointer my-4"
+        @click="toggleShowShortcutBvc"
+      >
+        <!-- label -->
+        <span class="text-slate-500 text-sm font-bold"
+          >Show BVC Shortcut on Home Page</span
+        >
+        <!-- toggle -->
+        <div class="relative ml-2">
+          <!-- input -->
+          <input type="checkbox" v-model="showShortcutBvc" class="sr-only" />
+          <!-- line -->
+          <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+          <!-- dot -->
+          <div
+            class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+          ></div>
+        </div>
+      </label>
+
       <div class="mt-4">
         <h2 class="text-slate-500 text-sm font-bold">
           Contacts & Settings Database
@@ -485,23 +518,25 @@ import { useClipboard } from "@vueuse/core";
 
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
-import { AppString, DEFAULT_PUSH_SERVER } from "@/constants/app";
+import {
+  AppString,
+  DEFAULT_IMAGE_API_SERVER,
+  DEFAULT_PUSH_SERVER,
+  NotificationIface,
+} from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import { IIdentifier } from "@veramo/core";
-import { ErrorResponse, RateLimits } from "@/libs/endorserServer";
+import {
+  ErrorResponse,
+  EndorserRateLimits,
+  ImageRateLimits,
+} from "@/libs/endorserServer";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
 interface IAccount {
   did: string;
   publicKeyHex: string;
@@ -513,7 +548,7 @@ const inputFileNameRef = ref<Blob>();
 
 @Component({ components: { QuickNav, TopMessage } })
 export default class AccountViewView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   AppConstants = AppString;
   DEFAULT_PUSH_SERVER = DEFAULT_PUSH_SERVER;
@@ -523,7 +558,9 @@ export default class AccountViewView extends Vue {
   apiServerInput = "";
   derivationPath = "";
   downloadUrl = ""; // because DuckDuckGo doesn't download on automated call to "click" on the anchor
+  endorserLimits: EndorserRateLimits | null = null;
   givenName = "";
+  imageLimits: ImageRateLimits | null = null;
   isRegistered = false;
   isSubscribed = false;
   notificationMaybeChanged = false;
@@ -531,7 +568,6 @@ export default class AccountViewView extends Vue {
   publicBase64 = "";
   webPushServer = "";
   webPushServerInput = "";
-  limits: RateLimits | null = null;
   limitsMessage = "";
   loadingLimits = false;
   showContactGives = false;
@@ -540,6 +576,7 @@ export default class AccountViewView extends Vue {
   showB64Copy = false;
   showPubCopy = false;
   showAdvanced = false;
+  showShortcutBvc = false;
   subscription: PushSubscription | null = null;
   warnIfProdServer = false;
   warnIfTestServer = false;
@@ -599,6 +636,7 @@ export default class AccountViewView extends Vue {
       (settings?.lastName ? ` ${settings.lastName}` : ""); // pre v 0.1.3
     this.isRegistered = !!settings?.isRegistered;
     this.showContactGives = !!settings?.showContactGivesInline;
+    this.showShortcutBvc = !!settings?.showShortcutBvc;
     this.warnIfProdServer = !!settings?.warnIfProdServer;
     this.warnIfTestServer = !!settings?.warnIfTestServer;
     this.webPushServer = (settings?.webPushServer as string) || "";
@@ -656,7 +694,7 @@ export default class AccountViewView extends Vue {
       .then(() => setTimeout(fn, 2000));
   }
 
-  handleChange() {
+  toggleShowContactAmounts() {
     this.showContactGives = !this.showContactGives;
     this.updateShowContactAmounts();
   }
@@ -671,7 +709,12 @@ export default class AccountViewView extends Vue {
     this.updateWarnIfTestServer(this.warnIfTestServer);
   }
 
-  readableTime(timeStr: string) {
+  toggleShowShortcutBvc() {
+    this.showShortcutBvc = !this.showShortcutBvc;
+    this.updateShowShortcutBvc(this.showShortcutBvc);
+  }
+
+  readableDate(timeStr: string) {
     return timeStr.substring(0, timeStr.indexOf("T"));
   }
 
@@ -766,7 +809,7 @@ export default class AccountViewView extends Vue {
         -1,
       );
       console.error(
-        "Telling user to try again after contact setting update because:",
+        "Telling user to try again after contact-amounts setting update because:",
         err,
       );
     }
@@ -789,7 +832,7 @@ export default class AccountViewView extends Vue {
         -1,
       );
       console.error(
-        "Telling user to try again after setting update because:",
+        "Telling user to try again after prod-server-warning setting update because:",
         err,
       );
     }
@@ -812,7 +855,30 @@ export default class AccountViewView extends Vue {
         -1,
       );
       console.error(
-        "Telling user to try again after setting update because:",
+        "Telling user to try again after test-server-warning setting update because:",
+        err,
+      );
+    }
+  }
+
+  public async updateShowShortcutBvc(newSetting: boolean) {
+    try {
+      await db.open();
+      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,
       );
     }
@@ -989,11 +1055,11 @@ export default class AccountViewView extends Vue {
     this.limitsMessage = "";
 
     try {
-      const resp = await this.fetchRateLimits(identity);
+      const resp = await this.fetchEndorserRateLimits(identity);
       if (resp.status === 200) {
-        this.limits = resp.data;
+        this.endorserLimits = resp.data;
         if (!this.isRegistered) {
-          // the user is not known to be registered, but they are so let's record it
+          // 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, {
@@ -1013,6 +1079,10 @@ export default class AccountViewView extends Vue {
             );
           }
         }
+        const imageResp = await this.fetchImageRateLimits(identity);
+        if (imageResp.status === 200) {
+          this.imageLimits = imageResp.data;
+        }
       }
     } catch (error) {
       this.handleRateLimitsError(error);
@@ -1033,17 +1103,29 @@ export default class AccountViewView extends Vue {
   }
 
   /**
-   * Fetches rate limits from the server.
+   * Fetches rate limits from the Endorser server.
    *
    * @param {IIdentifier} identity - The identity object to check rate limits for.
    * @returns {Promise<AxiosResponse>} The Axios response object.
    */
-  private async fetchRateLimits(identity: IIdentifier) {
+  private async fetchEndorserRateLimits(identity: IIdentifier) {
     const url = `${this.apiServer}/api/report/rateLimits`;
     const headers = await this.getHeaders(identity);
     return await this.axios.get(url, { headers } as AxiosRequestConfig);
   }
 
+  /**
+   * Fetches rate limits from the image server.
+   *
+   * @param {IIdentifier} identity - The identity object to check rate limits for.
+   * @returns {Promise<AxiosResponse>} The Axios response object.
+   */
+  private async fetchImageRateLimits(identity: IIdentifier) {
+    const url = DEFAULT_IMAGE_API_SERVER + "/image-limits";
+    const headers = await this.getHeaders(identity);
+    return await this.axios.get(url, { headers } as AxiosRequestConfig);
+  }
+
   /**
    * Handles errors that occur while fetching rate limits.
    *

src/views/ClaimView.vue

@@ -407,6 +407,7 @@ import { useClipboard } from "@vueuse/core";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import OfferDialog from "@/components/OfferDialog.vue";
+import { NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
@@ -418,18 +419,11 @@ import EntityIcon from "@/components/EntityIcon.vue";
 import { Account } from "@/db/tables/accounts";
 import { GiverInputInfo } from "@/libs/endorserServer";
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
 @Component({
   components: { EntityIcon, GiftedDialog, OfferDialog, QuickNav },
 })
 export default class ClaimView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   accountIdentityStr: string = "null";
   activeDid = "";
@@ -736,10 +730,7 @@ export default class ClaimView extends Vue {
           ),
         ),
       );
-      const confirmationClaim: serverUtil.GenericVerifiableCredential & {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        object: any;
-      } = {
+      const confirmationClaim: serverUtil.GenericVerifiableCredential = {
         "@context": "https://schema.org",
         "@type": "AgreeAction",
         object: goodClaim,

src/views/ContactAmountsView.vue

@@ -105,9 +105,14 @@
 </template>
 
 <script lang="ts">
+import { AxiosError } from "axios";
+import * as didJwt from "did-jwt";
 import * as R from "ramda";
-
+import { IIdentifier } from "@veramo/core";
 import { Component, Vue } from "vue-facing-decorator";
+
+import 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";
@@ -118,21 +123,10 @@ import {
   GiveVerifiableCredential,
   SCHEMA_ORG_CONTEXT,
 } from "@/libs/endorserServer";
-import * as didJwt from "did-jwt";
-import { AxiosError } from "axios";
-import QuickNav from "@/components/QuickNav.vue";
-import { IIdentifier } from "@veramo/core";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
 
 @Component({ components: { QuickNav } })
 export default class ContactAmountssView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   activeDid = "";
   apiServer = "";
@@ -185,7 +179,7 @@ export default class ContactAmountssView extends Vue {
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
-      console.log("Error retrieving settings or gives.", err);
+      console.error("Error retrieving settings or gives.", err);
       this.$notify(
         {
           group: "alert",

src/views/ContactGiftingView.vue

@@ -76,29 +76,24 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { IIdentifier } from "@veramo/core";
+
 import GiftedDialog from "@/components/GiftedDialog.vue";
+import QuickNav from "@/components/QuickNav.vue";
+import EntityIcon from "@/components/EntityIcon.vue";
+import { NotificationIface } from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
 import { Account, AccountsSchema } 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 { GiverInputInfo } from "@/libs/endorserServer";
-import { Contact } from "@/db/tables/contacts";
-import QuickNav from "@/components/QuickNav.vue";
-import EntityIcon from "@/components/EntityIcon.vue";
-import { IIdentifier } from "@veramo/core";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
 
 @Component({
   components: { GiftedDialog, QuickNav, EntityIcon },
 })
 export default class ContactGiftingView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   activeDid = "";
   allContacts: Array<Contact> = [];
@@ -118,13 +113,13 @@ export default class ContactGiftingView extends Vue {
       const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
       this.apiServer = settings?.apiServer || "";
       this.activeDid = settings?.activeDid || "";
-      this.allContacts = await db.contacts.toArray();
+      this.allContacts = await db.contacts.orderBy("name").toArray();
 
       localStorage.removeItem("projectId");
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
-      console.log("Error retrieving settings & contacts:", err);
+      console.error("Error retrieving settings & contacts:", err);
       this.$notify(
         {
           group: "alert",

src/views/ContactQRScanShowView.vue

@@ -18,19 +18,22 @@
       <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4">
         Your Contact Info
       </h1>
-      <p v-if="!givenName" class="text-center mt-2">
+      <p
+        v-if="!givenName"
+        class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
+      >
         <span class="text-red">Beware!</span>
-        You aren't sharing your name, so hurry and
+        You aren't sharing your name, so quickly
         <router-link
           :to="{ name: 'new-edit-account' }"
           class="bg-blue-500 text-white px-1.5 py-1 rounded-md"
         >
-          go here to set it for them.
+          click here to set it for them.
         </router-link>
       </p>
     </div>
 
-    <div @click="onCopyToClipboard()" v-if="activeDid">
+    <div @click="onCopyToClipboard()" v-if="activeDid" class="text-center">
       <!--
         Play with display options: https://qr-code-styling.com/
         See docs: https://www.npmjs.com/package/qr-code-generator-vue3
@@ -41,9 +44,7 @@
         :dotsOptions="{ type: 'square' }"
         class="flex justify-center"
       />
-      <span class="flex justify-center">
-        Click QR to copy your contact URL to your clipboard.
-      </span>
+      <span> Click QR to copy your contact URL to your clipboard. </span>
     </div>
     <div class="text-center" v-else>
       You have no identitifiers yet, so
@@ -77,6 +78,7 @@ import { Component, Vue } from "vue-facing-decorator";
 import { QrcodeStream } from "vue-qrcode-reader";
 import { useClipboard } from "@vueuse/core";
 
+import { NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { deriveAddress, nextDerivationPath, SimpleSigner } from "@/libs/crypto";
@@ -90,13 +92,6 @@ import {
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
 @Component({
   components: {
     QrcodeStream,
@@ -105,7 +100,7 @@ interface Notification {
   },
 })
 export default class ContactQRScanShow extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   activeDid = "";
   apiServer = "";
@@ -185,7 +180,6 @@ export default class ContactQRScanShow extends Vue {
   // 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 {
@@ -203,7 +197,7 @@ export default class ContactQRScanShow extends Vue {
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onScanError(error: any) {
-    console.log("Scan was invalid:", error);
+    console.error("Scan was invalid:", error);
     this.$notify(
       {
         group: "alert",

src/views/ContactsView.vue

@@ -284,6 +284,7 @@
 
 <script lang="ts">
 import { AxiosError } from "axios";
+import { IndexableType } from "dexie";
 import * as didJwt from "did-jwt";
 import * as R from "ramda";
 import { IIdentifier } from "@veramo/core";
@@ -311,7 +312,6 @@ import * as libsUtil from "@/libs/util";
 import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
 import { Account } from "@/db/tables/accounts";
-import { IndexableType } from "dexie";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
@@ -364,11 +364,7 @@ export default class ContactsView extends Vue {
     if (this.showGiveNumbers) {
       this.loadGives();
     }
-    const allContacts = await db.contacts.toArray();
-    this.contacts = R.sort(
-      (a: Contact, b) => (a.name || "").localeCompare(b.name || ""),
-      allContacts,
-    );
+    this.contacts = await db.contacts.orderBy("name").toArray();
 
     if (this.contactEndorserUrl) {
       await this.addContactFromScan(this.contactEndorserUrl);
@@ -501,7 +497,7 @@ export default class ContactsView extends Vue {
       this.givenToMeConfirmed = givenToMeConfirmed;
       this.givenToMeUnconfirmed = givenToMeUnconfirmed;
     } catch (error) {
-      console.log("Error loading gives", error);
+      console.error("Error loading gives", error);
       this.$notify(
         {
           group: "alert",
@@ -576,11 +572,7 @@ export default class ContactsView extends Vue {
           -1,
         );
       }
-      const allContacts = await db.contacts.toArray();
-      this.contacts = R.sort(
-        (a: Contact, b) => (a.name || "").localeCompare(b.name || ""),
-        allContacts,
-      );
+      this.contacts = await db.contacts.orderBy("name").toArray();
       return;
     }
 
@@ -876,7 +868,7 @@ export default class ContactsView extends Vue {
                   (contact.name || "That unnamed person") +
                   " has been registered.",
               },
-              -1,
+              5000,
             );
           }
         } catch (error) {
@@ -1008,7 +1000,7 @@ export default class ContactsView extends Vue {
           -1,
         );
       } else {
-        console.log("Got bad server response when checking visibility: ", resp);
+        console.error("Got bad server response checking visibility:", resp);
         const message = resp.data.error?.message || "Got bad server response.";
         this.$notify(
           {
@@ -1021,7 +1013,7 @@ export default class ContactsView extends Vue {
         );
       }
     } catch (err) {
-      console.log("Caught error from request to check visibility:", err);
+      console.error("Caught error from request to check visibility:", err);
       this.$notify(
         {
           group: "alert",
@@ -1034,12 +1026,6 @@ export default class ContactsView extends Vue {
     }
   }
 
-  // from https://stackoverflow.com/a/175787/845494
-  //
-  private isNumeric(str: string): boolean {
-    return !isNaN(+str);
-  }
-
   private nameForDid(contacts: Array<Contact>, did: string): string {
     const contact = R.find((con) => con.did == did, contacts);
     return this.nameForContact(contact);
@@ -1075,7 +1061,7 @@ export default class ContactsView extends Vue {
         return;
       }
     }
-    if (!this.isNumeric(this.hourInput)) {
+    if (!libsUtil.isNumeric(this.hourInput)) {
       this.$notify(
         {
           group: "alert",
@@ -1198,7 +1184,7 @@ export default class ContactsView extends Vue {
               title: "Done",
               text: "Successfully logged time to the server.",
             },
-            -1,
+            5000,
           );
 
           if (fromDid === identity.did) {
@@ -1212,7 +1198,7 @@ export default class ContactsView extends Vue {
           }
         }
       } catch (error) {
-        console.log("Error in createAndSubmitContactGive: ", error);
+        console.error("Error in createAndSubmitContactGive: ", error);
         let userMessage = "There was an error. See logs for more info.";
         const serverError = error as AxiosError;
         if (serverError) {

src/views/DiscoverView.vue

@@ -129,23 +129,17 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 
-import { accountsDB, db } from "@/db/index";
-import { Contact } from "@/db/tables/contacts";
-import { BoundingBox, MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { accessToken } from "@/libs/crypto";
-import { didInfo, PlanData } from "@/libs/endorserServer";
 import QuickNav from "@/components/QuickNav.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
 import TopMessage from "@/components/TopMessage.vue";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
+import { NotificationIface } from "@/constants/app";
+import { accountsDB, db } from "@/db/index";
+import { Contact } from "@/db/tables/contacts";
+import { BoundingBox, MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { accessToken } from "@/libs/crypto";
+import { didInfo, PlanData } from "@/libs/endorserServer";
 
 @Component({
   components: {
@@ -157,7 +151,7 @@ interface Notification {
   },
 })
 export default class DiscoverView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   activeDid = "";
   allContacts: Array<Contact> = [];
@@ -260,7 +254,7 @@ export default class DiscoverView extends Vue {
 
       if (response.status !== 200) {
         const details = await response.text();
-        console.log("Problem with full search:", details);
+        console.error("Problem with full search:", details);
         this.$notify(
           {
             group: "alert",
@@ -288,7 +282,7 @@ export default class DiscoverView extends Vue {
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (e: any) {
-      console.log("Error with feed load:", e);
+      console.error("Error with feed load:", e);
       this.$notify(
         {
           group: "alert",
@@ -343,7 +337,7 @@ export default class DiscoverView extends Vue {
 
       if (response.status !== 200) {
         const details = await response.text();
-        console.log("Problem with nearby search:", details);
+        console.error("Problem with nearby search:", details);
         this.$notify(
           {
             group: "alert",
@@ -380,7 +374,7 @@ export default class DiscoverView extends Vue {
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (e: any) {
-      console.log("Error with feed load:", e);
+      console.error("Error with feed load:", e);
       this.$notify(
         {
           group: "alert",

src/views/GiftedDetails.vue

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

src/views/HelpNotificationsView.vue

@@ -294,18 +294,12 @@
 import { Component, Vue } from "vue-facing-decorator";
 
 import QuickNav from "@/components/QuickNav.vue";
+import { NotificationIface } from "@/constants/app";
 import { sendTestThroughPushServer } from "@/libs/util";
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
 @Component({ components: { QuickNav } })
 export default class HelpNotificationsView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   subscription: PushSubscription | null = null;
 

src/views/HelpView.vue

@@ -325,18 +325,12 @@ import { Component, Vue } from "vue-facing-decorator";
 
 import * as Package from "../../package.json";
 import QuickNav from "@/components/QuickNav.vue";
+import { NotificationIface } from "@/constants/app";
 import { ONBOARD_MESSAGE } from "@/libs/util";
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
 @Component({ components: { QuickNav } })
 export default class Help extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   package = Package;
   commitHash = process.env.VUE_APP_GIT_HASH;

src/views/HomeView.vue

@@ -1,10 +1,10 @@
 <template>
-  <QuickNav selected="Home"></QuickNav>
+  <QuickNav selected="Home" />
   <TopMessage />
 
   <!-- CONTENT -->
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+  <section id="Content" class="p-2 pb-24 max-w-3xl mx-auto">
+    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-8">
       Time Safari
     </h1>
 
@@ -30,7 +30,7 @@
             and go click on that new app.
           </span>
           <span
-            v-else-if="userAgentInfo.getBrowser().name.startsWith('Chrome')"
+            v-else-if="userAgentInfo.getBrowser()?.name?.startsWith('Chrome')"
           >
             You should see a prompt to install, or you can click on the
             top-right dots
@@ -59,6 +59,15 @@
       </div>
     </div>
 
+    <div v-if="showShortcutBvc" class="mb-4">
+      <router-link
+        :to="{ name: 'quick-action-bvc' }"
+        class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
+      >
+        Bountiful Voluntaryist Community Actions</router-link
+      >
+    </div>
+
     <!-- show the actions for recognizing a give -->
     <div class="mb-8">
       <div v-if="isCreatingIdentifier">
@@ -105,14 +114,8 @@
 
       <div v-else>
         <!-- activeDid && isRegistered -->
-        <div class="flex justify-between mb-4">
-          <h2 class="text-xl font-bold">Record Something Given</h2>
-          <button
-            @click="openGiftedPrompts()"
-            class="block text-center text-md font-bold bg-blue-500 text-white px-2 py-3 rounded-md"
-          >
-            Ideas...
-          </button>
+        <div class="mb-4">
+          <h2 class="text-xl font-bold">Record Something Given By:</h2>
         </div>
 
         <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
@@ -145,21 +148,20 @@
           </li>
         </ul>
 
-        <!-- Ideally, this button should only be visible when the active account has more than 7 or 11 contacts in their list (we want to limit the grid count above to 8 or 12 accounts to keep it compact) -->
-        <router-link
-          v-if="allContacts.length >= 7"
-          :to="{ name: 'contact-gives' }"
-          class="block text-center text-md font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md"
-        >
-          Show More Contacts&hellip;
-        </router-link>
-
-        <!-- If there are no contacts, show this instead: -->
-        <div
-          class="rounded border border-dashed border-slate-300 bg-slate-100 px-4 py-3 text-center italic text-slate-500"
-          v-if="allContacts.length === 0"
-        >
-          (No contacts to show.)
+        <div class="flex justify-between">
+          <router-link
+            v-if="allContacts.length >= 7"
+            :to="{ name: 'contact-gives' }"
+            class="block text-center text-md font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md"
+          >
+            Choose From All Contacts
+          </router-link>
+          <button
+            @click="openGiftedPrompts()"
+            class="block text-center text-md font-bold bg-slate-500 text-white px-2 py-3 rounded-md"
+          >
+            Ideas...
+          </button>
         </div>
       </div>
     </div>
@@ -185,16 +187,24 @@
               class="border-b border-dashed border-slate-400 text-orange-400 pb-2 mb-2 font-bold uppercase text-sm"
               v-if="record.jwtId == feedLastViewedClaimId"
             >
-              You've seen all the following before
+              You've already seen all the following
             </div>
 
             <div class="grid grid-cols-12">
               <span class="col-span-11 justify-self-start">
-                <fa
-                  icon="gift"
-                  class="col-span-1 pt-1 pr-2 text-slate-500"
-                ></fa>
-                {{ this.giveDescription(record) }}
+                <span>
+                  <fa
+                    v-if="record.giver.known || record.receiver.known"
+                    icon="circle-user"
+                    class="col-span-1 pt-1 pl-0 pr-3 text-slate-500"
+                  />
+                  <fa
+                    v-else
+                    icon="gift"
+                    class="col-span-1 pt-1 pl-3 pr-0 text-slate-500"
+                  />
+                </span>
+                {{ giveDescription(record) }}
                 <a @click="onClickLoadClaim(record.jwtId)">
                   <fa
                     icon="circle-info"
@@ -215,6 +225,11 @@
                 </router-link>
               </span>
             </div>
+            <div v-if="record.image" class="flex justify-center">
+              <a :href="record.image" target="_blank">
+                <img :src="record.image" class="h-24 mt-2 rounded-xl" />
+              </a>
+            </div>
           </li>
         </ul>
       </InfiniteScroll>
@@ -229,6 +244,7 @@
 
 <script lang="ts">
 import { UAParser } from "ua-parser-js";
+import { IIdentifier } from "@veramo/core";
 import { Component, Vue } from "vue-facing-decorator";
 
 import EntityIcon from "@/components/EntityIcon.vue";
@@ -237,24 +253,30 @@ import GiftedPrompts from "@/components/GiftedPrompts.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
+import { NotificationIface } from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
 import { Account } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import {
-  didInfo,
+  contactForDid,
+  didInfoForContact,
   GiverInputInfo,
   GiveServerRecord,
 } from "@/libs/endorserServer";
-import { IIdentifier } from "@veramo/core";
 import { generateSaveAndActivateIdentity } from "@/libs/util";
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
+interface GiveRecordWithContactInfo extends GiveServerRecord {
+  giver: {
+    displayName: string;
+    known: boolean;
+  };
+  image: string;
+  receiver: {
+    displayName: string;
+    known: boolean;
+  };
 }
 
 @Component({
@@ -268,18 +290,19 @@ interface Notification {
   },
 })
 export default class HomeView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   activeDid = "";
   allContacts: Array<Contact> = [];
   allMyDids: Array<string> = [];
   apiServer = "";
-  feedData: GiveServerRecord[] = [];
+  feedData: GiveRecordWithContactInfo[] = [];
   feedPreviousOldestId?: string;
   feedLastViewedClaimId?: string;
   isCreatingIdentifier = false;
   isFeedLoading = true;
   isRegistered = false;
+  showShortcutBvc = false;
   userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
 
   public async getIdentity(activeDid: string) {
@@ -314,6 +337,7 @@ export default class HomeView extends Vue {
       this.allContacts = await db.contacts.toArray();
       this.feedLastViewedClaimId = settings?.lastViewedClaimId;
       this.isRegistered = !!settings?.isRegistered;
+      this.showShortcutBvc = !!settings?.showShortcutBvc;
 
       if (this.allMyDids.length === 0) {
         this.isCreatingIdentifier = true;
@@ -328,7 +352,7 @@ export default class HomeView extends Vue {
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
-      console.log("Error retrieving settings or feed.", err);
+      console.error("Error retrieving settings or feed.", err);
       this.$notify(
         {
           group: "alert",
@@ -388,7 +412,38 @@ export default class HomeView extends Vue {
     await this.retrieveGives(this.apiServer, this.feedPreviousOldestId)
       .then(async (results) => {
         if (results.data.length > 0) {
-          this.feedData = this.feedData.concat(results.data);
+          // include the descriptions of the giver and receiver
+          const newFeedData: GiveRecordWithContactInfo = results.data.map(
+            (record: 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 = (record.fullClaim as any).claim || record.fullClaim;
+              // agent.did is for legacy data, before March 2023
+              const giverDid =
+                claim.agent?.identifier || (claim.agent as any)?.did; // eslint-disable-line @typescript-eslint/no-explicit-any
+              // recipient.did is for legacy data, before March 2023
+              const recipientDid =
+                claim.recipient?.identifier || (claim.recipient as any)?.did; // eslint-disable-line @typescript-eslint/no-explicit-any
+              return {
+                ...record,
+                giver: didInfoForContact(
+                  giverDid,
+                  this.activeDid,
+                  contactForDid(giverDid, this.allContacts),
+                  this.allMyDids,
+                ),
+                image: claim.image,
+                receiver: didInfoForContact(
+                  recipientDid,
+                  this.activeDid,
+                  contactForDid(recipientDid, this.allContacts),
+                  this.allMyDids,
+                ),
+              };
+            },
+          );
+          this.feedData = this.feedData.concat(newFeedData);
           this.feedPreviousOldestId =
             results.data[results.data.length - 1].jwtId;
           // The following update is only done on the first load.
@@ -404,7 +459,7 @@ export default class HomeView extends Vue {
         }
       })
       .catch((e) => {
-        console.log("Error with feed load:", e);
+        console.error("Error with feed load:", e);
         this.$notify(
           {
             group: "alert",
@@ -436,7 +491,7 @@ export default class HomeView extends Vue {
       },
     );
 
-    if (response.status !== 200) {
+    if (!response.ok) {
       throw await response.text();
     }
 
@@ -449,46 +504,52 @@ export default class HomeView extends Vue {
     }
   }
 
-  giveDescription(giveRecord: GiveServerRecord) {
+  giveDescription(giveRecord: GiveRecordWithContactInfo) {
     // similar code is in endorser-mobile utility.ts
     // claim.claim happen for some claims wrapped in a Verifiable Credential
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const claim = (giveRecord.fullClaim as any).claim || giveRecord.fullClaim;
-    // agent.did is for legacy data, before March 2023
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const giverDid = claim.agent?.identifier || (claim.agent as any)?.did;
-    const giverInfo = didInfo(
-      giverDid,
-      this.activeDid,
-      this.allMyDids,
-      this.allContacts,
-    );
+
     let gaveAmount = claim.object?.amountOfThisGood
       ? this.displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
       : "";
     if (claim.description) {
       if (gaveAmount) {
-        gaveAmount = gaveAmount + ", and also: ";
+        gaveAmount = " (and " + gaveAmount + ")";
       }
-      gaveAmount = gaveAmount + claim.description;
+      gaveAmount = claim.description + gaveAmount;
     }
     if (!gaveAmount) {
       gaveAmount = "something not described";
     }
-    // recipient.did is for legacy data, before March 2023
-    const gaveRecipientId =
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      claim.recipient?.identifier || (claim.recipient as any)?.did;
-    const gaveRecipientInfo = gaveRecipientId
-      ? " to " +
-        didInfo(
-          gaveRecipientId,
-          this.activeDid,
-          this.allMyDids,
-          this.allContacts,
-        )
-      : "";
-    return giverInfo + " gave" + gaveRecipientInfo + ": " + gaveAmount;
+
+    /**
+     * Only show giver and/or receiver info first if they're named.
+     * - If only giver is named, show "... gave"
+     * - If only receiver is named, show "... received"
+     */
+
+    const giverInfo = giveRecord.giver;
+    const recipientInfo = giveRecord.receiver;
+    if (giverInfo.known && recipientInfo.known) {
+      // both giver and recipient are named
+      return `${giverInfo.displayName} gave to ${recipientInfo.displayName}: ${gaveAmount}`;
+    } else if (giverInfo.known) {
+      // giver is named but recipient is not
+      return `${giverInfo.displayName} gave: ${gaveAmount} (to ${recipientInfo.displayName})`;
+    } else if (recipientInfo.known) {
+      // recipient is named but giver is not
+      return `${recipientInfo.displayName} received: ${gaveAmount} (from ${giverInfo.displayName})`;
+    } else {
+      // neither giver nor recipient are named
+      let peopleInfo;
+      if (giverInfo.displayName === recipientInfo.displayName) {
+        peopleInfo = `between two who are ${giverInfo.displayName}`;
+      } else {
+        peopleInfo = `from ${giverInfo.displayName} to ${recipientInfo.displayName}`;
+      }
+      return gaveAmount + " (" + peopleInfo + ")";
+    }
   }
 
   onClickLoadClaim(jwtId: string) {
@@ -506,7 +567,7 @@ export default class HomeView extends Vue {
     return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
   }
 
-  openDialog(giver: GiverInputInfo) {
+  openDialog(giver?: GiverInputInfo) {
     (this.$refs.customDialog as GiftedDialog).open(giver);
   }
 

src/views/IdentitySwitcherView.vue

@@ -80,22 +80,16 @@
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
-import { AppString } from "@/constants/app";
+
+import { AppString, NotificationIface } from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
 import { AccountsSchema } from "@/db/tables/accounts";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import QuickNav from "@/components/QuickNav.vue";
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
 @Component({ components: { QuickNav } })
 export default class IdentitySwitcherView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   Constants = AppString;
   public accounts: typeof AccountsSchema;

src/views/ImportAccountView.vue

@@ -75,20 +75,15 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+
+import { NotificationIface } from "@/constants/app";
+import { accountsDB, db } from "@/db/index";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import {
   DEFAULT_ROOT_DERIVATION_PATH,
   deriveAddress,
   newIdentifier,
-} from "../libs/crypto";
-import { accountsDB, db } from "@/db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
+} from "@/libs/crypto";
 
 @Component({
   components: {},
@@ -96,7 +91,7 @@ interface Notification {
 export default class ImportAccountView extends Vue {
   UPORT_DERIVATION_PATH = "m/7696500'/0'/0'/0'"; // for legacy imports, likely never used
 
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   mnemonic = "";
   address = "";

src/views/NewEditProjectView.vue

@@ -138,6 +138,7 @@ import { Component, Vue } from "vue-facing-decorator";
 import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
 
 import QuickNav from "@/components/QuickNav.vue";
+import { NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken, SimpleSigner } from "@/libs/crypto";
@@ -145,18 +146,11 @@ import { useAppStore } from "@/store/app";
 import { IIdentifier } from "@veramo/core";
 import { PlanVerifiableCredential } from "@/libs/endorserServer";
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
 @Component({
   components: { LMap, LMarker, LTileLayer, QuickNav },
 })
 export default class NewEditProjectView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   activeDid = "";
   agentDid = "";

src/views/ProjectViewView.vue

@@ -348,7 +348,12 @@ import { Component, Vue } from "vue-facing-decorator";
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import OfferDialog from "@/components/OfferDialog.vue";
 import TopMessage from "@/components/TopMessage.vue";
+import QuickNav from "@/components/QuickNav.vue";
+import EntityIcon from "@/components/EntityIcon.vue";
+import ProjectIcon from "@/components/ProjectIcon.vue";
+import { NotificationIface } from "@/constants/app";
 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";
@@ -362,17 +367,6 @@ import {
   PlanServerRecord,
 } from "@/libs/endorserServer";
 import * as serverUtil from "@/libs/endorserServer";
-import QuickNav from "@/components/QuickNav.vue";
-import EntityIcon from "@/components/EntityIcon.vue";
-import ProjectIcon from "@/components/ProjectIcon.vue";
-import { Account } from "@/db/tables/accounts";
-
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
 
 @Component({
   components: {
@@ -385,7 +379,7 @@ interface Notification {
   },
 })
 export default class ProjectViewView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   activeDid = "";
   agentDid = "";
@@ -443,15 +437,6 @@ export default class ProjectViewView extends Vue {
     return identity;
   }
 
-  public async getHeaders(identity: IIdentifier) {
-    const token = await accessToken(identity);
-    const headers = {
-      "Content-Type": "application/json",
-      Authorization: "Bearer " + token,
-    };
-    return headers;
-  }
-
   onEditClick() {
     localStorage.setItem("projectId", this.projectId as string);
     const route = {
@@ -806,10 +791,7 @@ export default class ProjectViewView extends Vue {
           ),
         ),
       );
-      const confirmationClaim: serverUtil.GenericVerifiableCredential & {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        object: any;
-      } = {
+      const confirmationClaim: serverUtil.GenericVerifiableCredential = {
         "@context": "https://schema.org",
         "@type": "AgreeAction",
         object: goodClaim,

src/views/ProjectsView.vue

@@ -213,6 +213,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 
+import { NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
@@ -225,18 +226,11 @@ import TopMessage from "@/components/TopMessage.vue";
 import { OfferServerRecord, PlanData } from "@/libs/endorserServer";
 import EntityIcon from "@/components/EntityIcon.vue";
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
 @Component({
   components: { EntityIcon, InfiniteScroll, QuickNav, ProjectIcon, TopMessage },
 })
 export default class ProjectsView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   apiServer = "";
   projects: PlanData[] = [];

src/views/QuickActionBvcBeginView.vue

@@ -0,0 +1,220 @@
+<template>
+  <QuickNav />
+  <TopMessage />
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Back -->
+    <div class="text-lg text-center font-light relative px-7">
+      <h1
+        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        @click="$router.back()"
+      >
+        <fa icon="chevron-left" class="fa-fw"></fa>
+      </h1>
+    </div>
+
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
+      Beginning of BVC Saturday Meeting
+    </h1>
+
+    <div>
+      <h2 class="text-2xl m-2">You're Here</h2>
+      <div class="m-2 flex">
+        <input type="checkbox" v-model="attended" class="h-6 w-6" />
+        <span class="pb-2 pl-2 pr-2">Attended</span>
+      </div>
+      <div class="m-2 flex">
+        <input type="checkbox" v-model="gaveTime" class="h-6 w-6" />
+        <span class="pb-2 pl-2 pr-2">Spent Time</span>
+        <span v-if="gaveTime">
+          <input
+            type="text"
+            placeholder="How much time"
+            v-model="hoursStr"
+            size="1"
+            class="border border-slate-400 h-6 px-2"
+          />
+          hour(s)
+        </span>
+        <!-- This is to match input height to avoid shifting when hiding & showing. -->
+        <span v-else class="h-6" />
+      </div>
+    </div>
+
+    <div
+      v-if="attended || (gaveTime && hoursStr && hoursStr != '0')"
+      class="flex justify-center mt-4"
+    >
+      <button
+        @click="record()"
+        class="block text-center text-md font-bold bg-blue-500 text-white px-2 py-3 rounded-md w-56"
+      >
+        Sign & Send
+      </button>
+    </div>
+    <div v-else class="flex justify-center mt-4">
+      <button
+        class="block text-center text-md font-bold bg-slate-500 text-white px-2 py-3 rounded-md w-56"
+      >
+        Select Your Actions
+      </button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import axios from "axios";
+import { DateTime } from "luxon";
+import { Component, Vue } from "vue-facing-decorator";
+
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+import { NotificationIface } from "@/constants/app";
+import { db } from "@/db/index";
+import {
+  BVC_MEETUPS_PROJECT_CLAIM_ID,
+  bvcMeetingJoinClaim,
+  createAndSubmitClaim,
+  createAndSubmitGive,
+} from "@/libs/endorserServer";
+import * as libsUtil from "@/libs/util";
+import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
+
+@Component({
+  components: {
+    QuickNav,
+    TopMessage,
+  },
+})
+export default class QuickActionBvcBeginView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  attended = true;
+  gaveTime = true;
+  hoursStr = "1";
+  todayOrPreviousStartDate = "";
+
+  async mounted() {
+    let currentOrPreviousSat = DateTime.now().setZone("America/Denver");
+    if (currentOrPreviousSat.weekday < 6) {
+      // it's not Saturday or Sunday,
+      // so move back one week before setting to the Saturday
+      currentOrPreviousSat = currentOrPreviousSat.minus({ week: 1 });
+    }
+    const eventStartDateObj = currentOrPreviousSat
+      .set({ weekday: 6 })
+      .set({ hour: 9 })
+      .startOf("hour");
+
+    // Hack, but full ISO pushes the length to 340 which crashes verifyJWT!
+    this.todayOrPreviousStartDate =
+      eventStartDateObj.toISO({
+        suppressMilliseconds: true,
+      }) || "";
+  }
+
+  async record() {
+    await db.open();
+    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+    const activeDid = settings?.activeDid || "";
+    const apiServer = settings?.apiServer || "";
+
+    try {
+      const hoursNum = libsUtil.numberOrZero(this.hoursStr);
+      const identity = await libsUtil.getIdentity(activeDid);
+
+      // first send the claim for time given
+      let timeSuccess = false;
+      if (this.gaveTime && hoursNum > 0) {
+        const timeResult = await createAndSubmitGive(
+          axios,
+          apiServer,
+          identity,
+          activeDid,
+          undefined,
+          undefined,
+          hoursNum,
+          "HUR",
+          BVC_MEETUPS_PROJECT_CLAIM_ID,
+        );
+        if (timeResult.type === "success") {
+          timeSuccess = true;
+        } else {
+          console.error("Error sending time:", timeResult);
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error",
+              text:
+                timeResult?.error?.userMessage ||
+                "There was an error sending the time.",
+            },
+            -1,
+          );
+        }
+      }
+
+      // now send the claim for attendance
+      let attendedSuccess = false;
+      if (this.attended) {
+        const attendResult = await createAndSubmitClaim(
+          bvcMeetingJoinClaim(activeDid, this.todayOrPreviousStartDate),
+          identity,
+          apiServer,
+          axios,
+        );
+        if (attendResult.type === "success") {
+          attendedSuccess = true;
+        } else {
+          console.error("Error sending attendance:", attendResult);
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error",
+              text:
+                attendResult?.error?.userMessage ||
+                "There was an error sending the attendance.",
+            },
+            -1,
+          );
+        }
+      }
+
+      if (timeSuccess || attendedSuccess) {
+        const actions =
+          timeSuccess && attendedSuccess
+            ? "Your attendance and time have been recorded."
+            : timeSuccess
+              ? "Your time has been recorded."
+              : "Your attendance has been recorded.";
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Success",
+            text: actions,
+          },
+          -1,
+        );
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      console.error("Error sending claims.", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: error.userMessage || "There was an error sending claims.",
+        },
+        -1,
+      );
+    }
+  }
+}
+</script>

src/views/QuickActionBvcEndView.vue

@@ -0,0 +1,377 @@
+<template>
+  <QuickNav />
+  <TopMessage />
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Back -->
+    <div class="text-lg text-center font-light relative px-7">
+      <h1
+        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        @click="$router.back()"
+      >
+        <fa icon="chevron-left" class="fa-fw"></fa>
+      </h1>
+    </div>
+
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
+      End of BVC Saturday Meeting
+    </h1>
+
+    <div>
+      <h2 class="text-2xl m-2">Confirm</h2>
+      <div v-if="loadingConfirms" class="flex justify-center">
+        <fa icon="spinner" class="animate-spin" />
+      </div>
+      <div v-else-if="claimsToConfirm.length === 0">
+        There are no claims yet today for you to confirm.
+      </div>
+      <ul class="border-t border-slate-300 m-2">
+        <li
+          class="border-b border-slate-300 py-2"
+          v-for="record in claimsToConfirm"
+          :key="record.id"
+        >
+          <div class="grid grid-cols-12">
+            <span class="col-span-11 justify-self-start">
+              <span>
+                <input
+                  type="checkbox"
+                  :checked="claimsToConfirmSelected.includes(record.id)"
+                  @click="
+                    claimsToConfirmSelected.includes(record.id)
+                      ? claimsToConfirmSelected.splice(
+                          claimsToConfirmSelected.indexOf(record.id),
+                          1,
+                        )
+                      : claimsToConfirmSelected.push(record.id)
+                  "
+                  class="mr-2 h-6 w-6"
+                />
+              </span>
+              {{
+                claimSpecialDescription(
+                  record,
+                  activeDid,
+                  allMyDids,
+                  allContacts,
+                )
+              }}
+              <a @click="onClickLoadClaim(record.id)">
+                <fa
+                  icon="circle-info"
+                  class="pl-2 text-blue-500 cursor-pointer"
+                />
+              </a>
+            </span>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div v-if="claimCountWithHidden > 0" class="border-b border-slate-300 pb-2">
+      <span>
+        {{
+          claimCountWithHidden === 1
+            ? "There is 1 other claim with hidden details,"
+            : `There are ${claimCountWithHidden} other claims with hidden details,`
+        }}
+        so if you expected but do not see details from someone then ask them to
+        check that their activity is visible to you on their Contacts
+        <fa icon="users" class="text-slate-500" />
+        page.
+      </span>
+    </div>
+
+    <div>
+      <h2 class="text-2xl m-2">Anything else?</h2>
+      <div class="m-2 flex">
+        <input type="checkbox" v-model="someoneGave" class="h-6 w-6" />
+        <span class="pb-2 pl-2 pr-2">Someone else gave</span>
+        <span v-if="someoneGave">
+          <input
+            type="text"
+            v-model="description"
+            size="20"
+            class="border border-slate-400 h-6 px-2"
+          />
+          <br />
+          (Everyone likes personalized messages! 😁)
+        </span>
+        <!-- This is to match input height to avoid shifting when hiding & showing. -->
+        <span v-else class="h-6">...</span>
+      </div>
+    </div>
+
+    <div
+      v-if="claimsToConfirmSelected.length || (someoneGave && description)"
+      class="flex justify-center mt-4"
+    >
+      <button
+        @click="record()"
+        class="block text-center text-md font-bold bg-blue-500 text-white px-2 py-3 rounded-md w-56"
+      >
+        Sign & Send
+      </button>
+    </div>
+    <div v-else class="flex justify-center mt-4">
+      <button
+        class="block text-center text-md font-bold bg-slate-500 text-white px-2 py-3 rounded-md w-56"
+      >
+        Choose What To Confirm
+      </button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import axios from "axios";
+import { DateTime } from "luxon";
+import * as R from "ramda";
+import { IIdentifier } from "@veramo/core";
+import { Component, Vue } from "vue-facing-decorator";
+
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+import { NotificationIface } from "@/constants/app";
+import { 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 {
+  BVC_MEETUPS_PROJECT_CLAIM_ID,
+  claimSpecialDescription,
+  containsHiddenDid,
+  createAndSubmitConfirmation,
+  createAndSubmitGive,
+  ErrorResult,
+  GenericServerRecord,
+  GenericVerifiableCredential,
+} from "@/libs/endorserServer";
+import * as libsUtil from "@/libs/util";
+
+@Component({
+  methods: { claimSpecialDescription },
+  components: {
+    QuickNav,
+    TopMessage,
+  },
+})
+export default class QuickActionBvcBeginView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid = "";
+  allContacts: Array<Contact> = [];
+  allMyDids: Array<string> = [];
+  apiServer = "";
+  claimCountWithHidden = 0;
+  claimsToConfirm: GenericServerRecord[] = [];
+  claimsToConfirmSelected: string[] = [];
+  description = "breakfast";
+  loadingConfirms = true;
+  someoneGave = false;
+
+  async created() {
+    await db.open();
+    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+    this.apiServer = settings?.apiServer || "";
+    this.activeDid = settings?.activeDid || "";
+    this.allContacts = await db.contacts.toArray();
+  }
+
+  async mounted() {
+    this.loadingConfirms = true;
+    let currentOrPreviousSat = DateTime.now().setZone("America/Denver");
+    if (currentOrPreviousSat.weekday < 6) {
+      // it's not Saturday or Sunday,
+      // so move back one week before setting to the Saturday
+      currentOrPreviousSat = currentOrPreviousSat.minus({ week: 1 });
+    }
+    const eventStartDateObj = currentOrPreviousSat
+      .set({ weekday: 6 })
+      .set({ hour: 9 })
+      .startOf("hour");
+
+    // Hack, but full ISO pushes the length to 340 which crashes verifyJWT!
+    const todayOrPreviousStartDate =
+      eventStartDateObj.toISO({
+        suppressMilliseconds: true,
+      }) || "";
+
+    await accountsDB.open();
+    const allAccounts = await accountsDB.accounts.toArray();
+    this.allMyDids = allAccounts.map((acc) => acc.did);
+    const account: Account | undefined = await accountsDB.accounts
+      .where("did")
+      .equals(this.activeDid)
+      .first();
+    const identity: IIdentifier = JSON.parse(
+      (account?.identity as string) || "null",
+    );
+    const headers = {
+      Authorization: "Bearer " + (await accessToken(identity)),
+    };
+    try {
+      const response = await fetch(
+        this.apiServer +
+          "/api/claim/?" +
+          "issuedAt_greaterThanOrEqualTo=" +
+          encodeURIComponent(todayOrPreviousStartDate) +
+          "&excludeConfirmations=true",
+        { headers },
+      );
+
+      if (!response.ok) {
+        console.log("Bad response", response);
+        throw new Error("Bad response when retrieving claims.");
+      }
+      await response.json().then((data) => {
+        const dataByOthers = R.reject(
+          (claim: GenericServerRecord) => claim.issuer === this.activeDid,
+          data,
+        );
+        const dataByOthersWithoutHidden = R.reject(
+          containsHiddenDid,
+          dataByOthers,
+        );
+        this.claimsToConfirm = dataByOthersWithoutHidden;
+        this.claimCountWithHidden =
+          dataByOthers.length - dataByOthersWithoutHidden.length;
+      });
+    } catch (error) {
+      console.error("Error:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "There was an error retrieving today's claims to confirm.",
+        },
+        -1,
+      );
+    }
+    this.loadingConfirms = false;
+  }
+
+  onClickLoadClaim(jwtId: string) {
+    const route = {
+      path: "/claim/" + encodeURIComponent(jwtId),
+    };
+    this.$router.push(route);
+  }
+
+  async record() {
+    try {
+      const identity = await libsUtil.getIdentity(this.activeDid);
+
+      // in parallel, make a confirmation for each selected claim and send them all to the server
+      const confirmResults = await Promise.allSettled(
+        this.claimsToConfirmSelected.map(async (jwtId) => {
+          const record = this.claimsToConfirm.find(
+            (claim) => claim.id === jwtId,
+          );
+          if (!record) {
+            return { type: "error", error: "Record not found." };
+          }
+          const identity = await libsUtil.getIdentity(this.activeDid);
+          return createAndSubmitConfirmation(
+            identity,
+            record.claim as GenericVerifiableCredential,
+            record.id,
+            record.handleId,
+            this.apiServer,
+            axios,
+          );
+        }),
+      );
+      // check for any rejected confirmations
+      const confirmsSucceeded = confirmResults.filter(
+        (result) =>
+          result.status === "fulfilled" && result.value.type === "success",
+      );
+      if (confirmsSucceeded.length < this.claimsToConfirmSelected.length) {
+        console.error("Error sending confirmations:", confirmResults);
+        const howMany = confirmsSucceeded.length === 0 ? "all" : "some";
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: `There was an error sending ${howMany} of the confirmations.`,
+          },
+          -1,
+        );
+      }
+
+      // now send the give for the description
+      let giveSucceeded = false;
+      if (this.someoneGave) {
+        const giveResult = await createAndSubmitGive(
+          axios,
+          this.apiServer,
+          identity,
+          undefined,
+          this.activeDid,
+          this.description,
+          undefined,
+          undefined,
+          BVC_MEETUPS_PROJECT_CLAIM_ID,
+        );
+        giveSucceeded = giveResult.type === "success";
+        if (!giveSucceeded) {
+          console.error("Error sending give:", giveResult);
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error",
+              text:
+                (giveResult as ErrorResult)?.error?.userMessage ||
+                "There was an error sending that give.",
+            },
+            -1,
+          );
+        }
+      }
+
+      if (confirmsSucceeded.length > 0 || giveSucceeded) {
+        const confirms =
+          confirmsSucceeded.length === 1 ? "confirmation" : "confirmations";
+        const actions =
+          confirmsSucceeded.length > 0 && giveSucceeded
+            ? `Your ${confirms} and that give have been recorded.`
+            : giveSucceeded
+              ? "That give has been recorded."
+              : "Your " +
+                confirms +
+                " " +
+                (confirmsSucceeded.length === 1 ? "has" : "have") +
+                " been recorded.";
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Success",
+            text: actions,
+          },
+          -1,
+        );
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      console.error("Error sending claims.", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: error.userMessage || "There was an error sending claims.",
+        },
+        -1,
+      );
+    }
+  }
+}
+</script>

src/views/QuickActionBvcView.vue

@@ -0,0 +1,52 @@
+<template>
+  <QuickNav />
+  <TopMessage />
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Back -->
+    <div class="text-lg text-center font-light relative px-7">
+      <h1
+        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        @click="$router.back()"
+      >
+        <fa icon="chevron-left" class="fa-fw"></fa>
+      </h1>
+    </div>
+
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
+      Bountiful Voluntaryist Community Actions
+    </h1>
+
+    <div>
+      <router-link
+        :to="{ name: 'quick-action-bvc-begin' }"
+        class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
+      >
+        Beginning of Meeting
+      </router-link>
+      <router-link
+        :to="{ name: 'quick-action-bvc-end' }"
+        class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
+      >
+        End of Meeting
+      </router-link>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+
+@Component({
+  components: {
+    QuickNav,
+    TopMessage,
+  },
+})
+export default class QuickActionBvcView extends Vue {}
+</script>

src/views/SearchAreaView.vue

@@ -105,21 +105,15 @@ import {
   LTileLayer,
 } from "@vue-leaflet/vue-leaflet";
 
+import QuickNav from "@/components/QuickNav.vue";
+import { NotificationIface } from "@/constants/app";
 import { db } from "@/db/index";
 import { BoundingBox, MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import QuickNav from "@/components/QuickNav.vue";
 
 const DEFAULT_LAT_LONG_DIFF = 0.01;
 const WORLD_ZOOM = 2;
 const DEFAULT_ZOOM = 2;
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
 @Component({
   components: {
     QuickNav,
@@ -130,7 +124,7 @@ interface Notification {
   },
 })
 export default class DiscoverView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   isChoosingSearchBox = false;
   isNewMarkerSet = false;

src/views/SeedBackupView.vue

@@ -1,5 +1,5 @@
 <template>
-  <QuickNav selected="Profile"></QuickNav>
+  <QuickNav selected="Profile" />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Back -->
@@ -65,25 +65,20 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
-import { accountsDB, db } from "@/db/index";
 import * as R from "ramda";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+
 import QuickNav from "@/components/QuickNav.vue";
+import { NotificationIface } from "@/constants/app";
+import { accountsDB, db } from "@/db/index";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 
 interface Account {
   mnemonic: string;
 }
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
 @Component({ components: { QuickNav } })
 export default class SeedBackupView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   activeAccount: Account | null | undefined = null;
   numAccounts = 0;

src/views/StatisticsView.vue

@@ -53,8 +53,10 @@
 <script lang="ts">
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 import { Component, Vue } from "vue-facing-decorator";
+
 import { World } from "@/components/World/World.js";
 import QuickNav from "@/components/QuickNav.vue";
+import { NotificationIface } from "@/constants/app";
 
 interface RendererSVGType {
   domElement: Element;
@@ -64,16 +66,9 @@ interface Dictionary<T> {
   [key: string]: T;
 }
 
-interface Notification {
-  group: string;
-  type: string;
-  title: string;
-  text: string;
-}
-
 @Component({ components: { World, QuickNav } })
 export default class StatisticsView extends Vue {
-  $notify!: (notification: Notification, timeout?: number) => void;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   world: World;
   worldProperties: Dictionary<number> = {};