Merge pull request 'add more contact management, including registration & visibility' (#14) from separate-dbs into master

Reviewed-on: trent_larson/kick-starter-for-time-pwa#14
2023-03-24 01:30:31 -04:00
parent c47d6d8ae4 3177d0f4b3
commit 27a5a3a8dd
8 changed files with 648 additions and 106 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
        "@vueuse/core": "^9.6.0",
        "@zxing/text-encoding": "^0.9.0",
        "axios": "^1.2.2",
+        "buffer": "^6.0.3",
        "class-transformer": "^0.5.1",
        "core-js": "^3.26.1",
        "dexie": "^3.2.2",
@@ -7510,9 +7511,9 @@
      "dev": true
    },
    "node_modules/@types/node": {
-      "version": "18.11.9",
-      "resolved": "https://registry.npmmirror.com/@types/node/-/node-18.11.9.tgz",
-      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg=="
+      "version": "18.15.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.5.tgz",
+      "integrity": "sha512-Ark2WDjjZO7GmvsyFFf81MXuGTA/d6oP38anyxWOL6EREyBKAxKoFHwBhaZxCfLRLpO8JgVXwqOwSwa7jRcjew=="
    },
    "node_modules/@types/normalize-package-data": {
      "version": "2.4.1",
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
    "@vueuse/core": "^9.6.0",
    "@zxing/text-encoding": "^0.9.0",
    "axios": "^1.2.2",
+    "buffer": "^6.0.3",
    "class-transformer": "^0.5.1",
    "core-js": "^3.26.1",
    "dexie": "^3.2.2",
--- a/project.yaml
+++ b/project.yaml
@@ -12,12 +12,15 @@
 - replace user-affecting console.logs with error messages (eg. catches)

 - contacts v1 :
-  - .2 show gives with new setting
+  - test confirmed vs unconfirmed amounts
+  - remove 'copy' until it works
+  - switch to prod server
  - 01 show gives with confirmations
  - .5 Add page to show seed.
  - 01 Provide a way to import the non-sensitive data.
  - 01 Provide way to share your contact info.
-  - .1 remove "scan new contact"
+  - .2 move all "identity" references to temporary account access
+  - get 'copy' to work on account page

 - contacts v+ :
  - .5 make advanced "show/hide amounts" button into a nice UI toggle
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,46 +10,58 @@ import "./assets/styles/tailwind.css";

 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
+  faCalendar,
  faChevronLeft,
-  faHouseChimney,
-  faMagnifyingGlass,
-  faFolderOpen,
-  faHand,
+  faCircleCheck,
+  faCircleQuestion,
  faCircleUser,
  faCopy,
-  faShareNodes,
+  faEllipsisVertical,
+  faEye,
+  faEyeSlash,
+  faFolderOpen,
+  faHand,
+  faHouseChimney,
+  faMagnifyingGlass,
+  faPen,
+  faPersonCircleCheck,
+  faPersonCircleQuestion,
+  faPlus,
  faQrcode,
+  faRotate,
+  faShareNodes,
+  faSpinner,
+  faTrashCan,
  faUser,
  faUsers,
-  faPen,
-  faPlus,
-  faTrashCan,
-  faCalendar,
-  faEllipsisVertical,
-  faSpinner,
-  faCircleCheck,
  faXmark,
 } from "@fortawesome/free-solid-svg-icons";

 library.add(
+  faCalendar,
  faChevronLeft,
-  faHouseChimney,
-  faMagnifyingGlass,
-  faFolderOpen,
-  faHand,
+  faCircleCheck,
+  faCircleQuestion,
  faCircleUser,
  faCopy,
-  faShareNodes,
+  faEllipsisVertical,
+  faEye,
+  faEyeSlash,
+  faFolderOpen,
+  faHand,
+  faHouseChimney,
+  faMagnifyingGlass,
+  faPen,
+  faPersonCircleCheck,
+  faPersonCircleQuestion,
+  faPlus,
  faQrcode,
+  faRotate,
+  faShareNodes,
+  faSpinner,
+  faTrashCan,
  faUser,
  faUsers,
-  faPen,
-  faPlus,
-  faTrashCan,
-  faCalendar,
-  faEllipsisVertical,
-  faSpinner,
-  faCircleCheck,
  faXmark
 );

--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -110,10 +110,20 @@
        </span>
      </div>

