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/components/input.tsx b/apps/extension/src/pages/earn/components/input.tsx index 45c3effa33..7e7f11f7ae 100644 --- 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 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(() => { }} > -

- {intl.formatMessage( - { id: "page.earn.transfer.amount.from" }, - { - token: `${coinDenom} on ${chainInfo.chainName}`, - } - )} -

- - - {balance.hideIBCMetadata(true).toString()}{" "} - - {`on ${chainInfo.chainName}`} - - - -

+ {intl.formatMessage( - { id: "page.earn.transfer.amount.to" }, + { id: "page.earn.transfer.amount.title" }, { - token: `${coinDenom} on ${ibcTransferDestinationChainInfo.chainName}`, + br:
, } )} -

- + + + { 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" /> - { - sendConfigs.amountConfig.setValue( - balance.hideDenom(true).toString() - ); - }} - > - - {balance.hideIBCMetadata(true).toString()} - + + + {sendConfigs.amountConfig.amount[0] + .toDec() + .equals(new Dec("0")) && ( + { + sendConfigs.amountConfig.setFraction(1); + }} + > + + {balance.trim(true).hideIBCMetadata(true).toString()} + + + )} + + {`on ${chainInfo.chainName}`} + + - {errorMessage && ( + {error && ( - {errorMessage} + {error} )} + + {sendConfigs.amountConfig.amount[0].toDec().gt(new Dec("0")) && ( + + + + + + + + + {sendConfigs.amountConfig.amount[0] + .trim(true) + .hideIBCMetadata(true) + .toString()} + + + + + {`on ${ibcTransferDestinationChainInfo.chainName}`} + + + )}
diff --git a/apps/extension/src/pages/earn/withdraw/amount.tsx b/apps/extension/src/pages/earn/withdraw/amount.tsx index 96f683fc4a..5c87c435bc 100644 --- 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(() => { /> - + {nobleEarnAmountConfig.amountConfig.amount[0] .toDec() .equals(new Dec("0")) && ( { )} - - - {`on ${chainInfo.chainName}`} - - + + {`on ${chainInfo.chainName}`} + @@ -308,11 +306,13 @@ export const EarnWithdrawAmountPage: FunctionComponent = observer(() => { - - {nobleEarnAmountConfig.amountConfig.expectedOutAmount - .trim(true) - .toString()} - + + + {nobleEarnAmountConfig.amountConfig.expectedOutAmount + .trim(true) + .toString()} + + {`on ${chainInfo.chainName}`} diff --git a/apps/extension/src/pages/tx-result/success.tsx b/apps/extension/src/pages/tx-result/success.tsx index 1a9ba4915c..d6075b6160 100644 --- 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(() => { -