feat: [GSW-2033] Amount Input UI renewal

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

Hide file tree

Showing 3 changed files with 83 additions and 15 deletions.
diff --git a/packages/web/src/components/common/icons/IconWallet.tsx b/packages/web/src/components/common/icons/IconWallet.tsx
@@ -0,0 +1,29 @@
+const IconWallet = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none">
+      <path
+        d="M12.9987 7.57254H10.7487C9.92069 7.57254 9.24869 6.86854 9.24869 6.00112C9.24869 5.13369 9.92069 4.42969 10.7487 4.42969H12.9987"
+        stroke="#596782"
+        strokeWidth="0.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4 0.5H10C11.656 0.5 13 1.908 13 3.64286V8.35714C13 10.092 11.656 11.5 10 11.5H4C2.344 11.5 1 10.092 1 8.35714V3.64286C1 1.908 2.344 0.5 4 0.5Z"
+        stroke="#596782"
+        strokeWidth="0.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.99869 3.64062H6.99869"
+        stroke="#596782"
+        strokeWidth="0.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default IconWallet;
diff --git a/...ges/web/src/layouts/swap/components/swap-card/swap-card-content/SwapCardContent.styles.ts b/...ges/web/src/layouts/swap/components/swap-card/swap-card-content/SwapCardContent.styles.ts
@@ -34,6 +34,7 @@ export const ContentWrapper = styled.div`
     align-self: stretch;
     color: ${({ theme }) => theme.color.text02};
   }
+
   .text-opacity {
     opacity: 0.5;
   }
@@ -70,6 +71,25 @@ export const ContentWrapper = styled.div`
     ${mixins.flexbox("row", "center", "space-between")};
     width: 100%;
     align-self: stretch;
+    .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);
+        }
+      }
+    }
+
     .price-text,
     .balance-text {
       flex-shrink: 0;
@@ -90,7 +110,6 @@ export const ContentWrapper = styled.div`
       max-width: 100%;
     }
     .balance-text-disabled {
-      cursor: pointer;
     }
   }
 

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
@@ -1,6 +1,5 @@
 import BigNumber from "bignumber.js";
 import React, { useCallback, useMemo } from "react";
-import { useTranslation } from "react-i18next";
 
 import { isAmount } from "@common/utils/data-check-util";
 import IconSwapArrowDown from "@components/common/icons/IconSwapArrowDown";
@@ -20,6 +19,7 @@ import {
   PriceInfoWrapper,
   SwapDetailSectionWrapper,
 } from "./SwapCardContent.styles";
+import IconWallet from "@components/common/icons/IconWallet";
 
 interface ContentProps {
   swapTokenInfo: SwapTokenInfo;
@@ -53,7 +53,6 @@ const SwapCardContent: React.FC<ContentProps> = ({
   priceImpactStatus,
   isSameToken,
 }) => {
-  const { t } = useTranslation();
   const theme = useTheme();
   const tokenA = swapTokenInfo.tokenA;
   const tokenB = swapTokenInfo.tokenB;
@@ -121,6 +120,14 @@ const SwapCardContent: React.FC<ContentProps> = ({
     return swapTokenInfo.tokenBAmount;
   }, [swapTokenInfo.tokenBAmount, tokenB?.decimals]);
 
+  const hasTokenABalance = useMemo(() => {
+    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],
@@ -147,12 +154,17 @@ const SwapCardContent: React.FC<ContentProps> = ({
           <span className={`price-text ${isLoading && direction !== "EXACT_IN" ? "text-opacity" : ""}`}>
             {swapTokenInfo.tokenAUSDStr}
           </span>
-          <span
-            className={`balance-text ${tokenA && connectedWallet && "balance-text-disabled"}`}
-            onClick={handleAutoFillTokenA}
-          >
-            {t("business:balance")}: {swapTokenInfo.tokenABalance}
-          </span>
+          <div className="balance-wrapper">
+            {connectedWallet && <IconWallet />}
+            <span className={`balance-text ${tokenA && connectedWallet && "balance-text-disabled"}`}>
+              {swapTokenInfo.tokenABalance}
+            </span>
+            {hasTokenABalance && (
+              <button className="balance-max-button" onClick={handleAutoFillTokenA}>
+                Max
+              </button>
+            )}
+          </div>
         </div>
         <div className="arrow">
           <div className="shape" onClick={switchSwapDirection}>
@@ -192,12 +204,20 @@ const SwapCardContent: React.FC<ContentProps> = ({
               </PriceImpactWrapper>
             )}
           </PriceInfoWrapper>
-          <span
-            className={`balance-text ${tokenB && connectedWallet && "balance-text-disabled"}`}
-            onClick={handleAutoFillTokenB}
-          >
-            {t("business:balance")}: {swapTokenInfo.tokenBBalance}
-          </span>
+          <div className="balance-wrapper">
+            {connectedWallet && <IconWallet />}
+            <span
+              className={`balance-text ${tokenB && connectedWallet && "balance-text-disabled"}`}
+              onClick={handleAutoFillTokenB}
+            >
+              {swapTokenInfo.tokenBBalance}
+            </span>
+            {hasTokenBBalance && (
+              <button className="balance-max-button" onClick={handleAutoFillTokenB}>
+                Max
+              </button>
+            )}
+          </div>
         </div>
       </div>
       {!isSameToken && (