-      <div class="text-slate-500 text-sm font-bold">Public Key</div>
+      <div class="text-slate-500 text-sm font-bold">Public Key (base 64)</div>
      <div class="text-sm text-slate-500 mb-1">
-        <span
-          ><code>{{ publicHex }}</code>
+        <span>
+          <code>{{ publicBase64 }}</code>
+          <button @click="copy(publicBase64)">
+            <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
+          </button>
+        </span>
+      </div>
+
+      <div class="text-slate-500 text-sm font-bold">Public Key (hex)</div>
+      <div class="text-sm text-slate-500 mb-1">
+        <span>
+          <code>{{ publicHex }}</code>
          <button @click="copy(publicHex)">
            <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
          </button>
@@ -138,15 +148,6 @@
      Edit Identity
    </router-link>

-    <h3 class="text-sm uppercase font-semibold mb-3">Contact Actions</h3>
-
-    <a
-      href="contact-scan.html"
-      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
-    >
-      Scan New Contact
-    </a>
-
    <h3 class="text-sm uppercase font-semibold mb-3">Data</h3>

    <a
@@ -193,7 +194,7 @@
        href=""
        class="text-center text-md text-white px-1.5 py-2 rounded-md mb-6"
        v-bind:class="showContactGivesClassNames()"
-        @click="toggleShowContactAmounts"
+        @click="toggleShowContactAmounts()"
      >
        {{ showContactGives ? "Showing" : "Hiding" }}
        amounts given with contacts (Click to
@@ -201,6 +202,29 @@
      </button>
    </div>

+    <div class="flex">
+      <button
+        class="text-center text-md text-blue-500 px-1.5 py-2"
+        @click="checkLimits()"
+      >
+        Check Limits
+      </button>
+      <div v-if="!!limits?.nextWeekBeginDateTime" class="px-9">
+        <span class="font-bold">Rate Limits</span>
+        <p>
+          You have done {{ limits.doneClaimsThisWeek }} claims out of
+          {{ limits.maxClaimsPerWeek }} for this week. Your claims counter
+          resets at {{ readableTime(limits.nextWeekBeginDateTime) }}
+        </p>
+        <p>
+          You have done {{ limits.doneRegistrationsThisMonth }} registrations
+          out of {{ limits.maxRegistrationsPerMonth }} for this month. Your
+          registrations counter resets at
+          {{ readableTime(limits.nextMonthBeginDateTime) }}
+        </p>
+      </div>
+    </div>
+
    <div v-bind:class="computedAlertClassNames()">
      <button
        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
@@ -220,23 +244,47 @@ import { Options, Vue } from "vue-class-component";
 import { useClipboard } from "@vueuse/core";
 import { db, accountsDB } from "@/db";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
+import {
+  accessToken,
+  deriveAddress,
+  generateSeed,
+  newIdentifier,
+} from "@/libs/crypto";
+import { AppString } from "@/constants/app";
 //import { testServerRegisterUser } from "../test";

+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const Buffer = require("buffer/").Buffer;
+
+interface RateLimits {
+  doneClaimsThisWeek: string;
+  doneRegistrationsThisMonth: string;
+  maxClaimsPerWeek: string;
+  maxRegistrationsPerMonth: string;
+  nextMonthBeginDateTime: string;
+  nextWeekBeginDateTime: string;
+}
+
@Options({
  components: {},
 })
 export default class AccountViewView extends Vue {
  address = "";
+  derivationPath = "";
  firstName = "";
  lastName = "";
  mnemonic = "";
  publicHex = "";
-  derivationPath = "";
+  publicBase64 = "";
+  limits: RateLimits | null = null;
  showContactGives = false;

  copy = useClipboard().copy;

+  readableTime(timeStr: string) {
+    return timeStr.substring(0, timeStr.indexOf("T"));
+  }
+
  // 'created' hook runs when the Vue instance is first created
  async created() {
    // Uncomment to register this user on the test server.
@@ -281,6 +329,7 @@ export default class AccountViewView extends Vue {
      const identity = JSON.parse(accounts[0].identity);
      this.address = identity.did;
      this.publicHex = identity.keys[0].publicKeyHex;
+      this.publicBase64 = Buffer.from(this.publicHex, "hex").toString("base64");
      this.derivationPath = identity.keys[0].meta.derivationPath;
    } catch (err) {
      this.alertMessage =
@@ -310,13 +359,6 @@ export default class AccountViewView extends Vue {
    }
  }

-  public showContactGivesClassNames() {
-    return {
-      "bg-slate-900": !this.showContactGives,
-      "bg-green-600": this.showContactGives,
-    };
-  }
-
  public async exportDatabase() {
    try {
      const blob = await db.export({ prettyJson: true });
@@ -340,6 +382,46 @@ export default class AccountViewView extends Vue {
    }
  }

+  async checkLimits() {
+    const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
+    const url = endorserApiServer + "/api/report/rateLimits";
+    await accountsDB.open();
+    const accounts = await accountsDB.accounts.toArray();
+    const identity = JSON.parse(accounts[0].identity);
+    const token = await accessToken(identity);
+    const headers = {
+      "Content-Type": "application/json",
+      Authorization: "Bearer " + token,
+    };
+
+    try {
+      const resp = await this.axios.get(url, { headers });
+      if (resp.status === 200) {
+        this.limits = resp.data;
+      } else {
+        this.alertTitle = "Error from Server";
+        console.log("Bad response retrieving limits: ", resp.data);
+        if (resp.data.error?.message) {
+          this.alertMessage = resp.data.error?.message;
+        } else {
+          this.alertMessage = "Bad server response of " + resp.status;
+        }
+        this.isAlertVisible = true;
+      }
+    } catch (err) {
+      this.alertTitle = "Error from Server";
+      this.alertMessage = err as string;
+      this.isAlertVisible = true;
+    }
+  }
+
+  public showContactGivesClassNames() {
+    return {
+      "bg-slate-900": !this.showContactGives,
+      "bg-green-600": this.showContactGives,
+    };
+  }
+
  alertMessage = "";
  alertTitle = "";
  isAlertVisible = false;
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -9,7 +9,7 @@
        ></router-link>
      </li>
      <!-- Search -->
-      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
+      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link
          :to="{ name: 'discover' }"
          class="block text-center py-3 px-1"
@@ -25,7 +25,7 @@
        ></router-link>
      </li>
      <!-- Contacts -->
-      <li class="basis-1/5 rounded-md text-slate-500">
+      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
        <router-link
          :to="{ name: 'contacts' }"
          class="block text-center py-3 px-1"
@@ -46,7 +46,7 @@
  <section id="Content" class="p-6 pb-24">
    <!-- Heading -->
    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      My Contacts
+      Your Contacts
    </h1>

    <!-- New Contact -->
@@ -65,7 +65,7 @@
      </button>
    </div>

-    <div class="flex justify-between" v-if="showGiveTotals">
+    <div class="flex justify-between" v-if="showGiveNumbers">
      <div class="w-full text-right">
        Hours to Add:
        <input
@@ -81,6 +81,22 @@
          placeholder="Description"
          v-model="hourDescriptionInput"
        />
+        <br />
+        <br />
+        <button
+          href=""
+          class="text-center text-md text-white px-1.5 py-2 rounded-md mb-6"
+          v-bind:class="showGiveAmountsClassNames()"
+          @click="toggleShowGiveTotals()"
+        >
+          {{
+            showGiveTotals
+              ? "Totals"
+              : showGiveConfirmed
+              ? "Confirmed"
+              : "Unconfirmed"
+          }}
+        </button>
      </div>
    </div>

@@ -96,23 +112,91 @@
            {{ contact.name || "(no name)" }}
          </h2>
          <div class="text-sm truncate">{{ contact.did }}</div>
-          <div class="text-sm truncate">{{ contact.publicKeyBase64 }}</div>
-          <div v-if="showGiveTotals" class="float-right">
+          <div class="text-sm truncate" v-if="contact.publicKeyBase64">
+            Public Key (base 64): {{ contact.publicKeyBase64 }}
+          </div>
+
+          <button
+            v-if="contact.seesMe"
+            class="tooltip"
+            @click="setVisibility(contact, false)"
+          >
+            <fa icon="eye" class="text-slate-900 fa-fw ml-1" />
+            <span class="tooltiptext">Can see you</span>
+          </button>
+          <button v-else class="tooltip" @click="setVisibility(contact, true)">
+            <span class="tooltiptext">Cannot see you</span>
+            <fa icon="eye-slash" class="text-slate-900 fa-fw ml-1" />
+          </button>
+
+          <button class="tooltip" @click="checkVisibility(contact)">
+            <span class="tooltiptext">Check Visibility</span>
+            <fa icon="rotate" class="text-slate-900 fa-fw ml-1" />
+          </button>
+
+          <button v-if="contact.registered" class="tooltip">
+            <span class="tooltiptext">Registered</span>
+            <fa icon="person-circle-check" class="text-slate-900 fa-fw ml-1" />
+          </button>
+          <button v-else @click="register(contact)" class="tooltip">
+            <span class="tooltiptext">Maybe not registered</span>
+            <fa
+              icon="person-circle-question"
+              class="text-slate-900 fa-fw ml-1"
+            />
+          </button>
+
+          <button @click="deleteContact(contact)" class="px-9 tooltip">
+            <span class="tooltiptext">Delete!</span>
+            <fa icon="trash-can" class="text-red-600 fa-fw ml-1" />
+          </button>
+
+          <div v-if="showGiveNumbers" class="float-right">
            <div class="float-right">
-              to: {{ givenByMeTotals[contact.did] || 0 }}
-              <button
-                class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
-                @click="onClickAddGive(identity.did, contact.did)"
-              >
-                +
-              </button>
-              by: {{ givenToMeTotals[contact.did] || 0 }}
-              <button
-                class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
-                @click="onClickAddGive(contact.did, identity.did)"
-              >
-                +
-              </button>
+              <div class="tooltip">
+                to:
+                {{
+                  /* eslint-disable prettier/prettier */
+                  this.showGiveTotals
+                    ? ((givenByMeConfirmed[contact.did] || 0)
+                       + (givenByMeUnconfirmed[contact.did] || 0))
+                    : this.showGiveConfirmed
+                        ? (givenByMeConfirmed[contact.did] || 0)
+                        : (givenByMeUnconfirmed[contact.did] || 0)
+                  /* eslint-enable prettier/prettier */
+                }}
+                <span class="tooltiptext-left">{{
+                  givenByMeDescriptions[contact.did]
+                }}</span>
+                <button
+                  class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
+                  @click="onClickAddGive(identity.did, contact.did)"
+                >
+                  +
+                </button>
+              </div>
+              <div class="tooltip px-2">
+                by:
+                {{
+                  /* 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 */
+                }}
+                <span class="tooltiptext-left">
+                  {{ givenToMeDescriptions[contact.did] }}
+                </span>
+                <button
+                  class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
+                  @click="onClickAddGive(contact.did, identity.did)"
+                >
+                  +
+                </button>
+              </div>
            </div>
          </div>
        </div>
@@ -135,13 +219,30 @@
 import { AxiosError } from "axios";
 import * as didJwt from "did-jwt";
 import * as R from "ramda";
+import { IIdentifier } from "@veramo/core";
 import { Options, Vue } from "vue-class-component";

 import { AppString } from "@/constants/app";
 import { accessToken, SimpleSigner } from "@/libs/crypto";
-import { IIdentifier } from "@veramo/core";
-import { accountsDB, db } from "../db";
-import { Contact } from "../db/tables/contacts";
+import { accountsDB, db } from "@/db";
+import { Contact } from "@/db/tables/contacts";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const Buffer = require("buffer/").Buffer;
+
+const SERVICE_ID = "endorser.ch";
+
+export interface GiveServerRecord {
+  agentDid: string;
+  amount: number;
+  confirmed: number;
+  description: string;
+  fullClaim: GiveVerifiableCredential;
+  handleId: string;
+  recipientDid: string;
+  unit: string;
+}

 export interface GiveVerifiableCredential {
  "@context": string;
@@ -152,20 +253,38 @@ export interface GiveVerifiableCredential {
  recipient: { identifier: string };
 }

+export interface RegisterVerifiableCredential {
+  "@context": string;
+  "@type": string;
+  agent: { identifier: string };
+  object: string;
+  recipient: { identifier: string };
+}
+
@Options({
  components: {},
 })
 export default class ContactsView extends Vue {
  contacts: Array<Contact> = [];
  contactInput = "";
+  // { "did:...": concatenated-descriptions } entry for each contact
+  givenByMeDescriptions: Record<string, string> = {};
  // { "did:...": amount } entry for each contact
-  givenByMeTotals: Record<string, number> = {};
+  givenByMeConfirmed: Record<string, number> = {};
  // { "did:...": amount } entry for each contact
-  givenToMeTotals: Record<string, number> = {};
+  givenByMeUnconfirmed: Record<string, number> = {};
+  // { "did:...": concatenated-descriptions } entry for each contact
+  givenToMeDescriptions: Record<string, string> = {};
+  // { "did:...": amount } entry for each contact
+  givenToMeConfirmed: Record<string, number> = {};
+  // { "did:...": amount } entry for each contact
+  givenToMeUnconfirmed: Record<string, number> = {};
  hourDescriptionInput = "";
  hourInput = "0";
  identity: IIdentifier | null = null;
-  showGiveTotals = false;
+  showGiveNumbers = false;
+  showGiveTotals = true;
+  showGiveConfirmed = true;

  // 'created' hook runs when the Vue instance is first created
  async created() {
@@ -174,13 +293,16 @@ export default class ContactsView extends Vue {
    this.identity = JSON.parse(accounts[0].identity);

    await db.open();
-    this.contacts = await db.contacts.toArray();
-
-    const params = new URLSearchParams(window.location.search);
-    this.showGiveTotals = params.get("showGiveTotals") == "true";
-    if (this.showGiveTotals) {
+    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    this.showGiveNumbers = !!settings?.showContactGivesInline;
+    if (this.showGiveNumbers) {
      this.loadGives();
    }
+    const allContacts = await db.contacts.toArray();
+    this.contacts = R.sort(
+      (a: Contact, b) => (a.name || "").localeCompare(b.name || ""),
+      allContacts
+    );
  }

  async onClickNewContact(): Promise<void> {
@@ -196,9 +318,18 @@ export default class ContactsView extends Vue {
        publicKeyBase64 = this.contactInput.substring(commaPos2 + 1).trim();
      }
    }
+    // help with potential mistakes while this sharing requires copy-and-paste
+    if (publicKeyBase64 && /^[0-9A-Fa-f]{66}$/i.test(publicKeyBase64)) {
+      // it must be all hex (compressed public key), so convert
+      publicKeyBase64 = Buffer.from(publicKeyBase64, "hex").toString("base64");
+    }
    const newContact = { did, name, publicKeyBase64 };
    await db.contacts.add(newContact);
-    this.contacts = this.contacts.concat([newContact]);
+    const allContacts = this.contacts.concat([newContact]);
+    this.contacts = R.sort(
+      (a: Contact, b) => (a.name || "").localeCompare(b.name || ""),
+      allContacts
+    );
  }

  async loadGives() {
@@ -223,18 +354,30 @@ export default class ContactsView extends Vue {
        Authorization: "Bearer " + token,
      };
      const resp = await this.axios.get(url, { headers });
-      //console.log("Server response", resp.status, resp.data);
+      console.log("All your gifts:", resp.data);
      if (resp.status === 200) {
-        const contactTotals: Record<string, number> = {};
-        for (const give of resp.data.data) {
+        const contactDescriptions: Record<string, string> = {};
+        const contactConfirmed: Record<string, number> = {};
+        const contactUnconfirmed: Record<string, number> = {};
+        const allData: Array<GiveServerRecord> = resp.data.data;
+        for (const give of allData) {
          if (give.unit == "HUR") {
            const recipDid: string = give.recipientDid;
-            const prevAmount = contactTotals[recipDid] || 0;
-            contactTotals[recipDid] = prevAmount + give.amount;
+            if (give.confirmed) {
+              const prevAmount = contactConfirmed[recipDid] || 0;
+              contactConfirmed[recipDid] = prevAmount + give.amount;
+            } else {
+              const prevAmount = contactUnconfirmed[recipDid] || 0;
+              contactUnconfirmed[recipDid] = prevAmount + give.amount;
+            }
+            const prevDesc = contactDescriptions[recipDid] || "";
+            // Since many make the tooltip too big, we'll just use the latest;
+            contactDescriptions[recipDid] = give.description || prevDesc;
          }
        }
-        //console.log("Done retrieving gives", contactTotals);
-        this.givenByMeTotals = contactTotals;
+        //console.log("Done retrieving gives", contactConfirmed);
+        this.givenByMeDescriptions = contactDescriptions;
+        this.givenByMeConfirmed = contactConfirmed;
      }
    } catch (error) {
      this.alertTitle = "Error from Server";
@@ -254,17 +397,29 @@ export default class ContactsView extends Vue {
        Authorization: "Bearer " + token,
      };
      const resp = await this.axios.get(url, { headers });
-      //console.log("Server response", resp.status, resp.data);
+      console.log("All gifts you've recieved:", resp.data);
      if (resp.status === 200) {
-        const contactTotals: Record<string, number> = {};
-        for (const give of resp.data.data) {
+        const contactDescriptions: Record<string, string> = {};
+        const contactConfirmed: Record<string, number> = {};
+        const contactUnconfirmed: Record<string, number> = {};
+        const allData: Array<GiveServerRecord> = resp.data.data;
+        for (const give of allData) {
          if (give.unit == "HUR") {
-            const prevAmount = contactTotals[give.agentDid] || 0;
-            contactTotals[give.agentDid] = prevAmount + give.amount;
+            if (give.confirmed) {
+              const prevAmount = contactConfirmed[give.agentDid] || 0;
+              contactConfirmed[give.agentDid] = prevAmount + give.amount;
+            } else {
+              const prevAmount = contactUnconfirmed[give.agentDid] || 0;
+              contactUnconfirmed[give.agentDid] = prevAmount + give.amount;
+            }
+            const prevDesc = contactDescriptions[give.agentDid] || "";
+            // Since many make the tooltip too big, we'll just use the latest;
+            contactDescriptions[give.agentDid] = give.description || prevDesc;
          }
        }
-        //console.log("Done retrieving receipts", contactTotals);
-        this.givenToMeTotals = contactTotals;
+        //console.log("Done retrieving receipts", contactConfirmed);
+        this.givenToMeDescriptions = contactDescriptions;
+        this.givenToMeConfirmed = contactConfirmed;
      }
    } catch (error) {
      this.alertTitle = "Error from Server";
@@ -273,6 +428,187 @@ export default class ContactsView extends Vue {
    }
  }

+  async deleteContact(contact: Contact) {
+    if (
+      confirm(
+        "Are you sure you want to delete " +
+          this.nameForDid(this.contacts, contact.did) +
+          " with DID " +
+          contact.did +
+          " ?"
+      )
+    ) {
+      await db.open();
+      await db.contacts.delete(contact.did);
+      this.contacts = R.without([contact], this.contacts);
+    }
+  }
+
+  async register(contact: Contact) {
+    if (
+      confirm(
+        "Are you sure you want to use one of your registrations for " +
+          this.nameForDid(this.contacts, contact.did) +
+          "?"
+      )
+    ) {
+      await accountsDB.open();
+      const accounts = await accountsDB.accounts.toArray();
+      const identity = JSON.parse(accounts[0].identity);
+      // Make a claim
+      const vcClaim: RegisterVerifiableCredential = {
+        "@context": "https://schema.org",
+        "@type": "RegisterAction",
+        agent: { identifier: identity.did },
+        object: SERVICE_ID,
+        recipient: { identifier: contact.did },
+      };
+      // Make a payload for the claim
+      const vcPayload = {
+        vc: {
+          "@context": ["https://www.w3.org/2018/credentials/v1"],
+          type: ["VerifiableCredential"],
+          credentialSubject: vcClaim,
+        },
+      };
+      // Create a signature using private key of identity
+      if (identity.keys[0].privateKeyHex !== null) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const privateKeyHex: string = identity.keys[0].privateKeyHex!;
+        const signer = await SimpleSigner(privateKeyHex);
+        const alg = undefined;
+        // Create a JWT for the request
+        const vcJwt: string = await didJwt.createJWT(vcPayload, {
+          alg: alg,
+          issuer: identity.did,
+          signer: signer,
+        });
+
+        // Make the xhr request payload
+        const payload = JSON.stringify({ jwtEncoded: vcJwt });
+        const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
+        const url = endorserApiServer + "/api/v2/claim";
+        const token = await accessToken(identity);
+        const headers = {
+          "Content-Type": "application/json",
+          Authorization: "Bearer " + token,
+        };
+
+        try {
+          const resp = await this.axios.post(url, payload, { headers });
+          //console.log("Got resp data:", resp.data);
+          if (resp.data?.success?.handleId) {
+            contact.registered = true;
+            db.contacts.update(contact.did, { registered: true });
+
+            this.alertTitle = "Registration Success";
+            this.alertMessage = contact.name + " has been registered.";
+            this.isAlertVisible = true;
+          }
+        } catch (error) {
+          let userMessage = "There was an error. See logs for more info.";
+          const serverError = error as AxiosError;
+          if (serverError) {
+            if (serverError.message) {
+              userMessage = serverError.message; // Info for the user
+            } else {
+              userMessage = JSON.stringify(serverError.toJSON());
+            }
+          } else {
+            userMessage = error as string;
+          }
+          // Now set that error for the user to see.
+          this.alertTitle = "Error with Server";
+          this.alertMessage = userMessage;
+          this.isAlertVisible = true;
+        }
+      }
+    }
+  }
+
+  async setVisibility(contact: Contact, visibility: boolean) {
+    const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
+    const url =
+      endorserApiServer +
+      "/api/report/" +
+      (visibility ? "canSeeMe" : "cannotSeeMe");
+    await accountsDB.open();
+    const accounts = await accountsDB.accounts.toArray();
+    const identity = JSON.parse(accounts[0].identity);
+    const token = await accessToken(identity);
+    const headers = {
+      "Content-Type": "application/json",
+      Authorization: "Bearer " + token,
+    };
+    const payload = JSON.stringify({ did: contact.did });
+
+    try {
+      const resp = await this.axios.post(url, payload, { headers });
+      if (resp.status === 200) {
+        contact.seesMe = visibility;
+        db.contacts.update(contact.did, { seesMe: visibility });
+      } else {
+        this.alertTitle = "Error from Server";
+        console.log("Bad response setting visibility: ", resp.data);
+        if (resp.data.error?.message) {
+          this.alertMessage = resp.data.error?.message;
+        } else {
+          this.alertMessage = "Bad server response of " + resp.status;
+        }
+        this.isAlertVisible = true;
+      }
+    } catch (err) {
+      this.alertTitle = "Error from Server";
+      this.alertMessage = err as string;
+      this.isAlertVisible = true;
+    }
+  }
+
+  async checkVisibility(contact: Contact) {
+    const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
+    const url =
+      endorserApiServer +
+      "/api/report/canDidExplicitlySeeMe?did=" +
+      encodeURIComponent(contact.did);
+    await accountsDB.open();
+    const accounts = await accountsDB.accounts.toArray();
+    const identity = JSON.parse(accounts[0].identity);
+    const token = await accessToken(identity);
+    const headers = {
+      "Content-Type": "application/json",
+      Authorization: "Bearer " + token,
+    };
+
+    try {
+      const resp = await this.axios.get(url, { headers });
+      if (resp.status === 200) {
+        const visibility = resp.data;
+        contact.seesMe = visibility;
+        db.contacts.update(contact.did, { seesMe: visibility });
+
+        this.alertTitle = "Refreshed";
+        this.alertMessage =
+          this.nameForContact(contact, true) +
+          " can " +
+          (visibility ? "" : "not ") +
+          "see your activity.";
+        this.isAlertVisible = true;
+      } else {
+        this.alertTitle = "Error from Server";
+        if (resp.data.error?.message) {
+          this.alertMessage = resp.data.error?.message;
+        } else {
+          this.alertMessage = "Bad server response of " + resp.status;
+        }
+        this.isAlertVisible = true;
+      }
+    } catch (err) {
+      this.alertTitle = "Error from Server";
+      this.alertMessage = err as string;
+      this.isAlertVisible = true;
+    }
+  }
+
  // from https://stackoverflow.com/a/175787/845494
  //
  private isNumeric(str: string): boolean {
@@ -281,7 +617,11 @@ export default class ContactsView extends Vue {

  private nameForDid(contacts: Array<Contact>, did: string): string {
    const contact = R.find((con) => con.did == did, contacts);
-    return contact?.name || "this unnamed user";
+    return this.nameForContact(contact);
+  }
+
+  private nameForContact(contact?: Contact, capitalize?: boolean): string {
+    return contact?.name || (capitalize ? "T" : "t") + "this unnamed user";
  }

  async onClickAddGive(fromDid: string, toDid: string): Promise<void> {
@@ -305,12 +645,19 @@ export default class ContactsView extends Vue {
      } else {
        toFrom = "from " + this.nameForDid(this.contacts, fromDid) + " to you";
      }
+      let description;
+      if (this.hourDescriptionInput) {
+        description = " with description '" + this.hourDescriptionInput + "'";
+      } else {
+        description = " with no description";
+      }
      if (
        confirm(
          "Are you sure you want to record " +
            this.hourInput +
            " hours " +
            toFrom +
+            description +
            "?"
        )
      ) {
@@ -382,16 +729,17 @@ export default class ContactsView extends Vue {
          this.alertTitle = "";
          this.alertMessage = "";
          if (fromDid === identity.did) {
-            this.givenByMeTotals[toDid] = this.givenByMeTotals[toDid] + amount;
+            this.givenByMeConfirmed[toDid] =
+              this.givenByMeConfirmed[toDid] + amount;
            // do this to update the UI (is there a better way?)
            // eslint-disable-next-line no-self-assign
-            this.givenByMeTotals = this.givenByMeTotals;
+            this.givenByMeConfirmed = this.givenByMeConfirmed;
          } else {
-            this.givenToMeTotals[fromDid] =
-              this.givenToMeTotals[fromDid] + amount;
+            this.givenToMeConfirmed[fromDid] =
+              this.givenToMeConfirmed[fromDid] + amount;
            // do this to update the UI (is there a better way?)
            // eslint-disable-next-line no-self-assign
-            this.givenToMeTotals = this.givenToMeTotals;
+            this.givenToMeConfirmed = this.givenToMeConfirmed;
          }
        }
      } catch (error) {
@@ -414,6 +762,32 @@ export default class ContactsView extends Vue {
    }
  }

+  public selectedGiveTotal(
+    contactGivesConfirmed: Record<string, number>,
+    contactGivesUnconfirmed: Record<string, number>,
+    did: string
+  ) {
+    /* eslint-disable prettier/prettier */
+    this.showGiveTotals
+      ? ((contactGivesConfirmed[did] || 0) + (contactGivesUnconfirmed[did] || 0))
+      : this.showGiveConfirmed
+        ? (contactGivesConfirmed[did] || 0)
+        : (contactGivesUnconfirmed[did] || 0);
+    /* eslint-enable prettier/prettier */
+  }
+  public toggleShowGiveTotals() {
+    if (this.showGiveTotals) {
+      this.showGiveTotals = false;
+      this.showGiveConfirmed = true;
+    } else if (this.showGiveConfirmed) {
+      this.showGiveTotals = false; // stays the same
+      this.showGiveConfirmed = false;
+    } else {
+      this.showGiveTotals = true;
+      this.showGiveConfirmed = true;
+    }
+  }
+
  alertTitle = "";
  alertMessage = "";
  isAlertVisible = false;
@@ -440,5 +814,62 @@ export default class ContactsView extends Vue {
      "duration-300": true,
    };
  }
+
+  public showGiveAmountsClassNames() {
+    return {
+      "bg-slate-900": this.showGiveTotals,
+      "bg-green-600": !this.showGiveTotals && this.showGiveConfirmed,
+      "bg-yellow-600": !this.showGiveTotals && !this.showGiveConfirmed,
+    };
+  }
 }
 </script>
+
+<style>
+/* Tooltip from https://www.w3schools.com/css/css_tooltip.asp */
+/* Tooltip container */
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 200px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  position: absolute;
+  z-index: 1;
+}
+/* How do we share with the above so code isn't duplicated? */
+.tooltip .tooltiptext-left {
+  visibility: hidden;
+  width: 200px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  position: absolute;
+  z-index: 1;
+
+  bottom: 0%;
+  right: 105%;
+  margin-left: -60px;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+.tooltip:hover .tooltiptext-left {
+  visibility: visible;
+}
+</style>
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -134,6 +134,18 @@
          <li>Make sure you have your backup file (above), then contact us.</li>
        </ul>
      </div>
+
+      <h2 class="text-xl font-semibold">
+        How do I add someone to my contacts?
+      </h2>
+      <p>
+        Tell them to copy their ID, which typically starts with "did:ethr:...",
+        and send it to you. Go to the Contacts
+        <fa icon="circle-user" class="fa-fw" /> page and enter that into the top
+        form. You may add a name by adding a comma followed by their name; you
+        may also add their public key by adding another comma followed by the
+        key.
+      </p>
    </div>
  </section>
 </template>
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -9,7 +9,7 @@
        ></router-link>
      </li>
      <!-- Search -->
-      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
+      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link
          :to="{ name: 'discover' }"
          class="block text-center py-3 px-1"
@@ -17,7 +17,7 @@
        ></router-link>
      </li>
      <!-- Projects -->
-      <li class="basis-1/5 rounded-md text-slate-500">
+      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
        <router-link
          :to="{ name: 'projects' }"
          class="block text-center py-3 px-1"
@@ -45,7 +45,7 @@
  <section id="Content" class="p-6 pb-24">
    <!-- Heading -->
    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      My Plans
+      Your Plans
    </h1>

    <!-- Quick Search -->