@xswap-link/sdk 0.3.2 → 0.3.4

package/src/components/TxConfigForm/Form.tsx

@@ -10,17 +10,19 @@ import {
 import { ethers } from "ethers";
 import { Config, useAccount, useSendTransaction, useSwitchChain } from "wagmi";
 import { Chain, Route, Token, TokenBalances, TokenPrices } from "@src/models";
-import { getCustomTokenData, getPrices, getRoute } from "@src/services";
 import {
-  getAllowanceOf,
-  getBalances,
-  parseWeb3Error,
-  safeBigNumberFrom,
-  weiToHumanReadable,
-} from "@src/utils";
-import { CCIP_EXPLORER, ROUTE_TIMEOUT_MS } from "@src/constants";
+  getCustomTokenData,
+  getPrices,
+  getRoute,
+  renderTxStatus,
+} from "@src/services";
+import { getBalances, safeBigNumberFrom } from "@src/utils";
+import {
+  DEFAULT_REQUEST_ABORT_MSG,
+  DEFAULT_SOURCE_CHAIN_ID,
+  ROUTE_TIMEOUT_MS,
+} from "@src/constants";
 import { TxConfigFormProps } from "@src/components";
-import { useDebounce } from "@src/hooks";
 import { ADDRESSES } from "@src/contracts";
 import { History } from "./History";
 import { TopBar } from "./TopBar";
@@ -30,23 +32,10 @@ import { Summary } from "./Summary";
 import { SwapPanel } from "./SwapPanel";
 import { ErrorField } from "./ErrorField";
 import { Description } from "./Description";
-import { DEFAULT_SOURCE_CHAIN_ID } from "@src/constants";
 import { Button } from "./Button";
 import { getChainId, waitForTransactionReceipt } from "wagmi/actions";
