@xswap-link/sdk 0.1.2 → 0.1.4

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;
+  }
+};

package/src/utils/index.ts

@@ -2,6 +2,8 @@ export * from "./contracts";
 export * from "./numbers";
 export * from "./strings";
 
+import { format } from "date-fns";
+
 // eslint-disable-next-line
 export const replaceNull = (values: any[], newValue: any) => {
   const modifiedValues = [...values];
@@ -48,3 +50,8 @@ export const chunkArray = (array: any[], chunkSize: number): any[][] => {
   }
   return result;
 };
+
+export const getDate = (blockTimestamp: number) => {
+  const date = new Date(blockTimestamp * 1000);
+  return format(date, "d MMM yyyy HH:mm:ss");
+};

package/tailwind.config.js

@@ -12,10 +12,15 @@ module.exports = {
         x_error_border: "rgba(255,111,0,1)",
         x_blue_light: "rgba(54,129,198,1)",
         x_blue_dark: "rgba(43,74,157,1)",
+        x_green_light: "rgba(43,74,157,1)",
+        x_green_dark: "rgba(46,125,50,1)",
       },
       width: {
         x_desktop: "600px",
-        x_mobile: "356px",
+        x_mobile: "320px",
+      },
+      animation: {
+        "spin-slow": "spin 3s linear infinite",
       },
     },
   },

package/tsconfig.json

@@ -14,12 +14,8 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "paths": {
-      "@src/*": [
-        "./src/*"
-      ],
-      "@src/global.css": [
-        "./src/components/global.css"
-      ]
+      "@src/*": ["./src/*"],
+      "@src/global.css": ["./src/components/global.css"]
     }
   }
-}
+}