From 7a2589247251691f4432a97ed1f0f66fadada3bb Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Thu, 22 Aug 2024 20:21:37 -0600
Subject: [PATCH 1/7] add test for registration of new user

---
 playwright.config-local.ts                    |  2 +-
 src/views/AccountViewView.vue                 |  5 +-
 src/views/NewIdentifierView.vue               | 12 ++---
 src/views/StartView.vue                       |  1 +
 test-playwright/00-noid-tests.spec.ts         | 18 ++++++-
 test-playwright/10-check-usage-limits.spec.ts | 12 ++++-
 test-playwright/40-add-contact.spec.ts        |  7 ++-
 test-playwright/testUtils.ts                  | 50 ++++++++++++++++---
 8 files changed, 87 insertions(+), 20 deletions(-)

diff --git a/playwright.config-local.ts b/playwright.config-local.ts
index 511af5201..c3bd2a5cb 100644
--- a/playwright.config-local.ts
+++ b/playwright.config-local.ts
@@ -74,7 +74,7 @@ export default defineConfig({
 
   /* Configure global timeout; default is 30000 milliseconds */
   // the image upload will often not succeed at 5 seconds
-  timeout: 20000,
+  // timeout: 10000,
 
   /* Run your local dev server before starting the tests */
   /**
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index d5617a33f..ea1a389a8 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -129,7 +129,10 @@
       </div>
 
       <div class="text-slate-500 text-sm font-bold">ID</div>
-      <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
+      <div
+        class="text-sm text-slate-500 flex justify-start items-center mb-1"
+        data-testId="didWrapper"
+      >
         <code class="truncate">{{ activeDid }}</code>
         <button
           @click="
diff --git a/src/views/NewIdentifierView.vue b/src/views/NewIdentifierView.vue
index 4ff77eb9b..0d69d0e5b 100644
--- a/src/views/NewIdentifierView.vue
+++ b/src/views/NewIdentifierView.vue
@@ -22,8 +22,8 @@
     </div>
 
     <div class="flex justify-center py-12">
-      <span />
-      <span v-if="loading">
+      <div />
+      <div v-if="loading">
         <span class="text-xl">Creating...&nbsp;</span>
         <fa
           icon="spinner"
@@ -31,8 +31,8 @@
           color="green"
           size="128"
         ></fa>
-      </span>
-      <span v-else>
+      </div>
+      <div v-else>
         <span class="text-xl">Created!</span>
         <fa
           icon="burst"
@@ -45,8 +45,8 @@
             --fa-beat-scale: 6;
           "
         ></fa>
-      </span>
-      <span />
+      </div>
+      <div />
     </div>
   </section>
 </template>
diff --git a/src/views/StartView.vue b/src/views/StartView.vue
index 5190f5b58..373741a1b 100644
--- a/src/views/StartView.vue
+++ b/src/views/StartView.vue
@@ -58,6 +58,7 @@
           <a
             @click="onClickNewSeed()"
             class="block w-full text-center text-lg uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2 cursor-pointer"
+            data-testId="newSeed"
           >
             Generate one with a new seed
           </a>
diff --git a/test-playwright/00-noid-tests.spec.ts b/test-playwright/00-noid-tests.spec.ts
index 12746ff39..cbb08e7ce 100644
--- a/test-playwright/00-noid-tests.spec.ts
+++ b/test-playwright/00-noid-tests.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { generateEthrUser, importUser } from './testUtils';
 
 test('Confirm usage of test API (may fail if you are running your own Time Safari)', async ({ page }, testInfo) => {
   // Load account view
@@ -78,4 +79,19 @@ test('Check ID generation', async ({ page }) => {
 
   // Check that ID is now generated
   await expect(page.locator('#sectionIdentityDetails code.truncate')).toContainText('did:ethr:');
-});
\ No newline at end of file
+});
+
+test('Check User 0 can register random person', async ({ page }) => {
+  await importUser(page, '00');
+  const newDid = await generateEthrUser(page);
+  expect(newDid).toContain('did:ethr:');
+
+  await page.goto('./');
+  await page.getByRole('heading', { name: 'Unnamed/Unknown' }).click();
+  await page.getByPlaceholder('What was given').fill('Access!');
+  await page.getByRole('button', { name: 'Sign & Send' }).click();
+  await expect(page.getByText('That gift was recorded.')).toBeVisible();
+  // now ensure that alert goes away
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss alert
+  await expect(page.getByText('That gift was recorded.')).toBeHidden();
+});
diff --git a/test-playwright/10-check-usage-limits.spec.ts b/test-playwright/10-check-usage-limits.spec.ts
index 0a4a7e5ae..9bf9c448b 100644
--- a/test-playwright/10-check-usage-limits.spec.ts
+++ b/test-playwright/10-check-usage-limits.spec.ts
@@ -7,12 +7,22 @@ test('Check usage limits', async ({ page }) => {
   await expect(page.locator('div.bg-slate-100.rounded-md').filter({ hasText: 'Usage Limits' })).toBeHidden();
 
   // Import user 01
-  await importUser(page, '01');
+  const did = await importUser(page, '01');
 
   // Verify that "Usage Limits" section is visible
   await expect(page.locator('#sectionUsageLimits')).toBeVisible();
+  await expect(page.locator('#sectionUsageLimits')).toContainText('You have done');
+  await expect(page.locator('#sectionUsageLimits')).toContainText('You have uploaded');
+
   await expect(page.getByText('Your claims counter resets')).toBeVisible();
   await expect(page.getByText('Your registration counter resets')).toBeVisible();
   await expect(page.getByText('Your image counter resets')).toBeVisible();
   await expect(page.getByRole('button', { name: 'Recheck Limits' })).toBeVisible();
+
+  // Set name
+  await page.getByRole('link', { name: 'Set Your Name' }).click();
+  const name = 'User ' + did.slice(11, 14);
+  await page.getByPlaceholder('Name').fill(name);
+  await page.getByRole('button', { name: 'Save Changes' }).click();
+
 });
\ No newline at end of file
diff --git a/test-playwright/40-add-contact.spec.ts b/test-playwright/40-add-contact.spec.ts
index c344c7c6f..1b7d1435a 100644
--- a/test-playwright/40-add-contact.spec.ts
+++ b/test-playwright/40-add-contact.spec.ts
@@ -2,6 +2,7 @@ import { test, expect } from '@playwright/test';
 import { importUser } from './testUtils';
 
 test('Add contact, record gift, confirm gift', async ({ page }) => {
+
   // Generate a random string of 16 characters
   let randomString = Math.random().toString(36).substring(2, 18);
 
@@ -31,8 +32,10 @@ test('Add contact, record gift, confirm gift', async ({ page }) => {
   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 page.locator('div[role="alert"] button:has-text("Yes")').click();
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss alert
+  await expect(page.locator('div[role="alert"] button > svg.fa-xmark')).toBeHidden(); // ensure alert is gone
+
+  await page.locator('div[role="alert"] button:has-text("Cancel")').click();
 
   // Verify added contact
   await expect(page.locator('li.border-b')).toContainText('User #000');
diff --git a/test-playwright/testUtils.ts b/test-playwright/testUtils.ts
index 7d8d52c79..82a1d8ca7 100644
--- a/test-playwright/testUtils.ts
+++ b/test-playwright/testUtils.ts
@@ -1,6 +1,9 @@
 import { expect, Page } from '@playwright/test';
 
-export async function importUser(page: Page, id?: string): Promise<void> {
+// Import the seed and switch to the user based on the ID.
+// '01' -> 111
+// otherwise -> 000
+export async function importUser(page: Page, id?: string): Promise<string> {
   let seedPhrase, userName, did;
 
   // Set seed phrase and DID based on user ID
@@ -21,14 +24,45 @@ export async function importUser(page: Page, id?: string): Promise<void> {
   await page.getByText('You have a seed').click();
   await page.getByPlaceholder('Seed Phrase').fill(seedPhrase);
   await page.getByRole('button', { name: 'Import' }).click();
-  await expect(page.locator('#sectionUsageLimits')).toContainText('You have done');
-  await expect(page.locator('#sectionUsageLimits')).toContainText('You have uploaded');
-
-  // Set name
-  await page.getByRole('link', { name: 'Set Your Name' }).click();
-  await page.getByPlaceholder('Name').fill(userName);
-  await page.getByRole('button', { name: 'Save Changes' }).click();
 
   // Check DID
   await expect(page.getByRole('code')).toContainText(did);
+  // ... and ensure the app retrieves the registration status
+  await expect(page.getByText('Your claims counter resets')).toBeVisible();
+  return did;
+}
+
+// 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> {
+  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();
+}
+
+// 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 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();
+
+  await importUser(page, '000'); // switch to user 000
+
+  await page.goto('./contacts');
+  const threeChars = newDid.slice(11, 14);
+  await page.getByPlaceholder('URL or DID, Name, Public Key').fill(`${newDid}, User ${threeChars}`);
+  await page.locator('button > svg.fa-plus').click();
+  await page.locator('li', { hasText: threeChars }).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();
+
+  return newDid;
 }
\ No newline at end of file

From 22c3d28405bea942d06a838ac4de287c493ef129 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Fri, 23 Aug 2024 15:22:48 -0600
Subject: [PATCH 2/7] move some buttons to take less space at the top of Home

---
 src/views/HomeView.vue | 41 +++++++++++++++++++++--------------------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 7e83081d7..28a7b3159 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -8,10 +8,10 @@
       {{ AppString.APP_NAME }}
     </h1>
 
-    <!-- prompt to install notifications -->
+    <!-- prompt to install notifications, which we're making an advanced feature -->
     <div class="mb-8">
       <div
-        v-if="!notificationsSupported()"
+        v-if="false"
         class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
       >
         <p style="display: inline; align-items: center">
@@ -107,8 +107,16 @@
             <!-- activeDid && isRegistered -->
 
             <!-- show the actions for recognizing a give -->
-            <div class="mb-4">
+            <div class="flex justify-between mb-4">
               <h2 class="text-xl font-bold">Record Something Given By:</h2>
+              <div class="flex justify-end">
+                <button
+                  @click="openGiftedPrompts()"
+                  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"
+                >
+                  Ideas...
+                </button>
+              </div>
             </div>
 
             <ul
@@ -126,7 +134,7 @@
                 </h3>
               </li>
               <li
-                v-for="contact in allContacts.slice(0, 7)"
+                v-for="contact in allContacts.slice(0, 6)"
                 :key="contact.did"
                 @click="openDialog(contact)"
               >
@@ -141,23 +149,16 @@
                   {{ contact.name || contact.did }}
                 </h3>
               </li>
+              <li>
+                <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"
+                >
+                  Choose From All Contacts
+                </router-link>
+              </li>
             </ul>
-
-            <div class="flex justify-between">
-              <router-link
-                v-if="allContacts.length >= 7"
-                :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"
-              >
-                Choose From All Contacts
-              </router-link>
-              <button
-                @click="openGiftedPrompts()"
-                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"
-              >
-                Ideas...
-              </button>
-            </div>
           </div>
         </div>
       </div>

From 767d33c0a0ed633a86888a36923a624d2529ad21 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Fri, 23 Aug 2024 20:06:50 -0600
Subject: [PATCH 3/7] prompt for name when showing info, and provide a "copy"
 page when remote

---
 src/App.vue                          |   7 +-
 src/components/ImageMethodDialog.vue |   2 +-
 src/components/UserNameDialog.vue    |  96 ++++++++++++++++++++++++
 src/constants/app.ts                 |   4 +-
 src/libs/endorserServer.ts           |  52 ++++++++++++-
 src/router/index.ts                  |   5 ++
 src/views/AccountViewView.vue        |   4 +-
 src/views/ContactQRScanShowView.vue  |  18 ++++-
 src/views/ContactsView.vue           |   4 +-
 src/views/DiscoverView.vue           |  10 ++-
 src/views/HomeView.vue               |  62 ++++++++++++----
 src/views/ProjectsView.vue           |   8 +-
 src/views/ShareMyContactInfoView.vue | 106 +++++++++++++++++++++++++++
 13 files changed, 343 insertions(+), 35 deletions(-)
 create mode 100644 src/components/UserNameDialog.vue
 create mode 100644 src/views/ShareMyContactInfoView.vue

diff --git a/src/App.vue b/src/App.vue
index 49d0356c9..e1a43ca66 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -180,8 +180,9 @@
                   "
                   class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
                 >
-                  Yes
-                  {{ notification.yesText ? ", " + notification.yesText : "" }}
+                  Yes{{
+                    notification.yesText ? ", " + notification.yesText : ""
+                  }}
                 </button>
 
                 <button
@@ -193,7 +194,7 @@
                   "
                   class="block w-full text-center text-md font-bold uppercase bg-yellow-600 text-white px-2 py-2 rounded-md mb-2"
                 >
-                  No {{ notification.noText ? ", " + notification.noText : "" }}
+                  No{{ notification.noText ? ", " + notification.noText : "" }}
                 </button>
 
                 <label
diff --git a/src/components/ImageMethodDialog.vue b/src/components/ImageMethodDialog.vue
index 35721d5af..a27e047c1 100644
--- a/src/components/ImageMethodDialog.vue
+++ b/src/components/ImageMethodDialog.vue
@@ -6,7 +6,7 @@
           id="ViewHeading"
           class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-0.5 bg-black/50 text-white leading-none"
         >
-          Camera or Other?
+          Add Photo
         </div>
         <div
           class="text-lg text-center px-2 py-0.5 leading-none absolute right-0 top-0 text-white"
diff --git a/src/components/UserNameDialog.vue b/src/components/UserNameDialog.vue
new file mode 100644
index 000000000..dfb2f74ac
--- /dev/null
+++ b/src/components/UserNameDialog.vue
@@ -0,0 +1,96 @@
+<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
+      you choose to send it to them.
+      <input
+        type="text"
+        placeholder="Name"
+        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+        v-model="givenName"
+      />
+
+      <div class="mt-8">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <button
+            type="button"
+            class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
+            @click="onClickSaveChanges()"
+          >
+            Save
+          </button>
+          <!-- 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";
+import { db } from "@/db/index";
+import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
+
+@Component
+export default class UserNameDialog extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  callback: (string?) => void = () => {};
+  givenName = "";
+  visible = false;
+
+  async open(aCallback?: (name?: string) => void) {
+    this.callback = aCallback || this.callback;
+    await db.open();
+    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+    this.givenName = settings?.firstName || "";
+    this.visible = true;
+  }
+
+  async onClickSaveChanges() {
+    await db.settings.update(MASTER_SETTINGS_KEY, {
+      firstName: this.givenName,
+    });
+    this.visible = false;
+    this.callback(this.givenName);
+  }
+
+  onClickCancel() {
+    this.visible = false;
+  }
+}
+</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>
diff --git a/src/constants/app.ts b/src/constants/app.ts
index f42f922d1..d936d4ffa 100644
--- a/src/constants/app.ts
+++ b/src/constants/app.ts
@@ -49,8 +49,8 @@ export interface NotificationIface {
   title: string;
   text?: string;
   noText?: string;
-  onCancel?: (stopAsking: boolean) => Promise<void>;
-  onNo?: (stopAsking: boolean) => Promise<void>;
+  onCancel?: (stopAsking?: boolean) => Promise<void>;
+  onNo?: (stopAsking?: boolean) => Promise<void>;
   onYes?: () => Promise<void>;
   promptToStopAsking?: boolean;
   yesText?: string;
diff --git a/src/libs/endorserServer.ts b/src/libs/endorserServer.ts
index 608735bb2..0145f596f 100644
--- a/src/libs/endorserServer.ts
+++ b/src/libs/endorserServer.ts
@@ -1,13 +1,16 @@
 import { Axios, AxiosRequestConfig, AxiosResponse } from "axios";
+import { Buffer } from "buffer";
+import { sha256 } from "ethereum-cryptography/sha256";
 import { LRUCache } from "lru-cache";
 import * as R from "ramda";
 
 import { DEFAULT_IMAGE_API_SERVER } from "@/constants/app";
 import { Contact } from "@/db/tables/contacts";
-import { accessToken } from "@/libs/crypto";
+import { accessToken, deriveAddress, nextDerivationPath } from "@/libs/crypto";
 import { NonsensitiveDexie } from "@/db/index";
 import { getAccount, getPasskeyExpirationSeconds } from "@/libs/util";
 import { createEndorserJwtForKey, KeyMeta } from "@/libs/crypto/vc";
+import { Account } from "@/db/tables/accounts";
 
 export const SCHEMA_ORG_CONTEXT = "https://schema.org";
 // the object in RegisterAction claims
@@ -925,6 +928,53 @@ export async function createAndSubmitClaim(
   }
 }
 
+export async function generateEndorserJwtForAccount(
+  account: Account,
+  isRegistered?: boolean,
+  name?: string,
+  profileImageUrl?: string,
+) {
+  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,
+    own: {
+      name: name ?? "",
+      publicEncKey,
+      registered: !!isRegistered,
+    } as UserInfo,
+  };
+  if (profileImageUrl) {
+    contactInfo.own.profileImageUrl = profileImageUrl;
+  }
+
+  if (account?.mnemonic && account?.derivationPath) {
+    const newDerivPath = nextDerivationPath(account.derivationPath as string);
+    const nextPublicHex = deriveAddress(
+      account.mnemonic as string,
+      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(account.did, contactInfo);
+
+  const viewPrefix = CONTACT_URL_PREFIX + ENDORSER_JWT_URL_LOCATION;
+  return viewPrefix + vcJwt;
+}
+
 export async function createEndorserJwtForDid(
   issuerDid: string,
   payload: object,
diff --git a/src/router/index.ts b/src/router/index.ts
index 3ca92cea3..b19aa51b2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -189,6 +189,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "seed-backup",
     component: () => import("../views/SeedBackupView.vue"),
   },
+  {
+    path: "/share-my-contact-info",
+    name: "share-my-contact-info",
+    component: () => import("@/views/ShareMyContactInfoView.vue"),
+  },
   {
     path: "/shared-photo",
     name: "shared-photo",
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index ea1a389a8..28acc3e88 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -5,11 +5,11 @@
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-4">
+    <h1 id="ViewHeading" class="text-4xl text-center font-light">
       Your Identity
     </h1>
 
-    <div class="flex justify-between">
+    <div class="flex justify-between mb-2 mt-4">
       <span />
       <span class="whitespace-nowrap">
         <router-link
diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue
index aff032acb..11abd0cf7 100644
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -1,5 +1,5 @@
 <template>
-  <QuickNav selected="Profile"></QuickNav>
+  <QuickNav selected="Profile" />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Breadcrumb -->
@@ -109,6 +109,7 @@ import {
   CONTACT_URL_PREFIX,
   createEndorserJwtForDid,
   ENDORSER_JWT_URL_LOCATION,
+  generateEndorserJwtForAccount,
   isDid,
   register,
   setVisibilityUtil,
@@ -157,7 +158,7 @@ export default class ContactQRScanShow extends Vue {
         own: {
           name:
             (settings?.firstName || "") +
-            (settings?.lastName ? ` ${settings.lastName}` : ""), // deprecated, pre v 0.1.3
+            (settings?.lastName ? ` ${settings.lastName}` : ""), // lastName is deprecated, pre v 0.1.3
           publicEncKey,
           profileImageUrl: settings?.profileImageUrl,
           registered: settings?.isRegistered,
@@ -182,7 +183,18 @@ export default class ContactQRScanShow extends Vue {
       const vcJwt = await createEndorserJwtForDid(this.activeDid, contactInfo);
 
       const viewPrefix = CONTACT_URL_PREFIX + ENDORSER_JWT_URL_LOCATION;
-      this.qrValue = viewPrefix + vcJwt;
+      viewPrefix + vcJwt;
+
+      const name =
+        (settings?.firstName || "") +
+        (settings?.lastName ? ` ${settings.lastName}` : ""); // lastName is deprecated, pre v 0.1.3
+
+      this.qrValue = await generateEndorserJwtForAccount(
+        account,
+        !!settings?.isRegistered,
+        name,
+        settings?.profileImageUrl as string,
+      );
     }
   }
 
diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index 63c8cd7b9..fab730620 100644
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -4,11 +4,11 @@
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <h1 id="ViewHeading" class="text-4xl text-center font-light">
       Your Contacts
     </h1>
 
-    <div class="flex justify-between py-2">
+    <div class="flex justify-between py-2 mt-8">
       <span />
       <span>
         <a
diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue
index 61b0669c2..13fb0e6c9 100644
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -1,16 +1,20 @@
 <template>
-  <QuickNav selected="Discover"></QuickNav>
+  <QuickNav selected="Discover" />
   <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <h1 id="ViewHeading" class="text-4xl text-center font-light">
       Discover Projects
     </h1>
 
     <!-- Quick Search -->
-    <div id="QuickSearch" class="mb-4 flex" v-on:keyup.enter="searchSelected()">
+    <div
+      id="QuickSearch"
+      class="mt-8 mb-4 flex"
+      v-on:keyup.enter="searchSelected()"
+    >
       <input
         type="text"
         v-model="searchTerms"
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 28a7b3159..422a2946b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -4,12 +4,12 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-2 pb-24 max-w-3xl mx-auto">
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-8">
+    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
       {{ AppString.APP_NAME }}
     </h1>
 
-    <!-- prompt to install notifications, which we're making an advanced feature -->
-    <div class="mb-8">
+    <!-- prompt to install notifications with notificationsSupported, which we're making an advanced feature -->
+    <div class="mb-8 mt-8">
       <div
         v-if="false"
         class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
@@ -86,13 +86,14 @@
           >
             <!-- activeDid && !isRegistered -->
             To share, someone must register you.
-            <router-link
-              :to="{ name: 'contact-qr' }"
+            <div
+              @click="showNameDialog()"
               class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
             >
               Show Them {{ PASSKEYS_ENABLED ? "Default" : "Your" }} Identifier
               Info
-            </router-link>
+            </div>
+            <UserNameDialog ref="userNameDialog" />
             <div v-if="PASSKEYS_ENABLED" class="flex justify-end w-full">
               <router-link
                 :to="{ name: 'start' }"
@@ -107,7 +108,7 @@
             <!-- activeDid && isRegistered -->
 
             <!-- show the actions for recognizing a give -->
-            <div class="flex justify-between mb-4">
+            <div class="flex justify-between">
               <h2 class="text-xl font-bold">Record Something Given By:</h2>
               <div class="flex justify-end">
                 <button
@@ -120,7 +121,7 @@
             </div>
 
             <ul
-              class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5"
+              class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mt-4"
             >
               <li @click="openDialog()">
                 <img
@@ -169,7 +170,7 @@
     <FeedFilters ref="feedFilters" />
 
     <!-- Results List -->
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
+    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mt-4 mb-4">
       <div class="flex items-center mb-4">
         <h2 class="text-xl font-bold">Latest Activity</h2>
         <button @click="openFeedFilters()" class="block text-center ml-auto">
@@ -313,6 +314,7 @@ import FeedFilters from "@/components/FeedFilters.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
+import UserNameDialog from "@/components/UserNameDialog.vue";
 import {
   AppString,
   NotificationIface,
@@ -370,6 +372,7 @@ interface GiveRecordWithContactInfo extends GiveSummaryRecord {
     EntityIcon,
     InfiniteScroll,
     TopMessage,
+    UserNameDialog,
   },
 })
 export default class HomeView extends Vue {
@@ -426,6 +429,7 @@ export default class HomeView extends Vue {
       this.showShortcutBvc = !!settings?.showShortcutBvc;
 
       this.isAnyFeedFilterOn = isAnyFeedFilterOn(settings);
+      console.log("getting through mounted");
 
       // someone may have have registered after sharing contact info, so recheck
       if (!this.isRegistered && this.activeDid) {
@@ -449,7 +453,7 @@ export default class HomeView extends Vue {
       }
 
       // this returns a Promise but we don't need to wait for it
-      await this.updateAllFeed();
+      this.updateAllFeed();
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
@@ -495,7 +499,7 @@ export default class HomeView extends Vue {
 
     this.feedData = [];
     this.feedPreviousOldestId = undefined;
-    this.updateAllFeed();
+    await this.updateAllFeed();
   }
 
   /**
@@ -507,7 +511,7 @@ export default class HomeView extends Vue {
     // and the InfiniteScroll component triggers a load before finished.
     // One alternative is to totally separate the project link loading.
     if (payload && !this.isFeedLoading) {
-      this.updateAllFeed();
+      await this.updateAllFeed();
     }
   }
 
@@ -527,6 +531,7 @@ export default class HomeView extends Vue {
   async updateAllFeed() {
     this.isFeedLoading = true;
     let endOfResults = true;
+    console.log("about to retrieveGives");
     await this.retrieveGives(this.apiServer, this.feedPreviousOldestId)
       .then(async (results) => {
         if (results.data.length > 0) {
@@ -620,7 +625,7 @@ export default class HomeView extends Vue {
       });
     if (this.feedData.length === 0 && !endOfResults) {
       // repeat until there's at least some data
-      this.updateAllFeed();
+      await this.updateAllFeed();
     }
     this.isFeedLoading = false;
   }
@@ -770,5 +775,36 @@ export default class HomeView extends Vue {
   computeKnownPersonIconStyleClassNames(known: boolean) {
     return known ? "text-slate-500" : "text-slate-100";
   }
+
+  showNameDialog() {
+    if (!this.givenName) {
+      (this.$refs.userNameDialog as UserNameDialog).open(() => {
+        this.promptForShareMethod();
+      });
+    } else {
+      this.promptForShareMethod();
+    }
+  }
+
+  promptForShareMethod() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Are you nearby with cameras?",
+        text: "If so, we'll use those with QR codes to share.",
+        onCancel: async () => {},
+        onNo: async () => {
+          (this.$router as Router).push({ name: "share-my-contact-info" });
+        },
+        onYes: async () => {
+          (this.$router as Router).push({ name: "contact-qr" });
+        },
+        noText: "we will share another way",
+        yesText: "we are nearby with cameras",
+      },
+      -1,
+    );
+  }
 }
 </script>
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index d9394775c..4c3dea13c 100644
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -1,15 +1,13 @@
 <template>
-  <QuickNav selected="Projects"></QuickNav>
+  <QuickNav selected="Projects" />
   <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Your Ideas
-    </h1>
+    <h1 id="ViewHeading" class="text-4xl text-center font-light">Your Ideas</h1>
 
     <!-- Result Tabs -->
-    <div class="text-center text-slate-500 border-b border-slate-300">
+    <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">
         <li>
           <a
diff --git a/src/views/ShareMyContactInfoView.vue b/src/views/ShareMyContactInfoView.vue
new file mode 100644
index 000000000..552d2ca65
--- /dev/null
+++ b/src/views/ShareMyContactInfoView.vue
@@ -0,0 +1,106 @@
+<template>
+  <QuickNav />
+  <TopMessage />
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-2 pb-24 max-w-3xl mx-auto">
+    <!-- Breadcrumb -->
+    <div>
+      <!-- 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" />
+        </h1>
+      </div>
+
+      <!-- Heading -->
+      <h1 id="ViewHeading" class="text-4xl text-center font-light">
+        Share Your Contact Info
+      </h1>
+    </div>
+
+    <div class="flex justify-center mt-8">
+      <button
+        class="block w-fit text-center text-lg font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
+        @click="onClickShare()"
+      >
+        Copy to Clipboard
+      </button>
+    </div>
+    <div class="mt-8">Click to copy your info, then send it to them.</div>
+    <div>
+      They will paste it in the input box on the Contacts
+      <fa icon="users" /> screen.
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import * as R from "ramda";
+import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
+import { useClipboard } from "@vueuse/core";
+
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+import { NotificationIface } from "@/constants/app";
+import { accountsDB, db } from "@/db/index";
+import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
+import { generateEndorserJwtForAccount } from "@/libs/endorserServer";
+
+@Component({
+  components: { QuickNav, TopMessage },
+})
+export default class ShareMyContactInfoView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  async onClickShare() {
+    await db.open();
+    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+    const activeDid = settings?.activeDid || "";
+    const givenName = settings?.firstName || "";
+    const isRegistered = !!settings?.isRegistered;
+    const profileImageUrl = settings?.profileImageUrl || "";
+
+    await accountsDB.open();
+    const accounts = await accountsDB.accounts.toArray();
+    const account = R.find((acc) => acc.did === activeDid, accounts);
+
+    if (account) {
+      const message = await generateEndorserJwtForAccount(
+        account,
+        isRegistered,
+        givenName,
+        profileImageUrl,
+      );
+      useClipboard()
+        .copy(message)
+        .then(() => {
+          this.$notify(
+            {
+              group: "alert",
+              type: "info",
+              title: "Copied",
+              text: "Those contacts were copied to the clipboard. Have them paste it in the box on their 'Contacts' screen.",
+            },
+            5000,
+          );
+        });
+      (this.$router as Router).push({ name: "contacts" });
+    } else {
+      this.$notify(
+        {
+          group: "alert",
+          type: "error",
+          title: "Error",
+          text: "No account was found for the active DID.",
+        },
+        5000,
+      );
+    }
+  }
+}
+</script>

From e24cd06e3d7dd79a9dd71742236802b4a018e424 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sat, 24 Aug 2024 06:36:49 -0600
Subject: [PATCH 4/7] make the user-name pop-up the preferred way to set the
 name

---
 src/views/AccountViewView.vue        | 22 ++++++++++++++++------
 src/views/ContactQRScanShowView.vue  | 13 +++++++++----
 src/views/ShareMyContactInfoView.vue |  2 +-
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 28acc3e88..bc847e9f5 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -55,14 +55,17 @@
       </div>
       <span
         v-else
-        class="block w-full text-center text-md bg-amber-200 text-blue-500 uppercase border border-dashed border-slate-400 px-1.5 py-2 rounded-md mb-2"
+        class="block w-full text-center text-md bg-amber-200 border border-dashed border-slate-400 px-1.5 py-2 rounded-md mb-2"
       >
-        <router-link
-          :to="{ name: 'new-edit-account' }"
-          class="inline-block 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-4 py-2 rounded-md"
+        <span
+          @click="
+            () => $refs.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"
         >
           Set Your Name
-        </router-link>
+        </span>
+        <UserNameDialog ref="userNameDialog" />
       </span>
       <div class="flex justify-center mt-4">
         <span v-if="profileImageUrl" class="flex justify-between">
@@ -720,6 +723,7 @@ import EntityIcon from "@/components/EntityIcon.vue";
 import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
+import UserNameDialog from "@/components/UserNameDialog.vue";
 import {
   AppString,
   DEFAULT_IMAGE_API_SERVER,
@@ -750,7 +754,13 @@ import { getAccount } from "@/libs/util";
 const inputImportFileNameRef = ref<Blob>();
 
 @Component({
-  components: { EntityIcon, ImageMethodDialog, QuickNav, TopMessage },
+  components: {
+    EntityIcon,
+    ImageMethodDialog,
+    QuickNav,
+    TopMessage,
+    UserNameDialog,
+  },
 })
 export default class AccountViewView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue
index 11abd0cf7..189dc2374 100644
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -25,13 +25,16 @@
         <span class="text-red">Beware!</span>
         You aren't sharing your name, so quickly
         <br />
-        <router-link
-          :to="{ name: 'new-edit-account' }"
+        <span
+          @click="
+            () => $refs.userNameDialog.open((name) => (this.givenName = name))
+          "
           class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md"
         >
           click here to set it for them.
-        </router-link>
+        </span>
       </p>
+      <UserNameDialog ref="userNameDialog" />
     </div>
 
     <div
@@ -50,7 +53,7 @@
         class="flex justify-center"
       />
       <span>
-        Click this or QR code to copy your contact URL to your clipboard.
+        Click the QR code to copy your contact info to your clipboard.
       </span>
     </div>
     <div v-else-if="activeDid" class="text-center">
@@ -96,6 +99,7 @@ import { QrcodeStream } from "vue-qrcode-reader";
 import { useClipboard } from "@vueuse/core";
 
 import QuickNav from "@/components/QuickNav.vue";
+import UserNameDialog from "@/components/UserNameDialog.vue";
 import { NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
@@ -121,6 +125,7 @@ import { ETHR_DID_PREFIX } from "@/libs/crypto/vc";
     QrcodeStream,
     QRCodeVue3,
     QuickNav,
+    UserNameDialog,
   },
 })
 export default class ContactQRScanShow extends Vue {
diff --git a/src/views/ShareMyContactInfoView.vue b/src/views/ShareMyContactInfoView.vue
index 552d2ca65..defbc1254 100644
--- a/src/views/ShareMyContactInfoView.vue
+++ b/src/views/ShareMyContactInfoView.vue
@@ -84,7 +84,7 @@ export default class ShareMyContactInfoView extends Vue {
               group: "alert",
               type: "info",
               title: "Copied",
-              text: "Those contacts were copied to the clipboard. Have them paste it in the box on their 'Contacts' screen.",
+              text: "Your contact info was copied to the clipboard. Have them paste it in the box on their 'Contacts' screen.",
             },
             5000,
           );

From 5d47eab6d8794a0ed962164f9235c054498c82d0 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sat, 24 Aug 2024 07:23:49 -0600
Subject: [PATCH 5/7] add test for new name-entry & copy-to-clipboard flow

---
 playwright.config-local.ts                    |  2 +-
 src/views/AccountViewView.vue                 |  4 +-
 src/views/HomeView.vue                        | 14 ++--
 test-playwright/00-noid-tests.spec.ts         | 68 ++++++++++++-------
 test-playwright/10-check-usage-limits.spec.ts |  4 +-
 5 files changed, 56 insertions(+), 36 deletions(-)

diff --git a/playwright.config-local.ts b/playwright.config-local.ts
index c3bd2a5cb..323c64118 100644
--- a/playwright.config-local.ts
+++ b/playwright.config-local.ts
@@ -74,7 +74,7 @@ export default defineConfig({
 
   /* Configure global timeout; default is 30000 milliseconds */
   // the image upload will often not succeed at 5 seconds
-  // timeout: 10000,
+  // timeout: 5000,
 
   /* Run your local dev server before starting the tests */
   /**
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index bc847e9f5..8020dafaf 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -57,14 +57,14 @@
         v-else
         class="block w-full text-center text-md bg-amber-200 border border-dashed border-slate-400 px-1.5 py-2 rounded-md mb-2"
       >
-        <span
+        <button
           @click="
             () => $refs.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"
         >
           Set Your Name
-        </span>
+        </button>
         <UserNameDialog ref="userNameDialog" />
       </span>
       <div class="flex justify-center mt-4">
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 422a2946b..04a4d7fbc 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -86,12 +86,14 @@
           >
             <!-- activeDid && !isRegistered -->
             To share, someone must register you.
-            <div
-              @click="showNameDialog()"
-              class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
-            >
-              Show Them {{ PASSKEYS_ENABLED ? "Default" : "Your" }} Identifier
-              Info
+            <div class="block text-center">
+              <button
+                @click="showNameDialog()"
+                class="text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
+              >
+                Show them {{ PASSKEYS_ENABLED ? "default" : "your" }} identifier
+                info
+              </button>
             </div>
             <UserNameDialog ref="userNameDialog" />
             <div v-if="PASSKEYS_ENABLED" class="flex justify-end w-full">
diff --git a/test-playwright/00-noid-tests.spec.ts b/test-playwright/00-noid-tests.spec.ts
index cbb08e7ce..977525e74 100644
--- a/test-playwright/00-noid-tests.spec.ts
+++ b/test-playwright/00-noid-tests.spec.ts
@@ -1,22 +1,6 @@
 import { test, expect } from '@playwright/test';
 import { generateEthrUser, importUser } from './testUtils';
 
-test('Confirm usage of test API (may fail if you are running your own Time Safari)', async ({ page }, testInfo) => {
-  // Load account view
-  await page.goto('./account');
-  await page.getByRole('heading', { name: 'Advanced' }).click();
-
-  // look into the config file: if it starts Time Safari, it might say which server it should set by default
-  const webServer = testInfo.config.webServer;
-  const endorserWords = webServer?.command.split(' ');
-  const ENDORSER_ENV_NAME = 'VITE_DEFAULT_ENDORSER_API_SERVER';
-  const endorserTerm = endorserWords?.find(word => word.startsWith(ENDORSER_ENV_NAME + '='));
-  const endorserTermInConfig = endorserTerm?.substring(ENDORSER_ENV_NAME.length + 1);
-
-  const endorserServer = endorserTermInConfig || 'https://test-api.endorser.ch';
-  await expect(page.getByRole('textbox').nth(1)).toHaveValue(endorserServer);
-});
-
 test('Check activity feed', async ({ page }) => {
   // Load app homepage
   await page.goto('./');
@@ -39,14 +23,6 @@ test('Check discover results', async ({ page }) => {
   await page.locator('ul#listDiscoverResults li.border-b:nth-child(20)').scrollIntoViewIfNeeded();
 });
 
-test('Check no-ID messaging in homepage', async ({ page }) => {
-  // Load app homepage
-  await page.goto('./');
-
-  // Check 'someone must register you' notice
-  await expect(page.getByText('To share, someone must register you.')).toBeVisible();
-});
-
 test('Check no-ID messaging in account', async ({ page }) => {
   // Load account view
   await page.goto('./account');
@@ -74,6 +50,9 @@ test('Check ID generation', async ({ page }) => {
   // Wait for activity feed to start loading, as a delay
   await expect(page.locator('ul#listLatestActivity li:nth-child(10)')).toBeVisible();
 
+  // Check 'someone must register you' notice
+  await expect(page.getByText('To share, someone must register you.')).toBeVisible();
+
   // Go back to Account view
   await page.goto('./account');
 
@@ -81,7 +60,46 @@ test('Check ID generation', async ({ page }) => {
   await expect(page.locator('#sectionIdentityDetails code.truncate')).toContainText('did:ethr:');
 });
 
-test('Check User 0 can register random person', async ({ page }) => {
+
+test('Check setting name & sharing info', async ({ page }) => {
+  // Load homepage to trigger ID generation (?)
+  await page.goto('./');
+  // Check 'someone must register you' notice
+  await expect(page.getByText('someone must register you.')).toBeVisible();
+  await page.getByRole('button', { name: /Show them/}).click();
+  // fill in a name
+  await expect(page.getByText('Set Your Name')).toBeVisible();
+  await page.getByRole('textbox').fill('Me Test User');
+  await page.locator('button:has-text("Save")').click();
+  await expect(page.getByText('share another way')).toBeVisible();
+  await page.getByRole('button', { name: /share another way/ }).click();
+  await expect(page.getByRole('button', { name: 'copy to clipboard' })).toBeVisible();
+  await page.getByRole('button', { name: 'copy to clipboard' }).click();
+  await expect(page.getByText('contact info was copied')).toBeVisible();
+  // dismiss alert and wait for it to go away
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click();
+  await expect(page.getByText('contact info was copied')).toBeHidden();
+  // check that they're on the Contacts screen
+  await expect(page.getByText('your contacts')).toBeVisible();
+});
+
+test('Confirm usage of test API (may fail if you are running your own Time Safari)', async ({ page }, testInfo) => {
+  // Load account view
+  await page.goto('./account');
+  await page.getByRole('heading', { name: 'Advanced' }).click();
+
+  // look into the config file: if it starts Time Safari, it might say which server it should set by default
+  const webServer = testInfo.config.webServer;
+  const endorserWords = webServer?.command.split(' ');
+  const ENDORSER_ENV_NAME = 'VITE_DEFAULT_ENDORSER_API_SERVER';
+  const endorserTerm = endorserWords?.find(word => word.startsWith(ENDORSER_ENV_NAME + '='));
+  const endorserTermInConfig = endorserTerm?.substring(ENDORSER_ENV_NAME.length + 1);
+
+  const endorserServer = endorserTermInConfig || 'https://test-api.endorser.ch';
+  await expect(page.getByRole('textbox').nth(1)).toHaveValue(endorserServer);
+});
+
+test('Check User 0 can register a random person', async ({ page }) => {
   await importUser(page, '00');
   const newDid = await generateEthrUser(page);
   expect(newDid).toContain('did:ethr:');
diff --git a/test-playwright/10-check-usage-limits.spec.ts b/test-playwright/10-check-usage-limits.spec.ts
index 9bf9c448b..7669af740 100644
--- a/test-playwright/10-check-usage-limits.spec.ts
+++ b/test-playwright/10-check-usage-limits.spec.ts
@@ -20,9 +20,9 @@ test('Check usage limits', async ({ page }) => {
   await expect(page.getByRole('button', { name: 'Recheck Limits' })).toBeVisible();
 
   // Set name
-  await page.getByRole('link', { name: 'Set Your Name' }).click();
+  await page.getByRole('button', { name: 'Set Your Name' }).click();
   const name = 'User ' + did.slice(11, 14);
   await page.getByPlaceholder('Name').fill(name);
-  await page.getByRole('button', { name: 'Save Changes' }).click();
+  await page.getByRole('button', { name: 'Save' }).click();
 
 });
\ No newline at end of file

From e9c5bd8e99d0cae0f18e7c327df08bd08d4edaf6 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sat, 24 Aug 2024 07:56:23 -0600
Subject: [PATCH 6/7] after copying personal data, add a message to copy
 contacts for them

---
 src/views/ContactsView.vue             |  6 +++---
 src/views/ShareMyContactInfoView.vue   | 25 +++++++++++++++++++++----
 test-playwright/40-add-contact.spec.ts | 13 ++++++-------
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index fab730620..8837c6f78 100644
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -1128,8 +1128,8 @@ export default class ContactsView extends Vue {
       this.contactsSelected.includes(c.did),
     );
     const message =
-      "To add contacts, paste this into the box on the 'People' screen.\n\n" +
-      JSON.stringify(selectedContacts, null, 2);
+      "To add contacts, paste this into the box on the 'Contacts' screen.\n\n" +
+      JSON.stringify(selectedContacts);
     useClipboard()
       .copy(message)
       .then(() => {
@@ -1138,7 +1138,7 @@ export default class ContactsView extends Vue {
             group: "alert",
             type: "info",
             title: "Copied",
-            text: "Those contacts were copied to the clipboard. Have them paste it in the box on their 'People' screen.",
+            text: "Those contacts were copied to the clipboard. Have them paste it in the box on their 'Contacts' screen.",
           },
           5000,
         );
diff --git a/src/views/ShareMyContactInfoView.vue b/src/views/ShareMyContactInfoView.vue
index defbc1254..72b2788c9 100644
--- a/src/views/ShareMyContactInfoView.vue
+++ b/src/views/ShareMyContactInfoView.vue
@@ -30,10 +30,12 @@
         Copy to Clipboard
       </button>
     </div>
-    <div class="mt-8">Click to copy your info, then send it to them.</div>
-    <div>
-      They will paste it in the input box on the Contacts
-      <fa icon="users" /> screen.
+    <div class="ml-12">
+      <div class="mt-8">Click to copy your info, then send it to them.</div>
+      <div>
+        They will paste it in the input box on the Contacts
+        <fa icon="users" /> screen.
+      </div>
     </div>
   </section>
 </template>
@@ -69,6 +71,8 @@ export default class ShareMyContactInfoView extends Vue {
     const accounts = await accountsDB.accounts.toArray();
     const account = R.find((acc) => acc.did === activeDid, accounts);
 
+    const numContacts = await db.contacts.count();
+
     if (account) {
       const message = await generateEndorserJwtForAccount(
         account,
@@ -88,6 +92,19 @@ export default class ShareMyContactInfoView extends Vue {
             },
             5000,
           );
+          if (numContacts > 0) {
+            setTimeout(() => {
+              this.$notify(
+                {
+                  group: "alert",
+                  type: "success",
+                  title: "Share Other Contacts",
+                  text: "You may want to share some of your contacts with them. Select them below to copy and send.",
+                },
+                10000,
+              );
+            }, 3000);
+          }
         });
       (this.$router as Router).push({ name: "contacts" });
     } else {
diff --git a/test-playwright/40-add-contact.spec.ts b/test-playwright/40-add-contact.spec.ts
index 1b7d1435a..270be342e 100644
--- a/test-playwright/40-add-contact.spec.ts
+++ b/test-playwright/40-add-contact.spec.ts
@@ -32,11 +32,10 @@ test('Add contact, record gift, confirm gift', async ({ page }) => {
   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 page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss alert
+  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
 
-  await page.locator('div[role="alert"] button:has-text("Cancel")').click();
-
   // Verify added contact
   await expect(page.locator('li.border-b')).toContainText('User #000');
 
@@ -97,8 +96,8 @@ test('Add contact, copy details, delete, and import various ways', async ({ page
   await page.getByPlaceholder('URL or DID, Name, Public Key').fill('did:ethr:0x111d15564f824D56C7a07b913aA7aDd03382aA39, User #111');
   await page.locator('button > svg.fa-plus').click();
   await expect(page.locator('div[role="alert"]')).toBeVisible();
-  await page.locator('div[role="alert"] button:has-text("No")').click();
-  await page.locator('div[role="alert"] button > svg.fa-xmark').click();
+  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
   // wait for the alert to disappear
   await expect(page.locator('div[role="alert"]')).toBeHidden();
 
@@ -106,8 +105,8 @@ test('Add contact, copy details, delete, and import various ways', async ({ page
   await page.getByPlaceholder('URL or DID, Name, Public Key').fill('did:ethr:0x222BB77E6Ff3774d34c751f3c1260866357B677b, User #222, asdf1234');
   await page.locator('button > svg.fa-plus').click();
   await expect(page.locator('div[role="alert"]')).toBeVisible();
-  await page.locator('div[role="alert"] button:has-text("No")').click();
-  await page.locator('div[role="alert"] button > svg.fa-xmark').click();
+  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"]')).toBeHidden();
 
   await expect(page.getByTestId('contactListItem')).toHaveCount(2);

From a7b89f4bb6da928d56daeffaae7741fa74cc80bf Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sat, 24 Aug 2024 08:36:14 -0600
Subject: [PATCH 7/7] bump to version 0.3.21

---
 CHANGELOG.md      | 5 +++--
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c13a4aa38..005928662 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,9 +6,10 @@ 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.21] - 2024.08.24
 ### Added
-- Send list of contacts to someone
+- Send list of contacts to someone.
+- Prompt for name in pop-up, and send to different contact-sharing screens.
 ### Changed
 - Moved contact actions from list onto detail page
 
diff --git a/package-lock.json b/package-lock.json
index 6a3f483a5..c769b57c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "TimeSafari",
-  "version": "0.3.21-beta",
+  "version": "0.3.21",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "TimeSafari",
-      "version": "0.3.21-beta",
+      "version": "0.3.21",
       "dependencies": {
         "@dicebear/collection": "^5.4.1",
         "@dicebear/core": "^5.4.1",
diff --git a/package.json b/package.json
index b3531cf1c..07b011b30 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "TimeSafari",
-  "version": "0.3.21-beta",
+  "version": "0.3.21",
   "scripts": {
     "dev": "vite",
     "serve": "vite preview",