@xswap-link/sdk 0.2.4 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {

package/src/components/TxConfigForm/FeesDetails.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useMemo } from "react";
 import { CoinsIcon, TimerIcon, ChevronUpIcon, ChevronDownIcon } from "../icons";
 import { safeBigNumberFrom, weiToHumanReadable } from "@src/utils";
 import { Route, Token } from "@src/models";
@@ -27,6 +27,10 @@ export const FeesDetails: FC<Props> = ({
   feesDetailsShown,
   setFeesDetailsShown,
 }) => {
+  const isExpressDeliveryPossible = useMemo(() => {
+    return expressChecked && !exceedsExpressDeliveryLimit;
+  }, [expressChecked, exceedsExpressDeliveryLimit]);
+
   return (
     <div className="flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-2 sm:p-4 mb-1">
       <div className="flex w-full items-center justify-between text-xs sm:text-sm">
@@ -51,18 +55,18 @@ export const FeesDetails: FC<Props> = ({
           )}
         </div>
         <div className="flex gap-1 items-center">
-          <div
-            className={`flex gap-1 items-center font-medium ${
-              expressChecked && !exceedsExpressDeliveryLimit
-                ? "text-x_green"
-                : "text-white opacity-60"
-            }`}
-          >
-            <TimerIcon />
-            {expressChecked && !exceedsExpressDeliveryLimit
-              ? "Fast ~ 30sec "
-              : "Normal ~ 30min"}
-          </div>
+          {route?.xSwapFees.expressDeliveryFee && !isGettingRoute && (
+            <div
+              className={`flex gap-1 items-center font-medium ${
+                isExpressDeliveryPossible
+                  ? "text-x_green"
+                  : "text-white opacity-60"
+              }`}
+            >
+              <TimerIcon />
+              {isExpressDeliveryPossible ? "Fast ~ 30sec " : "Normal ~ 30min"}
+            </div>
+          )}
           <div
             onClick={() => setFeesDetailsShown((x) => !x)}
             className="font-medium text-white opacity-60 cursor-pointer flex items-center w-[15px] h-[9px]"

package/src/components/TxConfigForm/Form.tsx

@@ -3,7 +3,7 @@ import React, { FormEvent, useEffect, useState } from "react";
 import { ethers } from "ethers";
 import { useAccount, useSwitchChain } from "wagmi";
 import { Chain, Route, Token, TokenBalances, TokenPrices } from "@src/models";
-import { getPrices, getRoute } from "@src/services";
+import { getCustomTokenData, getPrices, getRoute } from "@src/services";
 import { getBalances } from "@src/utils";
 import { ROUTE_TIMEOUT_MS } from "@src/constants";
 import { TxConfigFormProps } from "@src/components";
@@ -21,6 +21,7 @@ import { DEFAULT_SOURCE_CHAIN_ID } from "@src/constants";
 import { Button } from "./Button";
 
 export const Form = ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
@@ -77,15 +78,29 @@ export const Form = ({
   }, [supportedChains, dstChainId]);
 
   useEffect(() => {
-    setDstToken(
-      dstChain?.tokens.find(
+    (async () => {
+      if (!dstChain) {
+        return;
+      }
+
+      let dstTokenResult = dstChain?.tokens.find(
         (token) => token.address.toLowerCase() === dstTokenAddr.toLowerCase(),
-      ),
-    );
+      );
+
+      if (!dstTokenResult) {
+        dstTokenResult = await getCustomTokenData(
+          dstChain,
+          dstTokenAddr.toLowerCase(),
+        );
+      }
+
+      setDstToken(dstTokenResult);
+    })();
   }, [dstChain]);
 
   useEffect(() => {
     if (
+      integratorId &&
       srcChain &&
       srcToken &&
       dstChain &&
@@ -104,6 +119,7 @@ export const Form = ({
           `Configuration error: selected token ($${srcToken.symbol} ${srcToken.name}) has unknown decimals param.`,
         );
       getRoute({
+        integratorId,
         fromAmount: ethers.utils
           .parseUnits(debouncedAmount, srcToken.decimals)
           .toString(),

package/src/components/TxConfigForm/History.tsx

@@ -21,15 +21,42 @@ export const History: FC<Props> = ({ signer, supportedChains }) => {
       const fetchedTransactions: Transaction[] = [];
       if (downloadedHistory) {
         for (const entry of downloadedHistory.history) {
+          let status: TransactionStatus = "IN_PROGRESS";
+
+          // single chain tx
           if (!entry.source) {
             continue;
           }
-          let status: TransactionStatus;
-          if (entry.failed) status = "REVERTED";
+
+          if (entry.failed) {
+            status = "REVERTED";
+          }
           if (!!entry.target) {
             status = "DONE";
-          } else {
-            status = "IN_PROGRESS";
+          }
+
+          if (entry.transferType === "SINGLE_CHAIN") {
+            if (!entry.target) {
+              continue;
+            }
+
+            const blockTimestampMs = new Date(entry.target.blockTime).getTime();
+            const estimatedDeliveryTimestamp = blockTimestampMs / 1000;
+
+            fetchedTransactions.push({
+              hash: entry.target.transactionHash,
+              timestamp: blockTimestampMs / 1000,
+              sourceChainId: entry.target.blockchainId,
+              targetChainId: entry.target.blockchainId,
+              amountWei: entry.source.tokenAmount,
+              tokenAddress: entry.source.tokenAddress,
+              tokenOutAddress: entry.target?.tokenAmount,
+              tokenOutAmount: entry.target?.tokenAmount,
+              estimatedDeliveryTimestamp,
+              status,
+            });
+
+            continue;
           }
 
           const blockTimestampMs = new Date(entry.source.blockTime).getTime();

package/src/components/TxConfigForm/Summary.tsx

@@ -1,10 +1,11 @@
-import React, { FC, useEffect, useMemo, useState } from "react";
+import { FC, useEffect, useMemo, useState } from "react";
 import { weiToHumanReadable } from "@src/utils";
 import { Chain, Route, Token, TokenPrices } from "@src/models";
 import { ArrowDownIcon } from "../icons";
 import { UsdPrice } from "@src/components/TxConfigForm/UsdPrice";
 import { getPrices } from "@src/services";
 import { Skeleton } from "@src/components";
+import { UnknownTokenLogo } from "../UnknownTokenLogo/UnknownTokenLogo";
 
 interface Props {
   isGettingRoute: boolean;
@@ -58,10 +59,21 @@ export const Summary: FC<Props> = ({
         </div>
         <div className="flex flex-col items-end gap-1 text-sm">
           <div className="flex justify-center items-center gap-1">
-            <div className="w-4 sm:w-6 h-4 sm:h-6">
-              <img src={dstToken?.image} alt={dstToken?.name} />
+            <div className="w-5 h-5">
+              {dstToken?.image ? (
+                <img
+                  className="w-5 h-5"
+                  src={dstToken?.image}
+                  alt={dstToken?.name}
+                />
+              ) : (
+                <UnknownTokenLogo
+                  tokenName={"?"}
+                  className="token-select__generated-logo"
+                />
+              )}
             </div>
-            <p className="text-base sm:text-xl">{dstToken?.symbol}</p>
+            <p className="text-base sm:text-xl">{dstToken?.name}</p>
           </div>
           <div className="flex justify-center items-center gap-1">
             <p className="text-[rgba(255,255,255,0.6)] text-right">on </p>

package/src/components/TxConfigForm/SwapPanel.tsx

@@ -63,7 +63,7 @@ export const SwapPanel: FC<Props> = ({
         weiToHumanReadable({
           amount: balances[srcToken.address]?.toString() || "0",
           decimals: srcToken.decimals,
-          precisionFractionalPlaces: 4,
+          precisionFractionalPlaces: srcToken.decimals,
         }),
       );
   };

package/src/components/TxConfigForm/index.tsx

@@ -8,6 +8,7 @@ import { PoweredBy } from "@src/components/TxConfigForm/PoweredBy";
 import { Form } from "./Form";
 
 export type TxConfigFormProps = {
+  integratorId: string;
   dstChainId: string;
   dstTokenAddr: string;
   customContractCalls: ContractCall[];
@@ -16,6 +17,7 @@ export type TxConfigFormProps = {
 };
 
 const TxConfigForm = ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
@@ -50,6 +52,7 @@ const TxConfigForm = ({
         >
           <div className="relative bg-black rounded-3xl overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]">
             <Form
+              integratorId={integratorId}
               dstChainId={dstChainId}
               dstTokenAddr={dstTokenAddr}
               customContractCalls={customContractCalls}
@@ -67,6 +70,7 @@ const TxConfigForm = ({
 };
 
 export const openTxConfigForm = async ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
@@ -78,6 +82,7 @@ export const openTxConfigForm = async ({
       await waitForInitialization();
       xswapRoot.render(
         <TxConfigForm
+          integratorId={integratorId}
           dstChainId={dstChainId}
           dstTokenAddr={dstTokenAddr}
           customContractCalls={customContractCalls}

package/src/components/TxStatusButton/index.tsx

@@ -9,6 +9,7 @@ import {
 } from "../icons";
 import { MonitoredTransaction } from "@src/models";
 import { txStatusRoot } 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);
@@ -70,11 +70,19 @@ export const TxStatusButton: FC<Props> = ({ transaction }) => {
               <div>Sent</div>
               <div>{fromAmount}</div>
               <div>{fromToken}</div>
-              <img
-                className="w-5 h-5"
-                src={fromTokenImage}
-                alt="source token"
-              />
+
+              {fromTokenImage ? (
+                <img
+                  className="w-5 h-5"
+                  src={fromTokenImage}
+                  alt="source token"
+                />
+              ) : (
+                <UnknownTokenLogo
+                  tokenName={"?"}
+                  className="token-select__generated-logo"
+                />
+              )}
             </div>
           </div>
           <a

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={`w-5 h-5 rounded-full bg-white shadow-sm flex items-center justify-center text-black ${className}`}
+    >
+      {tokenName.substring(0, 1)}
+    </div>
+  );
+};

package/src/components/global.css

@@ -30,5 +30,5 @@
 }
 
 .xswap-tx-status {
-  @apply absolute bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50;
+  @apply fixed bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50;
 }

package/src/config/init.tsx

@@ -17,7 +17,7 @@ export const initDocument = () => {
 
   Promise.all([
     createStyleElement(),
-    createXswapRoot(),
+    createXSwapRoot(),
     createTxStatusRoot(),
   ]).then(() => {
     initCompleted = true;
@@ -46,7 +46,7 @@ const createStyleElement = async () => {
   document.body.appendChild(style);
 };
 
-const createXswapRoot = async () => {
+const createXSwapRoot = async () => {
   const xswapElement = document.createElement("div");
   xswapElement.setAttribute("id", "xswap-modal");
   document.body.appendChild(xswapElement);

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