@xswap-link/sdk 0.2.4 → 0.2.6

package/package.json

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

package/src/components/Alert/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export const Alert = ({ desc }: { desc: string }) => {
   return (
-    <div className="border border-solid border-x_alert rounded-3xl text-x_alert_light text-xs py-0.5 px-2">
+    <div className="xpay-border xpay-border-solid xpay-border-x_alert xpay-rounded-3xl xpay-text-x_alert_light xpay-text-xs xpay-py-0.5 xpay-px-2">
       ⚠️ {desc}
     </div>
   );

package/src/components/Skeleton/index.tsx

@@ -8,6 +8,8 @@ type Props = {
 
 export const Skeleton = ({ width, height }: Props) => {
   return (
-    <div className={`bg-current rounded animate-pulse ${width} ${height}`} />
+    <div
+      className={`xpay-bg-current xpay-rounded xpay-animate-pulse ${width} ${height}`}
+    />
   );
 };

package/src/components/TxConfigForm/BalanceComponent.tsx

@@ -43,7 +43,7 @@ export const BalanceComponent: FC<Props> = ({ srcToken, balances }) => {
             precisionFractionalPlaces: 4,
           })
         : 0}
-      <span className="bg-gradient-to-r from-x_blue_light to-x_blue_dark bg-clip-text text-transparent">
+      <span className="xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-bg-clip-text xpay-text-transparent">
         Max
       </span>
     </>

package/src/components/TxConfigForm/Button.tsx

