@xswap-link/sdk 0.2.3 → 0.2.5

package/src/config/init.tsx

@@ -0,0 +1,75 @@
+import { createRoot, Root } from "react-dom/client";
+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;
+
+let initCompleted = false;
+
+export const initDocument = () => {
+  if (typeof document === "undefined") {
+    throw new Error("Can't render XPay components from server side.");
+  }
+  createInitIndicatorRoot();
+
+  Promise.all([
+    createStyleElement(),
+    createXSwapRoot(),
+    createTxStatusRoot(),
+  ]).then(() => {
+    initCompleted = true;
+  });
+};
+
+export const waitForInitialization = async () => {
+  if (!initCompleted) {
+    displayInitIndicator(true);
+    while (!initCompleted) {
+      await new Promise((resolve) => setTimeout(resolve, 10));
+    }
+    displayInitIndicator(false);
+  }
+};
+
+const createStyleElement = async () => {
+  const css = await fetch(
+    `${xswapConfig.apiUrl}/sdk/css?${new URLSearchParams({
+      data: JSON.stringify({ version }),
+    })}`,
+  );
+  const text = await css.text();
+  const style = document.createElement("style");
+  style.textContent = text;
+  document.body.appendChild(style);
+};
+
+const createXSwapRoot = async () => {
+  const xswapElement = document.createElement("div");
+  xswapElement.setAttribute("id", "xswap-modal");
+  document.body.appendChild(xswapElement);
+  xswapRoot = createRoot(xswapElement);
+};
+
+const createTxStatusRoot = async () => {
+  const txStatusElement = document.createElement("div");
+  txStatusElement.setAttribute("id", "xswap-tx-status");
+  txStatusElement.setAttribute("class", "xswap-tx-status");
+  document.body.appendChild(txStatusElement);
+  txStatusRoot = createRoot(txStatusElement);
+};
+
+const createInitIndicatorRoot = () => {
+  const initIndicatorElement = document.createElement("div");
+  initIndicatorElement.setAttribute("id", "xswap-init-indicator");
+  document.body.appendChild(initIndicatorElement);
+  initIndicatorRoot = createRoot(initIndicatorElement);
+};
+
+const displayInitIndicator = (display: boolean) => {
+  display
+    ? initIndicatorRoot.render(<WaitingForInit />)
+    : initIndicatorRoot.render("");
+};

package/src/constants/index.ts

@@ -5,6 +5,7 @@ export const NUMBER_INPUT_REGEX = /^[0-9]*[.,]?[0-9]*$/;
 export const SLIPPAGE_PRESETS: number[] = [0.5, 1.5, 3.0];
 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 MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.0001;

package/src/index.ts

@@ -1,6 +1,14 @@
 import { initDocument } from "@src/config/init";
+import { openTransactionModal, renderTxStatus } from "@src/services";
 
 initDocument();
 
 export * from "@src/models";
-export { getSwapTx, monitorTransactionStatus } from "@src/services";
+export { openTransactionModal, renderTxStatus } from "@src/services";
+
+const XPay = {
+  openTransactionModal,
+  renderTxStatus,
+};
+
+export default XPay;

package/src/models/Route.ts

