From 3bdd3358c175aa26d1d4df75385e3c138ddbf7fd Mon Sep 17 00:00:00 2001
From: delivan <wjdgurdl272@gmail.com>
Date: Fri, 28 Feb 2025 22:15:53 +0900
Subject: [PATCH] Fix some style

---
 apps/extension/src/languages/en.json          |  11 +-
 .../src/pages/earn/transfer/amount.tsx        | 123 +++++++++---------
 2 files changed, 68 insertions(+), 66 deletions(-)

diff --git a/apps/extension/src/languages/en.json b/apps/extension/src/languages/en.json
index e5066bac14..5d8546a89c 100644
--- a/apps/extension/src/languages/en.json
+++ b/apps/extension/src/languages/en.json
@@ -660,12 +660,11 @@
   "page.earn.terms.title": "Terms of Use",
   "page.earn.terms.contents": "dummy",
   "page.earn.transfer.intro.title": "Transfer USDC{br}to Noble chain{br}to start earning rewards",
-  "page.earn.transfer.intro.paragraph.first": "보유한 USDC를 USDC on Noble로 바꾸고",
-  "page.earn.transfer.intro.paragraph.first.sub-paragraph": "10초 이내로 완료돼요.",
-  "page.earn.transfer.intro.paragraph.second": "Earn할 금액을 입력하면 완료돼요.",
-  "page.earn.transfer.amount.from": "{token}을",
-  "page.earn.transfer.amount.to": "나의 {token}로",
-  "page.earn.transfer.amount.input.placeholder": "얼마나 바꿀까요?",
+  "page.earn.transfer.intro.paragraph.first": "Transfer USDC to Noble",
+  "page.earn.transfer.intro.paragraph.first.sub-paragraph": "~ 10 sec",
+  "page.earn.transfer.intro.paragraph.second": "Enter the amount to deposit",
+  "page.earn.transfer.amount.title": "Enter the amount{br}to transfer.",
+
   "page.earn.transfer.amount.tx.paragraph": "Keep this window open{br}to proceed with the next steps!",
   "page.send.select-asset.earn.title": "Select asset{br}to transfer to Noble",
 
