refactor: migrate interfaces to dedicated directory

Reorganizes TypeScript interfaces into a modular structure:
- Create dedicated interfaces directory with specialized files
- Split interfaces by domain (claims, common, limits, records, user)
- Update imports in endorserServer.ts to use new interface locations
- Replace 'any' types with 'unknown' for better type safety
- Add proper type imports and exports

This improves code organization and maintainability by:
- Centralizing interface definitions
- Reducing file size of endorserServer.ts
- Making interface relationships more explicit
- Improving type safety with stricter types

src/App.vue

@@ -40,7 +40,7 @@
             <div
               class="flex items-center justify-center w-12 bg-slate-600 text-slate-100"
             >
-              <fa icon="circle-info" class="fa-fw fa-xl"></fa>
+              <font-awesome icon="circle-info" class="fa-fw fa-xl"></font-awesome>
             </div>
 
             <div class="relative w-full pl-4 pr-8 py-2 text-slate-900">
@@ -51,7 +51,7 @@
                 @click="close(notification.id)"
                 class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-slate-200 text-slate-600"
               >
-                <fa icon="xmark" class="fa-fw"></fa>
+                <font-awesome icon="xmark" class="fa-fw"></font-awesome>
               </button>
             </div>
           </div>
@@ -63,7 +63,7 @@
             <div
               class="flex items-center justify-center w-12 bg-emerald-600 text-emerald-100"
             >
-              <fa icon="circle-info" class="fa-fw fa-xl"></fa>
+              <font-awesome icon="circle-info" class="fa-fw fa-xl"></font-awesome>
             </div>
 
             <div class="relative w-full pl-4 pr-8 py-2 text-emerald-900">
@@ -74,7 +74,7 @@
                 @click="close(notification.id)"
                 class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-emerald-200 text-emerald-600"
               >
-                <fa icon="xmark" class="fa-fw"></fa>
+                <font-awesome icon="xmark" class="fa-fw"></font-awesome>
               </button>
             </div>
           </div>
@@ -86,7 +86,7 @@
             <div
               class="flex items-center justify-center w-12 bg-amber-600 text-amber-100"
             >
-              <fa icon="triangle-exclamation" class="fa-fw fa-xl"></fa>
+              <font-awesome icon="triangle-exclamation" class="fa-fw fa-xl"></font-awesome>
             </div>
 
             <div class="relative w-full pl-4 pr-8 py-2 text-amber-900">
@@ -97,7 +97,7 @@
                 @click="close(notification.id)"
                 class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-amber-200 text-amber-600"
               >
-                <fa icon="xmark" class="fa-fw"></fa>
+                <font-awesome icon="xmark" class="fa-fw"></font-awesome>
               </button>
             </div>
           </div>
@@ -109,7 +109,7 @@
             <div
               class="flex items-center justify-center w-12 bg-rose-600 text-rose-100"
             >
-              <fa icon="triangle-exclamation" class="fa-fw fa-xl"></fa>
+              <font-awesome icon="triangle-exclamation" class="fa-fw fa-xl"></font-awesome>
             </div>
 
             <div class="relative w-full pl-4 pr-8 py-2 text-rose-900">
@@ -120,7 +120,7 @@
                 @click="close(notification.id)"
                 class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-rose-200 text-rose-600"
               >
-                <fa icon="xmark" class="fa-fw"></fa>
+                <font-awesome icon="xmark" class="fa-fw"></font-awesome>
               </button>
             </div>
           </div>

src/components/GiftedDialog.vue

@@ -21,7 +21,7 @@
           class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
           @click="amountInput === '0' ? null : decrement()"
         >
-          <fa icon="chevron-left" />
+          <font-awesome icon="chevron-left" />
         </div>
         <input
           id="inputGivenAmount"
@@ -33,7 +33,7 @@
           class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
           @click="increment()"
         >
-          <fa icon="chevron-right" />
+          <font-awesome icon="chevron-right" />
         </div>
       </div>
       <div class="mt-4 flex justify-center">
@@ -62,7 +62,7 @@
       </div>
       <p class="text-center mb-2 mt-6 italic">
         Sign & Send to publish to the world
-        <fa
+        <font-awesome
           icon="circle-info"
           class="pl-2 text-blue-500 cursor-pointer"
           @click="explainData()"

src/components/GiftedPrompts.vue

@@ -7,7 +7,7 @@
           class="text-lg text-center p-2 leading-none absolute right-0 -top-1"
           @click="cancel"
         >
-          <fa icon="xmark" class="w-[1em]"></fa>
+          <font-awesome icon="xmark" class="w-[1em]"></font-awesome>
         </div>
       </h1>
       <span class="mt-2 flex justify-between">
@@ -16,7 +16,7 @@
           class="rounded-l border border-slate-400 bg-slate-200 px-4 py-2 flex"
           @click="prevIdea()"
         >
-          <fa icon="chevron-left" class="m-auto" />
+          <font-awesome icon="chevron-left" class="m-auto" />
         </span>
 
         <div class="m-2">
@@ -45,7 +45,7 @@
                     class="text-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mt-4"
                     @click="nextIdeaPastContacts()"
                   >
-                    Skip Contacts <fa icon="forward" />
+                    Skip Contacts <font-awesome icon="forward" />
                   </button>
                 </span>
               </span>
@@ -57,7 +57,7 @@
           class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2 flex"
           @click="nextIdea()"
         >
-          <fa icon="chevron-right" class="m-auto" />
+          <font-awesome icon="chevron-right" class="m-auto" />
         </span>
       </span>
       <button

src/components/HiddenDidDialog.vue

@@ -8,7 +8,7 @@
       <div class="flex justify-between items-center mb-4">
         <h2 class="text-xl font-bold capitalize">{{ roleName }} Details</h2>
         <button @click="close" class="text-gray-500 hover:text-gray-700">
-          <fa icon="times" />
+          <font-awesome icon="times" />
         </button>
       </div>
 
@@ -53,7 +53,7 @@
                         target="_blank"
                         class="text-blue-500"
                       >
-                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                        <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
                       </a>
                     </span>
                   </span>

src/components/ImageMethodDialog.vue

@@ -12,14 +12,14 @@
           class="text-lg text-center px-2 py-0.5 leading-none absolute right-0 top-0 text-white"
           @click="close()"
         >
-          <fa icon="xmark" class="w-[1em]"></fa>
+          <font-awesome icon="xmark" class="w-[1em]"></font-awesome>
         </div>
       </div>
 
       <div>
         <div class="text-center mt-8">
           <div>
-            <fa
+            <font-awesome
               icon="camera"
               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-2 py-2 rounded-md"
               @click="openPhotoDialog()"
@@ -34,14 +34,14 @@
               <input type="text" v-model="imageUrl" class="border-2" />
             </span>
             <span class="ml-2">
-              <fa
+              <font-awesome
                 v-if="imageUrl"
                 icon="check"
                 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-2 py-2 rounded-md cursor-pointer"
                 @click="acceptUrl"
               />
               <!-- so that there's no shifting when it becomes visible -->
-              <fa v-else icon="check" class="text-white bg-white px-2 py-2" />
+              <font-awesome v-else icon="check" class="text-white bg-white px-2 py-2" />
             </span>
           </div>
         </div>

src/components/ImageViewer.vue

@@ -8,7 +8,7 @@
             class="text-white text-2xl p-2 rounded-full hover:bg-white/10"
             @click="close"
           >
-            <fa icon="xmark" />
+            <font-awesome icon="xmark" />
           </button>
 
           <!-- Mobile share button -->
@@ -17,7 +17,7 @@
             class="text-white text-xl p-2 rounded-full hover:bg-white/10"
             @click="handleShare"
           >
-            <fa icon="ellipsis" />
+            <font-awesome icon="ellipsis" />
           </button>
         </div>
 

src/components/MembersList.vue

@@ -5,7 +5,7 @@
       v-if="isLoading"
       class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
     >
-      <fa icon="spinner" class="fa-spin-pulse" />
+      <font-awesome icon="spinner" class="fa-spin-pulse" />
     </div>
 
     <!-- Members List -->
@@ -33,13 +33,13 @@
             <span
               class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
             >
-              <fa icon="plus" class="text-sm" />
+              <font-awesome icon="plus" class="text-sm" />
             </span>
             /
             <span
               class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
             >
-              <fa icon="minus" class="text-sm" />
+              <font-awesome icon="minus" class="text-sm" />
             </span>
             to add/remove them to/from the meeting.
           </span>
@@ -54,7 +54,7 @@
           <span
             class="mx-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600"
           >
-            <fa icon="circle-user" class="text-xl" />
+            <font-awesome icon="circle-user" class="text-xl" />
           </span>
           to add them to your contacts.
         </span>
@@ -67,7 +67,7 @@
           class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
           title="Refresh members list"
         >
-          <fa icon="rotate" :class="{ 'fa-spin': isLoading }" />
+          <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
         </button>
       </div>
       <div
@@ -87,7 +87,7 @@
                 class="ml-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 transition-colors"
                 title="Add as contact"
               >
-                <fa icon="circle-user" class="text-xl" />
+                <font-awesome icon="circle-user" class="text-xl" />
               </button>
             </div>
             <button
@@ -100,7 +100,7 @@
               class="ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors"
               title="Contact info"
             >
-              <fa icon="circle-info" class="text-base" />
+              <font-awesome icon="circle-info" class="text-base" />
             </button>
           </div>
           <div class="flex">
@@ -117,7 +117,7 @@
                   member.member.admitted ? 'Remove member' : 'Admit member'
                 "
               >
-                <fa
+                <font-awesome
                   :icon="member.member.admitted ? 'minus' : 'plus'"
                   class="text-sm"
                 />
@@ -127,7 +127,7 @@
                 class="mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors"
                 title="Admission info"
               >
-                <fa icon="circle-info" class="text-base" />
+                <font-awesome icon="circle-info" class="text-base" />
               </button>
             </span>
           </div>
@@ -142,7 +142,7 @@
           class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
           title="Refresh members list"
         >
-          <fa icon="rotate" :class="{ 'fa-spin': isLoading }" />
+          <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
         </button>
       </div>
 

src/components/OfferDialog.vue

@@ -21,7 +21,7 @@
           @click="decrement()"
           v-if="amountInput !== '0'"
         >
-          <fa icon="chevron-left" />
+          <font-awesome icon="chevron-left" />
         </div>
         <input
           data-testId="inputOfferAmount"
@@ -33,7 +33,7 @@
           class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
           @click="increment()"
         >
-          <fa icon="chevron-right" />
+          <font-awesome icon="chevron-right" />
         </div>
       </div>
       <div class="mt-4 flex justify-center">

src/components/OnboardingDialog.vue

@@ -10,7 +10,7 @@
           class="text-lg text-center leading-none absolute right-0 -top-1"
           @click="onClickClose(true)"
         >
-          <fa icon="xmark" class="w-[1em]" />
+          <font-awesome icon="xmark" class="w-[1em]" />
         </div>
       </h1>
 
@@ -21,7 +21,7 @@
         </span>
         click on the
         <span class="bg-green-600 text-white rounded-full">
-          <fa icon="plus" class="fa-fw" />
+          <font-awesome icon="plus" class="fa-fw" />
         </span>
         button to express your appreciation for... whatever -- maybe thanks for
         showing you all these fascinating stories of
@@ -40,7 +40,7 @@
 
       <p class="mt-4 flex items-center">
         The
-        <fa
+        <font-awesome
           icon="house-chimney"
           class="ml-1 mr-1 text-lg text-white bg-slate-400 px-2 py-2 rounded"
         />
@@ -84,7 +84,7 @@
           class="text-lg text-center leading-none absolute right-0 -top-1"
           @click="onClickClose(true)"
         >
-          <fa icon="xmark" class="w-[1em]" />
+          <font-awesome icon="xmark" class="w-[1em]" />
         </div>
       </h1>
 
@@ -106,7 +106,7 @@
 
       <p class="mt-4 flex items-center">
         The
-        <fa
+        <font-awesome
           icon="magnifying-glass"
           class="ml-1 mr-1 text-lg text-white bg-slate-400 px-2 py-2 rounded"
         />
@@ -141,14 +141,14 @@
           class="text-lg text-center leading-none absolute right-0 -top-1"
           @click="onClickClose(true)"
         >
-          <fa icon="xmark" class="w-[1em]" />
+          <font-awesome icon="xmark" class="w-[1em]" />
         </div>
       </h1>
 
       <p class="relative">
         Now you can take a turn: click on the
         <span class="bg-green-600 text-white rounded-full">
-          <fa icon="plus" class="fa-fw" />
+          <font-awesome icon="plus" class="fa-fw" />
         </span>
         button to throw out projects of your own... anything you'd like to see
         happen. If your first idea doesn't catch anyone, try, try again... and
@@ -157,7 +157,7 @@
 
       <p class="mt-4 flex items-center">
         The
-        <fa
+        <font-awesome
           icon="hand"
           class="ml-1 mr-1 text-lg text-white bg-slate-400 px-2 py-2 rounded"
         />
@@ -168,7 +168,7 @@
         By the way, one good way to get to know your neighbors and their
         interests is to offer time directly to them. You can do this on the
         contacts screen
-        <fa icon="users" class="text-slate-500" />
+        <font-awesome icon="users" class="text-slate-500" />
         which is a great way to get to know a neighbor's interests.
       </p>
 

src/components/PhotoDialog.vue

@@ -15,12 +15,12 @@
           class="text-lg text-center px-2 py-0.5 leading-none absolute right-0 top-0 text-white"
           @click="close()"
         >
-          <fa icon="xmark" class="w-[1em]"></fa>
+          <font-awesome icon="xmark" class="w-[1em]"></font-awesome>
         </div>
       </div>
 
       <div v-if="uploading" class="flex justify-center">
-        <fa
+        <font-awesome
           icon="spinner"
           class="fa-spin fa-3x text-center block px-12 py-12"
         />
@@ -93,7 +93,7 @@
               @click="takeImage()"
               class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
             >
-              <fa icon="camera" class="w-[1em]"></fa>
+              <font-awesome icon="camera" class="w-[1em]"></font-awesome>
             </button>
           </div>
           <div
@@ -103,7 +103,7 @@
               @click="swapMirrorClass()"
               class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
             >
-              <fa icon="left-right" class="w-[1em]"></fa>
+              <font-awesome icon="left-right" class="w-[1em]"></font-awesome>
             </button>
           </div>
           <div v-if="numDevices > 1" class="absolute bottom-2 right-4">
@@ -111,7 +111,7 @@
               @click="switchCamera()"
               class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
             >
-              <fa icon="rotate" class="w-[1em]"></fa>
+              <font-awesome icon="rotate" class="w-[1em]"></font-awesome>
             </button>
           </div>
         </camera>

src/components/PushNotificationPermission.vue

@@ -25,7 +25,7 @@
           </p>
           <p v-else class="text-lg mb-4">
             Waiting for system initialization, which may take up to 5 seconds...