@@ -1,5 +1,3 @@
-import { TransactionRequest } from "@ethersproject/providers";
-
 export type Route = {
   estAmountOut: string;
   minAmountOut: string;
@@ -13,6 +11,12 @@ export type Transactions = {
   swap: TransactionRequest;
 };
 
+export type TransactionRequest = {
+  to: string;
+  data: string;
+  value: string;
+};
+
 export type XSwapFees = {
   ccipFee?: string;
   xSwapFee: XSwapFee;

package/src/models/TokenData.ts

@@ -24,7 +24,7 @@ export type Token = {
   name: string;
   symbol: string;
   decimals: number;
-  image: string;
+  image?: string;
   priority: number;
   quickPick?: boolean;
   supported?: boolean;

package/src/models/TransactionHistory.ts

@@ -34,7 +34,11 @@ export type HistoryTransaction = {
   } | null;
 };
 
-export type TransactionStatus = "IN_PROGRESS" | "DONE" | "REVERTED";
+export type TransactionStatus =
+  | "IN_PROGRESS"
+  | "DONE"
+  | "REVERTED"
+  | "NOT_FOUND";
 
 export type Transaction = {
   hash: string;
@@ -50,13 +54,13 @@ export type Transaction = {
 };
 
 export type MonitoredTransaction = {
-  fromChain: string | undefined;
-  fromChainImage: string | undefined;
-  fromToken: string | undefined;
-  fromTokenImage: string | undefined;
-  fromAmount: string | undefined;
-  toChain: string | undefined;
-  toChainImage: string | undefined;
+  srcChain: string | undefined;
+  srcChainImage: string | undefined;
+  srcToken: string | undefined;
+  srcTokenImage: string | undefined;
+  srcAmount: string | undefined;
+  dstChain: string | undefined;
+  dstChainImage: string | undefined;
   isDone: boolean;
   txHash: string;
   explorer: string | undefined;

package/src/models/payloads/GetRoutePayload.ts

@@ -1,6 +1,7 @@
 import { CoinTypeAddress, CollectFees, ContractCall } from "@src/models";
 
 export type GetRoutePayload = {
+  integratorId: string;
   fromChain: string;
   toChain: string;
   fromToken: string;

package/src/models/payloads/GetSwapTxPayload.ts

@@ -1,6 +1,7 @@
 import { ContractCall } from "@src/models";
 
 export type GetSwapTxPayload = {
+  integratorId: string;
   dstChain: string;
   dstToken: string;
   customContractCalls?: ContractCall[];

package/src/services/api.ts

@@ -9,6 +9,7 @@ import {
   Token,
   TokenPrices,
   TransactionHistory,
+  TransactionStatus,
 } from "@src/models";
 
 async function _sendRequest<T>(
@@ -110,3 +111,11 @@ export async function getPrices(payload: GetPricesPayload) {
     })}`,
   );
 }
+
+export async function getTxStatus(payload: { transferId: string }) {
+  return await _sendRequest<{ status: TransactionStatus }>(
+    `/getTxStatus?${new URLSearchParams({
+      data: JSON.stringify(payload), // todo remove once gcp starts working
+    })}`,
+  );
+}

package/src/services/blockchain.ts

@@ -0,0 +1,49 @@
+import { ERC20Abi } from "@src/contracts";
+import { ethers } from "ethers";
+import { Chain, Token } from "@src/models";
+
+export const getCustomTokenData = async (
+  chain: Chain,
+  tokenAddress: string,
+): Promise<Token> => {
+  const rpcUrl = chain.publicRpcUrls[0];
+
+  const customTokenContract = new ethers.Contract(
+    tokenAddress.toLowerCase(),
+    ERC20Abi,
+    ethers.getDefaultProvider(rpcUrl),
+  );
+  try {
+    const query = async (
+      contract: ethers.Contract | null,
+      method: string,
+      args: unknown[] = [],
+    ) => {
+      if (contract?.provider) {
+        const response = await contract[method](...args);
+        return response;
+      }
+      return null;
+    };
+    const responses = await Promise.all([
+      query(customTokenContract, "decimals"),
+      query(customTokenContract, "name"),
+      query(customTokenContract, "symbol"),
+    ]);
+    const [decimals, name, symbol] = responses;
+
+    return {
+      address: tokenAddress,
+      symbol: symbol,
+      name: name,
+      decimals: decimals,
+      quickPick: false,
+      supported: true,
+      priority: 0,
+    };
+  } catch (_) {
+    throw new Error(
+      `Provided token ${tokenAddress} does not exists on chain ${chain.displayName}`,
+    );
+  }
+};

package/src/services/index.ts

@@ -1,2 +1,3 @@
 export * from "./api";
 export * from "./integrations";
+export * from "./blockchain";

package/src/services/integrations/monitoring.ts

@@ -1,5 +1,5 @@
 import { Chain, MonitoredTransaction, Web3Environment } from "@src/models";
-import { getChains } from "@src/services";
+import { getChains, getTxStatus } from "@src/services";
 import { ethers } from "ethers";
 import { weiToHumanReadable } from "@src/utils";
 import {
@@ -18,8 +18,9 @@ import {
 } from "@src/components";
 import { ADDRESSES } from "@src/contracts";
 import retry from "async-retry";
+import { getCustomTokenData } from "../blockchain";
 
-export const monitorTransactionStatus = async (
+export const renderTxStatus = async (
   txChainId: string,
   txHash: string,
 ): Promise<void> => {
@@ -52,11 +53,20 @@ export const monitorTransactionStatus = async (
   const srcChain = supportedChains.find(
     (chain) => chain.chainId === txChainId.toString(),
   );
+  if (!srcChain) {
+    throw new Error(`Unknown src chain ${txChainId}`);
+  }
+
+  const tokenAddress = decodedMessageSentEvent.args?.token.toString();
 
-  const srcToken = srcChain?.tokens.find(
+  let srcToken = srcChain.tokens.find(
     (token) => token.address === decodedMessageSentEvent.args?.token.toString(),
   );
 
+  if (!srcToken) {
+    srcToken = await getCustomTokenData(srcChain, tokenAddress);
+  }
+
   const dstChain = supportedChains.find(
     (chain) =>
       chain.ccipChainId ===
@@ -69,19 +79,21 @@ export const monitorTransactionStatus = async (
     throw new Error(`Unknown destination chain!`);
   }
 
+  const tokenAmount = weiToHumanReadable({
+    amount: decodedMessageSentEvent.args?.tokenAmount.toString(),
+    decimals: srcToken?.decimals || 18,
+    precisionFractionalPlaces: 4,
+  });
+
   const transaction: MonitoredTransaction = {
     txHash: txHash,
-    fromChain: srcChain?.displayName,
-    fromChainImage: srcChain?.image,
-    toChain: dstChain.displayName,
-    toChainImage: dstChain.image,
-    fromToken: srcToken?.symbol,
-    fromTokenImage: srcToken?.image,
-    fromAmount: weiToHumanReadable({
-      amount: decodedMessageSentEvent.args?.tokenAmount.toString(),
-      decimals: srcToken?.decimals || 18,
-      precisionFractionalPlaces: 4,
-    }),
+    srcChain: srcChain.displayName,
+    srcChainImage: srcChain.image,
+    dstChain: dstChain.displayName,
+    dstChainImage: dstChain.image,
+    srcToken: srcToken?.symbol,
+    srcTokenImage: srcToken?.image,
+    srcAmount: tokenAmount === "0" ? "<0.0001" : tokenAmount,
     isDone: false,
     explorer: `${CCIP_EXPLORER}/tx/${txHash}`,
   };
@@ -120,6 +132,14 @@ export const monitorTransactionStatus = async (
     removeTransactionFromRenderedTransactions(txHash);
     renderTxStatusButtons();
   };
+
+  // check tx status on backend
+  getTxStatus({ transferId: messageId }).then((response) => {
+    if (response.status === "DONE") {
+      onSuccess();
+    }
+  });
+
   xSwapRouterOnDestination.once(msgReceivedEventFilter, () => onSuccess());
 };
 

package/src/services/integrations/transactions.ts

@@ -6,8 +6,10 @@ import {
 } from "@src/models";
 import { getChains } from "@src/services";
 import { openTxConfigForm } from "@src/components";
+import { isETHAddressValid } from "@src/utils";
 
-export const getSwapTx = async ({
+export const openTransactionModal = async ({
+  integratorId,
   dstChain,
   dstToken,
   customContractCalls = [],
@@ -21,6 +23,7 @@ export const getSwapTx = async ({
   validateSwapTxData(supportedChains, dstChain, dstToken);
 
   const route = await openTxConfigForm({
+    integratorId: integratorId,
     dstChainId: dstChain,
     dstTokenAddr: dstToken,
     customContractCalls,
@@ -43,7 +46,9 @@ const validateSwapTxData = (
     throw new Error(`Provided chain '${dstChain}' is not supported`);
   }
 
-  if (!supportedDstChain.tokens.some(({ address }) => address === dstToken)) {
-    throw new Error(`Provided token '${dstToken}' is not supported`);
+  if (!isETHAddressValid(dstToken)) {
+    throw new Error(
+      `Provided token address ${dstToken} on chain ${dstChain} is not correct`,
+    );
   }
 };

package/src/utils/contracts.ts

@@ -1,8 +1,6 @@
 import { BigNumber, BigNumberish, ethers } from "ethers";
-import { TransactionRequest } from "@ethersproject/providers";
-import { safeBigNumberFrom } from "./numbers";
 import { ADDRESSES, BatchQueryAbi, ERC20Abi } from "@src/contracts";
-import { Chain, TokenBalances } from "@src/models";
+import { Chain, TokenBalances, TransactionRequest } from "@src/models";
 import { chunkArray } from "@src/utils";
 import { BALANCES_CHUNK_SIZE } from "@src/constants";
 
@@ -104,7 +102,7 @@ export const generateApproveTxData = (
   return tokenAddress !== ethers.constants.AddressZero
     ? {
         to: tokenAddress,
-        value: safeBigNumberFrom("0"),
+        value: "0",
         data: IERC20.encodeFunctionData("approve", [spender, amount]),
       }
     : undefined;

package/src/utils/strings.ts

@@ -4,3 +4,7 @@ export const shortAddress = (address: string): string => {
     address.length,
   )}`;
 };
+
+export const isETHAddressValid = (address: string): boolean => {
+  return /^0x[a-fA-F0-9]{40}$/.test(address);
+};

package/tailwind.config.js

@@ -1,5 +1,5 @@
 /** @type {import("tailwindcss").Config} */
-module.exports = {
+export default {
   content: ["./src/components/**/*.{js,ts,jsx,tsx,mdx}"],
   theme: {
     extend: {
@@ -18,7 +18,7 @@ module.exports = {
       },
       width: {
         x_desktop: "600px",
-        x_mobile: "320px",
+        x_mobile: "360px",
       },
       animation: {
         "spin-slow": "spin 3s linear infinite",

package/src/config/init.ts

@@ -1,35 +0,0 @@
-import { createRoot, Root } from "react-dom/client";
-import xswapConfig from "../../xswap.config";
-import { version } from "../../package.json";
-
-export let xswapRoot: Root;
-export let txStatusRoot: Root;
-
-export const initDocument = () => {
-  if (typeof document === "undefined") {
-    throw new Error("Can't render XPay components from server side.");
-  }
-
-  const cssRequestParams = new URLSearchParams({
-    data: JSON.stringify({ version }),
-  });
-
-  fetch(`${xswapConfig.apiUrl}/sdk/css?${cssRequestParams}`).then(
-    async (css) => {
-      const style = document.createElement("style");
-      style.textContent = await css.text();
-      document.body.appendChild(style);
-    },
-  );
-
-  const xswapElement = document.createElement("div");
-  xswapElement.setAttribute("id", "xswap-modal");
-  document.body.appendChild(xswapElement);
-  xswapRoot = createRoot(xswapElement);
-
-  const txStatusElement = document.createElement("div");
-  txStatusElement.setAttribute("id", "xswap-tx-status");
-  txStatusElement.setAttribute("class", "xswap-tx-status");
-  document.body.appendChild(txStatusElement);
-  txStatusRoot = createRoot(txStatusElement);
-};