fix: Expected Amount Display for Unknown Currencies in Invoice Dashboard (#291)

Author: sstefdev

packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte

@@ -64,6 +64,7 @@
   let otherItems: any;
   let sellerInfo: SellerInfo[] = [];
   let buyerInfo: BuyerInfo[] = [];
+  let unknownCurrency = currency?.decimals === undefined;
   let isPayee = request?.payee?.value.toLowerCase() === address?.toLowerCase();
   let unsupportedNetwork = false;
   let hexStringChain = "0x" + account?.chainId?.toString(16);
@@ -155,7 +156,7 @@
   }
 
   $: {
-    if (account && network) {
+    if (account && network && !unknownCurrency) {
       checkBalance();
     }
   }
@@ -504,7 +505,6 @@
           token: paymentCurrencies[0].address as `0x${string}`,
           chainId: invoiceNetworkId,
         });
-        ;
         userBalance = balance.formatted;
         hasEnoughBalance = balance.value >= BigInt(request.expectedAmount);
       } else {
@@ -637,18 +637,18 @@
   <h3 class="invoice-info-payment">
     <span style="font-weight: 500;">Payment Chain:</span>
     {paymentCurrencies && paymentCurrencies.length > 0
-      ? paymentCurrencies[0]?.network || "-"
+      ? paymentCurrencies[0]?.network || "Unknown"
       : ""}
   </h3>
   <h3 class="invoice-info-payment">
     <span style="font-weight: 500;">Invoice Currency:</span>
-    {currency?.symbol || "-"}
+    {currency?.symbol || "Unknown"}
   </h3>
 
   <h3 class="invoice-info-payment">
     <span style="font-weight: 500;">Settlement Currency:</span>
     {paymentCurrencies && paymentCurrencies.length > 0
-      ? paymentCurrencies[0]?.symbol || "-"
+      ? paymentCurrencies[0]?.symbol || "Unknown"
       : ""}
   </h3>
 
@@ -674,27 +674,34 @@
                 <p class="truncate description-text">{item.name || "-"}</p>
               </th>
               <td>{item.quantity || "-"}</td>
-              <td
-                >{item.unitPrice
-                  ? formatUnits(item.unitPrice, currency?.decimals ?? 18)
-                  : "-"}</td
-              >
-              <td
-                >{item.discount
+              <td>
+                {#if unknownCurrency}
+                  Unknown
+                {:else}
+                  {item.unitPrice
+                    ? formatUnits(item.unitPrice, currency?.decimals ?? 18)
+                    : "-"}
+                {/if}
+              </td>
+              <td>
+                {item.discount
                   ? formatUnits(item.discount, currency?.decimals ?? 18)
-                  : "-"}</td
-              >
+                  : "-"}
+              </td>
               <td>{Number(item.tax.amount || "-")}</td>
-              <td
-                >{truncateNumberString(
-                  formatUnits(
-                    // @ts-expect-error
-                    calculateItemTotal(item),
-                    currency?.decimals ?? 18
-                  ),
-                  2
-                )}</td
-              >
+              <td>
+                {#if unknownCurrency}
+                  Unknown
+                {:else}
+                  {truncateNumberString(
+                    formatUnits(
+                      calculateItemTotal(item),
+                      currency?.decimals ?? 18
+                    ),
+                    2
+                  )}
+                {/if}
+              </td>
             </tr>
           {/each}
         </tbody>
@@ -723,27 +730,34 @@
                     </p>
                   </th>
                   <td>{item.quantity || "-"}</td>
-                  <td
-                    >{item.unitPrice
-                      ? formatUnits(item.unitPrice, currency?.decimals ?? 18)
-                      : "-"}</td
-                  >
-                  <td
-                    >{item.discount
+                  <td>
+                    {#if unknownCurrency}
+                      Unknown
+                    {:else}
+                      {item.unitPrice
+                        ? formatUnits(item.unitPrice, currency?.decimals ?? 18)
+                        : "-"}
+                    {/if}
+                  </td>
+                  <td>
+                    {item.discount
                       ? formatUnits(item.discount, currency?.decimals ?? 18)
-                      : "-"}</td
-                  >
+                      : "-"}
+                  </td>
                   <td>{Number(item.tax.amount || "-")}</td>
-                  <td
-                    >{truncateNumberString(
-                      formatUnits(
-                        // @ts-expect-error
-                        calculateItemTotal(item),
-                        currency?.decimals ?? 18
-                      ),
-                      2
-                    )}</td
-                  >
+                  <td>
+                    {#if unknownCurrency}
+                      Unknown
+                    {:else}
+                      {truncateNumberString(
+                        formatUnits(
+                          calculateItemTotal(item),
+                          currency?.decimals ?? 18
+                        ),
+                        2
+                      )}
+                    {/if}
+                  </td>
                 </tr>
               {/each}</tbody
             >
@@ -832,7 +846,7 @@
     </div>
   {/if}
   <div class="invoice-view-actions">
-    {#if !isPayee && !unsupportedNetwork && !isPaid && !isRequestPayed && !isSigningTransaction}
+    {#if !isPayee && !unsupportedNetwork && !isPaid && !isRequestPayed && !isSigningTransaction && !unknownCurrency}
       {#if !hasEnoughBalance}
         <div class="balance-warning">
           Insufficient funds: {Number(userBalance).toFixed(4)}

packages/invoice-dashboard/src/lib/view-requests.svelte

@@ -119,7 +119,10 @@
     cipherProvider = undefined;
   };
 
-  const handleWalletChange = (account: GetAccountReturnType, previousAccount: GetAccountReturnType) => {
+  const handleWalletChange = (
+    account: GetAccountReturnType,
+    previousAccount: GetAccountReturnType
+  ) => {
     if (account?.address !== previousAccount?.address) {
       handleWalletDisconnection();
       handleWalletConnection();
@@ -132,7 +135,10 @@
 
   onMount(() => {
     unwatchAccount = watchAccount(wagmiConfig, {
-      onChange(account: GetAccountReturnType, previousAccount: GetAccountReturnType) {
+      onChange(
+        account: GetAccountReturnType,
+        previousAccount: GetAccountReturnType
+      ) {
         tick().then(() => {
           handleWalletChange(account, previousAccount);
         });
@@ -279,6 +285,11 @@
         currencyManager
       );
 
+      const formattedAmount =
+        currencyInfo?.decimals !== undefined
+          ? formatUnits(BigInt(request.expectedAmount), currencyInfo.decimals)
+          : "Unknown";
+
       let paymentNetworkExtension = getPaymentNetworkExtension(request);
       let paymentCurrencies: (
         | CurrencyTypes.ERC20Currency
@@ -328,11 +339,8 @@
 
       return {
         ...request,
-        formattedAmount: formatUnits(
-          BigInt(request.expectedAmount),
-          currencyInfo?.decimals ?? 18
-        ),
-        currencySymbol: currencyInfo?.symbol ?? "-",
+        formattedAmount,
+        currencySymbol: currencyInfo?.symbol ?? "",
         paymentCurrencies,
       };
     }
@@ -710,7 +718,13 @@
                   </td>
                 {/if}
                 <td>
-                  {#if request.formattedAmount.includes(".") && request.formattedAmount.split(".")[1].length > 5}
+                  {#if request.formattedAmount === "Unknown"}
+                    <Tooltip
+                      text="Cannot calculate the expected amount due to unknown decimals"
+                    >
+                      Unknown
+                    </Tooltip>
+                  {:else if request.formattedAmount.includes(".") && request.formattedAmount.split(".")[1].length > 5}
                     <Tooltip text={request.formattedAmount}>
                       {Number(request.formattedAmount).toFixed(5)}
                     </Tooltip>