feat: adjust preferredSymbol to follow supportedTokens

Author: akbarsaputrait

examples/nextjs-app/package.json

@@ -13,8 +13,8 @@
     "@farcaster/frame-sdk": "^0.0.26",
     "@headlessui/react": "^2.2.0",
     "@rainbow-me/rainbowkit": "^2.2.8",
-    "@rozoai/intent-common": "workspace:*",
-    "@rozoai/intent-pay": "workspace:*",
+    "@rozoai/intent-common": "0.1.7-beta.2",
+    "@rozoai/intent-pay": "0.1.7-beta.3",
     "@tanstack/react-query": "^5.51.11",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@wagmi/core": "^2.22.0",

examples/nextjs-app/src/app/basic/page.tsx

@@ -8,6 +8,7 @@ import {
   knownTokens,
   rozoSolana,
   rozoStellar,
+  TokenSymbol,
 } from "@rozoai/intent-common";
 import {
   isEvmChain,
@@ -312,7 +313,7 @@ export default function DemoBasic() {
                   }}
                   feeType={FeeType.ExactOut}
                   metadata={metadata}
-                  // preferredTokens={[baseEURC, baseUSDC, rozoStellarEURC]}
+                  preferredSymbol={[TokenSymbol.EURC]}
                   resetOnSuccess
                   showProcessingPayout
                 >

packages/connectkit/bundle-analysis.html

