put didInfo names in more places and add copy icons for DIDs & IDs

project.task.yaml

@@ -1,7 +1,6 @@
 
 tasks:
 
-- link to the project claim from the project screen
 - supply the projectId to the OfferDialog just like we do with the offerId
 - the confirm button on each give on the ProjectViewView page doesn't have all the context of the ClaimView page, so it can show sometimes inappropriately; consider consolidation
 - choose an agent via a contact chooser (not just copy-paste a DID)

src/libs/endorserServer.ts

@@ -160,6 +160,10 @@ export function isHiddenDid(did: string) {
   return did === HIDDEN_DID;
 }
 
+export function isEmptyOrHiddenDid(did?: string) {
+  return !did || did === HIDDEN_DID; // catching empty string as well
+}
+
 /**
  * @return true for any nested string where func(input) === true
  *

src/libs/util.ts

@@ -8,6 +8,7 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
 import { GenericServerRecord, containsHiddenDid } from "@/libs/endorserServer";
 import * as serverUtil from "@/libs/endorserServer";
+import { useClipboard } from "@vueuse/core";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
@@ -25,6 +26,13 @@ export const giveIsConfirmable = (veriClaim: GenericServerRecord) => {
   return veriClaim.claimType === "GiveAction";
 };
 
+export const doCopyTwoSecRedo = (text: string, fn: () => void) => {
+  fn();
+  useClipboard()
+    .copy(text)
+    .then(() => setTimeout(fn, 2000));
+};
+
 /**
  * @returns true if the user can confirm the claim
  * @param veriClaim is expected to have fields: claim, claimType, and issuer

src/views/AccountViewView.vue

@@ -89,7 +89,7 @@
         >
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
-        <span v-show="showDidCopy">Copied!</span>
+        <span v-show="showDidCopy">Copied</span>
       </div>
     </div>
 
@@ -248,7 +248,7 @@
           >
             <fa icon="copy" class="text-slate-400 fa-fw"></fa>
           </button>
-          <span v-show="showB64Copy">Copied!</span>
+          <span v-show="showB64Copy">Copied</span>
         </div>
 
         <div class="text-slate-500 text-sm font-bold">Public Key (hex)</div>
@@ -264,7 +264,7 @@
           >
             <fa icon="copy" class="text-slate-400 fa-fw"></fa>
           </button>
-          <span v-show="showPubCopy">Copied!</span>
+          <span v-show="showPubCopy">Copied</span>
         </div>
 
         <div class="text-slate-500 text-sm font-bold">Derivation Path</div>
@@ -283,7 +283,7 @@
           >
             <fa icon="copy" class="text-slate-400 fa-fw"></fa>
           </button>
-          <span v-show="showDerCopy">Copied!</span>
+          <span v-show="showDerCopy">Copied</span>
         </div>
       </div>
 

src/views/ClaimView.vue

@@ -26,6 +26,18 @@
           <div class="text-sm">
             <div>
               {{ veriClaim.id }}
+              <button
+                @click="
+                  libsUtil.doCopyTwoSecRedo(
+                    veriClaim.id as string,
+                    () => (showIdCopy = !showIdCopy),
+                  )
+                "
+                class="ml-2 mr-2"
+              >
+                <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+              </button>
+              <span v-show="showIdCopy">Copied ID</span>
             </div>
             <div>
               <fa icon="message" class="fa-fw text-slate-400"></fa>
@@ -34,6 +46,20 @@
             <div>
               <fa icon="user" class="fa-fw text-slate-400"></fa>
               {{ veriClaim.issuer }}
+              <span v-if="!serverUtil.isEmptyOrHiddenDid(veriClaim.issuer)">
+                <button
+                  @click="
+                    libsUtil.doCopyTwoSecRedo(
+                      veriClaim.issuer as string,
+                      () => (showDidCopy = !showDidCopy),
+                    )
+                  "
+                  class="ml-2 mr-2"
+                >
+                  <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+                </button>
+                <span v-show="showDidCopy">Copied DID</span>
+              </span>
             </div>
             <div>
               <fa icon="calendar" class="fa-fw text-slate-400"></fa>
@@ -295,6 +321,8 @@ export default class ClaimView extends Vue {
   fullClaimDump = "";
   fullClaimMessage = "";
   numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
+  showDidCopy = false;
+  showIdCopy = false;
   veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
   veriClaimDump = "";
 

src/views/ProjectViewView.vue

@@ -35,7 +35,23 @@
             <div class="text-sm mb-3">
               <div class="truncate">
                 <fa icon="user" class="fa-fw text-slate-400"></fa>
-                {{ issuer }}
+                {{
+                  serverUtil.didInfo(issuer, activeDid, allMyDids, allContacts)
+                }}
+                <span v-if="!serverUtil.isEmptyOrHiddenDid(issuer)">
+                  <button
+                    @click="
+                      libsUtil.doCopyTwoSecRedo(
+                        issuer,
+                        () => (showDidCopy = !showDidCopy),
+                      )
+                    "
+                    class="ml-2 mr-2"
+                  >
+                    <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+                  </button>
+                  <span v-show="showDidCopy">Copied DID</span>
+                </span>
               </div>
               <div v-if="timeSince">
                 <fa icon="calendar" class="fa-fw text-slate-400"></fa>
@@ -371,6 +387,7 @@ export default class ProjectViewView extends Vue {
   name = "";
   offersToThis: Array<OfferServerRecord> = [];
   projectId = localStorage.getItem("projectId") || ""; // handle ID
+  showDidCopy = false;
   timeSince = "";
   truncatedDesc = "";
   truncateLength = 40;