diff --git a/apps/extension/src/pages/earn/transfer/amount.tsx b/apps/extension/src/pages/earn/transfer/amount.tsx
index 1ea1e8a0d4..91b6fa1269 100644
--- a/apps/extension/src/pages/earn/transfer/amount.tsx
+++ b/apps/extension/src/pages/earn/transfer/amount.tsx
@@ -1,4 +1,5 @@
 import React, {
+  Fragment,
   FunctionComponent,
   useEffect,
   useMemo,
@@ -24,7 +25,7 @@ import {
 import { useNavigate } from "react-router";
 import {
   Body2,
-  H2,
+  MobileH3,
   Subtitle3,
   Subtitle4,
 } from "../../../components/typography";
@@ -49,6 +50,8 @@ import { ColorPalette } from "../../../styles";
 import { Input } from "../components/input";
 import { NOBLE_CHAIN_ID } from "../../../config.ui";
 import { DenomHelper, ExtensionKVStore } from "@keplr-wallet/common";
+import { XAxis, YAxis } from "../../../components/axis";
+import { LongArrowDownIcon } from "../../../components/icon/long-arrow-down";
 
 export const EarnTransferAmountPage: FunctionComponent = observer(() => {
   const {
@@ -82,16 +85,7 @@ export const EarnTransferAmountPage: FunctionComponent = observer(() => {
     ibcTransferDestinationChainId
   );
 
-  const [errorMessage, setErrorMessage] = useState("");
-
   const currency = chainInfo.forceFindCurrency(initialCoinMinimalDenom);
-  const coinDenom = useMemo(() => {
-    if ("originCurrency" in currency && currency.originCurrency) {
-      return currency.originCurrency.coinDenom;
-    }
-    return currency.coinDenom;
-  }, [currency]);
-
   const account = accountStore.getAccount(chainId);
 
   const queryBalances = queriesStore.get(chainId).queryBalances;
@@ -554,75 +548,84 @@ export const EarnTransferAmountPage: FunctionComponent = observer(() => {
         }}
       >
         <Stack flex={1}>
-          <H2 color={ColorPalette["white"]}>
-            {intl.formatMessage(
-              { id: "page.earn.transfer.amount.from" },
-              {
-                token: `${coinDenom} on ${chainInfo.chainName}`,
-              }
-            )}
-          </H2>
-          <Gutter size="0.75rem" />
-          <Subtitle3 color={ColorPalette["white"]}>
-            {balance.hideIBCMetadata(true).toString()}{" "}
-            <span style={{ color: ColorPalette["gray-300"] }}>
-              {`on ${chainInfo.chainName}`}
-            </span>
-          </Subtitle3>
-          <Gutter size="1.75rem" />
-          <H2 color={ColorPalette["white"]}>
+          <MobileH3 color={ColorPalette["white"]}>
             {intl.formatMessage(
-              { id: "page.earn.transfer.amount.to" },
+              { id: "page.earn.transfer.amount.title" },
               {
-                token: `${coinDenom} on ${ibcTransferDestinationChainInfo.chainName}`,
+                br: <br />,
               }
             )}
-          </H2>
-          <Gutter size="2.25rem" />
+          </MobileH3>
+
+          <Gutter size="2rem" />
           <Input
             type="number"
-            placeholder={intl.formatMessage({
-              id: "page.earn.transfer.amount.input.placeholder",
-            })}
+            placeholder={balance.trim(true).hideIBCMetadata(true).toString()}
             value={sendConfigs.amountConfig.value}
             warning={error != null}
             onChange={(e) => {
               sendConfigs.amountConfig.setValue(e.target.value);
-              if (new Dec(e.target.value || "0").gt(balance.toDec())) {
-                setErrorMessage(
-                  intl.formatMessage({
-                    id: "page.earn.amount.error.insufficient-balance",
-                  })
-                );
-              } else {
-                setErrorMessage("");
-              }
             }}
             autoComplete="off"
           />
           <Gutter size="0.75rem" />
-          <Box
-            padding="0.25rem 0.5rem"
-            backgroundColor={ColorPalette["gray-550"]}
-            borderRadius="0.5rem"
-            width="fit-content"
-            cursor="pointer"
-            onClick={() => {
-              sendConfigs.amountConfig.setValue(
-                balance.hideDenom(true).toString()
-              );
-            }}
-          >
-            <Subtitle4 color={ColorPalette["gray-200"]}>
-              {balance.hideIBCMetadata(true).toString()}
-            </Subtitle4>
+          <Box padding="0.25rem 0">
+            <XAxis alignY="center" gap="0.25rem">
+              {sendConfigs.amountConfig.amount[0]
+                .toDec()
+                .equals(new Dec("0")) && (
+                <Box
+                  padding="0.25rem 0.375rem"
+                  backgroundColor={ColorPalette["gray-550"]}
+                  borderRadius="0.5rem"
+                  width="fit-content"
+                  cursor="pointer"
+                  onClick={() => {
+                    sendConfigs.amountConfig.setFraction(1);
+                  }}
+                >
+                  <Subtitle4 color={ColorPalette["gray-200"]}>
+                    {balance.trim(true).hideIBCMetadata(true).toString()}
+                  </Subtitle4>
+                </Box>
+              )}
+              <Subtitle3 color={ColorPalette["gray-300"]}>
+                {`on ${chainInfo.chainName}`}
+              </Subtitle3>
+            </XAxis>
           </Box>
 
-          {errorMessage && (
+          {error && (
             <Box marginTop="0.75rem">
-              <Body2 color={ColorPalette["red-300"]}>{errorMessage}</Body2>
+              <Body2 color={ColorPalette["red-300"]}>{error}</Body2>
             </Box>
           )}
+
+          {sendConfigs.amountConfig.amount[0].toDec().gt(new Dec("0")) && (
+            <Fragment>
+              <YAxis alignX="center">
+                <LongArrowDownIcon
+                  width="1.5rem"
+                  height="1.5rem"
+                  color={ColorPalette["gray-400"]}
+                />
+              </YAxis>
+              <Gutter size="1rem" />
+
+              <Box paddingLeft="0.25rem">
+                <MobileH3>
+                  {sendConfigs.amountConfig.amount[0]
+                    .trim(true)
+                    .hideIBCMetadata(true)
+                    .toString()}
+                </MobileH3>
+              </Box>
+              <Gutter size="0.5rem" />
+              <Subtitle3 color={ColorPalette["gray-300"]}>
+                {`on ${ibcTransferDestinationChainInfo.chainName}`}
+              </Subtitle3>
+            </Fragment>
+          )}
         </Stack>
       </Box>
     </HeaderLayout>