-            <fa icon="spinner" spin />
+            <font-awesome icon="spinner" spin />
           </p>
 
           <div v-if="serviceWorkerReady && vapidKey">
@@ -69,8 +69,8 @@
                   class="rounded-r border border-slate-400 bg-slate-200 text-center text-blue-500 mt-2 px-2 py-2 w-20"
                   @click="hourAm = !hourAm"
                 >
-                  <span v-if="hourAm"> AM <fa icon="chevron-down" /> </span>
-                  <span v-else> PM <fa icon="chevron-up" /> </span>
+                  <span v-if="hourAm"> AM <font-awesome icon="chevron-down" /> </span>
+                  <span v-else> PM <font-awesome icon="chevron-up" /> </span>
                 </span>
               </span>
             </div>

src/components/QuickNav.vue

@@ -13,7 +13,7 @@
       >
         <router-link :to="{ name: 'home' }" class="block text-center py-2 px-1">
           <div class="flex flex-col items-center">
-            <fa icon="house-chimney" class="fa-fw" />
+            <font-awesome icon="house-chimney" class="fa-fw" />
             <span class="text-xs mt-1">feed</span>
           </div>
         </router-link>
@@ -32,7 +32,7 @@
           class="block text-center py-2 px-1"
         >
           <div class="flex flex-col items-center">
-            <fa icon="magnifying-glass" class="fa-fw" />
+            <font-awesome icon="magnifying-glass" class="fa-fw" />
             <span class="text-xs mt-1">search</span>
           </div>
         </router-link>
@@ -51,7 +51,7 @@
           class="block text-center py-2 px-1"
         >
           <div class="flex flex-col items-center">
-            <fa icon="hand" class="fa-fw" />
+            <font-awesome icon="hand" class="fa-fw" />
             <span class="text-xs mt-1">your work</span>
           </div>
         </router-link>
@@ -70,7 +70,7 @@
           class="block text-center py-2 px-1"
         >
           <div class="flex flex-col items-center">
-            <fa icon="users" class="fa-fw" />
+            <font-awesome icon="users" class="fa-fw" />
             <span class="text-xs mt-1">contacts</span>
           </div>
         </router-link>
@@ -89,7 +89,7 @@
           class="block text-center py-2 px-1"
         >
           <div class="flex flex-col items-center">
-            <fa icon="circle-user" class="fa-fw" />
+            <font-awesome icon="circle-user" class="fa-fw" />
             <!--
              We used to say "account", so we'll keep that in the code,
              but it isn't accurate because we don't hold anything for them.

src/interfaces/claims-result.ts

@@ -0,0 +1,47 @@
+import { AxiosResponse } from "axios";
+import { GiverReceiverInputInfo } from "../libs/util";
+import { ErrorResult, ResultWithType } from "./common";
+
+export interface GiverOutputInfo {
+  action: string;
+  giver?: GiverReceiverInputInfo;
+  description?: string;
+  amount?: number;
+  unitCode?: string;
+}
+
+export interface ClaimResult {
+  success: { claimId: string; handleId: string };
+  error: { code: string; message: string };
+}
+
+export interface VerifiableCredential {
+  exp?: number;
+  iat: number;
+  iss: string;
+  vc: {
+    "@context": string[];
+    type: string[];
+    credentialSubject: VerifiableCredentialSubject;
+  };
+}
+
+export interface VerifiableCredentialSubject {
+  "@context": string;
+  "@type": string;
+  [key: string]: unknown;
+}
+
+export interface WorldProperties {
+  startTime?: string;
+  endTime?: string;
+}
+
+// Type for createAndSubmitClaim result
+export type CreateAndSubmitClaimResult = SuccessResult | ErrorResult;
+
+// Update SuccessResult to use ClaimResult
+export interface SuccessResult extends ResultWithType {
+  type: "success";
+  response: AxiosResponse<ClaimResult>;
+}

src/interfaces/claims.ts

@@ -0,0 +1,63 @@
+import { GenericVerifiableCredential } from "./common";
+
+export interface AgreeVerifiableCredential {
+  "@context": string;
+  "@type": string;
+  object: Record<string, unknown>;
+}
+
+// Note that previous VCs may have additional fields.
+// https://endorser.ch/doc/html/transactions.html#id4
+export interface GiveVerifiableCredential extends GenericVerifiableCredential {
+  "@context"?: string;
+  "@type": "GiveAction";
+  agent?: { identifier: string };
+  description?: string;
+  fulfills?: { "@type": string; identifier?: string; lastClaimId?: string }[];
+  identifier?: string;
+  image?: string;
+  object?: { amountOfThisGood: number; unitCode: string };
+  provider?: GenericVerifiableCredential;
+  recipient?: { identifier: string };
+}
+
+// Note that previous VCs may have additional fields.
+// https://endorser.ch/doc/html/transactions.html#id8
+export interface OfferVerifiableCredential extends GenericVerifiableCredential {
+  "@context"?: string;
+  "@type": "Offer";
+  description?: string;
+  includesObject?: { amountOfThisGood: number; unitCode: string };
+  itemOffered?: {
+    description?: string;
+    isPartOf?: { identifier?: string; lastClaimId?: string; "@type"?: string };
+  };
+  offeredBy?: { identifier: string };
+  recipient?: { identifier: string };
+  validThrough?: string;
+}
+
+// Note that previous VCs may have additional fields.
+// https://endorser.ch/doc/html/transactions.html#id7
+export interface PlanVerifiableCredential extends GenericVerifiableCredential {
+  "@context": "https://schema.org";
+  "@type": "PlanAction";
+  name: string;
+  agent?: { identifier: string };
+  description?: string;
+  identifier?: string;
+  lastClaimId?: string;
+  location?: {
+    geo: { "@type": "GeoCoordinates"; latitude: number; longitude: number };
+  };
+}
+
+// AKA Registration & RegisterAction
+export interface RegisterVerifiableCredential {
+  "@context": string;
+  "@type": "RegisterAction";
+  agent: { identifier: string };
+  identifier?: string;
+  object: string;
+  participant?: { identifier: string };
+}

src/interfaces/common.ts

@@ -0,0 +1,41 @@
+// similar to VerifiableCredentialSubject... maybe rename this
+export interface GenericVerifiableCredential {
+  "@context"?: string;
+  "@type": string;
+  [key: string]: unknown;
+}
+
+export interface GenericCredWrapper<T extends GenericVerifiableCredential> {
+  claim: T;
+  claimType?: string;
+  handleId: string;
+  id: string;
+  issuedAt: string;
+  issuer: string;
+  publicUrls?: Record<string, string>;
+}
+
+export interface ResultWithType {
+  type: string;
+}
+
+export interface SuccessResult extends ResultWithType {
+  type: "success";
+  response: unknown;
+}
+
+export interface ErrorResponse {
+  error?: {
+    message?: string;
+  };
+}
+
+export interface InternalError {
+  error: string;
+  userMessage?: string;
+}
+
+export interface ErrorResult extends ResultWithType {
+  type: "error";
+  error: InternalError;
+}

src/interfaces/index.ts

@@ -0,0 +1,6 @@
+export * from "./claims";
+export * from "./claims-result";
+export * from "./common";
+export * from "./limits";
+export * from "./records";
+export * from "./user";

src/interfaces/limits.ts

@@ -0,0 +1,14 @@
+export interface EndorserRateLimits {
+  doneClaimsThisWeek: string;
+  doneRegistrationsThisMonth: string;
+  maxClaimsPerWeek: string;
+  maxRegistrationsPerMonth: string;
+  nextMonthBeginDateTime: string;
+  nextWeekBeginDateTime: string;
+}
+
+export interface ImageRateLimits {
+  doneImagesThisWeek: string;
+  maxImagesPerWeek: string;
+  nextWeekBeginDateTime: string;
+}

src/interfaces/records.ts

@@ -0,0 +1,90 @@
+import { GiveVerifiableCredential, OfferVerifiableCredential } from "./claims";
+
+// a summary record; the VC is found the fullClaim field
+export interface GiveSummaryRecord {
+  agentDid: string;
+  amount: number;
+  amountConfirmed: number;
+  description: string;
+  fullClaim: GiveVerifiableCredential;
+  fulfillsHandleId: string;
+  fulfillsPlanHandleId?: string;
+  fulfillsType?: string;
+  handleId: string;
+  issuedAt: string;
+  issuerDid: string;
+  jwtId: string;
+  providerPlanHandleId?: string;
+  recipientDid: string;
+  unit: string;
+}
+
+// a summary record; the VC is found the fullClaim field
+export interface OfferSummaryRecord {
+  amount: number;
+  amountGiven: number;
+  amountGivenConfirmed: number;
+  fullClaim: OfferVerifiableCredential;
+  fulfillsPlanHandleId: string;
+  handleId: string;
+  issuerDid: string;
+  jwtId: string;
+  nonAmountGivenConfirmed: number;
+  objectDescription: string;
+  offeredByDid: string;
+  recipientDid: string;
+  requirementsMet: boolean;
+  unit: string;
+  validThrough: string;
+}
+
+export interface OfferToPlanSummaryRecord extends OfferSummaryRecord {
+  planName: string;
+}
+
+// a summary record; the VC is not currently part of this record
+export interface PlanSummaryRecord {
+  agentDid?: string;
+  description: string;
+  endTime?: string;
+  fulfillsPlanHandleId: string;
+  handleId: string;
+  image?: string;
+  issuerDid: string;
+  locLat?: number;
+  locLon?: number;
+  name?: string;
+  startTime?: string;
+  url?: string;
+}
+
+/**
+ * Represents data about a project
+ *
+ * @deprecated
+ * (Maybe we should use PlanSummaryRecord instead, either by adding rowId or by iterating with jwtId.)
+ **/
+export interface PlanData {
+  /**
+   * Description of the project
+   **/
+  description: string;
+  /**
+   * URL referencing information about the project
+   **/
+  handleId: string;
+  image?: string;
+  /**
+   * The DID of the issuer
+   */
+  issuerDid: string;
+  /**
+   * Name of the project
+   **/
+  name: string;
+  /**
+   * The identifier of the project record -- different from jwtId
+   * (Maybe we should use the jwtId to iterate through the records instead.)
+   **/
+  rowId?: string;
+}

src/interfaces/user.ts

@@ -0,0 +1,8 @@
+export interface UserInfo {
+  did: string;
+  name: string;
+  publicEncKey: string;
+  registered: boolean;
+  profileImageUrl?: string;
+  nextPublicEncKeyHash?: string;
+}

src/libs/endorserServer.ts

@@ -1,4 +1,4 @@
-import { Axios, AxiosRequestConfig, AxiosResponse } from "axios";
+import { Axios, AxiosRequestConfig } from "axios";
 import { Buffer } from "buffer";
 import { sha256 } from "ethereum-cryptography/sha256";
 import { LRUCache } from "lru-cache";
@@ -17,10 +17,20 @@ import {
   retrieveAccountMetadata,
   retrieveFullyDecryptedAccount,
   getPasskeyExpirationSeconds,
-  GiverReceiverInputInfo,
 } from "../libs/util";
 import { createEndorserJwtForKey, KeyMeta } from "../libs/crypto/vc";
 
+import {
+  GiveVerifiableCredential,
+  OfferVerifiableCredential,
+  RegisterVerifiableCredential,
+  GenericVerifiableCredential,
+  GenericCredWrapper,
+  PlanSummaryRecord,
+  UserInfo,
+  CreateAndSubmitClaimResult,
+} from "../interfaces";
+
 export const SCHEMA_ORG_CONTEXT = "https://schema.org";
 // the object in RegisterAction claims
 export const SERVICE_ID = "endorser.ch";
@@ -36,44 +46,6 @@ export const CONTACT_URL_PATH_ENDORSER_CH_OLD = "/contact?jwt=";
 //export const CONTACT_URL_PREFIX_ENDORSER_CH_OLD = "https://endorser.ch";
 // the prefix for handle IDs, the permanent ID for claims on Endorser
 export const ENDORSER_CH_HANDLE_PREFIX = "https://endorser.ch/entity/";
