🐛 Add delimiter (#1174)

* 🐛 Add delimiter * 📱 Improve design
cartridge-gg · Dec 17, 2024 · 16ecb93 · 16ecb93
1 parent 8fba709
commit 16ecb93
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 12 deletions.
diff --git a/packages/profile/src/components/inventory/token/send.tsx b/packages/profile/src/components/inventory/token/send.tsx
@@ -112,6 +112,21 @@ 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;
   }
@@ -127,7 +142,7 @@ export function SendToken() {
       }
     >
       <LayoutHeader
-        title={`Send ${t.meta.name}`}
+        title={`Send ${t.meta.symbol}`}
         description={<CopyAddress address={address} />}
         icon={
           <img
@@ -162,23 +177,32 @@ export function SendToken() {
                     <FormLabel>Amount</FormLabel>
                     <div className="flex items-center gap-2">
                       <FormLabel>Balance:</FormLabel>
-                      <div className="text-xs">
-                        {t.balance.formatted} {t.meta.symbol}
+                      <div
+                        className="text-xs cursor-pointer hover:opacity-90"
+                        onClick={() =>
+                          form.setValue(
+                            "amount",
+                            parseFloat(t.balance.formatted),
+                          )
+                        }
+                      >
+                        {parseFloat(t.balance.formatted).toLocaleString()}{" "}
+                        {t.meta.symbol}
                       </div>
                     </div>
                   </div>
                   <FormControl>
                     <div className="relative">
                       <Input
                         type="number"
-                        placeholder="0.01"
+                        placeholder={(0.01).toLocaleString()}
                         {...field}
                         value={field.value ?? ""}
                         className="[&::-webkit-inner-spin-button]:appearance-none"
                       />
                       {countervalue && (
                         <span className="absolute right-4 top-3.5 text-sm text-muted-foreground">
-                          {countervalue.formatted}
+                          {countervalueFormatted}
                         </span>
                       )}
                     </div>

diff --git a/packages/profile/src/components/inventory/token/token.tsx b/packages/profile/src/components/inventory/token/token.tsx
@@ -106,6 +106,21 @@ 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", ">=");
@@ -130,10 +145,10 @@ function ERC20() {
           t.balance === undefined ? (
             <Skeleton className="h-[20px] w-[120px] rounded" />
           ) : (
-            t.balance.formatted
+            parseFloat(t.balance.formatted).toLocaleString()
           )
         } ${t.meta.symbol}`}
-        description={countervalue && `${countervalue.formatted} (USD)`}
+        description={countervalueFormatted && `$${countervalueFormatted} (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,7 @@ import { Balance, ERC20Metadata, useCountervalue } from "@cartridge/utils";
 import { formatEther } from "viem";
 import { useTokens } from "@/hooks/token";
 import { TokenPair } from "@cartridge/utils/api/cartridge";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 export function Tokens() {
   // const { isVisible } = useConnection();
@@ -66,6 +66,21 @@ 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(
@@ -84,12 +99,12 @@ 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">
-          <div>{token.balance.formatted}</div>
-          <div className="text-muted-foreground">{token.meta.symbol}</div>
+          <p>{parseFloat(token.balance.formatted).toLocaleString()}</p>
+          <span className="text-muted-foreground">{token.meta.symbol}</span>
         </div>
 
-        {countervalue && (
-          <div className="text-muted-foreground">{countervalue.formatted}</div>
+        {countervalueFormatted && (
+          <span className="text-muted-foreground">{countervalueFormatted}</span>
         )}
       </div>
     </CardContent>