fix: preferredTokens props

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": "0.1.7-beta.1",
-    "@rozoai/intent-pay": "0.1.7-beta.1",
+    "@rozoai/intent-common": "workspace:*",
+    "@rozoai/intent-pay": "workspace:*",
     "@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

@@ -312,6 +312,7 @@ export default function DemoBasic() {
                   }}
                   feeType={FeeType.ExactOut}
                   metadata={metadata}
+                  // preferredTokens={[baseEURC, baseUSDC, rozoStellarEURC]}
                   resetOnSuccess
                   showProcessingPayout
                 >

packages/connectkit/bundle-analysis.html

@@ -47,7 +47,7 @@
     "@albedo-link/intent": "^0.13.0",
     "@reown/appkit": "^1.7.0",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@rozoai/intent-common": "0.1.7-beta.1",
+    "@rozoai/intent-common": "workspace:*",
     "@solana/spl-token": "^0.4.14",
     "@solana/wallet-adapter-base": "^0.9.27",
     "@solana/wallet-adapter-react": "^0.15.39",

packages/connectkit/package.json

@@ -20,13 +20,7 @@ const OptionsContainer = styled.div`
 
 export default function SelectAnotherMethodButton() {
   const { paymentState, setRoute } = usePayContext();
-  const {
-    externalPaymentOptions,
-    showSolanaPaymentMethod,
-    showStellarPaymentMethod,
-    tokenMode,
-    payParams,
-  } = paymentState;
+  const { externalPaymentOptions, tokenMode, payParams } = paymentState;
   const { connector } = useAccount();
   const { order } = useRozoPay();
   const paymentOptions = order?.metadata.payer?.paymentOptions;

packages/connectkit/src/components/Common/SelectAnotherMethodButton/index.tsx

@@ -14,7 +14,6 @@ import {
   RozoPayHydratedOrderWithOrg,
   rozoSolana,
   rozoStellar,
-  TokenSymbol,
   writeRozoPayOrderID,
 } from "@rozoai/intent-common";
 import { AnimatePresence, Variants } from "framer-motion";
@@ -91,7 +90,6 @@ function RozoPayButtonCustom(props: RozoPayButtonCustomProps): JSX.Element {
         paymentOptions,
         preferredChains,
         preferredTokens,
-        preferredSymbol,
         feeType,
         externalId,
         metadata,
@@ -108,10 +106,6 @@ function RozoPayButtonCustom(props: RozoPayButtonCustomProps): JSX.Element {
         paymentOptions,
         preferredChains,
         preferredTokens,
-        preferredSymbol: preferredSymbol ?? [
-          TokenSymbol.USDC,
-          TokenSymbol.USDT,
-        ], // Default to USDC and USDT
         evmChains: undefined,
         externalId,
         metadata,

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

@@ -5,10 +5,10 @@ import {
   PaymentCompletedEvent,
   PaymentPayoutCompletedEvent,
   PaymentStartedEvent,
+  Token,
 } from "@rozoai/intent-common";
 import { ReactElement } from "react";
 import { Address } from "viem";
-import { PreferredTokenSymbol } from "../../payment/paymentFsm";
 import { CustomTheme, Mode, Theme } from "../../types";
 
 /** Chain-specific props for EVM chains (Base, Ethereum, Polygon) */
@@ -92,12 +92,7 @@ type CommonPaymentProps = {
   /**
    * Preferred tokens. These appear first in the token list.
    */
-  preferredTokens?: { chain: number; address: Address | string }[];
-  /**
-   * Preferred token symbols to filter. Only tokens with these symbols will be shown.
-   * Default: [TokenSymbol.USDC, TokenSymbol.USDT]
-   */
-  preferredSymbol?: PreferredTokenSymbol[];
+  preferredTokens?: Token[];
   /**
    * Only allow payments on these EVM chains.
    */

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

@@ -365,10 +365,13 @@ export const RozoPayModal: React.FC<{
         setSelectedChainId(undefined);
       }
     } else if (
-      context.route !== ROUTES.SELECT_TOKEN &&
-      context.route !== ROUTES.SELECT_WALLET_CHAIN &&
-      context.route !== ROUTES.CONNECT &&
-      context.route !== ROUTES.SELECT_METHOD
+      ![
+        ROUTES.SELECT_TOKEN,
+        ROUTES.SELECT_WALLET_CHAIN,
+        ROUTES.CONNECT,
+        ROUTES.SELECT_METHOD,
+        ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN,
+      ].includes(context.route as ROUTES)
     ) {
       // Clear selectedChainId when leaving SELECT_TOKEN, SELECT_WALLET_CHAIN, CONNECT, or SELECT_METHOD
       // but preserve it when navigating between these routes (including SELECT_METHOD)

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

@@ -141,7 +141,7 @@ export default function SelectMethod() {
           setRoute(ROUTES.SELECT_TOKEN, {
             event: "click-wallet",
             walletId: connector?.id,
-            chainId: chain?.id,
+            chainId: paymentState.selectedChainId ?? chain?.id,
             address: address,
           });
         },
@@ -316,6 +316,8 @@ 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

@@ -1,4 +1,4 @@
-import { getChainById, TokenSymbol } from "@rozoai/intent-common";
+import { getChainName, Token } from "@rozoai/intent-common";
 import { useWallet } from "@solana/wallet-adapter-react";
 import { useMemo, useState } from "react";
 import { injected, useAccount } from "wagmi";
@@ -130,7 +130,7 @@ export default function SelectToken() {
         <NoTokensAvailable
           onRefresh={refreshOptions}
           chainId={paymentState.selectedChainId}
-          preferredSymbol={paymentState.payParams?.preferredSymbol}
+          preferredTokens={paymentState.payParams?.preferredTokens}
         />
       )}
       {!isLoading && !isConnected && effectiveTokenMode === "all" && (
@@ -158,12 +158,12 @@ function NoConnectedWallet() {
 
 function NoTokensAvailable({
   onRefresh,
-  preferredSymbol,
+  preferredTokens,
   chainId,
 }: {
   onRefresh: () => Promise<void>;
   chainId: number | undefined;
-  preferredSymbol?: string[];
+  preferredTokens?: Token[];
 }) {
   const [isRefreshing, setIsRefreshing] = useState(false);
 
@@ -178,10 +178,13 @@ function NoTokensAvailable({
     }
   };
 
-  // Get supported token symbols from payParams, default to USDC and USDT
+  // Get supported token symbols from preferredTokens if available
   const supportedSymbols = useMemo(() => {
-    return preferredSymbol ?? [TokenSymbol.USDC, TokenSymbol.USDT];
-  }, [preferredSymbol]);
+    if (preferredTokens && preferredTokens.length > 0) {
+      return preferredTokens.map((pt) => pt.symbol);
+    }
+    return [];
+  }, [preferredTokens]);
 
   // Format token symbols for display
   const formattedTokens = useMemo(() => {
@@ -210,8 +213,11 @@ function NoTokensAvailable({
     );
   }, [supportedSymbols]);
 
-  const selectedChain = useMemo(() => {
-    return chainId ? getChainById(chainId) : undefined;
+  const formattedChainName = useMemo(() => {
+    if (chainId) {
+      return getChainName(chainId);
+    }
+    return null;
   }, [chainId]);
 
   return (
@@ -234,7 +240,7 @@ function NoTokensAvailable({
         }}
       >
         We can&apos;t find any supported tokens ({formattedTokens}) in your
-        account.
+        account {formattedChainName ? `on ${formattedChainName}` : ""}.
       </ModalBody>
       <Button
         variant="secondary"