feat: create StackTokenPair

packages/app/components/TokenIcon.tsx

@@ -10,7 +10,7 @@ import { useState } from "react";
 
 interface TokenIconProps {
   className?: string;
-  size?: "lg" | "md" | "sm" | "xs";
+  size?: "lg" | "md" | "sm" | "xs" | "2xs";
   token: Token;
 }
 
@@ -65,11 +65,12 @@ export const tokenIconStyles = cva(
         lg: ["w-10 h-10 text-[7px]"],
         md: ["w-8 h-8 text-[6px]"],
         sm: ["w-6 h-6 text-[5px]"],
-        xs: ["w-5 h-5 text-[4px]"]
-      }
+        xs: ["w-5 h-5 text-[4px]"],
+        "2xs": ["w-4 h-4 text-[4px]"],
+      },
     },
     defaultVariants: {
-      size: "sm"
-    }
+      size: "sm",
+    },
   }
 );

packages/app/components/stackbox/Stackbox.tsx

@@ -11,6 +11,8 @@ import {
   DatePicker,
 } from "@/components";
 import { TokenFromTokenlist } from "@/models/token";
+import { useAccount, useBalance, useNetwork } from "wagmi";
+import { formatUnits } from "viem";
 
 interface SelectTokenButtonProps {
   label: string;
@@ -40,6 +42,12 @@ const startDateTimeTimestamp = new Date().setMinutes(
   new Date().getMinutes() + 30
 );
 
+const balanceOptions = [
+  { name: "25%", divider: 4 },
+  { name: "50%", divider: 2 },
+  { name: "Max", divider: 1 },
+];
+
 export const Stackbox = () => {
   const searchTokenBarRef = useRef<HTMLInputElement>(null);
   const [isConfirmStackOpen, setConfirmStackIsOpen] = useState(false);
@@ -48,8 +56,16 @@ export const Stackbox = () => {
   const [tokenFrom, setTokenFrom] = useState<TokenFromTokenlist>();
   const [tokenTo, setTokenTo] = useState<TokenFromTokenlist>();
 
-  const [frequency, setFrequency] = useState<string>(HOUR_OPTION);
+  const { chain } = useNetwork();
+  const { address } = useAccount();
+  const { data: balance } = useBalance({
+    address: Boolean(tokenFrom) ? address : undefined,
+    token: tokenFrom?.address as `0x${string}`,
+    chainId: chain?.id,
+  });
+  const [tokenAmount, setTokenAmount] = useState("");
 
+  const [frequency, setFrequency] = useState<string>(HOUR_OPTION);
   const [startDateTime, setStartDateTime] = useState<Date>(
     new Date(startDateTimeTimestamp)
   );
@@ -70,6 +86,28 @@ export const Stackbox = () => {
     setEndDateTime(new Date(endDateByFrequency[frequency]));
   }, [frequency]);
 
+  const formattedBalance = (balanceData: NonNullable<typeof balance>) => {
+    const SIGNIFICANT_DIGITS = 5;
+
+    /* parseFloat has limitations with big numbers, if number is too big it only shows part of it */
+    const valueFloat = parseFloat(balanceData.formatted);
+    const [integer] = balanceData.formatted.split(".");
+
+    const significantDigits =
+      integer === "0"
+        ? SIGNIFICANT_DIGITS
+        : integer.length + SIGNIFICANT_DIGITS;
+
+    let valueString = "0";
+
+    if (valueFloat !== 0)
+      valueString = valueFloat.toLocaleString(undefined, {
+        maximumSignificantDigits: significantDigits,
+      });
+
+    return valueString;
+  };
+
   return (
     <>
       <div className="max-w-lg mx-auto my-24 bg-white shadow-2xl rounded-2xl">
@@ -93,9 +131,48 @@ export const Stackbox = () => {
           <div className="py-2">
             <input
               type="number"
+              pattern="[0-9]*"
               placeholder="0.0"
-              className="w-full py-3 text-4xl font-semibold outline-none"
+              className="w-full py-3 text-4xl text-em-med font-semibold outline-none"
+              value={tokenAmount}
+              onKeyDown={(evt) =>
+                ["e", "E", "+", "-"].includes(evt.key) && evt.preventDefault()
+              }
+              onChange={(event) => {
+                setTokenAmount(event.target.value);
+              }}
             />
+            {tokenFrom && balance && (
+              <div className="flex justify-between items-center">
+                <div className="flex space-x-1">
+                  {balanceOptions.map(({ name, divider }) => (
+                    <Button
+                      key={name}
+                      action="secondary"
+                      width="fit"
+                      size="xs"
+                      onClick={() => {
+                        setTokenAmount(
+                          formatUnits(
+                            balance.value / BigInt(divider),
+                            tokenFrom.decimals
+                          )
+                        );
+                      }}
+                    >
+                      {name}
+                    </Button>
+                  ))}
+                </div>
+                <div className="flex space-x-1 items-center">
+                  <TokenIcon token={tokenFrom} size="2xs" />
+                  <BodyText className="text-em-high">
+                    <span className="text-em-low">Balance:</span>{" "}
+                    {formattedBalance(balance)}
+                  </BodyText>
+                </div>
+              </div>
+            )}
           </div>
         </div>
         <div className="px-5 py-6 space-y-6">

packages/app/ui/buttons/ChipButton.tsx

@@ -14,18 +14,19 @@ interface ChipButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 const chipButtonStyles = cva(["rounded-full px-3 py-2 space-x-1.5 text-xs"], {
   variants: {
     active: {
-      true: ["bg-gray-75"]
+      true: ["bg-gray-75"],
     },
     size: {
       icon: "p-2",
       lg: "px-14 py-3 md:py-4 text-lg md:px-24 space-x-4",
       md: "px-8 md:px-12 py-2 space-x-2",
-      sm: "px-4 py-2 text-sm space-x-2"
-    }
+      sm: "px-4 py-2 text-sm space-x-2",
+      xs: "px-2 py-1 text-xs space-x-1",
+    },
   },
   defaultVariants: {
-    size: "sm"
-  }
+    size: "sm",
+  },
 });
 
 export function ChipButton({
@@ -35,7 +36,7 @@ export function ChipButton({
   disabled,
   id,
   onClick,
-  size
+  size,
 }: ChipButtonProps) {
   return (
     <button
@@ -46,7 +47,7 @@ export function ChipButton({
           width: null,
           disabled,
           active,
-          className
+          className,
         }),
         chipButtonStyles({ active, size })
       )}

packages/app/ui/buttons/base.ts

@@ -16,6 +16,7 @@ export const buttonStyles = cva(
         lg: "px-14 py-3 md:py-4 text-lg md:px-24 space-x-4",
         md: "px-8 md:px-12 py-2 space-x-2",
         sm: "px-4 py-2 text-sm space-x-2",
+        xs: "px-2 py-1 text-xs space-x-1",
         icon: "p-2",
       },
       action: {
@@ -80,7 +81,7 @@ export const buttonStyles = cva(
   }
 );
 
-export type SizeProps = "sm" | "md" | "lg" | "icon";
+export type SizeProps = "xs" | "sm" | "md" | "lg" | "icon";
 
 export interface ButtonBaseProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -98,6 +99,7 @@ export interface ButtonBaseProps
 }
 
 export const iconSizeMap: Record<SizeProps, any> = {
+  xs: 16,
   sm: 18,
   icon: 20,
   md: 22,