feat: improve select wallet chain list and available tokens based on selected

Author: akbarsaputrait

packages/connectkit/bundle-analysis.html

@@ -1,7 +1,7 @@
 {
   "name": "@rozoai/intent-pay",
   "private": false,
-  "version": "0.1.5-beta.2",
+  "version": "0.1.5-beta.3",
   "author": "RozoAI",
   "homepage": "https://github.com/RozoAI/intent-pay",
   "license": "BSD-2-Clause",
@@ -47,7 +47,7 @@
     "@albedo-link/intent": "^0.13.0",
     "@reown/appkit": "^1.7.0",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@rozoai/intent-common": "workspace:*",
+    "@rozoai/intent-common": "0.1.6-beta.2",
     "@solana/spl-token": "^0.4.14",
     "@solana/wallet-adapter-base": "^0.9.27",
     "@solana/wallet-adapter-react": "^0.15.39",

packages/connectkit/package.json

@@ -83,6 +83,7 @@ export const RozoPayModal: React.FC<{
     setSelectedStellarTokenOption,
     setSelectedDepositAddressOption,
     setSelectedWallet,
+    setSelectedChainId,
   } = paymentState;
   const { paymentState: paymentFsmState } = useRozoPay();
 
@@ -322,17 +323,34 @@ export const RozoPayModal: React.FC<{
     ) {
       if (isEthConnected) {
         paymentState.setTokenMode("evm");
+        // Preserve chainId from routeMeta if it exists (from SelectWalletChain),
+        // otherwise use the current chain ID
+        const chainId = context.routeMeta?.chainId ?? chain?.id;
         context.setRoute(ROUTES.SELECT_TOKEN, {
           event: "connected",
           walletId: connector?.id,
-          chainId: chain?.id,
+          chainId,
           address,
         });
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isEthConnected, context.route, connector?.id, chain?.id, address]);
 
+  // Extract chainId from routeMeta when navigating to SELECT_TOKEN
+  useEffect(() => {
+    if (context.route === ROUTES.SELECT_TOKEN && context.routeMeta?.chainId) {
+      const chainId = context.routeMeta.chainId as number;
+      setSelectedChainId(chainId);
+    } else if (
+      context.route !== ROUTES.SELECT_TOKEN &&
+      context.route !== ROUTES.SELECT_WALLET_CHAIN
+    ) {
+      // Clear selectedChainId when leaving SELECT_TOKEN or SELECT_WALLET_CHAIN
+      setSelectedChainId(undefined);
+    }
+  }, [context.route, context.routeMeta, setSelectedChainId]);
+
   useEffect(() => setMode(mode), [mode, setMode]);
   useEffect(() => setTheme(theme), [theme, setTheme]);
   useEffect(() => setCustomTheme(customTheme), [customTheme, setCustomTheme]);

packages/connectkit/src/components/DaimoPayModal/index.tsx

@@ -107,16 +107,18 @@ export default function SelectToken() {
         show={effectiveTokenMode}
         excludeLogos={["stellar"]}
       />
-      <OptionsList
-        requiredSkeletons={3}
-        isLoading={isLoading}
-        options={optionsList}
-        scrollHeight={
-          isAnotherMethodButtonVisible && isMobileFormat ? 225 : 300
-        }
-        orDivider={isAnotherMethodButtonVisible}
-        hideBottomLine={!isAnotherMethodButtonVisible}
-      />
+      {(optionsList.length > 0 || isLoading) && (
+        <OptionsList
+          requiredSkeletons={3}
+          isLoading={isLoading}
+          options={optionsList}
+          scrollHeight={
+            isAnotherMethodButtonVisible && isMobileFormat ? 225 : 300
+          }
+          orDivider={isAnotherMethodButtonVisible}
+          hideBottomLine={!isAnotherMethodButtonVisible}
+        />
+      )}
       {showInsufficientBalance && !noConnectedWallet && (
         <InsufficientBalance onRefresh={refreshOptions} />
       )}
@@ -179,7 +181,6 @@ function InsufficientBalance({
       >
         {isRefreshing ? "Refreshing..." : "Refresh Balance"}
       </Button>
-      <SelectAnotherMethodButton />
     </ModalContent>
   );
 }

packages/connectkit/src/components/Pages/SelectToken/index.tsx

@@ -1,4 +1,13 @@
-import React from "react";
+import {
+  base,
+  bsc,
+  Chain,
+  ethereum,
+  polygon,
+  rozoSolana,
+  supportedTokens,
+} from "@rozoai/intent-common";
+import React, { useCallback, useMemo } from "react";
 import { usePayContext } from "../../../hooks/usePayContext";
 
 import { ModalContent, PageContent } from "../../Common/Modal/styles";
@@ -21,53 +30,91 @@ const SelectWalletChain: React.FC = () => {
     usePayContext();
   const { selectedWallet } = paymentState;
 
-  if (selectedWallet == null) {
-    return <PageContent></PageContent>;
-  }
+  // Get available chain IDs from supportedTokens (must be called before early returns)
+  const availableChainIds = useMemo(
+    () => new Set(Array.from(supportedTokens.keys())),
+    []
+  );
 
   // Narrow the wallet type to include solanaConnectorName.
-  const wallet = selectedWallet as WalletProps;
+  const wallet = selectedWallet as WalletProps | undefined;
 
-  // If wallet only supports one chain, skip this page (fallback safety)
-  if (!wallet.solanaConnectorName) {
+  // Define chain options with their icons (must be called before early returns)
+  const chainConfigs = useMemo(
+    () => [
+      {
+        chain: ethereum,
+        icon: <Ethereum key="ethereum" />,
+        supported: availableChainIds.has(ethereum.chainId),
+      },
+      {
+        chain: base,
+        icon: <Base key="base" />,
+        supported: availableChainIds.has(base.chainId),
+      },
+      {
+        chain: polygon,
+        icon: <Polygon key="polygon" />,
+        supported: availableChainIds.has(polygon.chainId),
+      },
+      {
+        chain: bsc,
+        icon: <BinanceSmartChain key="bnb" />,
+        // Phantom doesn't support BSC, so we don't show it for Phantom
+        supported:
+          availableChainIds.has(bsc.chainId) && wallet?.id !== "app.phantom",
+      },
+      {
+        chain: rozoSolana,
+        icon: <Solana key="solana" />,
+        supported: availableChainIds.has(rozoSolana.chainId),
+      },
+    ],
+    [availableChainIds, wallet?.id]
+  );
+
+  // Filter to only supported chains
+  const supportedChains = useMemo(
+    () => chainConfigs.filter((config) => config.supported),
+    [chainConfigs]
+  );
+
+  // Handle chain selection
+  const handleSelect = useCallback(
+    (chain: Chain) => {
+      if (!wallet) return;
+      if (chain.type === "evm") {
+        setPendingConnectorId(wallet.id);
+        setRoute(ROUTES.CONNECT, { chainId: chain.chainId });
+      } else if (chain.type === "solana") {
+        setSolanaConnector(wallet.solanaConnectorName);
+        setRoute(ROUTES.SOLANA_CONNECTOR, { chainId: chain.chainId });
+      }
+    },
+    [wallet, setPendingConnectorId, setRoute, setSolanaConnector]
+  );
+
+  const options = useMemo(
+    () =>
+      supportedChains.map((config) => ({
+        id: `chain-${config.chain.chainId}`,
+        title: config.chain.name,
+        icons: [config.icon],
+        iconsPosition: "left" as const,
+        onClick: () => handleSelect(config.chain),
+      })),
+    [supportedChains, handleSelect]
+  );
+
+  if (selectedWallet == null) {
     return <PageContent></PageContent>;
   }
 
-  function handleSelect(chain: "evm" | "solana") {
-    if (chain === "evm") {
-      setPendingConnectorId(wallet.id);
-      setRoute(ROUTES.CONNECT);
-    } else {
-      setSolanaConnector(wallet.solanaConnectorName);
-      setRoute(ROUTES.SOLANA_CONNECTOR);
-    }
+  // If wallet only supports one chain, skip this page (fallback safety)
+  if (!wallet || !wallet.solanaConnectorName) {
+    return <PageContent></PageContent>;
   }
 
-  const options = [
-    {
-      id: "ethereum",
-      title: "Ethereum",
-      icons: [<Ethereum key="ethereum" />],
-      rightIcons: [
-        <Base key="base" />,
-        <Polygon key="polygon" />,
-        // Phantom doesn't support BSC, so we don't show it for Phantom
-        ...(wallet.id !== "app.phantom"
-          ? [<BinanceSmartChain key="bnb" />]
-          : []),
-      ],
-      iconsPosition: "left" as const,
-      onClick: () => handleSelect("evm"),
-    },
-    {
-      id: "solana",
-      title: "Solana",
-      icons: [<Solana key="solana" />],
-      iconsPosition: "left" as const,
-      onClick: () => handleSelect("solana"),
-    },
-  ];
-
   return (
     <PageContent>
       <WalletPaymentSpinner

packages/connectkit/src/components/Pages/SelectWalletChain/index.tsx

@@ -19,7 +19,8 @@ const ConnectSolana: React.FC = () => {
   const solanaWallets = useWallet();
   const isConnected = solanaWallets.connected;
 
-  const { solanaConnector, setRoute, paymentState } = usePayContext();
+  const { solanaConnector, setRoute, paymentState, routeMeta } =
+    usePayContext();
   const { setTokenMode } = paymentState;
 
   const selectedWallet = solanaWallets.wallets.find(
@@ -65,6 +66,8 @@ const ConnectSolana: React.FC = () => {
     const meta = {
       event: "wait-solana-connected",
       walletName: solanaWallets.wallet?.adapter.name,
+      // Preserve chainId from routeMeta if it exists
+      ...(routeMeta?.chainId && { chainId: routeMeta.chainId }),
     };
     setTimeout(() => {
       setTokenMode("solana");

packages/connectkit/src/components/Pages/Solana/ConnectorSolana/index.tsx

@@ -142,6 +142,8 @@ export interface PaymentState {
   setPaymentWaitingMessage: (message: string | undefined) => void;
   tokenMode: "evm" | "solana" | "stellar" | "all";
   setTokenMode: (mode: "evm" | "solana" | "stellar" | "all") => void;
+  selectedChainId: number | undefined;
+  setSelectedChainId: (chainId: number | undefined) => void;
   setSelectedWallet: (wallet: WalletConfigProps | undefined) => void;
   setSelectedWalletDeepLink: (deepLink: string | undefined) => void;
   setSelectedExternalOption: (
@@ -291,6 +293,10 @@ export function usePaymentState({
     "evm" | "solana" | "stellar" | "all"
   >("evm");
 
+  const [selectedChainId, setSelectedChainId] = useState<number | undefined>(
+    undefined
+  );
+
   const [txHash, setTxHash] = useState<string | undefined>(undefined);
   const [rozoPaymentId, setRozoPaymentId] = useState<string | undefined>(
     undefined
@@ -1300,6 +1306,8 @@ export function usePaymentState({
     payParams: currPayParams,
     tokenMode,
     setTokenMode,
+    selectedChainId,
+    setSelectedChainId,
     generatePreviewOrder,
     isDepositFlow,
     paymentWaitingMessage,

packages/connectkit/src/hooks/usePaymentState.ts

@@ -28,6 +28,7 @@ export function useTokenOptions(mode: "evm" | "solana" | "stellar" | "all"): {
     setSelectedTokenOption,
     setSelectedSolanaTokenOption,
     setSelectedStellarTokenOption,
+    selectedChainId,
   } = paymentState;
 
   const optionsList: Option[] = [];
@@ -86,45 +87,69 @@ export function useTokenOptions(mode: "evm" | "solana" | "stellar" | "all"): {
   })();
 
   if (shouldIncludeEvm) {
+    // Filter EVM options by selectedChainId if provided
+    const evmOptionsRaw = walletPaymentOptions.options ?? [];
+    const filteredEvmOptions = selectedChainId
+      ? evmOptionsRaw.filter(
+          (option) => option.balance.token.chainId === selectedChainId
+        )
+      : evmOptionsRaw;
+
     const evmOptions = walletPaymentOptions.isLoading
       ? []
       : getEvmTokenOptions(
-          walletPaymentOptions.options ?? [],
+          filteredEvmOptions,
           isDepositFlow,
           setSelectedTokenOption,
           setRoute
         );
     optionsList.push(...evmOptions);
     isLoading ||= walletPaymentOptions.isLoading;
-    hasAnyData ||= (walletPaymentOptions.options?.length ?? 0) > 0;
+    hasAnyData ||= filteredEvmOptions.length > 0;
   }
 
   if (shouldIncludeSolana) {
+    // Filter Solana options by selectedChainId if provided
+    const solanaOptionsRaw = solanaPaymentOptions.options ?? [];
+    const filteredSolanaOptions = selectedChainId
+      ? solanaOptionsRaw.filter(
+          (option) => option.balance.token.chainId === selectedChainId
+        )
+      : solanaOptionsRaw;
+
     const solanaOptions = solanaPaymentOptions.isLoading
       ? []
       : getSolanaTokenOptions(
-          solanaPaymentOptions.options ?? [],
+          filteredSolanaOptions,
           isDepositFlow,
           setSelectedSolanaTokenOption,
           setRoute
         );
     optionsList.push(...solanaOptions);
     isLoading ||= solanaPaymentOptions.isLoading;
-    hasAnyData ||= (solanaPaymentOptions.options?.length ?? 0) > 0;
+    hasAnyData ||= filteredSolanaOptions.length > 0;
   }
 
   if (shouldIncludeStellar) {
+    // Filter Stellar options by selectedChainId if provided
+    const stellarOptionsRaw = stellarPaymentOptions.options ?? [];
+    const filteredStellarOptions = selectedChainId
+      ? stellarOptionsRaw.filter(
+          (option) => option.balance.token.chainId === selectedChainId
+        )
+      : stellarOptionsRaw;
+
     const stellarOptions = stellarPaymentOptions.isLoading
       ? []
       : getStellarTokenOptions(
-          stellarPaymentOptions.options ?? [],
+          filteredStellarOptions,
           isDepositFlow,
           setSelectedStellarTokenOption,
           setRoute
         );
     optionsList.push(...stellarOptions);
     isLoading ||= stellarPaymentOptions.isLoading;
-    hasAnyData ||= (stellarPaymentOptions.options?.length ?? 0) > 0;
+    hasAnyData ||= filteredStellarOptions.length > 0;
   }
 
   optionsList.sort((a, b) => {

packages/connectkit/src/hooks/useTokenOptions.tsx

@@ -1,6 +1,6 @@
 {
   "name": "@rozoai/intent-common",
-  "version": "0.1.6-beta.1",
+  "version": "0.1.6-beta.2",
   "description": "Intent Pay shared types and utilities",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",