feat: improve preferredSymbol options

Author: akbarsaputrait

examples/nextjs-app/package.json

@@ -14,7 +14,7 @@
     "@headlessui/react": "^2.2.0",
     "@rainbow-me/rainbowkit": "^2.2.8",
     "@rozoai/intent-common": "0.1.7-beta.2",
-    "@rozoai/intent-pay": "0.1.7-beta.3",
+    "@rozoai/intent-pay": "0.1.7-beta.6",
     "@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

@@ -30,6 +30,7 @@ type Config = {
   chainId: number; // Destination chain ID
   tokenAddress: string;
   amount: string;
+  preferredSymbol: TokenSymbol[];
 };
 
 /**
@@ -118,6 +119,9 @@ export default function YourComponent() {
       toToken={${tokenCode}}
       toAddress={${addressCode}}
       toUnits="${config.amount}"
+      preferredSymbol={[${config.preferredSymbol
+        .map((s: TokenSymbol) => `TokenSymbol.${s}`)
+        .join(", ")}]}
       onPaymentStarted={(event) => {
         console.log("Payment started:", event);
       }}
@@ -179,11 +183,20 @@ export default function DemoBasic() {
   } as Config);
   const [parsedConfig, setParsedConfig] = useState<Config | null>(null);
   const { resetPayment } = useRozoPayUI();
+  const [preferredSymbol, setPreferredSymbol] = useState<TokenSymbol[]>([
+    TokenSymbol.USDC,
+    TokenSymbol.USDT,
+  ]);
 
   const handleSetConfig = useCallback(
-    (newConfig: Config) => {
-      setConfig(newConfig);
-      setParsedConfig(newConfig);
+    (newConfig: Config, symbols?: TokenSymbol[]) => {
+      const symbolsToUse = symbols ?? preferredSymbol;
+      const configWithSymbols = {
+        ...newConfig,
+        preferredSymbol: symbolsToUse,
+      };
+      setConfig(configWithSymbols);
+      setParsedConfig(configWithSymbols);
 
       // NOTE: This is used to reset the payment state when the config changes
       const isEvm = isEvmChain(newConfig.chainId);
@@ -198,16 +211,16 @@ export default function DemoBasic() {
       } else {
         payParams.toAddress = newConfig.recipientAddress;
         payParams.toToken = newConfig.tokenAddress;
-        // if (isStellarChain(newConfig.chainId)) {
-        //   payParams.toStellarAddress = newConfig.recipientAddress;
-        // } else if (isSolanaChain(newConfig.chainId)) {
-        //   payParams.toSolanaAddress = newConfig.recipientAddress;
-        // }
       }
 
-      resetPayment(payParams);
+      const params = {
+        ...payParams,
+        preferredSymbol: symbolsToUse,
+      };
+      console.log("params", params);
+      resetPayment(params);
     },
-    [setConfig, resetPayment]
+    [setConfig, resetPayment, preferredSymbol]
   );
 
   useEffect(() => {
@@ -234,6 +247,10 @@ export default function DemoBasic() {
         chainId: getConfig.chainId || 0,
         tokenAddress: getConfig.tokenAddress || "",
         amount: getConfig.amount || "",
+        preferredSymbol: getConfig.preferredSymbol || [
+          TokenSymbol.USDC,
+          TokenSymbol.USDT,
+        ],
       };
 
       // Validate and clean up config
@@ -246,6 +263,9 @@ export default function DemoBasic() {
       ) {
         setConfig(parsedConfig);
         setParsedConfig(parsedConfig);
+        if (parsedConfig.preferredSymbol) {
+          setPreferredSymbol(parsedConfig.preferredSymbol);
+        }
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -272,6 +292,17 @@ export default function DemoBasic() {
     []
   );
 
+  // Toggle between [USDC, USDT] and [EURC]
+  const handleChangeCurrency = useCallback(() => {
+    const nextSymbols =
+      preferredSymbol.length === 1 && preferredSymbol[0] === TokenSymbol.EURC
+        ? [TokenSymbol.USDC, TokenSymbol.USDT]
+        : [TokenSymbol.EURC];
+
+    setPreferredSymbol(nextSymbols);
+    handleSetConfig(config, nextSymbols);
+  }, [config, preferredSymbol, handleSetConfig]);
+
   return (
     <Container className="max-w-4xl mx-auto p-6">
       {/* Header Section */}
@@ -286,6 +317,8 @@ export default function DemoBasic() {
         </Text>
       </div>
 
+      <button onClick={handleChangeCurrency}>Change currency</button>
+
       {/* Main Content */}
       <div className="flex flex-col items-center gap-6">
         {/* Payment Button Section */}
@@ -312,8 +345,8 @@ export default function DemoBasic() {
                     console.log("✓ Payout completed:", e);
                   }}
                   feeType={FeeType.ExactOut}
+                  preferredSymbol={preferredSymbol}
                   metadata={metadata}
-                  preferredSymbol={[TokenSymbol.EURC]}
                   resetOnSuccess
                   showProcessingPayout
                 >
@@ -485,7 +518,7 @@ export default function DemoBasic() {
           configType="payment"
           isOpen={isConfigOpen}
           onClose={() => setIsConfigOpen(false)}
-          onConfirm={handleSetConfig}
+          onConfirm={(config) => handleSetConfig(config as Config)}
           defaultRecipientAddress={config.recipientAddress}
         />
       </div>

examples/nextjs-app/src/app/shared.tsx

@@ -1,5 +1,5 @@
 import { RozoPayEvent, getChainExplorerByChainId } from "@rozoai/intent-common";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { isAddress } from "viem";
 
 export const APP_ID = "rozoDemo"; // Your public app ID. Use pay-demo for prototyping only.
@@ -55,14 +55,17 @@ export function usePersistedConfig<T>(
     }
   }, [key]);
 
