Merge pull request #1349 from chainapsis/delivan/keplr-874

Fix some style on earn transfer, withdraw page
chainapsis · Feb 28, 2025 · cbfef9c · cbfef9c
2 parents 9caf386 + c33448c
commit cbfef9c
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 88 deletions.
diff --git 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/components/input.tsx b/apps/extension/src/pages/earn/components/input.tsx
@@ -10,7 +10,7 @@ export const Input: FunctionComponent<
 
 const StyledInput = styled.input<{ warning?: boolean }>`
   font-weight: 700;
-  font-size: 1.875rem;
+  font-size: 1.75rem;
   line-height: 2.25rem;
 
   width: 100%;

diff --git 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>

diff --git a/apps/extension/src/pages/earn/withdraw/amount.tsx b/apps/extension/src/pages/earn/withdraw/amount.tsx
@@ -262,12 +262,12 @@ export const EarnWithdrawAmountPage: FunctionComponent = observer(() => {
             />
             <Gutter size="0.75rem" />
             <Box padding="0.25rem 0">
-              <XAxis alignY="center">
+              <XAxis alignY="center" gap="0.25rem">
                 {nobleEarnAmountConfig.amountConfig.amount[0]
                   .toDec()
                   .equals(new Dec("0")) && (
                   <Box
-                    padding="0.25rem 0.5rem"
+                    padding="0.25rem 0.375rem"
                     backgroundColor={ColorPalette["gray-550"]}
                     borderRadius="0.5rem"
                     width="fit-content"
@@ -281,11 +281,9 @@ export const EarnWithdrawAmountPage: FunctionComponent = observer(() => {
                     </Subtitle4>
                   </Box>
                 )}
-                <Box padding="0.25rem">
-                  <Subtitle3 color={ColorPalette["gray-300"]}>
-                    {`on ${chainInfo.chainName}`}
-                  </Subtitle3>
-                </Box>
+                <Subtitle3 color={ColorPalette["gray-300"]}>
+                  {`on ${chainInfo.chainName}`}
+                </Subtitle3>
               </XAxis>
             </Box>
 
@@ -308,11 +306,13 @@ export const EarnWithdrawAmountPage: FunctionComponent = observer(() => {
                 </YAxis>
                 <Gutter size="1rem" />
 
-                <MobileH3>
-                  {nobleEarnAmountConfig.amountConfig.expectedOutAmount
-                    .trim(true)
-                    .toString()}
-                </MobileH3>
+                <Box paddingLeft="0.25rem">
+                  <MobileH3>
+                    {nobleEarnAmountConfig.amountConfig.expectedOutAmount
+                      .trim(true)
+                      .toString()}
+                  </MobileH3>
+                </Box>
                 <Gutter size="0.5rem" />
                 <Subtitle3 color={ColorPalette["gray-300"]}>
                   {`on ${chainInfo.chainName}`}

diff --git a/apps/extension/src/pages/tx-result/success.tsx b/apps/extension/src/pages/tx-result/success.tsx
@@ -55,7 +55,7 @@ export const TxResultSuccessPage: FunctionComponent = observer(() => {
             }
           );
         }
-      }, 3000);
+      }, 2000);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFromEarnTransfer]);
@@ -92,14 +92,16 @@ export const TxResultSuccessPage: FunctionComponent = observer(() => {
           </Subtitle2>
         </Box>
         <Gutter size="2.25rem" />
-        <Button
-          size="large"
-          onClick={() => navigate("/")}
-          text={intl.formatMessage({ id: "page.tx-result.success.done" })}
-          style={{
-            width: "18.125rem",
-          }}
-        />
+        {!isFromEarnTransfer && (
+          <Button
+            size="large"
+            onClick={() => navigate("/")}
+            text={intl.formatMessage({ id: "page.tx-result.success.done" })}
+            style={{
+              width: "18.125rem",
+            }}
+          />
+        )}
       </Stack>
     </Container>
   );