-
-export interface AgreeVerifiableCredential {
-  "@context": string;
-  "@type": string;
-  // "any" because arbitrary objects can be subject of agreement
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  object: Record<string, any>;
-}
-
-export interface GiverOutputInfo {
-  action: string;
-  giver?: GiverReceiverInputInfo;
-  description?: string;
-  amount?: number;
-  unitCode?: string;
-}
-
-export interface ClaimResult {
-  success: { claimId: string; handleId: string };
-  error: { code: string; message: string };
-}
-
-// similar to VerifiableCredentialSubject... maybe rename this
-export interface GenericVerifiableCredential {
-  "@context"?: string; // optional when embedded, eg. in an Agree
-  "@type": string;
-  [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-}
-
-export interface GenericCredWrapper<T extends GenericVerifiableCredential> {
-  claim: T;
-  claimType?: string;
-  handleId: string;
-  id: string;
-  issuedAt: string;
-  issuer: string;
-  publicUrls?: Record<string, string>; // only for IDs that want to be public
-}
 export const BLANK_GENERIC_SERVER_RECORD: GenericCredWrapper<GenericVerifiableCredential> =
   {
     claim: { "@type": "" },
@@ -82,232 +54,6 @@ export const BLANK_GENERIC_SERVER_RECORD: GenericCredWrapper<GenericVerifiableCr
     issuedAt: "",
     issuer: "",
   };
-
-// a summary record; the VC is found the fullClaim field
-export interface GiveSummaryRecord {
-  agentDid: string;
-  amount: number;
-  amountConfirmed: number;
-  description: string;
-  fullClaim: GiveVerifiableCredential;
-  fulfillsHandleId: string;
-  fulfillsPlanHandleId?: string;
-  fulfillsType?: string;
-  handleId: string;
-  issuedAt: string;
-  issuerDid: string;
-  jwtId: string;
-  providerPlanHandleId?: string;
-  recipientDid: string;
-  unit: string;
-}
-
-// a summary record; the VC is found the fullClaim field
-export interface OfferSummaryRecord {
-  amount: number;
-  amountGiven: number;
-  amountGivenConfirmed: number;
-  fullClaim: OfferVerifiableCredential;
-  fulfillsPlanHandleId: string;
-  handleId: string;
-  issuerDid: string;
-  jwtId: string;
-  nonAmountGivenConfirmed: number;
-  objectDescription: string;
-  offeredByDid: string;
-  recipientDid: string;
-  requirementsMet: boolean;
-  unit: string;
-  validThrough: string;
-}
-
-export interface OfferToPlanSummaryRecord extends OfferSummaryRecord {
-  planName: string;
-}
-
-// a summary record; the VC is not currently part of this record
-export interface PlanSummaryRecord {
-  agentDid?: string; // optional, if the issuer wants someone else to manage as well
-  description: string;
-  endTime?: string;
-  fulfillsPlanHandleId: string;
-  handleId: string;
-  image?: string;
-  issuerDid: string;
-  locLat?: number;
-  locLon?: number;
-  name?: string;
-  startTime?: string;
-  url?: string;
-}
-
-// Note that previous VCs may have additional fields.
-// https://endorser.ch/doc/html/transactions.html#id4
-export interface GiveVerifiableCredential extends GenericVerifiableCredential {
-  "@context"?: string; // optional when embedded, eg. in an Agree
-  "@type": "GiveAction";
-  agent?: { identifier: string };
-  description?: string;
-  fulfills?: { "@type": string; identifier?: string; lastClaimId?: string }[];
-  identifier?: string;
-  image?: string;
-  object?: { amountOfThisGood: number; unitCode: string };
-  provider?: GenericVerifiableCredential; // typically @type & identifier
-  recipient?: { identifier: string };
-}
-
-// Note that previous VCs may have additional fields.
-// https://endorser.ch/doc/html/transactions.html#id8
-export interface OfferVerifiableCredential extends GenericVerifiableCredential {
-  "@context"?: string; // optional when embedded... though it doesn't make sense to agree to an offer
-  "@type": "Offer";
-  description?: string; // conditions for the offer
-  includesObject?: { amountOfThisGood: number; unitCode: string };
-  itemOffered?: {
-    description?: string; // description of the item
-    isPartOf?: { identifier?: string; lastClaimId?: string; "@type"?: string };
-  };
-  offeredBy?: { identifier: string };
-  recipient?: { identifier: string };
-  validThrough?: string;
-}
-
-// Note that previous VCs may have additional fields.
-// https://endorser.ch/doc/html/transactions.html#id7
-export interface PlanVerifiableCredential extends GenericVerifiableCredential {
-  "@context": "https://schema.org";
-  "@type": "PlanAction";
-  name: string;
-  agent?: { identifier: string };
-  description?: string;
-  identifier?: string;
-  lastClaimId?: string;
-  location?: {
-    geo: { "@type": "GeoCoordinates"; latitude: number; longitude: number };
-  };
-}
-
-/**
- * Represents data about a project
- *
- * @deprecated
- * (Maybe we should use PlanSummaryRecord instead, either by adding rowId or by iterating with jwtId.)
- **/
-export interface PlanData {
-  /**
-   * Description of the project
-   **/
-  description: string;
-  /**
-   * URL referencing information about the project
-   **/
-  handleId: string;
-  image?: string;
-  /**
-   * The DID of the issuer
-   */
-  issuerDid: string;
-  /**
-   * Name of the project
-   **/
-  name: string;
-  /**
-   * The identifier of the project record -- different from jwtId
-   * (Maybe we should use the jwtId to iterate through the records instead.)
-   **/
-  rowId?: string;
-}
-
-export interface EndorserRateLimits {
-  doneClaimsThisWeek: string;
-  doneRegistrationsThisMonth: string;
-  maxClaimsPerWeek: string;
-  maxRegistrationsPerMonth: string;
-  nextMonthBeginDateTime: string;
-  nextWeekBeginDateTime: string;
-}
-
-export interface ImageRateLimits {
-  doneImagesThisWeek: string;
-  maxImagesPerWeek: string;
-  nextWeekBeginDateTime: string;
-}
-
-export interface VerifiableCredential {
-  exp?: number;
-  iat: number;
-  iss: string;
-  vc: {
-    "@context": string[];
-    type: string[];
-    credentialSubject: VerifiableCredentialSubject;
-  };
-}
-
-// similar to GenericVerifiableCredential... maybe replace that one
-export interface VerifiableCredentialSubject {
-  "@context": string;
-  "@type": string;
-  [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-}
-
-export interface WorldProperties {
-  startTime?: string;
-  endTime?: string;
-}
-
-// AKA Registration & RegisterAction
-export interface RegisterVerifiableCredential {
-  "@context": typeof SCHEMA_ORG_CONTEXT;
-  "@type": "RegisterAction";
-  agent: { identifier: string };
-  identifier?: string; // used for invites (when participant ID isn't known)
-  object: string;
-  participant?: { identifier: string }; // used when person is known (not an invite)
-}
-
-// now for some of the error & other wrapper types
-
-export interface ResultWithType {
-  type: string;
-}
-
-export interface SuccessResult extends ResultWithType {
-  type: "success";
-  response: AxiosResponse<ClaimResult>;
-}
-
-export interface ErrorResponse {
-  error?: {
-    message?: string;
-  };
-}
-
-export interface InternalError {
-  error: string; // for system logging
-  userMessage?: string; // for user display
-}
-
-export interface ErrorResult extends ResultWithType {
-  type: "error";
-  error: InternalError;
-}
-
-export type CreateAndSubmitClaimResult = SuccessResult | ErrorResult;
-
-/**
- * This is similar to Contact but it grew up in different logic paths.
- * We may want to change this to be a Contact.
- */
-export interface UserInfo {
-  did: string;
-  name: string;
-  publicEncKey: string;
-  registered: boolean;
-  profileImageUrl?: string;
-  nextPublicEncKeyHash?: string;
-}
-
 // This is used to check for hidden info.
 // See https://github.com/trentlarson/endorser-ch/blob/0cb626f803028e7d9c67f095858a9fc8542e3dbd/server/api/services/util.js#L6
 const HIDDEN_DID = "did:none:HIDDEN";

src/main.capacitor.ts

@@ -3,17 +3,17 @@
  * @description Initializes the application for Capacitor platform (iOS/Android)
  * @author Matthew Raymer
  * @version 0.4.4
- * 
+ *
  * Process Flow:
  * 1. Initialization
  *    - Logs start of initialization
  *    - Logs current platform
  *    - Initializes core application via main.common
- * 
+ *
  * 2. Error Handling Setup
  *    - Registers global unhandled promise rejection handler
  *    - Routes API errors to error handling system
- * 
+ *
  * 3. Deep Linking Configuration
  *    - Registers URL scheme handler (timesafari://)
  *    - Supports 11 parameterized routes:
@@ -28,17 +28,17 @@
  *      * offer-details
  *      * project
  *      * userProfile
- * 
+ *
  * 4. Application Mounting
  *    - Mounts Vue application to DOM
  *    - Logs completion of mounting process
- * 
+ *
  * Security Measures:
  * - URL validation before processing
  * - Type-safe error handling
  * - Parameterized route pattern matching
  * - Comprehensive error logging
- * 
+ *
  * @example Deep Link Format
  * timesafari://<route>/<parameter>
  * timesafari://claim/01JMAAFZRNSRTQ0EBSD70A8E1H
@@ -66,16 +66,16 @@ window.addEventListener("unhandledrejection", (event) => {
  * Handles deep link routing for the application
  * Processes URLs in the format timesafari://<route>/<param>
  * Maps incoming deep links to corresponding router paths with parameters
- * 
+ *
  * @param {Object} data - Deep link data object
  * @param {string} data.url - The full deep link URL to process
  * @returns {Promise<void>}
- * 
+ *
  * @example
  * // Handles URLs like:
  * // timesafari://claim/01JMAAFZRNSRTQ0EBSD70A8E1H
  * // timesafari://project/abc123
- * 
+ *
  * @throws {Error} If URL format is invalid
  */
 const handleDeepLink = async (data: { url: string }) => {
@@ -95,17 +95,17 @@ const handleDeepLink = async (data: { url: string }) => {
 
     // Define supported parameterized routes and their regex patterns
     const paramRoutes = {
-      'claim-add-raw': /^claim-add-raw\/(.+)$/,
-      'claim-cert': /^claim-cert\/(.+)$/,
-      'claim': /^claim\/(.+)$/,
-      'confirm-gift': /^confirm-gift\/(.+)$/,
-      'contact-edit': /^contact-edit\/(.+)$/,
-      'contact-import': /^contact-import\/(.+)$/,
-      'did': /^did\/(.+)$/,
-      'invite-one-accept': /^invite-one-accept\/(.+)$/,
-      'offer-details': /^offer-details\/(.+)$/,
-      'project': /^project\/(.+)$/,
-      'userProfile': /^userProfile\/(.+)$/
+      "claim-add-raw": /^claim-add-raw\/(.+)$/,
+      "claim-cert": /^claim-cert\/(.+)$/,
+      claim: /^claim\/(.+)$/,
+      "confirm-gift": /^confirm-gift\/(.+)$/,
+      "contact-edit": /^contact-edit\/(.+)$/,
+      "contact-import": /^contact-import\/(.+)$/,
+      did: /^did\/(.+)$/,
+      "invite-one-accept": /^invite-one-accept\/(.+)$/,
+      "offer-details": /^offer-details\/(.+)$/,
+      project: /^project\/(.+)$/,
+      userProfile: /^userProfile\/(.+)$/,
     };
 
     // Match route pattern and extract parameter

src/views/AccountViewView.vue

@@ -39,12 +39,12 @@
               :to="{ name: 'contact-qr' }"
               class="bg-slate-500 text-white px-1.5 py-1 rounded-md"
             >
-              <fa icon="qrcode" class="fa-fw text-xl"></fa>
+              <font-awesome icon="qrcode" class="fa-fw text-xl"></font-awesome>
             </router-link>
           </span>
           {{ givenName }}
           <router-link :to="{ name: 'new-edit-account' }">
-            <fa icon="pen" class="text-xs text-blue-500 ml-2 mb-1"></fa>
+            <font-awesome icon="pen" class="text-xs text-blue-500 ml-2 mb-1"></font-awesome>
           </router-link>
         </h2>
       </div>
@@ -73,7 +73,7 @@
             class="inline-block align-text-bottom border border-slate-300 rounded"
             @click="showLargeIdenticonUrl = profileImageUrl"
           />
-          <fa
+          <font-awesome
             icon="trash-can"
             @click="confirmDeleteImage"
             class="text-red-500 fa-fw ml-8 mt-8 w-12 h-12"
@@ -81,11 +81,11 @@
         </span>
         <div v-else class="text-center">
           <div class @click="openImageDialog()">
-            <fa
+            <font-awesome
               icon="image-portrait"
               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-2 py-2 rounded-l"
             />
-            <fa
+            <font-awesome
               icon="camera"
               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-2 py-2 rounded-r"
             />
@@ -140,7 +140,7 @@
           "
           class="ml-2"
         >
-          <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+          <font-awesome icon="copy" class="text-slate-400 fa-fw"></font-awesome>
         </button>
         <span v-show="showDidCopy">Copied</span>
       </div>
@@ -185,7 +185,7 @@
         <!-- label -->
         <div>
           Reminder Notification
-          <fa
+          <font-awesome
             icon="question-circle"
             class="text-slate-400 fa-fw ml-2 cursor-pointer"
             @click.stop="showReminderNotificationInfo"
@@ -214,7 +214,7 @@
         <!-- label -->
         <div>
           New Activity Notification
-          <fa
+          <font-awesome
             icon="question-circle"
             class="text-slate-400 fa-fw ml-2 cursor-pointer"
             @click.stop="showNewActivityNotificationInfo"
@@ -268,12 +268,12 @@
       class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
     >
       <div v-if="loadingProfile" class="text-center mb-2">
-        <fa icon="spinner" class="fa-spin text-slate-400"></fa> Loading
+        <font-awesome icon="spinner" class="fa-spin text-slate-400"></font-awesome> Loading
         profile...
       </div>
       <div v-else class="flex items-center mb-2">
         <span class="font-bold">Public Profile</span>
-        <fa
+        <font-awesome
           icon="circle-info"
           class="text-slate-400 fa-fw ml-2 cursor-pointer"
           @click="showProfileInfo"
@@ -363,7 +363,7 @@
       <div class="mb-2 font-bold">Usage Limits</div>
       <!-- show spinner if loading limits -->
       <div v-if="loadingLimits" class="text-center">
-        Checking&hellip; <fa icon="spinner" class="fa-spin"></fa>
+        Checking&hellip; <font-awesome icon="spinner" class="fa-spin"></font-awesome>
       </div>
       <div class="mb-4 text-center">
         {{ limitsMessage }}
@@ -454,7 +454,7 @@
           </li>
           <li class="list-disc list-outside ml-4">
             On Android: Choose "Open" and then share
-            <fa icon="share-nodes" class="fa-fw" />
+            <font-awesome icon="share-nodes" class="fa-fw" />
             to your prefered place.
           </li>
         </ul>
@@ -494,7 +494,7 @@
             "
             class="ml-2"
           >
-            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+            <font-awesome icon="copy" class="text-slate-400 fa-fw"></font-awesome>
           </button>
           <span v-show="showB64Copy">Copied</span>
         </div>
@@ -510,7 +510,7 @@
             "
             class="ml-2"
           >
-            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+            <font-awesome icon="copy" class="text-slate-400 fa-fw"></font-awesome>
           </button>
           <span v-show="showPubCopy">Copied</span>
         </div>
@@ -530,7 +530,7 @@
             "
             class="ml-2"
           >
-            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+            <font-awesome icon="copy" class="text-slate-400 fa-fw"></font-awesome>
           </button>
           <span v-show="showDerCopy">Copied</span>
         </div>
@@ -631,7 +631,7 @@
             class="w-full px-4 rounded bg-yellow-500 border border-slate-400"
             @click="onClickSaveApiServer()"
           >
-            <fa icon="floppy-disk" class="fa-fw" color="white"></fa>
+            <font-awesome icon="floppy-disk" class="fa-fw" color="white"></font-awesome>
           </button>
           <button
             class="px-3 rounded bg-slate-200 border border-slate-400"
@@ -708,7 +708,7 @@
           class="w-full px-4 rounded bg-yellow-500 border border-slate-400"
           @click="onClickSavePushServer()"
         >
-          <fa icon="floppy-disk" class="fa-fw" color="white"></fa>
+          <font-awesome icon="floppy-disk" class="fa-fw" color="white"></font-awesome>
         </button>
         <button
           class="px-3 rounded bg-slate-200 border border-slate-400"
@@ -747,7 +747,7 @@
           class="w-full px-4 rounded bg-yellow-500 border border-slate-400"
           @click="onClickSavePartnerServer()"
         >
-          <fa icon="floppy-disk" class="fa-fw" color="white"></fa>
+          <font-awesome icon="floppy-disk" class="fa-fw" color="white"></font-awesome>
         </button>
         <button
           class="px-3 rounded bg-slate-200 border border-slate-400"

src/views/ClaimAddRawView.vue

@@ -10,7 +10,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="fa-fw" />
         </button>
         Raw Claim
       </h1>

src/views/ClaimView.vue

@@ -10,7 +10,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="fa-fw" />
         </button>
         Verifiable Claim Details
       </h1>
@@ -36,7 +36,7 @@
                 title="Edit"
                 data-testId="editClaimButton"
               >
-                <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
+                <font-awesome icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
               </button>
             </h2>
             <div class="flex justify-center w-full">
@@ -45,7 +45,7 @@
                 class="text-blue-500 mt-2"
                 title="Printable Certificate"
               >
-                <fa icon="square" class="text-white bg-yellow-500 p-1" />
+                <font-awesome icon="square" class="text-white bg-yellow-500 p-1" />
               </router-link>
             </div>
             <!-- show link icon to copy this URL to the clipboard -->
@@ -56,24 +56,24 @@
                   copyToClipboard('A link to this page', window.location.href)
                 "
               >
-                <fa icon="link" class="text-slate-500" />
+                <font-awesome icon="link" class="text-slate-500" />
               </button>
             </div>
           </div>
           <div class="text-sm">
             <div data-testId="description">
-              <fa icon="message" class="fa-fw text-slate-400" />
+              <font-awesome icon="message" class="fa-fw text-slate-400" />
               {{
                 veriClaim.claim?.itemOffered?.description ||
                 veriClaim.claim?.description
               }}
             </div>
             <div>
-              <fa icon="user" class="fa-fw text-slate-400" />
+              <font-awesome icon="user" class="fa-fw text-slate-400" />
               {{ didInfo(veriClaim.issuer) }}
             </div>
             <div>
-              <fa icon="calendar" class="fa-fw text-slate-400" />
+              <font-awesome icon="calendar" class="fa-fw text-slate-400" />
               Recorded
               {{ veriClaim.issuedAt?.replace(/T/, " ").replace(/Z/, " UTC") }}
             </div>
@@ -177,13 +177,13 @@
       </div>
     </div>
     <div class="mt-2">
-      <fa icon="comment" class="text-slate-400" />
+      <font-awesome icon="comment" class="text-slate-400" />
       {{ issuerName }} posted that.
     </div>
     <!--
     <div>
       <router-link :to="'/claim-cert/' + encodeURIComponent(veriClaim.id)">
-        <fa icon="file-contract" class="text-slate-400" />
+        <font-awesome icon="file-contract" class="text-slate-400" />
         <span class="ml-2 text-blue-500">Printable Certificate</span>
       </router-link>
     </div>
@@ -196,7 +196,7 @@
         class="col-span-1 block w-fit text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
       >
         Affirm Delivery
-        <fa icon="hand-holding-heart" class="ml-2 text-white cursor-pointer" />
+        <font-awesome icon="hand-holding-heart" class="ml-2 text-white cursor-pointer" />
       </button>
     </div>
     <GiftedDialog ref="customGiveDialog" />
@@ -216,7 +216,7 @@
           @click="confirmConfirmClaim()"
         >
           Confirm
-          <fa icon="circle-check" class="ml-2 text-white cursor-pointer" />
+          <font-awesome icon="circle-check" class="ml-2 text-white cursor-pointer" />
         </button>
         <h2 v-else class="font-bold uppercase text-xl mt-2">Confirmations</h2>
 
@@ -276,7 +276,7 @@
                         target="_blank"
                         class="text-blue-500"
                       >
-                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                        <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
                       </a>
                     </span>
                   </div>
@@ -314,7 +314,7 @@
                         target="_blank"
                         class="text-blue-500"
                       >
-                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                        <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
                       </a>
                     </span>
                   </div>
@@ -345,8 +345,8 @@
       @click="showVeriClaimDump = !showVeriClaimDump"
     >
       Details
-      <fa v-if="showVeriClaimDump" icon="chevron-up" />
-      <fa v-else icon="chevron-right" />
+      <font-awesome v-if="showVeriClaimDump" icon="chevron-up" />
+      <font-awesome v-else icon="chevron-right" />
     </h2>
     <div v-if="showVeriClaimDump">
       <div
@@ -408,7 +408,7 @@
           class="list-disc p-4"
         >
           <div class="text-sm">
-            <fa icon="minus" class="fa-fw" />
+            <font-awesome icon="minus" class="fa-fw" />
             The {{ visibleDidPath }} is visible to:
           </div>
           <div class="ml-12 p-1">
@@ -427,7 +427,7 @@
                         target="_blank"
                         class="text-blue-500"
                       >
-                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                        <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
                       </a>
                     </span>
                     <span v-if="veriClaim.publicUrls?.[visDid]"
@@ -436,7 +436,7 @@
                         target="_blank"
                         class="text-blue-500"
                       >
-                        <fa icon="globe" class="fa-fw" />
+                        <font-awesome icon="globe" class="fa-fw" />
                         {{
                           veriClaim.publicUrls[visDid].substring(
                             veriClaim.publicUrls[visDid].indexOf("//") + 2,
@@ -476,7 +476,7 @@
           class="text-blue-500 cursor-pointer"
           @click="showFullClaim(veriClaim.id as string)"
         >
-          <fa icon="file-lines" class="fa-fw" />
+          <font-awesome icon="file-lines" class="fa-fw" />
           Load Full Claim Details
         </button>
       </div>
@@ -492,8 +492,8 @@
         target="_blank"
         class="text-blue-500 cursor-pointer"
       >
-        <fa icon="file-lines" class="fa-fw" />
-        <fa icon="arrow-up-right-from-square" class="ml-1 fa-fw" />
+        <font-awesome icon="file-lines" class="fa-fw" />
+        <font-awesome icon="arrow-up-right-from-square" class="ml-1 fa-fw" />
         View on the Public Server
       </a>
     </div>

src/views/ConfirmContactView.vue

@@ -8,7 +8,7 @@
         <router-link
           :to="{ name: 'account' }"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left" class="fa-fw"></fa
+          ><font-awesome icon="chevron-left" class="fa-fw"></fa
         ></router-link>
 
         Confirm Contact

src/views/ConfirmGiftView.vue

@@ -11,7 +11,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="fa-fw" />
         </button>
         <span
           v-if="
@@ -44,7 +44,7 @@
           @click="confirmConfirmClaim()"
         >
           Confirm
-          <fa icon="circle-check" class="ml-2 text-white cursor-pointer" />
+          <font-awesome icon="circle-check" class="ml-2 text-white cursor-pointer" />
         </button>
         <button
           v-else
@@ -52,7 +52,7 @@
           class="col-span-1 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"
         >
           Confirm
-          <fa icon="circle-check" class="ml-2 text-white cursor-pointer" />
+          <font-awesome icon="circle-check" class="ml-2 text-white cursor-pointer" />
         </button>
       </div>
 
@@ -62,26 +62,26 @@
           <div class="overflow-hidden">
             <div class="text-sm">
               <div>
-                <fa icon="arrow-left" class="fa-fw text-slate-400" />
+                <font-awesome icon="arrow-left" class="fa-fw text-slate-400" />
                 {{ giverName }}
               </div>
               <div class="ml-6">gave</div>
               <div v-if="giveDetails.amount">
-                <fa icon="hand-holding-dollar" class="fa-fw text-slate-400" />
+                <font-awesome icon="hand-holding-dollar" class="fa-fw text-slate-400" />
                 {{ displayAmount(giveDetails.unit, giveDetails.amount) }}
               </div>
               <div v-if="giveDetails.description">
-                <fa icon="message" class="fa-fw text-slate-400" />
+                <font-awesome icon="message" class="fa-fw text-slate-400" />
                 {{ giveDetails.amount ? "and:" : "" }}
                 {{ giveDetails.description }}
               </div>
               <div class="ml-6">to</div>
               <div>
-                <fa icon="arrow-right" class="fa-fw text-slate-400" />
+                <font-awesome icon="arrow-right" class="fa-fw text-slate-400" />
                 {{ recipientName }}
               </div>
               <div>
-                <fa icon="calendar" class="fa-fw text-slate-400" />
+                <font-awesome icon="calendar" class="fa-fw text-slate-400" />
                 on
                 {{ giveDetails.issuedAt.substring(0, 10) }}
               </div>
@@ -99,7 +99,7 @@
                   target="_blank"
                 >
                   This fulfills a bigger plan
-                  <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                  <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
                 </router-link>
               </div>
               <!-- if there's another, it's probably fulfilling an offer, too -->
@@ -125,7 +125,7 @@
                       giveDetails?.fulfillsType || "",
                     )
                   }}
-                  <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                  <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
                 </router-link>
               </div>
             </div>
@@ -133,7 +133,7 @@
         </div>
       </div>
       <div class="mt-2">
-        <fa icon="comment" class="text-slate-400" />
+        <font-awesome icon="comment" class="text-slate-400" />
         {{ issuerName }} posted that.
       </div>
 
@@ -185,7 +185,7 @@
                             )
                           "
                         >
-                          <fa icon="copy" class="text-slate-400 fa-fw" />
+                          <font-awesome icon="copy" class="text-slate-400 fa-fw" />
                         </button>
                       </span>
                     </div>
@@ -228,7 +228,7 @@
                             )
                           "
                         >
-                          <fa icon="copy" class="text-slate-400 fa-fw" />
+                          <font-awesome icon="copy" class="text-slate-400 fa-fw" />
                         </button>
                       </span>
                     </div>
@@ -260,8 +260,8 @@
         @click="showVeriClaimDump = !showVeriClaimDump"
       >
         Details
-        <fa v-if="showVeriClaimDump" icon="chevron-up" />
-        <fa v-else icon="chevron-right" />
+        <font-awesome v-if="showVeriClaimDump" icon="chevron-up" />
+        <font-awesome v-else icon="chevron-right" />
       </h2>
       <div v-if="showVeriClaimDump">
         <div
@@ -323,7 +323,7 @@
             class="list-disc p-4"
           >
             <div class="text-sm">
-              <fa icon="minus" class="fa-fw" />
+              <font-awesome icon="minus" class="fa-fw" />
               The {{ visibleDidPath }} is visible to:
             </div>
             <div class="ml-12 p-1">
@@ -342,12 +342,12 @@
                             copyToClipboard('The DID of ' + visDid, visDid)
                           "
                         >
-                          <fa icon="copy" class="text-slate-400 fa-fw" />
+                          <font-awesome icon="copy" class="text-slate-400 fa-fw" />
                         </button>
                       </span>
                       <span v-if="veriClaim.publicUrls?.[visDid]"
                         >, found at
-                        <fa icon="globe" class="fa-fw text-slate-400" />
+                        <font-awesome icon="globe" class="fa-fw text-slate-400" />
                         <a
                           :href="veriClaim.publicUrls?.[visDid]"
                           class="text-blue-500"
@@ -375,7 +375,7 @@
             @click="showClaimPage(veriClaim.id)"
             class="text-blue-500 cursor-pointer"
           >
-            <fa icon="file-lines" />
+            <font-awesome icon="file-lines" />
             See All Generic Info
           </a>
         </div>
@@ -385,7 +385,7 @@
             class="text-blue-500 cursor-pointer"
             :href="urlForNewGive"
           >
-            <fa icon="file-lines" />
+            <font-awesome icon="file-lines" />
             Record a Give Similar to the Original
           </a>
         </div>
@@ -397,7 +397,7 @@
       class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
       v-if="isLoading"
     >
-      <fa icon="spinner" class="fa-spin-pulse"></fa>
+      <font-awesome icon="spinner" class="fa-spin-pulse"></font-awesome>
     </div>
   </section>
 </template>

src/views/ContactAmountsView.vue

@@ -11,7 +11,7 @@
         <router-link
           :to="{ name: 'contacts' }"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left" class="fa-fw"></fa
+          ><font-awesome icon="chevron-left" class="fa-fw"></fa
         ></router-link>
       </h1>
 
@@ -59,10 +59,10 @@
               <div class="font-bold">
                 {{ displayAmount(record.unit, record.amount) }}
                 <span v-if="record.amountConfirmed" title="Confirmed">
-                  <fa icon="circle-check" class="text-green-600 fa-fw" />
+                  <font-awesome icon="circle-check" class="text-green-600 fa-fw" />
                 </span>
                 <button v-else @click="confirm(record)" title="Unconfirmed">
-                  <fa icon="circle" class="text-blue-600 fa-fw" />
+                  <font-awesome icon="circle" class="text-blue-600 fa-fw" />
                 </button>
               </div>
               <div class="italic text-xs sm:text-sm text-slate-500">
@@ -72,10 +72,10 @@
           </td>
           <td class="p-1">
             <span v-if="record.agentDid == contact?.did">
-              <fa icon="arrow-left" class="text-slate-400 fa-fw" />
+              <font-awesome icon="arrow-left" class="text-slate-400 fa-fw" />
             </span>
             <span v-else>
-              <fa icon="arrow-right" class="text-slate-400 fa-fw" />
+              <font-awesome icon="arrow-right" class="text-slate-400 fa-fw" />
             </span>
           </td>
           <td class="p-1">
@@ -83,14 +83,14 @@
               <div class="font-bold">
                 {{ displayAmount(record.unit, record.amount) }}
                 <span v-if="record.amountConfirmed" title="Confirmed">
-                  <fa icon="circle-check" class="text-green-600 fa-fw" />
+                  <font-awesome icon="circle-check" class="text-green-600 fa-fw" />
                 </span>
                 <button
                   v-else
                   @click="cannotConfirmMessage()"
                   title="Unconfirmed"
                 >
-                  <fa icon="circle" class="text-slate-600 fa-fw" />
+                  <font-awesome icon="circle" class="text-slate-600 fa-fw" />
                 </button>
               </div>
               <div class="italic text-xs sm:text-sm text-slate-500">

src/views/ContactEditView.vue

@@ -10,7 +10,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="fa-fw" />
         </button>
         {{ contact.name || AppString.NO_CONTACT_NAME }}
       </h1>
@@ -69,7 +69,7 @@
             @click="toggleDropdown(index)"
             class="px-2 py-1 bg-gray-200 rounded-md"
           >
-            <fa icon="caret-down" class="fa-fw" />
+            <font-awesome icon="caret-down" class="fa-fw" />
           </button>
           <div
             v-if="dropdownIndex === index"
@@ -102,11 +102,11 @@
           placeholder="Number, email, etc."
         />
         <button @click="removeContactMethod(index)" class="ml-2 text-red-500">
-          <fa icon="trash-can" class="fa-fw" />
+          <font-awesome icon="trash-can" class="fa-fw" />
         </button>
       </div>
       <button @click="addContactMethod" class="mt-2">
-        <fa
+        <font-awesome
           icon="plus"
           class="fa-fw px-2 py-2.5 bg-green-500 text-green-100 rounded-full"
         />

src/views/ContactGiftingView.vue

@@ -9,7 +9,7 @@
         <router-link
           :to="{ name: 'home' }"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left" class="fa-fw"></fa
+          ><font-awesome icon="chevron-left" class="fa-fw"></fa
         ></router-link>
         Given by...
       </h1>
@@ -33,7 +33,7 @@
               @click="openDialog()"
               class="block w-full text-center text-sm 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-3 py-1.5 rounded-md"
             >
-              <fa icon="gift" class="fa-fw"></fa>
+              <font-awesome icon="gift" class="fa-fw"></font-awesome>
             </button>
           </span>
         </h2>
@@ -58,7 +58,7 @@
               @click="openDialog(contact)"
               class="block w-full text-center text-sm 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-3 py-1.5 rounded-md"
             >
-              <fa icon="gift" class="fa-fw"></fa>
+              <font-awesome icon="gift" class="fa-fw"></font-awesome>
             </button>
           </span>
         </h2>

src/views/ContactImportView.vue

@@ -7,7 +7,7 @@
         class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         @click="$router.back()"
       >
-        <fa icon="chevron-left" class="fa-fw"></fa>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
     </div>
 
@@ -17,7 +17,7 @@
     </h1>
 
     <div v-if="checkingImports" class="text-center">
-      <fa icon="spinner" class="animate-spin" />
+      <font-awesome icon="spinner" class="animate-spin" />
     </div>
     <div v-else>
       <span

src/views/ContactQRScanShowView.vue

@@ -10,7 +10,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="fa-fw" />
         </h1>
       </div>
 

src/views/ContactScanView.vue

@@ -7,7 +7,7 @@
         <router-link
           :to="{ name: 'account' }"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left" class="fa-fw"></fa
+          ><font-awesome icon="chevron-left" class="fa-fw"></fa
         ></router-link>
 
         Scan Contact

src/views/ContactsView.vue

@@ -28,21 +28,21 @@
           :to="{ name: 'invite-one' }"
           class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
         >
-          <fa icon="envelope-open-text" class="fa-fw text-2xl" />
+          <font-awesome icon="envelope-open-text" class="fa-fw text-2xl" />
         </router-link>
 
         <button
           @click="showOnboardMeetingDialog()"
           class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
         >
-          <fa icon="chair" class="fa-fw text-2xl" />
+          <font-awesome icon="chair" class="fa-fw text-2xl" />
         </button>
       </span>
       <span v-else class="flex">
         <span
           class="flex items-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
         >
-          <fa
+          <font-awesome
             icon="envelope-open-text"
             class="fa-fw text-2xl"
             @click="
@@ -56,7 +56,7 @@
         <span
           class="flex items-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
         >
-          <fa
+          <font-awesome
             icon="chair"
             class="fa-fw text-2xl"
             @click="
@@ -73,7 +73,7 @@
         :to="{ name: 'contact-qr' }"
         class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
       >
-        <fa icon="qrcode" class="fa-fw text-2xl" />
+        <font-awesome icon="qrcode" class="fa-fw text-2xl" />
       </router-link>
 
       <textarea
@@ -86,7 +86,7 @@
         class="px-4 rounded-r bg-green-200 border border-l-0 border-green-400"
         @click="onClickNewContact()"
       >
-        <fa icon="plus" class="fa-fw" />
+        <font-awesome icon="plus" class="fa-fw" />
       </button>
     </div>
 
@@ -119,7 +119,7 @@
             Copy Selections
           </button>
           <button @click="showCopySelectionsInfo()">
-            <fa icon="circle-info" class="text-xl text-blue-500 ml-4" />
+            <font-awesome icon="circle-info" class="text-xl text-blue-500 ml-4" />
           </button>
         </div>
       </div>
@@ -143,7 +143,7 @@
         <span
           class="text-sm 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-1 py-1 rounded-md"
         >
-          <fa icon="file-lines" class="fa-fw" />
+          <font-awesome icon="file-lines" class="fa-fw" />
         </span>
         <br />
         <button
@@ -159,7 +159,7 @@
                 ? "Confirmed Amounts"
                 : "Unconfirmed Amounts"
           }}
-          <fa icon="left-right" class="fa-fw" />
+          <font-awesome icon="left-right" class="fa-fw" />
         </button>
       </div>
     </div>
@@ -215,7 +215,7 @@
                   }"
                   title="See more about this person"
                 >
-                  <fa icon="circle-info" class="text-xl text-blue-500 ml-4" />
+                  <font-awesome icon="circle-info" class="text-xl text-blue-500 ml-4" />
                 </router-link>
 
                 <span class="ml-4 text-sm overflow-hidden">{{
@@ -286,7 +286,7 @@
                 class="text-sm 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-1.5 rounded-md border border-slate-400"
                 title="See more given activity"
               >
-                <fa icon="file-lines" class="fa-fw" />
+                <font-awesome icon="file-lines" class="fa-fw" />
               </router-link>
             </div>
           </div>

src/views/DIDView.vue

@@ -12,7 +12,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </button>
         Identifier Details
       </h1>
@@ -29,7 +29,7 @@
           <router-link
             :to="{ name: 'contact-edit', params: { did: contactFromDid?.did } }"
           >
-            <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
+            <font-awesome icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
           </router-link>
         </h2>
         <button
@@ -37,8 +37,8 @@
           class="ml-2 mr-2 mt-4"
         >
           Details
-          <fa v-if="showDidDetails" icon="chevron-down" class="text-blue-400" />
-          <fa v-else icon="chevron-right" class="text-blue-400" />
+          <font-awesome v-if="showDidDetails" icon="chevron-down" class="text-blue-400" />
+          <font-awesome v-else icon="chevron-right" class="text-blue-400" />
         </button>
         <!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
         <pre
@@ -72,7 +72,7 @@
                 @click="confirmSetVisibility(contactFromDid, false)"
                 title="They can see you"
               >
-                <fa icon="eye" class="fa-fw" />
+                <font-awesome icon="eye" class="fa-fw" />
               </button>
               <button
                 v-else-if="
@@ -82,7 +82,7 @@
                 @click="confirmSetVisibility(contactFromDid, true)"
                 title="They cannot see you"
               >
-                <fa icon="eye-slash" class="fa-fw" />
+                <font-awesome icon="eye-slash" class="fa-fw" />
               </button>
 
               <button
@@ -91,7 +91,7 @@
                 title="Check Visibility"
                 v-if="contactFromDid?.did !== activeDid"
               >
-                <fa icon="rotate" class="fa-fw" />
+                <font-awesome icon="rotate" class="fa-fw" />
               </button>
             </div>
 
@@ -101,12 +101,12 @@
               v-if="contactFromDid?.did !== activeDid"
               title="Registration"
             >
-              <fa
+              <font-awesome
                 v-if="contactFromDid?.registered"
                 icon="person-circle-check"
                 class="fa-fw"
               />
-              <fa v-else icon="person-circle-question" class="fa-fw" />
+              <font-awesome v-else icon="person-circle-question" class="fa-fw" />
             </button>
           </div>
 
@@ -115,7 +115,7 @@
             class="text-sm uppercase bg-gradient-to-b from-rose-500 to-rose-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-6 mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
             title="Delete"
           >
-            <fa icon="trash-can" class="fa-fw" />
+            <font-awesome icon="trash-can" class="fa-fw" />
           </button>
         </div>
         <div v-if="!contactFromDid?.profileImageUrl">
@@ -164,7 +164,7 @@
       class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
       v-if="isLoading"
     >
-      <fa icon="spinner" class="fa-spin-pulse"></fa>
+      <font-awesome icon="spinner" class="fa-spin-pulse"></font-awesome>
     </div>
     <!-- Results List -->
     <div v-if="claims.length > 0" class="mt-4">
@@ -194,7 +194,7 @@
             </span>
             <span class="col-span-1">
               <a @click="onClickLoadClaim(claim.id)" class="cursor-pointer">
-                <fa icon="file-lines" class="pl-2 pt-1 text-blue-500" />
+                <font-awesome icon="file-lines" class="pl-2 pt-1 text-blue-500" />
               </a>
             </span>
           </div>

src/views/DiscoverView.vue

@@ -28,7 +28,7 @@
         class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
         @click="searchSelected()"
       >
-        <fa icon="magnifying-glass" class="fa-fw"></fa>
+        <font-awesome icon="magnifying-glass" class="fa-fw"></font-awesome>
       </button>
     </div>
 
@@ -152,7 +152,7 @@
           class="ml-2 mt-2 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
           @click="$router.push({ name: 'search-area' })"
         >
-          <fa icon="location-dot" class="fa-fw" />
+          <font-awesome icon="location-dot" class="fa-fw" />
           Select a {{ searchBox ? "Different" : "" }} Location for Nearby Search
         </button>
       </div>
@@ -182,7 +182,7 @@
       class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
       v-if="isLoading"
     >
-      <fa icon="spinner" class="fa-spin-pulse"></fa>
+      <font-awesome icon="spinner" class="fa-spin-pulse"></font-awesome>
     </div>
     <div
       v-else-if="projects.length === 0 && userProfiles.length === 0"
@@ -225,7 +225,7 @@
               <div class="grow">
                 <h2 class="text-base font-semibold">{{ project.name }}</h2>
                 <div class="text-sm">
-                  <fa icon="user" class="fa-fw text-slate-400"></fa>
+                  <font-awesome icon="user" class="fa-fw text-slate-400"></font-awesome>
                   {{
                     didInfo(
                       project.issuerDid,
@@ -253,7 +253,7 @@
             >
               <div class="grow">
                 <div class="text-sm">
-                  <fa icon="user" class="fa-fw text-slate-400"></fa>
+                  <font-awesome icon="user" class="fa-fw text-slate-400"></font-awesome>
                   {{
                     didInfo(
                       profile.issuerDid,
@@ -273,7 +273,7 @@
                   v-if="isAnywhereActive && profile.locLat && profile.locLon"
                   class="mt-1 text-xs text-slate-500"
                 >
-                  <fa icon="location-dot" class="fa-fw"></fa>
+                  <font-awesome icon="location-dot" class="fa-fw"></font-awesome>
                   {{
                     (profile.locLat > 0 ? "North" : "South") +
                     " in " +

src/views/GiftedDetailsView.vue

@@ -13,7 +13,7 @@
         class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         @click="cancelBack()"
       >
-        <fa icon="chevron-left" class="fa-fw"></fa>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
     </div>
 
@@ -59,7 +59,7 @@
         class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
         @click="amountInput === '0' ? null : decrement()"
       >
-        <fa icon="chevron-left" />
+        <font-awesome icon="chevron-left" />
       </div>
       <input
         type="number"
@@ -70,7 +70,7 @@
         class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
         @click="increment()"
       >
-        <fa icon="chevron-right" />
+        <font-awesome icon="chevron-right" />
       </div>
     </div>
 
@@ -79,14 +79,14 @@
         <a :href="imageUrl" target="_blank">
           <img :src="imageUrl" class="h-24 rounded-xl" />
         </a>
-        <fa
+        <font-awesome
           icon="trash-can"
           @click="confirmDeleteImage"
           class="text-red-500 fa-fw ml-8 mt-10"
         />
       </span>
       <span v-else>
-        <fa
+        <font-awesome
           icon="camera"
           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-2 py-2 rounded-md"
           @click="openImageDialog"
@@ -105,7 +105,7 @@
             class="h-6 w-6 mr-2"
             v-model="providedByGiver"
           />
-          <fa
+          <font-awesome
             v-else
             icon="square"
             class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
@@ -117,7 +117,7 @@
                 : "No named individual gave."
             }}
           </label>
-          <fa
+          <font-awesome
             v-if="!giverDid || providedByProject"
             icon="info-circle"
             class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
@@ -132,7 +132,7 @@
             class="h-6 w-6 mr-2"
             v-model="providedByProject"
           />
-          <fa
+          <font-awesome
             v-else
             icon="square"
             class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
@@ -144,7 +144,7 @@
                 : "This was not provided by a project."
             }}
           </label>
-          <fa
+          <font-awesome
             v-if="!providerProjectId || providedByGiver"
             icon="info-circle"
             class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
@@ -154,7 +154,7 @@
       </div>
 
       <div class="flex-shrink flex justify-center items-center">
-        <fa icon="arrow-right" class="fa-fw h-7" />
+        <font-awesome icon="arrow-right" class="fa-fw h-7" />
       </div>
 
       <!-- Third Column for Recipient -->
@@ -166,7 +166,7 @@
             class="h-6 w-6 mr-2"
             v-model="givenToRecipient"
           />
-          <fa
+          <font-awesome
             v-else
             icon="square"
             class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
@@ -178,7 +178,7 @@
                 : "No individual benefitted."
             }}
           </label>
-          <fa
+          <font-awesome
             v-if="!recipientDid || givenToProject"
             icon="info-circle"
             class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
@@ -193,7 +193,7 @@
             class="h-6 w-6 mr-2"
             v-model="givenToProject"
           />
-          <fa
+          <font-awesome
             v-else
             icon="square"
             class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
@@ -205,7 +205,7 @@
                 : "No project benefitted."
             }}
           </label>
-          <fa
+          <font-awesome
             v-if="!fulfillsProjectId || givenToRecipient"
             icon="info-circle"
             class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
@@ -236,7 +236,7 @@
 
     <p class="text-center mb-2 mt-6 italic">
       Sign & Send to publish to the world
-      <fa
+      <font-awesome
         icon="circle-info"
         class="pl-2 text-blue-500 cursor-pointer"
         @click="explainData()"

src/views/HelpNotificationTypesView.vue

@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </h1>
       </div>
 

src/views/HelpNotificationsView.vue

@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </h1>
       </div>
 
@@ -140,7 +140,7 @@
           class="text-blue-500"
           target="_blank"
         >
-          here <fa icon="arrow-up-right-from-square" class="fa-fw" />
+          here <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
         </a>
       </div>
 
@@ -186,7 +186,7 @@
             class="text-blue-500"
             target="_blank"
           >
-            here <fa icon="arrow-up-right-from-square" class="fa-fw" />
+            here <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
           </a>
         </div>
       </div>
@@ -199,7 +199,7 @@
         <p>
           Of course, you'll want to back up all your data first -- all seeds as
           well as the contacts & settings -- on the Profile
-          <fa icon="circle-user" /> page.
+          <font-awesome icon="circle-user" /> page.
         </p>
         <p>
           Here are instructions to uninstall the app and clear out caches and storage.

src/views/HelpOnboardingView.vue

@@ -19,13 +19,13 @@
         :to="{ name: 'invite-one' }"
         class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
       >
-        <fa icon="envelope-open-text" class="fa-fw text-xl"
+        <font-awesome icon="envelope-open-text" class="fa-fw text-xl"
       /></router-link>
     </p>
     <p>Then watch that page to see when they accept their invite.</p>
     <p>
-      (That page is also reachable from the Contacts <fa icon="users" /> page
-      though the invitation <fa icon="envelope-open-text" /> icon.)
+      (That page is also reachable from the Contacts <font-awesome icon="users" /> page
+      though the invitation <font-awesome icon="envelope-open-text" /> icon.)
     </p>
 
     <h1 class="mt-4 font-bold text-xl">Next Steps</h1>
@@ -35,7 +35,7 @@
       <h1 class="font-bold text-xl">Without a backup, you can lose data.</h1>
       <div>
         <p>
-          Exporting backups (from the Account <fa icon="circle-user" /> screen)
+          Exporting backups (from the Account <font-awesome icon="circle-user" /> screen)
           is important for the case where they lose their device. This is
           especially true for the Identifier Seed: that is theirs and and theirs
           alone, and currently nobody else can recover it if they lose it. The
@@ -54,7 +54,7 @@
       <h1 class="font-bold text-xl">Add Contact & Register</h1>
       <p>
         You share even more information such as your picture and name when
-        you share with your QR code at these links: <fa icon="qrcode" />
+        you share with your QR code at these links: <font-awesome icon="qrcode" />
       </p>
       <p>
         Scanning
@@ -70,14 +70,14 @@
         </p>
         <p>
           2) Scan their QR, or have them tap on it to copy their info and send it to you.
-          Then you can add them to your Contacts <fa icon="users" />
+          Then you can add them to your Contacts <font-awesome icon="users" />
         </p>
         <p>
-          3) You can register them at their info page <fa icon="circle-info" />
-          and click on the register button <fa icon="person-circle-question" />
+          3) You can register them at their info page <font-awesome icon="circle-info" />
+          and click on the register button <font-awesome icon="person-circle-question" />
         </p>
         <p>
-          4) Add yourself to their Contacts <fa icon="users" />
+          4) Add yourself to their Contacts <font-awesome icon="users" />
         </p>
       </div>
 
