fix problem when notification subscription isn't found

This reverts commit 17f304ddb8.

.env.production

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

CHANGELOG.md

@@ -6,7 +6,54 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
-## [0.3.?]
+## [0.3.35] - 2024.11.24
+### Added
+- Daily reliable, hard-coded notification message
+- Setting to change the partner API server
+
+
+## [0.3.33] - 2024.11.07 - adb7b16ecf1343c39cba71a7d6bb0e7a973e1102
+### Fixed
+- Affirm Delivery button on offer claim page didn't work.
+- Plans were not showing by default on project page.
+
+
+## [0.3.32] - 2024.11.06 - 9a3fa38a3fd28f977e06f0265fc39e635c9c5ccd
+### Added
+- Highlight new offers to user & to user's projects on the front page.
+
+
+## [0.3.31] - 2024.10.25 - 07c02ab98a09d293dd90d9289a7872e7d681d296
+### Changed
+- Onboarding messages about offers
+
+
+## [0.3.30]
+### Added
+- Onboarding messages
+
+
+## [0.3.29] - 2024.10.09 - babd3832bdfe0c40eaa3869de1b41399a51713c1
+### Added
+- Invite for a contact to join immediately
+### Changed
+- Send signed data to nostr endpoints to verify public key ownership.
+- Enhanced help & help onboarding.
+### Changed in DB or environment
+- Uses Endorser.ch version 4.1.1
+
+
+## [0.3.28] - 2024.09.30 - 84720b94049d29cc0ddd99c50cef2e7176130133
+### Added
+- Posting to nostr apps Trustroots & TripHopping
+- Display of providers on claim view page
+### Changed
+- Switched BVC-meeting-ending gift to be a gift from the group.
+### Changed in DB or environment
+- Requires Endorser.ch version 4.1.0
+
+
+## [0.3.27] - 2024.09.22 - ee23e6f005e47f5bd6f04d804599f6395371b0e4
 ### Fixed
 - Error loading BVC claims to confirm
 - Really allow visibility of bulk-imported contacts

README.md

@@ -33,6 +33,14 @@ npm run serve
 npm run lint
 ```
 
+### Run all important tests
+
+... including automated UI tests (see below for details)
+
+```
+npm run test-all
+```
+
 ### Compile and minify for test & production
 
 * If there are DB changes: before updating the test server, open browser(s) with current version to test DB migrations.
@@ -43,7 +51,9 @@ npm run lint
 
 * Commit everything (since the commit hash is used the app).
 
-* Record what version is currently on production.
+* Put the commit hash in the changelog (which will help you remember to bump the version later).
+
+* Record what version is currently on production in docs.
 
 * Run the correct build:
 
@@ -51,7 +61,7 @@ npm run lint
 ```
 # (Let's replace this with a .env.development or .env.staging file.)
 # The test BVC_MEETUPS_PROJECT_CLAIM_ID does not resolve as a URL because it's only in the test DB and the prod redirect won't redirect there.
-TIME_SAFARI_APP_TITLE="TimeSafari_Test" VITE_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HWE8FWHQ1YGP7GFZYYPS272F VITE_DEFAULT_ENDORSER_API_SERVER=https://test-api.endorser.ch VITE_DEFAULT_IMAGE_API_SERVER=https://test-image-api.timesafari.app VITE_DEFAULT_PARTNER_API_SERVER=https://partner-api.endorser.ch VITE_PASSKEYS_ENABLED=true npm run build
+TIME_SAFARI_APP_TITLE="TimeSafari_Test" VITE_APP_SERVER=https://test.timesafari.app VITE_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HWE8FWHQ1YGP7GFZYYPS272F VITE_DEFAULT_ENDORSER_API_SERVER=https://test-api.endorser.ch VITE_DEFAULT_IMAGE_API_SERVER=https://test-image-api.timesafari.app VITE_DEFAULT_PARTNER_API_SERVER=https://test-partner-api.endorser.ch VITE_PASSKEYS_ENABLED=true npm run build
 ```
 
   * Production
@@ -64,7 +74,7 @@ npm run build
 
 * `rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntutest@test.timesafari.app:time-safari`
 
-* 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.
+* 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)
 
@@ -108,13 +118,11 @@ NODE_ENV=test-local npm run dev
 ```
 
 
-To run a single test with the screenshots, use the following:
+To run a single test like above with the screenshots, use the following:
 ```
-npx playwright test test-playwright/40-add-contact.spec.ts --trace on
+npx playwright test -c playwright.config-local.ts --trace on test-playwright/40-add-contact.spec.ts
 ```
 
-... with the `-c playwright.config-local.ts` to get the same results as above.
-
 
 
 ### Register new user on test server

package.json

@@ -1,6 +1,6 @@
 {
   "name": "TimeSafari",
-  "version": "0.3.27-beta",
+  "version": "0.3.35",
   "scripts": {
     "dev": "vite",
     "serve": "vite preview",
@@ -12,6 +12,10 @@
     "test-all": "npm run build && npx playwright test -c playwright.config-local.ts --trace on"
   },
   "dependencies": {
+    "@capacitor/android": "^6.1.2",
+    "@capacitor/cli": "^6.1.2",
+    "@capacitor/core": "^6.1.2",
+    "@capacitor/ios": "^6.1.2",
     "@dicebear/collection": "^5.4.1",
     "@dicebear/core": "^5.4.1",
     "@ethersproject/hdnode": "^5.7.0",
@@ -41,6 +45,7 @@
     "dexie": "^3.2.7",
     "dexie-export-import": "^4.1.1",
     "did-jwt": "^7.4.7",
+    "did-resolver": "^4.1.0",
     "ethereum-cryptography": "^2.1.3",
     "ethereumjs-util": "^7.1.5",
     "jdenticon": "^3.2.0",

playwright.config-local.ts

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

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

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

src/App.vue

@@ -229,7 +229,7 @@
                       ? notification.onCancel(stopAsking)
                       : null;
                     close(notification.id);
-                    stopAsking = false; // reset value
+                    stopAsking = false; // reset value for next time they open this modal
                   "
                   class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
                 >
@@ -238,63 +238,7 @@
               </div>
             </div>
           </div>
-          <div
-            v-if="notification.type === 'notification-permission'"
-            class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
-          >
-            <div
-              class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
-            >
-              <div class="w-full px-6 py-6 text-slate-900 text-center">
-                <p v-if="serviceWorkerReady" class="text-lg mb-4">
-                  Would you like to be notified of new activity once a day?
-                </p>
-                <p v-else class="text-lg mb-4">
-                  Waiting for system initialization, which may take up to 10
-                  seconds...
-                  <fa icon="spinner" spin />
-                </p>
 
-                <div v-if="serviceWorkerReady">
-                  <span class="flex flex-row justify-center">
-                    <span class="mt-2">Yes, tell me at: </span>
-                    <input
-                      type="number"
-                      class="rounded-l border border-r-0 border-slate-400 ml-2 mt-2 px-2 py-2 text-center w-20"
-                      v-model="hourInput"
-                    />
-                    <span
-                      class="rounded-r border border-slate-400 bg-slate-200 text-center text-blue-500 mt-2 px-2 py-2 w-20"
-                      @click="hourAm = !hourAm"
-                    >
-                      <span v-if="hourAm"> AM <fa icon="chevron-down" /> </span>
-                      <span v-else> PM <fa icon="chevron-up" /> </span>
-                    </span>
-                  </span>
-                  <button
-                    class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white mt-2 px-2 py-2 rounded-md"
-                    @click="
-                      () => {
-                        if (checkHour()) {
-                          close(notification.id);
-                          turnOnNotifications();
-                        }
-                      }
-                    "
-                  >
-                    Turn on Daily Message
-                  </button>
-                </div>
-
-                <button
-                  @click="close(notification.id)"
-                  class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white mt-4 px-2 py-2 rounded-md"
-                >
-                  No, Not Now
-                </button>
-              </div>
-            </div>
-          </div>
           <div
             v-if="notification.type === 'notification-mute'"
             class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
@@ -308,17 +252,17 @@
                 <button
                   class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
                 >
-                  For 1 Hour
+                  For 1 Day
                 </button>
                 <button
                   class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
                 >
-                  For 8 Hours
+                  For 2 Days
                 </button>
                 <button
                   class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
                 >
-                  For 24 Hours
+                  For 1 Week
                 </button>
                 <button
                   class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
@@ -334,6 +278,7 @@
               </div>
             </div>
           </div>
+
           <div
             v-if="notification.type === 'notification-off'"
             class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
@@ -343,17 +288,17 @@
             >
               <div class="w-full px-6 py-6 text-slate-900 text-center">
                 <p class="text-lg mb-4">
-                  Would you like to <b>turn off</b> notifications for this app?
+                  Would you like to <b>turn off</b> this notification?
                 </p>
 
                 <button
                   @click="
                     close(notification.id);
-                    turnOffNotifications();
+                    turnOffNotifications(notification);
                   "
                   class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md mb-2"
                 >
-                  Turn Off Notifications
+                  Turn Off Notification
                 </button>
                 <button
                   @click="close(notification.id)"
@@ -373,416 +318,108 @@
 <style></style>
 
 <script lang="ts">
-import axios from "axios";
 import { Vue, Component } from "vue-facing-decorator";
 
-import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app";
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
-import { retrieveSettingsForActiveAccount } from "@/db/index";
+import { NotificationIface } from "./constants/app";
-import * as libsUtil from "@/libs/util";
-
-interface ServiceWorkerMessage {
-  type: string;
-  data: string;
-}
-
-interface ServiceWorkerResponse {
-  // Define the properties and their types
-  success: boolean;
-  message?: string;
-}
-
-// Example interface for error
-interface ErrorResponse {
-  message: string;
-  // Other properties as needed
-}
-
-interface VapidResponse {
-  data: {
-    vapidKey: string;
-  };
-}
-
-interface PushSubscriptionWithTime extends PushSubscriptionJSON {
-  notifyTime: { utcHour: number };
-}
 
 @Component
 export default class App extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   stopAsking = false;
-  b64 = "";
-  hourAm = true;
-  hourInput = "8";
-  serviceWorkerReady = true;
 
-  async mounted() {
+  async turnOffNotifications(notification: NotificationIface) {
-    try {
+    let subscription: object | null = null;
-      const settings = await retrieveSettingsForActiveAccount();
-      let pushUrl = DEFAULT_PUSH_SERVER;
-      if (settings?.webPushServer) {
-        pushUrl = settings.webPushServer;
-      }
 
-      if (pushUrl.startsWith("http://localhost")) {
+    let allGoingOff = false;
-        console.log("Not checking for VAPID in this local environment.");
+    const settings = await retrieveSettingsForActiveAccount();
-      } else {
+    const notifyingNewActivity = !!settings?.notifyingNewActivityTime;
-        await axios
+    const notifyingReminder = !!settings?.notifyingReminderTime;
-          .get(pushUrl + "/web-push/vapid")
+    if (!notifyingNewActivity || !notifyingReminder) {
-          .then((response: VapidResponse) => {
+      // the other notification is already off, so fully unsubscribe now
-            this.b64 = response.data?.vapidKey || "";
+      allGoingOff = true;
-            console.log("Got vapid key:", this.b64);
-            navigator.serviceWorker.addEventListener("controllerchange", () => {
-              console.log("New service worker is now controlling the page");
-            });
-          });
-        if (!this.b64) {
-          this.$notify(
-            {
-              group: "alert",
-              type: "danger",
-              title: "Error Setting Notifications",
-              text: "Could not set notifications.",
-            },
-            -1,
-          );
-        }
-      }
-    } catch (error) {
-      if (window.location.host.startsWith("localhost")) {
-        console.log("Ignoring the error getting VAPID for local development.");
-      } else {
-        console.error("Got an error initializing notifications:", error);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error Setting Notifications",
-            text: "Got an error setting notifications.",
-          },
-          -1,
-        );
-      }
-    }
-    // there may be a long pause here on first initialization
-    navigator.serviceWorker?.ready.then(() => {
-      this.serviceWorkerReady = true;
-    });
-  }
-
-  private sendMessageToServiceWorker(
-    message: ServiceWorkerMessage,
-  ): Promise<unknown> {
-    return new Promise((resolve, reject) => {
-      if (navigator.serviceWorker.controller) {
-        const messageChannel = new MessageChannel();
-
-        messageChannel.port1.onmessage = (event: MessageEvent) => {
-          if (event.data.error) {
-            reject(event.data.error as ErrorResponse);
-          } else {
-            resolve(event.data as ServiceWorkerResponse);
-          }
-        };
-
-        navigator.serviceWorker.controller.postMessage(message, [
-          messageChannel.port2,
-        ]);
-      } else {
-        reject("Service worker controller not available");
-      }
-    });
-  }
-
-  private askPermission(): Promise<NotificationPermission> {
-    console.log("Requesting permission for notifications:", navigator);
-    if (!("serviceWorker" in navigator && navigator.serviceWorker.controller)) {
-      return Promise.reject("Service worker not available.");
     }
 
-    const secret = localStorage.getItem("secret");
+    await navigator.serviceWorker?.ready
-    if (!secret) {
-      return Promise.reject("No secret found.");
-    }
-
-    return this.sendSecretToServiceWorker(secret)
-      .then(() => this.checkNotificationSupport())
-      .then(() => this.requestNotificationPermission())
-      .catch((error) => Promise.reject(error));
-  }
-
-  private sendSecretToServiceWorker(secret: string): Promise<void> {
-    const message: ServiceWorkerMessage = {
-      type: "SEND_LOCAL_DATA",
-      data: secret,
-    };
-
-    return this.sendMessageToServiceWorker(message).then((response) => {
-      console.log("Response from service worker:", response);
-    });
-  }
-
-  private checkNotificationSupport(): Promise<void> {
-    if (!("Notification" in window)) {
-      alert("This browser does not support notifications.");
-      return Promise.reject("This browser does not support notifications.");
-    }
-    if (Notification.permission === "granted") {
-      return Promise.resolve();
-    }
-    return Promise.resolve();
-  }
-
-  private requestNotificationPermission(): Promise<NotificationPermission> {
-    return Notification.requestPermission().then((permission) => {
-      if (permission !== "granted") {
-        alert(
-          "Allow this app permission to make notifications for personal reminders." +
-            " You can adjust them at any time in your settings.",
-        );
-        throw new Error("We weren't granted permission.");
-      }
-      return permission;
-    });
-  }
-
-  // this allows us to show an error without closing the dialog
-  checkHour() {
-    if (!libsUtil.isNumeric(this.hourInput)) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Not a Number",
-          text: "The time must be an hour number.",
-        },
-        5000,
-      );
-      return false;
-    }
-    const hourNum = libsUtil.numberOrZero(this.hourInput);
-    if (!Number.isInteger(hourNum)) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Not a Whole Number",
-          text: "The time must be a whole hour number.",
-        },
-        5000,
-      );
-      return false;
-    }
-    if (hourNum < 1 || 12 < hourNum) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Not a Whole Number",
-          text: "The time must be an hour between 1 and 12.",
-        },
-        5000,
-      );
-      return false;
-    }
-    return true;
-  }
-
-  public async turnOnNotifications() {
-    return this.askPermission()
-      .then((permission) => {
-        console.log("Permission granted:", permission);
-
-        // Call the function and handle promises
-        this.subscribeToPush()
-          .then(() => {
-            console.log("Subscribed successfully.");
-            return navigator.serviceWorker?.ready;
-          })
-          .then((registration) => {
-            return registration.pushManager.getSubscription();
-          })
-          .then(async (subscription) => {
-            if (subscription) {
-              await this.$notify(
-                {
-                  group: "alert",
-                  type: "info",
-                  title: "Notification Setup Underway",
-                  text: "Setting up notifications for interesting activity, which takes about 10 seconds. If you don't see a final confirmation, check the 'Troubleshoot' page.",
-                },
-                -1,
-              );
-              // we already checked that this is a valid hour number
-              const rawHourNum = libsUtil.numberOrZero(this.hourInput);
-              const adjHourNum = rawHourNum + (this.hourAm ? 0 : 12);
-              const hourNum = adjHourNum % 24;
-              const utcHour =
-                hourNum + Math.round(new Date().getTimezoneOffset() / 60);
-              const finalUtcHour = (utcHour + (utcHour < 0 ? 24 : 0)) % 24;
-
-              const subscriptionWithTime: PushSubscriptionWithTime = {
-                notifyTime: { utcHour: finalUtcHour },
-                ...subscription.toJSON(),
-              };
-              await this.sendSubscriptionToServer(subscriptionWithTime);
-              return subscriptionWithTime;
-            } else {
-              throw new Error("Subscription object is not available.");
-            }
-          })
-          .then(async (subscription: PushSubscriptionWithTime) => {
-            console.log(
-              "Subscription data sent to server and all finished successfully.",
-            );
-            await libsUtil.sendTestThroughPushServer(subscription, true);
-            this.$notify(
-              {
-                group: "alert",
-                type: "success",
-                title: "Notifications Turned On",
-                text: "Notifications are on. You should see at least one on your device; if not, check the 'Troubleshoot' page.",
-              },
-              -1,
-            );
-          })
-          .catch((error) => {
-            console.error(
-              "Subscription or server communication failed:",
-              error,
-            );
-            alert(
-              "Subscription or server communication failed. Try again in a while.",
-            );
-          });
-      })
-      .catch((error) => {
-        console.error(
-          "An error occurred setting notification permissions:",
-          error,
-        );
-        alert("Some error occurred setting notification permissions.");
-      });
-  }
-
-  private urlBase64ToUint8Array(base64String: string): Uint8Array {
-    const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
-    const base64 = (base64String + padding)
-      .replace(/-/g, "+")
-      .replace(/_/g, "/");
-    const rawData = window.atob(base64);
-    const outputArray = new Uint8Array(rawData.length);
-
-    for (let i = 0; i < rawData.length; ++i) {
-      outputArray[i] = rawData.charCodeAt(i);
-    }
-    return outputArray;
-  }
-
-  private subscribeToPush(): Promise<void> {
-    return new Promise<void>((resolve, reject) => {
-      if (!("serviceWorker" in navigator && "PushManager" in window)) {
-        const errorMsg = "Push messaging is not supported";
-        console.warn(errorMsg);
-        return reject(new Error(errorMsg));
-      }
-
-      if (Notification.permission !== "granted") {
-        const errorMsg = "Notification permission not granted";
-        console.warn(errorMsg);
-        return reject(new Error(errorMsg));
-      }
-
-      const applicationServerKey = this.urlBase64ToUint8Array(this.b64);
-      const options: PushSubscriptionOptions = {
-        userVisibleOnly: true,
-        applicationServerKey: applicationServerKey,
-      };
-
-      navigator.serviceWorker.ready
-        .then((registration) => {
-          return registration.pushManager.subscribe(options);
-        })
-        .then((subscription) => {
-          console.log("Push subscription successful:", subscription);
-          resolve();
-        })
-        .catch((error) => {
-          console.error("Push subscription failed:", error, options);
-
-          // Inform the user about the issue
-          alert(
-            "We encountered an issue setting up push notifications. " +
-              "If you wish to revoke notification permissions, please do so in your browser settings.",
-          );
-
-          reject(error);
-        });
-    });
-  }
-
-  private sendSubscriptionToServer(
-    subscription: PushSubscriptionWithTime,
-  ): Promise<void> {
-    console.log("About to send subscription...", subscription);
-    return fetch("/web-push/subscribe", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(subscription),
-    }).then((response) => {
-      if (!response.ok) {
-        throw new Error("Failed to send subscription to server");
-      }
-      console.log("Subscription sent to server successfully.");
-    });
-  }
-
-  async turnOffNotifications() {
-    let subscription;
-    const pushProviderSuccess = await navigator.serviceWorker?.ready
       .then((registration) => {
         return registration.pushManager.getSubscription();
       })
-      .then((subscript) => {
+      .then(async (subscript: PushSubscription | null) => {
-        subscription = subscript;
+        if (subscript) {
-        if (subscription) {
+          subscription = subscript.toJSON();
-          return subscription.unsubscribe();
+          if (allGoingOff) {
+            await subscript.unsubscribe();
+          }
         } else {
-          console.log("Subscription object is not available.");
+          logConsoleAndDb("Subscription object is not available.");
-          return false;
         }
       })
       .catch((error) => {
-        console.error("Push provider server communication failed:", error);
+        logConsoleAndDb(
-        return false;
+          "Push provider server communication failed: " + JSON.stringify(error),
+          true,
+        );
       });
 
+    if (!subscription) {
+      // there is no endpoint or auth for the server to compare, so we're done
+      this.$notify(
+        {
+          group: "alert",
+          type: "info",
+          title: "Finished",
+          text: "Notifications are off.", // a different message so I know there are none stored
+        },
+        5000,
+      );
+      return true;
+    }
+
+    const serverSubscription = {
+      ...subscription,
+    };
+    if (!allGoingOff) {
+      serverSubscription["notifyType"] = notification.title;
+    }
     const pushServerSuccess = await fetch("/web-push/unsubscribe", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify(subscription),
+      body: JSON.stringify(serverSubscription),
     })
       .then((response) => {
         return response.ok;
       })
       .catch((error) => {
-        console.error("Push server communication failed:", error);
+        logConsoleAndDb(
+          "Push server communication failed: " + JSON.stringify(error),
+          true,
+        );
         return false;
       });
 
-    alert(
+    let message;
-      "Notifications are off. Push provider unsubscribe " +
+    if (pushServerSuccess) {
-        (pushProviderSuccess ? "succeeded" : "failed") +
+      message = "Notification is off.";
-        (pushProviderSuccess === pushServerSuccess ? " and" : " but") +
+    } else {
-        " push server unsubscribe " +
+      message = "Notification is still on. Try to turn it off again.";
-        (pushServerSuccess ? "succeeded" : "failed") +
+    }
-        ".",
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Finished",
+        text: message,
+      },
+      5000,
     );
+
+    if (notification.callback) {
+      // it's OK if the local notifications are still on (especially if the other notification is on)
+      notification.callback(pushServerSuccess);
+    }
   }
 }
 </script>

