show appropriate icon next to amount numbers (and some docs)

README.md

@@ -59,6 +59,10 @@ Under the "Your Identity" screen, click "Advanced", click "Switch Identity / No
 
 For your own web-push tests, change the 'vapid' URL in App.vue, and install apps on the same domain.
 
+### Icons
+
+To add an icon, add to main.ts and reference with `fa` element and `icon` attribute with the hyphenated name.
+
 ### Manual walk-through
 
 - Clear the browser cache for localhost for a new user.

project.task.yaml

@@ -13,8 +13,10 @@ tasks:
 
 - Discuss whether the remaining tasks are worthwhile before MVP release.
 
-- .1 Add units or different icon to the coins (to distinguish $, BTC, hours, etc)
+- .5 If notifications are not enabled, add message to front page with link/button to enable
+
 - .5 make a VC details page, or link to endorser.ch (including confirmations)
+- .3 Add URL for project
 - 01 allow download of each VC (& confirmations, to show that they actually own their data)
 - .3 check that Android shows "back" buttons on screens without bottom tray
 - .1 Make give description text box into something that expands as they type?

src/main.ts

@@ -14,6 +14,7 @@ import {
   faArrowLeft,
   faArrowRight,
   faBan,
+  faBitcoinSign,
   faBurst,
   faCalendar,
   faChevronLeft,
@@ -27,6 +28,7 @@ import {
   faCoins,
   faComment,
   faCopy,
+  faDollar,
   faEllipsisVertical,
   faEye,
   faEyeSlash,
@@ -44,6 +46,7 @@ import {
   faPersonCircleCheck,
   faPersonCircleQuestion,
   faPlus,
+  faQuestion,
   faQrcode,
   faRotate,
   faShareNodes,
@@ -61,6 +64,7 @@ library.add(
   faArrowLeft,
   faArrowRight,
   faBan,
+  faBitcoinSign,
   faBurst,
   faCalendar,
   faChevronLeft,
@@ -74,6 +78,7 @@ library.add(
   faCoins,
   faComment,
   faCopy,
+  faDollar,
   faEllipsisVertical,
   faEye,
   faEyeSlash,
@@ -92,6 +97,7 @@ library.add(
   faPersonCircleQuestion,
   faPlus,
   faQrcode,
+  faQuestion,
   faRotate,
   faShareNodes,
   faSpinner,

src/views/AccountViewView.vue

@@ -288,6 +288,14 @@
         </div>
       </label>
 
+      <div class="flex py-2">
+        <button class="text-blue-500">
+          <router-link :to="{ name: 'statistics' }" class="block text-center">
+            See Global Animated History of Giving
+          </router-link>
+        </button>
+      </div>
+
       <div class="flex py-2">
         <button class="text-blue-500">
           <!-- id used by puppeteer test script -->
@@ -301,14 +309,6 @@
         </button>
       </div>
 
-      <div class="flex py-2">
-        <button class="text-blue-500">
-          <router-link :to="{ name: 'statistics' }" class="block text-center">
-            See Achievements & Statistics
-          </router-link>
-        </button>
-      </div>
-
       <div class="flex py-4">
         <h2 class="text-slate-500 text-sm font-bold mb-2">Claim Server</h2>
         <input

src/views/ContactsView.vue

@@ -957,6 +957,7 @@ export default class ContactsView extends Vue {
     }
   }
 
+  // similar function is in endorserServer.ts
   private async createAndSubmitGive(
     identity: IIdentifier,
     fromDid: string,

src/views/HelpView.vue

@@ -181,6 +181,21 @@
         different page.
       </p>
 
+      <h2 class="text-xl font-semibold">
+        How do I access even more functionality?
+      </h2>
+      <p>
+        There is an "Advanced" section at the bottom of the Account
+        <fa icon="circle-user" /> page.
+      </p>
+      <p>
+        There is a even more functionality in a mobile app (and more
+        documentation) at
+        <a href="https://endorser.ch" class="text-blue-500">
+          EndorserSearch.com
+        </a>
+      </p>
+
       <h2 class="text-xl font-semibold">What is your privacy policy?</h2>
       <p>
         See

src/views/ProjectViewView.vue

@@ -56,8 +56,11 @@
         <div class="text-sm text-slate-500">
           <div v-if="!expanded">
             {{ truncatedDesc }}
-            <a v-if="description.length >= truncateLength" @click="expandText"
-              >Read More</a
+            <a
+              v-if="description.length >= truncateLength"
+              @click="expandText"
+              class="uppercase text-xs font-semibold text-slate-700"
+              >... Read More</a
             >
           </div>
           <div v-else>
@@ -65,7 +68,7 @@
             <a
               @click="collapseText"
               class="uppercase text-xs font-semibold text-slate-700"
-              >Read Less</a
+              >- Read Less</a
             >
           </div>
         </div>
@@ -167,8 +170,10 @@
                 {{ didInfo(offer.agentDid, activeDid, allMyDids, allContacts) }}
               </span>
               <span v-if="offer.amount">
-                <fa icon="coins" class="fa-fw text-slate-400"></fa>
-                {{ offer.amount }}
+                <fa
+                  :icon="iconForUnitCode(offer.unit)"
+                  class="fa-fw text-slate-400"
+                />{{ offer.amount }}
               </span>
             </div>
             <div v-if="offer.objectDescription" class="text-slate-500">
@@ -195,9 +200,11 @@
                 ><fa icon="user" class="fa-fw text-slate-400"></fa>
                 {{ didInfo(give.agentDid, activeDid, allMyDids, allContacts) }}
               </span>
-              <span v-if="give.amount"
-                ><fa icon="coins" class="fa-fw text-slate-400"></fa>
-                {{ give.amount }}
+              <span v-if="give.amount">
+                <fa
+                  :icon="iconForUnitCode(give.unit)"
+                  class="fa-fw text-slate-400"
+                />{{ give.amount }}
               </span>
             </div>
             <div v-if="give.description" class="text-slate-500">
@@ -625,5 +632,24 @@ export default class ProjectViewView extends Vue {
   openOfferDialog() {
     (this.$refs.customOfferDialog as OfferDialog).open();
   }
+
+  UNIT_CODES: Record<string, Record<string, string>> = {
+    BTC: {
+      name: "Bitcoin",
+      faIcon: "bitcoin-sign",
+    },
+    HUR: {
+      name: "hours",
+      faIcon: "clock",
+    },
+    USD: {
+      name: "US Dollars",
+      faIcon: "dollar",
+    },
+  };
+
+  iconForUnitCode(unitCode: string) {
+    return this.UNIT_CODES[unitCode]?.faIcon || "question";
+  }
 }
 </script>