@xswap-link/sdk 0.2.6 → 0.3.0

package/src/components/TxConfigForm/HistoryCard.tsx

@@ -98,7 +98,7 @@ export const HistoryCard: FC<Props> = ({ transaction, supportedChains }) => {
             }/${transaction.hash}`}
             target="_blank"
             rel="noreferrer"
-            className="xpay-ml-2 xpay-no-underline"
+            className="xpay-ml-2 xpay-no-underline visited:xpay-text-white hover:xpay-text-white"
             aria-label="Show the transaction in the chain explorer"
           >
             <div className="xpay-w-3.5 xpay-h-3.5">

package/src/components/TxConfigForm/Summary.tsx

@@ -27,7 +27,7 @@ export const Summary: FC<Props> = ({
       weiToHumanReadable({
         amount: route?.estAmountOut || "0",
         decimals: dstToken?.decimals || 18,
-        precisionFractionalPlaces: 5,
+        precisionFractionalPlaces: 8,
       }),
     [route, dstToken],
   );
@@ -87,13 +87,14 @@ export const Summary: FC<Props> = ({
           </div>
         </div>
       </div>
-      <UsdPrice
-        prices={prices}
-        token={dstToken}
-        amount={amountReadable}
-        loading={isGettingRoute}
-        type="dst"
-      />
+      <div className="xpay-pt-2">
+        <UsdPrice
+          prices={prices}
+          token={dstToken}
+          amount={amountReadable}
+          loading={isGettingRoute}
+        />
+      </div>
       <div className="xpay-absolute xpay-right-[50%] xpay-top-0 xpay-translate-x-1/2 xpay-translate-y-[-60%] xpay-global-border xpay-rounded-xl p-[5px] xpay-bg-[rgba(15,15,15,1)]">
         <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 />

package/src/components/TxConfigForm/SwapPanel.tsx

@@ -19,7 +19,6 @@ interface Props {
   balances: TokenBalances | undefined;
   prices: TokenPrices | undefined;
   supportedChains: Chain[];
-  setExceedsExpressDeliveryLimit: (exceeds: boolean) => void;
 }
 
 export const SwapPanel: FC<Props> = ({
@@ -33,7 +32,6 @@ export const SwapPanel: FC<Props> = ({
   balances,
   prices,
   supportedChains,
-  setExceedsExpressDeliveryLimit,
 }) => {
   const [chainListShown, setChainListShown] = useState(false);
   const [tokenListShown, setTokenListShown] = useState(false);
@@ -111,8 +109,6 @@ export const SwapPanel: FC<Props> = ({
             token={srcToken}
             amount={amount}
             loading={false}
-            type="src"
-            setExceedsExpressDeliveryLimit={setExceedsExpressDeliveryLimit}
           />
         </div>
       </div>
@@ -178,6 +174,7 @@ export const SwapPanel: FC<Props> = ({
                 setSrcChain={setSrcChain}
                 setChainListShown={setChainListShown}
                 chain={chain}
+                key={chain.chainId}
               />
             ))}
           </ul>

package/src/components/TxConfigForm/UsdPrice.tsx

@@ -1,15 +1,12 @@
 import { Alert, Skeleton } from "@src/components";
 import { Token, TokenPrices } from "@src/models";
-import { FC, useEffect, useMemo, useState } from "react";
-import { EXPRESS_DELIVERY_LIMIT } from "@src/constants";
+import { FC, useEffect, useState } from "react";
 
 type Props = {
   prices: TokenPrices | undefined;
   token: Token | undefined;
   amount: string | undefined;
   loading: boolean;
-  type: "src" | "dst";
-  setExceedsExpressDeliveryLimit?: (exceeds: boolean) => void;
 };
 
 export const UsdPrice: FC<Props> = ({
@@ -17,27 +14,20 @@ export const UsdPrice: FC<Props> = ({
   token,
   amount = "0",
   loading = false,
-  type,
-  setExceedsExpressDeliveryLimit,
 }) => {
   const [usdPrice, setUsdPrice] = useState<string>("0.00");
 
   useEffect(() => {
     if (token && prices && prices[token.address]) {
       const newUsdPrice = (
-        Number(amount) * Number(prices[token.address])
+        Number(amount) * Number(prices[token.address.toLowerCase()])
       ).toFixed(2);
-      if (type === "src" && setExceedsExpressDeliveryLimit) {
-        setExceedsExpressDeliveryLimit(
-          Number(newUsdPrice) > EXPRESS_DELIVERY_LIMIT,
-        );
-      }
       setUsdPrice(newUsdPrice);
     }
   }, [token, prices, amount]);
 
   return (
-    <div className="xpay-opacity-60 xpay-py-4">
+    <div className="xpay-opacity-60">
       {loading ? (
         <Skeleton width="xpay-w-12" height="xpay-h-4" />
       ) : token ? (

package/src/components/TxConfigForm/index.tsx

@@ -1,5 +1,5 @@
 import "@src/global.css";
-import { MouseEvent, useMemo } from "react";
+import { MouseEvent, useMemo, useState } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
 import { getWagmiConfig, waitForInitialization, xpayRoot } from "@src/config";
@@ -14,6 +14,8 @@ export type TxConfigFormProps = {
   customContractCalls: ContractCall[];
   desc?: string;
   supportedChains: Chain[];
+  retrunTransactions?: boolean;
+  dstDisplayTokenAddr?: string;
 };
 
 const TxConfigForm = ({
@@ -23,16 +25,19 @@ const TxConfigForm = ({
   customContractCalls,
   desc,
   supportedChains,
+  retrunTransactions,
+  dstDisplayTokenAddr,
   onSubmit,
   onClose,
 }: TxConfigFormProps & {
   onSubmit: (route: Route) => void;
   onClose: () => void;
 }) => {
+  const [backdropClickDisabled, setBackdropClickDisabled] = useState(false);
   const onBackdropClick = (e: MouseEvent) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
-    if (e.target === e.currentTarget) {
+    if (e.target === e.currentTarget && !backdropClickDisabled) {
       onClose();
     }
   };
@@ -48,7 +53,7 @@ const TxConfigForm = ({
       <QueryClientProvider client={queryClient}>
         <div
           className="xpay-top-0 xpay-left-0 xpay-right-0 xpay-bottom-0 xpay-bg-[rgba(0,0,0,0.8)] xpay-fixed xpay-flex xpay-items-center xpay-justify-center xpay-z-10"
-          onClick={onBackdropClick}
+          onMouseDown={onBackdropClick}
         >
           <div className="xpay-relative xpay-bg-black xpay-rounded-3xl xpay-overflow-auto xpay-text-white xpay-border-2 xpay-border-solid xpay-border-[rgba(255,255,255,0.1)]">
             <Form
@@ -58,8 +63,14 @@ const TxConfigForm = ({
               customContractCalls={customContractCalls}
               desc={desc}
               supportedChains={supportedChains}
+              wagmiConfig={wagmiConfig}
+              retrunTransactions={!!retrunTransactions}
+              dstDisplayTokenAddr={dstDisplayTokenAddr}
               onSubmit={onSubmit}
               onClose={onClose}
+              setBackdropClickDisabled={(disabled: boolean) =>
+                setBackdropClickDisabled(disabled)
+              }
             />
             <PoweredBy />
           </div>
@@ -76,10 +87,18 @@ export const openTxConfigForm = async ({
   customContractCalls,
   desc,
   supportedChains,
+  retrunTransactions,
+  dstDisplayTokenAddr,
 }: TxConfigFormProps): Promise<Route> => {
   try {
+    if (xpayRoot === null) {
+      throw new Error("XPay was incorrectly initialised");
+    }
     return await new Promise(async (resolve) => {
       await waitForInitialization();
+      if (xpayRoot === null) {
+        throw new Error("XPay was incorrectly initialised");
+      }
       xpayRoot.render(
         <TxConfigForm
           integratorId={integratorId}
@@ -88,12 +107,20 @@ export const openTxConfigForm = async ({
           customContractCalls={customContractCalls}
           desc={desc}
           supportedChains={supportedChains}
+          retrunTransactions={retrunTransactions}
+          dstDisplayTokenAddr={dstDisplayTokenAddr}
           onSubmit={(route) => {
-            resolve(route);
-            xpayRoot.render("");
+            if (retrunTransactions) {
+              resolve(route);
+            }
+            if (xpayRoot) {
+              xpayRoot.render("");
+            }
           }}
           onClose={() => {
-            xpayRoot.render("");
+            if (xpayRoot) {
+              xpayRoot.render("");
+            }
           }}
         />,
       );

package/src/components/TxStatusButton/index.tsx

@@ -10,6 +10,7 @@ import {
 import { MonitoredTransaction } from "@src/models";
 import { xpayTxStatusRoot } from "@src/config";
 import { UnknownTokenLogo } from "../UnknownTokenLogo/UnknownTokenLogo";
+import { Spinner } from "../Spinner";
 
 interface Props {
   transaction: MonitoredTransaction;
@@ -118,7 +119,7 @@ export const TxStatusButton: FC<Props> = ({ transaction }) => {
                   <XSwapLogo />
                 </div>
                 <div className="xpay-absolute xpay-flex xpay-items-center xpay-justify-center xpay-top-0 xpay-left-0 xpay-right-0 xpay-bottom-0 xpay-text-white">
-                  <CircularProgressIcon />
+                  <Spinner width="10" height="10" />
                 </div>
               </>
             )}
@@ -158,5 +159,14 @@ export const renderTxStatusButtons = () => {
   const buttons = renderedTransactions.map((item) => (
     <TxStatusButton key={item.txHash} transaction={item} />
   ));
-  xpayTxStatusRoot.render(buttons);
+
+  if (xpayTxStatusRoot === null) {
+    throw new Error("XPay was incorrectly initialised");
+  }
+
+  xpayTxStatusRoot.render(
+    <div className="xpay-fixed xpay-bottom-5 xpay-right-2 xpay-flex xpay-flex-col xpay-gap-3 xpay-pl-9 xpay-items-end xpay-w-full xpay-z-50">
+      {buttons}
+    </div>,
+  );
 };

package/src/components/icons/ErrorIcon.tsx

@@ -0,0 +1,32 @@
+export const ErrorIcon = () => {
+  return (
+    <svg
+      width="81"
+      height="80"
+      viewBox="0 0 81 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="error_FILL0_wght400_GRAD0_opsz24 1">
+        <path
+          id="Vector"
+          d="M40.5001 56.6667C41.4445 56.6667 42.2362 56.3473 42.8751 55.7084C43.514 55.0695 43.8334 54.2779 43.8334 53.3334C43.8334 52.389 43.514 51.5973 42.8751 50.9584C42.2362 50.3195 41.4445 50.0001 40.5001 50.0001C39.5556 50.0001 38.764 50.3195 38.1251 50.9584C37.4862 51.5973 37.1667 52.389 37.1667 53.3334C37.1667 54.2779 37.4862 55.0695 38.1251 55.7084C38.764 56.3473 39.5556 56.6667 40.5001 56.6667ZM37.1667 43.3334H43.8334V23.3334H37.1667V43.3334ZM40.5001 73.3334C35.889 73.3334 31.5556 72.4584 27.5001 70.7084C23.4445 68.9584 19.9167 66.5834 16.9167 63.5834C13.9167 60.5834 11.5417 57.0556 9.79175 53.0001C8.04175 48.9445 7.16675 44.6112 7.16675 40.0001C7.16675 35.389 8.04175 31.0556 9.79175 27.0001C11.5417 22.9445 13.9167 19.4167 16.9167 16.4167C19.9167 13.4167 23.4445 11.0417 27.5001 9.29175C31.5556 7.54175 35.889 6.66675 40.5001 6.66675C45.1112 6.66675 49.4445 7.54175 53.5001 9.29175C57.5556 11.0417 61.0834 13.4167 64.0834 16.4167C67.0834 19.4167 69.4584 22.9445 71.2084 27.0001C72.9584 31.0556 73.8334 35.389 73.8334 40.0001C73.8334 44.6112 72.9584 48.9445 71.2084 53.0001C69.4584 57.0556 67.0834 60.5834 64.0834 63.5834C61.0834 66.5834 57.5556 68.9584 53.5001 70.7084C49.4445 72.4584 45.1112 73.3334 40.5001 73.3334ZM40.5001 66.6667C47.9445 66.6667 54.2501 64.0834 59.4167 58.9167C64.5834 53.7501 67.1667 47.4445 67.1667 40.0001C67.1667 32.5556 64.5834 26.2501 59.4167 21.0834C54.2501 15.9167 47.9445 13.3334 40.5001 13.3334C33.0556 13.3334 26.7501 15.9167 21.5834 21.0834C16.4167 26.2501 13.8334 32.5556 13.8334 40.0001C13.8334 47.4445 16.4167 53.7501 21.5834 58.9167C26.7501 64.0834 33.0556 66.6667 40.5001 66.6667Z"
+          fill="url(#paint0_linear_230_166)"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_230_166"
+          x1="7.16675"
+          y1="6.66675"
+          x2="77.4571"
+          y2="10.7358"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F44336" />
+          <stop offset="1" stopColor="#C62828" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

package/src/components/icons/SignIcon.tsx

@@ -0,0 +1,17 @@
+export const SignIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 21V16.75L17.175 3.6C17.375 3.4 17.6 3.25 17.85 3.15C18.1 3.05 18.35 3 18.6 3C18.8667 3 19.1208 3.05 19.3625 3.15C19.6042 3.25 19.8167 3.4 20 3.6L21.4 5C21.6 5.18333 21.75 5.39583 21.85 5.6375C21.95 5.87917 22 6.13333 22 6.4C22 6.65 21.95 6.9 21.85 7.15C21.75 7.4 21.6 7.625 21.4 7.825L8.25 21H4ZM6 19H7.4L17.225 9.2L16.525 8.475L15.8 7.775L6 17.6V19ZM16.525 8.475L15.8 7.775L17.225 9.2L16.525 8.475ZM14 21C15.2333 21 16.375 20.6917 17.425 20.075C18.475 19.4583 19 18.6 19 17.5C19 16.9 18.8417 16.3833 18.525 15.95C18.2083 15.5167 17.7833 15.1417 17.25 14.825L15.775 16.3C16.1583 16.4667 16.4583 16.65 16.675 16.85C16.8917 17.05 17 17.2667 17 17.5C17 17.8833 16.6958 18.2292 16.0875 18.5375C15.4792 18.8458 14.7833 19 14 19C13.7167 19 13.4792 19.0958 13.2875 19.2875C13.0958 19.4792 13 19.7167 13 20C13 20.2833 13.0958 20.5208 13.2875 20.7125C13.4792 20.9042 13.7167 21 14 21ZM4.575 13.35L6.075 11.85C5.74167 11.7167 5.47917 11.5792 5.2875 11.4375C5.09583 11.2958 5 11.15 5 11C5 10.8 5.15 10.6 5.45 10.4C5.75 10.2 6.38333 9.89167 7.35 9.475C8.81667 8.84167 9.79167 8.26667 10.275 7.75C10.7583 7.23333 11 6.65 11 6C11 5.08333 10.6333 4.35417 9.9 3.8125C9.16667 3.27083 8.2 3 7 3C6.25 3 5.57917 3.13333 4.9875 3.4C4.39583 3.66667 3.94167 3.99167 3.625 4.375C3.44167 4.59167 3.36667 4.83333 3.4 5.1C3.43333 5.36667 3.55833 5.58333 3.775 5.75C3.99167 5.93333 4.23333 6.00833 4.5 5.975C4.76667 5.94167 4.99167 5.83333 5.175 5.65C5.40833 5.41667 5.66667 5.25 5.95 5.15C6.23333 5.05 6.58333 5 7 5C7.68333 5 8.1875 5.1 8.5125 5.3C8.8375 5.5 9 5.73333 9 6C9 6.23333 8.85417 6.44583 8.5625 6.6375C8.27083 6.82917 7.6 7.16667 6.55 7.65C5.21667 8.23333 4.29167 8.7625 3.775 9.2375C3.25833 9.7125 3 10.3 3 11C3 11.5333 3.14167 11.9875 3.425 12.3625C3.70833 12.7375 4.09167 13.0667 4.575 13.35Z"
+        fill="white"
+        fillOpacity="0.5"
+      />
+    </svg>
+  );
+};

package/src/components/icons/SuccessIcon.tsx

@@ -0,0 +1,29 @@
+export const SuccessIcon = () => {
+  return (
+    <svg
+      width="86"
+      height="85"
+      viewBox="0 0 86 85"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M38.0416 58.7916L63.0103 33.8228L58.052 28.8645L38.0416 48.8749L27.9478 38.7812L22.9895 43.7395L38.0416 58.7916ZM42.9999 77.9166C38.1006 77.9166 33.4964 76.9869 29.1874 75.1275C24.8784 73.2681 21.1301 70.7447 17.9426 67.5572C14.7551 64.3697 12.2317 60.6214 10.3723 56.3124C8.51294 52.0034 7.58325 47.3992 7.58325 42.4999C7.58325 37.6006 8.51294 32.9964 10.3723 28.6874C12.2317 24.3784 14.7551 20.6301 17.9426 17.4426C21.1301 14.2551 24.8784 11.7317 29.1874 9.87231C33.4964 8.01294 38.1006 7.08325 42.9999 7.08325C47.8992 7.08325 52.5034 8.01294 56.8124 9.87231C61.1214 11.7317 64.8697 14.2551 68.0572 17.4426C71.2447 20.6301 73.7681 24.3784 75.6275 28.6874C77.4869 32.9964 78.4166 37.6006 78.4166 42.4999C78.4166 47.3992 77.4869 52.0034 75.6275 56.3124C73.7681 60.6214 71.2447 64.3697 68.0572 67.5572C64.8697 70.7447 61.1214 73.2681 56.8124 75.1275C52.5034 76.9869 47.8992 77.9166 42.9999 77.9166ZM42.9999 70.8332C50.9096 70.8332 57.6093 68.0885 63.0989 62.5989C68.5885 57.1093 71.3332 50.4096 71.3332 42.4999C71.3332 34.5902 68.5885 27.8905 63.0989 22.401C57.6093 16.9114 50.9096 14.1666 42.9999 14.1666C35.0902 14.1666 28.3905 16.9114 22.901 22.401C17.4114 27.8905 14.6666 34.5902 14.6666 42.4999C14.6666 50.4096 17.4114 57.1093 22.901 62.5989C28.3905 68.0885 35.0902 70.8332 42.9999 70.8332Z"
+        fill="url(#paint0_linear_1287_1610)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1287_1610"
+          x1="7.58325"
+          y1="7.08325"
+          x2="82.2668"
+          y2="11.4066"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#4CAF50" />
+          <stop offset="1" stopColor="#2E7D32" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

package/src/components/icons/index.ts

@@ -20,3 +20,6 @@ export * from "./SettingsIcon";
 export * from "./XSwapBadgeIcon";
 export * from "./ChainlinkCCIPIcon";
 export * from "./XSwapLogo";
+export * from "./SignIcon";
+export * from "./SuccessIcon";
+export * from "./ErrorIcon";

package/src/config/init.tsx

@@ -3,15 +3,17 @@ import xswapConfig from "../../xswap.config";
 import { version } from "../../package.json";
 import { WaitingForInit } from "@src/components/WaitingForInit";
 
-export let xpayRoot: Root;
-export let xpayInitIndicatorRoot: Root;
-export let xpayTxStatusRoot: Root;
+export let xpayRoot: Root | null = null;
+export let xpayInitIndicatorRoot: Root | null = null;
+export let xpayTxStatusRoot: Root | null = null;
 
-let initCompleted = false;
+let xPayInitCompleted = false;
+
+const isServer = typeof window === "undefined";
 
 export const initDocument = () => {
-  if (typeof document === "undefined") {
-    throw new Error("Can't render XPay components from server side.");
+  if (isServer) {
+    return;
   }
   createXPayInitIndicatorRoot();
 
@@ -20,14 +22,14 @@ export const initDocument = () => {
     createXPayRoot(),
     createXPayTxStatusRoot(),
   ]).then(() => {
-    initCompleted = true;
+    xPayInitCompleted = true;
   });
 };
 
 export const waitForInitialization = async () => {
-  if (!initCompleted) {
+  if (!xPayInitCompleted) {
     displayInitIndicator(true);
-    while (!initCompleted) {
+    while (!xPayInitCompleted) {
       await new Promise((resolve) => setTimeout(resolve, 10));
     }
     displayInitIndicator(false);
@@ -35,6 +37,9 @@ export const waitForInitialization = async () => {
 };
 
 const createStyleElement = async () => {
+  if (isServer) {
+    return;
+  }
   const css = await fetch(
     `${xswapConfig.apiUrl}/sdk/css?${new URLSearchParams({
       data: JSON.stringify({ version }),
@@ -47,6 +52,9 @@ const createStyleElement = async () => {
 };
 
 const createXPayRoot = async () => {
+  if (isServer) {
+    return;
+  }
   const xswapElement = document.createElement("div");
   xswapElement.setAttribute("id", "xpay-root");
   xswapElement.setAttribute("class", "xpay");
@@ -55,6 +63,9 @@ const createXPayRoot = async () => {
 };
 
 const createXPayTxStatusRoot = async () => {
+  if (isServer) {
+    return;
+  }
   const txStatusElement = document.createElement("div");
   txStatusElement.setAttribute("id", "xpay-tx-status");
   txStatusElement.setAttribute("class", "xpay-tx-status");
@@ -63,6 +74,9 @@ const createXPayTxStatusRoot = async () => {
 };
 
 const createXPayInitIndicatorRoot = () => {
+  if (isServer) {
+    return;
+  }
   const initIndicatorElement = document.createElement("div");
   initIndicatorElement.setAttribute("id", "xpay-init-indicator");
   document.body.appendChild(initIndicatorElement);
@@ -70,7 +84,10 @@ const createXPayInitIndicatorRoot = () => {
 };
 
 const displayInitIndicator = (display: boolean) => {
+  if (isServer || !xpayInitIndicatorRoot) {
+    return;
+  }
   display
     ? xpayInitIndicatorRoot.render(<WaitingForInit />)
-    : xpayInitIndicatorRoot.render("");
+    : xpayInitIndicatorRoot.render(null);
 };

package/src/constants/index.ts

@@ -7,11 +7,11 @@ export const DELIVERY_TIME = 30 * 1000 * 60;
 export const EXPRESS_DELIVERY_TIME = 30 * 1000;
 export const EXPRESS_DELIVERY_LIMIT = 1000; // USD
 export const BALANCES_CHUNK_SIZE = 500;
-export const ROUTE_TIMEOUT_MS = 5000;
+export const ROUTE_TIMEOUT_MS = 10000;
 export const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.0001;
 export const DEFAULT_SOURCE_CHAIN_ID = "1";
 export const CCIP_EXPLORER = "https://ccip.chain.link/";
-export const TX_RECEIPT_STATUS_LIFETIME = 10000;
+export const TX_RECEIPT_STATUS_LIFETIME = 60000;
 
 export const MSG_SENT_EVENT_SIG =
   "MessageSent(bytes32,uint64,address,bytes,address,uint256,uint256,address,uint256)";

package/src/models/payloads/GetSwapTxPayload.ts

@@ -6,4 +6,6 @@ export type GetSwapTxPayload = {
   dstToken: string;
   customContractCalls?: ContractCall[];
   desc?: string;
+  retrunTransactions?: boolean;
+  dstDisplayToken?: string;
 };

package/src/services/integrations/monitoring.ts

@@ -101,9 +101,6 @@ export const renderTxStatus = async (
   addTransactionToRenderedTransactions(transaction);
   renderTxStatusButtons();
 
-  // start listening
-  // TODO if someone will provide tx which already is done then we will never get the event. Will need to add status endpoint on backend for transactions to check if they are done or not.
-
   const xSwapRouterOnDestinationAddress = ADDRESSES[dstChainId]?.XSwapRouter;
   if (!xSwapRouterOnDestinationAddress) {
     throw new Error(`Unknown destination XSwapRouter!`);
@@ -140,6 +137,16 @@ export const renderTxStatus = async (
     }
   });
 
+  setTimeout(
+    () =>
+      getTxStatus({ transferId: messageId }).then((response) => {
+        if (response.status === "DONE") {
+          onSuccess();
+        }
+      }),
+    30 * 60 * 1000,
+  ); // additional check after 30 min
+
   xSwapRouterOnDestination.once(msgReceivedEventFilter, () => onSuccess());
 };
 

package/src/services/integrations/transactions.ts

@@ -14,7 +14,9 @@ export const openTransactionModal = async ({
   dstToken,
   customContractCalls = [],
   desc,
-}: GetSwapTxPayload): Promise<Transactions> => {
+  retrunTransactions,
+  dstDisplayToken,
+}: GetSwapTxPayload): Promise<Transactions | undefined> => {
   const supportedChains: Chain[] = (await getChains()).filter(
     ({ web3Environment, swapSupported }) =>
       web3Environment === Web3Environment.MAINNET && swapSupported,
@@ -29,9 +31,13 @@ export const openTransactionModal = async ({
     customContractCalls,
     desc,
     supportedChains,
+    retrunTransactions,
+    dstDisplayTokenAddr: dstDisplayToken,
   });
 
-  return route.transactions;
+  if (retrunTransactions) {
+    return route.transactions;
+  }
 };
 
 const validateSwapTxData = (
@@ -48,7 +54,7 @@ const validateSwapTxData = (
 
   if (!isETHAddressValid(dstToken)) {
     throw new Error(
-      `Provided token address ${dstToken} on chain ${dstChain} is not correct`,
+      `Provided token address ${dstToken} on chain ${dstChain} is invalid`,
     );
   }
 };

package/src/utils/contracts.ts

@@ -23,6 +23,24 @@ export const getBalanceOf = async (
     await contract.decimals(),
   );
 };
+export const getAllowanceOf = async (
+  token: string,
+  wallet: string,
+  spender: string,
+  rpcUrl: string,
+): Promise<string> => {
+  const provider = ethers.getDefaultProvider(rpcUrl);
+
+  if (token === ethers.constants.AddressZero) {
+    return ethers.constants.MaxUint256.toString();
+  }
+
+  const contract = new ethers.Contract(token, ERC20Abi, provider);
+  return ethers.utils.formatUnits(
+    await contract.allowance(wallet, spender),
+    await contract.decimals(),
+  );
+};
 
 export const getBalances = async (
   chain: Chain,

package/src/utils/index.ts

@@ -1,6 +1,7 @@
 export * from "./contracts";
 export * from "./numbers";
 export * from "./strings";
+export * from "./parseWeb3Error";
 
 import { format } from "date-fns";
 

package/src/utils/parseWeb3Error.ts

@@ -0,0 +1,93 @@
+import { ethers } from "ethers";
+
+/**
+ * Parses a Web3 error and returns a user-friendly error message.
+ * @param error - The error object or message to parse.
+ * @returns A user-friendly error message.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function parseWeb3Error(error: any): string {
+  const errorMessage =
+    typeof error === "string"
+      ? error
+      : error?.message || "An unknown error occurred";
+
+  // User rejected the transaction
+  if (
+    errorMessage.includes("User denied transaction signature") ||
+    errorMessage.includes("User rejected the request")
+  ) {
+    return "Transaction was cancelled.";
+  }
+
+  // Insufficient funds
+  if (errorMessage.includes("insufficient funds")) {
+    return "Insufficient funds to complete the transaction.";
+  }
+
+  // Gas price too low
+  if (errorMessage.includes("gas price too low")) {
+    return "Gas price is too low. Please increase the gas price and try again.";
+  }
+
+  // Nonce too low
+  if (errorMessage.includes("nonce too low")) {
+    return "Transaction nonce is too low. Please reset your account in MetaMask and try again.";
+  }
+
+  // Contract execution error
+  if (errorMessage.includes("execution reverted")) {
+    const revertReason = errorMessage.match(/reason: (.+?)(?:, method|$)/)?.[1];
+    return revertReason
+      ? `Transaction failed: ${revertReason}`
+      : "Transaction failed during contract execution.";
+  }
+
+  // Gas limit exceeded
+  if (errorMessage.includes("exceeds block gas limit")) {
+    return "Transaction exceeded gas limit. Please try again with a higher gas limit.";
+  }
+
+  // Network error
+  if (
+    errorMessage.includes("network error") ||
+    errorMessage.includes("connection error")
+  ) {
+    return "Network error. Please check your internet connection and try again.";
+  }
+
+  // Metamask specific errors
+  if (errorMessage.includes("MetaMask Tx Signature:")) {
+    return (
+      "MetaMask error: " +
+      errorMessage.split("MetaMask Tx Signature:")[1].trim()
+    );
+  }
+
+  // Ethers.js specific errors
+  if (error.code) {
+    switch (error.code) {
+      case ethers.errors.INVALID_ARGUMENT:
+        return "Invalid argument provided to the transaction.";
+      case ethers.errors.MISSING_ARGUMENT:
+        return "Missing required argument for the transaction.";
+      case ethers.errors.UNEXPECTED_ARGUMENT:
+        return "Unexpected argument provided to the transaction.";
+      case ethers.errors.CALL_EXCEPTION:
+        return "Contract call failed. The transaction might have been reverted.";
+      case ethers.errors.INSUFFICIENT_FUNDS:
+        return "Insufficient funds to complete the transaction.";
+      case ethers.errors.NONCE_EXPIRED:
+        return "Transaction nonce has expired. Please try again.";
+      case ethers.errors.REPLACEMENT_UNDERPRICED:
+        return "Replacement transaction underpriced. Please increase the gas price.";
+      case ethers.errors.UNPREDICTABLE_GAS_LIMIT:
+        return "Unable to estimate gas limit. The transaction might fail.";
+      default:
+        return "An error occurred: " + error.message;
+    }
+  }
+
+  // If no specific error is caught, return a generic message
+  return "An error occurred while processing the transaction. Please try again.";
+}