@@ -94,7 +94,7 @@
       <h1 class="font-bold text-xl">Enable Notifications</h1>
       <div>
         <p>
-          Enable notifications from the Account page <fa icon="circle-user" />.
+          Enable notifications from the Account page <font-awesome icon="circle-user" />.
           Those notifications might show up on the device depending on your settings.
           For the most reliable habits, set an alarm or do some other ritual to record gratitude every day.
         </p>

src/views/HelpView.vue

@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="fa-fw" />
         </h1>
       </div>
 
@@ -191,7 +191,7 @@
       <h2 class="text-xl font-semibold">How do I get started?</h2>
       <p>
         Someone -- like the person who told you about this app -- needs to register you
-        on the Contacts <fa icon="users" class="fa-fw" /> page.
+        on the Contacts <font-awesome icon="users" class="fa-fw" /> page.
         If you heard about this from our outreach, feel free to contact us (below) for a chat.
         After someone registers you, you can register others.
       </p>
@@ -219,7 +219,7 @@
       </p>
       <p>
         If they are not nearby to scan QR codes, you each can tap on the QR code
-        and paste it into the text box on the Contacts <fa icon="users" class="fa-fw" /> page.
+        and paste it into the text box on the Contacts <font-awesome icon="users" class="fa-fw" /> page.
       </p>
 
       <h2 class="text-xl font-semibold">
