Show warning when fee is high

chainapsis · Mar 20, 2024 · 2eb42de · 2eb42de
1 parent 50736f2
commit 2eb42de
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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 (
+    <Box
+      padding="1.125rem"
+      borderRadius="0.5rem"
+      style={{
+        boxShadow: !checked
+          ? `0 0 0 ${theme.mode === "light" ? "1px" : "2px"} inset ${
+              theme.mode === "light"
+                ? ColorPalette["blue-400"]
+                : ColorPalette["blue-400"]
+            }`
+          : undefined,
+      }}
+      backgroundColor={
+        theme.mode === "light"
+          ? ColorPalette["blue-50"]
+          : ColorPalette["gray-600"]
+      }
+    >
+      <XAxis alignY="center">
+        <Caption1
+          color={
+            theme.mode === "light"
+              ? ColorPalette["blue-400"]
+              : ColorPalette["gray-100"]
+          }
+        >
+          <FormattedMessage
+            id="page.sign.cosmos.tx.high-fee-warning"
+            values={{
+              br: <br />,
+            }}
+          />
+        </Caption1>
+        <div style={{ flex: 1, minWidth: "0.25rem" }} />
+        <Box width="1.5rem" minWidth="1.5rem">
+          <Checkbox checked={checked} onChange={onChange} />
+        </Box>
+      </XAxis>
+    </Box>
+  );
+});
diff --git 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<SignInteractionStore["waitingData"]>;
 }> = 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 ? (
+            <React.Fragment>
+              <Gutter size="0.75rem" />
+              <HighFeeWarning
+                checked={isHighFeeApproved}
+                onChange={(v) => setIsHighFeeApproved(v)}
+              />
+            </React.Fragment>
+          ) : null}
         </Box>
 
         {isSendAuthzGrant ? (