src/components/ContactNameDialog.vue

@@ -0,0 +1,99 @@
+<!-- similar to UserNameDialog -->
+<template>
+  <div v-if="visible" class="dialog-overlay">
+    <div class="dialog">
+      <h1 class="text-xl font-bold text-center mb-4">{{ title }}</h1>
+      {{ message }}
+      Note that their name is only stored on this device.
+      <input
+        type="text"
+        placeholder="Name"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+        v-model="newText"
+      />
+
+      <div class="mt-8">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <button
+            type="button"
+            class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+            @click="onClickSaveChanges()"
+          >
+            Save
+          </button>
+          <button
+            type="button"
+            class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+            @click="onClickCancel()"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from "vue-facing-decorator";
+
+@Component
+export default class ContactNameDialog extends Vue {
+  cancelCallback: () => void = () => {};
+  saveCallback: (name?: string) => void = () => {};
+  message = "";
+  newText = "";
+  title = "Contact Name";
+  visible = false;
+
+  async open(
+    title?: string,
+    message?: string,
+    saveCallback?: (name?: string) => void,
+    cancelCallback?: () => void,
+  ) {
+    this.cancelCallback = cancelCallback || this.cancelCallback;
+    this.saveCallback = saveCallback || this.saveCallback;
+    this.message = message ?? this.message;
+    this.title = title ?? this.title;
+    this.visible = true;
+  }
+
+  async onClickSaveChanges() {
+    this.visible = false;
+    if (this.saveCallback) {
+      this.saveCallback(this.newText);
+    }
+  }
+
+  onClickCancel() {
+    this.visible = false;
+    if (this.cancelCallback) {
+      this.cancelCallback();
+    }
+  }
+}
+</script>
+
+<style>
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.5rem;
+}
+
+.dialog {
+  background-color: white;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  width: 100%;
+  max-width: 500px;
+}
+</style>

src/components/GiftedDialog.vue

@@ -47,7 +47,7 @@
                 giverDid: giver?.did,
                 giverName: giver?.name,
                 offerId,
-                projectId,
+                fulfillsProjectId: projectId,
                 recipientDid: receiver?.did,
                 recipientName: receiver?.name,
                 unitCode,

src/components/InviteDialog.vue

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

src/components/OfferDialog.vue

@@ -91,8 +91,8 @@ import { retrieveSettingsForActiveAccount } from "@/db/index";
 export default class OfferDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
-  @Prop projectId?;
+  @Prop projectId?: string;
-  @Prop projectName?;
+  @Prop projectName?: string;
 
   activeDid = "";
   apiServer = "";
@@ -207,9 +207,9 @@ export default class OfferDialog extends Vue {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "You must select an identifier before you can record an offer.",
+          text: "You must select an identity before you can record an offer.",
         },
-        -1,
+        7000,
       );
       return;
     }
@@ -264,7 +264,7 @@ export default class OfferDialog extends Vue {
             title: "Success",
             text: "That offer was recorded.",
           },
-          10000,
+          5000,
         );
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/components/OnboardingDialog.vue

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

src/components/PushNotificationPermission.vue

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

src/components/UserNameDialog.vue

@@ -1,10 +1,11 @@
+<!-- similar to ContactNameDialog -->
 <template>
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
       <h1 class="text-xl font-bold text-center mb-4">Set Your Name</h1>
 
-      Note that this is not sent to servers. It is only shared with people when
+      This is not sent to servers. It is only shared with people when you send
-      you choose to send it to them.
+      it to them.
       <input
         type="text"
         placeholder="Name"
@@ -21,7 +22,6 @@
           >
             Save
           </button>
-          <!-- SHOW ME instead while processing saving changes -->
           <button
             type="button"
             class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
@@ -46,11 +46,14 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 export default class UserNameDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
-  callback: (string?) => void = () => {};
+  callback: (name: string) => void = () => {};
   givenName = "";
   visible = false;
 