@@ -9,7 +9,7 @@ interface Props {
 export const Button: FC<Props> = ({ children, onClick, type, disabled }) => {
   return (
     <button
-      className="text-white border-none rounded-2xl text-xl py-4 cursor-pointer w-full bg-gradient-to-r from-[#3681c6] to-[#2b4a9d] disabled:opacity-25"
+      className="xpay-text-white xpay-border-none xpay-rounded-2xl xpay-text-xl xpay-py-4 xpay-cursor-pointer xpay-w-full xpay-bg-gradient-to-r xpay-from-[#3681c6] xpay-to-[#2b4a9d] disabled:xpay-opacity-25"
       onClick={onClick}
       type={type}
       disabled={disabled}

package/src/components/TxConfigForm/ChainListElement.tsx

@@ -19,7 +19,7 @@ export const ChainListElement: FC<Props> = ({
   return (
     <div key={`${chain.ecosystem}-${chain.chainId}`}>
       <li
-        className="bg-transparent border-none flex gap-1 items-center cursor-pointer py-2 w-full"
+        className="xpay-bg-transparent xpay-border-none xpay-flex xpay-gap-1 xpay-items-center xpay-cursor-pointer xpay-py-2 xpay-w-full"
         onClick={() => {
           setSrcChain(chain);
           setChainListShown(false);
@@ -29,7 +29,7 @@ export const ChainListElement: FC<Props> = ({
         {chain.displayName}
       </li>
       {index !== length - 1 && (
-        <div className="h-px mx-2 bg-[rgba(255,255,255,0.15)]"></div>
+        <div className="xpay-h-px xpay-mx-2 xpay-bg-[rgba(255,255,255,0.15)]"></div>
       )}
     </div>
   );

package/src/components/TxConfigForm/Description.tsx

@@ -6,8 +6,8 @@ interface Props {
 
 export const Description: FC<Props> = ({ description }) => {
   return (
-    <div className="flex flex-col items-start rounded-lg px-4 py-2">
-      <div className="w-full flex gap-4 items-start justify-between text-xl">
+    <div className="xpay-flex xpay-flex-col xpay-items-start xpay-rounded-lg xpay-px-4 xpay-py-2">
+      <div className="xpay-w-full xpay-flex xpay-gap-4 xpay-items-start xpay-justify-between xpay-text-xl">
         {description}
       </div>
     </div>

package/src/components/TxConfigForm/ErrorField.tsx

@@ -7,8 +7,10 @@ interface Props {
 export const ErrorField: FC<Props> = ({ error }) => {
   return (
     <div
-      className={`flex justify-center mb-1 items-center w-full rounded-2xl bg-x_error_background border border-solid ${
-        error.length > 0 ? "border-x_error_border" : "border-transparent"
+      className={`xpay-flex xpay-justify-center xpay-mb-1 xpay-items-center xpay-w-full xpay-rounded-2xl xpay-bg-x_error_background xpay-border xpay-border-solid ${
+        error.length > 0
+          ? "xpay-border-x_error_border"
+          : "xpay-border-transparent"
       }`}
     >
       {error}

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,14 +27,18 @@ 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">
-        <div className="flex items-center gap-1 font-medium text-white opacity-60">
+    <div className="xpay-flex xpay-flex-col xpay-gap-3 xpay-global-border xpay-rounded-lg xpay-bg-[rgba(15,15,15,1)] xpay-p-2 sm:xpay-p-4 xpay-mb-1">
+      <div className="xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-text-xs sm:xpay-text-sm">
+        <div className="xpay-flex xpay-items-center xpay-gap-1 xpay-font-medium xpay-text-white xpay-opacity-60">
           <CoinsIcon />
-          <div className="mr-1">Fees:</div>
+          <div className="xpay-mr-1">Fees:</div>
           {isGettingRoute ? (
-            <Skeleton width="w-20" height="h-4" />
+            <Skeleton width="xpay-w-20" height="xpay-h-4" />
           ) : (
             ` ${weiToHumanReadable({
               amount: safeBigNumberFrom(
@@ -50,33 +54,33 @@ export const FeesDetails: FC<Props> = ({
             })} ${paymentToken?.symbol}`
           )}
         </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>
+        <div className="xpay-flex xpay-gap-1 xpay-items-center">
+          {route?.xSwapFees.expressDeliveryFee && !isGettingRoute && (
+            <div
+              className={`xpay-flex xpay-gap-1 xpay-items-center xpay-font-medium ${
+                isExpressDeliveryPossible
+                  ? "xpay-text-x_green"
+                  : "xpay-text-white xpay-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]"
+            className="xpay-font-medium xpay-text-white xpay-opacity-60 xpay-cursor-pointer xpay-flex xpay-items-center xpay-w-[15px] xpay-h-[9px]"
           >
             {feesDetailsShown ? <ChevronUpIcon /> : <ChevronDownIcon />}
           </div>
         </div>
       </div>
       {feesDetailsShown && (
-        <div className="flex w-full items-center justify-between gap-2">
-          <div className="flex flex-col text-[10px] gap-1">
-            <div className="flex justify-between font-medium text-white opacity-60 gap-1">
+        <div className="xpay-flex xpay-w-full xpay-items-center xpay-justify-between xpay-gap-2">
+          <div className="xpay-flex xpay-flex-col xpay-text-[10px] xpay-gap-1">
+            <div className="xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1">
               <div>CCIP Fee:</div>
-              <div className="whitespace-nowrap">
+              <div className="xpay-whitespace-nowrap">
                 {` ${weiToHumanReadable({
                   amount: route?.xSwapFees.ccipFee || "0",
                   decimals: 18,
@@ -84,9 +88,9 @@ export const FeesDetails: FC<Props> = ({
                 })} ${paymentToken?.symbol}`}
               </div>
             </div>
-            <div className="flex justify-between font-medium text-white opacity-60 gap-1">
+            <div className="xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1">
               <div>Native Fee:</div>
-              <div className="whitespace-nowrap">
+              <div className="xpay-whitespace-nowrap">
                 {` ${weiToHumanReadable({
                   amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
                   decimals: 18,
@@ -95,14 +99,14 @@ export const FeesDetails: FC<Props> = ({
               </div>
             </div>
           </div>
-          <div className="flex flex-col text-[10px] gap-1">
-            <div className="flex justify-between font-medium text-white opacity-60 gap-1">
+          <div className="xpay-flex xpay-flex-col xpay-text-[10px] xpay-gap-1">
+            <div className="xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1">
               <div>Slippage:</div>
-              <div className="whitespace-nowrap">{`${slippage}%`}</div>
+              <div className="xpay-whitespace-nowrap">{`${slippage}%`}</div>
             </div>
-            <div className="flex justify-between font-medium text-white opacity-60 gap-1">
+            <div className="xpay-flex xpay-justify-between xpay-font-medium xpay-text-white xpay-opacity-60 xpay-gap-1">
               <div>Min amount out:</div>
-              <div className="whitespace-nowrap">
+              <div className="xpay-whitespace-nowrap">
                 {weiToHumanReadable({
                   amount: route?.minAmountOut || "0",
                   decimals: dstToken?.decimals || 18,

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(),
@@ -186,7 +202,7 @@ export const Form = ({
 
   return (
     <form
-      className="flex flex-col gap-2 z-10 my-0 p-2 md:p-4 rounded-3xl overflow-hidden font-light sm:w-x_desktop"
+      className="xpay-flex xpay-flex-col xpay-gap-2 xpay-z-10 xpay-my-0 xpay-p-2 md:xpay-p-4 xpay-rounded-3xl xpay-overflow-hidden xpay-font-light sm:xpay-w-x_desktop"
       onSubmit={handleSubmit}
     >
       <TopBar
@@ -208,7 +224,7 @@ export const Form = ({
       {historyTabShown ? (
         <History signer={signer} supportedChains={supportedChains} />
       ) : (
-        <div className="flex flex-col gap-2">
+        <div className="xpay-flex xpay-flex-col xpay-gap-2">
           {desc && <Description description={desc} />}
           <SwapPanel
             amount={amount}

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();
@@ -73,21 +100,21 @@ export const History: FC<Props> = ({ signer, supportedChains }) => {
 
   if (!signer)
     return (
-      <div className="flex items-center justify-center w-full h-[30vh]">
+      <div className="xpay-flex xpay-items-center xpay-justify-center xpay-w-full xpay-h-[30vh]">
         Connect a wallet to browse history
       </div>
     );
 
   return (
-    <div className="flex items-center justify-center w-full">
-      <div className="w-full h-96 overflow-scroll overflow-x-hidden">
+    <div className="xpay-flex xpay-items-center xpay-justify-center xpay-w-full">
+      <div className="xpay-w-full xpay-h-96 xpay-overflow-scroll xpay-overflow-x-hidden">
         {fetchedHistory?.length === 0 && historyLoadedOnce && (
-          <div className="w-full text-center py-4 px-0 text-[rgb(158,158,158)]">
+          <div className="xpay-w-full xpay-text-center xpay-py-4 xpay-px-0 xpay-text-[rgb(158,158,158)]">
             Your history is empty...
           </div>
         )}
         {!fetchedHistory && !historyLoadedOnce && (
-          <div className="flex w-full h-full items-center justify-center">
+          <div className="xpay-flex xpay-w-full xpay-h-full xpay-items-center xpay-justify-center">
             <CircularProgressIcon />
           </div>
         )}

package/src/components/TxConfigForm/HistoryCard.tsx

@@ -1,14 +1,7 @@
 import { FC, useCallback, useMemo } from "react";
-import { getDate } from "@src/utils";
-import { Transaction, Chain, Token } from "@src/models";
-import { deepMergeObjects, weiToHumanReadable } from "@src/utils";
-import {
-  ArrowRightIcon,
-  ArrowUpRightIcon,
-  CheckIcon,
-  HourGlassIcon,
-  XMarkIcon,
-} from "@src/components/icons";
+import { deepMergeObjects, getDate, weiToHumanReadable } from "@src/utils";
+import { Chain, Token, Transaction } from "@src/models";
+import { ArrowRightIcon, ArrowUpRightIcon } from "@src/components/icons";
 import { MINIMUM_DISPLAYED_TOKEN_AMOUNT } from "@src/constants";
 
 interface Props {
@@ -75,25 +68,25 @@ export const HistoryCard: FC<Props> = ({ transaction, supportedChains }) => {
   );
 
   return (
-    <div className="flex flex-col globalBorder rounded-xl bg-[rgb(15,15,15)] text-white text-xs sm:text-sm p-4 gap-3 mb-2">
-      <div className="flex w-full items-center justify-between">
-        <div className="text-sm sm:text-base">{date}</div>
-        <div className="flex items-center">
+    <div className="xpay-flex xpay-flex-col xpay-global-border xpay-rounded-xl xpay-bg-[rgb(15,15,15)] xpay-text-white xpay-text-xs sm:xpay-text-sm xpay-p-4 xpay-gap-3 xpay-mb-2">
+      <div className="xpay-flex xpay-w-full xpay-items-center xpay-justify-between">
+        <div className="xpay-text-sm sm:xpay-text-base">{date}</div>
+        <div className="xpay-flex xpay-items-center">
           {transaction.status === "IN_PROGRESS" && (
-            <div className="flex items-center">
-              <div className="text-[rgb(250,200,100)]">In progress</div>
+            <div className="xpay-flex xpay-items-center">
+              <div className="xpay-text-[rgb(250,200,100)]">In progress</div>
             </div>
           )}
 
           {transaction.status === "DONE" && (
-            <div className="flex items-center">
-              <div className="text-[rgb(100,200,100)]">Done</div>
+            <div className="xpay-flex xpay-items-center">
+              <div className="xpay-text-[rgb(100,200,100)]">Done</div>
             </div>
           )}
 
           {transaction.status === "REVERTED" && (
-            <div className="flex items-center">
-              <div className="text-[rgb(255,100,100)]">Reverted</div>
+            <div className="xpay-flex xpay-items-center">
+              <div className="xpay-text-[rgb(255,100,100)]">Reverted</div>
             </div>
           )}
 
@@ -105,76 +98,76 @@ export const HistoryCard: FC<Props> = ({ transaction, supportedChains }) => {
             }/${transaction.hash}`}
             target="_blank"
             rel="noreferrer"
-            className="ml-2 no-underline"
+            className="xpay-ml-2 xpay-no-underline"
             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>
-      <div className="flex justify-between flex-wrap gap-2">
-        <div className="flex items-center">
-          <div className="flex items-center">
+      <div className="xpay-flex xpay-justify-between xpay-flex-wrap xpay-gap-2">
+        <div className="xpay-flex xpay-items-center">
+          <div className="xpay-flex xpay-items-center">
             <img
               src={sourceChainData?.image}
               alt={`${sourceChainData?.name} logo`}
-              className="w-5 h-5 mr-1"
+              className="xpay-w-5 xpay-h-5 xpay-mr-1"
             />
             <div>{sourceChainData?.displayName}</div>
           </div>
 
-          <div className="w-3.5 h-3.5 my-0 mx-1.5">
+          <div className="xpay-w-3.5 xpay-h-3.5 xpay-my-0 xpay-mx-1.5">
             <ArrowRightIcon />
           </div>
 
-          <div className="flex items-center">
+          <div className="xpay-flex xpay-items-center">
             <img
               src={targetChainData?.image}
               alt={`${targetChainData?.name} logo`}
-              className="w-5 h-5 mr-1"
+              className="xpay-w-5 xpay-h-5 xpay-mr-1"
             />
             <div>{targetChainData?.displayName}</div>
           </div>
         </div>
 
-        <div className="flex items-center mb-2 last:mb-0">
-          <div className="flex items-center flex-wrap">
-            <div className="flex items-center">
+        <div className="xpay-flex xpay-items-center xpay-mb-2 last:xpay-mb-0">
+          <div className="xpay-flex xpay-items-center xpay-flex-wrap">
+            <div className="xpay-flex xpay-items-center">
               {Number(transferredAmount) < MINIMUM_DISPLAYED_TOKEN_AMOUNT
                 ? `<${MINIMUM_DISPLAYED_TOKEN_AMOUNT}`
                 : transferredAmount}
-              <div className="ml-1">{tokenData?.symbol}</div>
+              <div className="xpay-ml-1">{tokenData?.symbol}</div>
               {tokenData?.image ? (
                 <img
                   src={tokenData?.image}
                   alt={tokenData?.name || ""}
-                  className="w-5 h-5 ml-1"
+                  className="xpay-w-5 xpay-h-5 xpay-ml-1"
                 />
               ) : (
-                <div className="flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]">
+                <div className="xpay-flex xpay-items-center xpay-justify-center xpay-w-5 xpay-h-5 xpay-text-[10px] xpay-ml-1 xpay-rounded-full xpay-bg-[#272e40] xpay-text-[#e0e7fa]">
                   {tokenData?.symbol.substring(0, 1)}
                 </div>
               )}
             </div>
             {transaction.tokenOutAddress && (
               <>
-                <div className="w-3.5 h-3.5 my-0 mx-1.5">
+                <div className="xpay-w-3.5 xpay-h-3.5 xpay-my-0 xpay-mx-1.5">
                   <ArrowRightIcon />
                 </div>
-                <div className="flex items-center">
+                <div className="xpay-flex xpay-items-center">
                   {Number(receivedAmount) < 0.0001 ? "<0.0001" : receivedAmount}
-                  <div className="ml-1">{tokenOutData?.symbol}</div>
+                  <div className="xpay-ml-1">{tokenOutData?.symbol}</div>
 
                   {tokenOutData?.image ? (
                     <img
                       src={tokenOutData?.image}
                       alt={tokenOutData?.name || ""}
-                      className="w-5 h-5 ml-1"
+                      className="xpay-w-5 xpay-h-5 xpay-ml-1"
                     />
                   ) : (
-                    <div className="flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]">
+                    <div className="xpay-flex xpay-items-center xpay-justify-center xpay-w-5 xpay-h-5 xpay-text-[10px] xpay-ml-1 xpay-rounded-full xpay-bg-[#272e40] xpay-text-[#e0e7fa]">
                       {tokenData?.symbol.substring(0, 1)}
                     </div>
                   )}

package/src/components/TxConfigForm/PoweredBy.tsx

@@ -2,8 +2,8 @@ import { ChainlinkCCIPIcon, XSwapBadgeIcon } from "@src/components/icons";
 
 export const PoweredBy = () => {
   return (
-    <div className="flex justify-center items-center gap-2 my-3">
-      <span className="text-x_grey">Powered by</span>
+    <div className="xpay-flex xpay-justify-center xpay-items-center xpay-gap-2 xpay-my-3">
+      <span className="xpay-text-x_grey">Powered by</span>
       <XSwapBadgeIcon />
       <span>✕</span>
       <ChainlinkCCIPIcon />