@xswap-link/sdk 0.13.1 → 0.14.1

package/src/context/SwapProvider.tsx

@@ -28,10 +28,11 @@ import {
   getPrices,
   getRoute,
   getSolanaRoute,
+  getTokenBalance,
 } from "@src/services";
+import { getCustomTokenRefs } from "@src/utils/tokens";
 import {
   deepMergeObjects,
-  getBalanceOf,
   humanReadableToWei,
   isServer,
   resolveTokenAddress,
@@ -129,6 +130,10 @@ type SwapContext = {
     chainId: string | undefined,
     token: TokenOption,
   ) => void;
+  // Which side's token/network picker is open. The picker renders in place
+  // of the swap view (desktop) or as a bottom sheet (mobile).
+  activePicker: "source" | "destination" | null;
+  setActivePicker: Dispatch<SetStateAction<"source" | "destination" | null>>;
 };
 
 const functionNotImplemented = () => {
@@ -142,6 +147,8 @@ const init: SwapContext = {
   tab: "Swap",
   overlay: false,
   error: "",
+  activePicker: null,
+  setActivePicker: functionNotImplemented,
   feeToken: undefined,
   srcChain: undefined,
   srcChainTokensOptions: [],
@@ -224,6 +231,7 @@ export const SwapProvider = ({
   // Settings
   const [tab, setTab] = useState(init.tab);
   const [error, setError] = useState(init.error);
+  const [activePicker, setActivePicker] = useState(init.activePicker);
   const [expressDelivery, setExpressDelivery] = useState(init.expressDelivery);
   const [slippage, setSlippage] = useState(init.slippage);
   const [infiniteApproval, setInfiniteApproval] = useState(
@@ -240,6 +248,9 @@ export const SwapProvider = ({
   const [tokenBalances, setTokenBalances] = useState<
     Record<string, Record<string, string>>
   >({});
+  // bumped when the user imports a token, so the supported tokens mapping and
+  // the balances list get rebuilt with the new custom token included
+  const [customTokensVersion, setCustomTokensVersion] = useState(0);
   const [bridgeTokens, setBridgeTokens] = useState<BridgeToken[]>([]);
   // Values
   const [srcValue, setSrcValue] = useState(init.srcValue);
@@ -334,8 +345,9 @@ export const SwapProvider = ({
       });
     });
     return deepMergeObjects(chainIdToTokenAddressToData, customTokens);
+    // customTokensVersion re-reads localStorage after an in-session import
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [supportedChains]);
+  }, [supportedChains, customTokensVersion]);
 
   // useMemo: creates a mapping from each chain ID to available token options sorted by token priority.
   const chainToTokenOptionsMap = useMemo(() => {
@@ -686,68 +698,70 @@ export const SwapProvider = ({
       refreshSelectedTokenBalanceNonce.current = nonce;
       setIsFetchingBalance(true);
       let balance = "0";
-      if (srcChain?.ecosystem === Ecosystem.EVM && evmAddress) {
-        const balanceFromBackend =
-          tokenBalances[srcChain?.chainId]?.[srcToken.address];
-        if (options?.forceRpc || balanceFromBackend === undefined) {
-          const balanceUI = await getBalanceOf(
-            evmAddress,
-            srcToken.address,
-            srcChain?.publicRpcUrls[0],
-          );
-          balance = humanReadableToWei({
-            amount: balanceUI,
-            decimals: srcToken.decimals,
-          });
-          if (options?.forceRpc && balanceFromBackend !== undefined) {
-            // keep the backend cache in sync so token pickers and future
-            // non-forced refreshes see the fresh value
-            const chainId = srcChain.chainId;
-            const tokenAddress = srcToken.address;
-            const freshBalance = balance;
-            setTokenBalances((prev) => ({
-              ...prev,
-              [chainId]: {
-                ...prev[chainId],
-                [tokenAddress]: freshBalance,
-              },
+      try {
+        if (srcChain?.ecosystem === Ecosystem.EVM && evmAddress) {
+          const balanceFromBackend =
+            tokenBalances[srcChain?.chainId]?.[srcToken.address];
+          if (options?.forceRpc || balanceFromBackend === undefined) {
+            // single-token read resolved server-side through private RPCs
+            ({ balance } = await getTokenBalance({
+              chainId: srcChain.chainId,
+              tokenAddress: srcToken.address,
+              walletAddress: evmAddress,
             }));
+            if (options?.forceRpc && balanceFromBackend !== undefined) {
+              // keep the backend cache in sync so token pickers and future
+              // non-forced refreshes see the fresh value
+              const chainId = srcChain.chainId;
+              const tokenAddress = srcToken.address;
+              const freshBalance = balance;
+              setTokenBalances((prev) => ({
+                ...prev,
+                [chainId]: {
+                  ...prev[chainId],
+                  [tokenAddress]: freshBalance,
+                },
+              }));
+            }
+          } else {
+            balance = balanceFromBackend;
           }
-        } else {
-          balance = balanceFromBackend;
-        }
-      } else if (srcChain?.ecosystem === Ecosystem.SOLANA && solanaAddress) {
-        const solanaPublicKey = new PublicKey(solanaAddress);
-        const connection = new Connection(srcChain.publicRpcUrls[0]!);
-        if (srcToken.address === SOLANA_NATIVE_TOKEN_ADDRESS.toBase58()) {
-          balance = new BigNumberJS(
-            await connection.getBalance(solanaPublicKey),
-          ).toString();
-        } else {
-          const tokenAccounts = await connection.getParsedTokenAccountsByOwner(
-            solanaPublicKey,
-            {
-              programId: SOLANA_TOKEN_PROGRAM_ID,
-            },
-          );
-          const token2022Accounts =
-            await connection.getParsedTokenAccountsByOwner(solanaPublicKey, {
-              programId: SOLANA_TOKEN_2022_PROGRAM_ID,
-            });
-          const allTokenAccount = [
-            ...tokenAccounts.value,
-            ...token2022Accounts.value,
-          ];
-          const tokenAccount = allTokenAccount.find(
-            (account) =>
-              account.account.data.parsed.info.mint === srcToken.address,
-          );
-          if (!tokenAccount) {
-            balance = "0";
+        } else if (srcChain?.ecosystem === Ecosystem.SOLANA && solanaAddress) {
+          const solanaPublicKey = new PublicKey(solanaAddress);
+          const connection = new Connection(srcChain.publicRpcUrls[0]!);
+          if (srcToken.address === SOLANA_NATIVE_TOKEN_ADDRESS.toBase58()) {
+            balance = new BigNumberJS(
+              await connection.getBalance(solanaPublicKey),
+            ).toString();
           } else {
-            balance = tokenAccount.account.data.parsed.info.tokenAmount.amount;
+            const tokenAccounts =
+              await connection.getParsedTokenAccountsByOwner(solanaPublicKey, {
+                programId: SOLANA_TOKEN_PROGRAM_ID,
+              });
+            const token2022Accounts =
+              await connection.getParsedTokenAccountsByOwner(solanaPublicKey, {
+                programId: SOLANA_TOKEN_2022_PROGRAM_ID,
+              });
+            const allTokenAccount = [
+              ...tokenAccounts.value,
+              ...token2022Accounts.value,
+            ];
+            const tokenAccount = allTokenAccount.find(
+              (account) =>
+                account.account.data.parsed.info.mint === srcToken.address,
+            );
+            if (!tokenAccount) {
+              balance = "0";
+            } else {
+              balance =
+                tokenAccount.account.data.parsed.info.tokenAmount.amount;
+            }
           }
         }
+      } catch (_) {
+        // failed read — keep the loader on: the balance must be loaded before
+        // a swap is allowed, so we never show a stale value as loaded
+        return;
       }
       if (nonce !== refreshSelectedTokenBalanceNonce.current) {
         return;
@@ -790,6 +804,10 @@ export const SwapProvider = ({
         ? chain
         : { ...chain, tokens: [...chain.tokens, token] };
 
+      if (!tokenExists) {
+        setCustomTokensVersion((version) => version + 1);
+      }
+
       setSrcChain(updated);
       setSrcToken(token);
     },
@@ -821,8 +839,9 @@ export const SwapProvider = ({
     quoteRoute();
   }, [quoteRoute]);
   // calls refreshBalance to update source token balance on mount or when refreshBalance changes.
-  // when the connected wallet changed, force an RPC read — the cached backend
-  // balances still belong to the previous wallet until getBalances resolves.
+  // when the connected wallet changed, force a fresh single-token read — the
+  // cached balances list still belongs to the previous wallet until
+  // getBalances resolves.
   useEffect(() => {
     const walletAddresses = `${evmAddress ?? ""}:${solanaAddress ?? ""}`;
     const walletChanged =
@@ -832,6 +851,8 @@ export const SwapProvider = ({
     refreshBalance(walletChanged ? { forceRpc: true } : undefined);
   }, [refreshBalance, evmAddress, solanaAddress]);
   // fetches user all token balances when a wallet address is available and supported chains are loaded.
+  // imported tokens from localStorage are passed along so their balances get
+  // resolved server-side too.
   useEffect(() => {
     let isCancelled = false;
     if ((evmAddress || solanaAddress) && supportedChains.length > 0) {
@@ -839,6 +860,7 @@ export const SwapProvider = ({
       getBalances({
         walletAddress: evmAddress,
         solanaWalletAddress: solanaAddress,
+        customTokens: getCustomTokenRefs(),
       }).then((balances) => {
         if (!isCancelled) {
           setTokenBalances(balances);
@@ -850,7 +872,7 @@ export const SwapProvider = ({
     return () => {
       isCancelled = true; // prevent state update from stale async call
     };
-  }, [evmAddress, solanaAddress, supportedChains.length]);
+  }, [evmAddress, solanaAddress, supportedChains.length, customTokensVersion]);
   // sets the fee token from the source chain's tokens by selecting the native token (AddressZero).
   useEffect(() => {
     if (srcChain?.chainId === "mainnet-beta") {
@@ -1079,6 +1101,7 @@ export const SwapProvider = ({
       return;
     }
 
+    setActivePicker(null);
     setSrcToken(undefined);
     setDstToken(undefined);
     setSrcChain(undefined);
@@ -1337,6 +1360,8 @@ export const SwapProvider = ({
         onConnectWallet,
         hasOnConnectWalletCallback,
         addTokenToChainIfNotExists,
+        activePicker,
+        setActivePicker,
       }}
     >
       {children}

package/src/context/TxUIWrapper.tsx

@@ -113,7 +113,7 @@ export const TxUIWrapper = ({ children }: Props) => {
                     </Button>
 
                     <div
-                      className="fill-t_text_primary w-[14px] h-[14px] cursor-pointer p-[14px] leading-[0px]"
+                      className="fill-t_text_primary text-t_text_primary w-[14px] h-[14px] cursor-pointer p-[14px] leading-[0px]"
                       onClick={() => closeSnackbar(snackbarKey)}
                     >
                       <CloseIcon />
@@ -225,7 +225,7 @@ export const TxUIWrapper = ({ children }: Props) => {
                     View
                   </Button>
                   <div
-                    className="fill-t_text_primary w-[14px] h-[14px] cursor-pointer p-[14px] leading-[0px]"
+                    className="fill-t_text_primary text-t_text_primary w-[14px] h-[14px] cursor-pointer p-[14px] leading-[0px]"
                     onClick={() => closeSnackbar(snackbarKey)}
                   >
                     <CloseIcon />
@@ -321,7 +321,7 @@ export const TxUIWrapper = ({ children }: Props) => {
                   </Button>
 
                   <div
-                    className="fill-t_text_primary w-[14px] h-[14px] cursor-pointer p-[14px] leading-[0px]"
+                    className="fill-t_text_primary text-t_text_primary w-[14px] h-[14px] cursor-pointer p-[14px] leading-[0px]"
                     onClick={() => closeSnackbar(snackbarKey)}
                   >
                     <CloseIcon />

package/src/hooks/useEvmContractApi.ts

@@ -2,6 +2,14 @@ import { GAS_LIMIT_MULTIPLIER } from "@src/constants";
 import { ethers } from "ethers";
 import { useMemo } from "react";
 
+// RPC nodes behind a load balancer can lag right after a tx is mined (e.g. the
+// swap's gas estimation not seeing the allowance from a just-confirmed
+// approval), so retry the estimation with increasing delays before giving up.
+const GAS_ESTIMATION_RETRY_DELAYS_MS = [500, 1000, 2000];
+
+const wait = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, ms));
+
 export const useEvmContractApi = () =>
   useMemo(
     () => ({
@@ -59,11 +67,27 @@ export const useEvmContractApi = () =>
           throw new Error(decodedError?.name);
         }
       },
-      executeCalldata: async (signer, transaction) => {
+      executeCalldata: async (
+        signer,
+        transaction,
+        { retryGasEstimation = false } = {},
+      ) => {
         try {
-          const gasEstimation = await signer.estimateGas({
-            ...transaction,
-          });
+          let gasEstimation;
+          for (let attempt = 0; ; attempt++) {
+            try {
+              gasEstimation = await signer.estimateGas({
+                ...transaction,
+              });
+              break;
+            } catch (estimationErr) {
+              const delayMs = GAS_ESTIMATION_RETRY_DELAYS_MS[attempt];
+              if (!retryGasEstimation || delayMs === undefined) {
+                throw estimationErr;
+              }
+              await wait(delayMs);
+            }
+          }
           return await signer.sendTransaction({
             ...transaction,
             gasLimit: Math.floor(

package/src/models/TransactionHistory.ts

@@ -43,6 +43,7 @@ export type TransactionStatus =
 
 export type Transaction = {
   messageId?: string;
+  receiver?: string;
   hash: string;
   timestamp: number;
   sourceChainId: string;

package/src/models/payloads/GetBalancesPayload.ts

@@ -1,4 +1,5 @@
 export type GetTokenBalancesPayload = {
   walletAddress?: string;
   solanaWalletAddress?: string;
+  customTokens?: { chainId: string; tokenAddress: string }[];
 };

package/src/models/payloads/ModalIntegrationPayload.ts

@@ -47,6 +47,7 @@ export type ModalIntegrationPayload = {
   srcToken?: string;
   customContractCalls?: ContractCall[];
   desc?: string;
+  widgetTitle?: string;
   dstDisplayToken?: string;
   lightTheme?: boolean;
   defaultWalletPicker?: boolean;

package/src/models/payloads/WidgetIntegrationPayload.ts

@@ -9,6 +9,7 @@ export type WidgetIntegrationPayload = {
   srcToken?: string;
   customContractCalls?: ContractCall[];
   desc?: string;
+  widgetTitle?: string;
   dstDisplayToken?: string;
   lightTheme?: boolean;
   defaultWalletPicker?: boolean;

package/src/services/api.ts

@@ -7,6 +7,7 @@ import {
   GetRoutePayload,
   GetSolanaRoutePayload,
   GetTokenBalancesPayload,
+  ImportedTokenData,
   EVMRoute,
   SolanaRoute,
   Token,
@@ -169,3 +170,39 @@ export async function getLeaderboardChange(
 export async function getBridgeTokens(): Promise<BridgeToken[]> {
   return _sendRequest<BridgeToken[]>(`/bridgeTokens`);
 }
+
+/**
+ * GET a single token balance (in wei) resolved server-side through private
+ * RPCs. Native balance when tokenAddress is the zero address.
+ * @param payload required
+ * @param abortSignal
+ */
+export async function getTokenBalance(
+  payload: { chainId: string; tokenAddress: string; walletAddress: string },
+  abortSignal?: AbortSignal,
+): Promise<{ balance: string }> {
+  return _sendRequest<{ balance: string }>(
+    `/tokenBalance?${new URLSearchParams({
+      data: JSON.stringify(payload),
+    })}`,
+    { signal: abortSignal },
+  );
+}
+
+/**
+ * GET ERC20 token metadata (name, symbol, decimals) resolved server-side
+ * through private RPCs.
+ * @param payload required
+ * @param abortSignal
+ */
+export async function getTokenMetadata(
+  payload: { chainId: string; tokenAddress: string },
+  abortSignal?: AbortSignal,
+): Promise<ImportedTokenData> {
+  return _sendRequest<ImportedTokenData>(
+    `/tokenMetadata?${new URLSearchParams({
+      data: JSON.stringify(payload),
+    })}`,
+    { signal: abortSignal },
+  );
+}

package/src/utils/index.ts

@@ -3,7 +3,7 @@ export * from "./numbers";
 export * from "./parseWeb3Error";
 export * from "./strings";
 
-import { Chain } from "@src/models";
+import { BridgeTokensDictionary, Chain, Ecosystem } from "@src/models";
 import { format } from "date-fns";
 import { ethers } from "ethers";
 
@@ -77,6 +77,53 @@ export const resolveTokenAddress = (
     ?.address?.toLowerCase();
 };
 
+/**
+ * Checks whether a transfer from `srcChain` can reach `dstChainId`,
+ * based on the chain-level support lists.
+ */
+export const isChainConnectionSupported = (
+  srcChain: Chain | undefined,
+  dstChainId: string | undefined,
+  bridgeUI: boolean,
+): boolean => {
+  if (!srcChain || !dstChainId) {
+    return true;
+  }
+  if (srcChain.chainId === dstChainId) {
+    return true;
+  }
+  const supportedDst = bridgeUI
+    ? srcChain.supportedDstForBridge
+    : srcChain.supportedDstForSwap;
+  return !!supportedDst?.includes(dstChainId);
+};
+
+// Chain-level support (supportedDstForBridge) is not enough for bridging —
+// the specific token must have a route to the destination chain in the
+// bridge tokens dictionary.
+export const isBridgeTokenConnectionSupported = ({
+  token,
+  tokenChain,
+  dstChainId,
+  bridgeTokensDictionary,
+}: {
+  token: { address: string };
+  tokenChain: Chain | undefined;
+  dstChainId: string | undefined;
+  bridgeTokensDictionary: BridgeTokensDictionary | null;
+}): boolean => {
+  if (!tokenChain || !dstChainId || !bridgeTokensDictionary) {
+    return true;
+  }
+  const tokenAddress =
+    tokenChain.ecosystem === Ecosystem.SOLANA
+      ? token.address
+      : token.address.toLowerCase();
+  return !!bridgeTokensDictionary[tokenChain.chainId]?.[tokenAddress]?.[
+    dstChainId
+  ];
+};
+
 export const sortChains = (chains: Chain[], disabledChainIds: string[]) =>
   [...chains]
 

package/src/utils/tokens.ts

@@ -1,11 +1,30 @@
 import { Chain, Token } from "@src/models";
-import { isServer } from "@src/utils";
+import { isETHAddressValid, isServer } from "@src/utils";
 
 /**
  * Retrieves custom tokens from localStorage and adds them to the provided chains
  * @param chains - The original chains to which custom tokens should be added
  * @returns A new array of chains with custom tokens added
  */
+/**
+ * Lists tokens imported by the user (kept in localStorage) as chainId+address
+ * pairs, EVM only — the shape the balances endpoint accepts.
+ */
+export const getCustomTokenRefs = (): {
+  chainId: string;
+  tokenAddress: string;
+}[] => {
+  const customTokensObj = !isServer
+    ? JSON.parse(localStorage.getItem("custom-tokens") || "{}")
+    : {};
+
+  return Object.entries(customTokensObj).flatMap(([chainId, tokensObj]) =>
+    Object.keys(tokensObj as Record<string, Token>)
+      .filter((tokenAddress) => isETHAddressValid(tokenAddress))
+      .map((tokenAddress) => ({ chainId, tokenAddress })),
+  );
+};
+
 export const addCustomTokensToChains = (chains: Chain[]): Chain[] => {
   const customTokensObj = !isServer
     ? JSON.parse(localStorage.getItem("custom-tokens") || "{}")

package/tailwind.config.js

@@ -96,10 +96,13 @@ export default {
         x_modal: "var(--modal-width, 340px)",
       },
       width: {
+        // No fallback on purpose: unless the integrator sets --modal-width,
+        // the width resolves to `auto` so the widget can shrink on mobile.
+        // The default 620px cap comes from max-width below.
         x_modal: "var(--modal-width)",
       },
       maxWidth: {
-        x_modal: "var(--modal-width, 480px)",
+        x_modal: "var(--modal-width, 620px)",
       },
       animation: {
         "spin-slow": "spin 3s linear infinite",

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

@@ -1,97 +0,0 @@
-import { DotGreenIcon } from "@src/assets/icons";
-import { SwapPanelType } from "@src/components/Swap/SwapView";
-import { useSwapContext } from "@src/context";
-import useNetworks from "@src/hooks/networkManagement/useNetworks";
-import { Chain } from "@src/models";
-import { useMemo } from "react";
-
-type Props = {
-  chain: Chain;
-  type: SwapPanelType;
-  disabled: boolean;
-  onClick: (chainId: string) => void;
-};
-
-export const ChainItem = ({ chain, type, onClick, disabled }: Props) => {
-  const {
-    networks: { evm },
-  } = useNetworks();
-
-  const { srcChain, dstChain, bridgeUI } = useSwapContext();
-
-  const currentChainId = useMemo(
-    () => (type === "source" ? srcChain?.chainId : dstChain?.chainId),
-    [dstChain, srcChain, type],
-  );
-
-  const connected = useMemo(
-    () => evm.signer && evm.chainId === chain.chainId,
-    [chain.chainId, evm.chainId, evm.signer],
-  );
-
-  const sameChainId = useMemo(() => {
-    if (!bridgeUI) {
-      return undefined;
-    }
-
-    return type === "destination" ? srcChain?.chainId : dstChain?.chainId;
-  }, [bridgeUI, dstChain?.chainId, srcChain?.chainId, type]);
-
-  const getTooltipText = () => {
-    if (chain.chainId === sameChainId) {
-      return "Transfers between the same chains are not available";
-    }
-    if (disabled) {
-      return bridgeUI
-        ? "Token is not available on this chain"
-        : `Swap from ${
-            srcChain?.displayName || "the source chain"
-          } to this chain is currently not supported.`;
-    }
-    return "";
-  };
-
-  const tooltipText = getTooltipText();
-
-  return (
-    <div className="group relative">
-      <div
-        onClick={() => {
-          if (chain.chainId === sameChainId || disabled) {
-            return;
-          }
-          onClick(chain.chainId);
-        }}
-        className={`flex justify-between items-center gap-2 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 || disabled
-            ? "disabled-chain-item cursor-default"
-            : ""
-        }`}
-      >
-        <div className="flex gap-3 items-center w-full">
-          <img
-            src={chain.image}
-            alt={chain.name}
-            className="w-[34px] h-[34px]"
-          />
-          <p>{chain.displayName}</p>
-        </div>
-
-        {tooltipText && (
-          <div className="w-full text-center opacity-0 group-hover:opacity-100 text-xs transition-opacity duration-200">
-            {tooltipText}
-          </div>
-        )}
-
-        {connected && (
-          <div className="flex items-baseline gap-1">
-            <DotGreenIcon />
-            <div className="text-t_text_green">connected</div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};