@xswap-link/sdk 0.13.0 → 0.14.0

package/src/context/SwapProvider.tsx

@@ -117,7 +117,7 @@ type SwapContext = {
   isFetchingBalances: boolean;
   isExpressDeliveryActive: boolean;
   quoteRoute: () => Promise<void>;
-  refreshBalance: () => void;
+  refreshBalance: (options?: { forceRpc?: boolean }) => void;
   findTokenDataByAddressAndChain: (
     tokenAddress: string,
     chainId: string,
@@ -279,6 +279,7 @@ export const SwapProvider = ({
 
   const routeAbortController = useRef<AbortController | null>(null);
   const refreshSelectedTokenBalanceNonce = useRef(crypto.randomUUID());
+  const prevWalletAddresses = useRef<string | undefined>(undefined);
 
   // =============================================================================
   // Memoized Values
@@ -668,77 +669,96 @@ export const SwapProvider = ({
     srcValueWei,
   ]);
   // refreshes and updates the balance of the source token using its RPC URL.
-  const refreshBalance = useCallback(async () => {
-    if (
-      (!evmAddress && !solanaAddress) ||
-      !srcChain?.publicRpcUrls[0] ||
-      !srcToken ||
-      !srcToken?.address
-    ) {
-      return;
-    }
-
-    const nonce = crypto.randomUUID();
-    refreshSelectedTokenBalanceNonce.current = nonce;
-    setIsFetchingBalance(true);
-    let balance = "0";
-    if (srcChain?.ecosystem === Ecosystem.EVM && evmAddress) {
-      const balanceFromBackend =
-        tokenBalances[srcChain?.chainId]?.[srcToken.address];
-      if (balanceFromBackend === undefined) {
-        const balanceUI = await getBalanceOf(
-          evmAddress,
-          srcToken.address,
-          srcChain?.publicRpcUrls[0],
-        );
-        balance = humanReadableToWei({
-          amount: balanceUI,
-          decimals: srcToken.decimals,
-        });
-      } else {
-        balance = balanceFromBackend;
+  // pass { forceRpc: true } to skip the backend balances cache (e.g. right
+  // after a transaction, when the cached value is already stale).
+  const refreshBalance = useCallback(
+    async (options?: { forceRpc?: boolean }) => {
+      if (
+        (!evmAddress && !solanaAddress) ||
+        !srcChain?.publicRpcUrls[0] ||
+        !srcToken ||
+        !srcToken?.address
+      ) {
+        return;
       }
-    } 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 nonce = crypto.randomUUID();
+      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,
           });
-        const allTokenAccount = [
-          ...tokenAccounts.value,
-          ...token2022Accounts.value,
-        ];
-        const tokenAccount = allTokenAccount.find(
-          (account) =>
-            account.account.data.parsed.info.mint === srcToken.address,
-        );
-        if (!tokenAccount) {
-          balance = "0";
+          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 = tokenAccount.account.data.parsed.info.tokenAmount.amount;
+          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 {
+            balance = tokenAccount.account.data.parsed.info.tokenAmount.amount;
+          }
         }
       }
-    }
-    if (nonce !== refreshSelectedTokenBalanceNonce.current) {
-      return;
-    }
+      if (nonce !== refreshSelectedTokenBalanceNonce.current) {
+        return;
+      }
 
-    setSrcTokenBalanceWei(balance);
+      setSrcTokenBalanceWei(balance);
 
-    setIsFetchingBalance(false);
-  }, [evmAddress, solanaAddress, srcChain, srcToken, tokenBalances]);
+      setIsFetchingBalance(false);
+    },
+    [evmAddress, solanaAddress, srcChain, srcToken, tokenBalances],
+  );
   // retrieves token details for a given token address and chain from supported tokens mapping. (including imported tokens)
   const findTokenDataByAddressAndChain = useCallback(
     (tokenAddress: string, chainId: string): Token | undefined => {
@@ -801,9 +821,16 @@ 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.
   useEffect(() => {
-    refreshBalance();
-  }, [refreshBalance]);
+    const walletAddresses = `${evmAddress ?? ""}:${solanaAddress ?? ""}`;
+    const walletChanged =
+      prevWalletAddresses.current !== undefined &&
+      prevWalletAddresses.current !== walletAddresses;
+    prevWalletAddresses.current = walletAddresses;
+    refreshBalance(walletChanged ? { forceRpc: true } : undefined);
+  }, [refreshBalance, evmAddress, solanaAddress]);
   // fetches user all token balances when a wallet address is available and supported chains are loaded.
   useEffect(() => {
     let isCancelled = false;

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/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/utils/index.ts

@@ -77,6 +77,27 @@ 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);
+};
+
 export const sortChains = (chains: Chain[], disabledChainIds: string[]) =>
   [...chains]
 

package/tailwind.config.js

@@ -96,10 +96,10 @@ export default {
         x_modal: "var(--modal-width, 340px)",
       },
       width: {
-        x_modal: "var(--modal-width)",
+        x_modal: "var(--modal-width, 620px)",
       },
       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>
-  );
-};

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