@@ -244,7 +244,7 @@
         </h2>
         <ul class="list-disc list-outside ml-4">
           <li>
-            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page.
+            Go to Your Identity <font-awesome icon="circle-user" class="fa-fw" /> page.
           </li>
           <li>
             Click on "Backup Identifier Seed" and follow the instructions.
@@ -260,7 +260,7 @@
         </h2>
         <ul class="list-disc list-outside ml-4">
           <li>
-            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page.
+            Go to Your Identity <font-awesome icon="circle-user" class="fa-fw" /> page.
           </li>
           <li>
             Click on "Download Settings...". That will save a file to your
@@ -274,7 +274,7 @@
         </h2>
         <ul class="list-disc list-outside ml-4">
           <li>
-            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page,
+            Go to Your Identity <font-awesome icon="circle-user" class="fa-fw" /> page,
             tap on your image, and save it.
           </li>
         </ul>
@@ -315,7 +315,7 @@
         </h2>
         <ul class="list-disc list-outside ml-4">
           <li>
-            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page,
+            Go to Your Identity <font-awesome icon="circle-user" class="fa-fw" /> page,
             click Advanced, and follow the instructions for the Contacts & Settings Database "Import".
             Beware that this will erase your existing contact & settings.
           </li>
@@ -384,7 +384,7 @@
       </h2>
       <p>
         There is an "Advanced" section at the bottom of the Profile
