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

gnoswap-labs · Jan 4, 2025 · f6b9acb · f6b9acb
1 parent a6ca128
commit f6b9acb
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 11 deletions.
diff --git a/packages/web/src/layouts/wallet/components/asset-send-modal/AssetSendModal.styles.ts b/packages/web/src/layouts/wallet/components/asset-send-modal/AssetSendModal.styles.ts
@@ -231,6 +231,24 @@ export const AssetSendContent = styled.div`
   .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);
+        }
+      }
+    }
   }
 
   .amount-text {
@@ -263,7 +281,7 @@ export const AssetSendContent = styled.div`
   }
 
   .balance-text {
-    cursor: pointer;
+    /* cursor: pointer; */
   }
 `;
 

diff --git a/packages/web/src/layouts/wallet/components/asset-send-modal/AssetSendModal.tsx b/packages/web/src/layouts/wallet/components/asset-send-modal/AssetSendModal.tsx
@@ -30,6 +30,7 @@ import {
   AssetSendTooltipContent,
   AssetSendWarningContentWrapper,
 } from "./AssetSendModal.styles";
+import IconWallet from "@components/common/icons/IconWallet";
 
 const DEFAULT_WITHDRAW_GNOT = GNOT_TOKEN;
 
@@ -112,6 +113,10 @@ const AssetSendModal: React.FC<Props> = ({
     [displayBalanceMap, withdrawInfo?.path],
   );
 
+  const hasTokenBalance = useMemo(() => {
+    return !!currentAvailableBalance;
+  }, [currentAvailableBalance]);
+
   const isDisabledWithdraw =
     !Number(amount ?? 0) ||
     !address ||
@@ -208,16 +213,22 @@ const AssetSendModal: React.FC<Props> = ({
                 </div>
                 <div className="info">
                   <span className="price-text">{estimatePrice}</span>
-                  <span className="balance-text" onClick={handleEnterAllBalanceAvailable}>{`${t(
-                    "common:action.balance",
-                  )}: ${
-                    currentAvailableBalance
-                      ? formatPrice(currentAvailableBalance, {
-                          isKMB: false,
-                          usd: false,
-                        })
-                      : "-"
-                  }`}</span>
+                  <div className="balance-wrapper">
+                    {connected && <IconWallet />}
+                    <span className="balance-text">{` ${
+                      currentAvailableBalance
+                        ? formatPrice(currentAvailableBalance, {
+                            isKMB: false,
+                            usd: false,
+                          })
+                        : "-"
+                    }`}</span>
+                    {hasTokenBalance && (
+                      <button className="balance-max-button" onClick={handleEnterAllBalanceAvailable}>
+                        {t("common:max")}
+                      </button>
+                    )}
+                  </div>
                 </div>
               </div>
             </AssetSendContent>