[FRE-1228] refactor swap execution page to separate logic and fix pen…

…ding screen (#475)

Co-authored-by: Nur Fikri <[email protected]>

.changeset/thirty-coins-promise.md

@@ -0,0 +1,5 @@
+---
+'@skip-go/widget': patch
+---
+
+fix timeout page freeze

packages/widget/src/pages/ErrorPage/ErrorPageTimeout.tsx

@@ -8,7 +8,10 @@ import { useTheme } from "styled-components";
 import { SwapPageHeader } from "../SwapPage/SwapPageHeader";
 import { errorAtom } from "@/state/errorPage";
 import { currentPageAtom, Routes } from "@/state/router";
-import { useSetAtom } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useBroadcastedTxsStatus } from "../SwapExecutionPage/useBroadcastedTxs";
+import { swapExecutionStateAtom } from "@/state/swapExecutionPage";
+import { useEffect } from "react";
 
 export type ErrorPageTimeoutProps = {
   txHash: string
@@ -22,8 +25,23 @@ export const ErrorPageTimeout = ({
   onClickBack,
 }: ErrorPageTimeoutProps) => {
   const theme = useTheme();
-  const setErrorAtom = useSetAtom(errorAtom);
+  const [error, setError] = useAtom(errorAtom);
   const setCurrentPage = useSetAtom(currentPageAtom);
+  const {
+    route,
+    transactionDetailsArray,
+  } = useAtomValue(swapExecutionStateAtom);
+
+  const { data } = useBroadcastedTxsStatus({
+    txsRequired: route?.txsRequired,
+    txs: transactionDetailsArray,
+  });
+
+  useEffect(() => {
+    if (error && data?.isSettled) {
+      setError(undefined);
+    }
+  }, [data?.isSettled, error, setError]);
 
   return (
     <>
@@ -32,10 +50,8 @@ export const ErrorPageTimeout = ({
           label: "Back",
           icon: ICONS.thinArrow,
           onClick: () => {
-            setErrorAtom(undefined);
-            if (onClickBack) {
-              onClickBack();
-            }
+            setError(undefined);
+            onClickBack?.();
             setCurrentPage(Routes.SwapPage);
           },
         }}

packages/widget/src/pages/ErrorPage/ErrorPageTransactionReverted.tsx

@@ -47,9 +47,7 @@ export const ErrorPageTransactionReverted = ({
           icon: ICONS.thinArrow,
           onClick: () => {
             setErrorAtom(undefined);
-            if (onClickBack) {
-              onClickBack();
-            }
+            onClickBack?.();
             setCurrentPage(Routes.SwapPage);
           }
         }}

packages/widget/src/pages/ErrorPage/ErrorPageUnexpected.tsx

@@ -30,9 +30,7 @@ export const ErrorPageUnexpected = ({ error, onClickBack }: ErrorPageUnexpectedP
           icon: ICONS.thinArrow,
           onClick: () => {
             setErrorAtom(undefined);
-            if (onClickBack) {
-              onClickBack();
-            }
+            onClickBack?.();
             setCurrentPage(Routes.SwapPage);
           }
         }}

packages/widget/src/pages/SwapExecutionPage/SwapExecutionButton.tsx

@@ -0,0 +1,139 @@
+// SwapExecutionButton.tsx
+import { MainButton } from "@/components/MainButton";
+import { ICONS } from "@/icons";
+import { SwapExecutionState } from "./SwapExecutionPage";
+import { useTheme } from "styled-components";
+import pluralize from "pluralize";
+import { convertSecondsToMinutesOrHours } from "@/utils/number";
+import { useSetAtom } from "jotai";
+import { clearAssetInputAmountsAtom } from "@/state/swapPage";
+import { currentPageAtom, Routes } from "@/state/router";
+import { errorAtom, ErrorType } from "@/state/errorPage";
+import NiceModal from "@ebay/nice-modal-react";
+import { Modals } from "@/modals/registerModals";
+import { RouteResponse } from "@skip-go/client";
+import { ClientOperation } from "@/utils/clientType";
+
+interface SwapExecutionButtonProps {
+  swapExecutionState: SwapExecutionState | undefined;
+  route: RouteResponse | undefined;
+  signaturesRemaining: number;
+  lastOperation: ClientOperation;
+  connectRequiredChains: (openModal?: boolean) => Promise<void>;
+  submitExecuteRouteMutation: () => void;
+}
+
+export const SwapExecutionButton: React.FC<SwapExecutionButtonProps> = ({
+  swapExecutionState,
+  route,
+  signaturesRemaining,
+  lastOperation,
+  connectRequiredChains,
+  submitExecuteRouteMutation,
+}) => {
+  const theme = useTheme();
+  const setError = useSetAtom(errorAtom);
+  const setCurrentPage = useSetAtom(currentPageAtom);
+  const clearAssetInputAmounts = useSetAtom(clearAssetInputAmountsAtom);
+
+  switch (swapExecutionState) {
+    case SwapExecutionState.recoveryAddressUnset:
+      return (
+        <MainButton
+          label="Set recovery address"
+          icon={ICONS.rightArrow}
+          onClick={() => {
+            connectRequiredChains(true);
+          }}
+        />
+      );
+    case SwapExecutionState.destinationAddressUnset:
+      return (
+        <MainButton
+          label="Set destination address"
+          icon={ICONS.rightArrow}
+          onClick={() => {
+            const destinationChainID = route?.destAssetChainID;
+            if (!destinationChainID) return;
+            NiceModal.show(Modals.SetAddressModal, {
+              signRequired: lastOperation.signRequired,
+              chainId: destinationChainID,
+            });
+          }}
+        />
+      );
+    case SwapExecutionState.ready: {
+      const onClickConfirmSwap = () => {
+        if (route?.txsRequired && route.txsRequired > 1) {
+          setError({
+            errorType: ErrorType.AdditionalSigningRequired,
+            onClickContinue: () => submitExecuteRouteMutation(),
+            signaturesRequired: route.txsRequired,
+          });
+          return;
+        }
+        submitExecuteRouteMutation();
+      };
+      return (
+        <MainButton
+          label="Confirm swap"
+          icon={ICONS.rightArrow}
+          onClick={onClickConfirmSwap}
+        />
+      );
+    }
+    case SwapExecutionState.validatingGasBalance:
+      return (
+        <MainButton
+          label="Validating gas and balance"
+          icon={ICONS.rightArrow}
+          loading
+        />
+      );
+    case SwapExecutionState.waitingForSigning:
+      return (
+        <MainButton label="Confirm swap" icon={ICONS.rightArrow} loading />
+      );
+    case SwapExecutionState.approving:
+      return (
+        <MainButton label="Approving allowance" icon={ICONS.rightArrow} loading />
+      );
+    case SwapExecutionState.pending:
+      return (
+        <MainButton
+          label="Swap in progress"
+          loading
+          loadingTimeString={convertSecondsToMinutesOrHours(
+            route?.estimatedRouteDurationSeconds
+          )}
+        />
+      );
+    case SwapExecutionState.signaturesRemaining:
+      return (
+        <MainButton
+          label={`${signaturesRemaining} ${pluralize(
+            "signature",
+            signaturesRemaining
+          )} ${signaturesRemaining > 1 ? "are" : "is"} still required`}
+          loading
+          loadingTimeString={convertSecondsToMinutesOrHours(
+            route?.estimatedRouteDurationSeconds
+          )}
+        />
+      );
+    case SwapExecutionState.confirmed:
+      return (
+        <MainButton
+          label="Swap again"
+          icon={ICONS.checkmark}
+          backgroundColor={theme.success.text}
+          onClick={() => {
+            clearAssetInputAmounts();
+            setCurrentPage(Routes.SwapPage);
+          }}
+        />
+      );
+    default:
+      return null;
+  }
+};