-        <fa icon="circle-user" /> page.
+        <font-awesome icon="circle-user" /> page.
       </p>
       <p>
         There is even more functionality in a mobile app (and more
@@ -402,8 +402,8 @@
         because they have not given you permission to see their information. Ask
         them to add you to their contact list, and ask specifically to make sure
         the eye next to your name is open like this
-        <fa icon="eye" class="fa-fw" /> and not closed like this
-        <fa icon="eye-slash" class="fa-fw" />.
+        <font-awesome icon="eye" class="fa-fw" /> and not closed like this
+        <font-awesome icon="eye-slash" class="fa-fw" />.
       </p>
       <p>
         Sometimes the reason you don't see something is because the search
@@ -444,7 +444,7 @@
         </li>
         <li>
           There may be a problem with your identity. Go to the Identity
-          <fa icon="circle-user" class="fa-fw" /> page, then "Advanced", and "Switch Identifier"
+          <font-awesome icon="circle-user" class="fa-fw" /> page, then "Advanced", and "Switch Identifier"
           and you may see helpful info there. If it shows a problem, try adding your identifier again.
         </li>
         <li>
@@ -505,7 +505,7 @@
         <ul class="list-disc list-outside ml-4">
           <li>
             If using notifications, a server stores push token data. That can be revoked at any time
-            by disabling notifications on the Profile <fa icon="circle-user" class="fa-fw" /> page.
+            by disabling notifications on the Profile <font-awesome icon="circle-user" class="fa-fw" /> page.
           </li>
           <li>
             If sending images, a server stores them, too. They can be removed by editing the claim
@@ -538,8 +538,8 @@
           class="text-blue-500 ml-2"
         >
           bc1q90v4ted6cpt63tjfh2lvd5xzfc67sd4g9w8xma
-          <fa v-show="!showDidCopy" icon="copy" class="text-sm text-slate-400 fa-fw" />
-          <fa v-show="showDidCopy" icon="circle-check" class="text-sm text-green-500 fa-fw"/>
+          <font-awesome v-show="!showDidCopy" icon="copy" class="text-sm text-slate-400 fa-fw" />
+          <font-awesome v-show="showDidCopy" icon="circle-check" class="text-sm text-green-500 fa-fw"/>
         </button>
         You can donate online via
         <a href="https://www.patreon.com/TimeSafari" target="_blank" class="text-blue-500">Patreon here</a>.

src/views/HomeView.vue

@@ -28,7 +28,7 @@
               width="30"
               style="display: inline; margin: 0 5px; vertical-align: middle"
             />and then "Add to Home Screen"
-            <fa icon="square-plus" title="Apple 'Add' icon" />
+            <font-awesome icon="square-plus" title="Apple 'Add' icon" />
             and go click on that new app.
           </span>
           <span
@@ -36,10 +36,7 @@
           >
             You should see a prompt to install, or you can click on the
             top-right dots
-            <fa
-              icon="ellipsis-vertical"
-              title="vertical ellipsis"
-              class="fa-fw"
+            <font-awesome icon="ellipsis-vertical" title="vertical ellipsis" />
             />
             and then "Install"<img
               src="../assets/help/install-android-chrome.png"
@@ -73,7 +70,7 @@
     <div class="mb-8">
       <div v-if="isCreatingIdentifier">
         <p class="text-slate-500 text-center italic mt-4 mb-4">
-          <fa icon="spinner" class="fa-spin-pulse" />
+          <font-awesome icon="spinner" class="fa-spin-pulse" />
           Loading&hellip;
         </p>
       </div>
@@ -119,7 +116,7 @@
                 @click="openGiftedPrompts()"
                 class="ml-2 block text-xs text-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 rounded-md"
               >
-                <fa icon="lightbulb" class="fa-fw" />
+                <font-awesome icon="lightbulb" class="fa-fw" />
               </button>
             </div>
 
@@ -181,7 +178,7 @@
         class="absolute right-6 bottom-0 transform translate-y-1/2 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full"
         @click="openDialog()"
       >
-        <fa icon="plus" class="fa-fw" />
+        <font-awesome icon="plus" class="fa-fw" />
       </button>
     </div>
 
@@ -192,12 +189,12 @@
           Latest Activity
           <button @click="openFeedFilters()">
             <span class="text-xs text-white">
-              <fa
+              <font-awesome
                 v-if="resultsAreFiltered()"
                 icon="filter"
                 class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
               />
-              <fa
+              <font-awesome
                 v-else
                 icon="filter"
                 class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
@@ -265,7 +262,7 @@
             <div class="grid grid-cols-12">
               <span class="pt-1 col-span-1 justify-self-start">
                 <span>
-                  <fa
+                  <font-awesome
                     icon="circle-user"
                     :class="
                       computeKnownPersonIconStyleClassNames(
@@ -274,7 +271,7 @@
                     "
                     @click="toastUser('This involves your contacts.')"
                   />
-                  <fa
+                  <font-awesome
                     icon="gift"
                     class="pl-3 text-slate-500"
                     @click="toastUser('This is a gift.')"
@@ -295,7 +292,7 @@
                     :profile-image-url="record.giver.profileImageUrl"
                     class="inline-block align-middle border border-slate-300 rounded-md mr-1"
                   />
-                  <fa
+                  <font-awesome
                     v-if="
                       record.agentDid !== activeDid &&
                       record.recipientDid !== activeDid &&
@@ -319,7 +316,7 @@
                   {{ giveDescription(record) }}
                 </span>
                 <a @click="onClickLoadClaim(record.jwtId)">
-                  <fa
+                  <font-awesome
                     icon="file-lines"
                     class="pl-2 text-slate-500 cursor-pointer"
                   />
@@ -333,7 +330,7 @@
                     encodeURIComponent(record.fulfillsPlanHandleId)
                   "
                 >
-                  <fa icon="hammer" class="text-blue-500" />
+                  <font-awesome icon="hammer" class="text-blue-500" />
                 </router-link>
                 <router-link
                   v-if="record.providerPlanHandleId"
@@ -342,7 +339,7 @@
                     encodeURIComponent(record.providerPlanHandleId)
                   "
                 >
-                  <fa icon="hammer" class="text-blue-500" />
+                  <font-awesome icon="hammer" class="text-blue-500" />
                 </router-link>
               </span>
             </div>
@@ -364,7 +361,7 @@
       </InfiniteScroll>
       <div v-if="isFeedLoading">
         <p class="text-slate-500 text-center italic mt-4 mb-4">
-          <fa icon="spinner" class="fa-spin-pulse" /> Loading&hellip;
+          <font-awesome icon="spinner" class="fa-spin-pulse" /> Loading&hellip;
         </p>
       </div>
       <div v-if="!isFeedLoading && feedData.length === 0">

src/views/IdentitySwitcherView.vue

@@ -8,7 +8,7 @@
         <router-link
           :to="{ name: 'account' }"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left" class="fa-fw"></fa>
+          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </router-link>
 
         Switch Identity
@@ -22,7 +22,7 @@
       v-if="activeDid && !activeDidInIdentities"
       class="block bg-slate-100 rounded-md flex items-center px-4 py-3 mb-4"
     >
-      <fa icon="circle-check" class="fa-fw text-red-600 text-xl mr-3"></fa>
+      <font-awesome icon="circle-check" class="fa-fw text-red-600 text-xl mr-3"></font-awesome>
       <div class="text-sm text-slate-500">
         <div class="overflow-hidden truncate">
           <b>ID:</b> <code>{{ activeDid }}</code>
@@ -45,12 +45,12 @@
             class="flex flex-grow items-center bg-slate-100 rounded-md px-4 py-3 mb-2 truncate cursor-pointer"
             @click="switchAccount(ident.did)"
           >
-            <fa
+            <font-awesome
               v-if="ident.did === activeDid"
               icon="circle-check"
               class="fa-fw text-blue-600 text-xl mr-3"
             />
-            <fa
+            <font-awesome
               v-else
               icon="circle"
               class="fa-fw text-slate-400 text-xl mr-3"
@@ -62,13 +62,13 @@
             </span>
           </div>
           <div>
-            <fa
+            <font-awesome
               v-if="ident.did === activeDid"
               icon="trash-can"
               class="text-slate-400 text-xl ml-2 mr-2 cursor-pointer"
               @click="notifyCannotDelete()"
             />
-            <fa
+            <font-awesome
               v-else
               icon="trash-can"
               class="text-red-600 text-xl ml-2 mr-2 cursor-pointer"

src/views/ImportAccountView.vue

@@ -8,7 +8,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left"></fa>
+          <font-awesome icon="chevron-left"></font-awesome>
         </button>
         Import Existing Identifier
       </h1>

src/views/ImportDerivedAccountView.vue

@@ -8,7 +8,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left"></fa>
+          <font-awesome icon="chevron-left"></font-awesome>
         </button>
         Derive from Existing Identity
       </h1>
@@ -30,16 +30,16 @@
           :key="dids[0]"
           @click="switchAccount(dids[0])"
         >
-          <fa
+          <font-awesome
             v-if="dids[0] == selectedArrayFirstDid"
             icon="circle"
             class="fa-fw text-blue-500 text-xl mr-3"
-          ></fa>
-          <fa
+          ></font-awesome>
+          <font-awesome
             v-else
             icon="circle"
             class="fa-fw text-slate-400 text-xl mr-3"
-          ></fa>
+          ></font-awesome>
           <span class="overflow-hidden">
             <div class="text-sm text-slate-500 truncate">
               <code>{{ dids.join(",") }}</code>

src/views/InviteOneAcceptView.vue

@@ -5,7 +5,7 @@
       v-if="checkingInvite"
       class="text-lg text-center font-light relative px-7"
     >
-      <fa icon="spinner" class="fa-spin-pulse" />
+      <font-awesome icon="spinner" class="fa-spin-pulse" />
     </div>
     <div v-else class="text-center mt-4">
       <p>That invitation did not work.</p>

src/views/InviteOneView.vue

@@ -9,7 +9,7 @@
         class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         @click="$router.back()"
       >
-        <fa icon="chevron-left" class="fa-fw"></fa>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
     </div>
 
@@ -40,7 +40,7 @@
       class="fixed right-6 top-12 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full"
       @click="createInvite()"
     >
-      <fa icon="plus" class="fa-fw"></fa>
+      <font-awesome icon="plus" class="fa-fw"></font-awesome>
     </button>
 
     <InviteDialog ref="inviteDialog" />
@@ -106,7 +106,7 @@
               <br />
               {{ getTruncatedRedeemedBy(invite.redeemedBy) }}
               <br />
-              <fa
+              <font-awesome
                 v-if="invite.redeemedBy && !contactsRedeemed[invite.redeemedBy]"
                 icon="plus"
                 class="bg-green-600 text-white px-1 py-1 rounded-full cursor-pointer"
@@ -114,7 +114,7 @@
               />
             </td>
             <td>
-              <fa
+              <font-awesome
                 icon="trash-can"
                 class="text-red-600 text-xl ml-2 mr-2 cursor-pointer"
                 @click="deleteInvite(invite.inviteIdentifier, invite.notes)"

src/views/NewActivityView.vue

@@ -6,7 +6,7 @@
     <div id="ViewBreadcrumb" class="mb-8">
       <h1 class="text-lg text-center font-light relative px-7">
         <!-- Back -->
-        <fa
+        <font-awesome
           icon="chevron-left"
           @click="$router.back()"
           class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
@@ -25,7 +25,7 @@
         <span class="text-lg font-medium ml-4"
           >New Offer{{ newOffersToUser.length === 1 ? "" : "s" }} To You</span
         >
-        <fa
+        <font-awesome
           v-if="newOffersToUser.length > 0"
           :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
           class="cursor-pointer ml-4 mr-4 text-lg"
@@ -59,7 +59,7 @@
             :to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
             class="text-blue-500"
           >
-            <fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
+            <font-awesome icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
           </router-link>
           <!-- New line that appears on hover or when the offer is clicked -->
           <div
@@ -87,7 +87,7 @@
           >New Offer{{ newOffersToUserProjects.length === 1 ? "" : "s" }} To
           Your Projects</span
         >
-        <fa
+        <font-awesome
           v-if="newOffersToUserProjects.length > 0"
           :icon="
             showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
@@ -125,7 +125,7 @@
             :to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
             class="text-blue-500"
           >
-            <fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
+            <font-awesome icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
           </router-link>
           <!-- New line that appears on hover -->
           <div

src/views/NewEditAccountView.vue

@@ -8,7 +8,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </button>
         Edit Identity
       </h1>

src/views/NewEditProjectView.vue

@@ -11,7 +11,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </button>
         Edit Project Idea
       </h1>
@@ -36,14 +36,14 @@
         <a :href="imageUrl" target="_blank" class="text-blue-500 ml-4">
           <img :src="imageUrl" class="h-24 rounded-xl" />
         </a>
-        <fa
+        <font-awesome
           icon="trash-can"
           @click="confirmDeleteImage"
           class="text-red-500 fa-fw ml-8 mt-10"
         />
       </span>
       <span v-else>
-        <fa
+        <font-awesome
           icon="camera"
           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-2 py-2 rounded-md"
           @click="openImageDialog"
@@ -181,7 +181,7 @@
       <div class="flex" @click="sendToTrustroots = !sendToTrustroots">
         <input type="checkbox" class="mr-2" v-model="sendToTrustroots" />
         <label>Send to Trustroots</label>
-        <fa
+        <font-awesome
           icon="circle-info"
           class="text-blue-500 ml-2 cursor-pointer"
           @click.stop="showNostrPartnerInfo"
@@ -191,7 +191,7 @@
       <div class="flex" @click="sendToTripHopping = !sendToTripHopping">
         <input type="checkbox" class="mr-2" v-model="sendToTripHopping" />
         <label>Send to TripHopping</label>
-        <fa icon="circle-info" class="text-blue-500 ml-2 cursor-pointer" @click.stop="showNostrPartnerInfo" />
+        <font-awesome icon="circle-info" class="text-blue-500 ml-2 cursor-pointer" @click.stop="showNostrPartnerInfo" />
       </div>
       -->
     </div>
@@ -230,7 +230,10 @@ import "leaflet/dist/leaflet.css";
 import { AxiosError, AxiosRequestHeaders } from "axios";
 import { DateTime } from "luxon";
 import { finalizeEvent } from "nostr-tools/lib/esm/index.js";
-import { accountFromExtendedKey, extendedKeysFromSeedWords } from "nostr-tools/lib/esm/nip06.js";
+import {
+  accountFromExtendedKey,
+  extendedKeysFromSeedWords,
+} from "nostr-tools/lib/esm/nip06.js";
 import { Component, Vue } from "vue-facing-decorator";
 import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
 import { RouteLocationNormalizedLoaded, Router } from "vue-router";
@@ -243,17 +246,21 @@ import {
   NotificationIface,
 } from "../constants/app";
 import { retrieveSettingsForActiveAccount } from "../db/index";
+import { PlanVerifiableCredential } from "../interfaces";
 import {
   createEndorserJwtVcFromClaim,
   getHeaders,
-  PlanVerifiableCredential,
 } from "../libs/endorserServer";
 import {
   retrieveAccountCount,
   retrieveFullyDecryptedAccount,
 } from "../libs/util";
-import { EventTemplate, UnsignedEvent, VerifiedEvent } from "nostr-tools/lib/esm/index.js";
-import { finalizeEvent as nostrToolsFinalizeEvent, serializeEvent } from "nostr-tools/lib/esm/index.js";
+import {
+  EventTemplate,
+  UnsignedEvent,
+  VerifiedEvent,
+} from "nostr-tools/lib/esm/index.js";
+import { serializeEvent } from "nostr-tools/lib/esm/index.js";
 
 @Component({
   components: { ImageMethodDialog, LMap, LMarker, LTileLayer, QuickNav },
@@ -710,8 +717,7 @@ export default class NewEditProjectView extends Vue {
       const endorserPartnerUrl = partnerServer + "/api/partner/link";
       const timeSafariUrl = window.location.origin + "/claim/" + jwtId;
       const content = this.fullClaim.name + " - see " + timeSafariUrl;
-      const publicKeyHex =
-        accountFromExtendedKey(publicExtendedKey).publicKey;
+      const publicKeyHex = accountFromExtendedKey(publicExtendedKey).publicKey;
       const unsignedPayload: UnsignedEvent = {
         // why doesn't "...signedPayload" work?
         kind: signedPayload.kind,

src/views/NewIdentifierView.vue

@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </h1>
       </div>
 
@@ -25,16 +25,16 @@
       <div />
       <div v-if="loading">
         <span class="text-xl">Creating...&nbsp;</span>
-        <fa
+        <font-awesome
           icon="spinner"
           class="fa-spin fa-spin-pulse"
           color="green"
           size="128"
-        ></fa>
+        ></font-awesome>
       </div>
       <div v-else>
         <span class="text-xl">Created!</span>
-        <fa
+        <font-awesome
           icon="burst"
           class="fa-beat px-12"
           color="green"
@@ -44,7 +44,7 @@
             --fa-animation-iteration-count: 1;
             --fa-beat-scale: 6;
           "
-        ></fa>
+        ></font-awesome>
       </div>
       <div />
     </div>

src/views/OfferDetailsView.vue

@@ -13,7 +13,7 @@
         class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         @click="cancelBack()"
       >
-        <fa icon="chevron-left" class="fa-fw"></fa>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
     </div>
 
@@ -49,7 +49,7 @@
         class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
         @click="amountInput === '0' ? null : decrement()"
       >
-        <fa icon="chevron-left" />
+        <font-awesome icon="chevron-left" />
       </div>
       <input
         type="number"
@@ -61,7 +61,7 @@
         class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
         @click="increment()"
       >
-        <fa icon="chevron-right" />
+        <font-awesome icon="chevron-right" />
       </div>
     </div>
 
@@ -98,7 +98,7 @@
         class="h-6 w-6 mr-2"
         v-model="offeredToProject"
       />
-      <fa
+      <font-awesome
         v-else
         icon="square"
         class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
@@ -120,7 +120,7 @@
         class="h-6 w-6 mr-2"
         v-model="offeredToRecipient"
       />
-      <fa
+      <font-awesome
         v-else
         icon="square"
         class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
@@ -151,7 +151,7 @@
 
     <p class="text-center mb-2 mt-6 italic">
       Sign & Send to publish to the world
-      <fa
+      <font-awesome
         icon="circle-info"
         class="pl-2 text-blue-500 cursor-pointer"
         @click="explainData()"

src/views/OnboardMeetingListView.vue

@@ -10,7 +10,7 @@
 
     <!-- Loading State -->
     <div v-if="isLoading" class="flex justify-center items-center py-8">
-      <fa icon="spinner" class="fa-spin-pulse" />
+      <font-awesome icon="spinner" class="fa-spin-pulse" />
     </div>
 
     <div v-else-if="attendingMeeting">
@@ -26,7 +26,7 @@
             class="text-red-600 hover:text-red-700 p-2"
             title="Leave Meeting"
           >
-            <fa icon="right-from-bracket" />
+            <font-awesome icon="right-from-bracket" />
           </button>
         </div>
       </div>

src/views/OnboardMeetingMembersView.vue

@@ -13,7 +13,7 @@
       class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
       v-if="isLoading"
     >
-      <fa icon="spinner" class="fa-spin-pulse"></fa>
+      <font-awesome icon="spinner" class="fa-spin-pulse"></font-awesome>
     </div>
 
     <!-- Error State -->

src/views/OnboardMeetingSetupView.vue

@@ -21,7 +21,7 @@
             class="mb-4 text-blue-600 hover:text-blue-800 transition-colors duration-200 ml-2"
             title="Edit Meeting"
           >
-            <fa icon="pen" class="fa-fw" />
+            <font-awesome icon="pen" class="fa-fw" />
             <span class="sr-only">{{
               isInCreateMode() ? "Create Meeting" : "Edit Meeting"
             }}</span>
@@ -34,7 +34,7 @@
           :class="{ 'opacity-50 cursor-not-allowed': isDeleting }"
           title="Delete Meeting"
         >
-          <fa icon="trash-can" class="fa-fw" />
+          <font-awesome icon="trash-can" class="fa-fw" />
           <span class="sr-only">{{
             isDeleting ? "Deleting..." : "Delete Meeting"
           }}</span>
@@ -204,7 +204,7 @@
         class="inline-block text-blue-600"
         target="_blank"
       >
-        &bull; Open shortcut page for members <fa icon="external-link" />
+        &bull; Open shortcut page for members <font-awesome icon="external-link" />
       </router-link>
 
       <MembersList
@@ -217,7 +217,7 @@
 
     <div v-else-if="isLoading">
       <div class="flex justify-center items-center h-full">
-        <fa icon="spinner" class="fa-spin-pulse" />
+        <font-awesome icon="spinner" class="fa-spin-pulse" />
       </div>
     </div>
   </section>

src/views/ProjectViewView.vue

@@ -13,7 +13,7 @@
             @click="$router.go(-1)"
             class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           >
-            <fa icon="chevron-left" class="fa-fw"></fa>
+            <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
           </button>
           Project Idea
         </h1>
@@ -25,7 +25,7 @@
             title="Edit"
             data-testId="editClaimButton"
           >
-            <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
+            <font-awesome icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
           </button>
         </h2>
       </div>
@@ -48,7 +48,7 @@
           <div class="overflow-hidden">
             <div class="text-sm mb-3">
               <div class="truncate">
-                <fa icon="user" class="fa-fw text-slate-400"></fa>
+                <font-awesome icon="user" class="fa-fw text-slate-400"></font-awesome>
                 {{ issuerInfoObject?.displayName }}
                 <span v-if="!serverUtil.isEmptyOrHiddenDid(issuer)">
                   <a
@@ -56,11 +56,11 @@
                     target="_blank"
                     class="text-blue-500"
                   >
-                    <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                    <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
                   </a>
                 </span>
                 <span v-else-if="serverUtil.isHiddenDid(issuer)">
-                  <fa
+                  <font-awesome
                     icon="info-circle"
                     class="fa-fw text-blue-500 cursor-pointer"
                     @click="openHiddenDidDialog()"
@@ -68,35 +68,35 @@
                 </span>
               </div>
               <div v-if="startTime">
-                <fa icon="calendar" class="fa-fw text-slate-400"></fa>
+                <font-awesome icon="calendar" class="fa-fw text-slate-400"></font-awesome>
                 Starts {{ startTime }}
               </div>
               <div v-if="endTime">
-                <fa icon="calendar" class="fa-fw text-slate-400"></fa>
+                <font-awesome icon="calendar" class="fa-fw text-slate-400"></font-awesome>
                 Ends {{ endTime }}
               </div>
               <div v-if="latitude || longitude">
-                <fa icon="location-dot" class="fa-fw text-slate-400"></fa>
+                <font-awesome icon="location-dot" class="fa-fw text-slate-400"></font-awesome>
                 <a
                   :href="getOpenStreetMapUrl()"
                   target="_blank"
                   class="underline text-blue-500"
                   >Map View
-                  <fa
+                  <font-awesome
                     icon="arrow-up-right-from-square"
                     class="fa-fw text-blue-500"
                   />
                 </a>
               </div>
               <div v-if="url">
-                <fa icon="globe" class="fa-fw text-slate-400"></fa>
+                <font-awesome icon="globe" class="fa-fw text-slate-400"></font-awesome>
                 <a
                   :href="addScheme(url)"
                   target="_blank"
                   class="underline text-blue-500"
                 >
                   {{ domainForWebsite(this.url) }}
-                  <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                  <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
                 </a>
               </div>
             </div>
@@ -124,7 +124,7 @@
         </div>
 
         <a @click="onClickLoadClaim(projectId)" class="cursor-pointer">
-          <fa icon="file-lines" class="pl-2 pt-1 text-blue-500" />
+          <font-awesome icon="file-lines" class="pl-2 pt-1 text-blue-500" />
         </a>
       </div>
     </div>
@@ -181,7 +181,7 @@
         class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5 mt-2"
       >
         <li @click="openGiftDialogToProject({ name: 'you', did: activeDid })">
-          <fa icon="hand" class="fa-fw text-blue-500 text-5xl cursor-pointer" />
+          <font-awesome icon="hand" class="fa-fw text-blue-500 text-5xl cursor-pointer" />
           <h3
             class="mt-5 text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
           >
@@ -266,7 +266,7 @@
           >
             <div class="flex justify-between gap-4">
               <span>
-                <fa icon="user" class="fa-fw text-slate-400"></fa>
+                <font-awesome icon="user" class="fa-fw text-slate-400"></font-awesome>
                 {{
                   serverUtil.didInfo(
                     offer.offeredByDid,
@@ -277,14 +277,14 @@
                 }}
               </span>
               <span v-if="offer.amount" class="whitespace-nowrap">
-                <fa
+                <font-awesome
                   :icon="libsUtil.iconForUnitCode(offer.unit)"
                   class="fa-fw text-slate-400"
                 />{{ offer.amount }}
               </span>
             </div>
             <div v-if="offer.objectDescription" class="text-slate-500">
-              <fa icon="comment" class="fa-fw text-slate-400" />
+              <font-awesome icon="comment" class="fa-fw text-slate-400" />
               {{ offer.objectDescription }}
             </div>
             <div class="flex justify-between">
@@ -292,13 +292,13 @@
                 @click="onClickLoadClaim(offer.jwtId as string)"
                 class="cursor-pointer"
               >
-                <fa icon="file-lines" class="pl-2 pt-1 text-blue-500" />
+                <font-awesome icon="file-lines" class="pl-2 pt-1 text-blue-500" />
               </a>
               <a
                 v-if="checkIsFulfillable(offer)"
                 @click="onClickFulfillGiveToOffer(offer)"
               >
-                <fa
+                <font-awesome
                   icon="hand-holding-heart"
                   class="text-blue-500 cursor-pointer"
                 />
@@ -340,7 +340,7 @@
           >
             <div class="flex justify-between gap-4">
               <span>
-                <fa icon="user" class="fa-fw text-slate-400" />
+                <font-awesome icon="user" class="fa-fw text-slate-400" />
                 {{
                   serverUtil.didInfo(
                     give.agentDid,
@@ -351,23 +351,23 @@
                 }}
               </span>
               <span v-if="give.amount" class="whitespace-nowrap">
-                <fa
+                <font-awesome
                   :icon="libsUtil.iconForUnitCode(give.unit)"
                   class="fa-fw text-slate-400"
                 />{{ give.amount }}
               </span>
             </div>
             <div class="text-slate-500">
-              <fa icon="calendar" class="fa-fw text-slate-400" />
+              <font-awesome icon="calendar" class="fa-fw text-slate-400" />
               {{ give.issuedAt?.substring(0, 10) }}
             </div>
             <div v-if="give.description" class="text-slate-500">
-              <fa icon="comment" class="fa-fw text-slate-400" />
+              <font-awesome icon="comment" class="fa-fw text-slate-400" />
               {{ give.description }}
             </div>
             <div class="flex justify-between">
               <a @click="onClickLoadClaim(give.jwtId)">
-                <fa icon="file-lines" class="text-blue-500 cursor-pointer" />
+                <font-awesome icon="file-lines" class="text-blue-500 cursor-pointer" />
               </a>
 
               <a
@@ -377,13 +377,13 @@
                 "
                 @click="deepCheckConfirmable(give)"
               >
-                <fa icon="circle-check" class="text-blue-500 cursor-pointer" />
+                <font-awesome icon="circle-check" class="text-blue-500 cursor-pointer" />
               </a>
               <a v-else-if="checkingConfirmationForJwtId === give.jwtId">
-                <fa icon="spinner" class="fa-spin-pulse" />
+                <font-awesome icon="spinner" class="fa-spin-pulse" />
               </a>
               <a v-else @click="shallowNotifyWhyCannotConfirm(give)">
-                <fa icon="circle-check" class="text-slate-500 cursor-pointer" />
+                <font-awesome icon="circle-check" class="text-slate-500 cursor-pointer" />
               </a>
             </div>
             <div v-if="give.fullClaim.image" class="flex justify-center">
@@ -440,23 +440,23 @@
                 }}
               </span>
               <span v-if="give.amount" class="whitespace-nowrap">
-                <fa
+                <font-awesome
                   :icon="libsUtil.iconForUnitCode(give.unit)"
                   class="fa-fw text-slate-400"
                 />{{ give.amount }}
               </span>
             </div>
             <div class="text-slate-500">
-              <fa icon="calendar" class="fa-fw text-slate-400" />
+              <font-awesome icon="calendar" class="fa-fw text-slate-400" />
               {{ give.issuedAt?.substring(0, 10) }}
             </div>
             <div v-if="give.description" class="text-slate-500">
-              <fa icon="comment" class="fa-fw text-slate-400" />
+              <font-awesome icon="comment" class="fa-fw text-slate-400" />
               {{ give.description }}
             </div>
             <div class="flex justify-between">
               <a @click="onClickLoadClaim(give.jwtId)">
-                <fa icon="file-lines" class="text-blue-500 cursor-pointer" />
+                <font-awesome icon="file-lines" class="text-blue-500 cursor-pointer" />
               </a>
 
               <a
@@ -466,13 +466,13 @@
                 "
                 @click="deepCheckConfirmable(give)"
               >
-                <fa icon="circle-check" class="text-blue-500 cursor-pointer" />
+                <font-awesome icon="circle-check" class="text-blue-500 cursor-pointer" />
               </a>
               <a v-else-if="checkingConfirmationForJwtId === give.jwtId">
-                <fa icon="spinner" class="fa-spin-pulse" />
+                <font-awesome icon="spinner" class="fa-spin-pulse" />
               </a>
               <a v-else @click="shallowNotifyWhyCannotConfirm(give)">
-                <fa icon="circle-check" class="text-slate-500 cursor-pointer" />
+                <font-awesome icon="circle-check" class="text-slate-500 cursor-pointer" />
               </a>
             </div>
             <div v-if="give.fullClaim.image" class="flex justify-center">

src/views/ProjectsView.vue

@@ -57,7 +57,7 @@
       <button
         class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
       >
-        <fa icon="magnifying-glass" class="fa-fw"></fa>
+        <font-awesome icon="magnifying-glass" class="fa-fw"></font-awesome>
       </button>
     </div>
     -->
@@ -68,7 +68,7 @@
       class="fixed right-6 top-24 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full"
       @click="onClickNewProject()"
     >
-      <fa icon="plus" class="fa-fw"></fa>
+      <font-awesome icon="plus" class="fa-fw"></font-awesome>
     </button>
 
     <!-- Loading Animation -->
@@ -76,7 +76,7 @@
       class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
       v-if="isLoading"
     >
-      <fa icon="spinner" class="fa-spin-pulse"></fa>
+      <font-awesome icon="spinner" class="fa-spin-pulse"></font-awesome>
     </div>
 
     <!-- Offer Results List -->
@@ -130,17 +130,17 @@
 
               <span class="text-sm">
                 <span v-if="offer.amount">
-                  <fa
+                  <font-awesome
                     :icon="libsUtil.iconForUnitCode(offer.unit)"
                     class="fa-fw text-slate-400"
                   />
 
                   <span v-if="offer.amountGiven >= offer.amount">
-                    <fa icon="check-circle" class="fa-fw text-green-500" />
+                    <font-awesome icon="check-circle" class="fa-fw text-green-500" />
                     All {{ offer.amount }} given
                   </span>
                   <span v-else>
-                    <fa
+                    <font-awesome
                       icon="triangle-exclamation"
                       class="fa-fw text-yellow-500"
                     />
@@ -162,7 +162,7 @@
                       </span>
                       <span v-else>
                         <!-- only show icon if there's not already a warning -->
-                        <fa
+                        <font-awesome
                           v-if="offer.amountGiven >= offer.amount"
                           icon="triangle-exclamation"
                           class="fa-fw text-yellow-300"
@@ -176,13 +176,13 @@
                 <span v-else>
                   <!-- Non-amount offer -->
                   <span v-if="offer.nonAmountGivenConfirmed">
-                    <fa icon="check-circle" class="fa-fw text-green-500" />
+                    <font-awesome icon="check-circle" class="fa-fw text-green-500" />
                     {{ offer.nonAmountGivenConfirmed }}
                     {{ offer.nonAmountGivenConfirmed == 1 ? "give" : "gives" }}
                     are confirmed.
                   </span>
                   <span v-else>
-                    <fa
+                    <font-awesome
                       icon="triangle-exclamation"
                       class="fa-fw text-yellow-500"
                     />
@@ -191,10 +191,10 @@
                 </span>
 
                 <a @click="onClickLoadClaim(offer.jwtId)">
-                  <fa
+                  <font-awesome
                     icon="file-lines"
                     class="pl-2 text-blue-500 cursor-pointer"
-                  ></fa>
+                  ></font-awesome>
                 </a>
               </span>
             </div>
@@ -209,7 +209,7 @@
         You have not announced any projects.
         <div v-if="isRegistered">
           Hit the big
-          <fa
+          <font-awesome
             icon="plus"
             class="bg-green-600 text-white px-1.5 py-1 rounded-full"
           />

src/views/QuickActionBvcBeginView.vue

@@ -10,7 +10,7 @@
         class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         @click="$router.back()"
       >
-        <fa icon="chevron-left" class="fa-fw"></fa>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
     </div>
 

src/views/QuickActionBvcEndView.vue

@@ -10,7 +10,7 @@
         class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         @click="$router.back()"
       >
-        <fa icon="chevron-left" class="fa-fw"></fa>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
     </div>
 
@@ -22,7 +22,7 @@
     <div>
       <h2 class="text-2xl m-2">Confirm</h2>
       <div v-if="loadingConfirms" class="flex justify-center">
-        <fa icon="spinner" class="fa-spin-pulse" />
+        <font-awesome icon="spinner" class="fa-spin-pulse" />
       </div>
       <div v-else-if="claimsToConfirm.length === 0">
         There are no claims yet today for you to confirm.
@@ -59,7 +59,7 @@
                 )
               }}
               <a @click="onClickLoadClaim(record.id)">
-                <fa
+                <font-awesome
                   icon="file-lines"
                   class="pl-2 text-blue-500 cursor-pointer"
                 />
@@ -78,7 +78,7 @@
         }}
         so if you expected but do not see details from someone then ask them to
         check that their activity is visible to you on their Contacts
-        <fa icon="users" class="text-slate-500" />
+        <font-awesome icon="users" class="text-slate-500" />
         page.
       </span>
     </div>

src/views/QuickActionBvcView.vue

@@ -10,7 +10,7 @@
         class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         @click="$router.back()"
       >
-        <fa icon="chevron-left" class="fa-fw"></fa>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
     </div>
 

src/views/RecentOffersToUserProjectsView.vue

@@ -6,7 +6,7 @@
     <div id="ViewBreadcrumb" class="mb-8">
       <h1 class="text-lg text-center font-light relative px-7">
         <!-- Back -->
-        <fa
+        <font-awesome
           icon="chevron-left"
           @click="$router.back()"
           class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
@@ -20,13 +20,13 @@
       <p class="mt-2">
         Maybe there are already some projects you can help on the
         <router-link to="/discover" class="text-blue-500">
-          Discover page <fa icon="search" />
+          Discover page <font-awesome icon="search" />
         </router-link>
       </p>
       <p class="mt-2">
         You can announce more of your own on
         <router-link to="/contacts" class="text-blue-500">
-          Your Ideas page <fa icon="hand" />
+          Your Ideas page <font-awesome icon="hand" />
         </router-link>
       </p>
     </div>
@@ -65,7 +65,7 @@
             :to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
             class="text-blue-500"
           >
-            <fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
+            <font-awesome icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
           </router-link>
         </li>
       </ul>

src/views/RecentOffersToUserView.vue

@@ -6,7 +6,7 @@
     <div id="ViewBreadcrumb" class="mb-8">
       <h1 class="text-lg text-center font-light relative px-7">
         <!-- Back -->
-        <fa
+        <font-awesome
           icon="chevron-left"
           @click="$router.back()"
           class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
@@ -20,7 +20,7 @@
       <p class="mt-2">
         You can start the cycle on the
         <router-link to="/contacts" class="text-blue-500">
-          Contacts page <fa icon="users" />
+          Contacts page <font-awesome icon="users" />
         </router-link>
         with an "Offer" directly to someone. Hopefully you'll find a common
         interest!
@@ -58,7 +58,7 @@
             :to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
             class="text-blue-500"
           >
-            <fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
+            <font-awesome icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
           </router-link>
         </li>
       </ul>

src/views/SearchAreaView.vue

@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </h1>
       </div>
 
@@ -35,7 +35,7 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="storeSearchBox"
       >
-        <fa icon="save" class="fa-fw" />
+        <font-awesome icon="save" class="fa-fw" />
         Store This Location for Nearby Search
       </button>
       <button
@@ -43,7 +43,7 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="forgetSearchBox"
       >
-        <fa icon="trash-can" class="fa-fw" />
+        <font-awesome icon="trash-can" class="fa-fw" />
         Delete Stored Location
       </button>
       <button
@@ -51,7 +51,7 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="resetLatLong"
       >
-        <fa icon="rotate" class="fa-fw" />
+        <font-awesome icon="rotate" class="fa-fw" />
         Reset To Original
       </button>
       <button
@@ -59,7 +59,7 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="isNewMarkerSet = false"
       >
-        <fa icon="eraser" class="fa-fw" />
+        <font-awesome icon="eraser" class="fa-fw" />
         Erase Marker
       </button>
       <div v-if="isNewMarkerSet">

src/views/SeedBackupView.vue

@@ -8,7 +8,7 @@
         class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         @click="$router.back()"
       >
-        <fa icon="chevron-left" class="fa-fw"></fa>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
     </div>
 
@@ -62,7 +62,7 @@
               )
             "
           >
