@xswap-link/sdk 0.1.2 → 0.1.3

package/src/components/TxHistoryButton/index.tsx

@@ -0,0 +1,150 @@
+import { FC, useState } from "react";
+import { createRoot } from "react-dom/client";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  CheckIcon,
+  CircularProgressIcon,
+} from "../icons";
+import { ArrowUpRightIcon, XSwapLogo } from "../icons";
+import { MonitoredTransaction } from "@src/models";
+
+interface Props {
+  transaction: MonitoredTransaction;
+}
+
+export const TxHistoryButton: FC<Props> = ({ transaction }) => {
+  const {
+    fromChain,
+    fromChainImage,
+    fromToken,
+    fromTokenImage,
+    fromAmount,
+    toChain,
+    toChainImage,
+    isDone,
+    txHash,
+    explorer,
+  } = transaction;
+  const [isWide, setIsWide] = useState(false);
+  return (
+    <div className="flex gap-2" onClick={() => setIsWide((x: boolean) => !x)}>
+      {isWide && (
+        <div
+          className={`flex items-center min-w-60 sm:w-[520px] text-white h-14 px-4 text-sm gap-3 rounded-xl bg-gradient-to-r ${
+            isDone
+              ? "from-[rgba(76,175,80,0.1)] to-[rgba(46,125,50,0.1)] border border-solid border-x_green_dark"
+              : "from-[rgba(54,129,198,0.1)] to-[rgba(43,74,157,0.1)] border border-solid border-x_blue_dark"
+          }`}
+        >
+          <div className="flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full">
+            <div className="flex items-center gap-2">
+              <img
+                className="w-5 h-5"
+                src={fromChainImage}
+                alt="source chain"
+              />
+              <div>{fromChain}</div>
+              <div className="w-3.5 h-3.5">
+                <ArrowRightIcon />
+              </div>
+              <img className="w-5 h-5" src={toChainImage} alt="to chain" />
+              <div>{toChain}</div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <div>Sent</div>
+              <div>{fromAmount}</div>
+              <div>{fromToken}</div>
+              <img
+                className="w-5 h-5"
+                src={fromTokenImage}
+                alt="source token"
+              />
+            </div>
+          </div>
+          <a
+            href={explorer}
+            target="_blank"
+            rel="noreferrer"
+            className="no-underline cursor-pointer"
+            aria-label="Show the transaction in the chain explorer"
+          >
+            <div className="w-3.5 h-3.5">
+              <ArrowUpRightIcon />
+            </div>
+          </a>
+        </div>
+      )}
+      <div
+        className={`text-white rounded-xl cursor-pointer bg-gradient-to-r 
+           ${
+             isDone
+               ? "from-[rgba(76,175,80,0.1)] to-[rgba(46,125,50,0.1)] border border-solid border-x_green_dark"
+               : "from-[rgba(54,129,198,0.1)] to-[rgba(43,74,157,0.1)] border border-solid border-x_blue_dark"
+           }`}
+      >
+        <div className="flex gap-2 items-center h-14 w-20 justify-center">
+          <ArrowLeftIcon />
+          <div className="relative flex items-center justify-center w-9 h-9">
+            {isDone ? (
+              <div className="text-x_green w-5 h-5">
+                <CheckIcon />
+              </div>
+            ) : (
+              <>
+                <div className="w-5 h-5">
+                  <XSwapLogo />
+                </div>
+                <div className="absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white">
+                  <CircularProgressIcon />
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+let renderedTransactions: MonitoredTransaction[] = [];
+
+export const addTransactionToRenderedTransactions = (
+  transaction: MonitoredTransaction,
+) => {
+  if (!renderedTransactions.some(({ txHash }) => txHash === transaction.txHash))
+    renderedTransactions.push(transaction);
+};
+
+export const removeTransactionFromRenderedTransactions = (txHash: string) => {
+  const filteredRenderedTransactions = renderedTransactions.filter(
+    (item) => item.txHash !== txHash,
+  );
+  renderedTransactions = [...filteredRenderedTransactions];
+};
+
+export const updateTransactionDoneInRenderedTransactions = (txHash: string) => {
+  const transaction = renderedTransactions.find(
+    (item) => item.txHash === txHash,
+  );
+  if (transaction) {
+    transaction.isDone = true;
+  }
+};
+
+const historyElement = document.createElement("div");
+historyElement.setAttribute("id", "xswap-history");
+historyElement.setAttribute(
+  "class",
+  "absolute bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50",
+);
+document.body.appendChild(historyElement);
+const txHistoryButtonRoot = createRoot(historyElement);
+
+export const renderTxHistoryButtons = () => {
+  const buttons = renderedTransactions.map((item) => (
+    <TxHistoryButton key={item.txHash} transaction={item} />
+  ));
+  txHistoryButtonRoot.render(buttons);
+};

package/src/components/icons/ArrowLeftIcon.tsx

@@ -0,0 +1,16 @@
+export const ArrowLeftIcon = () => {
+  return (
+    <svg
+      width="10"
+      height="16"
+      viewBox="0 0 10 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0.5 8L8.13251 15.5L9.5 14.1562L3.20318 8L9.4682 1.84375L8.10071 0.5L0.5 8Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

package/src/components/icons/ChevronUpIcon.tsx

@@ -1,11 +1,6 @@
 export const ChevronUpIcon = () => {
   return (
-    <svg
-      height="12"
-      width="12"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 512 512"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
       <path
         fill="currentColor"
         d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"

package/src/components/icons/CircularProgressIcon.tsx

@@ -1,24 +1,22 @@
 export const CircularProgressIcon = () => {
   return (
     <svg
-      className="animate-spin -ml-1 mr-3 h-10 w-10 text-white"
-      xmlns="http://www.w3.org/2000/svg"
+      className="animate-spin-slow text-white"
+      width="33"
+      height="33"
+      viewBox="0 0 33 33"
       fill="none"
-      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
     >
       <circle
-        className="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="4"
-      ></circle>
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      ></path>
+        cx="16.5"
+        cy="16.5"
+        r="15.5"
+        stroke="white"
+        strokeOpacity="0.2"
+        strokeWidth="2"
+      />
+      <path d="M1 16C1 7.71573 7.71573 1 16 1" stroke="white" strokeWidth="2" />
     </svg>
   );
 };

package/src/components/icons/XSwapLogo.tsx

@@ -0,0 +1,98 @@
+export const XSwapLogo = () => {
+  return (
+    <svg
+      version="1.1"
+      id="Layer_1"
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      viewBox="0 0 50 50"
+      enableBackground="new 0 0 50 50"
+    >
+      <image
+        id="image0"
+        x="0"
+        y="0"
+        href="data:image/png;base64,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"
+      />
+    </svg>
+  );
+};

package/src/components/icons/index.ts

@@ -1,5 +1,6 @@
 export * from "./ArrowRightIcon";
 export * from "./ArrowDownIcon";
+export * from "./ArrowLeftIcon";
 export * from "./ArrowUpRightIcon";
 export * from "./CheckIcon";
 export * from "./ChevronDownIcon";
@@ -18,3 +19,4 @@ export * from "./InfoIcon";
 export * from "./SettingsIcon";
 export * from "./XSwapBadgeIcon";
 export * from "./ChainlinkCCIPIcon";
+export * from "./XSwapLogo";

package/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from "./Alert";
 export * from "./TxConfigForm";
+export * from "./TxHistoryButton";
 export * from "./Skeleton";

package/src/constants/index.ts

@@ -9,3 +9,4 @@ export const BALANCES_CHUNK_SIZE = 500;
 export const ROUTE_TIMEOUT_MS = 5000;
 export const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.0001;
 export const DEFAULT_SOURCE_CHAIN_ID = "1";
+export const CCIP_EXPLORER = "https://ccip.chain.link/";

package/src/contracts/abi/index.ts

@@ -1,7 +1,5 @@
 import BatchQuery from "./BatchQuery.json";
 import ERC20 from "./ERC20.json";
-import XSwapRouter from "./XSwapRouter.json";
 
 export const BatchQueryAbi = BatchQuery;
 export const ERC20Abi = ERC20;
-export const XSwapRouterAbi = XSwapRouter;

package/src/contracts/addresses.ts

@@ -4,31 +4,37 @@ export const ADDRESSES: Addresses = {
   // arbitrum
   "42161": {
     [ContractName.BatchQuery]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
+    [ContractName.XSwapRouter]: "0xe1c14b9f065dead2e89ee35382f8bd42bdb87a04",
     [ContractName.FeeCollector]: "0xb37275558f02f05104c2ba35199d16adeb43432f",
   },
   // avalanche
   "43114": {
     [ContractName.BatchQuery]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
+    [ContractName.XSwapRouter]: "0xe1c14b9f065dead2e89ee35382f8bd42bdb87a04",
     [ContractName.FeeCollector]: "0xb37275558f02f05104c2ba35199d16adeb43432f",
   },
   // base
   "8453": {
     [ContractName.BatchQuery]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
+    [ContractName.XSwapRouter]: "0xe1c14b9f065dead2e89ee35382f8bd42bdb87a04",
     [ContractName.FeeCollector]: "0xb37275558f02f05104c2ba35199d16adeb43432f",
   },
   // ethereum
   "1": {
     [ContractName.BatchQuery]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
+    [ContractName.XSwapRouter]: "0xe1c14b9f065dead2e89ee35382f8bd42bdb87a04",
     [ContractName.FeeCollector]: "0xb37275558f02f05104c2ba35199d16adeb43432f",
   },
   // optimism
   "10": {
     [ContractName.BatchQuery]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
+    [ContractName.XSwapRouter]: "0xe1c14b9f065dead2e89ee35382f8bd42bdb87a04",
     [ContractName.FeeCollector]: "0xb37275558f02f05104c2ba35199d16adeb43432f",
   },
   // polygon
   "137": {
     [ContractName.BatchQuery]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
+    [ContractName.XSwapRouter]: "0xe1c14b9f065dead2e89ee35382f8bd42bdb87a04",
     [ContractName.FeeCollector]: "0xb37275558f02f05104c2ba35199d16adeb43432f",
   },
 };

package/src/models/Addresses.ts

@@ -9,4 +9,5 @@ export type Contracts = {
 export enum ContractName {
   BatchQuery = "BatchQuery",
   FeeCollector = "FeeCollector",
+  XSwapRouter = "XSwapRouter",
 }

package/src/models/TransactionHistory.ts

@@ -1,35 +1,37 @@
 type TransferType = "CROSS_CHAIN" | "SINGLE_CHAIN";
 
 export type TransactionHistory = {
-  history: {
-    transferId: string;
-    transferType: TransferType;
-    walletAddress: string;
-    // ExecutorRunFailed
-    failed: boolean;
-    // MessageSent
-    source: {
-      blockchainId: string;
-      transactionHash: string;
-      blockTime: Date;
-      tokenAmount: string;
-      tokenAddress: string;
-      transferredTokenAddress: string;
-      transferredTokenAmount: string;
-      valueForInstantCcipRecieve: string;
-      tokenOutAddress: string;
-      estimatedAmountOut: string;
-      targetBlockchainId: string;
-    } | null;
-    // MessageReceived
-    target: {
-      blockchainId: string;
-      transactionHash: string;
-      blockTime: Date;
-      tokenAmount: string;
-      tokenAddress: string;
-    } | null;
-  }[];
+  history: HistoryTransaction[];
+};
+
+export type HistoryTransaction = {
+  transferId: string;
+  transferType: TransferType;
+  walletAddress: string;
+  // ExecutorRunFailed
+  failed: boolean;
+  // MessageSent
+  source: {
+    blockchainId: string;
+    transactionHash: string;
+    blockTime: Date;
+    tokenAmount: string;
+    tokenAddress: string;
+    transferredTokenAddress: string;
+    transferredTokenAmount: string;
+    valueForInstantCcipRecieve: string;
+    tokenOutAddress: string;
+    estimatedAmountOut: string;
+    targetBlockchainId: string;
+  } | null;
+  // MessageReceived
+  target: {
+    blockchainId: string;
+    transactionHash: string;
+    blockTime: Date;
+    tokenAmount: string;
+    tokenAddress: string;
+  } | null;
 };
 
 export type TransactionStatus = "IN_PROGRESS" | "DONE" | "REVERTED";
@@ -46,3 +48,16 @@ export type Transaction = {
   estimatedDeliveryTimestamp: number;
   status: TransactionStatus;
 };
+
+export type MonitoredTransaction = {
+  fromChain: string | undefined;
+  fromChainImage: string | undefined;
+  fromToken: string | undefined;
+  fromTokenImage: string | undefined;
+  fromAmount: string | undefined;
+  toChain: string | undefined;
+  toChainImage: string | undefined;
+  isDone: boolean;
+  txHash: string;
+  explorer: string | undefined;
+};

package/src/services/integrations/transactions.ts

@@ -3,9 +3,20 @@ import {
   GetSwapTxPayload,
   Transactions,
   Web3Environment,
+  MonitoredTransaction,
 } from "@src/models";
 import { getChains } from "@src/services";
-import { openTxConfigForm } from "@src/components";
+import { ethers } from "ethers";
+import { ADDRESSES } from "@src/contracts";
+import {
+  openTxConfigForm,
+  addTransactionToRenderedTransactions,
+  removeTransactionFromRenderedTransactions,
+  renderTxHistoryButtons,
+  updateTransactionDoneInRenderedTransactions,
+} from "@src/components";
+import { weiToHumanReadable } from "@src/utils";
+import { CCIP_EXPLORER } from "@src/constants";
 
 export const getSwapTx = async ({
   dstChain,
@@ -18,6 +29,8 @@ export const getSwapTx = async ({
       web3Environment === Web3Environment.MAINNET && swapSupported,
   );
 
+  validateSwapTxData(supportedChains, dstChain, dstToken);
+
   const route = await openTxConfigForm({
     dstChainId: dstChain,
     dstTokenAddr: dstToken,
@@ -28,3 +41,155 @@ export const getSwapTx = async ({
 
   return route.transactions;
 };
+
+const validateSwapTxData = (
+  supportedChains: Chain[],
+  dstChain: string,
+  dstToken: string,
+) => {
+  const supportedDstChain = supportedChains.find(
+    ({ chainId }) => chainId === dstChain,
+  );
+  if (!supportedDstChain) {
+    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`);
+  }
+};
+
+export const monitorTransactionStatus = async (
+  srcChainId: number,
+  txHash: string,
+) => {
+  const txReceipt = await getTxReceipt(srcChainId, txHash);
+
+  if (!txReceipt) {
+    throw new Error(
+      `No transaction found for chain ${srcChainId} tx ${txHash}`,
+    );
+  }
+
+  const supportedChains: Chain[] = (await getChains()).filter(
+    ({ web3Environment, swapSupported }) =>
+      web3Environment === Web3Environment.MAINNET && swapSupported,
+  );
+
+  const messageSentEventSignature =
+    "MessageSent(bytes32,uint64,address,bytes,address,uint256,uint256,address,uint256)";
+
+  const messageSentEventAbi = [
+    "event MessageSent(bytes32 indexed messageId, uint64 indexed destinationChainSelector, address indexed sender, bytes data, address token, uint256 tokenAmount, uint256 valueForInstantCcipRecieve, address transferedToken, uint256 transferedTokenAmount)",
+  ];
+  const messageReceivedEventSignature =
+    "MessageReceived(bytes32,uint64,address,bytes,address,uint256)";
+
+  const messageReceivedEventAbi = [
+    "event MessageReceived(bytes32 indexed messageId, uint64 indexed sourceChainSelector, address indexed sender, bytes data, address token, uint256 tokenAmount)",
+  ];
+
+  const messageSentEvent = txReceipt.logs?.find((log) => {
+    return log.topics[0] === ethers.utils.id(messageSentEventSignature);
+  });
+
+  if (!messageSentEvent) {
+    throw new Error(
+      `No transaction event found for chain ${srcChainId} tx ${txHash}`,
+    );
+  }
+
+  const messageId = messageSentEvent?.topics[1] as string;
+  const iface = new ethers.utils.Interface(messageSentEventAbi);
+  const decodedMessageSentEvent = iface.parseLog(messageSentEvent);
+
+  if (!decodedMessageSentEvent) {
+    throw new Error(
+      `No transaction event arguments found for chain ${srcChainId} tx ${txHash}`,
+    );
+  }
+  const srcChain = supportedChains.find(
+    (chain) => chain.chainId === srcChainId.toString(),
+  );
+
+  const srcToken = srcChain?.tokens.find(
+    (token) => token.address === decodedMessageSentEvent.args?.token.toString(),
+  );
+
+  const targetChain = supportedChains.find(
+    (chain) =>
+      chain.ccipChainId ===
+      decodedMessageSentEvent.args?.destinationChainSelector?.toString(),
+  );
+
+  const toChainId = targetChain?.chainId;
+
+  if (!toChainId) {
+    throw new Error(`Unknown destination chain!`);
+  }
+
+  const transaction: MonitoredTransaction = {
+    txHash: txHash,
+    fromChain: srcChain?.displayName,
+    fromChainImage: srcChain?.image,
+    toChain: targetChain.displayName,
+    toChainImage: targetChain.image,
+    fromToken: srcToken?.symbol,
+    fromTokenImage: srcToken?.image,
+    fromAmount: weiToHumanReadable({
+      amount: decodedMessageSentEvent.args?.tokenAmount.toString(),
+      decimals: srcToken?.decimals || 18,
+      precisionFractionalPlaces: 4,
+    }),
+    isDone: false,
+    explorer: `${CCIP_EXPLORER}/tx/${txHash}`,
+  };
+
+  addTransactionToRenderedTransactions(transaction);
+  renderTxHistoryButtons();
+
+  // 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[toChainId]?.XSwapRouter;
+  if (!xSwapRouterOnDestinationAddress) {
+    throw new Error(`Unknown destination XSwapRouter!`);
+  }
+
+  const xSwapRouterOnDestination = new ethers.Contract(
+    xSwapRouterOnDestinationAddress,
+    messageReceivedEventAbi,
+    ethers.getDefaultProvider(
+      supportedChains.find((chain) => chain.chainId === toChainId)
+        ?.publicRpcUrls[0],
+    ),
+  );
+
+  const eventFilter = {
+    address: xSwapRouterOnDestinationAddress,
+    topics: [ethers.utils.id(messageReceivedEventSignature), messageId],
+  };
+
+  const onSuccess = async () => {
+    updateTransactionDoneInRenderedTransactions(txHash);
+    renderTxHistoryButtons();
+    await new Promise((resolve) => setTimeout(() => resolve(true), 5000));
+    removeTransactionFromRenderedTransactions(txHash);
+    renderTxHistoryButtons();
+  };
+  xSwapRouterOnDestination.once(eventFilter, () => onSuccess());
+};
+
+const getTxReceipt = async (txChainId: number, txHash: string) => {
+  const chains = await getChains();
+  const chain = chains.find((chain) => chain.chainId === txChainId.toString());
+  const provider = new ethers.providers.JsonRpcProvider(
+    chain?.publicRpcUrls[0],
+  );
+  try {
+    return await provider.getTransactionReceipt(txHash);
+  } catch (error) {
+    console.error("Error fetching transaction receipt:", error);
+    return null;
+  }
+};