From c8521c90285e6064bd2af9ecb45c722bf652ca88 Mon Sep 17 00:00:00 2001
From: SnowBera <snow@berachain.com>
Date: Wed, 18 Dec 2024 12:05:28 +0100
Subject: [PATCH] style(honey): input & output clarify

---
 apps/honey/src/components/swap-card.tsx | 302 +++++++++++++-----------
 1 file changed, 158 insertions(+), 144 deletions(-)

diff --git a/apps/honey/src/components/swap-card.tsx b/apps/honey/src/components/swap-card.tsx
index 0ca56ce8e..bfa4ab4ed 100755
--- a/apps/honey/src/components/swap-card.tsx
+++ b/apps/honey/src/components/swap-card.tsx
@@ -19,6 +19,7 @@ import { Tabs, TabsList, TabsTrigger } from "@bera/ui/tabs";
 import { Address, parseUnits } from "viem";
 
 import { usePsm } from "~/hooks/usePsm";
+import { cn } from "@bera/ui";
 
 export function SwapCard() {
   const [tabValue, setTabValue] = useState<"mint" | "burn">("mint");
@@ -109,153 +110,166 @@ export function SwapCard() {
             </TabsList>
           </Tabs>
 
-          <div className="border-1 flex flex-col gap-6 border-border">
-            <ul className="relative rounded-2xl border">
-              <TokenInput
-                amount={fromAmount[selectedFrom?.[0]?.address!]}
-                balance={fromBalance?.[0]}
-                selected={selectedFrom?.[0]}
-                selectable={selectedFrom?.[0]?.address !== honey?.address}
-                selectedTokens={
-                  isBasketModeEnabled ? selectedFrom : [selectedFrom?.[0]]
-                }
-                customTokenList={collateralList}
-                showExceeding
-                setIsTyping={setIsTyping}
-                setAmount={(amount) => {
-                  setChangedAsset(selectedFrom?.[0]?.address);
-                  setGivenIn(true);
-                  setFromAmount((prevAmount) => ({
-                    ...prevAmount,
-                    [selectedFrom?.[0]?.address!]: amount,
-                  }));
-                }}
-                onTokenSelection={(token) => {
-                  resetAmounts();
-                  setSelectedFrom((prevToken) =>
-                    token && prevToken
-                      ? [
-                          token,
-                          ...prevToken.filter(
-                            (t) => t.address !== token.address,
-                          ),
-                        ]
-                      : [],
-                  );
-                }}
-              />
-              <hr />
-              {!!isBasketModeEnabled && tabValue === "mint" && (
-                <>
-                  <TokenInput
-                    amount={fromAmount[selectedFrom?.[1]?.address!]}
-                    balance={fromBalance?.[1]}
-                    selected={selectedFrom?.[1]}
-                    selectable={selectedFrom?.[1]?.address !== honey?.address}
-                    selectedTokens={selectedFrom}
-                    customTokenList={collateralList}
-                    showExceeding
-                    setIsTyping={setIsTyping}
-                    setAmount={(amount) => {
-                      setChangedAsset(selectedFrom?.[1]?.address);
-                      setGivenIn(true);
-                      setFromAmount((prevAmount) => ({
-                        ...prevAmount,
-                        [selectedFrom?.[1]?.address!]: amount,
-                      }));
-                    }}
-                    onTokenSelection={(token) => {
-                      resetAmounts();
-                      setSelectedFrom((prevToken) =>
-                        token && prevToken
-                          ? [
-                              token,
-                              ...prevToken.filter(
-                                (t) => t.address !== token.address,
-                              ),
-                            ]
-                          : [],
-                      );
-                    }}
-                  />
-                  <hr />
-                </>
-              )}
+          <div className="flex flex-col gap-6">
+            <ul className="relative">
+              <div
+                className={cn(
+                  "border rounded-md",
+                  isBasketModeEnabled ? "mb-4" : "rounded-b-none border-b-0",
+                )}
+              >
+                <TokenInput
+                  amount={fromAmount[selectedFrom?.[0]?.address!]}
+                  balance={fromBalance?.[0]}
+                  selected={selectedFrom?.[0]}
+                  selectable={selectedFrom?.[0]?.address !== honey?.address}
+                  selectedTokens={
+                    isBasketModeEnabled ? selectedFrom : [selectedFrom?.[0]]
+                  }
+                  customTokenList={collateralList}
+                  showExceeding
+                  setIsTyping={setIsTyping}
+                  setAmount={(amount) => {
+                    setChangedAsset(selectedFrom?.[0]?.address);
+                    setGivenIn(true);
+                    setFromAmount((prevAmount) => ({
+                      ...prevAmount,
+                      [selectedFrom?.[0]?.address!]: amount,
+                    }));
+                  }}
+                  onTokenSelection={(token) => {
+                    resetAmounts();
+                    setSelectedFrom((prevToken) =>
+                      token && prevToken
+                        ? [
+                            token,
+                            ...prevToken.filter(
+                              (t) => t.address !== token.address,
+                            ),
+                          ]
+                        : [],
+                    );
+                  }}
+                />
+                {!!isBasketModeEnabled && tabValue === "mint" && (
+                  <>
+                    <hr />
+                    <TokenInput
+                      amount={fromAmount[selectedFrom?.[1]?.address!]}
+                      balance={fromBalance?.[1]}
+                      selected={selectedFrom?.[1]}
+                      selectable={selectedFrom?.[1]?.address !== honey?.address}
+                      selectedTokens={selectedFrom}
+                      customTokenList={collateralList}
+                      showExceeding
+                      setIsTyping={setIsTyping}
+                      setAmount={(amount) => {
+                        setChangedAsset(selectedFrom?.[1]?.address);
+                        setGivenIn(true);
+                        setFromAmount((prevAmount) => ({
+                          ...prevAmount,
+                          [selectedFrom?.[1]?.address!]: amount,
+                        }));
+                      }}
+                      onTokenSelection={(token) => {
+                        resetAmounts();
+                        setSelectedFrom((prevToken) =>
+                          token && prevToken
+                            ? [
+                                token,
+                                ...prevToken.filter(
+                                  (t) => t.address !== token.address,
+                                ),
+                              ]
+                            : [],
+                        );
+                      }}
+                    />
+                  </>
+                )}
+              </div>
               {(isLoading || isTyping) && (
                 <SSRSpinner className="absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] rounded-md border border-border bg-background p-2" />
               )}
-              <TokenInput
-                amount={toAmount[selectedTo?.[0]?.address!]}
-                balance={toBalance?.[0]}
-                selected={selectedTo?.[0]}
-                selectable={selectedTo?.[0]?.address !== honey?.address}
-                selectedTokens={
-                  isBasketModeEnabled ? selectedTo : [selectedTo?.[0]]
-                }
-                customTokenList={collateralList}
-                showExceeding={false}
-                hideMax={true}
-                hideBalance
-                setIsTyping={setIsTyping}
-                setAmount={(amount) => {
-                  setChangedAsset(selectedTo?.[0]?.address);
-                  setGivenIn(false);
-                  setToAmount((prevAmount) => ({
-                    ...prevAmount,
-                    [selectedTo?.[0]?.address!]: amount,
-                  }));
-                }}
-                onTokenSelection={(token) => {
-                  resetAmounts();
-                  setSelectedTo((prevToken) =>
-                    token && prevToken
-                      ? [
-                          token,
-                          ...prevToken.filter(
-                            (t) => t.address !== token.address,
-                          ),
-                        ]
-                      : [],
-                  );
-                }}
-              />
-              {!!isBasketModeEnabled && tabValue === "burn" && (
-                <>
-                  <hr />
-                  <TokenInput
-                    amount={toAmount[selectedTo?.[1]?.address!]}
-                    balance={toBalance?.[1]}
-                    selected={selectedTo?.[1]}
-                    selectable={selectedTo?.[1]?.address !== honey?.address}
-                    selectedTokens={selectedTo}
-                    customTokenList={collateralList}
-                    hideBalance
-                    showExceeding
-                    setIsTyping={setIsTyping}
-                    setAmount={(amount) => {
-                      setChangedAsset(selectedTo?.[1]?.address);
-                      setGivenIn(false);
-                      setToAmount((prevAmount) => ({
-                        ...prevAmount,
-                        [selectedTo?.[1]?.address!]: amount,
-                      }));
-                    }}
-                    onTokenSelection={(token) => {
-                      resetAmounts();
-                      setSelectedTo((prevToken) =>
-                        token && prevToken
-                          ? [
-                              token,
-                              ...prevToken.filter(
-                                (t) => t.address !== token.address,
-                              ),
-                            ]
-                          : [],
-                      );
-                    }}
-                  />
-                </>
-              )}
+              <div
+                className={cn(
+                  "border rounded-md",
+                  !isBasketModeEnabled && "rounded-t-none",
+                )}
+              >
+                <TokenInput
+                  amount={toAmount[selectedTo?.[0]?.address!]}
+                  balance={toBalance?.[0]}
+                  selected={selectedTo?.[0]}
+                  selectable={selectedTo?.[0]?.address !== honey?.address}
+                  selectedTokens={
+                    isBasketModeEnabled ? selectedTo : [selectedTo?.[0]]
+                  }
+                  customTokenList={collateralList}
+                  showExceeding={false}
+                  hideMax={true}
+                  hideBalance
+                  setIsTyping={setIsTyping}
+                  setAmount={(amount) => {
+                    setChangedAsset(selectedTo?.[0]?.address);
+                    setGivenIn(false);
+                    setToAmount((prevAmount) => ({
+                      ...prevAmount,
+                      [selectedTo?.[0]?.address!]: amount,
+                    }));
+                  }}
+                  onTokenSelection={(token) => {
+                    resetAmounts();
+                    setSelectedTo((prevToken) =>
+                      token && prevToken
+                        ? [
+                            token,
+                            ...prevToken.filter(
+                              (t) => t.address !== token.address,
+                            ),
+                          ]
+                        : [],
+                    );
+                  }}
+                />
+                {!!isBasketModeEnabled && tabValue === "burn" && (
+                  <>
+                    <hr />
+                    <TokenInput
+                      amount={toAmount[selectedTo?.[1]?.address!]}
+                      balance={toBalance?.[1]}
+                      selected={selectedTo?.[1]}
+                      selectable={selectedTo?.[1]?.address !== honey?.address}
+                      selectedTokens={selectedTo}
+                      customTokenList={collateralList}
+                      hideBalance
+                      showExceeding
+                      setIsTyping={setIsTyping}
+                      setAmount={(amount) => {
+                        setChangedAsset(selectedTo?.[1]?.address);
+                        setGivenIn(false);
+                        setToAmount((prevAmount) => ({
+                          ...prevAmount,
+                          [selectedTo?.[1]?.address!]: amount,
+                        }));
+                      }}
+                      onTokenSelection={(token) => {
+                        resetAmounts();
+                        setSelectedTo((prevToken) =>
+                          token && prevToken
+                            ? [
+                                token,
+                                ...prevToken.filter(
+                                  (t) => t.address !== token.address,
+                                ),
+                              ]
+                            : [],
+                        );
+                      }}
+                    />
+                  </>
+                )}
+              </div>
             </ul>
             {isBadCollateral && !isBasketModeEnabled ? (
               <Alert variant="default" className="flex gap-2">