-            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+            <font-awesome icon="copy" class="text-slate-400 fa-fw"></font-awesome>
           </button>
           <span v-show="showCopiedSeed" class="text-sm text-green-500">
             Copied
@@ -79,7 +79,7 @@
               )
             "
           >
-            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+            <font-awesome icon="copy" class="text-slate-400 fa-fw"></font-awesome>
           </button>
           <span v-show="showCopiedDeri" class="text-sm text-green-500"
             >Copied</span

src/views/ShareMyContactInfoView.vue

@@ -12,7 +12,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="fa-fw" />
         </h1>
       </div>
 
@@ -34,7 +34,7 @@
       <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.
+        <font-awesome icon="users" /> screen.
       </div>
     </div>
   </section>

src/views/SharedPhotoView.vue

@@ -8,7 +8,7 @@
     </h1>
     <div v-if="imageBlob">
       <div v-if="uploading" class="text-center mb-4">
-        <fa icon="spinner" class="fa-spin-pulse" />
+        <font-awesome icon="spinner" class="fa-spin-pulse" />
       </div>
       <div v-else>
         <div class="text-center mb-4">Choose how to use this image</div>
@@ -17,21 +17,21 @@
             @click="recordGift"
             class="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 px-2 py-3 rounded-md"
           >
-            <fa icon="gift" class="fa-fw" />
+            <font-awesome icon="gift" class="fa-fw" />
             Record a Gift
           </button>
           <button
             @click="recordProfile"
             class="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 px-2 py-3 rounded-md"
           >