@@ -1,103 +0,0 @@
-import { CloseIcon, SearchIcon } from "@src/assets/icons";
-import { useSwapContext } from "@src/context";
-import { useMemo, useState, useRef, useEffect } from "react";
-import { Virtuoso } from "react-virtuoso";
-import { SwapPanelType } from "../../../../SwapView";
-import { ChainItem } from "./ChainItem";
-import { TextInput } from "@src/components";
-
-type Props = {
-  type: SwapPanelType;
-  onClose: () => void;
-};
-
-export const ChainPicker = ({ type, onClose }: Props) => {
-  const { setSrcChain, setDstChain, srcChainOptions, dstChainOptions } =
-    useSwapContext();
-
-  const [searchValue, setSearchValue] = useState("");
-  const chainSearchRef = useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    if (chainSearchRef.current) {
-      setTimeout(() => {
-        chainSearchRef.current?.focus();
-      }, 10);
-    }
-  }, []);
-
-  // search input filtering
-  const filteredChains = useMemo(() => {
-    const chains = type === "source" ? srcChainOptions : dstChainOptions;
-    if (!searchValue) return chains;
-
-    return chains.filter((chain) => {
-      const searchLower = searchValue.toLowerCase();
-      return (
-        chain.displayName.toLowerCase().includes(searchLower) ||
-        chain.chainId.toLowerCase().includes(searchLower)
-      );
-    });
-  }, [type, srcChainOptions, dstChainOptions, searchValue]);
-
-  const select = (selectedChainId: string) => {
-    const chain = filteredChains.find(
-      ({ chainId }) => chainId === selectedChainId,
-    );
-
-    if (!chain) {
-      throw new Error(
-        `ChainPicker > selected chain id that is absent in chain options list.`,
-      );
-    }
-
-    type === "source" ? setSrcChain(chain) : setDstChain(chain);
-    onClose();
-  };
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="flex justify-between">
-        <div className="text-base/4 text-t_text_primary mb-4">{`Pick ${type} chain`}</div>
-        <div
-          className="w-4 h-4 fill-t_text_primary cursor-pointer"
-          onClick={onClose}
-        >
-          <CloseIcon />
-        </div>
-      </div>
-
-      <TextInput
-        ref={chainSearchRef}
-        inputIcon={
-          <div className="fill-t_text_primary">
-            <SearchIcon />
-          </div>
-        }
-        placeholder="Search chain name"
-        value={searchValue}
-        handleChange={setSearchValue}
-      />
-
-      <div className="horizontal-separator mt-4" />
-      <div className="h-full pt-4">
-        {filteredChains.length ? (
-          <Virtuoso
-            style={{ height: "100%" }}
-            data={filteredChains}
-            itemContent={(_, chain) => (
-              <ChainItem
-                chain={chain}
-                type={type}
-                disabled={chain.disabled}
-                onClick={select}
-              />
-            )}
-          />
-        ) : (
-          <div className="flex justify-center mt-4">No chain found.</div>
-        )}
-      </div>
-    </div>
-  );
-};

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

