✨ Add max button to set max balance (#1181)

* ✨ Add max button to set max balance * ✨ Remove ~ from balance and cleanup balance formatter * ✨ Force token image in circle with fixed size
cartridge-gg · Dec 18, 2024 · 92fa77f · 92fa77f
1 parent 77c8ce2
commit 92fa77f
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 22 deletions.
diff --git a/packages/profile/src/components/inventory/token/helper.ts b/packages/profile/src/components/inventory/token/helper.ts
@@ -1,11 +1,10 @@
-export const formatBalance = (balance: string) => {
+export const formatBalance = (balance: string, exludes?: 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()}`;
+  const prefix = balance.slice(0, balance.search(/\d/));
+  // Exclude each substring from prefix
+  const cleaned =
+    exludes?.reduce((prev, curr) => prev.replace(curr, ""), prefix) ?? prefix;
+  return `${cleaned}${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
@@ -81,6 +81,17 @@ export function SendToken() {
     },
   });
 
+  const handleMax = useCallback(
+    (
+      e: React.MouseEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement>,
+    ) => {
+      e.preventDefault();
+      if (!t) return;
+      form.setValue("amount", parseFloat(t.balance.formatted));
+    },
+    [t, form],
+  );
+
   const onSubmit = useCallback(
     async (values: z.infer<typeof formSchema>) => {
       if (!t) return;
@@ -165,14 +176,12 @@ export function SendToken() {
                       <FormLabel>Balance:</FormLabel>
                       <div
                         className="text-xs cursor-pointer hover:opacity-90"
-                        onClick={() =>
-                          form.setValue(
-                            "amount",
-                            parseFloat(t.balance.formatted),
-                          )
+                        onClick={(e: React.MouseEvent<HTMLDivElement>) =>
+                          handleMax(e)
                         }
                       >
-                        {formatBalance(t.balance.formatted)} {t.meta.symbol}
+                        {formatBalance(t.balance.formatted, ["~"])}{" "}
+                        {t.meta.symbol}
                       </div>
                     </div>
                   </div>
@@ -186,10 +195,19 @@ export function SendToken() {
                         className="[&::-webkit-inner-spin-button]:appearance-none"
                       />
                       {countervalue && (
-                        <span className="absolute right-4 top-3.5 text-sm text-muted-foreground">
+                        <span className="absolute right-14 top-3.5 text-sm text-muted-foreground">
                           {formatBalance(countervalue.formatted)}
                         </span>
                       )}
+                      <Button
+                        className="absolute right-2 top-1/2 -translate-y-1/2 text-xs/3 font-bold uppercase px-2 py-1.5 h-7 bg-muted text-secondary-foreground hover:opacity-70"
+                        variant="ghost"
+                        onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
+                          handleMax(e)
+                        }
+                      >
+                        Max
+                      </Button>
                     </div>
                   </FormControl>
                   <FormMessage />

diff --git a/packages/profile/src/components/inventory/token/token.tsx b/packages/profile/src/components/inventory/token/token.tsx
@@ -131,7 +131,7 @@ function ERC20() {
           t.balance === undefined ? (
             <Skeleton className="h-[20px] w-[120px] rounded" />
           ) : (
-            formatBalance(t.balance.formatted)
+            formatBalance(t.balance.formatted, ["~"])
           )
         } ${t.meta.symbol}`}
         description={

diff --git a/packages/profile/src/components/inventory/token/tokens.tsx b/packages/profile/src/components/inventory/token/tokens.tsx
@@ -77,15 +77,17 @@ function TokenCardContent({
       onMouseLeave={() => setHover(false)}
     >
       <div className="bg-secondary flex w-11 aspect-square items-center justify-center">
-        <img
-          src={token.meta.logoUrl ?? "/public/placeholder.svg"}
-          className="w-5 h-5"
-        />
+        <div className="flex items-center justify-center rounded-full overflow-hidden h-7 w-7 bg-quaternary">
+          <img
+            src={token.meta.logoUrl ?? "/public/placeholder.svg"}
+            className="w-6 h-6"
+          />
+        </div>
       </div>
 
       <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>{formatBalance(token.balance.formatted)}</p>
+          <p>{formatBalance(token.balance.formatted, ["~"])}</p>
           <span className="text-muted-foreground">{token.meta.symbol}</span>
         </div>