-  const setConfig = (newConfig: T) => {
-    setConfigState(newConfig);
-    try {
-      localStorage.setItem(key, JSON.stringify(newConfig));
-    } catch {
-      // Handle localStorage errors silently
-    }
-  };
+  const setConfig = useCallback(
+    (newConfig: T) => {
+      setConfigState(newConfig);
+      try {
+        localStorage.setItem(key, JSON.stringify(newConfig));
+      } catch {
+        // Handle localStorage errors silently
+      }
+    },
+    [key]
+  );
 
   return [config, setConfig];
 }

packages/connectkit/bundle-analysis.html

@@ -1,7 +1,7 @@
 {
   "name": "@rozoai/intent-pay",
   "private": false,
-  "version": "0.1.7-beta.3",
+  "version": "0.1.7-beta.6",
   "author": "RozoAI",
   "homepage": "https://github.com/RozoAI/intent-pay",
   "license": "BSD-2-Clause",

packages/connectkit/package.json

@@ -65,6 +65,7 @@ const ConnectorList = ({
     if (paymentState === "error") {
       context.setRoute(ROUTES.ERROR);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [paymentState]);
 
   return (
@@ -144,11 +145,9 @@ const ConnectorItem = ({
           return;
         }
       } else {
-        // EVM-only wallet: clear selectedChainId to show all available tokens
-        context.paymentState.setSelectedChainId(undefined);
+        // EVM-only wallet: navigate to connect page
         context.setPendingConnectorId(wallet.id);
-        // Explicitly set chainId to null to indicate we want all chains, not just the current one
-        context.setRoute(ROUTES.CONNECT, { ...meta, chainId: null });
+        context.setRoute(ROUTES.CONNECT, meta);
         return;
       }
     }

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

@@ -6,7 +6,6 @@ import { useAccount } from "wagmi";
 import {
   Base,
   BinanceSmartChain,
-  chainToLogo,
   Ethereum,
   Polygon,
   Solana,
@@ -18,7 +17,6 @@ import { useRozoPay } from "../../../hooks/useDaimoPay";
 import { usePayContext } from "../../../hooks/usePayContext";
 import { useStellar } from "../../../provider/StellarContextProvider";
 import styled from "../../../styles/styled";
-import { EVM_CHAIN_IDS, NON_EVM_CHAIN_IDS } from "../../../types/chainAddress";
 import { formatUsd } from "../../../utils/format";
 
 /** Shows payment amount. */
@@ -56,31 +54,6 @@ export const OrderHeader = ({
   );
   const orderUsd = order?.destFinalCallTokenAmount.usd;
   const appId = paymentState.payParams?.appId;
-  const selectedChainId = paymentState.selectedChainId;
-
-  // Get chain logo component based on chainId
-  const getChainLogo = (
-    chainId: number | undefined
-  ): React.ReactNode | null => {
-    if (!chainId) return null;
-
-    switch (chainId) {
-      case EVM_CHAIN_IDS.BASE:
-        return <Base />;
-      case EVM_CHAIN_IDS.ETHEREUM:
-        return <Ethereum />;
-      case EVM_CHAIN_IDS.POLYGON:
-        return <Polygon />;
-      case 56: // BSC
-        return <BinanceSmartChain />;
-      case NON_EVM_CHAIN_IDS.SOLANA:
-        return <Solana />;
-      case NON_EVM_CHAIN_IDS.STELLAR:
-        return <Stellar />;
-      default:
-        return null;
-    }
-  };
 
   const titleAmountContent = (() => {
     if (paymentState.isDepositFlow) {
@@ -106,27 +79,18 @@ export const OrderHeader = ({
       return null;
     }
 
-    const chainLogo = selectedChainId ? chainToLogo[selectedChainId] : null;
-
     return (
-      <WalletIconWrapper>
-        <LogoContainer
-          $size={size}
-          $zIndex={1}
-          style={{ borderRadius: "22.5%" }}
-        >
-          {typeof icon === "string" ? (
-            <img
-              src={icon}
-              alt={name || "wallet"}
-              style={{ maxWidth: "100%", maxHeight: "100%" }}
-            />
-          ) : (
-            icon
-          )}
-        </LogoContainer>
-        {chainLogo && <ChainLogoBadge>{chainLogo}</ChainLogoBadge>}
-      </WalletIconWrapper>
+      <LogoContainer $size={size} $zIndex={1} style={{ borderRadius: "22.5%" }}>
+        {typeof icon === "string" ? (
+          <img
+            src={icon}
+            alt={name || "wallet"}
+            style={{ maxWidth: "100%", maxHeight: "100%" }}
+          />
+        ) : (
+          icon
+        )}
+      </LogoContainer>
     );
   };
 
@@ -345,30 +309,3 @@ const SubtitleContainer = styled.div`
   justify-content: flex-end;
   gap: 8px;
 `;
-
-const WalletIconWrapper = styled.div`
-  position: relative;
-  display: inline-block;
-`;
-
-const ChainLogoBadge = styled(motion.div)`
-  position: absolute;
-  bottom: -5px;
-  right: 0px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 15px;
-  height: 15px;
-  overflow: hidden;
-  z-index: 10;
-  svg,
-  img {
-    display: block;
-    position: relative;
-    pointer-events: none;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-  }
-`;