format total numbers better

src/libs/util.ts

@@ -42,7 +42,6 @@ import { createPeerDid } from "../libs/crypto/vc/didPeer";
 import { registerCredential } from "../libs/crypto/vc/passkeyDidPeer";
 import { logger } from "../utils/logger";
 import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
-import OfferDetailsView from "@/views/OfferDetailsView.vue";
 
 export interface GiverReceiverInputInfo {
   did?: string;
@@ -81,18 +80,21 @@ export const UNIT_LONG: Record<string, string> = {
 };
 /* eslint-enable prettier/prettier */
 
-const UNIT_CODES: Record<string, Record<string, string>> = {
+const UNIT_CODES: Record<string, { name: string; faIcon: string; decimals: number }> = {
   BTC: {
     name: "Bitcoin",
     faIcon: "bitcoin-sign",
+    decimals: 4,
   },
   HUR: {
     name: "hours",
     faIcon: "clock",
+    decimals: 0,
   },
   USD: {
     name: "US Dollars",
     faIcon: "dollar",
+    decimals: 2,
   },
 };
 
@@ -100,6 +102,13 @@ export function iconForUnitCode(unitCode: string) {
   return UNIT_CODES[unitCode]?.faIcon || "question";
 }
 
+export function formattedAmount(amount: number, unitCode: string) {
+  const unit = UNIT_CODES[unitCode];
+  const amountStr = amount.toFixed(unit?.decimals ?? 4);
+  const unitName = unit?.name || "?";
+  return amountStr + " " + unitName;
+}
+
 // from https://stackoverflow.com/a/175787/845494
 // ... though it appears even this isn't precisely right so keep doing "|| 0" or something in sensitive places
 //

src/views/ProjectViewView.vue

@@ -386,11 +386,10 @@
                 >
                   <!-- just show the hours, or alternatively whatever is first -->
                   <span v-if="givenTotalHours() > 0">
-                    {{ givenTotalHours() }} {{ libsUtil.UNIT_SHORT["HUR"] }}
+                    {{ libsUtil.formattedAmount(givenTotalHours(), "HUR") }}
                   </span>
                   <span v-else>
-                    {{ givesTotalsByUnit[0].amount }}
+                    {{ libsUtil.formattedAmount(givesTotalsByUnit[0].amount, givesTotalsByUnit[0].unit) }}
-                    {{ libsUtil.UNIT_SHORT[givesTotalsByUnit[0].unit] }}
                   </span>
                   <span v-if="givesTotalsByUnit.length > 1">...</span>
                   <span>
@@ -411,7 +410,7 @@
                       :icon="libsUtil.iconForUnitCode(total.unit)"
                       class="fa-fw text-slate-400 mr-1"
                     />
-                    {{ total.amount }} {{ libsUtil.UNIT_LONG[total.unit] }}
+                    {{ libsUtil.formattedAmount(total.amount, total.unit) }}
                   </div>
                 </div>
               </span>