@xswap-link/sdk 0.10.5 → 0.10.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.10.5",
+  "version": "0.10.7",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {
@@ -29,23 +29,34 @@
     }
   },
   "dependencies": {
+    "@coral-xyz/anchor": "^0.29.0",
     "@ethersproject/providers": "^5.7.2",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@r2wc/core": "^1.1.0",
+    "@solana/spl-token": "^0.4.13",
+    "@solana/wallet-adapter-react": "^0.15.35",
+    "@solana/wallet-adapter-wallets": "^0.19.32",
+    "@solana/web3.js": "^1.98.0",
     "@tanstack/react-query": "^5.64.2",
     "@wagmi/connectors": "^5.7.5",
     "@wagmi/core": "^2.16.3",
     "async-retry": "^1.3.3",
     "bignumber.js": "4.0.4",
+    "crypto": "npm:crypto-browserify@latest",
     "date-fns": "^3.6.0",
     "ethers": "5.7.2",
+    "http": "npm:http-browserify@latest",
+    "https": "npm:https-browserify@latest",
     "notistack": "^3.0.1",
     "react-error-boundary": "^4.1.0",
     "react-virtuoso": "^4.7.12",
-    "viem": "~2.22.12",
+    "stream": "npm:stream-browserify@latest",
+    "url": "npm:url-browserify@latest",
+    "zlib": "npm:zlib-browserify@latest",
+    "viem": "~2.29.1",
     "wagmi": "^2.14.9"
   },
   "devDependencies": {

package/src/assets/icons/StarsIcon.tsx

@@ -0,0 +1,18 @@
+export const StarsIcon = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5.89761 2.45159L5.12155 4.38335C4.92404 4.875 4.56316 5.26745 4.11108 5.48225L2.33478 6.32623L4.11108 7.17021C4.56316 7.38501 4.92404 7.77746 5.12155 8.26911L5.89761 10.2009L6.67367 8.26911C6.87118 7.77746 7.23206 7.38501 7.68414 7.17021L9.46044 6.32623L7.68414 5.48225C7.23206 5.26745 6.87118 4.875 6.67367 4.38335L5.89761 2.45159ZM11.6352 7.3349C11.4478 7.35272 11.2681 7.47472 11.1863 7.70089L10.5417 9.48369C10.4927 9.61935 10.3985 9.72999 10.2779 9.79365L8.66756 10.6438C8.26644 10.8556 8.26644 11.477 8.66756 11.6888L10.2779 12.539C10.3985 12.6026 10.4927 12.7133 10.5417 12.8489L11.1863 14.6317C11.3639 15.1228 12.0028 15.1228 12.1804 14.6317L12.825 12.8489C12.874 12.7133 12.9682 12.6026 13.0888 12.539L14.6992 11.6888C15.1003 11.477 15.1003 10.8556 14.6992 10.6438L13.0888 9.79365C12.9682 9.72999 12.874 9.61935 12.825 9.48369L12.1804 7.70089C12.0846 7.43603 11.8546 7.31403 11.6352 7.3349ZM8.11177 8.23467C7.90628 8.33231 7.74225 8.51069 7.65247 8.73417L6.71328 11.072C6.40235 11.8459 5.39287 11.846 5.08194 11.072L4.14275 8.73417C4.05297 8.51069 3.88894 8.33231 3.68344 8.23467L1.53375 7.21328C0.822083 6.87514 0.822082 5.77732 1.53375 5.43918L3.68344 4.41779C3.88894 4.32015 4.05297 4.14177 4.14275 3.91829L5.08194 1.58047C5.39287 0.806512 6.40235 0.806511 6.71328 1.58047L7.65247 3.91829C7.74225 4.14177 7.90628 4.32015 8.11177 4.41779L10.2615 5.43918C10.6624 5.6297 10.8375 6.06138 10.7866 6.46247C10.7472 6.77325 10.5722 7.06566 10.2615 7.21328L8.11177 8.23467ZM11.6834 9.50062L11.5358 9.90876C11.3886 10.3157 11.1062 10.6477 10.7444 10.8386L10.1237 11.1663L10.7444 11.494C11.1062 11.6849 11.3886 12.0169 11.5358 12.4239L11.6834 12.832L11.8309 12.4239C11.9781 12.0169 12.2606 11.6849 12.6223 11.494L13.243 11.1663L12.6223 10.8386C12.2606 10.6477 11.9781 10.3157 11.8309 9.90876L11.6834 9.50062Z"
+        fill="white"
+      ></path>
+    </svg>
+  );
+};

