improve swap v2 tx status tracking logic

Author: piatoss3612

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

@@ -1,9 +1,11 @@
 import React, { FunctionComponent, useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import {
+  BackgroundTxStatus,
   GetIBCHistoriesMsg,
   GetSkipHistoriesMsg,
   GetSwapV2HistoriesMsg,
+  GetTxExecutionMsg,
   HideSwapV2HistoryMsg,
   IBCHistory,
   RemoveIBCHistoryMsg,
@@ -12,12 +14,14 @@ import {
   SkipHistory,
   SwapV2History,
   SwapV2TxStatus,
+  TxExecution,
 } from "@keplr-wallet/background";
 import { InExtensionMessageRequester } from "@keplr-wallet/router-extension";
 import { BACKGROUND_PORT } from "@keplr-wallet/router";
 import { useLayoutEffectOnce } from "../../../../hooks/use-effect-once";
 import { Stack } from "../../../../components/stack";
 import { Box } from "../../../../components/box";
+import { Button } from "../../../../components/button";
 import { Gutter } from "../../../../components/gutter";
 import { useTheme } from "styled-components";
 import { ColorPalette } from "../../../../styles";
@@ -334,8 +338,8 @@ export const IbcHistoryView: FunctionComponent<{
               history={history}
               removeHistory={(id) => {
                 const requester = new InExtensionMessageRequester();
-                if (history.requiresNextTransaction && !history.trackDone) {
-                  // do not remove the history before the tracking is done
+                if (history.backgroundExecutionId && !history.trackDone) {
+                  // do not remove the history before the tracking is done (multi tx case)
                   const msg = new HideSwapV2HistoryMsg(id);
                   requester.sendMessage(BACKGROUND_PORT, msg);
                 } else {
@@ -1193,7 +1197,12 @@ const SkipHistoryViewItem: FunctionComponent<{
 
               return chainIds.map((chainId, i) => {
                 const chainInfo = chainStore.getChain(chainId);
-                const completed = !!history.trackDone || i < history.routeIndex;
+                // Only mark as completed based on routeIndex, not trackDone
+                const completed =
+                  i < history.routeIndex ||
+                  (i === history.routeIndex &&
+                    !!history.trackDone &&
+                    !history.trackError);
                 const error = !!history.trackError && i >= failedRouteIndex;
 
                 return (
@@ -1408,17 +1417,66 @@ const SwapV2HistoryViewItem: FunctionComponent<{
 }> = observer(({ history, removeHistory }) => {
   const { chainStore } = useStore();
 
+  console.log("history", history);
+
   const theme = useTheme();
   const intl = useIntl();
 
+  const [txExecution, setTxExecution] = useState<TxExecution | undefined>(
+    undefined
+  );
+
+  useEffect(() => {
+    if (!history.backgroundExecutionId) {
+      setTxExecution(undefined);
+      return;
+    }
+
+    const requester = new InExtensionMessageRequester();
+    requester
+      .sendMessage(
+        BACKGROUND_PORT,
+        new GetTxExecutionMsg(history.backgroundExecutionId)
+      )
+      .then((execution) => {
+        setTxExecution(execution);
+      })
+      .catch((e) => {
+        console.error("Failed to get tx execution:", e);
+        setTxExecution(undefined);
+      });
+  }, [history.backgroundExecutionId]);
+
+  // 실행 가능한 트랜잭션이 있는지 확인 (멀티 TX 케이스)
+  const hasExecutableTx = (() => {
+    if (!txExecution || !history.backgroundExecutionId) {
+      return false;
+    }
+    // pending 상태이면서 executableChainIds에 chainId가 포함된 트랜잭션이 있는 경우
+    return txExecution.txs.some(
+      (tx) =>
+        (tx.status === BackgroundTxStatus.PENDING ||
+          tx.status === BackgroundTxStatus.BLOCKED) &&
+        txExecution.executableChainIds.includes(tx.chainId)
+    );
+  })();
+
   const historyCompleted = (() => {
     if (!history.trackDone) {
       return false;
     }
 
-    // If there's a track error, check if swapRefundInfo exists (refund completed)
+    // If there's a track error, check if assetLocationInfo exists (refund completed)
     if (history.trackError) {
-      return !!history.swapRefundInfo;
+      return !!history.assetLocationInfo;
+    }
+
+    // SUCCESS 상태에서 assetLocationInfo가 없으면 destination에 도달한 것
+    if (
+      history.status === SwapV2TxStatus.SUCCESS &&
+      !history.assetLocationInfo
+    ) {
+      return true;
     }
 
     // Success or partial success with last route completed
@@ -1429,6 +1487,8 @@ const SwapV2HistoryViewItem: FunctionComponent<{
     );
   })();
 
+  console.log("historyCompleted", historyCompleted, history);
+
   const failedRouteIndex = (() => {
     // Failed if status is FAILED or if there's a trackError
     if (history.status === SwapV2TxStatus.FAILED || history.trackError) {
@@ -1514,7 +1574,7 @@ const SwapV2HistoryViewItem: FunctionComponent<{
               if (failedRouteIndex >= 0) {
                 if (
                   history.status === SwapV2TxStatus.FAILED &&
-                  history.swapRefundInfo
+                  history.assetLocationInfo
                 ) {
                   return intl.formatMessage({
                     id: "page.main.components.ibc-history-view.ibc-swap.item.refund.succeed",
@@ -1690,10 +1750,35 @@ const SwapV2HistoryViewItem: FunctionComponent<{
                 return route.chainId;
               });
 
+              // assetLocationInfo가 있으면 해당 체인까지는 asset이 릴리즈된 것이므로 성공으로 처리
+              const assetReleasedRouteIndex = (() => {
+                if (history.assetLocationInfo) {
+                  const idx = chainIds.findIndex(
+                    (chainId) => chainId === history.assetLocationInfo!.chainId
+                  );
+                  if (idx >= 0) {
+                    return idx;
+                  }
+                }
+                return -1;
+              })();
+
               return chainIds.map((chainId, i) => {
                 const chainInfo = chainStore.getChain(chainId);
-                const completed = !!history.trackDone || i < history.routeIndex;
-                const error = !!history.trackError && i >= failedRouteIndex;
+                // Asset이 릴리즈된 체인까지는 성공으로 처리
+                const completed =
+                  i < history.routeIndex ||
+                  (i === history.routeIndex &&
+                    !!history.trackDone &&
+                    !history.trackError) ||
+                  (assetReleasedRouteIndex >= 0 &&
+                    i <= assetReleasedRouteIndex);
+
+                // 에러는 assetReleasedRouteIndex보다 큰 인덱스에서만 표시
+                const error =
+                  !!history.trackError &&
+                  i >= failedRouteIndex &&
+                  (assetReleasedRouteIndex < 0 || i > assetReleasedRouteIndex);
 
                 return (
                   // 일부분 순환하는 경우도 이론적으로 가능은 하기 때문에 chain id를 key로 사용하지 않음.
@@ -1703,6 +1788,13 @@ const SwapV2HistoryViewItem: FunctionComponent<{
                     completed={!error && completed}
                     notCompletedBlink={(() => {
                       if (failedRoute) {
+                        // asset이 릴리즈된 체인까지는 blink하지 않음
+                        if (
+                          assetReleasedRouteIndex >= 0 &&
+                          i <= assetReleasedRouteIndex
+                        ) {
+                          return false;
+                        }
                         return i === failedRouteIndex;
                       }
 
@@ -1721,7 +1813,12 @@ const SwapV2HistoryViewItem: FunctionComponent<{
                         return "right";
                       }
 
-                      return i === failedRouteIndex ? "left" : "hide";
+                      // asset이 릴리즈된 체인이 있으면, 그 이후는 화살표 숨김
+                      if (assetReleasedRouteIndex >= 0) {
+                        return i > assetReleasedRouteIndex ? "hide" : "right";
+                      }
+
+                      return i === failedRouteIndex ? "left" : "right";
                     })()}
                     error={error}
                     isLast={chainIds.length - 1 === i}
@@ -1748,29 +1845,31 @@ const SwapV2HistoryViewItem: FunctionComponent<{
                   history.status === SwapV2TxStatus.PARTIAL_SUCCESS;
 
                 // status tracking이 오류로 끝난 경우
-                // SwapV2에서는 swapRefundInfo를 사용하여 환불 정보 표시
+                // SwapV2에서는 assetLocationInfo를 사용하여 환불 정보 표시
                 if (
                   history.trackDone &&
                   (history.trackError ||
                     history.status === SwapV2TxStatus.FAILED)
                 ) {
-                  if (history.swapRefundInfo) {
-                    if (chainStore.hasChain(history.swapRefundInfo.chainId)) {
-                      const swapRefundChain = chainStore.getChain(
-                        history.swapRefundInfo.chainId
+                  if (history.assetLocationInfo) {
+                    if (
+                      chainStore.hasChain(history.assetLocationInfo.chainId)
+                    ) {
+                      const assetLocationChain = chainStore.getChain(
+                        history.assetLocationInfo.chainId
                       );
 
                       return intl.formatMessage(
                         {
                           id: "page.main.components.ibc-history-view.skip-swap.failed.after-transfer.complete",
                         },
                         {
-                          chain: swapRefundChain.chainName,
-                          assets: history.swapRefundInfo.amount
+                          chain: assetLocationChain.chainName,
+                          assets: history.assetLocationInfo.amount
                             .map((amount) => {
                               return new CoinPretty(
                                 chainStore
-                                  .getChain(history.swapRefundInfo!.chainId)
+                                  .getChain(history.assetLocationInfo!.chainId)
                                   .forceFindCurrency(amount.denom),
                                 amount.amount
                               )
@@ -1796,6 +1895,27 @@ const SwapV2HistoryViewItem: FunctionComponent<{
           </Caption1>
         </VerticalCollapseTransition>
 
+        {/* 추가 트랜잭션 실행이 필요한 경우 버튼 표시 */}
+        <VerticalCollapseTransition collapsed={!hasExecutableTx}>
+          <Gutter size="1rem" />
+          <Button
+            text={intl.formatMessage({
+              id: "page.main.components.ibc-history-view.swap-v2.continue-transaction",
+            })}
+            size="small"
+            color="primary"
+            onClick={() => {
+              if (!txExecution) {
+                return;
+              }
+
+              // TODO: execution 데이터를 사용해서 다음 트랜잭션 실행 페이지로 이동
+              console.log("Execution data:", txExecution);
+              console.log("Pending txs:", txExecution.txs);
+            }}
+          />
+        </VerticalCollapseTransition>
+
         <VerticalCollapseTransition collapsed={historyCompleted}>
           <Gutter size="1rem" />
           <Box

packages/background/src/recent-send-history/handler.ts

@@ -300,8 +300,7 @@ const handleRecordTxWithSwapV2Msg: (
       msg.notificationInfo,
       msg.routeDurationSeconds,
       msg.txHash,
-      msg.isOnlyUseBridge,
-      msg.requiresNextTransaction
+      msg.isOnlyUseBridge
     );
   };
 };
@@ -335,6 +334,6 @@ const handleHideSwapV2HistoryMsg: (
   service: RecentSendHistoryService
 ) => InternalHandler<HideSwapV2HistoryMsg> = (service) => {
   return (_env, msg) => {
-    service.hideRecentSwapV2History(msg.id);
+    service.hideSwapV2History(msg.id);
   };
 };

packages/background/src/recent-send-history/messages.ts

@@ -576,8 +576,7 @@ export class RecordTxWithSwapV2Msg extends Message<string> {
     },
     public readonly routeDurationSeconds: number,
     public readonly txHash: string,
-    public readonly isOnlyUseBridge?: boolean,
-    public readonly requiresNextTransaction?: boolean
+    public readonly isOnlyUseBridge?: boolean
   ) {
     super();
   }