-            <fa icon="circle-user" class="fa-fw" />
+            <font-awesome icon="circle-user" class="fa-fw" />
             Save as Profile Image
           </button>
           <button
             @click="cancel"
             class="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"
           >
-            <fa icon="ban" class="fa-fw" />
+            <font-awesome icon="ban" class="fa-fw" />
             Cancel
           </button>
         </div>

src/views/StartView.vue

@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </h1>
       </div>
 
@@ -34,7 +34,7 @@
             href="https://www.perplexity.ai/search/what-are-passkeys-v2SHV3yLQlyA2CYH6.Nvhg"
             target="_blank"
           >
-            <fa icon="info-circle" class="fa-fw text-blue-500" />
+            <font-awesome icon="info-circle" class="fa-fw text-blue-500" />
           </a>
         </p>
         <p class="text-center font-light mt-4">
@@ -44,7 +44,7 @@
             href="https://www.perplexity.ai/search/what-is-a-seed-phrase-OqiP9foVRXidr_2le5OFKA"
             target="_blank"
           >
-            <fa icon="info-circle" class="fa-fw text-blue-500" />
+            <font-awesome icon="info-circle" class="fa-fw text-blue-500" />
           </a>
         </p>
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-4">

src/views/StatisticsView.vue

@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </h1>
       </div>
 

src/views/TestView.vue

@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </h1>
       </div>
 

src/views/UserProfileView.vue

@@ -12,7 +12,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </button>
         Individual Profile
       </h1>
@@ -23,14 +23,14 @@
       class="fixed left-6 mt-16 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
       v-if="isLoading"
     >
-      <fa icon="spinner" class="fa-spin-pulse"></fa>
+      <font-awesome icon="spinner" class="fa-spin-pulse"></font-awesome>
     </div>
 
     <div v-else-if="profile">
       <!-- Profile Info -->
       <div class="mt-8">
         <div class="text-sm">
-          <fa icon="user" class="fa-fw text-slate-400"></fa>
+          <font-awesome icon="user" class="fa-fw text-slate-400"></font-awesome>
           {{ didInfo(profile.issuerDid, activeDid, allMyDids, allContacts) }}
         </div>
         <p v-if="profile.description" class="mt-4 text-slate-600">