feat: [GSW-2033] Amount Input UI renewal in TokenDetail

gnoswap-labs · Jan 4, 2025 · f6659b6 · f6659b6
1 parent 8a39612
commit f6659b6
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 40 deletions.
diff --git a/packages/web/src/layouts/swap/components/swap-card/swap-card-content/SwapCardContent.tsx b/packages/web/src/layouts/swap/components/swap-card/swap-card-content/SwapCardContent.tsx
@@ -91,13 +91,6 @@ const SwapCardContent: React.FC<ContentProps> = ({
     }
   }, [changeTokenAAmount, connectedWallet, swapTokenInfo]);
 
-  const handleAutoFillTokenB = useCallback(() => {
-    if (connectedWallet) {
-      const formatValue = parseFloat(swapTokenInfo.tokenBBalance.replace(/,/g, "")).toString();
-      changeTokenBAmount(formatValue);
-    }
-  }, [changeTokenBAmount, connectedWallet, swapTokenInfo]);
-
   const isShowInfoSection = useMemo(() => {
     return (
       !!(swapSummaryInfo && !!Number(swapTokenInfo.tokenAAmount) && !!Number(swapTokenInfo.tokenBAmount)) || isLoading
@@ -124,10 +117,6 @@ const SwapCardContent: React.FC<ContentProps> = ({
     return swapTokenInfo.tokenABalance !== "-" && swapTokenInfo.tokenABalance !== "0";
   }, [swapTokenInfo.tokenABalance]);
 
-  const hasTokenBBalance = useMemo(() => {
-    return swapTokenInfo.tokenBBalance !== "-" && swapTokenInfo.tokenBBalance !== "0";
-  }, [swapTokenInfo.tokenBBalance]);
-
   const showPriceImpact = useMemo(
     () => !isLoading && !!swapSummaryInfo?.priceImpact && swapRouteInfos.length > 0,
     [isLoading, swapRouteInfos.length, swapSummaryInfo?.priceImpact],
@@ -206,17 +195,9 @@ const SwapCardContent: React.FC<ContentProps> = ({
           </PriceInfoWrapper>
           <div className="balance-wrapper">
             {connectedWallet && <IconWallet />}
-            <span
-              className={`balance-text ${tokenB && connectedWallet && "balance-text-disabled"}`}
-              onClick={handleAutoFillTokenB}
-            >
+            <span className={`balance-text ${tokenB && connectedWallet && "balance-text-disabled"}`}>
               {swapTokenInfo.tokenBBalance}
             </span>
-            {hasTokenBBalance && (
-              <button className="balance-max-button" onClick={handleAutoFillTokenB}>
-                Max
-              </button>
-            )}
           </div>
         </div>
       </div>

diff --git a/packages/web/src/layouts/token-detail/components/token-swap/TokenSwap.styles.ts b/packages/web/src/layouts/token-detail/components/token-swap/TokenSwap.styles.ts
@@ -92,6 +92,24 @@ export const wrapper = (theme: Theme) => css`
     .info {
       ${mixins.flexbox("row", "center", "space-between")};
       width: 100%;
+      .balance-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        .balance-max-button {
+          padding: 4px 6px;
+          border-radius: 36px;
+          background: rgba(0, 89, 255, 0.2);
+          font-size: 12px;
+          font-weight: 500;
+          color: #007aff;
+          cursor: pointer;
+          &:hover {
+            background: rgba(0, 89, 255, 0.1);
+          }
+        }
+      }
     }
     .text-opacity {
       opacity: 0.5;
@@ -121,7 +139,6 @@ export const wrapper = (theme: Theme) => css`
       overflow: hidden;
     }
     .balance-text-disabled {
-      cursor: pointer;
     }
 
     .token {

diff --git a/packages/web/src/layouts/token-detail/components/token-swap/TokenSwap.tsx b/packages/web/src/layouts/token-detail/components/token-swap/TokenSwap.tsx
@@ -16,6 +16,7 @@ import { TokenModel } from "@models/token/token-model";
 import { DataTokenInfo } from "@models/token/token-swap-model";
 
 import { CopyTooltip, wrapper } from "./TokenSwap.styles";
+import IconWallet from "@components/common/icons/IconWallet";
 
 export interface TokenSwapProps {
   isSwitchNetwork: boolean;
@@ -108,12 +109,9 @@ const TokenSwap: React.FC<TokenSwapProps> = ({
     }
   }, [changeTokenAAmount, connected, dataTokenInfo]);
 
-  const handleAutoFillTokenB = useCallback(() => {
-    if (connected) {
-      const formatValue = parseFloat(dataTokenInfo.tokenBBalance.replace(/,/g, "")).toString();
-      changeTokenBAmount(formatValue);
-    }
-  }, [changeTokenBAmount, connected, dataTokenInfo]);
+  const hasTokenABalance = useMemo(() => {
+    return swapTokenInfo.tokenABalance !== "-" && swapTokenInfo.tokenABalance !== "0";
+  }, [swapTokenInfo.tokenABalance]);
 
   const onClickConfirm = useCallback(() => {
     if (!connected || isSwitchNetwork) {
@@ -167,12 +165,17 @@ const TokenSwap: React.FC<TokenSwapProps> = ({
             <span className={`price-text ${isLoading && direction !== "EXACT_IN" ? "text-opacity" : ""}`}>
               {dataTokenInfo.tokenAUSDStr}
             </span>
-            <span
-              className={`balance-text ${tokenA && connected && "balance-text-disabled"}`}
-              onClick={handleAutoFillTokenA}
-            >
-              {t("business:balance")}: {dataTokenInfo.tokenABalance}
-            </span>
+            <div className="balance-wrapper">
+              {connected && <IconWallet />}
+              <span className={`balance-text ${tokenA && connected && "balance-text-disabled"}`}>
+                {dataTokenInfo.tokenABalance}
+              </span>
+              {hasTokenABalance && (
+                <button className="balance-max-button" onClick={handleAutoFillTokenA}>
+                  Max
+                </button>
+              )}
+            </div>
           </div>
         </div>
         <div className="to">
@@ -193,12 +196,12 @@ const TokenSwap: React.FC<TokenSwapProps> = ({
             <span className={`price-text ${isLoading && direction === "EXACT_IN" ? "text-opacity" : ""}`}>
               {dataTokenInfo.tokenBUSDStr}
             </span>
-            <span
-              className={`balance-text ${tokenB && connected && "balance-text-disabled"}`}
-              onClick={handleAutoFillTokenB}
-            >
-              {t("business:balance")}: {dataTokenInfo.tokenBBalance}
-            </span>
+            <div className="balance-wrapper">
+              {connected && <IconWallet />}
+              <span className={`balance-text ${tokenB && connected && "balance-text-disabled"}`}>
+                {dataTokenInfo.tokenBBalance}
+              </span>
+            </div>
           </div>
         </div>
         <div className="arrow" onClick={switchSwapDirection}>

diff --git a/packages/web/src/react-query/router/use-get-routes.ts b/packages/web/src/react-query/router/use-get-routes.ts
@@ -67,7 +67,7 @@ export const useGetRoutes = (
 
       return result;
     },
-    retry: false,
+    retry: 1,
     refetchInterval: REFETCH_INTERVAL,
     staleTime: STALE_TIME,
     enabled: !!request?.inputToken?.path && !!request?.outputToken?.path,