package/src/assets/icons/index.ts

@@ -41,3 +41,4 @@ export * from "./XMarkIcon";
 export * from "./XPowerIcon";
 export * from "./XSwapBadgeIcon";
 export * from "./XSwapLogo";
+export * from "./StarsIcon";

package/src/components/AllWalletsConfig/index.tsx

@@ -0,0 +1,40 @@
+import {
+  ConnectionProvider,
+  WalletProvider as SolanaWalletProvider,
+} from "@solana/wallet-adapter-react";
+import {
+  PhantomWalletAdapter,
+  SolflareWalletAdapter,
+} from "@solana/wallet-adapter-wallets";
+import { clusterApiUrl } from "@solana/web3.js";
+import { SolanaWeb3Network } from "@src/models";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactNode, useMemo } from "react";
+import { Config, WagmiProvider } from "wagmi";
+
+const queryClient = new QueryClient();
+
+export const AllWalletsConfig = ({
+  wagmiConfig,
+  children,
+}: {
+  wagmiConfig: Config;
+  children: ReactNode;
+}) => {
+  const solanaEndpoint = clusterApiUrl(SolanaWeb3Network.MAINNET);
+  const solanaWallets = useMemo(
+    () => [new PhantomWalletAdapter(), new SolflareWalletAdapter()],
+    [],
+  );
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <ConnectionProvider endpoint={solanaEndpoint}>
+          <SolanaWalletProvider wallets={solanaWallets} autoConnect>
+            {children}
+          </SolanaWalletProvider>
+        </ConnectionProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+};

package/src/components/Swap/HistoryView/index.tsx

@@ -1,14 +1,32 @@
 import { Spinner, TxDataCard } from "@src/components";
 import { useHistory } from "@src/context";
