@xswap-link/sdk 0.2.5 → 0.3.0

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,31 +3,33 @@ import xswapConfig from "../../xswap.config";
 import { version } from "../../package.json";
 import { WaitingForInit } from "@src/components/WaitingForInit";
 
-export let initIndicatorRoot: Root;
-export let xswapRoot: Root;
-export let txStatusRoot: 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;
   }
-  createInitIndicatorRoot();
+  createXPayInitIndicatorRoot();
 
   Promise.all([
     createStyleElement(),
-    createXSwapRoot(),
-    createTxStatusRoot(),
+    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 }),
@@ -46,30 +51,43 @@ const createStyleElement = async () => {
   document.body.appendChild(style);
 };
 
-const createXSwapRoot = async () => {
+const createXPayRoot = async () => {
+  if (isServer) {
+    return;
+  }
   const xswapElement = document.createElement("div");
-  xswapElement.setAttribute("id", "xswap-modal");
+  xswapElement.setAttribute("id", "xpay-root");
+  xswapElement.setAttribute("class", "xpay");
   document.body.appendChild(xswapElement);
-  xswapRoot = createRoot(xswapElement);
+  xpayRoot = createRoot(xswapElement);
 };
 
-const createTxStatusRoot = async () => {
+const createXPayTxStatusRoot = async () => {
+  if (isServer) {
+    return;
+  }
   const txStatusElement = document.createElement("div");
-  txStatusElement.setAttribute("id", "xswap-tx-status");
-  txStatusElement.setAttribute("class", "xswap-tx-status");
+  txStatusElement.setAttribute("id", "xpay-tx-status");
+  txStatusElement.setAttribute("class", "xpay-tx-status");
   document.body.appendChild(txStatusElement);
-  txStatusRoot = createRoot(txStatusElement);
+  xpayTxStatusRoot = createRoot(txStatusElement);
 };
 
-const createInitIndicatorRoot = () => {
+const createXPayInitIndicatorRoot = () => {
+  if (isServer) {
+    return;
+  }
   const initIndicatorElement = document.createElement("div");
-  initIndicatorElement.setAttribute("id", "xswap-init-indicator");
+  initIndicatorElement.setAttribute("id", "xpay-init-indicator");
   document.body.appendChild(initIndicatorElement);
-  initIndicatorRoot = createRoot(initIndicatorElement);
+  xpayInitIndicatorRoot = createRoot(initIndicatorElement);
 };
 
 const displayInitIndicator = (display: boolean) => {
+  if (isServer || !xpayInitIndicatorRoot) {
+    return;
+  }
   display
-    ? initIndicatorRoot.render(<WaitingForInit />)
-    : initIndicatorRoot.render("");
+    ? xpayInitIndicatorRoot.render(<WaitingForInit />)
+    : 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.";
+}

package/tailwind.config.js

@@ -15,6 +15,45 @@ export default {
         x_blue_dark: "rgba(43,74,157,1)",
         x_green_light: "rgba(43,74,157,1)",
         x_green_dark: "rgba(46,125,50,1)",
+
+        x_gray_100: "#D1D3D4",
+        x_gray_200: "#90A4AE",
+        x_gray_300: "#3C3C3B",
+        x_gray_400: "#272727",
+        x_gray_500: "#0F0F0F",
+        x_gray_600: "#020202",
+        x_green_100: "#11EFAA",
+        x_green_200: "#07C166",
+        x_green_300: "#4CAF50",
+        x_green_400: "#2E7D32",
+        x_green_500: "#08493C",
+        x_green_600: "#032921",
+        x_red_100: "#FFB7B2",
+        x_red_200: "#FE796F",
+        x_red_300: "#F44336",
+        x_red_400: "#C62828",
+        x_red_500: "#890000",
+        x_red_600: "#540000",
+        x_blue_100: "#A0F2FE",
+        x_blue_200: "#12AAFF",
+        x_blue_300: "#3681C6",
+        x_blue_300_20: "#3681C633",
+        x_blue_400: "#2B4A9D",
+        x_blue_400_20: "#2B4A9D33",
+        x_blue_500: "#1C227B",
+        x_blue_600: "#0B173A",
+        x_purple_100: "#EFA9FF",
+        x_purple_200: "#D427FC",
+        x_purple_300: "#AC8FFF",
+        x_purple_400: "#8247E5",
+        x_purple_500: "#46139D",
+        x_purple_600: "#2E075F",
+        x_orange_100: "#FEECA8",
+        x_orange_200: "#FDD835",
+        x_orange_300: "#FFCA28",
+        x_orange_400: "#F7A80D",
+        x_orange_500: "#FF6F00",
+        x_orange_600: "#795548",
       },
       width: {
         x_desktop: "600px",
@@ -26,4 +65,5 @@ export default {
     },
   },
   plugins: [],
+  prefix: "xpay-",
 };