From 2eb42de145f7e9ab0985b507d5b00e1411f30b54 Mon Sep 17 00:00:00 2001 From: Thunnini Date: Wed, 20 Mar 2024 16:27:48 +0900 Subject: [PATCH] Show warning when fee is high --- packages/extension/src/languages/en.json | 1 + packages/extension/src/languages/ko.json | 1 + .../components/high-fee-warning/index.tsx | 58 +++++++++++++++++++ .../src/pages/sign/cosmos/tx/view.tsx | 48 +++++++++++++-- 4 files changed, 104 insertions(+), 4 deletions(-) create mode 100644 packages/extension/src/pages/sign/components/high-fee-warning/index.tsx diff --git a/packages/extension/src/languages/en.json b/packages/extension/src/languages/en.json index 4c52929617..6ebfee0795 100644 --- a/packages/extension/src/languages/en.json +++ b/packages/extension/src/languages/en.json @@ -392,6 +392,7 @@ "page.sign.cosmos.tx.warning-paragraph": "Error: SIGN_MODE_DIRECT can’t be signed on Ledger. Contact the web app provider to fix this issue.", "page.sign.cosmos.tx.readonly-memo.empty": "(Empty)", "page.sign.cosmos.tx.view-data-button": "View data", + "page.sign.cosmos.tx.high-fee-warning": "The transaction fee is unusually high.{br}I confirm and agree to proceed, nevertheless.", "page.sign.cosmos.icns.title": "Request Registration", "page.sign.cosmos.lava.guide.title": "πŸŒ‹ Using Lava Endpoints", "page.sign.cosmos.lava.guide.paragraph": "You are currently using endpoints provided Lava.", diff --git a/packages/extension/src/languages/ko.json b/packages/extension/src/languages/ko.json index eb5c8ab318..7be45c4998 100644 --- a/packages/extension/src/languages/ko.json +++ b/packages/extension/src/languages/ko.json @@ -386,6 +386,7 @@ "page.sign.cosmos.tx.warning-paragraph": "였λ₯˜: SIGN_MODE_DIRECTλŠ” λ ›μ €μ—μ„œ μ„œλͺ…ν•  수 μ—†μŠ΅λ‹ˆλ‹€. 이슈 해결을 μœ„ν•΄ ν•΄λ‹Ή μ›Ή μ•±μ˜ κ΄€λ¦¬μžμ—κ²Œ μ—°λ½ν•˜μ‹œκΈΈ λ°”λžλ‹ˆλ‹€.", "page.sign.cosmos.tx.readonly-memo.empty": "(λΉ„μ–΄μžˆμŒ)", "page.sign.cosmos.tx.view-data-button": "데이터 쑰회", + "page.sign.cosmos.tx.high-fee-warning": "νŠΈλžœμž­μ…˜ μˆ˜μˆ˜λ£Œκ°€ ν‰μ†Œλ³΄λ‹€ λ†’μŠ΅λ‹ˆλ‹€.{br}κ·Έλž˜λ„ 계속 μ§„ν–‰ν•˜κ² μŠ΅λ‹ˆλ‹€.", "page.sign.cosmos.icns.title": "ICNS 등둝 μš”μ²­", "page.sign.adr36.title": "μ†Œμœ κΆŒ 증λͺ…", diff --git a/packages/extension/src/pages/sign/components/high-fee-warning/index.tsx b/packages/extension/src/pages/sign/components/high-fee-warning/index.tsx new file mode 100644 index 0000000000..33d05e88c3 --- /dev/null +++ b/packages/extension/src/pages/sign/components/high-fee-warning/index.tsx @@ -0,0 +1,58 @@ +import React, { FunctionComponent } from "react"; +import { Box } from "../../../../components/box"; +import { XAxis } from "../../../../components/axis"; +import { Caption1 } from "../../../../components/typography"; +import { Checkbox } from "../../../../components/checkbox"; +import { ColorPalette } from "../../../../styles"; +import { observer } from "mobx-react-lite"; +import { useTheme } from "styled-components"; +import { FormattedMessage } from "react-intl"; + +export const HighFeeWarning: FunctionComponent<{ + checked: boolean; + onChange: (checked: boolean) => void; +}> = observer(({ checked, onChange }) => { + const theme = useTheme(); + + return ( + + + + , + }} + /> + +
+ + + + + + ); +}); diff --git a/packages/extension/src/pages/sign/cosmos/tx/view.tsx b/packages/extension/src/pages/sign/cosmos/tx/view.tsx index 8662b69e15..e8f3ab9ac9 100644 --- a/packages/extension/src/pages/sign/cosmos/tx/view.tsx +++ b/packages/extension/src/pages/sign/cosmos/tx/view.tsx @@ -20,7 +20,7 @@ import { } from "@keplr-wallet/hooks"; import { useStore } from "../../../../stores"; import { unescapeHTML } from "@keplr-wallet/common"; -import { CoinPretty, Int } from "@keplr-wallet/unit"; +import { CoinPretty, Dec, Int } from "@keplr-wallet/unit"; import { BackButton } from "../../../../layouts/header/components"; import { HeaderLayout } from "../../../../layouts/header"; import { useInteractionInfo } from "../../../../hooks"; @@ -44,6 +44,7 @@ import { GenericAuthorization } from "@keplr-wallet/stores/build/query/cosmos/au import { Checkbox } from "../../../../components/checkbox"; import { FeeSummary } from "../../components/fee-summary"; import { FeeControl } from "../../../../components/input/fee-control"; +import { HighFeeWarning } from "../../components/high-fee-warning"; /** * μ„œλͺ…을 μ²˜λ¦¬ν• λ•Œ μ›ΉνŽ˜μ΄μ§€μ—μ„œ μ—°μ†μ μœΌλ‘œ μ„œλͺ…을 μš”μ²­ν–ˆμ„ 수 있고 @@ -59,8 +60,13 @@ import { FeeControl } from "../../../../components/input/fee-control"; export const CosmosTxView: FunctionComponent<{ interactionData: NonNullable; }> = observer(({ interactionData }) => { - const { chainStore, queriesStore, signInteractionStore, uiConfigStore } = - useStore(); + const { + chainStore, + queriesStore, + signInteractionStore, + uiConfigStore, + priceStore, + } = useStore(); const intl = useIntl(); const theme = useTheme(); @@ -338,11 +344,35 @@ export const CosmosTxView: FunctionComponent<{ Error | undefined >(undefined); + const isHighFee = (() => { + if (feeConfig.fees) { + let sumPrice = new Dec(0); + for (const fee of feeConfig.fees) { + const currency = chainStore + .getChain(chainId) + .findCurrency(fee.currency.coinMinimalDenom); + if (currency && currency.coinGeckoId) { + const price = priceStore.calculatePrice( + new CoinPretty(currency, fee.toCoin().amount), + "usd" + ); + if (price) { + sumPrice = sumPrice.add(price.toDec()); + } + } + } + return sumPrice.gte(new Dec(5)); + } + return false; + })(); + const [isHighFeeApproved, setIsHighFeeApproved] = useState(false); + const buttonDisabled = txConfigsValidate.interactionBlocked || !signDocHelper.signDocWrapper || isLedgerAndDirect || - (isSendAuthzGrant && !isSendAuthzGrantChecked); + (isSendAuthzGrant && !isSendAuthzGrantChecked) || + (isHighFee && !isHighFeeApproved); const approve = async () => { if (signDocHelper.signDocWrapper) { @@ -644,6 +674,16 @@ export const CosmosTxView: FunctionComponent<{ /> ); })()} + + {isHighFee ? ( + + + setIsHighFeeApproved(v)} + /> + + ) : null} {isSendAuthzGrant ? (