Merge pull request #1708 from chainapsis/rowan/KEPLR-1550

Multiple txs case swap

Author: piatoss3612

apps/extension/src/pages/ibc-swap/index.tsx

@@ -4,6 +4,7 @@ import {
   GetIBCHistoriesMsg,
   GetSkipHistoriesMsg,
   GetSwapV2HistoriesMsg,
+  HideSwapV2HistoryMsg,
   IBCHistory,
   RemoveIBCHistoryMsg,
   RemoveSkipHistoryMsg,
@@ -333,12 +334,18 @@ export const IbcHistoryView: FunctionComponent<{
               history={history}
               removeHistory={(id) => {
                 const requester = new InExtensionMessageRequester();
-                const msg = new RemoveSwapV2HistoryMsg(id);
-                requester
-                  .sendMessage(BACKGROUND_PORT, msg)
-                  .then((histories) => {
-                    setSwapV2Histories(histories);
-                  });
+                if (history.requiresNextTransaction && !history.trackDone) {
+                  // do not remove the history before the tracking is done
+                  const msg = new HideSwapV2HistoryMsg(id);
+                  requester.sendMessage(BACKGROUND_PORT, msg);
+                } else {
+                  const msg = new RemoveSwapV2HistoryMsg(id);
+                  requester
+                    .sendMessage(BACKGROUND_PORT, msg)
+                    .then((histories) => {
+                      setSwapV2Histories(histories);
+                    });
+                }
               }}
             />
           );
@@ -1436,6 +1443,10 @@ const SwapV2HistoryViewItem: FunctionComponent<{
     }
   })();
 
+  if (history.hidden) {
+    return null;
+  }
+
   return (
     <Box
       padding="1.25rem"

apps/extension/src/pages/main/components/ibc-history-view/index.tsx

@@ -54,6 +54,7 @@ import { useNavigate } from "react-router";
 import { ApproveIcon, CancelIcon } from "../../../../components/button";
 import { HeaderProps } from "../../../../layouts/header/types";
 import { getKeplrFromWindow } from "@keplr-wallet/stores";
+import { UnsignedEVMTransactionWithErc20Approvals } from "@keplr-wallet/stores-eth";
 
 export const EthereumSignTxView: FunctionComponent<{
   interactionData: NonNullable<SignEthereumInteractionStore["waitingData"]>;
@@ -103,30 +104,89 @@ export const EthereumSignTxView: FunctionComponent<{
     gasConfig
   );
 
-  const [signingDataBuff, setSigningDataBuff] = useState(Buffer.from(message));
+  const [requiredErc20Approvals] = useState<
+    NonNullable<
+      UnsignedEVMTransactionWithErc20Approvals["requiredErc20Approvals"]
+    >
+  >(() => {
+    const parsed = JSON.parse(Buffer.from(message).toString("utf8"));
+    if (
+      parsed.requiredErc20Approvals &&
+      Array.isArray(parsed.requiredErc20Approvals) &&
+      parsed.requiredErc20Approvals.length > 0
+    ) {
+      return parsed.requiredErc20Approvals;
+    }
+    return [];
+  });
+
+  const [signingDataBuff, setSigningDataBuff] = useState(() => {
+    const parsed = JSON.parse(Buffer.from(message).toString("utf8"));
+    if (parsed.requiredErc20Approvals) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { requiredErc20Approvals: _, ...unsignedTx } = parsed;
+      return Buffer.from(JSON.stringify(unsignedTx), "utf8");
+    }
+    return Buffer.from(message);
+  });
   const [preferNoSetFee, setPreferNoSetFee] = useState<boolean>(false);
 
+  const simulatorKey = useMemo(() => {
+    if (requiredErc20Approvals.length === 0) {
+      return "evm/native";
+    }
+    return "evm/native/bundle";
+  }, [requiredErc20Approvals]);
+
   const gasSimulator = useGasSimulator(
     new MemoryKVStore("gas-simulator.ethereum.sign"),
     chainStore,
     chainInfo.chainId,
     gasConfig,
     feeConfig,
-    "evm/native",
+    simulatorKey,
     () => {
       if (chainInfo.evm == null) {
         throw new Error("Gas simulator is only working with EVM info");
       }
 
       const unsignedTx = JSON.parse(Buffer.from(message).toString("utf8"));
+      if (requiredErc20Approvals.length === 0) {
+        return {
+          simulate: () =>
+            ethereumAccount.simulateGas(account.ethereumHexAddress, {
+              to: unsignedTx.to,
+              data: unsignedTx.data,
+              value: unsignedTx.value,
+            }),
+        };
+      }
 
+      if (requiredErc20Approvals.length > 1) {
+        throw new Error("Multiple required ERC20 approvals are not supported");
+      }
+
+      // NOTE:
+      // If multiple ERC20 approvals are needed, or
+      // bundle simulation using state diff tracing is not possible,
+      // execute ERC20 approvals first—then simulate the main transaction on this page.
       return {
         simulate: () =>
-          ethereumAccount.simulateGas(account.ethereumHexAddress, {
-            to: unsignedTx.to,
-            data: unsignedTx.data,
-            value: unsignedTx.value,
-          }),
+          ethereumAccount
+            .simulateGasWithPendingErc20Approval(account.ethereumHexAddress, {
+              to: unsignedTx.to,
+              data: unsignedTx.data,
+              value: unsignedTx.value,
+              requiredErc20Approvals,
+            })
+            .then((result) => {
+              const { gasUsed } = result;
+              // only consider the gas used for the main tx
+              if (gasUsed == null || gasUsed <= 0) {
+                throw new Error("Gas used is not positive");
+              }
+              return { gasUsed };
+            }),
       };
     }
   );
@@ -185,6 +245,7 @@ export const EthereumSignTxView: FunctionComponent<{
   }, []);
 
   useEffect(() => {
+    // NOTE: set fee only for external requests
     if (!interactionData.isInternal) {
       const unsignedTx = JSON.parse(Buffer.from(message).toString("utf8"));
 
@@ -298,6 +359,7 @@ export const EthereumSignTxView: FunctionComponent<{
         const { to, gasLimit, value, data, chainId }: UnsignedTransaction =
           JSON.parse(Buffer.from(message).toString("utf8"));
 
+        // TODO: bundle simulation인 경우에 대한 처리 필요
         const l1DataFee = await ethereumAccount.simulateOpStackL1Fee({
           to,
           gasLimit,