-import { renderTxStatus } from "@src/services";
-import { ConfirmationAmount } from "./ConfirmationAmount";
-import {
-  ArrowDownIcon,
-  ArrowRightIcon,
-  ArrowUpRightIcon,
-  CheckIcon,
-  CloseIcon,
-  ErrorIcon,
-  SignIcon,
-  SuccessIcon,
-} from "../icons";
-import { Spinner } from "../Spinner";
-import { UnknownTokenLogo } from "../UnknownTokenLogo/UnknownTokenLogo";
+import { ConfirmationView } from "./ConfirmationView";
+import { ConnectWalletPrompt } from "./ConnectWalletPrompt";
 
 export const Form = ({
   integratorId,
@@ -55,7 +44,7 @@ export const Form = ({
   customContractCalls,
   desc,
   supportedChains,
-  retrunTransactions,
+  returnTransactions,
   dstDisplayTokenAddr,
   wagmiConfig,
   onSubmit,
@@ -63,7 +52,7 @@ export const Form = ({
   setBackdropClickDisabled,
 }: TxConfigFormProps & {
   wagmiConfig: Config;
-  retrunTransactions: boolean;
+  returnTransactions: boolean;
   onSubmit: (route: Route) => void;
   onClose: () => void;
   setBackdropClickDisabled: (disabled: boolean) => void;
@@ -74,7 +63,7 @@ export const Form = ({
   const [dstDisplayToken, setDstDisplayToken] = useState<Token>();
   const [srcChain, setSrcChain] = useState<Chain>();
   const [srcToken, setSrcToken] = useState<Token>();
-  const [amount, setAmount] = useState<string>("");
+  const [amount, setAmount] = useState("");
   const [paymentToken, setPaymentToken] = useState<Token>();
   const [route, setRoute] = useState<Route>();
   const [expressChecked, setExpressChecked] = useState(true);
@@ -84,7 +73,7 @@ export const Form = ({
   const [balances, setBalances] = useState<TokenBalances>();
   const [settingsShown, setSettingsShown] = useState(false);
   const [formError, setFormError] = useState("");
-  const [slippage, setSlippage] = useState<string>("1.5");
+  const [slippage, setSlippage] = useState("1.5");
   const [feesDetailsShown, setFeesDetailsShown] = useState(false);
   const [executingTransactions, setExecutingTransactions] = useState(false);
   const [transactionSuccessHash, setTransactionSuccessHash] = useState<
@@ -95,25 +84,12 @@ export const Form = ({
   const [approveTxLoading, setApproveTxLoading] = useState(false);
   const [approveTxDone, setApproveTxDone] = useState(false);
   const [transactionError, setTransactionError] = useState<string | null>(null);
-  const currentRouteRequestNonce = useRef<number>(0);
-
-  // Allowance section
-  const prevAllowanceValuesRef = useRef({
-    srcChainId: srcChain?.chainId,
-    srcTokenAddress: srcToken?.address,
-    routeTo: ethers.constants.AddressZero,
-  });
-
-  const currentAllowanceRequestNonce = useRef<number>(0);
 
-  const [isAllowanceLoading, setIsAllowanceLoading] = useState(false);
-  const [srcTokenAllowance, setSrcTokenAllowance] = useState("0");
-  // End of Allowance section
+  const routeAbortController = useRef<AbortController | null>(null);
 
   // Wagmi hook to execute transactions
   const { sendTransaction } = useSendTransaction({ config: wagmiConfig });
 
-  const debouncedAmount = useDebounce(amount, 1000);
   const account = useAccount();
   const { switchChainAsync } = useSwitchChain();
 
@@ -186,7 +162,7 @@ export const Form = ({
         srcChain &&
         srcToken &&
         dstChain &&
-        debouncedAmount &&
+        amount &&
         paymentToken &&
         signer &&
         slippage
@@ -206,99 +182,54 @@ export const Form = ({
         `Configuration error: selected token ($${srcToken.symbol} ${srcToken.name}) has unknown decimals param.`,
       );
 
-    const nonce = Date.now();
-    currentRouteRequestNonce.current = nonce;
-    getRoute({
-      integratorId,
-      fromAmount: ethers.utils
-        .parseUnits(debouncedAmount, srcToken.decimals)
-        .toString(),
-      fromAddress: signer || ADDRESSES[srcChain.chainId]!.FeeCollector,
-      fromChain: srcChain.chainId,
-      fromToken: srcToken.address,
-      toAddress: signer || ADDRESSES[dstChain.chainId]!.FeeCollector,
-      toChain: dstChainId,
-      toToken: dstTokenAddr,
-      paymentToken: paymentToken.address,
-      slippage: Number(slippage),
-      expressDelivery: expressChecked,
-      customContractCalls,
-    })
+    if (routeAbortController.current) {
+      routeAbortController.current.abort(DEFAULT_REQUEST_ABORT_MSG);
+    }
+    routeAbortController.current = new AbortController();
+
+    getRoute(
+      {
+        integratorId,
+        fromAmount: ethers.utils
+          .parseUnits(amount, srcToken.decimals)
+          .toString(),
+        fromAddress: signer || ADDRESSES[srcChain.chainId]!.FeeCollector,
+        fromChain: srcChain.chainId,
+        fromToken: srcToken.address,
+        toAddress: signer || ADDRESSES[dstChain.chainId]!.FeeCollector,
+        toChain: dstChainId,
+        toToken: dstTokenAddr,
+        paymentToken: paymentToken.address,
+        slippage: Number(slippage),
+        expressDelivery: expressChecked,
+        customContractCalls,
+      },
+      routeAbortController.current.signal,
+    )
       .then((response) => {
-        if (nonce !== currentRouteRequestNonce.current) {
-          return;
-        }
         setRoute(response);
         setFormError("");
+        setIsGettingRoute(false);
+        routeAbortController.current = null;
       })
       .catch((err) => {
-        setFormError(err.message);
+        if (err !== DEFAULT_REQUEST_ABORT_MSG) {
+          setFormError(err.message);
+        }
       })
       .finally(() => {
-        setIsGettingRoute(false);
         clearTimeout(timeout);
       });
   }, [
+    amount,
     signer,
     srcChain,
     srcToken,
-    debouncedAmount,
     paymentToken,
     slippage,
     expressChecked,
   ]);
 
-  // Handle fetching allowance
-  useEffect(() => {
-    (async () => {
-      if (
-        !signer ||
-        !srcToken?.address ||
-        !srcChain?.publicRpcUrls[0] ||
-        srcToken?.address === ethers.constants.AddressZero
-      ) {
-        return;
-      }
-      if (route && route.transactions.swap?.to) {
-        const {
-          srcChainId: prevFromChainId,
-          srcTokenAddress: prevFromTokenAddress,
-          routeTo: prevRouteTo,
-        } = prevAllowanceValuesRef.current;
-
-        const hasChanges =
-          srcChain?.chainId !== prevFromChainId ||
-          srcToken?.address !== prevFromTokenAddress ||
-          route.transactions.swap?.to !== prevRouteTo;
-
-        if (!hasChanges) {
-          return;
-        }
-
-        prevAllowanceValuesRef.current = {
-          srcChainId: srcChain?.chainId,
-          srcTokenAddress: srcToken?.address,
-          routeTo: route.transactions.swap?.to,
-        };
-
-        const nonce = Date.now();
-        currentAllowanceRequestNonce.current = nonce;
-        setIsAllowanceLoading(true);
-        const allowanceResponse = await getAllowanceOf(
-          srcToken?.address,
-          signer,
-          route.transactions.swap.to,
-          srcChain?.publicRpcUrls[0],
-        );
-        if (nonce !== currentAllowanceRequestNonce.current) {
-          return;
-        }
-        setSrcTokenAllowance(allowanceResponse);
-        setIsAllowanceLoading(false);
-      }
-    })();
-  }, [srcChain, srcToken?.address, signer, setSrcTokenAllowance, route]);
-
   // Set fee payment token
   useEffect(() => {
     if (srcChain) {
@@ -318,8 +249,6 @@ export const Form = ({
     setFormError("");
     setIsGettingRoute(false);
     setRoute(undefined);
-    const nonce = Date.now();
-    currentRouteRequestNonce.current = nonce;
   }, [srcToken]);
 
   // Clear state on source chain change
@@ -328,8 +257,6 @@ export const Form = ({
     setAmount("");
     setIsGettingRoute(false);
     setRoute(undefined);
-    const nonce = Date.now();
-    currentRouteRequestNonce.current = nonce;
   }, [srcChain]);
 
   // Fetch token prices on source chain
@@ -353,15 +280,7 @@ export const Form = ({
     setBackdropClickDisabled(executingTransactions);
   }, [executingTransactions]);
 
-  // Check if the allowance needs to be adjusted
-  const isAllowanceOk = useMemo(() => {
-    return (
-      srcToken?.address === ethers.constants.AddressZero ||
-      Number(srcTokenAllowance) >= Number(amount)
-    );
-  }, [srcToken, amount, srcTokenAllowance]);
-
-  // Execute the transactions recieved from the xPay.
+  // Execute the transactions received from the xPay.
   const triggerTx = useCallback(async () => {
     if (!route) {
       return;
@@ -371,11 +290,11 @@ export const Form = ({
     setTransactionError(null);
 
     // Optional approve for ERC20 tokens.
-    if (route.transactions.approve && !isAllowanceOk) {
+    if (route.transactions.approve) {
       setApproveTxDone(false);
 
       const { to, data } = route.transactions.approve;
-      await sendTransaction(
+      sendTransaction(
         {
           to,
           data,
@@ -391,7 +310,7 @@ export const Form = ({
             });
             setApproveTxLoading(false);
             setApproveTxDone(true);
-            swap(route);
+            await swap(route);
           },
           onError: (error) => {
             setTransactionError(`Approval failed: ${error.message}`);
@@ -408,19 +327,17 @@ export const Form = ({
     signer,
     srcChain,
     srcToken,
-    debouncedAmount,
     paymentToken,
     slippage,
     expressChecked,
     amount,
-    srcTokenAllowance,
   ]);
 
   // Sign and send the swap transaction
   const swap = useCallback(
     async (route: Route) => {
       const { to, value, data } = route.transactions.swap;
-      await sendTransaction(
+      sendTransaction(
         {
           to,
           value: BigInt(value),
@@ -441,7 +358,6 @@ export const Form = ({
               renderTxStatus(chainId.toString(), hash);
             }
             setTransactionSuccessHash(hash);
-            // onSubmit(route);
           },
           onError: (error) => {
             setBackdropClickDisabled(false);
@@ -450,16 +366,7 @@ export const Form = ({
         },
       );
     },
-    [
-      route,
-      signer,
-      srcChain,
-      srcToken,
-      debouncedAmount,
-      paymentToken,
-      slippage,
-      expressChecked,
-    ],
+    [route, signer, srcChain, srcToken, paymentToken, slippage, expressChecked],
   );
 
   // Handle form submit
@@ -469,7 +376,7 @@ export const Form = ({
       return;
     }
 
-    if (retrunTransactions) {
+    if (returnTransactions) {
       onSubmit(route);
       return;
     }
@@ -484,8 +391,6 @@ export const Form = ({
   // provides data for the main button
   const swapButton: { text: string; fn: () => void; disabled: boolean } =
     useMemo(() => {
-      let disabled = false;
-
       if (transactionError) {
         return {
           text: transactionError,
@@ -498,7 +403,7 @@ export const Form = ({
         return {
           text: "Connect wallet",
           fn: () => {},
-          disabled,
+          disabled: false,
         };
       }
 
@@ -510,7 +415,8 @@ export const Form = ({
         return {
           text: "Switch chain",
           fn: handleSwitchChain,
-          disabled,
+
+          disabled: false,
         };
       }
 
@@ -547,308 +453,53 @@ export const Form = ({
         };
       }
 
-      if (isAllowanceLoading) {
-        return {
-          text: `Checking allowance`,
-          fn: () => {},
-          disabled: true,
-        };
-      }
-
       return {
         text: "Submit",
         fn: () => {},
-        disabled,
+        disabled: false,
       };
     }, [
       account,
       srcToken,
       srcChain,
-      isAllowanceOk,
       amount,
       balances,
       signer,
       transactionError,
       route,
-      isAllowanceLoading,
     ]);
 
   // check if the express delivery will be executed
   const isExpressDelivery = useMemo(() => {
-    let expressDeliveryFee;
-    if (!route?.xSwapFees || !route?.xSwapFees.expressDeliveryFee) {
-      expressDeliveryFee = safeBigNumberFrom("0");
-    } else {
-      expressDeliveryFee = safeBigNumberFrom(
-        route?.xSwapFees.expressDeliveryFee,
-      );
-    }
-
-    if (expressDeliveryFee.gt("0")) {
-      return true;
-    }
-    return false;
+    const expressDeliveryFee =
+      !route?.xSwapFees || !route?.xSwapFees.expressDeliveryFee
+        ? safeBigNumberFrom("0")
+        : safeBigNumberFrom(route?.xSwapFees.expressDeliveryFee);
+    return expressDeliveryFee.gt("0");
   }, [route]);
 
   return (
     <>
       {!signer ? (
-        // Connect wallet modal
-        <div className="xpay-flex xpay-flex-col xpay-gap-2 xpay-z-10 xpay-my-0 xpay-p-2 md:xpay-p-4 xpay-rounded-3xl xpay-overflow-hidden xpay-font-light sm:xpay-w-x_desktop xpay-w-screen">
-          <div className="xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2">
-            <div
-              className="xpay-cursor-pointer xpay-text-white"
-              onClick={onClose}
-            >
-              <CloseIcon />
-            </div>
-          </div>{" "}
-          <p className="xpay-text-xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white">
-            Please connect the wallet first.
-          </p>
-        </div>
+        <ConnectWalletPrompt onClose={onClose} />
       ) : executingTransactions ? (
-        <div className="xpay-flex xpay-flex-col xpay-gap-2 xpay-z-10 xpay-my-0 xpay-p-2 md:xpay-p-4 xpay-rounded-3xl xpay-overflow-hidden xpay-font-light sm:xpay-w-x_desktop xpay-w-screen">
-          {transactionError ? (
-            // Tx Error modal
-            <div>
-              <div className="xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2">
-                <div
-                  className="xpay-cursor-pointer xpay-text-white"
-                  onClick={onClose}
-                >
-                  <CloseIcon />
-                </div>
-              </div>
-
-              <div className="xpay-flex xpay-flex-col xpay-w-full xpay-justify-center xpay-items-center xpay-mx-auto xpay-p-2 xpay-gap-4">
-                <div>
-                  <ErrorIcon />
-                </div>
-
-                <div className="xpay-flex xpay-flex-col">
-                  <div>
-                    <p className="xpay-text-2xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white">
-                      Transaction error!
-                    </p>
-                  </div>
-                  <div>
-                    <p className="xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50">
-                      {parseWeb3Error(transactionError)}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          ) : transactionSuccessHash ? (
-            // Tx Success modal
-            <div>
-              <div className="xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2">
-                <div
-                  className="xpay-cursor-pointer xpay-text-white"
-                  onClick={onClose}
-                >
-                  <CloseIcon />
-                </div>
-              </div>
-
-              <div className="xpay-flex xpay-flex-col xpay-w-full xpay-justify-center xpay-items-center xpay-mx-auto xpay-p-2 xpay-gap-4">
-                <div>
-                  <SuccessIcon />
-                </div>
-                <div className="xpay-flex xpay-flex-col">
-                  <div>
-                    <p className="xpay-text-2xl xpay-font-bold xpay-leading-8 xpay-text-center xpay-text-white">
-                      Transaction success!
-                    </p>
-                  </div>
-                  {srcChain?.chainId !== dstChain?.chainId ? (
-                    <div>
-                      <p className="xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50">
-                        Approximated time of delivery:{" "}
-                        {isExpressDelivery ? "30 seconds" : "30 minutes"}
-                      </p>
-                    </div>
-                  ) : (
-                    <></>
-                  )}
-                </div>
-
-                <div className="xpay-flex xpay-gap-4 xpay-items-center">
-                  <div className="xpay-flex xpay-gap-2">
-                    <div className="xpay-w-10 xpay-h-10">
-                      {srcToken?.image ? (
-                        <img
-                          className="xpay-w-10 xpay-h-10"
-                          src={srcToken?.image}
-                          alt={srcToken?.name}
-                        />
-                      ) : (
-                        <UnknownTokenLogo
-                          tokenName={"?"}
-                          className="xpay-w-10 xpay-h-10"
-                        />
-                      )}
-                    </div>
-                    <div className="xpay-flex xpay-flex-col xpay-items-start">
-                      <div className="xpay-flex">
-                        {`${debouncedAmount} ${srcToken?.symbol}`}
-                      </div>
-                      <div className="xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50">
-                        {srcChain?.displayName}
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="xpay-w-3.5 xpay-h-3.5">
-                    <ArrowRightIcon />
-                  </div>
-
-                  <div className="xpay-flex xpay-gap-2">
-                    <div className="xpay-w-10 xpay-h-10">
-                      {(dstDisplayToken ? dstDisplayToken : dstToken)?.image ? (
-                        <img
-                          className="xpay-w-10 xpay-h-10"
-                          src={
-                            (dstDisplayToken ? dstDisplayToken : dstToken)
-                              ?.image
-                          }
-                          alt={
-                            (dstDisplayToken ? dstDisplayToken : dstToken)?.name
-                          }
-                        />
-                      ) : (
-                        <UnknownTokenLogo
-                          tokenName={"?"}
-                          className="xpay-w-10 xpay-h-10"
-                        />
-                      )}
-                    </div>
-                    <div className="xpay-flex xpay-flex-col xpay-items-start">
-                      <div className="xpay-flex">
-                        {weiToHumanReadable({
-                          amount: route?.estAmountOut || "0",
-                          decimals:
-                            (dstDisplayToken ? dstDisplayToken : dstToken)
-                              ?.decimals || 18,
-                          precisionFractionalPlaces: 4,
-                        })}{" "}
-                        {(dstDisplayToken ? dstDisplayToken : dstToken)?.symbol}
-                      </div>
-                      <div className="xpay-text-sm xpay-text-center xpay-text-white xpay-opacity-50">
-                        {dstChain?.displayName}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div>
-                  <a
-                    href={
-                      srcChain?.chainId !== dstChain?.chainId
-                        ? `${CCIP_EXPLORER}/tx/${transactionSuccessHash}`
-                        : `${
-                            supportedChains.find(
-                              (chain) => chain.chainId === srcChain?.chainId,
-                            )?.transactionExplorer
-                          }/${transactionSuccessHash}`
-                    }
-                    target="_blank"
-                    rel="noreferrer"
-                    className="xpay-flex xpay-items-center xpay-gap-2 xpay-font-bold xpay-no-underline xpay-cursor-pointer xpay-text-center"
-                    aria-label="Show the transaction in the chain explorer"
-                  >
-                    <p className="xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-bg-clip-text xpay-text-transparent xpay-underline">
-                      View details on Explorer
-                    </p>
-                    <div className="xpay-w-3.5 xpay-h-3.5 xpay-bg-gradient-to-r xpay-text-x_blue_dark">
-                      <ArrowUpRightIcon />
-                    </div>
-                  </a>
-                </div>
-              </div>
-            </div>
-          ) : (
-            // Tx Confirmation modal
-            <>
-              <div className="xpay-flex xpay-w-full xpay-justify-between xpay-items-center xpay-mx-auto xpay-p-2 xpay-font-light ">
-                <p className="xpay-text-white xpay-text-xl">Confirmation</p>
-                <div className="xpay-flex xpay-w-full xpay-justify-end xpay-items-center xpay-mx-auto xpay-p-2">
-                  <div
-                    className="xpay-cursor-pointer xpay-text-white"
-                    onClick={onClose}
-                  >
-                    <CloseIcon />
-                  </div>
-                </div>
-              </div>
-
-              <div className="xpay-flex xpay-flex-col xpay-gap-2">
-                <ConfirmationAmount
-                  amount={ethers.utils
-                    .parseUnits(debouncedAmount, srcToken?.decimals)
-                    .toString()}
-                  chain={srcChain}
-                  token={srcToken}
-                  type="src"
-                />
-              </div>
-
-              <div className="xpay-flex xpay-justify-center  xpay-globalBorder xpay-rounded-xl xpay-p-[5px] xpay--mt-7 xpay--mb-6 ">
-                <div className="xpay-flex xpay-items-center xpay-justify-center xpay-rounded-lg  xpay-w-8 xpay-h-8 xpay-bg-gradient-to-l xpay-from-[rgba(54,129,198,1)] xpay-to-[rgba(43,74,157,1)] ">
-                  <ArrowDownIcon />
-                </div>
-              </div>
-
-              <div className="xpay-flex xpay-flex-col xpay-gap-2">
-                <ConfirmationAmount
-                  amount={route?.estAmountOut || "0"}
-                  chain={dstChain}
-                  token={dstDisplayToken ? dstDisplayToken : dstToken}
-                  type="dst"
-                />
-              </div>
-              <div className="xpay-flex xpay-flex-col xpay-globalBorder xpay-p-4 xpay-justify-center xpay-rounded-xl xpay-bg-[rgba(15,15,15,1)] xpay-relative">
-                {route?.transactions.approve && !isAllowanceOk && (
-                  <>
-                    <div className="xpay-flex xpay-justify-between xpay-items-center">
-                      <div className="xpay-flex xpay-items-center xpay-gap-2">
-                        <SignIcon />
-                        <p className="xpay-opacity-50">
-                          {approveTxLoading
-                            ? "Wait for approval confirmation"
-                            : "Approve token spending"}
-                        </p>
-                      </div>
-                      <div className="xpay-flex xpay-items-center">
-                        {approveTxLoading && <Spinner width="5" height="5" />}
-                        {approveTxDone && (
-                          <div className="xpay-text-x_green xpay-w-5 xpay-h-5">
-                            <CheckIcon />
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                    <div className="xpay-w-px xpay-h-6 xpay-mt-1 xpay-mb-1 xpay-ml-2.5 xpay-bg-white xpay-opacity-50"></div>
-                  </>
-                )}
-                <div className="xpay-flex xpay-justify-between xpay-items-center">
-                  <div className="xpay-flex xpay-items-center xpay-gap-2">
-                    <SignIcon />
-                    <p className="xpay-opacity-50">
-                      {txLoading
-                        ? "Wait for transaction confirmation"
-                        : "Confirm transaction"}
-                    </p>
-                  </div>
-                  <div className="xpay-flex xpay-items-center">
-                    {txLoading && <Spinner width="5" height="5" />}
-                  </div>
-                </div>
-              </div>
-            </>
-          )}
-        </div>
+        <ConfirmationView
+          txError={transactionError}
+          onClose={onClose}
+          txSuccessHash={transactionSuccessHash}
+          srcChain={srcChain}
+          dstChain={dstChain}
+          isExpressDelivery={isExpressDelivery}
+          srcToken={srcToken}
+          amount={amount}
+          dstDisplayToken={dstDisplayToken}
+          dstToken={dstToken}
+          route={route}
+          supportedChains={supportedChains}
+          approveTxLoading={approveTxLoading}
+          approveTxDone={approveTxDone}
+          txLoading={txLoading}
+        />
       ) : (
         // XPay form
         <form