@xswap-link/sdk 0.2.5 → 0.3.0

package/src/components/TxConfigForm/Form.tsx

@@ -1,11 +1,24 @@
 import "@src/global.css";
-import React, { FormEvent, useEffect, useState } from "react";
+import {
+  FormEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { ethers } from "ethers";
-import { useAccount, useSwitchChain } from "wagmi";
+import { Config, useAccount, useSendTransaction, useSwitchChain } from "wagmi";
 import { Chain, Route, Token, TokenBalances, TokenPrices } from "@src/models";
 import { getCustomTokenData, getPrices, getRoute } from "@src/services";
-import { getBalances } from "@src/utils";
-import { ROUTE_TIMEOUT_MS } from "@src/constants";
+import {
+  getAllowanceOf,
+  getBalances,
+  parseWeb3Error,
+  safeBigNumberFrom,
+  weiToHumanReadable,
+} from "@src/utils";
+import { CCIP_EXPLORER, ROUTE_TIMEOUT_MS } from "@src/constants";
 import { TxConfigFormProps } from "@src/components";
 import { useDebounce } from "@src/hooks";
 import { ADDRESSES } from "@src/contracts";
@@ -19,6 +32,21 @@ 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";
 
 export const Form = ({
   integratorId,
@@ -27,15 +55,23 @@ export const Form = ({
   customContractCalls,
   desc,
   supportedChains,
+  retrunTransactions,
+  dstDisplayTokenAddr,
+  wagmiConfig,
   onSubmit,
   onClose,
+  setBackdropClickDisabled,
 }: TxConfigFormProps & {
+  wagmiConfig: Config;
+  retrunTransactions: boolean;
   onSubmit: (route: Route) => void;
   onClose: () => void;
+  setBackdropClickDisabled: (disabled: boolean) => void;
 }) => {
   const [signer, setSigner] = useState<string | undefined>();
   const [dstChain, setDstChain] = useState<Chain>();
   const [dstToken, setDstToken] = useState<Token>();
+  const [dstDisplayToken, setDstDisplayToken] = useState<Token>();
   const [srcChain, setSrcChain] = useState<Chain>();
   const [srcToken, setSrcToken] = useState<Token>();
   const [amount, setAmount] = useState<string>("");
@@ -50,17 +86,43 @@ export const Form = ({
   const [formError, setFormError] = useState("");
   const [slippage, setSlippage] = useState<string>("1.5");
   const [feesDetailsShown, setFeesDetailsShown] = useState(false);
-  const [exceedsExpressDeliveryLimit, setExceedsExpressDeliveryLimit] =
-    useState(false);
+  const [executingTransactions, setExecutingTransactions] = useState(false);
+  const [transactionSuccessHash, setTransactionSuccessHash] = useState<
+    string | undefined
+  >();
+
+  const [txLoading, setTxLoading] = useState(false);
+  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
+
+  // Wagmi hook to execute transactions
+  const { sendTransaction } = useSendTransaction({ config: wagmiConfig });
 
   const debouncedAmount = useDebounce(amount, 1000);
   const account = useAccount();
   const { switchChainAsync } = useSwitchChain();
 
+  // set signer address
   useEffect(() => {
     setSigner(account.address);
   }, [account.address]);
 
+  // set source chain
   useEffect(() => {
     const defaultChain = supportedChains.find(
       ({ chainId }) => chainId === account.chainId?.toString(),
@@ -73,10 +135,12 @@ export const Form = ({
     );
   }, [account.chainId]);
 
+  // set destination chain
   useEffect(() => {
     setDstChain(supportedChains.find((chain) => chain.chainId === dstChainId));
   }, [supportedChains, dstChainId]);
 
+  // set destination token
   useEffect(() => {
     (async () => {
       if (!dstChain) {
@@ -95,57 +159,85 @@ export const Form = ({
       }
 
       setDstToken(dstTokenResult);
+
+      if (dstDisplayTokenAddr) {
+        let dstDisplayTokenResult = dstChain?.tokens.find(
+          (token) =>
+            token.address.toLowerCase() === dstDisplayTokenAddr.toLowerCase(),
+        );
+
+        if (!dstDisplayTokenResult) {
+          dstDisplayTokenResult = await getCustomTokenData(
+            dstChain,
+            dstDisplayTokenAddr.toLowerCase(),
+          );
+        }
+
+        setDstDisplayToken(dstDisplayTokenResult);
+      }
     })();
   }, [dstChain]);
 
+  // Handle fetching route
   useEffect(() => {
     if (
-      integratorId &&
-      srcChain &&
-      srcToken &&
-      dstChain &&
-      debouncedAmount &&
-      paymentToken &&
-      slippage
+      !(
+        integratorId &&
+        srcChain &&
+        srcToken &&
+        dstChain &&
+        debouncedAmount &&
+        paymentToken &&
+        signer &&
+        slippage
+      )
     ) {
-      setFormError("");
-      const timeout = setTimeout(() => {
-        setFormError("Getting Route is taking longer than usually");
-      }, ROUTE_TIMEOUT_MS);
-      setIsGettingRoute(true);
-      setFeesDetailsShown(false);
-      if (!srcToken.decimals)
-        throw new Error(
-          `Configuration error: selected token ($${srcToken.symbol} ${srcToken.name}) has unknown decimals param.`,
-        );
-      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 && !exceedsExpressDeliveryLimit,
-        customContractCalls,
-      })
-        .then((response) => {
-          setRoute(response);
-          setFormError("");
-        })
-        .catch((err) => {
-          setFormError(err.message);
-        })
-        .finally(() => {
-          setIsGettingRoute(false);
-          clearTimeout(timeout);
-        });
+      return;
     }
+
+    setFormError("");
+    const timeout = setTimeout(() => {
+      setFormError("Getting Route is taking longer than usually");
+    }, ROUTE_TIMEOUT_MS);
+    setIsGettingRoute(true);
+    setFeesDetailsShown(false);
+    if (!srcToken.decimals)
+      throw new Error(
+        `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,
+    })
+      .then((response) => {
+        if (nonce !== currentRouteRequestNonce.current) {
+          return;
+        }
+        setRoute(response);
+        setFormError("");
+      })
+      .catch((err) => {
+        setFormError(err.message);
+      })
+      .finally(() => {
+        setIsGettingRoute(false);
+        clearTimeout(timeout);
+      });
   }, [
     signer,
     srcChain,
@@ -156,6 +248,58 @@ export const Form = ({
     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) {
       setPaymentToken(
@@ -168,15 +312,27 @@ export const Form = ({
     }
   }, [srcChain]);
 
+  // Clear state on source token change
   useEffect(() => {
     setAmount("");
     setFormError("");
+    setIsGettingRoute(false);
+    setRoute(undefined);
+    const nonce = Date.now();
+    currentRouteRequestNonce.current = nonce;
   }, [srcToken]);
 
+  // Clear state on source chain change
   useEffect(() => {
     setSrcToken(srcChain?.tokens[0]);
+    setAmount("");
+    setIsGettingRoute(false);
+    setRoute(undefined);
+    const nonce = Date.now();
+    currentRouteRequestNonce.current = nonce;
   }, [srcChain]);
 
+  // Fetch token prices on source chain
   useEffect(() => {
     if (srcChain) {
       getPrices({ chainId: srcChain.chainId, currency: "USD" }).then((prices) =>
@@ -185,94 +341,583 @@ export const Form = ({
     }
   }, [srcChain]);
 
+  // Fetch token balances on source chain
   useEffect(() => {
     if (srcChain && signer) {
       getBalances(srcChain, signer).then((balances) => setBalances(balances));
     }
   }, [srcChain, signer]);
 
+  // Disable backdrop clicks when executing transactions
+  useEffect(() => {
+    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.
+  const triggerTx = useCallback(async () => {
+    if (!route) {
+      return;
+    }
+    setExecutingTransactions(true);
+    setBackdropClickDisabled(true);
+    setTransactionError(null);
+
+    // Optional approve for ERC20 tokens.
+    if (route.transactions.approve && !isAllowanceOk) {
+      setApproveTxDone(false);
+
+      const { to, data } = route.transactions.approve;
+      await sendTransaction(
+        {
+          to,
+          data,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } as any,
+        {
+          onSuccess: async (hash) => {
+            setApproveTxLoading(true);
+            const chainId = getChainId(wagmiConfig);
+            await waitForTransactionReceipt(wagmiConfig, {
+              chainId,
+              hash,
+            });
+            setApproveTxLoading(false);
+            setApproveTxDone(true);
+            swap(route);
+          },
+          onError: (error) => {
+            setTransactionError(`Approval failed: ${error.message}`);
+            setApproveTxLoading(false);
+            setBackdropClickDisabled(false);
+          },
+        },
+      );
+    } else {
+      await swap(route);
+    }
+  }, [
+    route,
+    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(
+        {
+          to,
+          value: BigInt(value),
+          data,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } as any,
+        {
+          onSuccess: async (hash) => {
+            setTxLoading(true);
+            // Open the transaction monitor popup to inform user about the tx status
+            const chainId = getChainId(wagmiConfig);
+            await waitForTransactionReceipt(wagmiConfig, {
+              chainId,
+              hash,
+            });
+            setTxLoading(false);
+            if (srcChain?.chainId !== dstChain?.chainId) {
+              renderTxStatus(chainId.toString(), hash);
+            }
+            setTransactionSuccessHash(hash);
+            // onSubmit(route);
+          },
+          onError: (error) => {
+            setBackdropClickDisabled(false);
+            setTransactionError(`Transaction failed: ${error.message}`);
+          },
+        },
+      );
+    },
+    [
+      route,
+      signer,
+      srcChain,
+      srcToken,
+      debouncedAmount,
+      paymentToken,
+      slippage,
+      expressChecked,
+    ],
+  );
+
+  // Handle form submit
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    if (route) onSubmit(route);
+    if (!route) {
+      return;
+    }
+
+    if (retrunTransactions) {
+      onSubmit(route);
+      return;
+    }
+
+    triggerTx();
   };
 
   const handleSwitchChain = async () => {
     await switchChainAsync({ chainId: Number(srcChain?.chainId) });
   };
 
+  // provides data for the main button
+  const swapButton: { text: string; fn: () => void; disabled: boolean } =
+    useMemo(() => {
+      let disabled = false;
+
+      if (transactionError) {
+        return {
+          text: transactionError,
+          fn: () => {},
+          disabled: true,
+        };
+      }
+
+      if (!signer) {
+        return {
+          text: "Connect wallet",
+          fn: () => {},
+          disabled,
+        };
+      }
+
+      if (
+        signer &&
+        srcChain &&
+        srcChain.chainId !== account.chainId?.toString()
+      ) {
+        return {
+          text: "Switch chain",
+          fn: handleSwitchChain,
+          disabled,
+        };
+      }
+
+      if (!amount) {
+        return {
+          text: `Enter token amount`,
+          fn: () => {},
+          disabled: true,
+        };
+      }
+
+      if (
+        amount &&
+        balances &&
+        srcToken &&
+        srcToken.decimals &&
+        balances[srcToken?.address] !== undefined &&
+        !ethers.utils
+          .parseUnits(amount, srcToken.decimals)
+          .lt(balances[srcToken?.address] || "0")
+      ) {
+        return {
+          text: "Insufficient balance",
+          fn: () => {},
+          disabled: true,
+        };
+      }
+
+      if (!route) {
+        return {
+          text: `Loading route`,
+          fn: () => {},
+          disabled: true,
+        };
+      }
+
+      if (isAllowanceLoading) {
+        return {
+          text: `Checking allowance`,
+          fn: () => {},
+          disabled: true,
+        };
+      }
+
+      return {
+        text: "Submit",
+        fn: () => {},
+        disabled,
+      };
+    }, [
+      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;
+  }, [route]);
+
   return (
-    <form
-      className="flex flex-col gap-2 z-10 my-0 p-2 md:p-4 rounded-3xl overflow-hidden font-light sm:w-x_desktop"
-      onSubmit={handleSubmit}
-    >
-      <TopBar
-        signer={signer}
-        historyTabShown={historyTabShown}
-        setHistoryTabShown={setHistoryTabShown}
-        setSettingsShown={setSettingsShown}
-        onClose={onClose}
-      />
-      {settingsShown && (
-        <Settings
-          expressChecked={expressChecked}
-          setExpressChecked={setExpressChecked}
-          setSettingsShown={setSettingsShown}
-          slippage={slippage}
-          setSlippage={setSlippage}
-        />
-      )}
-      {historyTabShown ? (
-        <History signer={signer} supportedChains={supportedChains} />
+    <>
+      {!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>
+      ) : 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>
       ) : (
-        <div className="flex flex-col gap-2">
-          {desc && <Description description={desc} />}
-          <SwapPanel
-            amount={amount}
-            setAmount={setAmount}
-            srcToken={srcToken}
-            setSrcToken={setSrcToken}
-            srcChain={srcChain}
+        // XPay form
+        <form
+          className="xpay-flex xpay-flex-col xpay-gap-2 xpay-z-10 xpay-my-0 p-2 md:xpay-p-4 xpay-rounded-3xl xpay-overflow-hidden xpay-font-light sm:xpay-w-x_desktop"
+          onSubmit={handleSubmit}
+        >
+          <TopBar
             signer={signer}
-            balances={balances}
-            prices={prices}
-            supportedChains={supportedChains}
-            setSrcChain={setSrcChain}
-            setExceedsExpressDeliveryLimit={setExceedsExpressDeliveryLimit}
-          />
-          <Summary
-            isGettingRoute={isGettingRoute}
-            route={route}
-            dstToken={dstToken}
-            dstChain={dstChain}
+            historyTabShown={historyTabShown}
+            setHistoryTabShown={setHistoryTabShown}
+            setSettingsShown={setSettingsShown}
+            onClose={onClose}
           />
-          <FeesDetails
-            route={route}
-            isGettingRoute={isGettingRoute}
-            paymentToken={paymentToken}
-            dstToken={dstToken}
-            expressChecked={expressChecked}
-            exceedsExpressDeliveryLimit={exceedsExpressDeliveryLimit}
-            slippage={slippage}
-            feesDetailsShown={feesDetailsShown}
-            setFeesDetailsShown={setFeesDetailsShown}
-          />
-          {formError.length > 0 && <ErrorField error={formError} />}
-          {signer &&
-          srcChain &&
-          srcChain.chainId !== account.chainId?.toString() ? (
-            <Button type="button" onClick={handleSwitchChain}>
-              Switch chain
-            </Button>
+          {settingsShown && (
+            <Settings
+              expressChecked={expressChecked}
+              setExpressChecked={setExpressChecked}
+              setSettingsShown={setSettingsShown}
+              slippage={slippage}
+              setSlippage={setSlippage}
+            />
+          )}
+          {historyTabShown ? (
+            <History signer={signer} supportedChains={supportedChains} />
           ) : (
-            <Button
-              type="submit"
-              disabled={!signer || !route || isGettingRoute}
-            >
-              Submit
-            </Button>
+            <div className="xpay-flex xpay-flex-col xpay-gap-2">
+              <SwapPanel
+                amount={amount}
+                setAmount={setAmount}
+                srcToken={srcToken}
+                setSrcToken={setSrcToken}
+                srcChain={srcChain}
+                signer={signer}
+                balances={balances}
+                prices={prices}
+                supportedChains={supportedChains}
+                setSrcChain={setSrcChain}
+              />
+              <Summary
+                isGettingRoute={isGettingRoute}
+                route={route}
+                dstToken={dstDisplayToken ? dstDisplayToken : dstToken}
+                dstChain={dstChain}
+              />
+              {desc && <Description description={desc} />}
+
+              <FeesDetails
+                route={route}
+                isGettingRoute={isGettingRoute}
+                paymentToken={paymentToken}
+                dstToken={dstToken}
+                slippage={slippage}
+                feesDetailsShown={feesDetailsShown}
+                setFeesDetailsShown={setFeesDetailsShown}
+                isExpressDelivery={isExpressDelivery}
+              />
+              {formError.length > 0 && <ErrorField error={formError} />}
+
+              <Button
+                type="submit"
+                disabled={swapButton.disabled}
+                onClick={swapButton.fn}
+              >
+                {swapButton.text}
+              </Button>
+            </div>
           )}
-        </div>
+        </form>
       )}
-    </form>
+    </>
   );
 };