Fix/token balance (#1177)

* 🐛 Fix balance format * 🐛 Fix extra $
cartridge-gg · Dec 17, 2024 · ae4c5e5 · ae4c5e5
1 parent 16ecb93
commit ae4c5e5
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 54 deletions.
diff --git a/packages/profile/src/components/inventory/token/helper.ts b/packages/profile/src/components/inventory/token/helper.ts
@@ -0,0 +1,11 @@
+export const formatBalance = (balance: string) => {
+  // Catch prefix until number
+  let prefix = "";
+  for (const char of balance) {
+    if (!isNaN(parseInt(char))) {
+      break;
+    }
+    prefix += char;
+  }
+  return `${prefix}${parseFloat(balance.replace(prefix, "")).toLocaleString()}`;
+};
diff --git a/packages/profile/src/components/inventory/token/send.tsx b/packages/profile/src/components/inventory/token/send.tsx
@@ -27,6 +27,7 @@ import { useForm } from "react-hook-form";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { Call, constants, uint256 } from "starknet";
 import { z } from "zod";
+import { formatBalance } from "./helper";
 
 export function SendToken() {
   const { address: tokenAddress } = useParams<{ address: string }>();
@@ -112,21 +113,6 @@ export function SendToken() {
     { enabled: t && ["ETH", "STRK"].includes(t.meta.symbol) && !!amount },
   );
 
-  const countervalueFormatted = useMemo(() => {
-    if (!countervalue) return undefined;
-    // Catch prefix until number
-    let prefix = "";
-    for (const char of countervalue.formatted) {
-      if (!isNaN(parseInt(char))) {
-        break;
-      }
-      prefix += char;
-    }
-    return `${prefix}${parseFloat(
-      countervalue.formatted.replace(prefix, ""),
-    ).toLocaleString()}`;
-  }, [countervalue]);
-
   if (!t) {
     return null;
   }
@@ -186,8 +172,7 @@ export function SendToken() {
                           )
                         }
                       >
-                        {parseFloat(t.balance.formatted).toLocaleString()}{" "}
-                        {t.meta.symbol}
+                        {formatBalance(t.balance.formatted)} {t.meta.symbol}
                       </div>
                     </div>
                   </div>
@@ -202,7 +187,7 @@ export function SendToken() {
                       />
                       {countervalue && (
                         <span className="absolute right-4 top-3.5 text-sm text-muted-foreground">
-                          {countervalueFormatted}
+                          {formatBalance(countervalue.formatted)}
                         </span>
                       )}
                     </div>

diff --git a/packages/profile/src/components/inventory/token/token.tsx b/packages/profile/src/components/inventory/token/token.tsx
@@ -32,6 +32,7 @@ import { useToken } from "@/hooks/token";
 import { TokenPair } from "@cartridge/utils/api/cartridge";
 import { useMemo } from "react";
 import { compare } from "compare-versions";
+import { formatBalance } from "./helper";
 
 export function Token() {
   const { address } = useParams<{ address: string }>();
@@ -106,21 +107,6 @@ function ERC20() {
     { enabled: t && ["ETH", "STRK"].includes(t.meta.symbol) },
   );
 
-  const countervalueFormatted = useMemo(() => {
-    if (!countervalue) return undefined;
-    // Catch prefix until number
-    let prefix = "";
-    for (const char of countervalue.formatted) {
-      if (!isNaN(parseInt(char))) {
-        break;
-      }
-      prefix += char;
-    }
-    return `${prefix}${parseFloat(
-      countervalue.formatted.replace(prefix, ""),
-    ).toLocaleString()}`;
-  }, [countervalue]);
-
   const compatibility = useMemo(() => {
     if (!version) return false;
     return compare(version, "0.4.0", ">=");
@@ -145,10 +131,12 @@ function ERC20() {
           t.balance === undefined ? (
             <Skeleton className="h-[20px] w-[120px] rounded" />
           ) : (
-            parseFloat(t.balance.formatted).toLocaleString()
+            formatBalance(t.balance.formatted)
           )
         } ${t.meta.symbol}`}
-        description={countervalueFormatted && `$${countervalueFormatted} (USD)`}
+        description={
+          countervalue && `${formatBalance(countervalue.formatted)} (USD)`
+        }
         icon={
           <img
             className="w-8 h-8"

diff --git a/packages/profile/src/components/inventory/token/tokens.tsx b/packages/profile/src/components/inventory/token/tokens.tsx
@@ -10,7 +10,8 @@ import { Balance, ERC20Metadata, useCountervalue } from "@cartridge/utils";
 import { formatEther } from "viem";
 import { useTokens } from "@/hooks/token";
 import { TokenPair } from "@cartridge/utils/api/cartridge";
-import { useMemo, useState } from "react";
+import { useState } from "react";
+import { formatBalance } from "./helper";
 
 export function Tokens() {
   // const { isVisible } = useConnection();
@@ -66,21 +67,6 @@ function TokenCardContent({
     pair: `${token.meta.symbol}_USDC` as TokenPair,
   });
 
-  const countervalueFormatted = useMemo(() => {
-    if (!countervalue) return undefined;
-    // Catch prefix until number
-    let prefix = "";
-    for (const char of countervalue.formatted) {
-      if (!isNaN(parseInt(char))) {
-        break;
-      }
-      prefix += char;
-    }
-    return `${prefix}${parseFloat(
-      countervalue.formatted.replace(prefix, ""),
-    ).toLocaleString()}`;
-  }, [countervalue]);
-
   return (
     <CardContent
       className={cn(
@@ -99,12 +85,14 @@ function TokenCardContent({
 
       <div className="bg-secondary flex flex-1 gap-x-1.5 items-center justify-between p-3 text-medium">
         <div className="flex items-center gap-2">
-          <p>{parseFloat(token.balance.formatted).toLocaleString()}</p>
+          <p>{formatBalance(token.balance.formatted)}</p>
           <span className="text-muted-foreground">{token.meta.symbol}</span>
         </div>
 
-        {countervalueFormatted && (
-          <span className="text-muted-foreground">{countervalueFormatted}</span>
+        {countervalue && (
+          <span className="text-muted-foreground">
+            {formatBalance(countervalue.formatted)}
+          </span>
         )}
       </div>
     </CardContent>