-  async open(aCallback?: (name?: string) => void) {
+  /**
+   * @param aCallback - callback function for name, which may be ""
+   */
+  async open(aCallback?: (name: string) => void) {
     this.callback = aCallback || this.callback;
     const settings = await retrieveSettingsForActiveAccount();
     this.givenName = settings.firstName || "";

src/constants/app.ts

@@ -16,8 +16,8 @@ export enum AppString {
   TEST_IMAGE_API_SERVER = "https://test-image-api.timesafari.app",
   LOCAL_IMAGE_API_SERVER = "http://localhost:3001",
 
-  PROD_PARTNER_API_SERVER = "https://endorser.ch",
+  PROD_PARTNER_API_SERVER = "https://partner-api.endorser.ch",
-  TEST_PARTNER_API_SERVER = "https://test-partner.endorser.ch",
+  TEST_PARTNER_API_SERVER = "https://test-partner-api.endorser.ch",
   LOCAL_PARTNER_API_SERVER = LOCAL_ENDORSER_API_SERVER,
 
   PROD_PUSH_SERVER = "https://timesafari.app",
@@ -27,6 +27,9 @@ export enum AppString {
   NO_CONTACT_NAME = "(no name)",
 }
 
+export const APP_SERVER =
+  import.meta.env.VITE_APP_SERVER || "https://timesafari.app";
+
 export const DEFAULT_ENDORSER_API_SERVER =
   import.meta.env.VITE_DEFAULT_ENDORSER_API_SERVER ||
   AppString.TEST_ENDORSER_API_SERVER;
@@ -49,13 +52,14 @@ export const PASSKEYS_ENABLED =
 
 /**
  * The possible values for "group" and "type" are in App.vue.
- * From the notiwind package
+ * Some of this comes from the notiwind package, some is custom.
  */
 export interface NotificationIface {
   group: string; // "alert" | "modal"
   type: string; // "toast" | "info" | "success" | "warning" | "danger"
   title: string;
   text?: string;
+  callback?: (success: boolean) => Promise<void>; // if this triggered an action
   noText?: string;
   onCancel?: (stopAsking?: boolean) => Promise<void>;
   onNo?: (stopAsking?: boolean) => Promise<void>;

src/db/index.ts

@@ -131,3 +131,27 @@ export async function updateAccountSettings(
   settings.accountDid = accountDid;
   await updateSettings(settings);
 }
+
+// similar method is in the sw_scripts/additional-scripts.js file
+export async function logConsoleAndDb(
+  message: string,
+  isError = false,
+): Promise<void> {
+  if (isError) {
+    console.error(`${new Date().toISOString()} ${message}`);
+  } else {
+    console.log(`${new Date().toISOString()} ${message}`);
+  }
+
+  await db.open();
+  const todayKey = new Date().toDateString();
+  // only keep one day's worth of logs
+  const previous = await db.logs.get(todayKey);
+  if (!previous) {
+    // when this is today's first log, clear out everything previous
+    await db.logs.clear();
+  }
+  const prevMessages = (previous && previous.message) || "";
+  const fullMessage = `${prevMessages}\n${new Date().toISOString()} ${message}`;
+  await db.logs.update(todayKey, { message: fullMessage });
+}

src/db/tables/settings.ts

@@ -24,18 +24,30 @@ export type Settings = {
 
   filterFeedByNearby?: boolean; // filter by nearby
   filterFeedByVisible?: boolean; // filter by visible users ie. anyone not hidden
+  finishedOnboarding?: boolean; // the user has completed the onboarding process
 
   firstName?: string; // user's full name, may be null if unwanted for a particular account
   hideRegisterPromptOnNewContact?: boolean;
   isRegistered?: boolean;
   imageServer?: string;
   lastName?: string; // deprecated - put all names in firstName
+
+  lastAckedOfferToUserJwtId?: string; // the last JWT ID for offer-to-user that they've acknowledged seeing
+  lastAckedOfferToUserProjectsJwtId?: string; // the last JWT ID for offers-to-user's-projects that they've acknowledged seeing
+
+  // The claim list has a most recent one used in notifications that's separate from the last viewed
   lastNotifiedClaimId?: string;
   lastViewedClaimId?: string;
+
+  notifyingNewActivityTime?: string; // set to their chosen time if they have turned on daily check for new activity via the push server
+  notifyingReminderMessage?: string; // set to their chosen message for a daily reminder
+  notifyingReminderTime?: string; // set to their chosen time for a daily reminder
+
+  partnerApiServer?: string; // partner server API URL
+
   passkeyExpirationMinutes?: number; // passkey access token time-to-live in minutes
+
   profileImageUrl?: string; // may be null if unwanted for a particular account
-  reminderTime?: number; // Time in milliseconds since UNIX epoch for reminders
-  reminderOn?: boolean; // Toggle to enable or disable reminders
 
   // Array of named search boxes defined by bounding boxes
   searchBoxes?: Array<{
@@ -52,7 +64,7 @@ export type Settings = {
   webPushServer?: string; // Web Push server URL
 };
 
-export function isAnyFeedFilterOn(settings: Settings): boolean {
+export function checkIsAnyFeedFilterOn(settings: Settings): boolean {
   return !!(settings?.filterFeedByNearby || settings?.filterFeedByVisible);
 }
 

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

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

src/libs/crypto/vc/index.ts

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

src/libs/crypto/vc/passkeyDidPeer.ts

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

src/libs/crypto/vc/util.ts

@@ -0,0 +1,11 @@
+export function urlBase64ToUint8Array(base64String: string): Uint8Array {
+  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+}

src/libs/endorserServer.ts

@@ -49,6 +49,7 @@ export interface ClaimResult {
   error: { code: string; message: string };
 }
 
+// similar to VerifiableCredentialSubject... maybe rename this
 export interface GenericVerifiableCredential {
   "@context"?: string; // optional when embedded, eg. in an Agree
   "@type": string;
@@ -56,8 +57,6 @@ export interface GenericVerifiableCredential {
 }
 
 export interface GenericCredWrapper<T extends GenericVerifiableCredential> {
-  "@context": string;
-  "@type": string;
   claim: T;
   claimType?: string;
   handleId: string;
@@ -68,8 +67,6 @@ export interface GenericCredWrapper<T extends GenericVerifiableCredential> {
 }
 export const BLANK_GENERIC_SERVER_RECORD: GenericCredWrapper<GenericVerifiableCredential> =
   {
-    "@context": SCHEMA_ORG_CONTEXT,
-    "@type": "",
     claim: { "@type": "" },
     handleId: "",
     id: "",
@@ -91,6 +88,7 @@ export interface GiveSummaryRecord {
   issuedAt: string;
   issuerDid: string;
   jwtId: string;
+  providerPlanHandleId?: string;
   recipientDid: string;
   unit: string;
 }
@@ -114,6 +112,10 @@ export interface OfferSummaryRecord {
   validThrough: string;
 }
 
+export interface OfferToPlanSummaryRecord extends OfferSummaryRecord {
+  planName: string;
+}
+
 // a summary record; the VC is not currently part of this record
 export interface PlanSummaryRecord {
   agentDid?: string; // optional, if the issuer wants someone else to manage as well
@@ -141,6 +143,7 @@ export interface GiveVerifiableCredential extends GenericVerifiableCredential {
   identifier?: string;
   image?: string;
   object?: { amountOfThisGood: number; unitCode: string };
+  provider?: GenericVerifiableCredential; // typically @type & identifier
   recipient?: { identifier: string };
 }
 
@@ -221,11 +224,21 @@ export interface ImageRateLimits {
 }
 
 export interface VerifiableCredential {
+  exp?: number;
+  iat: number;
+  iss: string;
+  vc: {
+    "@context": string[];
+    type: string[];
+    credentialSubject: VerifiableCredentialSubject;
+  };
+}
+
+// similar to GenericVerifiableCredential... maybe replace that one
+export interface VerifiableCredentialSubject {
   "@context": string;
   "@type": string;
-  name: string;
+  [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-  description: string;
-  identifier?: string;
 }
 
 export interface WorldProperties {
@@ -233,12 +246,14 @@ export interface WorldProperties {
   endTime?: string;
 }
 
+// AKA Registration & RegisterAction
 export interface RegisterVerifiableCredential {
-  "@context": string;
+  "@context": typeof SCHEMA_ORG_CONTEXT;
-  "@type": string;
+  "@type": "RegisterAction";
   agent: { identifier: string };
+  identifier?: string; // used for invites (when participant ID isn't known)
   object: string;
-  participant: { identifier: string };
+  participant?: { identifier: string }; // used when person is known (not an invite)
 }
 
 // now for some of the error & other wrapper types
@@ -270,6 +285,14 @@ export interface ErrorResult extends ResultWithType {
 
 export type CreateAndSubmitClaimResult = SuccessResult | ErrorResult;
 
+export interface UserInfo {
+  name: string;
+  publicEncKey: string;
+  registered: boolean;
+  profileImageUrl?: string;
+  nextPublicEncKeyHash?: string;
+}
+
 // This is used to check for hidden info.
 // See https://github.com/trentlarson/endorser-ch/blob/0cb626f803028e7d9c67f095858a9fc8542e3dbd/server/api/services/util.js#L6
 const HIDDEN_DID = "did:none:HIDDEN";
@@ -521,7 +544,7 @@ const planCache: LRUCache<string, PlanSummaryRecord> = new LRUCache({
  * @param apiServer
  */
 export async function getPlanFromCache(
-  handleId: string,
+  handleId: string | undefined,
   axios: Axios,
   apiServer: string,
   requesterDid?: string,
@@ -568,6 +591,52 @@ export async function setPlanInCache(
   planCache.set(handleId, planSummary);
 }
 
+/**
+ *
+ * @returns { data: Array<OfferSummaryRecord>, hitLimit: boolean true if maximum was hit and there may be more }
+ */
+export async function getNewOffersToUser(
+  axios: Axios,
+  apiServer: string,
+  activeDid: string,
+  afterOfferJwtId?: string,
+  beforeOfferJwtId?: string,
+) {
+  let url = `${apiServer}/api/v2/report/offers?recipientDid=${activeDid}`;
+  if (afterOfferJwtId) {
+    url += "&afterId=" + afterOfferJwtId;
+  }
+  if (beforeOfferJwtId) {
+    url += "&beforeId=" + beforeOfferJwtId;
+  }
+  const headers = await getHeaders(activeDid);
+  const response = await axios.get(url, { headers });
+  return response.data;
+}
+/**
+ *
+ * @returns { data: Array<OfferToPlanSummaryRecord>, hitLimit: boolean true if maximum was hit and there may be more }
+ */
+export async function getNewOffersToUserProjects(
+  axios: Axios,
+  apiServer: string,
+  activeDid: string,
+  afterOfferJwtId?: string,
+  beforeOfferJwtId?: string,
+) {
+  let url = `${apiServer}/api/v2/report/offersToPlansOwnedByMe`;
+  if (afterOfferJwtId) {
+    url += "?afterId=" + afterOfferJwtId;
+  }
+  if (beforeOfferJwtId) {
+    url += afterOfferJwtId ? "&" : "?";
+    url += "beforeId=" + beforeOfferJwtId;
+  }
+  const headers = await getHeaders(activeDid);
+  const response = await axios.get(url, { headers });
+  return response.data;
+}
+
 /**
  * Construct GiveAction VC for submission to server
  *
@@ -584,6 +653,7 @@ export function hydrateGive(
   fulfillsOfferHandleId?: string,
   isTrade: boolean = false,
   imageUrl?: string,
+  providerPlanHandleId?: string,
   lastClaimId?: string,
 ): GiveVerifiableCredential {
   // Remember: replace values or erase if it's null
@@ -642,6 +712,10 @@ export function hydrateGive(
 
   vcClaim.image = imageUrl || undefined;
 
+  vcClaim.provider = providerPlanHandleId
+    ? { "@type": "PlanAction", identifier: providerPlanHandleId }
+    : undefined;
+
   return vcClaim;
 }
 
@@ -666,6 +740,7 @@ export async function createAndSubmitGive(
   fulfillsOfferHandleId?: string,
   isTrade: boolean = false,
   imageUrl?: string,
+  providerPlanHandleId?: string,
 ): Promise<CreateAndSubmitClaimResult> {
   const vcClaim = hydrateGive(
     undefined,
@@ -678,6 +753,7 @@ export async function createAndSubmitGive(
     fulfillsOfferHandleId,
     isTrade,
     imageUrl,
+    providerPlanHandleId,
     undefined,
   );
   return createAndSubmitClaim(
@@ -710,6 +786,7 @@ export async function editAndSubmitGive(
   fulfillsOfferHandleId?: string,
   isTrade: boolean = false,
   imageUrl?: string,
+  providerPlanHandleId?: string,
 ): Promise<CreateAndSubmitClaimResult> {
   const vcClaim = hydrateGive(
     fullClaim.claim,
@@ -722,6 +799,7 @@ export async function editAndSubmitGive(
     fulfillsOfferHandleId,
     isTrade,
     imageUrl,
+    providerPlanHandleId,
     fullClaim.id,
   );
   return createAndSubmitClaim(
@@ -934,17 +1012,12 @@ export async function generateEndorserJwtForAccount(
   isRegistered?: boolean,
   name?: string,
   profileImageUrl?: string,
+  // note that including the next key pushes QR codes to the next resolution smaller
+  includeNextKeyIfDerived?: boolean,
 ) {
   const publicKeyHex = account.publicKeyHex;
   const publicEncKey = Buffer.from(publicKeyHex, "hex").toString("base64");
 
-  interface UserInfo {
-    name: string;
-    publicEncKey: string;
-    registered: boolean;
-    profileImageUrl?: string;
-    nextPublicEncKeyHash?: string;
-  }
   const contactInfo = {
     iat: Date.now(),
     iss: account.did,
@@ -958,7 +1031,7 @@ export async function generateEndorserJwtForAccount(
     contactInfo.own.profileImageUrl = profileImageUrl;
   }
 
-  if (account?.mnemonic && account?.derivationPath) {
+  if (includeNextKeyIfDerived && account?.mnemonic && account?.derivationPath) {
     const newDerivPath = nextDerivationPath(account.derivationPath as string);
     const nextPublicHex = deriveAddress(
       account.mnemonic as string,
@@ -979,9 +1052,10 @@ export async function generateEndorserJwtForAccount(
 export async function createEndorserJwtForDid(
   issuerDid: string,
   payload: object,
+  expiresIn?: number,
 ) {
   const account = await getAccount(issuerDid);
-  return createEndorserJwtForKey(account as KeyMeta, payload);
+  return createEndorserJwtForKey(account as KeyMeta, payload, expiresIn);
 }
 
 /**
@@ -1177,7 +1251,7 @@ export const claimSpecialDescription = (
 
 export const BVC_MEETUPS_PROJECT_CLAIM_ID =
   import.meta.env.VITE_BVC_MEETUPS_PROJECT_CLAIM_ID ||
-  "https://endorser.ch/entity/01HWE8FWHQ1YGP7GFZYYPS272F"; // this won't resolve as a URL on production; it's a URN only found in the test system
+  "https://endorser.ch/entity/01GXYPFF7FA03NXKPYY142PY4H"; // production value, which seems like the safest value if forgotten
 
 export const bvcMeetingJoinClaim = (did: string, startTime: string) => {
   return {
@@ -1211,19 +1285,24 @@ export async function createEndorserJwtVcFromClaim(
   return createEndorserJwtForDid(issuerDid, vcPayload);
 }
 
-export async function register(
+export async function createInviteJwt(
   activeDid: string,
-  apiServer: string,
+  contact?: Contact,
-  axios: Axios,
+  inviteId?: string,
-  contact: Contact,
+  expiresIn?: number,
-) {
+): Promise<string> {
   const vcClaim: RegisterVerifiableCredential = {
     "@context": SCHEMA_ORG_CONTEXT,
     "@type": "RegisterAction",
     agent: { identifier: activeDid },
     object: SERVICE_ID,
-    participant: { identifier: contact.did },
   };
+  if (contact) {
+    vcClaim.participant = { identifier: contact.did };
+  }
+  if (inviteId) {
+    vcClaim.identifier = inviteId;
+  }
   // Make a payload for the claim
   const vcPayload = {
     vc: {
@@ -1233,7 +1312,17 @@ export async function register(
     },
   };
   // Create a signature using private key of identity
-  const vcJwt = await createEndorserJwtForDid(activeDid, vcPayload);
+  const vcJwt = await createEndorserJwtForDid(activeDid, vcPayload, expiresIn);
+  return vcJwt;
+}
+
+export async function register(
+  activeDid: string,
+  apiServer: string,
+  axios: Axios,
+  contact: Contact,
+): Promise<{ success?: boolean; error?: string }> {
+  const vcJwt = await createInviteJwt(activeDid, contact);
 
   const url = apiServer + "/api/v2/claim";
   const resp = await axios.post(url, { jwtEncoded: vcJwt });

src/libs/util.ts

@@ -32,6 +32,14 @@ export interface GiverReceiverInputInfo {
   name?: string;
 }
 
+export enum OnboardPage {
+  Home = "HOME",
+  Discover = "DISCOVER",
+  Create = "CREATE",
+  Contact = "CONTACT",
+  Account = "ACCOUNT",
+}
+
 export const PRIVACY_MESSAGE =
   "The data you send will be visible to the world -- except: your IDs and the IDs of anyone you tag will stay private, only visible to them and others you explicitly allow.";
 export const SHARED_PHOTO_BASE64_KEY = "shared-photo-base64";
@@ -314,7 +322,7 @@ export const generateSaveAndActivateIdentity = async (): Promise<string> => {
   });
 
   await updateDefaultSettings({ activeDid: newId.did });
-  console.log("Updated default settings in util");
+  //console.log("Updated default settings in util");
   await updateAccountSettings(newId.did, { isRegistered: false });
 
   return newId.did;
@@ -356,6 +364,11 @@ export const getPasskeyExpirationSeconds = async (): Promise<number> => {
   );
 };
 
+// These are shared with the service worker and should be a constant. Look for the same name in additional-scripts.js
+export const DAILY_CHECK_TITLE = "DAILY_CHECK";
+// This is a special value that tells the service worker to send a direct notification to the device, skipping filters.
+export const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";
+
 export const sendTestThroughPushServer = async (
   subscriptionJSON: PushSubscriptionJSON,
   skipFilter: boolean,
@@ -366,16 +379,12 @@ export const sendTestThroughPushServer = async (
     pushUrl = settings.webPushServer;
   }
 
-  // This is a special value that tells the service worker to send a direct notification to the device, skipping filters.
-  // This is shared with the service worker and should be a constant. Look for the same name in additional-scripts.js
-  // Use something other than "Daily Update" https://gitea.anomalistdesign.com/trent_larson/py-push-server/src/commit/3c0e196c11bc98060ec5934e99e7dbd591b5da4d/app.py#L213
-  const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";
-
   const newPayload = {
+    ...subscriptionJSON,
+    // ... overridden with the following
     // eslint-disable-next-line prettier/prettier
     message: `Test, where you will see this message ${ skipFilter ? "un" : "" }filtered.`,
     title: skipFilter ? DIRECT_PUSH_TITLE : "Your Web Push",
-    ...subscriptionJSON,
   };
   console.log("Sending a test web push message:", newPayload);
   const payloadStr = JSON.stringify(newPayload);

src/main.ts

@@ -39,9 +39,12 @@ import {
   faDollar,
   faEllipsis,
   faEllipsisVertical,
+  faEnvelopeOpenText,
+  faEraser,
   faEye,
   faEyeSlash,
   faFileLines,
+  faFilter,
   faFloppyDisk,
   faFolderOpen,
   faForward,
@@ -54,6 +57,7 @@ import {
   faHouseChimney,
   faImagePortrait,
   faLeftRight,
+  faLightbulb,
   faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,
@@ -109,9 +113,12 @@ library.add(
   faDollar,
   faEllipsis,
   faEllipsisVertical,
+  faEnvelopeOpenText,
+  faEraser,
   faEye,
   faEyeSlash,
   faFileLines,
+  faFilter,
   faFloppyDisk,
   faFolderOpen,
   faForward,
@@ -124,6 +131,7 @@ library.add(
   faHouseChimney,
   faImagePortrait,
   faLeftRight,
+  faLightbulb,
   faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,

src/router/index.ts

@@ -103,6 +103,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "help-notifications",
     component: () => import("../views/HelpNotificationsView.vue"),
   },
+  {
+    path: "/help-notification-types",
+    name: "help-notification-types",
+    component: () => import("../views/HelpNotificationTypesView.vue"),
+  },
   {
     path: "/help-onboarding",
     name: "help-onboarding",
@@ -128,6 +133,16 @@ const routes: Array<RouteRecordRaw> = [
     name: "import-derive",
     component: () => import("../views/ImportDerivedAccountView.vue"),
   },
+  {
+    path: "/invite-one",
+    name: "invite-one",
+    component: () => import("../views/InviteOneView.vue"),
+  },
+  {
+    path: "/new-activity",
+    name: "new-activity",
+    component: () => import("../views/NewActivityView.vue"),
+  },
   {
     path: "/new-edit-account",
     name: "new-edit-account",
@@ -174,6 +189,16 @@ const routes: Array<RouteRecordRaw> = [
     name: "quick-action-bvc-end",
     component: () => import("../views/QuickActionBvcEndView.vue"),
   },
+  {
+    path: "/recent-offers-to-user",
+    name: "recent-offers-to-user",
+    component: () => import("../views/RecentOffersToUserView.vue"),
+  },
+  {
+    path: "/recent-offers-to-user-projects",
+    name: "recent-offers-to-user-projects",
+    component: () => import("../views/RecentOffersToUserProjectsView.vue"),
+  },
   {
     path: "/scan-contact",
     name: "scan-contact",

src/views/AccountViewView.vue

@@ -54,7 +54,10 @@
       >
         <button
           @click="
-            () => $refs.userNameDialog.open((name) => (this.givenName = name))
+            () =>
+              (this.$refs.userNameDialog as UserNameDialog).open(
+                (name) => (this.givenName = name),
+              )
           "
           class="inline-block text-md uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
         >
@@ -178,20 +181,54 @@
     >
       <!-- label -->
       <div class="mb-2 font-bold">Notifications</div>
-      <div
+      <div class="flex items-center justify-between">
-        v-if="!notificationMaybeChanged"
-        class="flex items-center justify-between cursor-pointer"
-        @click="showNotificationChoice()"
-      >
         <!-- label -->
-        <div>App Notifications</div>
+        <div>
+          Reminder Notification
+          <fa
+            icon="question-circle"
+            class="text-slate-400 fa-fw ml-2 cursor-pointer"
+            @click.stop="showReminderNotificationInfo"
+          />
+        </div>
         <!-- toggle -->
-        <div class="relative ml-2">
+        <div
+          class="relative ml-2 cursor-pointer"
+          @click="showReminderNotificationChoice()"
+        >
+          <!-- input -->
+          <input type="checkbox" v-model="notifyingReminder" class="sr-only" />
+          <!-- line -->
+          <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+          <!-- dot -->
+          <div
+            class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+          ></div>
+        </div>
+      </div>
+      <div v-if="notifyingReminder" class="w-full flex justify-between">
+        <span class="ml-8 mr-8">Message: "{{ notifyingReminderMessage }}"</span>
+        <span>{{ notifyingReminderTime.replace(" ", "&nbsp;") }}</span>
+      </div>
+      <div class="mt-2 flex items-center justify-between">
+        <!-- label -->
+        <div>
+          New Activity Notification
+          <fa
+            icon="question-circle"
+            class="text-slate-400 fa-fw ml-2 cursor-pointer"
+            @click.stop="showNewActivityNotificationInfo"
+          />
+        </div>
+        <!-- toggle -->
+        <div
+          class="relative ml-2 cursor-pointer"
+          @click="showNewActivityNotificationChoice()"
+        >
           <!-- input -->
           <input
             type="checkbox"
-            v-model="isSubscribed"
+            v-model="notifyingNewActivity"
-            name="toggleNotificationsInput"
             class="sr-only"
           />
           <!-- line -->
@@ -202,14 +239,14 @@
           ></div>
         </div>
       </div>
-      <div v-else>
+      <div v-if="notifyingNewActivityTime" class="w-full text-right">
-        Notification status may have changed. Refresh this page to see the
+        {{ notifyingNewActivityTime.replace(" ", "&nbsp;") }}
-        latest setting.
       </div>
       <router-link class="pl-4 text-sm text-blue-500" to="/help-notifications">
         Troubleshoot your notification setup.
       </router-link>
     </div>
+    <PushNotificationPermission ref="pushNotificationPermission" />
 
     <div
       id="sectionSearchLocation"
@@ -254,10 +291,7 @@
           <b>{{ endorserLimits.doneRegistrationsThisMonth }} registrations</b>
           out of <b>{{ endorserLimits.maxRegistrationsPerMonth }}</b> for this
           month.
-          <i
+          <i>(You cannot register anyone else on your first day.)</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">
             {{ readableDate(endorserLimits.nextMonthBeginDateTime) }}
@@ -426,24 +460,37 @@
 
         <div class="ml-4 mt-2">
           <input type="file" @change="uploadImportFile" class="ml-2" />
-          <div v-if="showContactImport()" class="mt-4">
+          <transition
-            <button
+            enter-active-class="transform ease-out duration-300 transition"
-              class="block text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
+            enter-from-class="translate-y-2 opacity-0 sm:translate-y-4"
-              @click="confirmSubmitImportFile()"
+            enter-to-class="translate-y-0 opacity-100 sm:translate-y-0"
-            >
+            leave-active-class="transition ease-in duration-500"
-              Overwrite Settings & Contacts
+            leave-from-class="opacity-100"
-              <br />
+            leave-to-class="opacity-0"
-              (which doesn't include Identifier Data)
+          >
-            </button>
+            <div v-if="showContactImport()" class="mt-4">
-            <button
+              <div class="flex justify-center">
-              class="block text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
+                <button
-              @click="checkContactImports()"
+                  class="block text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
-            >
+                  @click="confirmSubmitImportFile()"
-              Import Only Contacts
+                >
-              <br />
+                  Overwrite Settings & Contacts
-              after comparing
+                  <br />
-            </button>
+                  (which doesn't include Identifier Data)
-          </div>
+                </button>
+              </div>
+              <div class="flex justify-center">
+                <button
+                  class="block text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
+                  @click="checkContactImports()"
+                >
+                  Import Only Contacts
+                  <br />
+                  after comparing
+                </button>
+              </div>
+            </div>
+          </transition>
         </div>
       </div>
 
@@ -590,17 +637,51 @@
         {{ DEFAULT_PUSH_SERVER }}
       </span>
 
+      <h2 class="text-slate-500 text-sm font-bold mb-2">Partner Server URL</h2>
+      <div class="px-3 py-4">
+        <input
+          type="text"
+          class="block w-full rounded border border-slate-400 px-3 py-2"
+          v-model="partnerApiServerInput"
+        />
+        <button
+          v-if="partnerApiServerInput != partnerApiServer"
+          class="w-full px-4 rounded bg-yellow-500 border border-slate-400"
+          @click="onClickSavePartnerServer()"
+        >
+          <fa icon="floppy-disk" class="fa-fw" color="white"></fa>
+        </button>
+        <button
+          class="px-3 rounded bg-slate-200 border border-slate-400"
+          @click="partnerApiServerInput = AppConstants.PROD_PARTNER_API_SERVER"
+        >
+          Use Prod
+        </button>
+        <button
+          class="px-3 rounded bg-slate-200 border border-slate-400"
+          @click="partnerApiServerInput = AppConstants.TEST_PARTNER_API_SERVER"
+        >
+          Use Test
+        </button>
+        <button
+          class="px-3 rounded bg-slate-200 border border-slate-400"
+          @click="partnerApiServerInput = AppConstants.LOCAL_PARTNER_API_SERVER"
+        >
+          Use Local
+        </button>
+      </div>
+      <span class="px-4 text-sm" v-if="!partnerApiServerInput">
+        When that setting is blank, this app will use the default partner server
+        URL:
+        {{ DEFAULT_PARTNER_API_SERVER }}
+      </span>
+
       <div id="sectionImageServerURL" class="mt-2">
         <span class="text-slate-500 text-sm font-bold">Image Server URL</span>
         &nbsp;
         <span class="text-sm">{{ DEFAULT_IMAGE_API_SERVER }}</span>
       </div>
 
-      <div id="sectionPartnerServerURL" class="mt-2">
-        <span class="text-slate-500 text-sm font-bold">Partner Server URL</span>
-        <span class="text-sm">{{ DEFAULT_PARTNER_API_SERVER }}</span>
-      </div>
-
       <label
         for="toggleHideRegisterPromptOnNewContact"
         class="flex items-center justify-between cursor-pointer mt-4"
@@ -724,6 +805,7 @@ import { useClipboard } from "@vueuse/core";
 
 import EntityIcon from "@/components/EntityIcon.vue";
 import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
+import PushNotificationPermission from "@/components/PushNotificationPermission.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import UserNameDialog from "@/components/UserNameDialog.vue";
@@ -757,7 +839,7 @@ import {
   ImageRateLimits,
   tokenExpiryTimeDescription,
 } from "@/libs/endorserServer";
-import { getAccount } from "@/libs/util";
+import { DAILY_CHECK_TITLE, DIRECT_PUSH_TITLE, getAccount } from "@/libs/util";
 
 const inputImportFileNameRef = ref<Blob>();
 
@@ -765,6 +847,7 @@ const inputImportFileNameRef = ref<Blob>();
   components: {
     EntityIcon,
     ImageMethodDialog,
+    PushNotificationPermission,
     QuickNav,
     TopMessage,
     UserNameDialog,
@@ -789,10 +872,15 @@ export default class AccountViewView extends Vue {
   imageLimits: ImageRateLimits | null = null;
   imageServer = "";
   isRegistered = false;
-  isSubscribed = false;
   limitsMessage = "";
   loadingLimits = false;
-  notificationMaybeChanged = false;
+  notifyingNewActivity = false;
+  notifyingNewActivityTime = "";
+  notifyingReminder = false;
+  notifyingReminderMessage = "";
+  notifyingReminderTime = "";
+  partnerApiServer = "";
+  partnerApiServerInput = "";
   passkeyExpirationDescription = "";
   passkeyExpirationMinutes = DEFAULT_PASSKEY_EXPIRATION_MINUTES;
   previousPasskeyExpirationMinutes = DEFAULT_PASSKEY_EXPIRATION_MINUTES;
@@ -833,10 +921,15 @@ export default class AccountViewView extends Vue {
       /**
        * Beware! I've seen where this "ready" never resolves.
        */
-      const registration = await navigator.serviceWorker.ready;
+      const registration = await navigator.serviceWorker?.ready;
       this.subscription = await registration.pushManager.getSubscription();
-      this.isSubscribed = !!this.subscription;
+      if (!this.subscription) {
-      console.log("Got to the end of 'mounted' call.");
+        if (this.notifyingNewActivity || this.notifyingReminder) {
+          // the app thought there was a subscription but there isn't, so fix the settings
+          this.turnOffNotifyingFlags();
+        }
+      }
+      // console.log("Got to the end of 'mounted' call in AccountViewView.");
       /**
        * Beware! I've seen where we never get to this point because "ready" never resolves.
        */
@@ -882,12 +975,19 @@ export default class AccountViewView extends Vue {
     this.givenName =
       (settings?.firstName || "") +
       (settings?.lastName ? ` ${settings.lastName}` : ""); // pre v 0.1.3
-    this.isRegistered = !!settings?.isRegistered;
-    this.imageServer = settings.imageServer || "";
-    this.profileImageUrl = settings.profileImageUrl;
-    this.showContactGives = !!settings.showContactGivesInline;
     this.hideRegisterPromptOnNewContact =
       !!settings.hideRegisterPromptOnNewContact;
+    this.isRegistered = !!settings?.isRegistered;
+    this.imageServer = settings.imageServer || "";
+    this.notifyingNewActivity = !!settings.notifyingNewActivityTime;
+    this.notifyingNewActivityTime = settings.notifyingNewActivityTime || "";
+    this.notifyingReminder = !!settings.notifyingReminderTime;
+    this.notifyingReminderMessage = settings.notifyingReminderMessage || "";
+    this.notifyingReminderTime = settings.notifyingReminderTime || "";
+    this.partnerApiServer = settings.partnerApiServer || "";
+    this.partnerApiServerInput = settings.partnerApiServer || "";
+    this.profileImageUrl = settings.profileImageUrl;
+    this.showContactGives = !!settings.showContactGivesInline;
     this.passkeyExpirationMinutes =
       settings.passkeyExpirationMinutes ?? DEFAULT_PASSKEY_EXPIRATION_MINUTES;
     this.previousPasskeyExpirationMinutes = this.passkeyExpirationMinutes;
@@ -907,29 +1007,44 @@ export default class AccountViewView extends Vue {
       .then(() => setTimeout(fn, 2000));
   }
 
-  toggleShowContactAmounts() {
+  async toggleShowContactAmounts() {
     this.showContactGives = !this.showContactGives;
-    this.updateShowContactAmounts();
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      showContactGivesInline: this.showContactGives,
+    });
   }
 
-  toggleShowGeneralAdvanced() {
+  async toggleShowGeneralAdvanced() {
     this.showGeneralAdvanced = !this.showGeneralAdvanced;
-    this.updateShowGeneralAdvanced();
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      showGeneralAdvanced: this.showGeneralAdvanced,
+    });
   }
 
-  toggleProdWarning() {
+  async toggleProdWarning() {
     this.warnIfProdServer = !this.warnIfProdServer;
-    this.updateWarnIfProdServer(this.warnIfProdServer);
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      warnIfProdServer: this.warnIfProdServer,
+    });
   }
 
-  toggleTestWarning() {
+  async toggleTestWarning() {
     this.warnIfTestServer = !this.warnIfTestServer;
-    this.updateWarnIfTestServer(this.warnIfTestServer);
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      warnIfTestServer: this.warnIfTestServer,
+    });
   }
 
-  toggleShowShortcutBvc() {
+  async toggleShowShortcutBvc() {
     this.showShortcutBvc = !this.showShortcutBvc;
-    this.updateShowShortcutBvc(this.showShortcutBvc);
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      showShortcutBvc: this.showShortcutBvc,
+    });
   }
 
   readableDate(timeStr: string) {
@@ -954,73 +1069,127 @@ export default class AccountViewView extends Vue {
     }
   }
 
-  async showNotificationChoice() {
+  async showNewActivityNotificationInfo() {
-    if (!this.subscription) {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "New Activity Notification",
+        text: `
+          This will only notify you when there is new relevant activity for you personally.
+          Note that it runs on your device and many factors may affect delivery,
+          so if you want a reliable but simple daily notification then choose a 'Reminder'.
+          Do you want more details?
+        `,
+        onYes: async () => {
+          await (this.$router as Router).push({
+            name: "help-notification-types",
+          });
+        },
+        yesText: "tell me more.",
+      },
+      -1,
+    );
+  }
+
+  async showNewActivityNotificationChoice() {
+    if (!this.notifyingNewActivity) {
+      (
+        this.$refs.pushNotificationPermission as PushNotificationPermission
+      ).open(DAILY_CHECK_TITLE, async (success: boolean, timeText: string) => {
+        if (success) {
+          await db.settings.update(MASTER_SETTINGS_KEY, {
+            notifyingNewActivityTime: timeText,
+          });
+          this.notifyingNewActivity = true;
+          this.notifyingNewActivityTime = timeText;
+        }
+      });
+    } else {
       this.$notify(
         {
           group: "modal",
-          type: "notification-permission",
+          type: "notification-off",
-          title: "", // unused, only here to satisfy type check
+          title: DAILY_CHECK_TITLE, // repurposed to indicate the type of notification
           text: "", // unused, only here to satisfy type check
+          callback: async (success) => {
+            if (success) {
+              await db.settings.update(MASTER_SETTINGS_KEY, {
+                notifyingNewActivityTime: "",
+              });
+              this.notifyingNewActivity = false;
+              this.notifyingNewActivityTime = "";
+            }
+          },
         },
         -1,
       );
+    }
+  }
+
+  async showReminderNotificationInfo() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Reminder Notification",
+        text: `
+          This will notify you at a specific time each day.
+          Note that it does not give you personalized notifications,
+          so if you want less reliable but personalized notification then choose a 'New Activity' Notification.
+          Do you want more details?
+        `,
+        onYes: async () => {
+          await (this.$router as Router).push({
+            name: "help-notification-types",
+          });
+        },
+        yesText: "tell me more.",
+      },
+      -1,
+    );
+  }
+
+  async showReminderNotificationChoice() {
+    if (!this.notifyingReminder) {
+      (
+        this.$refs.pushNotificationPermission as PushNotificationPermission
+      ).open(
+        DIRECT_PUSH_TITLE,
+        async (success: boolean, timeText: string, message?: string) => {
+          if (success) {
+            await db.settings.update(MASTER_SETTINGS_KEY, {
+              notifyingReminderMessage: message,
+              notifyingReminderTime: timeText,
+            });
+            this.notifyingReminder = true;
+            this.notifyingReminderMessage = message || "";
+            this.notifyingReminderTime = timeText;
+          }
+        },
+      );
     } else {
       this.$notify(
         {
           group: "modal",
           type: "notification-off",
-          title: "", // unused, only here to satisfy type check
+          title: DIRECT_PUSH_TITLE, // repurposed to indicate the type of notification
           text: "", // unused, only here to satisfy type check
+          callback: async (success) => {
+            if (success) {
+              await db.settings.update(MASTER_SETTINGS_KEY, {
+                notifyingReminderMessage: "",
+                notifyingReminderTime: "",
+              });
+              this.notifyingReminder = false;
+              this.notifyingReminderMessage = "";
+              this.notifyingReminderTime = "";
+            }
+          },
         },
         -1,
       );
     }
-    this.notificationMaybeChanged = true;
-  }
-
-  public async updateShowContactAmounts() {
-    await db.open();
-    await db.settings.update(MASTER_SETTINGS_KEY, {
-      showContactGivesInline: this.showContactGives,
-    });
-  }
-
-  public async updateShowGeneralAdvanced() {
-    await db.open();
-    await db.settings.update(MASTER_SETTINGS_KEY, {
-      showGeneralAdvanced: this.showGeneralAdvanced,
-    });
-  }
-
-  public async updateWarnIfProdServer(newSetting: boolean) {
-    try {
-      await db.open();
-      await db.settings.update(MASTER_SETTINGS_KEY, {
-        warnIfProdServer: newSetting,
-      });
-    } catch (err) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error Updating Prod Warning",
-          text: "The setting may not have saved. Try again, maybe after restarting the app.",
-        },
-        -1,
-      );
-      console.error(
-        "Telling user to try again after prod-server-warning setting update because:",
-        err,
-      );
-    }
-  }
-
-  public async updateWarnIfTestServer(newSetting: boolean) {
-    await db.open();
-    await db.settings.update(MASTER_SETTINGS_KEY, {
-      warnIfTestServer: newSetting,
-    });
   }
 
   public async toggleHideRegisterPromptOnNewContact() {
@@ -1041,11 +1210,19 @@ export default class AccountViewView extends Vue {
     this.passkeyExpirationDescription = tokenExpiryTimeDescription();
   }
 
-  public async updateShowShortcutBvc(newSetting: boolean) {
+  public async turnOffNotifyingFlags() {
+    // should tell the push server as well
     await db.open();
     await db.settings.update(MASTER_SETTINGS_KEY, {
-      showShortcutBvc: newSetting,
+      notifyingNewActivityTime: "",
+      notifyingReminderMessage: "",
+      notifyingReminderTime: "",
     });
+    this.notifyingNewActivity = false;
+    this.notifyingNewActivityTime = "";
+    this.notifyingReminder = false;
+    this.notifyingReminderMessage = "";
+    this.notifyingReminderTime = "";
   }
 
   /**
@@ -1138,16 +1315,16 @@ export default class AccountViewView extends Vue {
    * @param {Error} error - The error object.
    */
   private handleExportError(error: unknown) {
+    console.error("Export Error:", error);
     this.$notify(
       {
         group: "alert",
         type: "danger",
         title: "Export Error",
-        text: "See console logs for more info.",
+        text: "There was an error exporting the data.",
       },
       -1,
     );
-    console.error("Export Error:", error);
   }
 
   async uploadImportFile(event: Event) {
@@ -1228,7 +1405,7 @@ export default class AccountViewView extends Vue {
       `Import progress: ${progress.completedRows} of ${progress.totalRows} rows completed.`,
     );
     if (progress.done) {
-      console.log(`Imported ${progress.completedTables} tables.`);
+      // console.log(`Imported ${progress.completedTables} tables.`);
       this.$notify(
         {
           group: "alert",
@@ -1394,6 +1571,14 @@ export default class AccountViewView extends Vue {
     this.apiServer = this.apiServerInput;
   }
 
+  async onClickSavePartnerServer() {
+    await db.open();
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      partnerApiServer: this.partnerApiServerInput,
+    });
+    this.partnerApiServer = this.partnerApiServerInput;
+  }
+
   async onClickSavePushServer() {
     await db.open();
     await db.settings.update(MASTER_SETTINGS_KEY, {

src/views/ClaimAddRawView.vue

@@ -87,7 +87,7 @@ export default class ClaimAddRawView extends Vue {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "There was a problem submitting the claim. See logs for more info.",
+          text: "There was a problem submitting the claim.",
         },
         -1,
       );

src/views/ClaimView.vue

@@ -36,21 +36,6 @@
             </button>
           </h2>
           <div class="text-sm">
-            <div>
-              {{ veriClaim.id }}
-              <button
-                @click="
-                  libsUtil.doCopyTwoSecRedo(
-                    veriClaim.id as string,
-                    () => (showIdCopy = !showIdCopy),
-                  )
-                "
-                class="ml-2 mr-2"
-              >
-                <fa icon="copy" class="text-slate-400 fa-fw" />
-              </button>
-              <span v-show="showIdCopy">Copied ID</span>
-            </div>
             <div data-testId="description">
               <fa icon="message" class="fa-fw text-slate-400" />
               {{
@@ -60,21 +45,7 @@
             </div>
             <div>
               <fa icon="user" class="fa-fw text-slate-400" />
-              {{ veriClaim.issuer }}
+              {{ didInfo(veriClaim.issuer) }}
-              <span v-if="!serverUtil.isEmptyOrHiddenDid(veriClaim.issuer)">
-                <button
-                  @click="
-                    libsUtil.doCopyTwoSecRedo(
-                      veriClaim.issuer as string,
-                      () => (showDidCopy = !showDidCopy),
-                    )
-                  "
-                  class="ml-2 mr-2"
-                >
-                  <fa icon="copy" class="text-slate-400 fa-fw" />
-                </button>
-                <span v-show="showDidCopy">Copied DID</span>
-              </span>
             </div>
             <div>
               <fa icon="calendar" class="fa-fw text-slate-400" />
@@ -86,10 +57,19 @@
               </a>
             </div>
 
+            <div v-if="veriClaim.claimType === 'PlanAction'" class="mt-4">
+              <router-link
+                :to="'/project/' + encodeURIComponent(veriClaim.handleId)"
+                class="text-blue-500 mt-2"
+              >
+                Go to Project page
+              </router-link>
+            </div>
+
             <!-- Fullfills Links -->
 
             <!-- fullfills links for a give -->
-            <div v-if="detailsForGive?.fulfillsPlanHandleId">
+            <div v-if="detailsForGive?.fulfillsPlanHandleId" class="mt-4">
               <router-link
                 :to="
                   '/project/' +
@@ -113,7 +93,7 @@
                 @click="
                   showDifferentClaimPage(detailsForGive?.fulfillsHandleId)
                 "
-                class="text-blue-500 mt-4"
+                class="text-blue-500 mt-4 cursor-pointer"
               >
                 Fulfills
                 {{
@@ -136,6 +116,36 @@
                 Offered to a bigger plan...
               </router-link>
             </div>
+
+            <!-- Providers -->
+            <div v-if="providersForGive?.length > 0" class="mt-4">
+              <span>Other assistance provided by:</span>
+              <ul class="ml-4">
+                <li
+                  v-for="provider of providersForGive"
+                  :key="provider.identifier"
+                  class="list-disc ml-4"
+                >
+                  <div class="flex gap-4">
+                    <div class="grow overflow-hidden">
+                      <a
+                        @click="
+                          provider.identifier.startsWith('did:')
+                            ? this.$router.push(
+                                '/did/' +
+                                  encodeURIComponent(provider.identifier),
+                              )
+                            : showDifferentClaimPage(provider.identifier)
+                        "
+                        class="text-blue-500 mt-4 cursor-pointer"
+                      >
+                        an activity...
+                      </a>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </div>
@@ -151,6 +161,7 @@
         <fa icon="hand-holding-heart" class="ml-2 text-white cursor-pointer" />
       </button>
     </div>
+    <GiftedDialog ref="customGiveDialog" />
 
     <div v-if="libsUtil.isGiveAction(veriClaim)">
       <div class="flex columns-3">
@@ -182,7 +193,6 @@
           </router-link>
         </span>
       </div>
-      <GiftedDialog ref="customGiveDialog" />
 
       <span v-if="totalConfirmers() === 0">Nobody has confirmed this.</span>
       <span v-else-if="totalConfirmers() === 1">
@@ -293,6 +303,7 @@
       </div>
     </div>
 
+    <!-- Note that a similar section is found in ConfirmGiftView.vue -->
     <div>
       <h2 class="font-bold uppercase text-xl mt-8 mb-2">
         {{ serverUtil.containsHiddenDid(veriClaim) ? "Visible " : "" }}Details
@@ -320,7 +331,7 @@
           If you'd like to ask any of your contacts to take a look and see if
           their contacts can see more details,
           <a
-            @click="copyToClipboard('This page location', windowLocation)"
+            @click="copyToClipboard('A link to this page', windowLocation)"
             class="text-blue-500"
             >share this page with them</a
           >
@@ -341,7 +352,7 @@
         <span v-else>
           If you'd like an introduction,
           <a
-            @click="copyToClipboard('Location', windowLocation)"
+            @click="copyToClipboard('A link to this page', windowLocation)"
             class="text-blue-500"
             >share this page with them and ask if they'll tell you more about
             about the participants.</a
@@ -465,6 +476,11 @@ import {
   OfferVerifiableCredential,
 } from "@/libs/endorserServer";
 
+interface ProviderInfo {
+  identifier: string; // could be a DID or a handleId
+  linkConfirmed: boolean;
+}
+
 @Component({
   components: { GiftedDialog, QuickNav },
 })
@@ -488,7 +504,7 @@ export default class ClaimView extends Vue {
   isEditedGlobalId = false;
   isRegistered = false;
   numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
-  showDidCopy = false;
+  providersForGive: ProviderInfo[] = [];
   showIdCopy = false;
   showVeriClaimDump = false;
   veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
@@ -511,10 +527,11 @@ export default class ClaimView extends Vue {
     this.fullClaimDump = "";
     this.fullClaimMessage = "";
     this.isEditedGlobalId = false;
-    this.isRegistered = false;
     this.numConfsNotVisible = 0;
+    this.providersForGive = [];
     this.veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
     this.veriClaimDump = "";
+    this.veriClaimDidsVisible = {};
   }
 
   async created() {
@@ -620,11 +637,39 @@ export default class ClaimView extends Vue {
         const giveResp = await this.axios.get(giveUrl, {
           headers: giveHeaders,
         });
-        if (giveResp.status === 200) {
+        if (giveResp.status === 200 && giveResp.data.data?.length > 0) {
           this.detailsForGive = giveResp.data.data[0];
         } else {
           console.error("Error getting detailed give info:", giveResp);
         }
+
+        // look for providers
+        const providerUrl =
+          this.apiServer +
+          "/api/v2/report/providersToGive?handleId=" +
+          encodeURIComponent(this.veriClaim.handleId as string);
+        const providerHeaders = await serverUtil.getHeaders(userDid);
+        const providerResp = await this.axios.get(providerUrl, {
+          headers: providerHeaders,
+        });
+        // should be at least an empty array
+        if (
+          providerResp.status === 200 &&
+          Array.isArray(providerResp.data.data)
+        ) {
+          this.providersForGive = providerResp.data.data;
+        } else {
+          console.error("Error getting give providers:", giveResp);
+          this.$notify(
+            {
+              group: "alert",
+              type: "warning",
+              title: "Error",
+              text: "Got error retrieving linked provider data.",
+            },
+            -1,
+          );
+        }
       } else if (this.veriClaim.claimType === "Offer") {
         const offerUrl =
           this.apiServer +
@@ -638,6 +683,15 @@ export default class ClaimView extends Vue {
           this.detailsForOffer = offerResp.data.data[0];
         } else {
           console.error("Error getting detailed offer info:", offerResp);
+          this.$notify(
+            {
+              group: "alert",
+              type: "warning",
+              title: "Error",
+              text: "Got error retrieving linked offer data.",
+            },
+            -1,
+          );
         }
       }
 
@@ -705,7 +759,7 @@ export default class ClaimView extends Vue {
             group: "alert",
             type: "danger",
             title: "Error",
-            text: "There was a problem getting that claim. See logs for more info.",
+            text: "There was a problem getting that claim.",
           },
           -1,
         );
@@ -727,7 +781,7 @@ export default class ClaimView extends Vue {
             group: "alert",
             type: "danger",
             title: "Error",
-            text: "Something went wrong retrieving that claim. See logs for more info.",
+            text: "Something went wrong retrieving that claim.",
           },
           -1,
         );
@@ -790,7 +844,7 @@ export default class ClaimView extends Vue {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "There was a problem submitting the confirmation. See logs for more info.",
+          text: "There was a problem submitting the confirmation.",
         },
         -1,
       );
@@ -813,6 +867,7 @@ export default class ClaimView extends Vue {
         this.veriClaim as GenericCredWrapper<OfferVerifiableCredential>,
       ),
     };
+    console.log("giver & dialog", giver, this.$refs.customGiveDialog);
     (this.$refs.customGiveDialog as GiftedDialog).open(
       giver,
       undefined,

src/views/ConfirmGiftView.vue

@@ -25,7 +25,7 @@
         >
           Do you agree?
         </span>
-        <span v-else> Details </span>
+        <span v-else> Confirmation Details </span>
       </h1>
     </div>
 
@@ -69,7 +69,7 @@
           <div class="overflow-hidden">
             <div class="text-sm">
               <div>
-                <fa icon="arrow-down" class="fa-fw text-slate-400" />
+                <fa icon="arrow-left" class="fa-fw text-slate-400" />
                 {{ giverName }}
               </div>
               <div class="ml-6">gave</div>
@@ -84,7 +84,7 @@
               </div>
               <div class="ml-6">to</div>
               <div>
-                <fa icon="arrow-up" class="fa-fw text-slate-400" />
+                <fa icon="arrow-right" class="fa-fw text-slate-400" />
                 {{ recipientName }}
               </div>
               <div>
@@ -257,10 +257,11 @@
           count as confirming it.
         </div>
         <div v-else-if="serverUtil.containsHiddenDid(veriClaim.claim)">
-          You cannot confirm this because it contains hidden identifiers.
+          You cannot confirm this because some people are hidden.
         </div>
       </div>
 
+      <!-- Note that a similar section is found in ClaimView.vue -->
       <h2
         class="font-bold uppercase text-xl text-blue-500 mt-8 mb-2 cursor-pointer"
         @click="showDetails = !showDetails"
@@ -655,7 +656,7 @@ export default class ClaimView extends Vue {
       }
       if (this.giveDetails.fulfillsPlanHandleId) {
         this.urlForNewGive +=
-          "&projectId=" +
+          "&fulfillsProjectId=" +
           encodeURIComponent(this.giveDetails.fulfillsPlanHandleId);
       }
 
@@ -762,7 +763,7 @@ export default class ClaimView extends Vue {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "There was a problem submitting the confirmation. See logs for more info.",
+          text: "There was a problem submitting the confirmation.",
         },
         5000,
       );
@@ -842,7 +843,7 @@ export default class ClaimView extends Vue {
           group: "alert",
           type: "info",
           title: "Cannot Confirm",
-          text: "You cannot confirm this because it contains hidden identifiers.",
+          text: "You cannot confirm this because some people are hidden.",
         },
         3000,
       );

src/views/ContactAmountsView.vue

@@ -278,7 +278,7 @@ export default class ContactAmountssView extends Vue {
           (origClaim.object?.amountOfThisGood as number) || 1;
       }
     } catch (error) {
-      let userMessage = "There was an error. See logs for more info.";
+      let userMessage = "There was an error.";
       const serverError = error as AxiosError;
       if (serverError) {
         if (serverError.message) {

src/views/ContactGiftingView.vue

@@ -123,7 +123,7 @@ export default class ContactGiftingView extends Vue {
             err.message ||
             "There was an error retrieving your settings or contacts.",
         },
-        -1,
+        5000,
       );
     }
   }

src/views/ContactImportView.vue

@@ -130,9 +130,7 @@ export default class ContactImportView extends Vue {
     const importedContacts =
       ((this.$route as Router).query["contacts"] as string) || "[]";
     this.contactsImporting = JSON.parse(importedContacts);
-    this.contactsSelected = new Array(this.contactsImporting.length).fill(
+    this.contactsSelected = new Array(this.contactsImporting.length).fill(true);
-      false,
-    );
 
     await db.open();
     const baseContacts = await db.contacts.toArray();
@@ -158,9 +156,9 @@ export default class ContactImportView extends Vue {
         if (R.isEmpty(differences)) {
           this.sameCount++;
         }
-      } else {
+
-        // automatically import new data
+        // don't automatically import previous data
-        this.contactsSelected[i] = true;
+        this.contactsSelected[i] = false;
       }
     }
   }

src/views/ContactQRScanShowView.vue

@@ -10,7 +10,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <fa icon="chevron-left" class="fa-fw" />
         </h1>
       </div>
 
@@ -34,8 +34,8 @@
           click here to set it for them.
         </span>
       </p>
-      <UserNameDialog ref="userNameDialog" />
     </div>
+    <UserNameDialog ref="userNameDialog" />
 
     <div
       @click="onCopyUrlToClipboard()"
@@ -90,8 +90,6 @@
 
 <script lang="ts">
 import { AxiosError } from "axios";
-import { Buffer } from "buffer/";
-import { sha256 } from "ethereum-cryptography/sha256.js";
 import QRCodeVue3 from "qr-code-generator-vue3";
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
@@ -104,15 +102,8 @@ import { NotificationIface } from "@/constants/app";
 import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { getContactPayloadFromJwtUrl } from "@/libs/crypto";
 import {
-  deriveAddress,
-  getContactPayloadFromJwtUrl,
-  nextDerivationPath,
-} from "@/libs/crypto";
-import {
-  CONTACT_URL_PREFIX,
-  createEndorserJwtForDid,
-  ENDORSER_JWT_URL_LOCATION,
   generateEndorserJwtForAccount,
   isDid,
   register,
@@ -153,37 +144,6 @@ export default class ContactQRScanShow extends Vue {
     const accounts = await accountsDB.accounts.toArray();
     const account = R.find((acc) => acc.did === this.activeDid, accounts);
     if (account) {
-      const publicKeyHex = account.publicKeyHex;
-      const publicEncKey = Buffer.from(publicKeyHex, "hex").toString("base64");
-
-      const contactInfo = {
-        iat: Date.now(),
-        iss: this.activeDid,
-        own: {
-          name:
-            (settings.firstName || "") +
-            (settings.lastName ? ` ${settings.lastName}` : ""), // lastName is deprecated, pre v 0.1.3
-          publicEncKey,
-          profileImageUrl: settings.profileImageUrl,
-          registered: settings.isRegistered,
-        },
-      };
-
-      if (account?.mnemonic && account?.derivationPath) {
-        const newDerivPath = nextDerivationPath(account.derivationPath);
-        const nextPublicHex = deriveAddress(account.mnemonic, newDerivPath)[2];
-        const nextPublicEncKey = Buffer.from(nextPublicHex, "hex");
-        const nextPublicEncKeyHash = sha256(nextPublicEncKey);
-        const nextPublicEncKeyHashBase64 =
-          Buffer.from(nextPublicEncKeyHash).toString("base64");
-        contactInfo.own.nextPublicEncKeyHash = nextPublicEncKeyHashBase64;
-      }
-
-      const vcJwt = await createEndorserJwtForDid(this.activeDid, contactInfo);
-
-      const viewPrefix = CONTACT_URL_PREFIX + ENDORSER_JWT_URL_LOCATION;
-      viewPrefix + vcJwt;
-
       const name =
         (settings.firstName || "") +
         (settings.lastName ? ` ${settings.lastName}` : ""); // lastName is deprecated, pre v 0.1.3
@@ -193,6 +153,7 @@ export default class ContactQRScanShow extends Vue {
         !!settings.isRegistered,
         name,
         settings.profileImageUrl,
+        false,
       );
     }
   }
@@ -401,7 +362,7 @@ export default class ContactQRScanShow extends Vue {
       }
     } catch (error) {
       console.error("Error when registering:", error);
-      let userMessage = "There was an error. See logs for more info.";
+      let userMessage = "There was an error.";
       const serverError = error as AxiosError;
       if (serverError) {
         if (serverError.response?.data?.error?.message) {

src/views/ContactsView.vue

@@ -23,20 +23,28 @@
 
     <!-- New Contact -->
     <div id="formAddNewContact" class="mt-4 mb-4 flex items-stretch">
+      <router-link
+        :to="{ name: 'invite-one' }"
+        class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
+      >
+        <fa icon="envelope-open-text" class="fa-fw text-2xl" />
+      </router-link>
+
       <router-link
         :to="{ name: 'contact-qr' }"
-        class="flex items-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
+        class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
       >
         <fa icon="qrcode" class="fa-fw text-2xl" />
       </router-link>
+
       <textarea
         type="text"
-        placeholder="URL or DID, Name, Public Key, Next Public Key Hash"
+        placeholder="New URL or DID, Name, Public Key, Next Public Key Hash"
         class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2 h-10"
         v-model="contactInput"
       />
       <button
-        class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
+        class="px-4 rounded-r bg-green-200 border border-l-0 border-green-400"
         @click="onClickNewContact()"
       >
         <fa icon="plus" class="fa-fw" />
@@ -79,7 +87,9 @@
           class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 py-1 rounded-md"
           @click="toggleShowContactAmounts()"
         >
-          {{ showGiveNumbers ? "Hide Given Hours" : "Show Given Hours" }}
+          {{
+            showGiveNumbers ? "Hide Hours, Offer, etc" : "See Hours, Offer, etc"
+          }}
         </button>
       </div>
     </div>
@@ -158,7 +168,7 @@
               }"
               title="See more about this person"
             >
-              <fa icon="circle-info" class="text-blue-500 ml-4" />
+              <fa icon="circle-info" class="text-xl text-blue-500 ml-4" />
             </router-link>
 
             <span class="ml-4 text-sm overflow-hidden"
@@ -172,6 +182,25 @@
             >
               <button
                 class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-l-md"
+                @click="confirmShowGiftedDialog(contact.did, activeDid)"
+                :title="givenToMeDescriptions[contact.did] || ''"
+              >
+                From:
+                <br />
+                {{
+                  /* eslint-disable prettier/prettier */
+                  this.showGiveTotals
+                    ? ((givenToMeConfirmed[contact.did] || 0)
+                        + (givenToMeUnconfirmed[contact.did] || 0))
+                    : this.showGiveConfirmed
+                        ? (givenToMeConfirmed[contact.did] || 0)
+                        : (givenToMeUnconfirmed[contact.did] || 0)
+                  /* eslint-enable prettier/prettier */
+                }}
+              </button>
+
+              <button
+                class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
                 @click="confirmShowGiftedDialog(activeDid, contact.did)"
                 :title="givenByMeDescriptions[contact.did] || ''"
               >
@@ -187,34 +216,12 @@
                         : (givenByMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
-                <br />
-                <fa icon="plus" />
-              </button>
-
-              <button
-                class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
-                @click="confirmShowGiftedDialog(contact.did, this.activeDid)"
-                :title="givenToMeDescriptions[contact.did] || ''"
-              >
-                From:
-                <br />
-                {{
-                  /* eslint-disable prettier/prettier */
-                  this.showGiveTotals
-                    ? ((givenToMeConfirmed[contact.did] || 0)
-                        + (givenToMeUnconfirmed[contact.did] || 0))
-                    : this.showGiveConfirmed
-                        ? (givenToMeConfirmed[contact.did] || 0)
-                        : (givenToMeUnconfirmed[contact.did] || 0)
-                  /* eslint-enable prettier/prettier */
-                }}
-                <br />
-                <fa icon="plus" />
               </button>
 
               <button
                 class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md border border-blue-400"
                 @click="openOfferDialog(contact.did, contact.name)"
+                data-testId="offerButton"
               >
                 Offer
               </button>
@@ -266,6 +273,7 @@
 
     <GiftedDialog ref="customGivenDialog" />
     <OfferDialog ref="customOfferDialog" />
+    <ContactNameDialog ref="contactNameDialog" />
 
     <div v-if="showLargeIdenticon" class="fixed z-[100] top-0 inset-x-0 w-full">
       <div
@@ -286,19 +294,28 @@
 import { AxiosError } from "axios";
 import { Buffer } from "buffer/";
 import { IndexableType } from "dexie";
+import { JWTPayload } from "did-jwt";
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
-import { Router } from "vue-router";
+import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
 
+import QuickNav from "@/components/QuickNav.vue";
+import EntityIcon from "@/components/EntityIcon.vue";
+import GiftedDialog from "@/components/GiftedDialog.vue";
+import OfferDialog from "@/components/OfferDialog.vue";
+import ContactNameDialog from "@/components/ContactNameDialog.vue";
+import TopMessage from "@/components/TopMessage.vue";
 import { AppString, NotificationIface } from "@/constants/app";
 import {
   db,
   retrieveSettingsForActiveAccount,
+  updateAccountSettings,
   updateDefaultSettings,
 } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { getContactPayloadFromJwtUrl } from "@/libs/crypto";
+import { decodeEndorserJwt } from "@/libs/crypto/vc";
 import {
   CONTACT_CSV_HEADER,
   CONTACT_URL_PREFIX,
@@ -307,16 +324,21 @@ import {
   isDid,
   register,
   setVisibilityUtil,
+  UserInfo,
+  VerifiableCredential,
 } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
-import QuickNav from "@/components/QuickNav.vue";
+import { generateSaveAndActivateIdentity } from "@/libs/util";
-import EntityIcon from "@/components/EntityIcon.vue";
-import GiftedDialog from "@/components/GiftedDialog.vue";
-import OfferDialog from "@/components/OfferDialog.vue";
-import TopMessage from "@/components/TopMessage.vue";
 
 @Component({
-  components: { TopMessage, GiftedDialog, EntityIcon, OfferDialog, QuickNav },
+  components: {
+    GiftedDialog,
+    EntityIcon,
+    OfferDialog,
+    QuickNav,
+    ContactNameDialog,
+    TopMessage,
+  },
 })
 export default class ContactsView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
@@ -374,6 +396,121 @@ export default class ContactsView extends Vue {
     this.contacts = baseContacts.sort((a, b) =>
       (a.name || "").localeCompare(b.name || ""),
     );
+
+    // handle a contact sent via URL
+    const importedContactJwt = (this.$route as RouteLocationNormalizedLoaded)
+      .query["contactJwt"] as string;
+    if (importedContactJwt) {
+      // really should fully verify contents
+      const { payload } = decodeEndorserJwt(importedContactJwt);
+      const userInfo = payload["own"] as UserInfo;
+      const newContact = {
+        did: payload["iss"],
+        name: userInfo.name,
+        nextPubKeyHashB64: userInfo.nextPublicEncKeyHash,
+        profileImageUrl: userInfo.profileImageUrl,
+        publicKeyBase64: userInfo.publicEncKey,
+        registered: userInfo.registered,
+      } as Contact;
+      this.addContact(newContact);
+    }
+
+    // handle an invite JWT sent via URL
+    const importedInviteJwt = (this.$route as RouteLocationNormalizedLoaded)
+      .query["inviteJwt"] as string;
+    if (importedInviteJwt === "") {
+      // this happens when a platform (usually iOS) doesn't include anything after the "=" in a shared link.
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Blank Invite",
+          text: "The invite was not included. This can happen when your device cuts off the link, so you might try pasting the full link into a browser.",
+        },
+        7000,
+      );
+    } else if (importedInviteJwt) {
+      // make sure user is created
+      if (!this.activeDid) {
+        this.activeDid = await generateSaveAndActivateIdentity();
+      }
+      // send invite directly to server, with auth for this user
+      const headers = await getHeaders(this.activeDid);
+      try {
+        const response = await this.axios.post(
+          this.apiServer + "/api/v2/claim",
+          { jwtEncoded: importedInviteJwt },
+          { headers },
+        );
+        if (response.status != 201) {
+          throw { error: { response: response } };
+        }
+        await updateAccountSettings(this.activeDid, { isRegistered: true });
+        this.isRegistered = true;
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Registered",
+            text: "You are now registered.",
+          },
+          3000,
+        );
+
+        // now add the inviter as a contact
+        const payload: JWTPayload =
+          decodeEndorserJwt(importedInviteJwt).payload;
+        const registration = payload as VerifiableCredential;
+        (this.$refs.contactNameDialog as ContactNameDialog).open(
+          "Who Invited You?",
+          "",
+          (name) => {
+            // not doing await on purpose, so that they always see the onboarding
+            this.addContact({
+              did: registration.vc.credentialSubject.agent.identifier,
+              name: name,
+              registered: true,
+            });
+            this.showOnboardingInfo();
+          },
+          () => {
+            // not doing await on purpose, so that they always see the onboarding
+            this.addContact({
+              did: registration.vc.credentialSubject.agent.identifier,
+              name: "(person who invited you)",
+              registered: true,
+            });
+            this.showOnboardingInfo();
+          },
+        );
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } catch (error: any) {
+        console.error("Error redeeming invite:", error);
+        let message = "Got an error sending the invite.";
+        if (
+          error.response &&
+          error.response.data &&
+          error.response.data.error
+        ) {
+          if (error.response.data.error.message) {
+            message = error.response.data.error.message;
+          } else {
+            message = error.response.data.error;
+          }
+        } else if (error.message) {
+          message = error.message;
+        }
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error with Invite",
+            text: message,
+          },
+          5000,
+        );
+      }
+    }
   }
 
   private danger(message: string, title: string = "Error", timeout = 5000) {
@@ -388,6 +525,21 @@ export default class ContactsView extends Vue {
     );
   }
 
+  private showOnboardingInfo() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "They're Added To Your List",
+        text: "Would you like to go to the main page now?",
+        onYes: async () => {
+          (this.$router as Router).push({ name: "home" });
+        },
+      },
+      -1,
+    );
+  }
+
   private filteredContacts() {
     return this.showGiveNumbers
       ? this.contactsSelected.length === 0
@@ -443,7 +595,7 @@ export default class ContactsView extends Vue {
               (useRecipient ? "given" : "received") +
               " data from the server.",
           },
-          -1,
+          5000,
         );
       }
     };
@@ -716,7 +868,7 @@ export default class ContactsView extends Vue {
                   type: "confirm",
                   title: "Register",
                   text: "Do you want to register them?",
-                  onCancel: async (stopAsking: boolean) => {
+                  onCancel: async (stopAsking?: boolean) => {
                     if (stopAsking) {
                       await updateDefaultSettings({
                         hideRegisterPromptOnNewContact: stopAsking,
@@ -724,7 +876,7 @@ export default class ContactsView extends Vue {
                       this.hideRegisterPromptOnNewContact = stopAsking;
                     }
                   },
-                  onNo: async (stopAsking: boolean) => {
+                  onNo: async (stopAsking?: boolean) => {
                     if (stopAsking) {
                       await updateDefaultSettings({
                         hideRegisterPromptOnNewContact: stopAsking,
@@ -831,11 +983,18 @@ export default class ContactsView extends Vue {
       }
     } catch (error) {
       console.error("Error when registering:", error);
-      let userMessage = "There was an error. See logs for more info.";
+      let userMessage = "There was an error.";
       const serverError = error as AxiosError;
-      if (serverError) {
+      if (serverError.isAxiosError) {
-        if (serverError.response?.data?.error?.message) {
+        if (
-          userMessage = serverError.response.data.error.message;
+          serverError.response?.data &&
+          typeof serverError.response.data === "object" &&
+          "error" in serverError.response.data &&
+          typeof serverError.response.data.error === "object" &&
+          serverError.response.data.error !== null &&
+          "message" in serverError.response.data.error
+        ) {
+          userMessage = serverError.response.data.error.message as string;
         } else if (serverError.message) {
           userMessage = serverError.message; // Info for the user
         } else {
@@ -891,7 +1050,10 @@ export default class ContactsView extends Vue {
       }
       return true;
     } else {
-      console.error("Got strange result from setting visibility:", result);
+      console.error(
+        "Got strange result from setting visibility. It can happen when setting visibility on oneself.",
+        result,
+      );
       const message =
         (result.error as string) || "Could not set visibility on the server.";
       this.$notify(
@@ -948,8 +1110,8 @@ export default class ContactsView extends Vue {
   }
 
   private showGiftedDialog(giverDid: string, recipientDid: string) {
-    let giver: libsUtil.GiverReceiverInputInfo;
+    let giver: libsUtil.GiverReceiverInputInfo | undefined;
-    let receiver: libsUtil.GiverReceiverInputInfo;
+    let receiver: libsUtil.GiverReceiverInputInfo | undefined;
     if (giverDid) {
       giver = {
         did: giverDid,
@@ -972,7 +1134,7 @@ export default class ContactsView extends Vue {
         newList[recipientDid] = (newList[recipientDid] || 0) + amount;
         this.givenByMeUnconfirmed = newList;
       };
-      customTitle = "Given to " + receiver.name;
+      customTitle = "Given to " + (receiver?.name || "Someone Unnamed");
     } else {
       // must be (recipientDid == this.activeDid)
       callback = (amount: number) => {
@@ -980,14 +1142,14 @@ export default class ContactsView extends Vue {
         newList[giverDid] = (newList[giverDid] || 0) + amount;
         this.givenToMeUnconfirmed = newList;
       };
-      customTitle = "Received from " + giver.name;
+      customTitle = "Received from " + (giver?.name || "Someone Unnamed");
     }
     (this.$refs.customGivenDialog as GiftedDialog).open(
       giver,
       receiver,
-      undefined as string,
+      undefined as unknown as string,
       customTitle,
-      undefined as string,
+      undefined as unknown as string,
       callback,
     );
   }
@@ -1013,7 +1175,7 @@ export default class ContactsView extends Vue {
           title: "Error Updating Contact Setting",
           text: "The setting may not have saved. Try again, maybe after restarting the app.",
         },
-        -1,
+        5000,
       );
       console.error(
         "Telling user to try again after contact-amounts setting update because:",

src/views/DIDView.vue

@@ -41,8 +41,8 @@
           class="ml-2 mr-2 mt-4"
         >
           Details
-          <fa v-if="showDidDetails" icon="chevron-up" class="text-blue-400" />
+          <fa v-if="showDidDetails" icon="chevron-down" class="text-blue-400" />
-          <fa v-else icon="chevron-down" class="text-blue-400" />
+          <fa v-else icon="chevron-right" class="text-blue-400" />
         </button>
         <!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
         <pre
@@ -163,6 +163,7 @@
       </div>
     </div>
 
+    <!-- Edit Name Dialog, maybe should be replaced by ContactNameDialog -->
     <div v-if="contactEdit" class="dialog-overlay">
       <div class="dialog">
         <h1 class="text-xl font-bold text-center mb-4">Edit Name</h1>
@@ -199,7 +200,9 @@
     </div>
     <!-- Results List -->
     <div v-if="claims.length > 0" class="mt-4">
-      <div class="text-l font-bold text-center">Claims That Involve Them</div>
+      <div class="text-l font-bold text-center">
+        Claims That Involve {{ isMyDid ? "You" : "Them" }}
+      </div>
     </div>
     <InfiniteScroll @reached-bottom="loadMoreData">
       <ul>
@@ -439,7 +442,7 @@ export default class DIDView extends Vue {
       }
     } catch (error) {
       console.error("Error when registering:", error);
-      let userMessage = "There was an error. See logs for more info.";
+      let userMessage = "There was an error.";
       const serverError = error as AxiosError;
       if (serverError) {
         if (serverError.response?.data?.error?.message) {

src/views/DiscoverView.vue

@@ -9,6 +9,8 @@
       Discover Projects
     </h1>
 
+    <OnboardingDialog ref="onboardingDialog" />
+
     <!-- Quick Search -->
     <div
       id="QuickSearch"
@@ -76,11 +78,12 @@
     </div>
 
     <div v-if="isLocalActive">
-      <div>
+      <div class="text-center">
         <button
           class="ml-2 mt-2 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
           @click="$router.push({ name: 'search-area' })"
         >
+          <fa icon="location-dot" class="fa-fw" />
           Select a {{ searchBox ? "Different" : "" }} Location for Nearby Search
         </button>
       </div>
@@ -95,8 +98,11 @@
     </div>
     <div v-else-if="projects.length === 0" class="text-center mt-8">
       <p class="text-lg text-slate-500">
-        No projects were found with that search.
+        <span v-if="isLocalActive">
-        <span v-if="isLocalActive">Try looking Anywhere.</span>
+          <span v-if="searchBox"> None found in the selected area. </span>
+          <!-- Otherwise there's no search area selected so we'll just leave the search box for them to click. -->
+        </span>
+        <span v-else>No projects were found with that search.</span>
       </p>
     </div>
 
@@ -144,16 +150,19 @@ import { Router } from "vue-router";
 import QuickNav from "@/components/QuickNav.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
+import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import { NotificationIface } from "@/constants/app";
 import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { BoundingBox } from "@/db/tables/settings";
 import { didInfo, getHeaders, PlanData } from "@/libs/endorserServer";
+import { OnboardPage } from "@/libs/util";
 
 @Component({
   components: {
     InfiniteScroll,
+    OnboardingDialog,
     ProjectIcon,
     QuickNav,
     TopMessage,
@@ -192,6 +201,12 @@ export default class DiscoverView extends Vue {
 
     this.searchTerms = (this.$route as Router).query["searchText"] || "";
 
+    if (!settings.finishedOnboarding) {
+      (this.$refs.onboardingDialog as OnboardingDialog).open(
+        OnboardPage.Discover,
+      );
+    }
+
     if (this.searchBox) {
       await this.searchLocal();
     } else {

src/views/GiftedDetailsView.vue

@@ -21,12 +21,22 @@
     <h1 class="text-4xl text-center font-light px-4 mb-4">What Was Given</h1>
 
     <h1 class="text-xl font-bold text-center mb-4">
-      <span>From {{ giverName || "someone not named" }}</span>
+      <span>
+        From
+        {{
+          providedByProject
+            ? providerProjectName
+            : providedByGiver
+              ? giverName
+              : "someone not named"
+        }}
+      </span>
+      <br />
       <span>
         to
         {{
           givenToProject
-            ? projectName
+            ? fulfillsProjectName
             : givenToRecipient
               ? recipientName
               : "someone unidentified"
@@ -64,7 +74,7 @@
       </div>
     </div>
 
-    <div class="flex justify-center mt-4" data-testid="imagery">
+    <div class="flex justify-center mt-4" data-testId="imagery">
       <span v-if="imageUrl" class="flex justify-between">
         <a :href="imageUrl" target="_blank">
           <img :src="imageUrl" class="h-24 rounded-xl" />
@@ -87,7 +97,29 @@
 
     <div class="h-7 mt-4 flex">
       <input
-        v-if="projectId && !givenToRecipient"
+        v-if="providerProjectId && !providedByGiver"
+        type="checkbox"
+        class="h-6 w-6 mr-2"
+        v-model="providedByProject"
+      />
+      <fa
+        v-else
+        icon="square"
+        class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
+        @click="notifyUserOfProvidingProject()"
+      />
+      <label class="text-sm mt-1">
+        {{
+          providerProjectId
+            ? "This was provided by " + providerProjectName
+            : "This was not provided by a project"
+        }}
+      </label>
+    </div>
+
+    <div class="h-7 mt-4 flex">
+      <input
+        v-if="fulfillsProjectId && !givenToRecipient"
         type="checkbox"
         class="h-6 w-6 mr-2"
         v-model="givenToProject"
@@ -96,13 +128,13 @@
         v-else
         icon="square"
         class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
-        @click="notifyUserOfProject()"
+        @click="notifyUserFulfillsProject()"
       />
       <label class="text-sm mt-1">
         {{
-          projectId
+          fulfillsProjectId
-            ? "This was given to " + projectName
+            ? "This was given to " + fulfillsProjectName
-            : "No project was chosen"
+            : "No recipient project was chosen"
         }}
       </label>
     </div>
@@ -211,8 +243,10 @@ export default class GiftedDetails extends Vue {
   amountInput = "0";
   description = "";
   destinationPathAfter = "";
-  givenToProject = false;
+  fulfillsProjectId = "";
-  givenToRecipient = false;
+  fulfillsProjectName = "a project";
+  givenToProject = false; // basically static, based on input; if we allow changing then let's fix things (see below)
+  givenToRecipient = false; // basically static, based on input; if we allow changing then let's fix things (see below)
   giverDid: string | undefined;
   giverName = "";
   hideBackButton = false;
@@ -221,8 +255,10 @@ export default class GiftedDetails extends Vue {
   message = "";
   offerId = "";
   prevCredToEdit?: GenericCredWrapper<GiveVerifiableCredential>;
-  projectId = "";
+  providerProjectId = "";
-  projectName = "a project";
+  providerProjectName = "a project";
+  providedByProject = false; // basically static, based on input; if we allow changing then let's fix things (see below)
+  providedByGiver = false; // basically static, based on input; if we allow changing then let's fix things (see below)
   recipientDid = "";
   recipientName = "";
   showGeneralAdvanced = false;
@@ -282,11 +318,31 @@ export default class GiftedDetails extends Vue {
       offer?.identifier ||
       this.offerId) as string;
 
-    // find any project ID
+    // find any fulfills project ID
-    const project = fulfillsArray.find((rec) => rec["@type"] === "PlanAction");
+    const fulfillsProject = fulfillsArray.find(
-    this.projectId = ((this.$route as Router).query["projectId"] ||
+      (rec) => rec["@type"] === "PlanAction",
-      project?.identifier ||
+    );
-      this.projectId) as string;
+    // eslint-disable-next-line prettier/prettier
+    this.fulfillsProjectId =
+      ((this.$route as Router).query["fulfillsProjectId"] ||
+      fulfillsProject?.identifier ||
+      this.fulfillsProjectId) as string;
+
+    // find any provider project ID
+    const provider = this.prevCredToEdit?.claim?.provider;
+    const providerArray = Array.isArray(provider)
+      ? provider
+      : provider
+        ? [provider]
+        : [];
+    const providerProject = providerArray.find(
+      (rec) => rec["@type"] === "PlanAction",
+    );
+    this.providerProjectId = ((this.$route as Router).query[
+      "providerProjectId"
+    ] ||
+      providerProject?.identifier ||
+      this.providerProjectId) as string;
 
     this.recipientDid = ((this.$route as Router).query["recipientDid"] ||
       this.prevCredToEdit?.claim?.recipient?.identifier) as string;
@@ -318,69 +374,70 @@ export default class GiftedDetails extends Vue {
       this.imageUrl = (this.$route as Router).query["shareUrl"] as string;
     }
 
-    try {
+    const settings = await retrieveSettingsForActiveAccount();
-      const settings = await retrieveSettingsForActiveAccount();
+    this.apiServer = settings.apiServer || "";
-      this.apiServer = settings.apiServer || "";
+    this.activeDid = settings.activeDid || "";
-      this.activeDid = settings.activeDid || "";
 
-      let allContacts: Contact[] = [];
+    let allContacts: Contact[] = [];
-      let allMyDids: string[] = [];
+    let allMyDids: string[] = [];
-      if (
+    if (
-        (this.giverDid && !this.giverName) ||
+      (this.giverDid && !this.giverName) ||
-        (this.recipientDid && !this.recipientName)
+      (this.recipientDid && !this.recipientName)
-      ) {
+    ) {
-        allContacts = await db.contacts.toArray();
+      allContacts = await db.contacts.toArray();
 
-        await accountsDB.open();
+      await accountsDB.open();
-        const allAccounts = await accountsDB.accounts.toArray();
+      const allAccounts = await accountsDB.accounts.toArray();
-        allMyDids = allAccounts.map((acc) => acc.did);
+      allMyDids = allAccounts.map((acc) => acc.did);
-        if (this.giverDid && !this.giverName) {
+      if (this.giverDid && !this.giverName) {
-          this.giverName = didInfo(
+        this.giverName = didInfo(
-            this.giverDid,
+          this.giverDid,
-            this.activeDid,
+          this.activeDid,
-            allMyDids,
+          allMyDids,
-            allContacts,
+          allContacts,
-          );
+        );
-        }
+      }
-        if (this.recipientDid && !this.recipientName) {
+      if (this.recipientDid && !this.recipientName) {
-          this.recipientName = didInfo(
+        this.recipientName = didInfo(
-            this.recipientDid,
+          this.recipientDid,
-            this.activeDid,
+          this.activeDid,
-            allMyDids,
+          allMyDids,
-            allContacts,
+          allContacts,
-          );
+        );
-        }
       }
-      // these should be functions but something's wrong with the syntax in the <> conditional
-      this.givenToProject = !!this.projectId;
-      this.givenToRecipient = !this.givenToProject && !!this.recipientDid;
-
-      this.showGeneralAdvanced = !!settings.showGeneralAdvanced;
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (err: any) {
-      console.error("Error retrieving settings from database:", err);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: err.message || "There was an error retrieving your settings.",
-        },
-        -1,
-      );
     }
+    // these should be functions but something's wrong with the syntax in the <> conditional
+    this.givenToProject = !!this.fulfillsProjectId;
+    this.givenToRecipient = !this.givenToProject && !!this.recipientDid;
 
-    if (this.projectId) {
+    // these should be functions but something's wrong with the syntax in the <> conditional
-      // console.log("Getting project name from cache", this.projectId);
+    this.providedByProject = !!this.providerProjectId;
-      const project = await getPlanFromCache(
+    this.providedByGiver = !this.providedByProject && !!this.giverDid;
-        this.projectId,
+
+    this.showGeneralAdvanced = !!settings.showGeneralAdvanced;
+
+    if (this.fulfillsProjectId) {
+      // console.log("Getting project name from cache", this.fulfillsProjectId);
+      const fulfillsProject = await getPlanFromCache(
+        this.fulfillsProjectId,
         this.axios,
         this.apiServer,
         this.activeDid,
       );
-      this.projectName = project?.name
+      this.fulfillsProjectName = fulfillsProject?.name
-        ? "the project: " + project.name
+        ? `the project "${fulfillsProject.name}"`
+        : "a project";
+    }
+    if (this.providerProjectId) {
+      // console.log("Getting project name from cache", this.providerProjectId);
+      const providerProject = await getPlanFromCache(
+        this.providerProjectId,
+        this.axios,
+        this.apiServer,
+        this.activeDid,
+      );
+      this.providerProjectName = providerProject?.name
+        ? `the project "${providerProject.name}"`
         : "a project";
     }
   }
@@ -471,7 +528,7 @@ export default class GiftedDetails extends Vue {
       console.error("Error deleting image:", error);
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       if ((error as any).response.status === 404) {
-        console.log("The image was already deleted:", error);
+        console.log("Weird: the image was already deleted.", error);
 
         localStorage.removeItem("imageUrl");
         this.imageUrl = "";
@@ -545,8 +602,35 @@ export default class GiftedDetails extends Vue {
     await this.recordGive();
   }
 
-  notifyUserOfProject() {
+  notifyUserOfProvidingProject() {
-    if (!this.projectId) {
+    // we're here because they clicked and either there is no provider project or there is a giver chosen
+    if (!this.providerProjectId) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Error",
+          text: "To select a project as a provider, you must open this page through a project.",
+        },
+        3000,
+      );
+    } else {
+      // no providing project was chosen
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Error",
+          text: "You cannot select both a giving project and person.",
+        },
+        3000,
+      );
+    }
+  }
+
+  notifyUserFulfillsProject() {
+    // we're here because they clicked and either there is no fulfills project or there is a recipient chosen
+    if (!this.fulfillsProjectId) {
       this.$notify(
         {
           group: "alert",
@@ -557,7 +641,7 @@ export default class GiftedDetails extends Vue {
         3000,
       );
     } else {
-      // must be because givenToRecipient is true
+      // no fulfills project was chosen
       this.$notify(
         {
           group: "alert",
@@ -607,7 +691,9 @@ export default class GiftedDetails extends Vue {
       const recipientDid = this.givenToRecipient
         ? this.recipientDid
         : undefined;
-      const projectId = this.givenToProject ? this.projectId : undefined;
+      const fulfillsProjectId = this.givenToProject
+        ? this.fulfillsProjectId
+        : undefined;
       let result;
       if (this.prevCredToEdit) {
         // don't create from a blank one in case some properties were set from a different interface
@@ -621,10 +707,11 @@ export default class GiftedDetails extends Vue {
           this.description,
           parseFloat(this.amountInput),
           this.unitCode,
-          projectId,
+          fulfillsProjectId,
           this.offerId,
           this.isTrade,
           this.imageUrl,
+          this.providerProjectId,
         );
       } else {
         result = await createAndSubmitGive(
@@ -636,10 +723,11 @@ export default class GiftedDetails extends Vue {
           this.description,
           parseFloat(this.amountInput),
           this.unitCode,
-          projectId,
+          fulfillsProjectId,
           this.offerId,
           this.isTrade,
           this.imageUrl,
+          this.providerProjectId,
         );
       }
 
@@ -696,7 +784,9 @@ export default class GiftedDetails extends Vue {
 
   constructGiveParam() {
     const recipientDid = this.givenToRecipient ? this.recipientDid : undefined;
-    const projectId = this.givenToProject ? this.projectId : undefined;
+    const fulfillsProjectId = this.givenToProject
+      ? this.fulfillsProjectId
+      : undefined;
     const giveClaim = hydrateGive(
       this.prevCredToEdit?.claim as GiveVerifiableCredential,
       this.giverDid,
@@ -704,10 +794,11 @@ export default class GiftedDetails extends Vue {
       this.description,
       parseFloat(this.amountInput),
       this.unitCode,
-      projectId,
+      fulfillsProjectId,
       this.offerId,
       this.isTrade,
       this.imageUrl,
+      this.providerProjectId,
       this.prevCredToEdit?.id as string,
     );
     const claimStr = JSON.stringify(giveClaim);

src/views/HelpNotificationTypesView.vue

@@ -0,0 +1,68 @@
+<template>
+  <QuickNav />
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Breadcrumb -->
+    <div class="mb-8">
+      <!-- Back -->
+      <div class="text-lg text-center font-light relative px-7">
+        <h1
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          @click="$router.back()"
+        >
+          <fa icon="chevron-left" class="fa-fw"></fa>
+        </h1>
+      </div>
+
+      <!-- Heading -->
+      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+        Notification Types
+      </h1>
+    </div>
+
+    <!-- eslint-disable prettier/prettier -->
+    <div>
+      <p>There are two types of notifications:</p>
+
+      <h2 class="text-xl font-semibold mt-4">Reminder Notifications</h2>
+      <div>
+        <p>
+          The Reminder Notification will be sent to you daily with a specific message,
+          at whatever time you choose. Use it to remind
+          yourself to act, for example: pause and consider who has given you
+          something, so you can record thanks in here.
+        </p>
+        <p>
+          This is a reliable message, but it doesn't contain any details about
+          activity that might be especially interesting to you.
+        </p>
+      </div>
+
+      <h2 class="text-xl font-semibold mt-4">New Activity Notifications</h2>
+      <div>
+        <p>
+          The New Activity Notification will be sent to you when there is new, relevant activity for you.
+          It will only trigger if something involves you or a project of interest; it will not
+          bug you for other, general activity.
+        </p>
+        <p>
+          This type is not as reliable as a Reminder Notification because mobile devices often suppress
+          such notifications to save battery. (We are working on other ways to notify you more
+          reliably. If you want to quickly check for relevant activity daily, use the Reminder
+          Notification and open the app and look for a large green button that points out new
+          activity that is personal to you.)
+        </p>
+      </div>
+    </div>
+    <!-- eslint-enable -->
+  </section>
+</template>
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+
+import QuickNav from "@/components/QuickNav.vue";
+
+@Component({ components: { QuickNav } })
+export default class HelpNotificationTypesView extends Vue {}
+</script>

src/views/HelpNotificationsView.vue

@@ -39,6 +39,15 @@
         </p>
       </div>
 
+      <h2 class="text-xl font-semibold mt-4">Android Users</h2>
+      <div>
+        <p>
+          Note that you may not receive notifications when the app is in the
+          background. When you're done working, close the app, and then you'll
+          get the reminder notifications.
+        </p>
+      </div>
+
       <h2 class="text-xl font-semibold mt-4">
         If this app doesn't support notifications...
         <!-- Note that that exact verbiage shows in a message elsewhere. -->
@@ -305,8 +314,8 @@ export default class HelpNotificationsView extends Vue {
 
   async mounted() {
     try {
-      const registration = await navigator.serviceWorker.ready;
+      const registration = await navigator.serviceWorker?.ready;
-      const fullSub = await registration.pushManager.getSubscription();
+      const fullSub = await registration?.pushManager.getSubscription();
       this.subscriptionJSON = fullSub?.toJSON();
     } catch (error) {
       console.error("Mount error:", error);
@@ -366,7 +375,7 @@ export default class HelpNotificationsView extends Vue {
 
   showTestNotification() {
     const TEST_NOTIFICATION_TITLE = "It Worked";
-    navigator.serviceWorker.ready
+    navigator.serviceWorker?.ready
       .then((registration) => {
         return registration.showNotification(TEST_NOTIFICATION_TITLE, {
           body: "This is your test notification.",

src/views/HelpOnboardingView.vue

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

src/views/HelpView.vue

@@ -27,6 +27,14 @@
         This app focuses on gifts & gratitude, using them to build cool things together with your network.
       </p>
 
+      <p class="ml-4">
+        If you'd like to see the page-by-page help,
+        <span
+          @click="unsetFinishedOnboarding()"
+          class="text-blue-500 cursor-pointer"
+        >click here</span>.
+      </p>
+
       <h2 class="text-xl font-semibold">What is the idea here?</h2>
       <p>
         We are building networks of people who want to grow good society from the ground up, using modern
@@ -379,7 +387,7 @@
         <fa icon="circle-user" /> page.
       </p>
       <p>
-        There is a even more functionality in a mobile app (and more
+        There is even more functionality in a mobile app (and more
         documentation) at
         <a href="https://endorser.ch" target="_blank" class="text-blue-500">
           EndorserSearch.com
@@ -515,6 +523,8 @@
           <fa v-show="!showDidCopy" icon="copy" class="text-slate-400 fa-fw" />
         </button>
         <span v-show="showDidCopy" class="ml-2 text-sm text-green-500">Copied</span>
+        You can donate online via
+        <a href="https://www.patreon.com/TimeSafari" target="_blank" class="text-blue-500">Patreon here</a>.
         For other donations, contact us.
       </p>
 
@@ -546,11 +556,16 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
 
 import * as Package from "../../package.json";
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
+import {
+  retrieveSettingsForActiveAccount,
+  updateAccountSettings,
+} from "@/db/index";
 
 @Component({ components: { QuickNav } })
 export default class Help extends Vue {
@@ -573,5 +588,15 @@ export default class Help extends Vue {
       .copy(text)
       .then(() => setTimeout(fn, 2000));
   }
+
+  async unsetFinishedOnboarding() {
+    const settings = await retrieveSettingsForActiveAccount();
+    if (settings.activeDid) {
+      await updateAccountSettings(settings.activeDid || "", {
+        finishedOnboarding: false,
+      });
+    }
+    (this.$router as Router).push({ name: "home" });
+  }
 }
 </script>

src/views/HomeView.vue

@@ -8,6 +8,8 @@
       {{ AppString.APP_NAME }}
     </h1>
 
+    <OnboardingDialog ref="onboardingDialog" />
+
     <!-- prompt to install notifications with notificationsSupported, which we're making an advanced feature -->
     <div class="mb-8 mt-8">
       <div
@@ -110,16 +112,14 @@
             <!-- !isCreatingIdentifier && isRegistered -->
 
             <!-- show the actions for recognizing a give -->
-            <div class="flex justify-between">
+            <div class="flex">
-              <h2 class="text-xl font-bold">Record Something Given By:</h2>
+              <h2 class="text-xl font-bold">What have you seen someone do?</h2>
-              <div class="flex justify-end">
+              <button
-                <button
+                @click="openGiftedPrompts()"
-                  @click="openGiftedPrompts()"
+                class="ml-2 block text-xs text-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 rounded-md"
-                  class="block text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+              >
-                >
+                <fa icon="lightbulb" class="fa-fw" />
-                  Ideas...
+              </button>
-                </button>
-              </div>
             </div>
 
             <ul
@@ -137,7 +137,7 @@
                 </h3>
               </li>
               <li v-if="allContacts.length === 0" class="text-sm">
-                (Add contacts to see more people worthy of recognition.)
+                (Add friends to see more people worthy of recognition.)
               </li>
               <li
                 v-for="contact in allContacts.slice(0, 6)"
@@ -159,9 +159,9 @@
                 <router-link
                   v-if="allContacts.length >= 6"
                   :to="{ name: 'contact-gift' }"
-                  class="block text-center text-md font-bold bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+                  class="flex align-bottom text-xs text-blue-500 mt-12"
                 >
-                  Choose From All Contacts
+                  ... or someone else...
                 </router-link>
               </li>
             </ul>
@@ -175,26 +175,68 @@
     <FeedFilters ref="feedFilters" />
 
     <!-- Results List -->
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mt-4 mb-4">
+    <div class="bg-slate-100 rounded-md px-4 py-3 mt-4 mb-4">
       <div class="flex items-center mb-4">
-        <h2 class="text-xl font-bold">Latest Activity</h2>
+        <h2 class="text-xl font-bold">
-        <button @click="openFeedFilters()" class="block text-center ml-auto">
+          Latest Activity
-          <span class="text-sm text-white">
+          <button @click="openFeedFilters()">
-            <span
+            <span class="text-xs text-white">
-              v-if="resultsAreFiltered()"
+              <fa
-              class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md"
+                v-if="resultsAreFiltered()"
-            >
+                icon="filter"
-              Filtered
+                class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
+              />
+              <fa
+                v-else
+                icon="filter"
+                class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
+              />
             </span>
-            <span
+          </button>
-              v-else
+        </h2>
-              class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md"
-            >
-              Unfiltered
-            </span>
-          </span>
-        </button>
       </div>
+
+      <div
+        @click="goToActivityToUserPage()"
+        class="border-t p-2 border-slate-300"
+      >
+        <div class="flex justify-center">
+          <div
+            v-if="numNewOffersToUser"
+            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] m-1 px-4 py-4 rounded-md text-white"
+          >
+            <span
+              class="block text-center text-6xl"
+              data-testId="newDirectOffersActivityNumber"
+            >
+              {{ numNewOffersToUser }}{{ newOffersToUserHitLimit ? "+" : "" }}
+            </span>
+            <p class="text-center">
+              new offer{{ numNewOffersToUser === 1 ? "" : "s" }} to you
+            </p>
+          </div>
+          <div
+            v-if="numNewOffersToUserProjects"
+            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] m-1 px-4 py-4 rounded-md text-white"
+          >
+            <span
+              class="block text-center text-6xl"
+              data-testId="newOffersToUserProjectsActivityNumber"
+            >
+              {{ numNewOffersToUserProjects
+              }}{{ newOffersToUserProjectsHitLimit ? "+" : "" }}
+            </span>
+            <p class="text-center">
+              new offer{{ numNewOffersToUserProjects === 1 ? "" : "s" }} to your
+              projects
+            </p>
+          </div>
+        </div>
+        <div class="flex justify-end mt-2">
+          <button class="text-blue-500">View All New Activity For You</button>
+        </div>
+      </div>
+
       <InfiniteScroll @reached-bottom="loadMoreGives">
         <ul id="listLatestActivity" class="border-t border-slate-300">
           <li
@@ -203,7 +245,7 @@
             :key="record.jwtId"
           >
             <div
-              class="border-b border-dashed border-slate-400 text-orange-400 pb-2 mb-2 font-bold text-sm"
+              class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
               v-if="record.jwtId == feedLastViewedClaimId"
             >
               You've already seen all the following
@@ -268,7 +310,7 @@
                 <a @click="onClickLoadClaim(record.jwtId)">
                   <fa
                     icon="file-lines"
-                    class="pl-2 text-blue-500 cursor-pointer"
+                    class="pl-2 text-slate-500 cursor-pointer"
                   />
                 </a>
               </span>
@@ -282,6 +324,15 @@
                 >
                   <fa icon="hammer" class="text-blue-500" />
                 </router-link>
+                <router-link
+                  v-if="record.providerPlanHandleId"
+                  :to="
+                    '/project/' +
+                    encodeURIComponent(record.providerPlanHandleId)
+                  "
+                >
+                  <fa icon="hammer" class="text-blue-500" />
+                </router-link>
               </span>
             </div>
             <div v-if="record.image" class="flex justify-center">
@@ -317,6 +368,7 @@ import GiftedDialog from "@/components/GiftedDialog.vue";
 import GiftedPrompts from "@/components/GiftedPrompts.vue";
 import FeedFilters from "@/components/FeedFilters.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
+import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import UserNameDialog from "@/components/UserNameDialog.vue";
@@ -326,15 +378,15 @@ import {
   PASSKEYS_ENABLED,
 } from "@/constants/app";
 import {
-  db,
   accountsDB,
-  updateAccountSettings,
+  db,
   retrieveSettingsForActiveAccount,
+  updateAccountSettings,
 } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import {
   BoundingBox,
-  isAnyFeedFilterOn,
+  checkIsAnyFeedFilterOn,
   MASTER_SETTINGS_KEY,
 } from "@/db/tables/settings";
 import {
@@ -343,12 +395,15 @@ import {
   didInfoForContact,
   fetchEndorserRateLimits,
   getHeaders,
+  getNewOffersToUser,
+  getNewOffersToUserProjects,
   getPlanFromCache,
   GiveSummaryRecord,
 } from "@/libs/endorserServer";
 import {
   generateSaveAndActivateIdentity,
   GiverReceiverInputInfo,
+  OnboardPage,
   registerSaveAndActivatePasskey,
 } from "@/libs/util";
 
@@ -359,6 +414,7 @@ interface GiveRecordWithContactInfo extends GiveSummaryRecord {
     profileImageUrl?: string;
   };
   image?: string;
+  providerPlanName?: string;
   recipientProjectName?: string;
   receiver: {
     displayName: string;
@@ -374,12 +430,13 @@ interface GiveRecordWithContactInfo extends GiveSummaryRecord {
     },
   },
   components: {
+    EntityIcon,
+    FeedFilters,
     GiftedDialog,
     GiftedPrompts,
-    FeedFilters,
-    QuickNav,
-    EntityIcon,
     InfiniteScroll,
+    OnboardingDialog,
+    QuickNav,
     TopMessage,
     UserNameDialog,
   },
@@ -404,6 +461,12 @@ export default class HomeView extends Vue {
   isFeedFilteredByNearby = false;
   isFeedLoading = true;
   isRegistered = false;
+  lastAckedOfferToUserJwtId?: string; // the last JWT ID for offer-to-user that they've acknowledged seeing
+  lastAckedOfferToUserProjectsJwtId?: string; // the last JWT ID for offers-to-user's-projects that they've acknowledged seeing
+  newOffersToUserHitLimit: boolean = false;
+  newOffersToUserProjectsHitLimit: boolean = false;
+  numNewOffersToUser: number = 0; // number of new offers-to-user
+  numNewOffersToUserProjects: number = 0; // number of new offers-to-user's-projects
   searchBoxes: Array<{
     name: string;
     bbox: BoundingBox;
@@ -433,10 +496,19 @@ export default class HomeView extends Vue {
       this.isFeedFilteredByVisible = !!settings.filterFeedByVisible;
       this.isFeedFilteredByNearby = !!settings.filterFeedByNearby;
       this.isRegistered = !!settings.isRegistered;
+      this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId;
+      this.lastAckedOfferToUserProjectsJwtId =
+        settings.lastAckedOfferToUserProjectsJwtId;
       this.searchBoxes = settings.searchBoxes || [];
       this.showShortcutBvc = !!settings.showShortcutBvc;
 
-      this.isAnyFeedFilterOn = isAnyFeedFilterOn(settings);
+      this.isAnyFeedFilterOn = checkIsAnyFeedFilterOn(settings);
+
+      if (!settings.finishedOnboarding) {
+        (this.$refs.onboardingDialog as OnboardingDialog).open(
+          OnboardPage.Home,
+        );
+      }
 
       // someone may have have registered after sharing contact info, so recheck
       if (!this.isRegistered && this.activeDid) {
@@ -460,6 +532,28 @@ export default class HomeView extends Vue {
       // this returns a Promise but we don't need to wait for it
       this.updateAllFeed();
 
+      if (this.activeDid) {
+        const offersToUserData = await getNewOffersToUser(
+          this.axios,
+          this.apiServer,
+          this.activeDid,
+          this.lastAckedOfferToUserJwtId,
+        );
+        this.numNewOffersToUser = offersToUserData.data.length;
+        this.newOffersToUserHitLimit = offersToUserData.hitLimit;
+      }
+
+      if (this.activeDid) {
+        const offersToUserProjects = await getNewOffersToUserProjects(
+          this.axios,
+          this.apiServer,
+          this.activeDid,
+          this.lastAckedOfferToUserProjectsJwtId,
+        );
+        this.numNewOffersToUserProjects = offersToUserProjects.data.length;
+        this.newOffersToUserProjectsHitLimit = offersToUserProjects.hitLimit;
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       console.error("Error retrieving settings or feed.", err);
@@ -499,7 +593,7 @@ export default class HomeView extends Vue {
     const settings = await retrieveSettingsForActiveAccount();
     this.isFeedFilteredByVisible = !!settings.filterFeedByVisible;
     this.isFeedFilteredByNearby = !!settings.filterFeedByNearby;
-    this.isAnyFeedFilterOn = isAnyFeedFilterOn(settings);
+    this.isAnyFeedFilterOn = checkIsAnyFeedFilterOn(settings);
 
     this.feedData = [];
     this.feedPreviousOldestId = undefined;
@@ -554,8 +648,8 @@ export default class HomeView extends Vue {
 
             // This has indeed proven problematic. See loadMoreGives
             // We should display it immediately and then get the plan later.
-            const plan = await getPlanFromCache(
+            const fulfillsPlan = await getPlanFromCache(
-              record.fulfillsPlanHandleId || "",
+              record.fulfillsPlanHandleId,
               this.axios,
               this.apiServer,
               this.activeDid,
@@ -570,8 +664,13 @@ export default class HomeView extends Vue {
             if (!anyMatch && this.isFeedFilteredByNearby) {
               // check if the associated project has a location inside user's search box
               if (record.fulfillsPlanHandleId) {
-                if (plan?.locLat && plan?.locLon) {
+                if (fulfillsPlan?.locLat && fulfillsPlan?.locLon) {
-                  if (this.latLongInAnySearchBox(plan.locLat, plan.locLon)) {
+                  if (
+                    this.latLongInAnySearchBox(
+                      fulfillsPlan.locLat,
+                      fulfillsPlan.locLon,
+                    )
+                  ) {
                     anyMatch = true;
                   }
                 }
@@ -581,6 +680,17 @@ export default class HomeView extends Vue {
               continue;
             }
 
+            // checking for arrays due to legacy data
+            const provider = Array.isArray(claim.provider)
+              ? claim.provider[0]
+              : claim.provider;
+            const providedByPlan = await getPlanFromCache(
+              provider?.identifier as string,
+              this.axios,
+              this.apiServer,
+              this.activeDid,
+            );
+
             const newRecord: GiveRecordWithContactInfo = {
               ...record,
               giver: didInfoForContact(
@@ -590,7 +700,9 @@ export default class HomeView extends Vue {
                 this.allMyDids,
               ),
               image: claim.image,
-              recipientProjectName: plan?.name as string,
+              providerPlanHandleId: provider?.identifier as string,
+              providerPlanName: providedByPlan?.name as string,
+              recipientProjectName: fulfillsPlan?.name as string,
               receiver: didInfoForContact(
                 recipientDid,
                 this.activeDid,
@@ -684,50 +796,70 @@ export default class HomeView extends Vue {
     }
 
     /**
-     * Only show giver and/or receiver info first if they're named.
+     * Only show giver and/or receiver info first if they're named in your contacts.
      * - If only giver is named, show "... gave"
      * - If only receiver is named, show "... received"
      */
 
     const giverInfo = giveRecord.giver;
     const recipientInfo = giveRecord.receiver;
+
+    // any specific names should be shown first
     if (giverInfo.known && recipientInfo.known) {
       // both giver and recipient are named
       return `${giverInfo.displayName} gave to ${recipientInfo.displayName}: ${gaveAmount}`;
     } else if (giverInfo.known) {
-      // giver is named but recipient is not
+      // giver is known but recipient is not
 
       // show the project name if to one
       if (giveRecord.recipientProjectName) {
-        // retrieve the project name
+        return `${giverInfo.displayName} gave: ${gaveAmount} (to the project "${giveRecord.recipientProjectName}")`;
-        return `${giverInfo.displayName} gave: ${gaveAmount} (to the project ${giveRecord.recipientProjectName})`;
+      } else {
+        // it's not to a project
+        return `${giverInfo.displayName} gave: ${gaveAmount} (to ${recipientInfo.displayName})`;
       }
-
-      // it's not to a project
-      return `${giverInfo.displayName} gave: ${gaveAmount} (to ${recipientInfo.displayName})`;
     } else if (recipientInfo.known) {
-      // recipient is named but giver is not
+      // recipient is known but giver is not
-      return `${recipientInfo.displayName} received: ${gaveAmount} (from ${giverInfo.displayName})`;
+
+      // show the project name if from one
+      if (giveRecord.providerPlanName) {
+        return `${recipientInfo.displayName} received: ${gaveAmount} (from the project "${giveRecord.providerPlanName}")`;
+      } else {
+        // it's not from a project
+        return `${recipientInfo.displayName} received: ${gaveAmount} (from ${giverInfo.displayName})`;
+      }
     } else {
       // neither giver nor recipient are named
 
-      // show the project name if to one
+      // create the part in parens
-      if (giveRecord.recipientProjectName) {
+      let peopleInfo = "";
-        // retrieve the project name
+      if (giveRecord.providerPlanName || giveRecord.recipientProjectName) {
-        return `${gaveAmount} (to the project ${giveRecord.recipientProjectName})`;
+        if (giveRecord.providerPlanName) {
+          peopleInfo = `from the project "${giveRecord.providerPlanName}"`;
+        } else {
+          peopleInfo = `from ${giverInfo.displayName}`;
+        }
+        if (giveRecord.recipientProjectName) {
+          peopleInfo += ` to the project "${giveRecord.recipientProjectName}"`;
+        } else {
+          peopleInfo += ` to ${recipientInfo.displayName}`;
+        }
+      } else {
+        if (giverInfo.displayName === recipientInfo.displayName) {
+          peopleInfo = `between two who are ${giverInfo.displayName}`;
+        } else {
+          peopleInfo = `from ${giverInfo.displayName} to ${recipientInfo.displayName}`;
+        }
       }
 
-      // it's not to a project
-      let peopleInfo;
-      if (giverInfo.displayName === recipientInfo.displayName) {
-        peopleInfo = `between two who are ${giverInfo.displayName}`;
-      } else {
-        peopleInfo = `from ${giverInfo.displayName} to ${recipientInfo.displayName}`;
-      }
       return gaveAmount + " (" + peopleInfo + ")";
     }
   }
 
+  goToActivityToUserPage() {
+    (this.$router as Router).push({ name: "new-activity" });
+  }
+
   onClickLoadClaim(jwtId: string) {
     const route = {
       path: "/claim/" + encodeURIComponent(jwtId),
@@ -766,7 +898,7 @@ export default class HomeView extends Vue {
     (this.$refs.feedFilters as FeedFilters).open(this.reloadFeedOnChange);
   }
 
-  toastUser(message) {
+  toastUser(message: string) {
     this.$notify(
       {
         group: "alert",

src/views/ImportAccountView.vue

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

src/views/InviteOneView.vue

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

src/views/NewActivityView.vue

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

src/views/NewEditProjectView.vue

@@ -105,13 +105,11 @@
       <span class="col-span-1 w-full flex justify-center">{{ zoneName }}</span>
     </div>
 
-    <div class="flex items-center mb-4">
+    <div
-      <input
+      class="flex items-center mb-4"
-        type="checkbox"
+      @click="includeLocation = !includeLocation"
-        class="mr-2"
+    >
-        v-model="includeLocation"
+      <input type="checkbox" class="mr-2" v-model="includeLocation" />
-        @click="includeLocation = !includeLocation"
-      />
       <label for="includeLocation">Include Location</label>
     </div>
     <div v-if="includeLocation" class="mb-4 aspect-video">
@@ -146,27 +144,19 @@
     </div>
 
     <div
-      v-if="showGeneralAdvanced && includeLocation && false"
+      v-if="showGeneralAdvanced && includeLocation"
       class="items-center mb-4"
     >
-      <div class="flex">
+      <div class="flex" @click="sendToTrustroots = !sendToTrustroots">
-        <input
+        <input type="checkbox" class="mr-2" v-model="sendToTrustroots" />
-          type="checkbox"
-          class="mr-2"
-          v-model="sendToTrustroots"
-          @click="sendToTrustroots = !sendToTrustroots"
-        />
         <label>Send to Trustroots</label>
       </div>
-      <div class="flex">
+      <!--
-        <input
+      <div class="flex" @click="sendToTripHopping = !sendToTripHopping">
-          type="checkbox"
+        <input type="checkbox" class="mr-2" v-model="sendToTripHopping" />
-          class="mr-2"
-          v-model="sendToTripHopping"
-          @click="sendToTripHopping = !sendToTripHopping"
-        />
         <label>Send to TripHopping</label>
       </div>
+      -->
     </div>
 
     <div class="mt-8">
@@ -202,10 +192,13 @@
 import "leaflet/dist/leaflet.css";
 import { AxiosError, AxiosRequestHeaders } from "axios";
 import { DateTime } from "luxon";
+import { hexToBytes } from "@noble/hashes/utils";
+import type { EventTemplate, VerifiedEvent } from "nostr-tools/lib/types/core";
 import { accountFromSeedWords } from "nostr-tools/nip06";
+import { finalizeEvent, serializeEvent } from "nostr-tools/pure";
 import { Component, Vue } from "vue-facing-decorator";
 import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
-import { Router } from "vue-router";
+import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 
 import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
@@ -227,7 +220,7 @@ import { getAccount } from "@/libs/util";
 })
 export default class NewEditProjectView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
-  errNote(message) {
+  errNote(message: string) {
     this.$notify(
       { group: "alert", type: "danger", title: "Error", text: message },
       5000,
@@ -271,7 +264,8 @@ export default class NewEditProjectView extends Vue {
     this.apiServer = settings.apiServer || "";
     this.showGeneralAdvanced = !!settings.showGeneralAdvanced;
 
-    this.projectId = (this.$route as Router).query["projectId"] || "";
+    this.projectId =
+      (this.$route as RouteLocationNormalizedLoaded).query["projectId"] || "";
 
     if (this.projectId) {
       if (this.numAccounts === 0) {
@@ -456,18 +450,25 @@ export default class NewEditProjectView extends Vue {
 
         const projectPath = encodeURIComponent(resp.data.success.handleId);
 
+        let signedPayload: VerifiedEvent | undefined; // sign something to prove ownership of pubkey
         if (this.sendToTrustroots) {
+          signedPayload = await this.signPayload();
           this.sendToNostrPartner(
             "NOSTR-EVENT-TRUSTROOTS",
             "Trustroots",
             resp.data.success.claimId,
+            signedPayload,
           );
         }
         if (this.sendToTripHopping) {
+          if (!signedPayload) {
+            signedPayload = await this.signPayload();
+          }
           this.sendToNostrPartner(
             "NOSTR-EVENT-TRIPHOPPING",
             "TripHopping",
             resp.data.success.claimId,
+            signedPayload,
           );
         }
 
@@ -535,10 +536,38 @@ export default class NewEditProjectView extends Vue {
     }
   }
 
+  private async signPayload(): Promise<VerifiedEvent> {
+    const account = await getAccount(this.activeDid);
+    // get the last number of the derivationPath
+    const finalDerNum = account?.derivationPath?.split?.("/")?.reverse()[0];
+    // remove any trailing '
+    const finalDerNumNoApostrophe = finalDerNum?.replace(/'/g, "");
+    const accountNum = Number(finalDerNumNoApostrophe || 0);
+    const pubPri = accountFromSeedWords(
+      account?.mnemonic as string,
+      "",
+      accountNum,
+    );
+    const privateBytes = hexToBytes(pubPri?.privateKey);
+    // No real content is necessary, we just want something signed,
+    // so we might as well use nostr libs for nostr functions.
+    // Besides: someday we may create real content that we can relay.
+    const event: EventTemplate = {
+      kind: 30402,
+      tags: [[]],
+      content: "",
+      created_at: 0,
+    };
+    // Why does IntelliJ not see matching types?
+    const signedEvent = finalizeEvent(event, privateBytes);
+    return signedEvent;
+  }
+
   private async sendToNostrPartner(
     linkCode: string,
     serviceName: string,
     jwtId: string,
+    signedPayload: VerifiedEvent,
   ) {
     // first, get the public key for nostr
     const account = await getAccount(this.activeDid);
@@ -554,14 +583,23 @@ export default class NewEditProjectView extends Vue {
     );
     const nostrPubKey = pubPri?.publicKey;
 
-    const trustrootsUrl = DEFAULT_PARTNER_API_SERVER + "/api/partner/link";
+    let partnerServer = DEFAULT_PARTNER_API_SERVER;
+    const settings = await retrieveSettingsForActiveAccount();
+    if (settings.partnerApiServer) {
+      partnerServer = settings.partnerApiServer;
+    }
+    const trustrootsUrl = partnerServer + "/api/partner/link";
     const timeSafariUrl = window.location.origin + "/claim/" + jwtId;
     const content = this.fullClaim.name + " - see " + timeSafariUrl;
+    // Why does IntelliJ not see matching types?
+    const payload = serializeEvent(signedPayload);
     const trustrootsParams = {
       jwtId: jwtId,
       linkCode: linkCode,
       inputJson: JSON.stringify(content),
-      nostrPubKeyHex: nostrPubKey,
+      pubKeyHex: nostrPubKey,
+      pubKeyImage: payload,
+      pubKeySigHex: signedPayload.sig,
     };
     const fullTrustrootsUrl = trustrootsUrl;
     const headers = await getHeaders(this.activeDid);
@@ -593,7 +631,8 @@ export default class NewEditProjectView extends Vue {
           5000,
         );
       }
-    } catch (error) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
       console.error(`Error sending to ${serviceName}`, error);
       let errorMessage = `There was an error sending to ${serviceName}.`;
       if (error.response?.data?.error?.message) {

src/views/ProjectViewView.vue

@@ -385,7 +385,7 @@
                   <span>
                     {{
                       serverUtil.didInfo(
-                        give.agentDid,
+                        give.recipientDid,
                         activeDid,
                         allMyDids,
                         allContacts,
@@ -566,35 +566,22 @@ export default class ProjectViewView extends Vue {
             group: "alert",
             type: "danger",
             title: "Error",
-            text: "There was a problem getting that project. See logs for more info.",
+            text: "There was a problem getting that project.",
           },
           5000,
         );
       }
     } catch (error: unknown) {
       console.error("Error retrieving project:", error);
-      const serverError = error as AxiosError;
+      this.$notify(
-      if (serverError.response?.status === 404) {
+        {
-        this.$notify(
+          group: "alert",
-          {
+          type: "danger",
-            group: "alert",
+          title: "Error",
-            type: "danger",
+          text: "Something went wrong retrieving that project.",
-            title: "Error",
+        },
-            text: "That project does not exist.",
+        5000,
-          },
+      );
-          5000,
-        );
-      } else {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Something went wrong retrieving that project. See logs for more info.",
-          },
-          5000,
-        );
-      }
     }
 
     this.loadGives();
@@ -1011,7 +998,7 @@ export default class ProjectViewView extends Vue {
       console.error("Got error submitting the confirmation:", result);
       const message =
         (result.error?.error as string) ||
-        "There was a problem submitting the confirmation. See logs for more info.";
+        "There was a problem submitting the confirmation.";
       this.$notify(
         {
           group: "alert",

src/views/ProjectsView.vue

@@ -6,6 +6,8 @@
     <!-- Heading -->
     <h1 id="ViewHeading" class="text-4xl text-center font-light">Your Ideas</h1>
 
+    <OnboardingDialog ref="onboardingDialog" />
+
     <!-- Result Tabs -->
     <div class="text-center text-slate-500 border-b border-slate-300 mt-8">
       <ul class="flex flex-wrap justify-center gap-4 -mb-px">
@@ -61,7 +63,7 @@
     <!-- New Project -->
     <button
       v-if="isRegistered && showProjects"
-      class="fixed right-6 top-24 text-center text-4xl leading-none bg-blue-600 text-white w-14 py-2.5 rounded-full"
+      class="fixed right-6 top-24 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full"
       @click="onClickNewProject()"
     >
       <fa icon="plus" class="fa-fw"></fa>
@@ -207,7 +209,7 @@
           Hit the big
           <fa
             icon="plus"
-            class="bg-blue-600 text-white px-1 py-1 rounded-full"
+            class="bg-green-600 text-white px-1.5 py-1 rounded-full"
           />
           button. You'll never know until you try.
         </div>
@@ -261,10 +263,14 @@ import { Router } from "vue-router";
 import { NotificationIface } from "@/constants/app";
 import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
 import * as libsUtil from "@/libs/util";
+import EntityIcon from "@/components/EntityIcon.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
+import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
 import TopMessage from "@/components/TopMessage.vue";
+import UserNameDialog from "@/components/UserNameDialog.vue";
+import { Contact } from "@/db/tables/contacts";
 import {
   didInfo,
   getHeaders,
@@ -272,15 +278,14 @@ import {
   OfferSummaryRecord,
   PlanData,
 } from "@/libs/endorserServer";
-import EntityIcon from "@/components/EntityIcon.vue";
+import { OnboardPage } from "@/libs/util";
-import { Contact } from "@/db/tables/contacts";
-import UserNameDialog from "@/components/UserNameDialog.vue";
 
 @Component({
   components: {
     EntityIcon,
     InfiniteScroll,
     QuickNav,
+    OnboardingDialog,
     ProjectIcon,
     TopMessage,
     UserNameDialog,
@@ -305,8 +310,8 @@ export default class ProjectsView extends Vue {
   offers: OfferSummaryRecord[] = [];
   projectNameFromHandleId: Record<string, string> = {}; // mapping from handleId to description
   projects: PlanData[] = [];
-  showOffers = true;
+  showOffers = false;
-  showProjects = false;
+  showProjects = true;
 
   libsUtil = libsUtil;
   didInfo = didInfo;
@@ -325,11 +330,17 @@ export default class ProjectsView extends Vue {
       const allAccounts = await accountsDB.accounts.toArray();
       this.allMyDids = allAccounts.map((acc) => acc.did);
 
+      if (!settings.finishedOnboarding) {
+        (this.$refs.onboardingDialog as OnboardingDialog).open(
+          OnboardPage.Create,
+        );
+      }
+
       if (allAccounts.length === 0) {
         console.error("No accounts found.");
         this.errNote("You need an identifier to load your projects.");
       } else {
-        await this.loadOffers();
+        await this.loadProjects();
       }
     } catch (err) {
       console.error("Error initializing:", err);

src/views/QuickActionBvcBeginView.vue

@@ -67,6 +67,7 @@
 <script lang="ts">
 import axios from "axios";
 import { DateTime } from "luxon";
+import { Router } from "vue-router";
 import { Component, Vue } from "vue-facing-decorator";
 
 import QuickNav from "@/components/QuickNav.vue";
@@ -200,6 +201,7 @@ export default class QuickActionBvcBeginView extends Vue {
           },
           3000,
         );
+        (this.$router as Router).push({ path: "/quick-action-bvc" });
       }
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/views/QuickActionBvcEndView.vue

@@ -97,7 +97,7 @@
       <h2 class="text-2xl m-2">Anything else?</h2>
       <div class="m-2 flex">
         <input type="checkbox" v-model="someoneGave" class="h-6 w-6" />
-        <span class="pb-2 pl-2 pr-2">Someone else gave</span>
+        <span class="pb-2 pl-2 pr-2">The group provided</span>
         <span v-if="someoneGave">
           <input
             type="text"
@@ -106,7 +106,8 @@
             class="border border-slate-400 h-6 px-2"
           />
           <br />
-          (Everyone likes personalized messages! 😁)
+          (Everyone likes personalized messages! 😁 ... and for a pic:
+          <input type="checkbox" v-model="supplyGiftDetails" />)
         </span>
         <!-- This is to match input height to avoid shifting when hiding & showing. -->
         <span v-else class="h-6">...</span>
@@ -179,6 +180,7 @@ export default class QuickActionBvcBeginView extends Vue {
   description = "breakfast";
   loadingConfirms = true;
   someoneGave = false;
+  supplyGiftDetails = false;
 
   async created() {
     this.loadingConfirms = true;
@@ -262,7 +264,9 @@ export default class QuickActionBvcBeginView extends Vue {
 
   async record() {
     try {
-      this.$notify({ group: "alert", type: "toast", title: "Sent..." }, 1000);
+      if (this.claimsToConfirmSelected.length > 0) {
+        this.$notify({ group: "alert", type: "toast", title: "Sent..." }, 1000);
+      }
 
       // in parallel, make a confirmation for each selected claim and send them all to the server
       const confirmResults = await Promise.allSettled(
@@ -304,7 +308,7 @@ export default class QuickActionBvcBeginView extends Vue {
 
       // now send the give for the description
       let giveSucceeded = false;
-      if (this.someoneGave) {
+      if (this.someoneGave && !this.supplyGiftDetails) {
         const giveResult = await createAndSubmitGive(
           axios,
           this.apiServer,
@@ -314,6 +318,10 @@ export default class QuickActionBvcBeginView extends Vue {
           this.description,
           undefined,
           undefined,
+          undefined,
+          undefined,
+          false,
+          undefined,
           BVC_MEETUPS_PROJECT_CLAIM_ID,
         );
         giveSucceeded = giveResult.type === "success";
@@ -332,29 +340,60 @@ export default class QuickActionBvcBeginView extends Vue {
           );
         }
       }
-
+      if (this.someoneGave && this.supplyGiftDetails) {
-      if (confirmsSucceeded.length > 0 || giveSucceeded) {
+        // we'll give a success message for the confirmations and go to the gifted details page
-        const confirms =
+        if (confirmsSucceeded.length > 0) {
-          confirmsSucceeded.length === 1 ? "confirmation" : "confirmations";
+          const actions =
-        const actions =
+            confirmsSucceeded.length === 1
-          confirmsSucceeded.length > 0 && giveSucceeded
+              ? `Your confirmation has been recorded.`
-            ? `Your ${confirms} and that give have been recorded.`
+              : `Your confirmations have been recorded.`;
-            : giveSucceeded
+          this.$notify(
-              ? "That give has been recorded."
+            {
-              : "Your " +
+              group: "alert",
-                confirms +
+              type: "success",
-                " " +
+              title: "Success",
-                (confirmsSucceeded.length === 1 ? "has" : "have") +
+              text: actions,
-                " been recorded.";
+            },
-        this.$notify(
+            3000,
-          {
+          );
-            group: "alert",
+        }
-            type: "success",
+        (this.$router as Router).push({
-            title: "Success",
+          name: "gifted-details",
-            text: actions,
+          query: {
+            description: this.description,
+            destinationPathAfter: "/",
+            providerProjectId: BVC_MEETUPS_PROJECT_CLAIM_ID,
+            recipientDid: this.activeDid,
           },
-          3000,
+        });
-        );
+      } else {
+        // just go ahead and print a message for all the activity
+        if (confirmsSucceeded.length > 0 || giveSucceeded) {
+          const confirms =
+            confirmsSucceeded.length === 1 ? "confirmation" : "confirmations";
+          const actions =
+            confirmsSucceeded.length > 0 && giveSucceeded
+              ? `Your ${confirms} and that give have been recorded.`
+              : giveSucceeded
+                ? "That give has been recorded."
+                : "Your " +
+                  confirms +
+                  " " +
+                  (confirmsSucceeded.length === 1 ? "has" : "have") +
+                  " been recorded.";
+          this.$notify(
+            {
+              group: "alert",
+              type: "success",
+              title: "Success",
+              text: actions,
+            },
+            3000,
+          );
+          (this.$router as Router).push({ path: "/" });
+        } else {
+          // errors should have already shown
+        }
       }
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/views/RecentOffersToUserProjectsView.vue

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

src/views/RecentOffersToUserView.vue

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

src/views/SearchAreaView.vue

@@ -26,7 +26,7 @@
       your device to run searches but it is not stored on our servers.
     </div>
 
-    <div>
+    <div class="text-center">
       <button v-if="!searchBox && !isNewMarkerSet" class="m-4 px-4 py-2">
         Click to Choose a Location for Nearby Search
       </button>
@@ -35,6 +35,7 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="storeSearchBox"
       >
+        <fa icon="save" class="fa-fw" />
         Store This Location for Nearby Search
       </button>
       <button
@@ -42,6 +43,7 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="forgetSearchBox"
       >
+        <fa icon="trash-can" class="fa-fw" />
         Delete Stored Location
       </button>
       <button
@@ -49,13 +51,15 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="resetLatLong"
       >
-        Reset Marker
+        <fa icon="rotate" class="fa-fw" />
+        Reset To Original
       </button>
       <button
         v-if="isNewMarkerSet"
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="isNewMarkerSet = false"
       >
+        <fa icon="eraser" class="fa-fw" />
         Erase Marker
       </button>
       <div v-if="isNewMarkerSet">

src/views/ShareMyContactInfoView.vue

@@ -77,6 +77,7 @@ export default class ShareMyContactInfoView extends Vue {
         isRegistered,
         givenName,
         profileImageUrl,
+        true,
       );
       useClipboard()
         .copy(message)

src/views/TestView.vue

@@ -157,7 +157,7 @@
     <div class="mt-8">
       <h2 class="text-xl font-bold mb-4">Image Sharing</h2>
       Populates the "shared-photo" view as if they used "share_target".
-      <input type="file" data-testid="fileInput" @change="uploadFile" />
+      <input type="file" data-testId="fileInput" @change="uploadFile" />
       <router-link
         v-if="showFileNextStep()"
         :to="{
@@ -165,7 +165,7 @@
           query: { fileName },
         }"
         class="block w-full text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2 mt-2"
-        data-testid="fileUploadButton"
+        data-testId="fileUploadButton"
       >
         Go to Shared Page
       </router-link>

sw_scripts/additional-scripts.js

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

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

@@ -1,12 +1,13 @@
 import { test, expect } from '@playwright/test';
-import { deleteContact, generateEthrUser, importUser } from './testUtils';
+import { deleteContact, generateAndRegisterEthrUser, importUser } from './testUtils';
 
-test('Check activity feed', async ({ page }) => {
+test('Check activity feed - check that server is running', async ({ page }) => {
   // Load app homepage
   await page.goto('./');
+  await page.getByTestId('closeOnboardingAndFinish').click();
 
   // Check that initial 10 activities have been loaded
-  await page.locator('ul#listLatestActivity li:nth-child(10)');
+  await expect(page.locator('ul#listLatestActivity li:nth-child(10)')).toBeVisible();
 
   // Scroll down a bit to trigger loading additional activities
   await page.locator('ul#listLatestActivity li:nth-child(50)').scrollIntoViewIfNeeded();
@@ -17,7 +18,7 @@ test('Check discover results', async ({ page }) => {
   await page.goto('./discover');
 
   // Check that initial 10 projects have been loaded
-  await page.locator('ul#listDiscoverResults li.border-b:nth-child(10)');
+  await expect(page.locator('ul#listDiscoverResults li.border-b:nth-child(10)')).toBeVisible();
 
   // Scroll down a bit to trigger loading additional projects
   await page.locator('ul#listDiscoverResults li.border-b:nth-child(20)').scrollIntoViewIfNeeded();
@@ -42,7 +43,7 @@ test('Check ability to share contact', async ({ page }) => {
   await page.goto('./discover');
 
   // Check that initial 10 projects have been loaded
-  await page.locator('ul#listDiscoverResults li.border-b:nth-child(10)');
+  await expect(page.locator('ul#listDiscoverResults li.border-b:nth-child(10)')).toBeVisible();
 
   // Scroll down a bit to trigger loading additional projects
   await page.locator('ul#listDiscoverResults li.border-b:nth-child(20)').scrollIntoViewIfNeeded();
@@ -75,6 +76,7 @@ test('Check ID generation', async ({ page }) => {
 test('Check setting name & sharing info', async ({ page }) => {
   // Load homepage to trigger ID generation (?)
   await page.goto('./');
+  await page.getByTestId('closeOnboardingAndFinish').click();
   // Check 'someone must register you' notice
   await expect(page.getByText('someone must register you.')).toBeVisible();
   await page.getByRole('button', { name: /Show them/}).click();
@@ -112,12 +114,13 @@ test('Confirm test API setting (may fail if you are running your own Time Safari
 
 test('Check User 0 can register a random person', async ({ page }) => {
   await importUser(page, '00');
-  const newDid = await generateEthrUser(page);
+  const newDid = await generateAndRegisterEthrUser(page);
   expect(newDid).toContain('did:ethr:');
 
   await page.goto('./');
+  await page.getByTestId('closeOnboardingAndFinish').click();
   await page.getByRole('heading', { name: 'Unnamed/Unknown' }).click();
-  await page.getByPlaceholder('What was given').fill('Access!');
+  await page.getByPlaceholder('What was given').fill('Gave me access!');
   await page.getByRole('button', { name: 'Sign & Send' }).click();
   await expect(page.getByText('That gift was recorded.')).toBeVisible();
   // now ensure that alert goes away

test-playwright/05-invite.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test';
+import { deleteContact, generateNewEthrUser, generateRandomString, importUser, switchToUser } from './testUtils';
+
+test('Check User 0 can invite someone', async ({ page }) => {
+  const newDid = await generateNewEthrUser(page);
+
+  await importUser(page, '00');
+  await page.goto('./invite-one');
+  await page.locator('button > svg.fa-plus').click();
+  const neighborNum = await generateRandomString(5);
+  await page.getByPlaceholder('Notes', { exact: true }).fill(`Neighbor ${neighborNum}`);
+  // get the expiration date input and set to 14 days from now
+  const expirationDate = new Date(Date.now() + 14 * 24 * 60 * 60 * 1000);
+  await page.locator('input[type="date"]').fill(expirationDate.toISOString().split('T')[0]);
+  await page.locator('button:has-text("Save")').click();
+  await expect(page.locator('div[role="alert"] button:has-text("Yes")')).toBeHidden();
+
+  // check that the invite is in the list
+  const newInviteLine = page.locator(`td:has-text("Neighbor ${neighborNum}")`);
+  await expect(newInviteLine).toBeVisible();
+  // retrieve the link from the title
+  const inviteLink = await newInviteLine.getAttribute('data-testId');
+  expect(inviteLink).not.toBeNull();
+
+  // become the new user and accept the invite
+  await switchToUser(page, newDid);
+  await page.goto(inviteLink as string);
+  await page.getByPlaceholder('Name', { exact: true }).fill(`My pal User #0`);
+  await page.locator('button:has-text("Save")').click();
+  await expect(page.locator('button:has-text("Save")')).toBeHidden();
+  await expect(page.locator(`li:has-text("My pal User #0")`)).toBeVisible();
+});

test-playwright/20-create-project.spec.ts

@@ -48,8 +48,9 @@ test('Create new project, then search for it', async ({ page }) => {
 
   // Create new project
   await page.goto('./projects');
-  await page.getByRole('link', { name: 'Projects', exact: true }).click();
+  // close onboarding, but not with a click to go to the main screen
-  await page.getByRole('button').click();
+  await page.locator('div > svg.fa-xmark').click();
+  await page.locator('button > svg.fa-plus').click();
   await page.getByPlaceholder('Idea Name').fill(finalTitle);
   await page.getByPlaceholder('Description').fill(finalDescription);
   await page.getByPlaceholder('Website').fill(standardWebsite);
@@ -63,7 +64,6 @@ test('Create new project, then search for it', async ({ page }) => {
 
   // Search for newly-created project in /projects
   await page.goto('./projects');
-  await page.getByRole('link', { name: 'Projects', exact: true }).click();
   await expect(page.locator('ul#listProjects li').filter({ hasText: finalTitle })).toBeVisible();
 
   // Search for newly-created project in /discover

test-playwright/25-create-project-x10.spec.ts

@@ -42,8 +42,11 @@ test('Create 10 new projects', async ({ page }) => {
   // Create new projects
   for (let i = 0; i < projectCount; i++) {
     await page.goto('./projects');
-    await page.getByRole('link', { name: 'Projects', exact: true }).click();
+    if (i === 0) {
-    await page.getByRole('button').click();
+      // close onboarding, but not with a click to go to the main screen
+      await page.locator('div > svg.fa-xmark').click();
+    }
+    await page.locator('button > svg.fa-plus').click();
     await page.getByPlaceholder('Idea Name').fill(finalTitles[i]); // Add random suffix
     await page.getByPlaceholder('Description').fill(finalDescriptions[i]);
     await page.getByPlaceholder('Website').fill(standardWebsite);

test-playwright/30-record-gift.spec.ts

@@ -19,6 +19,7 @@ test('Record something given', async ({ page }) => {
 
   // Record something given
   await page.goto('./');
+  await page.getByTestId('closeOnboardingAndFinish').click();
   await page.getByRole('heading', { name: 'Unnamed/Unknown' }).click();
   await page.getByPlaceholder('What was given').fill(finalTitle);
   await page.getByRole('spinbutton').fill(randomNonZeroNumber.toString());

test-playwright/33-record-gift-x10.spec.ts

@@ -30,6 +30,9 @@ test('Record 9 new gifts', async ({ page }) => {
   for (let i = 0; i < giftCount; i++) {
     // Record something given
     await page.goto('./');
+    if (i === 0) {
+      await page.getByTestId('closeOnboardingAndFinish').click();
+    }
     await page.getByRole('heading', { name: 'Unnamed/Unknown' }).click();
     await page.getByPlaceholder('What was given').fill(finalTitles[i]);
     await page.getByRole('spinbutton').fill(finalNumbers[i].toString());

test-playwright/40-add-contact.spec.ts

@@ -31,7 +31,7 @@ test('Add contact, record gift, confirm gift', async ({ page }) => {
   await page.goto('./contacts');
   await page.getByPlaceholder('URL or DID, Name, Public Key').fill('did:ethr:0x0000694B58C2cC69658993A90D3840C560f2F51F, User #000');
   await page.locator('button > svg.fa-plus').click();
-  await expect(page.locator('div[role="alert"]')).toBeVisible();
+  await expect(page.locator('div[role="alert"] span:has-text("Contact Added")')).toBeVisible();
   await page.locator('div[role="alert"] button:has-text("No")').click(); // don't register
   await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
   await expect(page.locator('div[role="alert"] button > svg.fa-xmark')).toBeHidden(); // ensure alert is gone
@@ -49,6 +49,7 @@ test('Add contact, record gift, confirm gift', async ({ page }) => {
 
   // Confirm that home shows contact in "Record Something…"
   await page.goto('./');
+  await page.getByTestId('closeOnboardingAndFinish').click();
   await expect(page.locator('#sectionRecordSomethingGiven ul li').filter({ hasText: contactName }).nth(0)).toBeVisible();
 
   // Record something given by new contact
@@ -78,6 +79,7 @@ test('Add contact, record gift, confirm gift', async ({ page }) => {
 
   // Go to home view and look for gift
   await page.goto('./');
+  await page.getByTestId('closeOnboardingAndFinish').click();
   await page.locator('li').filter({ hasText: finalTitle }).locator('a').click();
 
   // Confirm gift as user 00

test-playwright/50-record-offer.spec.ts

@@ -9,11 +9,12 @@ test('Record an offer', async ({ page }) => {
   const updatedDescription = `Updated ${description}`;
   const randomNonZeroNumber = Math.floor(Math.random() * 998) + 1;
 
-  // Create new ID for default user
+  // Switch to user 0
   await importUser(page);
 
   // Select a project
   await page.goto('./discover');
+  await page.getByTestId('closeOnboardingAndFinish').click();
   await page.locator('ul#listDiscoverResults li:nth-child(1)').click();
 
   // Record an offer
@@ -21,11 +22,13 @@ test('Record an offer', async ({ page }) => {
   await page.getByTestId('offerButton').click();
   await page.getByTestId('inputDescription').fill(description);
   await page.getByTestId('inputOfferAmount').fill(randomNonZeroNumber.toString());
+  expect(page.getByRole('button', { name: 'Sign & Send' }));
   await page.getByRole('button', { name: 'Sign & Send' }).click();
   await expect(page.getByText('That offer was recorded.')).toBeVisible();
 
   // go to the offer and check the values
   await page.goto('./projects');
+  await page.getByRole('link', { name: 'Offers', exact: true }).click();
   await page.locator('li').filter({ hasText: description }).locator('a').first().click();
   await expect(page.getByRole('heading', { name: 'Verifiable Claim Details' })).toBeVisible();
   await expect(page.getByText(description, { exact: true })).toBeVisible();
@@ -34,13 +37,14 @@ test('Record an offer', async ({ page }) => {
   const serverPagePromise = page.waitForEvent('popup');
   await page.getByRole('link', { name: 'View on the Public Server' }).click();
   const serverPage = await serverPagePromise;
-  await serverPage.getByText(description);
+  await expect(serverPage.getByText(description)).toBeVisible();
-  await serverPage.getByText('did:none:HIDDEN');
+  await expect(serverPage.getByText('did:none:HIDDEN')).toBeVisible();
 
   // Now update that offer
 
   // find the edit page and check the old values again
   await page.goto('./projects');
+  await page.getByRole('link', { name: 'Offers', exact: true }).click();
   await page.locator('li').filter({ hasText: description }).locator('a').first().click();
   await page.getByTestId('editClaimButton').click();
   await page.locator('heading', { hasText: 'What is offered' }).isVisible();
@@ -56,12 +60,51 @@ test('Record an offer', async ({ page }) => {
 
   // go to the offer claim again and check the updated values
   await page.goto('./projects');
+  await page.getByRole('link', { name: 'Offers', exact: true }).click();
   await page.locator('li').filter({ hasText: description }).locator('a').first().click();
-  const newItemDesc = await page.getByTestId('description');
+  const newItemDesc = page.getByTestId('description');
   await expect(newItemDesc).toHaveText(updatedDescription);
 
   // go to edit page
   await page.getByTestId('editClaimButton').click();
-  const newAmount = await page.getByTestId('inputOfferAmount');
+  const newAmount = page.getByTestId('inputOfferAmount');
   await expect(newAmount).toHaveValue((randomNonZeroNumber + 1).toString());
+
+  // go to the home page and check that the offer is shown as new
+  await page.goto('./');
+  const offerNumElem = page.getByTestId('newOffersToUserProjectsActivityNumber');
+  await expect(offerNumElem).toHaveText('50+');
+
+  // click on the number of new offers to go to the list page
+  await offerNumElem.click();
+  await expect(page.getByText('New Offers To Your Projects', { exact: true })).toBeVisible();
+  // get the icon child of the showOffersToUserProjects
+  await page.getByTestId('showOffersToUserProjects').locator('div > svg.fa-chevron-right').click();
+  await expect(page.getByText(description)).toBeVisible();
+});
+
+test('Affirm delivery of an offer', async ({ page }) => {
+  // go to the home page and check that the offer is shown as new
+  await importUser(page);
+  await page.goto('./');
+  await page.getByTestId('closeOnboardingAndFinish').click();
+  const offerNumElem = page.getByTestId('newOffersToUserProjectsActivityNumber');
+  await expect(offerNumElem).toBeVisible();
+
+  // click on the number of new offers to go to the list page
+  await offerNumElem.click();
+  // get the link that comes after the showOffersToUserProjects and click it
+  await page.getByTestId('showOffersToUserProjects').locator('a').click();
+  // get the first item of the list and click on the icon with file-lines
+  const firstItem = page.getByTestId('listRecentOffersToUserProjects').locator('li').first();
+  await expect(firstItem).toBeVisible();
+  await firstItem.locator('svg.fa-file-lines').click();
+  await expect(page.getByText('Verifiable Claim Details', { exact: true })).toBeVisible();
+  // click on the 'Affirm Delivery' button
+  await page.getByRole('button', { name: 'Affirm Delivery' }).click();
+  // fill our offer info and submit
+  await page.getByPlaceholder('What was given').fill('Whatever the offer says');
+  await page.getByRole('spinbutton').fill('2');
+  await page.getByRole('button', { name: 'Sign & Send' }).click();
+  await expect(page.getByText('That gift was recorded.')).toBeVisible();
 });

test-playwright/60-new-activity.spec.ts

@@ -0,0 +1,83 @@
+import { test, expect } from '@playwright/test';
+import { importUser, generateNewEthrUser, switchToUser } from './testUtils';
+
+test('New offers for another user', async ({ page }) => {
+  const user01Did = await generateNewEthrUser(page);
+  await page.goto('./');
+  await expect(page.getByTestId('newDirectOffersActivityNumber')).toBeHidden();
+
+  await importUser(page, '00');
+  await page.goto('./contacts');
+  await page.getByPlaceholder('URL or DID, Name, Public Key').fill(user01Did + ', A Friend');
+  await expect(page.locator('button > svg.fa-plus')).toBeVisible();
+  await page.locator('button > svg.fa-plus').click();
+  await expect(page.locator('div[role="alert"] span:has-text("Contact Added")')).toBeVisible();
+  await page.locator('div[role="alert"] button:has-text("No")').click(); // don't register
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
+  await expect(page.locator('div[role="alert"] button > svg.fa-xmark')).toBeHidden(); // ensure alert is gone
+
+  // show buttons to make offers directly to people
+  await page.getByRole('button').filter({ hasText: /See Hours/i }).click();
+
+  // make an offer directly to user 1
+  // Generate a random string of 3 characters, skipping the "0." at the beginning
+  const randomString1 = Math.random().toString(36).substring(2, 5);
+  await page.getByTestId('offerButton').click();
+  await page.getByTestId('inputDescription').fill(`help of ${randomString1} from #000`);
+  await page.getByTestId('inputOfferAmount').fill('1');
+  await page.getByRole('button', { name: 'Sign & Send' }).click();
+  await expect(page.getByText('That offer was recorded.')).toBeVisible();
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
+  await expect(page.locator('div[role="alert"] button > svg.fa-xmark')).toBeHidden(); // ensure alert is gone
+
+  // make another offer to user 1
+  const randomString2 = Math.random().toString(36).substring(2, 5);
+  await page.getByTestId('offerButton').click();
+  await page.getByTestId('inputDescription').fill(`help of ${randomString2} from #000`);
+  await page.getByTestId('inputOfferAmount').fill('3');
+  await page.getByRole('button', { name: 'Sign & Send' }).click();
+  await expect(page.getByText('That offer was recorded.')).toBeVisible();
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
+  await expect(page.locator('div[role="alert"] button > svg.fa-xmark')).toBeHidden(); // ensure alert is gone
+
+  // as user 1, go to the home page and check that two offers are shown as new
+  await switchToUser(page, user01Did);
+  await page.goto('./');
+  await page.getByTestId('closeOnboardingAndFinish').click();
+  let offerNumElem = page.getByTestId('newDirectOffersActivityNumber');
+  await expect(offerNumElem).toHaveText('2');
+
+  // click on the number of new offers to go to the list page
+  await offerNumElem.click();
+
+  await expect(page.getByText('New Offers To You', { exact: true })).toBeVisible();
+  await page.getByTestId('showOffersToUser').locator('div > svg.fa-chevron-right').click();
+  // note that they show in reverse chronologicalorder
+  await expect(page.getByText(`help of ${randomString2} from #000`)).toBeVisible();
+  await expect(page.getByText(`help of ${randomString1} from #000`)).toBeVisible();
+
+  // click on the latest offer to keep it as "unread"
+  await page.hover(`li:has-text("help of ${randomString2} from #000")`);
+  // await page.locator('li').filter({ hasText: `help of ${randomString2} from #000` }).click();
+  // await page.locator('div').filter({ hasText: /keep all above/ }).click();
+  // now find the "Click to keep all above as new offers" after that list item and click it
+  const liElem = page.locator('li').filter({ hasText: `help of ${randomString2} from #000` });
+  await liElem.hover();
+  const keepAboveAsNew = await liElem.locator('div').filter({ hasText: /keep all above/ });
+
+  await keepAboveAsNew.click();
+
+  // now see that only one offer is shown as new
+  await page.goto('./');
+  offerNumElem = page.getByTestId('newDirectOffersActivityNumber');
+  await expect(offerNumElem).toHaveText('1');
+  await offerNumElem.click();
+  await expect(page.getByText('New Offer To You', { exact: true })).toBeVisible();
+  await page.getByTestId('showOffersToUser').locator('div > svg.fa-chevron-right').click();
+
+  // now see that no offers are shown as new
+  await page.goto('./');
+  // wait until the list with ID listLatestActivity has at least one visible item
+  await page.locator('#listLatestActivity li').first().waitFor({ state: 'visible' });
+  await expect(page.getByTestId('newDirectOffersActivityNumber')).toBeHidden();
+});

test-playwright/LICENSE

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

test-playwright/testUtils.ts

@@ -34,10 +34,17 @@ export async function importUser(page: Page, id?: string): Promise<string> {
 
 // This is to switch to someone already in the identity table. It doesn't include registration.
 export async function switchToUser(page: Page, did: string): Promise<void> {
+  // This is the direct approach but users have to tap on things so we'll do that instead.
+  //await page.goto('./identity-switcher');
+
   await page.goto('./account');
   await page.getByRole('heading', { name: 'Advanced' }).click();
   await page.getByRole('link', { name: 'Switch Identifier' }).click();
-  await page.getByRole('code', { name: did }).click();
+  const didElem = await page.locator(`code:has-text("${did}")`);
+  await didElem.isVisible();
+  await didElem.click();
+  // wait for the switch to happen and the account page to fully load
+  await page.getByTestId('didWrapper').locator('code:has-text("did:")');
 }
 
 function createContactName(did: string): string {
@@ -56,17 +63,21 @@ export async function deleteContact(page: Page, did: string): Promise<void> {
   await expect(page.locator('div[role="alert"] button:has-text("Yes")')).toBeHidden();
 }
 
-// Generate a new random user and register them.
+export async function generateNewEthrUser(page: Page): Promise<string> {
-// Note that this makes 000 the active user. Use switchToUser to switch to this DID.
-export async function generateEthrUser(page: Page): Promise<string> {
   await page.goto('./start');
   await page.getByTestId('newSeed').click();
   await expect(page.locator('span:has-text("Created")')).toBeVisible();
 
   await page.goto('./account');
-  // wait until the DID shows on the page in the 'did' element
   const didElem = await page.getByTestId('didWrapper').locator('code:has-text("did:")');
   const newDid = await didElem.innerText();
+  return newDid;
+}
+
+// Generate a new random user and register them.
+// Note that this makes 000 the active user. Use switchToUser to switch to this DID.
+export async function generateAndRegisterEthrUser(page: Page): Promise<string> {
+  const newDid = await generateNewEthrUser(page);
 
   await importUser(page, '000'); // switch to user 000
 
@@ -74,11 +85,11 @@ export async function generateEthrUser(page: Page): Promise<string> {
   const contactName = createContactName(newDid);
   await page.getByPlaceholder('URL or DID, Name, Public Key').fill(`${newDid}, ${contactName}`);
   await page.locator('button > svg.fa-plus').click();
-  await page.locator('li', { hasText: contactName }).click();
   // register them
   await page.locator('div[role="alert"] button:has-text("Yes")').click();
   // wait for it to disappear because the next steps may depend on alerts being gone
   await expect(page.locator('div[role="alert"] button:has-text("Yes")')).toBeHidden();
+  await expect(page.locator('li', { hasText: contactName })).toBeVisible();
 
   return newDid;
 }