@xswap-link/sdk 0.2.4 → 0.2.6

package/src/components/TxStatusButton/index.tsx

@@ -8,7 +8,8 @@ import {
   XSwapLogo,
 } from "../icons";
 import { MonitoredTransaction } from "@src/models";
-import { txStatusRoot } from "@src/config";
+import { xpayTxStatusRoot } from "@src/config";
+import { UnknownTokenLogo } from "../UnknownTokenLogo/UnknownTokenLogo";
 
 interface Props {
   transaction: MonitoredTransaction;
@@ -16,15 +17,14 @@ interface Props {
 
 export const TxStatusButton: FC<Props> = ({ transaction }) => {
   const {
-    fromChain,
-    fromChainImage,
-    fromToken,
-    fromTokenImage,
-    fromAmount,
-    toChain,
-    toChainImage,
+    srcChain: fromChain,
+    srcChainImage: fromChainImage,
+    srcToken: fromToken,
+    srcTokenImage: fromTokenImage,
+    srcAmount: fromAmount,
+    dstChain: toChain,
+    dstChainImage: toChainImage,
     isDone,
-    txHash,
     explorer,
   } = transaction;
   const [isWide, setIsWide] = useState(false);
@@ -32,80 +32,92 @@ export const TxStatusButton: FC<Props> = ({ transaction }) => {
   const background = useMemo(
     () =>
       isDone
-        ? "bg-[rgba(2,2,2,1)] bg-gradient-to-r from-[rgba(76,175,80,0.2)] to-[rgba(46,125,50,0.2)]"
-        : "bg-[rgba(2,2,2,1)] bg-gradient-to-r from-[rgba(54,129,198,0.2)] to-[rgba(43,74,157,0.2)]",
+        ? "xpay-bg-[rgba(2,2,2,1)] xpay-bg-gradient-to-r xpay-from-[rgba(76,175,80,0.2)] xpay-to-[rgba(46,125,50,0.2)]"
+        : "xpay-bg-[rgba(2,2,2,1)] xpay-bg-gradient-to-r xpay-from-[rgba(54,129,198,0.2)] xpay-to-[rgba(43,74,157,0.2)]",
     [isDone],
   );
 
   const border = useMemo(
     () =>
       isDone
-        ? "border border-solid border-x_green_dark"
-        : "border border-solid border-x_blue_dark",
+        ? "xpay-border xpay-border-solid xpay-border-x_green_dark"
+        : "xpay-border xpay-border-solid xpay-border-x_blue_dark",
     [isDone],
   );
 
   return (
-    <div className="flex gap-2" onClick={() => setIsWide((x: boolean) => !x)}>
+    <div
+      className="xpay-flex xpay-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 ${background} ${border}`}
+          className={`xpay-flex xpay-items-center xpay-min-w-60 sm:xpay-w-[520px] xpay-text-white xpay-h-14 xpay-px-4 xpay-text-sm xpay-gap-3 xpay-rounded-xl ${background} ${border}`}
         >
-          <div className="flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full">
-            <div className="flex items-center gap-2">
+          <div className="xpay-flex xpay-justify-between xpay-flex-col xpay-gap-2 sm:xpay-gap-5 sm:xpay-flex-row xpay-w-full">
+            <div className="xpay-flex xpay-items-center xpay-gap-2">
               <img
-                className="w-5 h-5"
+                className="xpay-w-5 xpay-h-5"
                 src={fromChainImage}
                 alt="source chain"
               />
               <div>{fromChain}</div>
-              <div className="w-3.5 h-3.5">
+              <div className="xpay-w-3.5 xpay-h-3.5">
                 <ArrowRightIcon />
               </div>
-              <img className="w-5 h-5" src={toChainImage} alt="to chain" />
+              <img
+                className="xpay-w-5 xpay-h-5"
+                src={toChainImage}
+                alt="to chain"
+              />
               <div>{toChain}</div>
             </div>
 
-            <div className="flex items-center gap-2">
+            <div className="xpay-flex xpay-items-center xpay-gap-2">
               <div>Sent</div>
               <div>{fromAmount}</div>
               <div>{fromToken}</div>
-              <img
-                className="w-5 h-5"
-                src={fromTokenImage}
-                alt="source token"
-              />
+
+              {fromTokenImage ? (
+                <img
+                  className="xpay-w-5 xpay-h-5"
+                  src={fromTokenImage}
+                  alt="source token"
+                />
+              ) : (
+                <UnknownTokenLogo tokenName={"?"} />
+              )}
             </div>
           </div>
           <a
             href={explorer}
             target="_blank"
             rel="noreferrer"
-            className="no-underline cursor-pointer"
+            className="xpay-no-underline xpay-cursor-pointer"
             aria-label="Show the transaction in the chain explorer"
           >
-            <div className="w-3.5 h-3.5">
+            <div className="xpay-w-3.5 xpay-h-3.5">
               <ArrowUpRightIcon />
             </div>
           </a>
         </div>
       )}
       <div
-        className={`text-white rounded-xl cursor-pointer ${background} ${border}`}
+        className={`xpay-text-white xpay-rounded-xl xpay-cursor-pointer ${background} ${border}`}
       >
-        <div className="flex gap-2 items-center h-14 w-20 justify-center">
+        <div className="xpay-flex xpay-gap-2 xpay-items-center xpay-h-14 xpay-w-20 xpay-justify-center">
           <ArrowLeftIcon />
-          <div className="relative flex items-center justify-center w-9 h-9">
+          <div className="xpay-relative xpay-flex xpay-items-center xpay-justify-center xpay-w-9 xpay-h-9">
             {isDone ? (
-              <div className="text-x_green w-5 h-5">
+              <div className="xpay-text-x_green xpay-w-5 xpay-h-5">
                 <CheckIcon />
               </div>
             ) : (
               <>
-                <div className="w-5 h-5">
+                <div className="xpay-w-5 xpay-h-5">
                   <XSwapLogo />
                 </div>
-                <div className="absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white">
+                <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 />
                 </div>
               </>
@@ -146,5 +158,5 @@ export const renderTxStatusButtons = () => {
   const buttons = renderedTransactions.map((item) => (
     <TxStatusButton key={item.txHash} transaction={item} />
   ));
-  txStatusRoot.render(buttons);
+  xpayTxStatusRoot.render(buttons);
 };

package/src/components/UnknownTokenLogo/UnknownTokenLogo.tsx

@@ -0,0 +1,14 @@
+interface Props {
+  tokenName: string;
+  className?: string;
+}
+
+export const UnknownTokenLogo = ({ tokenName, className }: Props) => {
+  return (
+    <div
+      className={`xpay-w-5 xpay-h-5 xpay-rounded-full xpay-bg-white xpay-shadow-sm xpay-flex xpay-items-center xpay-justify-center xpay-text-black ${className}`}
+    >
+      {tokenName.substring(0, 1)}
+    </div>
+  );
+};

package/src/components/global.css

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-.xswap {
+.xpay {
   /* Works on Firefox */
   * {
     scrollbar-width: thin;
@@ -23,12 +23,14 @@
     background-color: #252525;
     border-radius: 4px;
   }
+}
 
-  .globalBorder {
+@layer components {
+  .xpay-global-border {
     border: 1px solid rgba(255, 255, 255, 0.1);
   }
-}
 
-.xswap-tx-status {
-  @apply absolute bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50;
+  .xpay-tx-status {
+    @apply 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;
+  }
 }

package/src/components/icons/CircularProgressIcon.tsx

@@ -1,7 +1,7 @@
 export const CircularProgressIcon = () => {
   return (
     <svg
-      className="animate-spin-slow text-white"
+      className="animate-spin-slow xpay-text-white"
       width="33"
       height="33"
       viewBox="0 0 33 33"

package/src/config/init.tsx

@@ -3,9 +3,9 @@ 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;
+export let xpayInitIndicatorRoot: Root;
+export let xpayTxStatusRoot: Root;
 
 let initCompleted = false;
 
@@ -13,12 +13,12 @@ export const initDocument = () => {
   if (typeof document === "undefined") {
     throw new Error("Can't render XPay components from server side.");
   }
-  createInitIndicatorRoot();
+  createXPayInitIndicatorRoot();
 
   Promise.all([
     createStyleElement(),
-    createXswapRoot(),
-    createTxStatusRoot(),
+    createXPayRoot(),
+    createXPayTxStatusRoot(),
   ]).then(() => {
     initCompleted = true;
   });
@@ -46,30 +46,31 @@ const createStyleElement = async () => {
   document.body.appendChild(style);
 };
 
-const createXswapRoot = async () => {
+const createXPayRoot = async () => {
   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 () => {
   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 = () => {
   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) => {
   display
-    ? initIndicatorRoot.render(<WaitingForInit />)
-    : initIndicatorRoot.render("");
+    ? xpayInitIndicatorRoot.render(<WaitingForInit />)
+    : xpayInitIndicatorRoot.render("");
 };

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/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/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

@@ -26,4 +26,5 @@ export default {
     },
   },
   plugins: [],
+  prefix: "xpay-",
 };