@xswap-link/sdk 0.8.6 → 0.8.7

package/package.json

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

package/src/components/Swap/SwapView/SwapPanel/ChainPanel/ChainPicker/ChainItem/index.tsx

@@ -9,11 +9,11 @@ import { useMemo, useRef } from "react";
 type Props = {
   chain: Chain;
   type: SwapPanelType;
-  disabledChains: string[];
+  disabled: boolean;
   onClick: (chainId: string) => void;
 };
 
-export const ChainItem = ({ chain, type, onClick, disabledChains }: Props) => {
+export const ChainItem = ({ chain, type, onClick, disabled }: Props) => {
   const {
     networks: { evm },
   } = useNetworks();
@@ -40,12 +40,10 @@ export const ChainItem = ({ chain, type, onClick, disabledChains }: Props) => {
     return type === "destination" ? srcChain?.chainId : dstChain?.chainId;
   }, [bridgeUI, dstChain?.chainId, srcChain?.chainId, type]);
 
-  const isInDisabledChains = disabledChains.includes(chain.chainId);
-
   return (
     <div
       onClick={() => {
-        if (chain.chainId === sameChainId || isInDisabledChains) {
+        if (chain.chainId === sameChainId || disabled) {
           return;
         }
         onClick(chain.chainId);
@@ -53,7 +51,7 @@ export const ChainItem = ({ chain, type, onClick, disabledChains }: Props) => {
       className={`flex justify-between items-center gap-3 mt-2 mb-2 cursor-pointer p-4 border border-solid border-white border-opacity-0 hover:selected-chain-item ${
         currentChainId === chain.chainId ? "selected-chain-item" : ""
       } ${
-        chain.chainId === sameChainId || isInDisabledChains
+        chain.chainId === sameChainId || disabled
           ? "disabled-chain-item cursor-default"
           : ""
       }`}
@@ -70,7 +68,7 @@ export const ChainItem = ({ chain, type, onClick, disabledChains }: Props) => {
         </div>
       )}
 
-      {isInDisabledChains && chain.chainId !== sameChainId && (
+      {disabled && chain.chainId !== sameChainId && (
         <div className="flex items-center gap-1">
           <Tooltip
             text={

package/src/components/Swap/SwapView/SwapPanel/ChainPanel/ChainPicker/index.tsx

@@ -101,6 +101,22 @@ export const ChainPicker = ({
     supportedChains,
   ]);
 
+  const sortedChains = useMemo(() => {
+    return filteredChains
+      .map((chain) => ({
+        ...chain,
+        disabled: disabledChains.includes(chain.chainId),
+      }))
+      .sort((a, b) => {
+        if (a.disabled === b.disabled) {
+          return 0;
+        }
+
+        // Place false before true.
+        return a.disabled ? 1 : -1;
+      });
+  }, [filteredChains, disabledChains]);
+
   return (
     <div className="flex flex-col h-full">
       <div className="flex justify-between">
@@ -117,12 +133,12 @@ export const ChainPicker = ({
         {filteredChains.length ? (
           <Virtuoso
             style={{ height: "100%" }}
-            data={filteredChains}
+            data={sortedChains}
             itemContent={(_, chain) => (
               <ChainItem
                 chain={chain}
                 type={type}
-                disabledChains={disabledChains}
+                disabled={chain.disabled}
                 onClick={select}
               />
             )}

package/src/components/Swap/SwapView/SwapPanel/ChainPanel/index.tsx

@@ -2,8 +2,7 @@ import { ArrowDownIcon } from "@src/assets/icons";
 import { Modal } from "@src/components/Modal";
 import { useSwapContext } from "@src/context";
 import { Chain, Token } from "@src/models";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useAccount } from "wagmi";
+import { useCallback, useMemo, useState } from "react";
 import { SwapPanelType } from "../../../SwapView";
 import { ChainPicker } from "./ChainPicker";
 
@@ -15,8 +14,6 @@ type Props = {
 
 export const ChainPanel = ({ chain, type, className }: Props) => {
   const {
-    supportedChains,
-    srcChain,
     setSrcChain,
     setDstChain,
     srcToken,
@@ -25,13 +22,10 @@ export const ChainPanel = ({ chain, type, className }: Props) => {
     setDstToken,
     srcChainLocked,
     dstChainLocked,
-    integrationConfig,
     bridgeUI,
     bridgeTokensDictionary,
   } = useSwapContext();
 
-  const { chainId } = useAccount();
-
   const projectLockedDestinationChain = useMemo(
     () => type === "destination" && dstChainLocked,
     [type, dstChainLocked],
@@ -42,23 +36,6 @@ export const ChainPanel = ({ chain, type, className }: Props) => {
     [type, srcChainLocked],
   );
 
-  // select chain from user wallet
-  useEffect(() => {
-    if (!chainId || integrationConfig.srcChainId) return;
-
-    const userChainFromWallet = supportedChains.find(
-      (chain) => chain.chainId === String(chainId),
-    );
-    if (
-      !userChainFromWallet ||
-      srcChain?.chainId === userChainFromWallet.chainId
-    )
-      return;
-
-    setSrcChain(userChainFromWallet);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chainId]);
-
   const [chainPickerModalOpen, setChainPickerModalOpen] = useState(false);
 
   const handleSrcChainChange = useCallback(

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/QuickPickTokenItem/index.tsx

@@ -1,7 +1,5 @@
 import { TokenLogo } from "@src/components";
-import { useSwapContext } from "@src/context";
 import { TokenOption } from "@src/models";
-import { useMemo } from "react";
 
 type Props = {
   token: TokenOption;
@@ -13,13 +11,6 @@ export const QuickPickTokenItem = ({
   selectedTokenAddress,
   onClick,
 }: Props) => {
-  const { supportedChains } = useSwapContext();
-
-  const chain = useMemo(
-    () => supportedChains.find(({ chainId }) => chainId === token.chainId),
-    [supportedChains, token],
-  );
-
   return (
     <button
       type="button"
@@ -36,9 +27,9 @@ export const QuickPickTokenItem = ({
         generatedLogoClassName="w-6 h-6"
       />
       <div className="flex flex-col gap-1 text-xs font-medium !leading-3">
-        <div className="text-t_text_primary">{token.symbol}</div>
+        <div className="text-t_text_primary">{token.name}</div>
         <div className="text-t_text_primary text-opacity-50">
-          {chain?.displayName}
+          {token.symbol}
         </div>
       </div>
     </button>

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/TokenItem/index.tsx

@@ -41,7 +41,7 @@ export const TokenItem = ({ token, selectedTokenAddress, onClick }: Props) => {
             {token.name}
           </div>
           <div className="text-xs text-t_text_primary text-opacity-50 font-medium">
-            {chain?.displayName}
+            {token.symbol}
           </div>
         </div>
 

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/index.tsx

@@ -22,7 +22,7 @@ import { TokenItem } from "./TokenItem";
 
 type Props = {
   type: SwapPanelType;
-  chain: Chain;
+  chain?: Chain;
   tokens: TokenOption[];
   otherTokens: TokenOption[];
   selectedTokenAddress?: string;
@@ -59,7 +59,7 @@ export const TokenPicker = ({
   }, [isOpen]);
 
   const importCustomToken = useCallback(() => {
-    if (customTokenData && isETHAddressValid(searchValue)) {
+    if (chain && customTokenData && isETHAddressValid(searchValue)) {
       let customTokens = {};
       if (!isServer) {
         customTokens = JSON.parse(
@@ -97,7 +97,7 @@ export const TokenPicker = ({
     currentRouteRequestNonce.current = nonce;
     const rpcUrl = supportedChains.find(
       ({ ecosystem, chainId }) =>
-        ecosystem === Ecosystem.EVM && chainId === chain.chainId,
+        ecosystem === Ecosystem.EVM && chainId === chain?.chainId,
     )?.publicRpcUrls[0];
     const customTokenContract = new ethers.Contract(
       searchValue.toLowerCase(),
@@ -134,6 +134,7 @@ export const TokenPicker = ({
     if (
       !bridgeUI &&
       isETHAddressValid(searchValue) &&
+      chain &&
       !findTokenDataByAddressAndChain(searchValue.toLowerCase(), chain.chainId)
     ) {
       getCustomTokenData();
@@ -385,9 +386,15 @@ export const TokenPicker = ({
                   groupContent={(index) => (
                     <div className="py-1 bg-t_bg_primary text-t_text_primary">
                       <div className="px-4 text-left">
-                        {index === 0
-                          ? `${chain.displayName} network`
-                          : "Other networks"}
+                        {(() => {
+                          if (chain) {
+                            return index === 0
+                              ? `${chain.displayName} network`
+                              : "Other networks";
+                          }
+
+                          return "All networks";
+                        })()}
                       </div>
                       <div className="horizontal-separator" />
                       {!tokenGroups[index]?.length && (

package/src/constants/index.ts

@@ -12,7 +12,7 @@ export const ROUTE_TIMEOUT_MS = 10000;
 export const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.0001;
 export const DEFAULT_SOURCE_CHAIN_ID = "1";
 export const DEFAULT_SOURCE_TOKEN_ADDR = constants.AddressZero;
-export const DEFAULT_DESTINATION_CHAIN_ID = "8453";
+export const DEFAULT_DESTINATION_CHAIN_ID = "1";
 export const DEFAULT_DESTINATION_TOKEN_ADDR =
   "0x8fe815417913a93ea99049fc0718ee1647a2a07c"; // XSWAP token
 export const CCIP_EXPLORER = "https://ccip.chain.link/";

package/src/context/SwapProvider.tsx

@@ -194,7 +194,7 @@ export const SwapProvider = ({
   wagmiConfig,
   overlay,
 }: Props) => {
-  const { address } = useAccount();
+  const { address, chainId: walletChainId } = useAccount();
   const [tab, setTab] = useState(init.tab);
   const [error, setError] = useState(init.error);
   const [expressDelivery, setExpressDelivery] = useState(init.expressDelivery);
@@ -560,16 +560,13 @@ export const SwapProvider = ({
   }, [quoteRoute]);
 
   useEffect(() => {
-    if (!srcChain || !dstChain) {
-      return;
-    }
     (async () => {
       // source chain
       const srcTokenOptions: TokenOption[] = getTokenOptions(
-        srcChain.chainId,
-        dstChain.chainId,
+        srcChain?.chainId,
+        dstChain?.chainId,
       ).filter(({ symbol }) =>
-        dstChain.chainId === srcChain.chainId
+        dstChain?.chainId === srcChain?.chainId
           ? symbol !== dstToken?.symbol
           : true,
       );
@@ -577,10 +574,10 @@ export const SwapProvider = ({
 
       // destination chain
       const dstTokenOptions: TokenOption[] = getTokenOptions(
-        dstChain.chainId,
-        srcChain.chainId,
+        dstChain?.chainId,
+        dstChain?.chainId,
       ).filter(({ symbol }) =>
-        dstChain.chainId === srcChain.chainId
+        dstChain?.chainId === srcChain?.chainId
           ? symbol !== srcToken?.symbol
           : true,
       );
@@ -591,7 +588,7 @@ export const SwapProvider = ({
       const srcOtherChains = supportedChains.filter(
         ({ chainId, web3Environment, swapSupported, bridgeSupported }) => {
           if (
-            chainId === srcChain.chainId ||
+            chainId === srcChain?.chainId ||
             web3Environment !== Web3Environment.MAINNET
           ) {
             return false;
@@ -606,8 +603,8 @@ export const SwapProvider = ({
       );
       for (const { chainId } of srcOtherChains) {
         srcOtherTokenOptions.push(
-          ...getTokenOptions(chainId, dstChain.chainId).filter(({ symbol }) =>
-            chainId === dstChain.chainId ? symbol !== dstToken?.symbol : true,
+          ...getTokenOptions(chainId, dstChain?.chainId).filter(({ symbol }) =>
+            chainId === dstChain?.chainId ? symbol !== dstToken?.symbol : true,
           ),
         );
       }
@@ -617,14 +614,14 @@ export const SwapProvider = ({
       const dstOtherTokenOptions: TokenOption[] = [];
       const dstOtherChains = supportedChains.filter(
         ({ chainId, web3Environment, swapSupported }) =>
-          chainId !== dstChain.chainId &&
+          chainId !== dstChain?.chainId &&
           web3Environment === Web3Environment.MAINNET &&
           swapSupported,
       );
       for (const { chainId } of dstOtherChains) {
         dstOtherTokenOptions.push(
-          ...getTokenOptions(chainId, srcChain.chainId).filter(({ symbol }) =>
-            chainId === srcChain.chainId ? symbol !== srcToken?.symbol : true,
+          ...getTokenOptions(chainId, dstChain?.chainId).filter(({ symbol }) =>
+            chainId === srcChain?.chainId ? symbol !== srcToken?.symbol : true,
           ),
         );
       }
@@ -657,6 +654,7 @@ export const SwapProvider = ({
       }
     })();
   }, [
+    bridgeUI,
     srcChain,
     dstChain,
     address,
@@ -717,33 +715,60 @@ export const SwapProvider = ({
   }, [srcChain]);
 
   useEffect(() => {
-    const initSrcChain = supportedChains.find(
-      ({ chainId }) =>
-        chainId === (integrationConfig?.srcChainId || DEFAULT_SOURCE_CHAIN_ID),
-    );
-    const initSrcToken = initSrcChain?.tokens.find(
-      ({ address }) =>
-        address.toLowerCase() ===
-        (integrationConfig?.srcTokenAddr?.toLowerCase() ||
-          DEFAULT_SOURCE_TOKEN_ADDR.toLocaleLowerCase()),
-    );
-    const initDstChain = supportedChains.find(
-      ({ chainId }) =>
-        chainId ===
-        (integrationConfig.dstChainId || DEFAULT_DESTINATION_CHAIN_ID),
-    );
-    const initDstToken = initDstChain?.tokens.find(
-      ({ address }) =>
-        address.toLowerCase() ===
-        (integrationConfig.dstTokenAddr?.toLowerCase() ||
-          DEFAULT_DESTINATION_TOKEN_ADDR.toLowerCase()),
-    );
+    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,
+      );
+
+      if (initSrcChain) {
+        const initSrcToken = initSrcChain.tokens.find(
+          ({ address }) =>
+            address.toLowerCase() ===
+            (integrationConfig?.srcTokenAddr?.toLowerCase() ||
+              DEFAULT_SOURCE_TOKEN_ADDR.toLowerCase()),
+        );
 
-    setSrcChain(initSrcChain);
-    setSrcToken(initSrcToken);
+        // 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;
+    });
+
+    const initDstChain = bridgeUI
+      ? undefined
+      : supportedChains.find(
+          ({ chainId }) =>
+            chainId ===
+            (integrationConfig.dstChainId || DEFAULT_DESTINATION_CHAIN_ID),
+        );
     setDstChain(initDstChain);
-    setDstToken(initDstToken);
-  }, [integrationConfig, supportedChains]);
+
+    if (initDstChain) {
+      const initDstToken = initDstChain.tokens.find(
+        ({ address }) =>
+          address.toLowerCase() ===
+          (integrationConfig.dstTokenAddr?.toLowerCase() ||
+            DEFAULT_DESTINATION_TOKEN_ADDR.toLowerCase()),
+      );
+      setDstToken(initDstToken);
+    } else {
+      setDstToken(undefined);
+    }
+  }, [integrationConfig, supportedChains, bridgeUI, walletChainId]);
 
   useEffect(() => {
     if (!bridgeTokensDictionary) {