@xswap-link/sdk 0.8.7 → 0.9.1

package/src/context/SwapProvider.tsx

@@ -1,10 +1,8 @@
 import { TxConfigFormPayload } from "@src/components";
 import {
   DEFAULT_DESTINATION_CHAIN_ID,
-  DEFAULT_DESTINATION_TOKEN_ADDR,
   DEFAULT_REQUEST_ABORT_MSG,
   DEFAULT_SOURCE_CHAIN_ID,
-  DEFAULT_SOURCE_TOKEN_ADDR,
 } from "@src/constants";
 import { ADDRESSES } from "@src/contracts";
 import {
@@ -32,9 +30,8 @@ import {
   safeBigNumberFrom,
   weiToHumanReadable,
 } from "@src/utils";
-import { mapToValidPath } from "@src/utils/validation";
 import BigNumberJS from "bignumber.js";
-import { BigNumber, constants } from "ethers";
+import { BigNumber, constants, ethers } from "ethers";
 import {
   createContext,
   Dispatch,
@@ -49,6 +46,7 @@ import {
 } from "react";
 import { Config, useAccount } from "wagmi";
 import { useHistory } from "./HistoryProvider";
+import { mapToValidPath } from "@src/utils/validation";
 
 type Tab = "Swap" | "History" | "Settings";
 type SwapContext = {
@@ -66,8 +64,7 @@ type SwapContext = {
   setSrcChain: Dispatch<SetStateAction<Chain | undefined>>;
   srcChainTokensOptions: TokenOption[];
   srcChainOtherTokensOptions: TokenOption[];
-  srcChainTokensPrices: TokenPrices;
-  dstChainTokensPrices: TokenPrices;
+  tokenPrices: TokenPrices;
   srcToken: Token | undefined;
   setSrcToken: Dispatch<SetStateAction<Token | undefined>>;
   dstChain: Chain | undefined;
@@ -130,8 +127,7 @@ const init: SwapContext = {
   srcChain: undefined,
   srcChainTokensOptions: [],
   srcChainOtherTokensOptions: [],
-  srcChainTokensPrices: {},
-  dstChainTokensPrices: {},
+  tokenPrices: {},
   dstChain: undefined,
   dstChainTokensOptions: [],
   dstChainOtherTokensOptions: [],
@@ -150,7 +146,7 @@ const init: SwapContext = {
   dstValueMin: "",
   lastTx: undefined,
   expressDelivery: true,
-  infiniteApproval: false,
+  infiniteApproval: true,
   slippage: "1.5",
   route: undefined,
   isAsyncDataLoaded: false,
@@ -248,12 +244,7 @@ export const SwapProvider = ({
   const [dstChainTokensOptions, setDstChainTokensOptions] = useState(
     init.dstChainTokensOptions,
   );
-  const [srcChainTokensPrices, setSrcChainTokensPrices] = useState(
-    init.srcChainTokensPrices,
-  );
-  const [dstChainTokensPrices, setDstChainTokensPrices] = useState(
-    init.dstChainTokensPrices,
-  );
+  const [tokenPrices, setTokenPrices] = useState(init.tokenPrices);
   const [srcChainOtherTokensOptions, setSrcChainOtherTokensOptions] = useState(
     init.srcChainOtherTokensOptions,
   );
@@ -267,6 +258,15 @@ export const SwapProvider = ({
 
   const { history } = useHistory();
 
+  useEffect(() => {
+    if (supportedChains.length > 0) {
+      const chainIds = supportedChains.map((chain) => chain.chainId);
+      getPrices({ chainId: chainIds }).then((prices) => {
+        setTokenPrices(prices);
+      });
+    }
+  }, [supportedChains]);
+
   const supportedTokens: Record<string, Record<string, Token>> = useMemo(() => {
     const customTokens = !isServer
       ? JSON.parse(localStorage.getItem("custom-tokens") || "{}")
@@ -344,8 +344,8 @@ export const SwapProvider = ({
   }, [bridgeTokens]);
 
   const getTokenOptions = useCallback(
-    (chainId: string | undefined, oppositeChainId: string | undefined) => {
-      if (!chainId || !oppositeChainId) {
+    (chainId: string | undefined) => {
+      if (!chainId) {
         return [];
       }
 
@@ -408,36 +408,21 @@ export const SwapProvider = ({
     [srcToken?.decimals, srcValue],
   );
 
-  // fetch srcTokenPrices
-  useEffect(() => {
-    if (srcChain) {
-      getPrices({ chainId: srcChain.chainId, currency: "USD" }).then((prices) =>
-        setSrcChainTokensPrices(prices),
-      );
-    }
-  }, [srcChain]);
-
-  // fetch dstTokenPrices
-  useEffect(() => {
-    if (dstChain) {
-      getPrices({ chainId: dstChain.chainId, currency: "USD" }).then((prices) =>
-        setDstChainTokensPrices(prices),
-      );
-    }
-  }, [dstChain]);
-
   const srcValueUsd = useMemo(() => {
     if (
       srcToken &&
-      srcChainTokensPrices &&
-      srcChainTokensPrices[srcToken.address]
+      srcChain &&
+      tokenPrices &&
+      tokenPrices[srcChain.chainId] &&
+      tokenPrices[srcChain.chainId]?.[srcToken.address]
     ) {
       return (
-        Number(srcValue) * Number(srcChainTokensPrices[srcToken.address])
+        Number(srcValue) *
+        Number(tokenPrices[srcChain.chainId]?.[srcToken.address])
       ).toFixed(2);
     }
     return null;
-  }, [srcChainTokensPrices, srcToken, srcValue]);
+  }, [tokenPrices, srcToken, srcValue, srcChain]);
   const dstValue = useMemo(
     () =>
       weiToHumanReadable({
@@ -459,15 +444,18 @@ export const SwapProvider = ({
   const dstValueUsd = useMemo(() => {
     if (
       dstToken &&
-      dstChainTokensPrices &&
-      dstChainTokensPrices[dstToken.address]
+      dstChain &&
+      tokenPrices &&
+      tokenPrices[dstChain?.chainId] &&
+      tokenPrices[dstChain?.chainId]?.[dstToken.address]
     ) {
       return (
-        Number(dstValue) * Number(dstChainTokensPrices[dstToken.address])
+        Number(dstValue) *
+        Number(tokenPrices[dstChain?.chainId]?.[dstToken.address])
       ).toFixed(2);
     }
     return null;
-  }, [dstChainTokensPrices, dstToken, dstValue]);
+  }, [tokenPrices, dstToken, dstValue, dstChain]);
   const dstValueMin = useMemo(
     () =>
       weiToHumanReadable({
@@ -564,7 +552,6 @@ export const SwapProvider = ({
       // source chain
       const srcTokenOptions: TokenOption[] = getTokenOptions(
         srcChain?.chainId,
-        dstChain?.chainId,
       ).filter(({ symbol }) =>
         dstChain?.chainId === srcChain?.chainId
           ? symbol !== dstToken?.symbol
@@ -575,7 +562,6 @@ export const SwapProvider = ({
       // destination chain
       const dstTokenOptions: TokenOption[] = getTokenOptions(
         dstChain?.chainId,
-        dstChain?.chainId,
       ).filter(({ symbol }) =>
         dstChain?.chainId === srcChain?.chainId
           ? symbol !== srcToken?.symbol
@@ -603,7 +589,7 @@ export const SwapProvider = ({
       );
       for (const { chainId } of srcOtherChains) {
         srcOtherTokenOptions.push(
-          ...getTokenOptions(chainId, dstChain?.chainId).filter(({ symbol }) =>
+          ...getTokenOptions(chainId).filter(({ symbol }) =>
             chainId === dstChain?.chainId ? symbol !== dstToken?.symbol : true,
           ),
         );
@@ -620,7 +606,7 @@ export const SwapProvider = ({
       );
       for (const { chainId } of dstOtherChains) {
         dstOtherTokenOptions.push(
-          ...getTokenOptions(chainId, dstChain?.chainId).filter(({ symbol }) =>
+          ...getTokenOptions(chainId).filter(({ symbol }) =>
             chainId === srcChain?.chainId ? symbol !== srcToken?.symbol : true,
           ),
         );
@@ -714,64 +700,149 @@ export const SwapProvider = ({
     );
   }, [srcChain]);
 
+  // Add new state to track initial setup
+  const [isInitialStateSet, setIsInitialStateSet] = useState(false);
+
   useEffect(() => {
-    setSrcChain((state) => {
-      const searchedChainId =
-        // currently set chain
-        state?.chainId ||
-        // chain set by the integrator
-        integrationConfig?.srcChainId ||
-        // wallet chain
-        (walletChainId ? `${walletChainId}` : undefined) ||
-        // default chain
-        (bridgeUI ? undefined : DEFAULT_SOURCE_CHAIN_ID);
-
-      const initSrcChain = supportedChains.find(
-        ({ chainId }) => chainId === searchedChainId,
-      );
+    // apply wallet chain only after initial state is set
+    if (!walletChainId || !isInitialStateSet || integrationConfig?.srcChainId) {
+      return;
+    }
+    const initSrcChain = supportedChains.find(
+      ({ chainId }) => chainId === `${walletChainId}`,
+    );
 
-      if (initSrcChain) {
-        const initSrcToken = initSrcChain.tokens.find(
-          ({ address }) =>
-            address.toLowerCase() ===
-            (integrationConfig?.srcTokenAddr?.toLowerCase() ||
-              DEFAULT_SOURCE_TOKEN_ADDR.toLowerCase()),
-        );
+    if (initSrcChain) {
+      setSrcChain(initSrcChain);
+    }
+  }, [
+    walletChainId,
+    isInitialStateSet,
+    supportedChains,
+    integrationConfig?.srcChainId,
+  ]);
 
-        // This useEffect is only triggered by config and wallet changes.
-        // So it will run when user connects wallet.
-        // We want to keep the token that was already selected before connecting and only use initSrcToken if the token filed was empty.
-        setSrcToken((state) => state || initSrcToken);
-      } else {
-        setSrcToken(undefined);
-      }
-      return initSrcChain;
-    });
+  useEffect(() => {
+    if (isInitialStateSet) {
+      return;
+    }
+    setSrcToken(undefined);
+    setDstToken(undefined);
+    setSrcChain(undefined);
+    setDstChain(undefined);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bridgeUI]);
+
+  useEffect(() => {
+    // Skip if initial state was already set or wait if supported chains are not loaded yet
 
-    const initDstChain = bridgeUI
+    if (
+      isInitialStateSet ||
+      !supportedChains ||
+      supportedChains.length === 0 ||
+      !bridgeTokensDictionary
+    ) {
+      return;
+    }
+
+    let srcTokenAddress = integrationConfig.srcTokenAddr;
+    let dstTokenAddress = integrationConfig.dstTokenAddr;
+    // is it a valid eth address? if not try to find it by symbol / tokenId
+    if (srcTokenAddress && !ethers.utils.isAddress(srcTokenAddress)) {
+      srcTokenAddress = supportedChains
+        .find((chain) => chain.chainId === integrationConfig?.srcChainId)
+        ?.tokens.find(
+          (token) => token.tokenId === integrationConfig?.srcTokenAddr,
+        )
+        ?.address?.toLowerCase();
+    }
+
+    if (dstTokenAddress && !ethers.utils.isAddress(dstTokenAddress)) {
+      dstTokenAddress = supportedChains
+        .find((chain) => chain.chainId === integrationConfig?.dstChainId)
+        ?.tokens.find(
+          (token) => token.tokenId === integrationConfig?.dstTokenAddr,
+        )
+        ?.address?.toLowerCase();
+    }
+
+    const searchedChainId =
+      // currently set chain
+      srcChain ||
+      // chain set by the integrator
+      integrationConfig?.srcChainId ||
+      // wallet chain
+      (walletChainId ? `${walletChainId}` : undefined) ||
+      // default chain
+      (bridgeUI ? undefined : DEFAULT_SOURCE_CHAIN_ID);
+
+    const initSrcChain = supportedChains.find(
+      ({ chainId }) => chainId === searchedChainId,
+    );
+
+    let initSrcToken: Token | undefined;
+    if (initSrcChain) {
+      initSrcToken = initSrcChain.tokens.find(
+        ({ address }) =>
+          address.toLowerCase() === srcTokenAddress?.toLowerCase(),
+      );
+    }
+
+    let initDstChain: Chain | undefined = bridgeUI
       ? undefined
       : supportedChains.find(
-          ({ chainId }) =>
-            chainId ===
-            (integrationConfig.dstChainId || DEFAULT_DESTINATION_CHAIN_ID),
+          ({ chainId }) => chainId === DEFAULT_DESTINATION_CHAIN_ID,
         );
-    setDstChain(initDstChain);
 
+    // if integrator set it, use it
+    if (integrationConfig.dstChainId) {
+      initDstChain = supportedChains.find(
+        ({ chainId }) => chainId === integrationConfig.dstChainId,
+      );
+    }
+
+    let initDstToken: Token | undefined;
     if (initDstChain) {
-      const initDstToken = initDstChain.tokens.find(
-        ({ address }) =>
-          address.toLowerCase() ===
-          (integrationConfig.dstTokenAddr?.toLowerCase() ||
-            DEFAULT_DESTINATION_TOKEN_ADDR.toLowerCase()),
+      initDstToken = initDstChain.tokens.find(
+        ({ address }) => address.toLowerCase() === dstTokenAddress,
       );
-      setDstToken(initDstToken);
-    } else {
-      setDstToken(undefined);
     }
-  }, [integrationConfig, supportedChains, bridgeUI, walletChainId]);
+
+    // the values here should not be from state but from the code above
+    const { source, target } = mapToValidPath({
+      source: { chain: initSrcChain, token: initSrcToken },
+      target: { chain: initDstChain, token: initDstToken },
+      type: bridgeUI ? "BRIDGE" : "SWAP",
+      supportedChains,
+      bridgeTokensDictionary,
+    });
+
+    setSrcChain(source.chain);
+    setDstChain(target.chain);
+    setSrcToken(source.token);
+    setDstToken(target.token);
+    // Mark initial state as set
+    setIsInitialStateSet(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    integrationConfig?.srcChainId,
+    integrationConfig?.srcTokenAddr,
+    integrationConfig?.dstChainId,
+    integrationConfig?.dstTokenAddr,
+    supportedChains,
+    bridgeUI,
+    walletChainId,
+    isInitialStateSet,
+    bridgeTokensDictionary,
+  ]);
 
   useEffect(() => {
-    if (!bridgeTokensDictionary) {
+    if (
+      !bridgeTokensDictionary ||
+      supportedChains.length === 0 ||
+      !isInitialStateSet
+    ) {
       return;
     }
 
@@ -814,11 +885,12 @@ export const SwapProvider = ({
     } else if (window.xPayOnDstChainChange) {
       window.xPayOnDstChainChange(dstChain?.chainId);
     }
-  }, [integrationConfig, dstChain]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [integrationConfig.onDstChainChange, dstChain]);
 
   useEffect(() => {
     const token = dstToken
-      ? { address: dstToken.address.toLowerCase(), symbol: dstToken.symbol }
+      ? { address: dstToken.address.toLowerCase(), symbol: dstToken.tokenId }
       : undefined;
 
     if (integrationConfig.onDstTokenChange) {
@@ -826,7 +898,8 @@ export const SwapProvider = ({
     } else if (window.xPayOnDstTokenChange) {
       window.xPayOnDstTokenChange(token);
     }
-  }, [integrationConfig, dstToken]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [integrationConfig.onDstTokenChange, dstToken]);
 
   useEffect(() => {
     if (integrationConfig.onSrcChainChange) {
@@ -834,11 +907,12 @@ export const SwapProvider = ({
     } else if (window.xPayOnSrcChainChange) {
       window.xPayOnSrcChainChange(srcChain?.chainId);
     }
-  }, [integrationConfig, srcChain]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [integrationConfig.onSrcChainChange, srcChain]);
 
   useEffect(() => {
     const token = srcToken
-      ? { address: srcToken.address.toLowerCase(), symbol: srcToken.symbol }
+      ? { address: srcToken.address.toLowerCase(), symbol: srcToken.tokenId }
       : undefined;
 
     if (integrationConfig.onSrcTokenChange) {
@@ -846,7 +920,8 @@ export const SwapProvider = ({
     } else if (window.xPayOnSrcTokenChange) {
       window.xPayOnSrcTokenChange(token);
     }
-  }, [integrationConfig, srcToken]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [integrationConfig.onSrcTokenChange, srcToken]);
 
   return (
     <swapContext.Provider
@@ -865,8 +940,7 @@ export const SwapProvider = ({
         setSrcChain,
         srcChainTokensOptions,
         srcChainOtherTokensOptions,
-        dstChainTokensPrices,
-        srcChainTokensPrices,
+        tokenPrices,
         dstChain,
         setDstChain,
         dstChainTokensOptions,

package/src/context/TransactionProvider.tsx

@@ -1,4 +1,4 @@
-import { Ecosystem, EnqueueTxProps, TxStatus } from "@src/models";
+import { Ecosystem, EnqueueTxProps } from "@src/models";
 import { ContractReceipt, ContractTransaction } from "ethers";
 import {
   Context,

package/src/models/TokenData.ts

@@ -40,7 +40,9 @@ export type Prices = {
 };
 
 export type TokenPrices = {
-  [tokenAddress: string]: string;
+  [chainId: string]: {
+    [tokenAddress: string]: string;
+  };
 };
 
 export type TokenBalances = {

package/src/models/payloads/GetPricesPayload.ts

@@ -1,4 +1,4 @@
 export type GetPricesPayload = {
-  chainId: string;
+  chainId: string[];
   currency?: string;
 };

package/src/utils/validation.ts

@@ -1,10 +1,12 @@
 import {
   DEFAULT_DESTINATION_CHAIN_ID,
+  DEFAULT_DESTINATION_TOKEN_ADDR,
   DEFAULT_SOURCE_CHAIN_ID,
+  DEFAULT_SOURCE_TOKEN_ADDR,
 } from "@src/constants";
 import { BridgeTokensDictionary, Chain, Token } from "@src/models";
 
-const getDefaultSourceChain = ({
+export const getDefaultSwapSourceChain = ({
   supportedChains,
 }: {
   supportedChains: Chain[];
@@ -23,7 +25,7 @@ const getDefaultSourceChain = ({
   return defaultSourceChain;
 };
 
-const getDefaultDestinationChain = ({
+export const getDefaultDestinationChain = ({
   supportedChains,
 }: {
   supportedChains: Chain[];
@@ -42,15 +44,26 @@ const getDefaultDestinationChain = ({
   return defaultTargetChain;
 };
 
-const getDefaultSwapTokenForChain = (
+export const getDefaultSwapTokenForChain = (
   chain: Chain,
+  defaultTokenAddress: string,
   sameChain?: boolean,
   sourceTokenId?: string,
 ) => {
-  const xswapToken = chain.tokens.find((token) => token.tokenId === "XSWAP");
+  // First check if there are any supported tokens at all
+  const hasAnySupportedTokens = chain.tokens.some((token) => token.supported);
+  if (!hasAnySupportedTokens) {
+    return undefined;
+  }
 
-  if (xswapToken) {
-    return xswapToken;
+  const defaultToken = chain.tokens.find(
+    (token) =>
+      token.address.toLowerCase() === defaultTokenAddress.toLowerCase() &&
+      token.supported,
+  );
+
+  if (defaultToken) {
+    return defaultToken;
   }
 
   const fallbackToken = chain.tokens.find((token) =>
@@ -63,10 +76,10 @@ const getDefaultSwapTokenForChain = (
     return fallbackToken;
   }
 
-  return chain.tokens[0];
+  return undefined;
 };
 
-const getDefaultBridgeTokenForChain = ({
+export const getDefaultBridgeTokenForChain = ({
   chain,
   bridgeTokensDictionary,
 }: {
@@ -158,15 +171,17 @@ const mapToValidPathSwap = ({
   supportedChains,
 }: Omit<MapToValidPathParams, "type">) => {
   let newSourceChain: Chain | undefined =
-    source.chain || getDefaultSourceChain({ supportedChains });
+    source.chain || getDefaultSwapSourceChain({ supportedChains });
   let newTargetChain: Chain | undefined =
     target.chain || getDefaultDestinationChain({ supportedChains });
   let newSourceToken: Token | undefined =
-    source.token || getDefaultSwapTokenForChain(newSourceChain);
+    source.token ||
+    getDefaultSwapTokenForChain(newSourceChain, DEFAULT_SOURCE_TOKEN_ADDR);
   let newTargetToken: Token | undefined =
     target.token ||
     getDefaultSwapTokenForChain(
       newTargetChain,
+      DEFAULT_DESTINATION_TOKEN_ADDR,
       newSourceChain.chainId === newTargetChain.chainId,
       newSourceToken?.tokenId,
     );
@@ -185,7 +200,7 @@ const mapToValidPathSwap = ({
   }
 
   if (!isSwapSourceValid(newSourceChain)) {
-    newSourceChain = getDefaultSourceChain({ supportedChains });
+    newSourceChain = getDefaultSwapSourceChain({ supportedChains });
     // We can't have dangling token from a different chain.
     newSourceToken = undefined;
 
@@ -242,11 +257,15 @@ const mapToValidPathSwap = ({
   // Setting tokens
 
   if (!newSourceToken) {
-    newSourceToken = getDefaultSwapTokenForChain(newSourceChain);
+    newSourceToken = getDefaultSwapTokenForChain(
+      newSourceChain,
+      DEFAULT_SOURCE_TOKEN_ADDR,
+    );
   }
-  if (!newTargetToken) {
+  if (!newTargetToken || newSourceToken === newTargetToken) {
     newTargetToken = getDefaultSwapTokenForChain(
       newTargetChain,
+      DEFAULT_DESTINATION_TOKEN_ADDR,
       newSourceChain.chainId === newTargetChain.chainId,
       newSourceToken?.tokenId,
     );
@@ -270,8 +289,7 @@ const mapToValidPathBridge = ({
   let newTargetToken = target.token;
 
   if (!isBridgeSourceValid(newSourceChain)) {
-    newSourceChain = getDefaultSourceChain({ supportedChains });
-    // We can't have dangling token from a different chain.
+    newSourceChain = undefined;
     newSourceToken = undefined;
 
     if (!isBridgeSourceValid(newSourceChain)) {
@@ -297,7 +315,7 @@ const mapToValidPathBridge = ({
       sourceToken: newSourceToken,
     })
   ) {
-    newTargetChain = getDefaultDestinationChain({ supportedChains });
+    newTargetChain = undefined;
     // We can't have dangling token from a different chain.
     newTargetToken = undefined;
 
@@ -329,6 +347,18 @@ const mapToValidPathBridge = ({
 
   // Setting tokens
 
+  // check if the source token is bridgeable
+  if (newSourceToken && newSourceChain && newTargetChain) {
+    const isBridgeable =
+      !!bridgeTokensDictionary[newSourceChain.chainId]?.[
+        newSourceToken.address.toLowerCase()
+      ]?.[newTargetChain.chainId];
+
+    if (!isBridgeable) {
+      newSourceToken = undefined;
+    }
+  }
+
   if (!newSourceToken) {
     const defaultToken = getDefaultBridgeTokenForChain({
       chain: newSourceChain,
@@ -378,6 +408,10 @@ const mapToValidPathBridge = ({
     }
   }
 
+  if (!newTargetToken) {
+    newTargetChain = undefined;
+  }
+
   return {
     source: { chain: newSourceChain, token: newSourceToken },
     target: { chain: newTargetChain, token: newTargetToken },

package/tailwind.config.js

@@ -6,6 +6,7 @@ export default {
     fontFamily: {
       body: ["'Satoshi-Medium'", "Tahoma", "Verdana", "ui-sans-serif"],
       sans: ["Satoshi-Medium", "Tahoma", "Verdana", "ui-sans-serif"],
+      "sans-bold": ["Satoshi-Bold", "Tahoma", "Verdana", "ui-sans-serif"],
     },
     extend: {
       colors: {