feat: add EURC support for Base and Stellar

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.6",
-    "@rozoai/intent-pay": "0.1.5",
+    "@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",

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.6",
+    "@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

@@ -28,7 +28,9 @@ const PoweredByFooter = ({
           "Hi, I need help with my payment.",
           "",
           `Version: ${rozoPayVersion}`,
-          `Order ID: ${pay.order?.externalId?.toString()}`,
+          pay.order?.externalId
+            ? `Order ID: ${pay.order.externalId.toString()}`
+            : null,
           preFilledMessage,
         ]
           .filter(Boolean)

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

@@ -269,10 +269,12 @@ export const RozoPayModal: React.FC<{
       (!isMobile || !disableMobileInjector)
     ) {
       paymentState.setTokenMode("evm");
+      // Use selectedChainId if it exists (from previous selection), otherwise use current chain
+      const chainId = paymentState.selectedChainId ?? chain?.id;
       context.setRoute(ROUTES.SELECT_TOKEN, {
         event: "eth_connected_on_open",
         walletId: connector?.id,
-        chainId: chain?.id,
+        chainId,
         address,
       });
     } else if (
@@ -324,12 +326,15 @@ export const RozoPayModal: React.FC<{
       if (isEthConnected) {
         paymentState.setTokenMode("evm");
         // Preserve chainId from routeMeta if it exists (from SelectWalletChain),
-        // If chainId is explicitly null, don't use fallback to current chain ID (show all chains)
-        // otherwise use the current chain ID
+        // If chainId is explicitly null, don't use fallback (show all chains)
+        // Otherwise, use selectedChainId if it exists (from previous selection),
+        // or fall back to current chain ID
         const chainId =
           context.routeMeta?.chainId === null
             ? undefined
-            : context.routeMeta?.chainId ?? chain?.id;
+            : context.routeMeta?.chainId ??
+              paymentState.selectedChainId ??
+              chain?.id;
         context.setRoute(ROUTES.SELECT_TOKEN, {
           event: "connected",
           walletId: connector?.id,
@@ -341,9 +346,16 @@ export const RozoPayModal: React.FC<{
     // 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
+  // Extract chainId from routeMeta when navigating to CONNECT or SELECT_TOKEN
+  // This preserves the selected chain when user selects a chain in SelectWalletChain
   useEffect(() => {
-    if (context.route === ROUTES.SELECT_TOKEN) {
+    // Set selectedChainId when navigating to CONNECT with a chainId (from SelectWalletChain)
+    if (context.route === ROUTES.CONNECT) {
+      if (context.routeMeta?.chainId != null) {
+        const chainId = context.routeMeta.chainId as number;
+        setSelectedChainId(chainId);
+      }
+    } else if (context.route === ROUTES.SELECT_TOKEN) {
       // Only set selectedChainId if chainId is explicitly provided and not null/undefined
       if (context.routeMeta?.chainId != null) {
         const chainId = context.routeMeta.chainId as number;
@@ -354,9 +366,13 @@ export const RozoPayModal: React.FC<{
       }
     } else if (
       context.route !== ROUTES.SELECT_TOKEN &&
-      context.route !== ROUTES.SELECT_WALLET_CHAIN
+      context.route !== ROUTES.SELECT_WALLET_CHAIN &&
+      context.route !== ROUTES.CONNECT &&
+      context.route !== ROUTES.SELECT_METHOD
     ) {
-      // Clear selectedChainId when leaving SELECT_TOKEN or SELECT_WALLET_CHAIN
+      // Clear selectedChainId when leaving SELECT_TOKEN, SELECT_WALLET_CHAIN, CONNECT, or SELECT_METHOD
+      // but preserve it when navigating between these routes (including SELECT_METHOD)
+      // This allows the selected chain to persist when the modal closes and reopens
       setSelectedChainId(undefined);
     }
   }, [context.route, context.routeMeta, setSelectedChainId]);

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

@@ -25,10 +25,7 @@ import {
   LoadingCircleIcon,
 } from "../../../assets/icons";
 import defaultTheme from "../../../constants/defaultTheme";
-import {
-  DEFAULT_ROZO_APP_ID,
-  ROZO_INVOICE_URL,
-} from "../../../constants/rozoConfig";
+import { ROZO_INVOICE_URL } from "../../../constants/rozoConfig";
 import { useRozoPay } from "../../../hooks/useDaimoPay";
 import { usePayoutPolling } from "../../../hooks/usePayoutPolling";
 import { usePusherPayout } from "../../../hooks/usePusherPayout";
@@ -108,10 +105,7 @@ const Confirmation: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rozoPaymentId, order?.externalId, paymentStateContext.rozoPaymentId]);
 
-  const { tokens: supportedTokens } = useSupportedChains(
-    paymentStateContext.payParams?.appId ?? DEFAULT_ROZO_APP_ID,
-    paymentStateContext.payParams?.preferredChains
-  );
+  const { tokens: supportedTokens } = useSupportedChains();
 
   const { done, txURL, rawPayInHash } = useMemo(() => {
     const { tokenMode, txHash } = paymentStateContext;

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

@@ -10,25 +10,16 @@ import { Stellar } from "../../../../assets/chains";
 import { SquircleIcon } from "../../../../assets/logos";
 import { ROUTES } from "../../../../constants/routes";
 import { usePayContext } from "../../../../hooks/usePayContext";
-import { useStellar } from "../../../../provider/StellarContextProvider";
+import {
+  STELLAR_WALLET_STORAGE_KEY,
+  useStellar,
+} from "../../../../provider/StellarContextProvider";
 import * as LocalStorage from "../../../../utils/localstorage";
 import { OptionsList } from "../../../Common/OptionsList";
 import { OrderHeader } from "../../../Common/OrderHeader";
 import SelectAnotherMethodButton from "../../../Common/SelectAnotherMethodButton";
 import WalletPaymentSpinner from "../../../Spinners/WalletPaymentSpinner";
 
-// LocalStorage key for Stellar wallet persistence (same as in StellarContextProvider)
-const STELLAR_WALLET_STORAGE_KEY = "rozo-stellar-wallet";
-
-interface Option {
-  id: string;
-  title: string;
-  subtitle?: string;
-  icons: (React.ReactNode | string)[];
-  onClick: () => void;
-  disabled?: boolean;
-}
-
 const ConnectStellar: React.FC = () => {
   const { setStellarConnector, setRoute, log } = usePayContext();
   const { kit, setPublicKey, setConnector } = useStellar();

packages/connectkit/src/components/Pages/Stellar/ConnectStellar/index.tsx

@@ -225,6 +225,9 @@ export interface PaymentState {
   ) => Promise<PaymentResponse | undefined>;
 }
 
+export const SELECTED_CHAIN_ID_STORAGE_KEY =
+  "rozo-intent-pay-selected-chain-id";
+
 export function usePaymentState({
   trpc,
   lockPayParams,
@@ -298,9 +301,43 @@ export function usePaymentState({
     "evm" | "solana" | "stellar" | "all"
   >("evm");
 
-  const [selectedChainId, setSelectedChainId] = useState<number | undefined>(
-    undefined
-  );
+  // Initialize selectedChainId from localStorage to persist across page refreshes
+  const [selectedChainId, setSelectedChainIdState] = useState<
+    number | undefined
+  >(() => {
+    if (typeof window === "undefined") return undefined;
+    try {
+      const saved = localStorage.getItem(SELECTED_CHAIN_ID_STORAGE_KEY);
+      if (saved) {
+        const parsed = parseInt(saved, 10);
+        if (!isNaN(parsed)) {
+          return parsed;
+        }
+      }
+    } catch (error) {
+      // Ignore localStorage errors
+    }
+    return undefined;
+  });
+
+  // Wrapper function to persist selectedChainId to localStorage
+  const setSelectedChainId = useCallback((chainId: number | undefined) => {
+    setSelectedChainIdState(chainId);
+    if (typeof window !== "undefined") {
+      try {
+        if (chainId !== undefined) {
+          localStorage.setItem(
+            SELECTED_CHAIN_ID_STORAGE_KEY,
+            chainId.toString()
+          );
+        } else {
+          localStorage.removeItem(SELECTED_CHAIN_ID_STORAGE_KEY);
+        }
+      } catch (error) {
+        // Ignore localStorage errors
+      }
+    }
+  }, []);
 
   const [txHash, setTxHash] = useState<string | undefined>(undefined);
   const [rozoPaymentId, setRozoPaymentId] = useState<string | undefined>(

packages/connectkit/src/hooks/usePaymentState.ts

@@ -1,4 +1,4 @@
-import { rozoStellarUSDC, WalletPaymentOption } from "@rozoai/intent-common";
+import { rozoStellar, WalletPaymentOption } from "@rozoai/intent-common";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { PayParams } from "../payment/paymentFsm";
 import { TrpcClient } from "../utils/trpc";
@@ -7,6 +7,7 @@ import {
   setupRefreshState,
   shouldSkipRefresh,
 } from "./refreshUtils";
+import { useSupportedChains } from "./useSupportedChains";
 
 /** Wallet payment options. User picks one. */
 export function useStellarPaymentOptions({
@@ -22,6 +23,8 @@ export function useStellarPaymentOptions({
   isDepositFlow: boolean;
   payParams: PayParams | undefined;
 }) {
+  const { tokens } = useSupportedChains();
+
   const [options, setOptions] = useState<WalletPaymentOption[] | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -39,7 +42,13 @@ export function useStellarPaymentOptions({
     if (!options) return [];
 
     return options
-      .filter((option) => option.balance.token.token === rozoStellarUSDC.token)
+      .filter((option) =>
+        tokens.some(
+          (t) =>
+            t.token === option.balance.token.token &&
+            t.chainId === rozoStellar.chainId
+        )
+      )
       .map((item) => {
         const usd = isDepositFlow ? 0 : usdRequired || 0;
 

packages/connectkit/src/hooks/useStellarPaymentOptions.ts

@@ -1,31 +1,6 @@
 import { supportedChains, supportedTokens, Token } from "@rozoai/intent-common";
 
-/**
- * React hook: Returns currently supported wallet payment chains and tokens.
- *
- * All other chains and tokens from @rozoai/intent-common are included by default.
- *
- * ### Output:
- * - **Chains**: Includes all default chains.
- * - **Tokens**: Includes all default tokens.
- *
- * @param {string} appId  - Current Rozo appId.
- * @param {number[]} [preferredChains=[]] - Preferred chain IDs.
- * @returns {{
- *   chains: Array<{ chainId: number; [k: string]: any }>;
- *   tokens: Token[];
- * }} Object containing supported chain objects and tokens for wallet UI and payment logic.
- *
- * @example
- * // Usage: retrieve chains and tokens to render for this app/session
- * const { chains, tokens } = useSupportedChains("your_appId", [8453, 56]);
- *
- * // Output: all chains/tokens except Worldchain
- */
-export function useSupportedChains(
-  appId: string,
-  preferredChains: number[] = []
-): {
+export function useSupportedChains(): {
   chains: Array<{ chainId: number; [k: string]: any }>;
   tokens: Token[];
 } {