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(() => {
-