@@ -1,7 +1,7 @@
 {
   "name": "@rozoai/intent-pay",
   "private": false,
-  "version": "0.1.7-beta.1",
+  "version": "0.1.7-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.7-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

@@ -14,6 +14,9 @@ import {
   RozoPayHydratedOrderWithOrg,
   rozoSolana,
   rozoStellar,
+  supportedTokens,
+  Token,
+  TokenSymbol,
   writeRozoPayOrderID,
 } from "@rozoai/intent-common";
 import { AnimatePresence, Variants } from "framer-motion";
@@ -34,6 +37,59 @@ import { validatePayoutToken } from "../../utils/validatePayoutToken";
 import ThemedButton, { ThemeContainer } from "../Common/ThemedButton";
 import { RozoPayButtonCustomProps, RozoPayButtonProps } from "./types";
 
+/**
+ * Converts preferredSymbol array to preferredTokens array.
+ * Only USDC, USDT, and EURC symbols are allowed.
+ * Finds tokens matching the symbols across supported chains (Base, Polygon, Ethereum, Solana, Stellar).
+ */
+function convertPreferredSymbolsToTokens(
+  symbols: TokenSymbol[] | undefined,
+  existingPreferredTokens: Token[] | undefined
+): Token[] | undefined {
+  // If preferredTokens is explicitly provided, it takes precedence
+  // Even if it's an empty array, we respect it (means "no preferred tokens")
+  if (existingPreferredTokens !== undefined) {
+    return existingPreferredTokens;
+  }
+
+  // If no preferredSymbol provided, return undefined (will use defaults later)
+  if (!symbols || symbols.length === 0) {
+    return undefined;
+  }
+
+  // Validate that only allowed symbols are used
+  const allowedSymbols = [TokenSymbol.USDC, TokenSymbol.USDT, TokenSymbol.EURC];
+  const invalidSymbols = symbols.filter((s) => !allowedSymbols.includes(s));
+  if (invalidSymbols.length > 0) {
+    console.warn(
+      `[RozoPayButton] Invalid preferredSymbol values: ${invalidSymbols.join(
+        ", "
+      )}. Only USDC, USDT, and EURC are allowed.`
+    );
+    // Filter out invalid symbols
+    symbols = symbols.filter((s) => allowedSymbols.includes(s));
+    if (symbols.length === 0) {
+      return undefined;
+    }
+  }
+
+  // Filter supportedTokens by the provided symbols
+  // supportedTokens is a Map<chainId, Token[]> - this is what's used for wallet payment options
+  const tokens: Token[] = [];
+  const symbolSet = new Set(symbols);
+
+  // Iterate through all supported tokens (organized by chain)
+  for (const chainTokens of supportedTokens.values()) {
+    for (const token of chainTokens) {
+      if (symbolSet.has(token.symbol as TokenSymbol)) {
+        tokens.push(token);
+      }
+    }
+  }
+
+  return tokens.length > 0 ? tokens : undefined;
+}
+
 /**
  * A button that shows the Rozo Pay checkout. Replaces the traditional
  * Connect Wallet » approve » execute sequence with a single action.
@@ -90,13 +146,29 @@ function RozoPayButtonCustom(props: RozoPayButtonCustomProps): JSX.Element {
         paymentOptions,
         preferredChains,
         preferredTokens,
+        preferredSymbol,
         feeType,
         externalId,
         metadata,
         showProcessingPayout,
         receiverMemo,
       } = props;
 
+      // Convert preferredSymbol to preferredTokens if needed
+      // Default to [USDC, USDT] if neither preferredSymbol nor preferredTokens is provided
+      // If preferredTokens is explicitly provided (even if empty array), it takes precedence
+      const symbolsToUse: TokenSymbol[] | undefined =
+        preferredTokens !== undefined
+          ? undefined // preferredTokens takes precedence, don't use preferredSymbol
+          : preferredSymbol !== undefined
+          ? preferredSymbol
+          : [TokenSymbol.USDC, TokenSymbol.USDT]; // Default to USDC and USDT
+
+      const finalPreferredTokens = convertPreferredSymbolsToTokens(
+        symbolsToUse,
+        preferredTokens
+      );
+
       const commonParams = {
         appId,
         toChain,
@@ -105,7 +177,7 @@ function RozoPayButtonCustom(props: RozoPayButtonCustomProps): JSX.Element {
         intent,
         paymentOptions,
         preferredChains,
-        preferredTokens,
+        preferredTokens: finalPreferredTokens,
         evmChains: undefined,
         externalId,
         metadata,

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

@@ -6,6 +6,7 @@ import {
   PaymentPayoutCompletedEvent,
   PaymentStartedEvent,
   Token,
+  TokenSymbol,
 } from "@rozoai/intent-common";
 import { ReactElement } from "react";
 import { Address } from "viem";
@@ -93,6 +94,11 @@ type CommonPaymentProps = {
    * Preferred tokens. These appear first in the token list.
    */
   preferredTokens?: Token[];
+  /**
+   * Preferred token symbols. These will be converted to preferredTokens internally.
+   * Only USDC, USDT, and EURC are allowed. Defaults to [USDC, USDT].
+   */
+  preferredSymbol?: TokenSymbol[];
   /**
    * Only allow payments on these EVM chains.
    */

packages/connectkit/src/components/DaimoPayButton/types.ts

@@ -316,8 +316,6 @@ export default function SelectMethod() {
       options.push(depositAddressOption);
     }
 
-    console.log("showStellarPaymentMethod", showStellarPaymentMethod);
-
     if (showStellarPaymentMethod) {
       options.push({
         id: "stellar",

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

@@ -181,7 +181,7 @@ function NoTokensAvailable({
   // Get supported token symbols from preferredTokens if available
   const supportedSymbols = useMemo(() => {
     if (preferredTokens && preferredTokens.length > 0) {
-      return preferredTokens.map((pt) => pt.symbol);
+      return Array.from(new Set(preferredTokens.map((pt) => pt.symbol)));
     }
     return [];
   }, [preferredTokens]);

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

@@ -156,9 +156,9 @@ export function useWalletPaymentOptions({
         usdRequired: isDepositFlow ? undefined : usdRequired,
         destChainId,
         preferredChains: memoizedPreferredChains,
-        preferredTokenAddress: (memoizedPreferredTokens ?? [])?.map(
-          (t) => t.token
-        ),
+        // preferredTokenAddress: (memoizedPreferredTokens ?? [])?.map(
+        //   (t) => t.token
+        // ),
         appId: stableAppId,
       });
 

packages/connectkit/src/hooks/useWalletPaymentOptions.ts

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