+import { useWallet } from "@src/context/WalletProvider";
 import { useMemo } from "react";
 import { Virtuoso } from "react-virtuoso";
 
 export const HistoryView = () => {
-  const { history, historyLoadedOnce } = useHistory();
+  const { history, historyLoadedOnce, solanaHistory, solanaHistoryLoadedOnce } =
+    useHistory();
+  const {
+    solana: { address: solanaAddress },
+  } = useWallet();
+
+  const unifiedHistory = useMemo(() => {
+    const combinedHistory = [
+      ...history,
+      ...(solanaAddress ? solanaHistory : []),
+    ];
+    return combinedHistory.sort((a, b) => {
+      return b.timestamp - a.timestamp;
+    });
+  }, [history, solanaHistory, solanaAddress]);
 
   const view = useMemo(() => {
-    if (!history || history.length === 0) {
-      return historyLoadedOnce ? (
+    if (!unifiedHistory || unifiedHistory.length === 0) {
+      const isHistoryLoaded =
+        historyLoadedOnce && (solanaAddress ? solanaHistoryLoadedOnce : true);
+
+      return isHistoryLoaded ? (
         <div className="text-center py-4 text-[#9e9e9e]">
           Your history is empty
         </div>
@@ -21,14 +39,19 @@ export const HistoryView = () => {
 
     return (
       <Virtuoso
-        data={history}
+        data={unifiedHistory}
         style={{ height: "532px" }}
         itemContent={(_, transaction) => {
           return <TxDataCard transaction={transaction} />;
         }}
       />
     );
-  }, [history, historyLoadedOnce]);
+  }, [
+    historyLoadedOnce,
+    solanaHistoryLoadedOnce,
+    unifiedHistory,
+    solanaAddress,
+  ]);
 
   return <div className="flex-1 overflow-hidden">{view}</div>;
 };

package/src/components/Swap/SwapView/ConfirmationView/TxOverview/index.tsx

@@ -20,6 +20,8 @@ import { ArrowIcon } from "./ArrowIcon";
 import { Header } from "./Header";
 import { Steps } from "./Steps";
 import { SwapPanel } from "./SwapPanel";
+import { useWallet } from "@solana/wallet-adapter-react";
+import { VersionedTransaction } from "@solana/web3.js";
 
 type Props = {
   onCloseClick: () => void;
@@ -54,7 +56,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
       evm: { signer },
     },
   } = useNetworks();
-
+  const wallet = useWallet();
   const evmContractApi = useEvmContractApi();
 
   const trackTransaction = useCallback(
@@ -120,8 +122,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
             transactionData.messageId = messageId;
 
             const xSwapRouterOnDestination = new ethers.Contract(
-              // @ts-ignore
-              ADDRESSES[dstChain?.chainId]?.[contractKey],
+              ADDRESSES[dstChain!.chainId]![contractKey]!,
               contractKey === "XSwapRouter"
                 ? XSwapRouterAbi
                 : CustomXSwapRouterAbi,
@@ -186,64 +187,88 @@ export const TxOverview = ({ onCloseClick }: Props) => {
 
   const enqueueSwapTx = useCallback(async () => {
     if (srcToken && route) {
-      const enqueueSwap = () => {
+      if (route.ecosystem === Ecosystem.EVM) {
+        const enqueueSwap = () => {
+          enqueueTransaction({
+            executeTransaction: () => {
+              if (!route.transactions.swap || !signer) {
+                return;
+              }
+
+              return evmContractApi.executeCalldata(
+                signer,
+                route.transactions.swap,
+              );
+            },
+            txStatus: TxStatus.SIGNING_TX,
+            handlers: {
+              onSuccess: (data) => {
+                setTxStatus(TxStatus.COMPLETED);
+                refreshBalance();
+                trackTransaction(data);
+                if (
+                  srcChain?.chainId &&
+                  dstChain?.chainId &&
+                  srcChain?.chainId !== dstChain?.chainId
+                ) {
+                  renderTxStatus(
+                    srcChain?.chainId,
+                    data.transactionHash,
+                    dstToken?.address,
+                    dstValueWei,
+                  );
+                }
+              },
+            },
+          });
+        };
+
+        if (
+          srcToken.address !== constants.AddressZero &&
+          route.transactions.approve
+        ) {
+          setTxNeedsApproval(true);
+          enqueueTransaction({
+            executeTransaction: () => {
+              if (!route.transactions.approve || !signer) {
+                return;
+              }
+              return evmContractApi.executeCalldata(
+                signer,
+                route.transactions.approve,
+              );
+            },
+            txStatus: TxStatus.SIGNING_APPROVAL,
+            handlers: {
+              onSuccess: () => enqueueSwap(),
+            },
+          });
+        } else {
+          setTxNeedsApproval(false);
+          enqueueSwap();
+        }
+      } else if (route.ecosystem === Ecosystem.SOLANA) {
         enqueueTransaction({
           executeTransaction: () => {
-            if (!route.transactions.swap || !signer) {
+            if (!route.swapTransaction || !wallet) {
               return;
             }
 
-            return evmContractApi.executeCalldata(
-              signer,
-              route.transactions.swap,
+            const transaction = VersionedTransaction.deserialize(
+              Buffer.from(route.swapTransaction, "base64"),
             );
+
+            return wallet.signTransaction?.(transaction);
           },
           txStatus: TxStatus.SIGNING_TX,
           handlers: {
-            onSuccess: (data) => {
+            onSuccess: () => {
               setTxStatus(TxStatus.COMPLETED);
               refreshBalance();
-              trackTransaction(data);
-              if (
-                srcChain?.chainId &&
-                dstChain?.chainId &&
-                srcChain?.chainId !== dstChain?.chainId
-              ) {
-                renderTxStatus(
-                  srcChain?.chainId,
-                  data.transactionHash,
-                  dstToken?.address,
-                  dstValueWei,
-                );
-              }
             },
           },
+          network: Ecosystem.SOLANA,
         });
-      };
-
-      if (
-        srcToken.address !== constants.AddressZero &&
-        route.transactions.approve
-      ) {
-        setTxNeedsApproval(true);
-        enqueueTransaction({
-          executeTransaction: () => {
-            if (!route.transactions.approve || !signer) {
-              return;
-            }
-            return evmContractApi.executeCalldata(
-              signer,
-              route.transactions.approve,
-            );
-          },
-          txStatus: TxStatus.SIGNING_APPROVAL,
-          handlers: {
-            onSuccess: () => enqueueSwap(),
-          },
-        });
-      } else {
-        setTxNeedsApproval(false);
-        enqueueSwap();
       }
     }
   }, [
@@ -260,6 +285,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
     dstToken?.address,
     dstValueWei,
     setTxNeedsApproval,
+    wallet,
   ]);
 
   return (

package/src/components/Swap/SwapView/SwapButton/index.tsx

@@ -1,10 +1,11 @@
 import { Modal } from "@src/components/Modal";
 import { useSwapContext, useTxUIWrapper } from "@src/context";
+import { useWallet } from "@src/context/WalletProvider";
 import { ADDRESSES } from "@src/contracts";
 import { specialApprovalTokens } from "@src/contracts/specialApprovalTokens";
 import useNetworks from "@src/hooks/networkManagement/useNetworks";
 import { useERC20Token } from "@src/hooks/useERC20Token";
-import { TxStatus } from "@src/models";
+import { Ecosystem, TxStatus } from "@src/models";
 import { safeBigNumberFrom } from "@src/utils";
 import { BigNumber } from "ethers";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -20,7 +21,6 @@ type Button = {
 export const SwapButton = () => {
   const { address, chainId } = useAccount();
   const { switchChainAsync } = useSwitchChain();
-  const [connectWalletModalOpen, setConnectWalletModalOpen] = useState(false);
   const { integrationConfig } = useSwapContext();
 
   const {
@@ -52,6 +52,14 @@ export const SwapButton = () => {
     networks: { evm },
   } = useNetworks();
 
+  const {
+    openEVMWalletModal,
+    setOpenEVMWalletModal,
+    openSolanaWalletModal,
+    setOpenSolanaWalletModal,
+    solana,
+  } = useWallet();
+
   const { allowance, approve } = useERC20Token({
     rpcChainId: srcChainId,
     currentChainId: evm.chainId,
@@ -111,7 +119,7 @@ export const SwapButton = () => {
       };
     }
 
-    if (!address) {
+    if (srcChain?.ecosystem !== Ecosystem.SOLANA && !address) {
       return {
         text:
           integrationConfig.defaultWalletPicker || hasOnConnectWalletCallback
@@ -119,7 +127,7 @@ export const SwapButton = () => {
             : "Connect Wallet First",
         fn: () => {
           if (integrationConfig.defaultWalletPicker) {
-            setConnectWalletModalOpen(true);
+            setOpenEVMWalletModal(true);
           } else if (hasOnConnectWalletCallback) {
             onConnectWallet();
           }
@@ -147,8 +155,19 @@ export const SwapButton = () => {
         disabled: true,
       };
     }
-
-    if (chainId?.toString() !== srcChainId) {
+    if (srcChain?.ecosystem === Ecosystem.SOLANA && !solana.address) {
+      return {
+        text: "Connect Solana Wallet",
+        fn: () => {
+          setOpenSolanaWalletModal(true);
+        },
+        disabled: false,
+      };
+    }
+    if (
+      srcChain?.ecosystem !== Ecosystem.SOLANA &&
+      chainId?.toString() !== srcChainId
+    ) {
       return {
         text: "Change Chain",
         fn: async () => await switchChainAsync({ chainId: Number(srcChainId) }),
@@ -218,11 +237,13 @@ export const SwapButton = () => {
   }, [
     isAsyncDataLoaded,
     error,
+    srcChain?.ecosystem,
     address,
     srcChainId,
     dstChainId,
     srcTokenAddress,
     dstTokenAddress,
+    solana.address,
     chainId,
     srcValueWei,
     srcTokenBalanceWei,
@@ -230,6 +251,10 @@ export const SwapButton = () => {
     currentTokenAllowance,
     bridgeUI,
     integrationConfig.defaultWalletPicker,
+    hasOnConnectWalletCallback,
+    setOpenEVMWalletModal,
+    onConnectWallet,
+    setOpenSolanaWalletModal,
     switchChainAsync,
     enqueueTransaction,
     approve,
@@ -241,12 +266,22 @@ export const SwapButton = () => {
 
   return (
     <>
-      {connectWalletModalOpen && (
-        <Modal onClose={() => setConnectWalletModalOpen(false)}>
-          <WalletPicker onClose={() => setConnectWalletModalOpen(false)} />
+      {openEVMWalletModal && (
+        <Modal onClose={() => setOpenEVMWalletModal(false)}>
+          <WalletPicker
+            ecosystem={Ecosystem.EVM}
+            onClose={() => setOpenEVMWalletModal(false)}
+          />
+        </Modal>
+      )}
+      {openSolanaWalletModal && (
+        <Modal onClose={() => setOpenSolanaWalletModal(false)}>
+          <WalletPicker
+            ecosystem={Ecosystem.SOLANA}
+            onClose={() => setOpenSolanaWalletModal(false)}
+          />
         </Modal>
       )}
-
       <button
         type="button"
         disabled={button.disabled}

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

@@ -1,4 +1,6 @@
+import { StarsIcon } from "@src/assets/icons";
 import { Skeleton, TokenLogoWithChain } from "@src/components";
+import { SwapPanelType } from "@src/components/Swap/SwapView";
 import { useSwapContext } from "@src/context";
 import { TokenOption } from "@src/models";
 import { weiToHumanReadable } from "@src/utils";
@@ -11,14 +13,21 @@ type Props = {
   selectedTokenAddress: string | undefined;
   selectedChainId: string | undefined;
   onClick: () => void;
+  panelType: SwapPanelType;
 };
 export const TokenItem = ({
   token,
   selectedTokenAddress,
   onClick,
   selectedChainId,
+  panelType,
 }: Props) => {
-  const { supportedChains, tokenPrices, isFetchingBalances } = useSwapContext();
+  const {
+    supportedChains,
+    tokenPrices,
+    isFetchingBalances,
+    integrationConfig,
+  } = useSwapContext();
   const { address } = useAccount();
 
   const chain = useMemo(
@@ -66,8 +75,17 @@ export const TokenItem = ({
       />
       <div className="flex justify-between items-center gap-1 w-full">
         <div className="text-left">
-          <div className="text-sm font-medium text-ellipsis text-t_text_primary">
+          <div className="text-sm font-medium text-ellipsis text-t_text_primary flex items-center gap-1">
             {token.name}
+            {integrationConfig?.highlightedDstTokens?.includes(token.symbol) &&
+              panelType === "destination" && (
+                <div
+                  className={`flex items-center justify-center text-white rounded-full border-t_bg_secondary ${"w-3.5 h-3.5 text-xs"}`}
+                  title="AI-powered token"
+                >
+                  <StarsIcon />
+                </div>
+              )}
           </div>
           <div className="text-xs text-t_text_primary text-opacity-50 font-medium">
             {token.symbol}

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

@@ -13,13 +13,20 @@ import { useSwapContext } from "@src/context";
 import { ERC20Abi } from "@src/contracts";
 import { useEvmContractApi } from "@src/hooks";
 import { Chain, Ecosystem, ImportedTokenData, TokenOption } from "@src/models";
-import { isETHAddressValid, isServer, shortAddress } from "@src/utils";
+import {
+  isETHAddressValid,
+  isServer,
+  isSolanaAddressValid,
+  shortAddress,
+} from "@src/utils";
 import { BigNumber, ethers } from "ethers";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { GroupedVirtuoso } from "react-virtuoso";
 import { QuickPickTokenItem } from "./QuickPickTokenItem";
 import { TokenItem } from "./TokenItem";
 import { useAccount } from "wagmi";
+import { Connection, PublicKey } from "@solana/web3.js";
+import { METADATA_PROGRAM_ID } from "@src/constants";
 
 type Props = {
   type: SwapPanelType;
@@ -67,7 +74,11 @@ export const TokenPicker = ({
   }, [isOpen]);
 
   const importCustomToken = useCallback(() => {
-    if (chain && customTokenData && isETHAddressValid(searchValue)) {
+    if (
+      chain &&
+      customTokenData &&
+      (isETHAddressValid(searchValue) || isSolanaAddressValid(searchValue))
+    ) {
       let customTokens = {};
       if (!isServer) {
         customTokens = JSON.parse(
@@ -145,14 +156,121 @@ export const TokenPicker = ({
     }
   }, [chain, searchValue, evmContractApi, supportedChains]);
 
+  const getCustomSolanaTokenData = useCallback(async () => {
+    const nonce = Date.now();
+    currentRouteRequestNonce.current = nonce;
+
+    const rpcUrl = supportedChains.find(
+      ({ ecosystem, chainId }) =>
+        ecosystem === Ecosystem.SOLANA && chainId === chain?.chainId,
+    )?.publicRpcUrls[0];
+
+    if (!rpcUrl || !searchValue || !isSolanaAddressValid(searchValue)) {
+      setCustomTokenData(null);
+      setLoadingCustomTokenData(false);
+      return;
+    }
+
+    setLoadingCustomTokenData(true);
+
+    try {
+      const connection = new Connection(rpcUrl, "confirmed");
+      const mintPublicKey = new PublicKey(searchValue);
+      const mintInfo = await connection.getParsedAccountInfo(mintPublicKey);
+
+      if (
+        !mintInfo?.value?.data ||
+        !("parsed" in mintInfo.value.data) ||
+        mintInfo.value.data.program !== "spl-token"
+      ) {
+        setCustomTokenData(null);
+        return;
+      }
+      const decimals = mintInfo.value.data.parsed.info.decimals;
+
+      if (nonce !== currentRouteRequestNonce.current) {
+        return;
+      }
+
+      const TOKEN_METADATA_PROGRAM_ID = new PublicKey(METADATA_PROGRAM_ID);
+
+      const [metadataPDA] = PublicKey.findProgramAddressSync(
+        [
+          Buffer.from("metadata"),
+          TOKEN_METADATA_PROGRAM_ID.toBuffer(),
+          mintPublicKey.toBuffer(),
+        ],
+        TOKEN_METADATA_PROGRAM_ID,
+      );
+
+      const metadataAccount = await connection.getAccountInfo(metadataPDA);
+
+      if (!metadataAccount) {
+        throw new Error("Metadata account not found");
+      }
+
+      const data = Buffer.from(metadataAccount.data);
+
+      // First byte is key (always 4 for Metadata), then comes actual data
+      let offset = 1;
+
+      // Read update authority - 32 bytes
+      offset += 32;
+
+      // Read mint - 32 bytes
+      offset += 32;
+
+      // Read name
+      const nameLen = Math.min(data.readUInt32LE(offset), 32); // Max name length is 32
+      offset += 4;
+      const name = data
+        .slice(offset, offset + nameLen)
+        .toString("utf8")
+        .replace(/\0/g, "");
+      offset += 32; // Name field is always 32 bytes, padded with nulls
+
+      // Read symbol
+      const symbolLen = Math.min(data.readUInt32LE(offset), 10); // Max symbol length is 10
+      offset += 4;
+      const symbol = data
+        .slice(offset, offset + symbolLen)
+        .toString("utf8")
+        .replace(/\0/g, "");
+
+      setCustomTokenData({
+        address: searchValue,
+        name:
+          name || `Token ${searchValue.slice(0, 4)}...${searchValue.slice(-4)}`,
+        symbol: symbol || searchValue.slice(0, 4),
+        decimals,
+      });
+    } catch (error) {
+      console.error("Error fetching Solana token data:", error);
+      setCustomTokenData(null);
+    } finally {
+      if (nonce === currentRouteRequestNonce.current) {
+        setLoadingCustomTokenData(false);
+      }
+    }
+  }, [chain, searchValue, supportedChains]);
+
   useEffect(() => {
     if (
       !bridgeUI &&
-      isETHAddressValid(searchValue) &&
       chain &&
       !findTokenDataByAddressAndChain(searchValue.toLowerCase(), chain.chainId)
     ) {
-      getCustomTokenData();
+      if (chain.ecosystem === Ecosystem.EVM && isETHAddressValid(searchValue)) {
+        getCustomTokenData();
+      } else if (
+        chain.ecosystem === Ecosystem.SOLANA &&
+        isSolanaAddressValid(searchValue)
+      ) {
+        getCustomSolanaTokenData();
+      } else {
+        setLoadingCustomTokenData(false);
+        setCustomTokenData(null);
+      }
     } else {
       setLoadingCustomTokenData(false);
       setCustomTokenData(null);
@@ -161,6 +279,7 @@ export const TokenPicker = ({
     bridgeUI,
     searchValue,
     getCustomTokenData,
+    getCustomSolanaTokenData,
     findTokenDataByAddressAndChain,
     chain,
   ]);
@@ -518,6 +637,7 @@ export const TokenPicker = ({
                     return (
                       allTokens[index] && (
                         <TokenItem
+                          panelType={type}
                           token={allTokens[index]}
                           selectedChainId={chain?.chainId}
                           selectedTokenAddress={selectedTokenAddress}