@@ -1,65 +0,0 @@
-import { ArrowDownIcon } from "@src/assets/icons";
-import { Modal } from "@src/components/Modal";
-import { useSwapContext } from "@src/context";
-import { Chain } from "@src/models";
-import { useMemo, useState } from "react";
-import { SwapPanelType } from "../../../SwapView";
-import { ChainPicker } from "./ChainPicker";
-
-type Props = {
-  chain: Chain | undefined;
-  type: SwapPanelType;
-  className?: string;
-};
-
-export const ChainPanel = ({ chain, type, className }: Props) => {
-  const { srcChainLocked, dstChainLocked } = useSwapContext();
-
-  const projectLockedDestinationChain = useMemo(
-    () => type === "destination" && dstChainLocked,
-    [type, dstChainLocked],
-  );
-
-  const projectLockedSourceChain = useMemo(
-    () => type === "source" && srcChainLocked,
-    [type, srcChainLocked],
-  );
-
-  const [chainPickerModalOpen, setChainPickerModalOpen] = useState(false);
-
-  return (
-    <>
-      {chainPickerModalOpen && (
-        <Modal onClose={() => setChainPickerModalOpen(false)}>
-          <ChainPicker
-            type={type}
-            onClose={() => setChainPickerModalOpen(false)}
-          />
-        </Modal>
-      )}
-
-      <button
-        type="button"
-        disabled={projectLockedDestinationChain || projectLockedSourceChain}
-        onClick={() => setChainPickerModalOpen(true)}
-        className={`${className || ""}`}
-      >
-        <div className="flex justify-between items-center p-4 gap-8">
-          <div className="flex flex-col font-medium items-start">
-            <p className="text-xs opacity-60">
-              {type === "source" ? "From:" : "To:"}
-            </p>
-            <p className={`${chain ? "" : "opacity-60"}`}>
-              {chain ? chain.displayName : "Select"}
-            </p>
-          </div>
-          {!projectLockedDestinationChain && !projectLockedSourceChain && (
-            <div className="w-4 h-2 fill-t_text_primary">
-              <ArrowDownIcon />
-            </div>
-          )}
-        </div>
-      </button>
-    </>
-  );
-};

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

@@ -1,43 +0,0 @@
-import { useSwapContext } from "@src/context";
-import { weiToHumanReadable } from "@src/utils";
-import { SwapPanelType } from "../../index";
-
-type Props = {
-  type: SwapPanelType;
-};
-export const MaxPanel = ({ type }: Props) => {
-  const { srcToken, srcTokenBalanceWei, srcTokenBalanceInfo, setSrcValue } =
-    useSwapContext();
-
-  return (
-    <button
-      type="button"
-      className={`flex items-center w-16 justify-center p-4 gap-8 ${
-        !srcTokenBalanceInfo && "opacity-60"
-      } ${
-        type === "source" &&
-        "border-l border-solid border-t_text_primary border-opacity-10"
-      }`}
-      disabled={!srcTokenBalanceInfo}
-      onClick={() =>
-        setSrcValue(
-          weiToHumanReadable({
-            amount: srcTokenBalanceWei,
-            decimals: srcToken?.decimals || 18,
-            precisionFractionalPlaces: srcToken?.decimals || 18,
-          }),
-        )
-      }
-    >
-      {type === "source" && (
-        <p
-          className={`border-b border-solid border-t_text_primary ${
-            !srcTokenBalanceInfo && "border-opacity-60"
-          }`}
-        >
-          Max
-        </p>
-      )}
-    </button>
-  );
-};

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

@@ -1,37 +0,0 @@
-import { TokenLogo } from "@src/components";
-import { TokenOption } from "@src/models";
-
-type Props = {
-  token: TokenOption;
-  selectedTokenAddress: string | undefined;
-  onClick: () => void;
-};
-export const QuickPickTokenItem = ({
-  token,
-  selectedTokenAddress,
-  onClick,
-}: Props) => {
-  return (
-    <button
-      type="button"
-      className={`flex gap-2 py-2 pr-[14px] pl-2 items-center border border-solid border-t_text_primary border-opacity-10 rounded-3xl text-start hover:bg-t_bg_tertiary hover:bg-opacity-10 ${
-        token.address.toLowerCase() === selectedTokenAddress?.toLowerCase()
-          ? "bg-t_bg_tertiary bg-opacity-10"
-          : "bg-t_bg_primary"
-      }`}
-      onClick={onClick}
-    >
-      <TokenLogo
-        token={token}
-        className="w-6 h-6"
-        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.name}</div>
-        <div className="text-t_text_primary text-opacity-50">
-          {token.symbol}
-        </div>
-      </div>
-    </button>
-  );
-};