feat: adjust refresh options on completed and evm wallet connector

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-beta.3",
-    "@rozoai/intent-pay": "0.1.5-beta.4",
+    "@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/providers.tsx

@@ -20,7 +20,9 @@ export function Providers(props: { children: ReactNode }) {
   return (
     <WagmiProvider config={rozoPayConfig}>
       <QueryClientProvider client={queryClient}>
-        <RozoPayProvider debugMode>{props.children}</RozoPayProvider>
+        <RozoPayProvider debugMode mode="dark">
+          {props.children}
+        </RozoPayProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );

packages/connectkit/bundle-analysis.html

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

packages/connectkit/package.json

@@ -141,6 +141,27 @@ export const TickIcon = ({ ...props }) => {
   );
 };
 
+export const BadgeCheckIcon = ({ ...props }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="lucide lucide-badge-check-icon lucide-badge-check"
+      {...props}
+    >
+      <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" />
+      <path d="m9 12 2 2 4-4" />
+    </svg>
+  );
+};
+
 export const LoadingCircleIcon = ({ ...props }) => {
   return (
     <svg

packages/connectkit/src/assets/icons.tsx

@@ -130,16 +130,25 @@ const ConnectorItem = ({
     const meta = { event: "connector-list-click", walletId: wallet.id };
 
     // Desktop multi-chain wallet flow: prompt for chain selection.
-    if (wallet.solanaConnectorName && !isMobile) {
-      const supportsEvm = wallet.connector?.name != null;
-
-      if (supportsEvm) {
-        context.paymentState.setSelectedWallet(wallet);
-        context.setRoute(ROUTES.SELECT_WALLET_CHAIN, meta);
-        return;
+    if (!isMobile) {
+      if (wallet.solanaConnectorName) {
+        const supportsEvm = wallet.connector?.name != null;
+
+        if (supportsEvm) {
+          context.paymentState.setSelectedWallet(wallet);
+          context.setRoute(ROUTES.SELECT_WALLET_CHAIN, meta);
+          return;
+        } else {
+          context.setSolanaConnector(wallet.solanaConnectorName);
+          context.setRoute(ROUTES.SOLANA_CONNECTOR, meta);
+          return;
+        }
       } else {
-        context.setSolanaConnector(wallet.solanaConnectorName);
-        context.setRoute(ROUTES.SOLANA_CONNECTOR, meta);
+        // EVM-only wallet: clear selectedChainId to show all available tokens
+        context.paymentState.setSelectedChainId(undefined);
+        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 });
         return;
       }
     }

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

@@ -324,8 +324,12 @@ 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
-        const chainId = context.routeMeta?.chainId ?? chain?.id;
+        const chainId =
+          context.routeMeta?.chainId === null
+            ? undefined
+            : context.routeMeta?.chainId ?? chain?.id;
         context.setRoute(ROUTES.SELECT_TOKEN, {
           event: "connected",
           walletId: connector?.id,
@@ -339,9 +343,15 @@ export const RozoPayModal: React.FC<{
 
   // 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);
+    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;
+        setSelectedChainId(chainId);
+      } else {
+        // Explicitly clear selectedChainId to show all available tokens
+        setSelectedChainId(undefined);
+      }
     } else if (
       context.route !== ROUTES.SELECT_TOKEN &&
       context.route !== ROUTES.SELECT_WALLET_CHAIN

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

@@ -20,9 +20,9 @@ import {
 } from "@rozoai/intent-common";
 import { motion } from "framer-motion";
 import {
+  BadgeCheckIcon,
   ExternalLinkIcon,
   LoadingCircleIcon,
-  TickIcon,
 } from "../../../assets/icons";
 import defaultTheme from "../../../constants/defaultTheme";
 import {
@@ -468,8 +468,8 @@ const Confirmation: React.FC = () => {
       >
         <AnimationContainer>
           <InsetContainer>
-            <Spinner $status={done} />
-            <SuccessIcon $status={done} />
+            {!done && <Spinner $status={done} />}
+            {done && <SuccessIcon $status={done} />}
           </InsetContainer>
         </AnimationContainer>
 
@@ -568,9 +568,9 @@ const AnimationContainer = styled(motion.div)`
 const InsetContainer = styled(motion.div)`
   position: absolute;
   overflow: hidden;
-  inset: 6px;
+  inset: 0;
   border-radius: 50px;
-  background: var(--ck-body-background);
+  // background: var(--ck-body-background);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -581,12 +581,13 @@ const InsetContainer = styled(motion.div)`
   }
 `;
 
-const SuccessIcon = styled(TickIcon)<{ $status: boolean }>`
-  color: var(--ck-body-color-valid);
+const SuccessIcon = styled(BadgeCheckIcon)<{ $status: boolean }>`
   transition: all 0.2s ease-in-out;
   position: absolute;
   opacity: ${(props) => (props.$status ? 1 : 0)};
   transform: ${(props) => (props.$status ? "scale(1)" : "scale(0.5)")};
+  fill: #0052ff;
+  stroke: #ffffff;
 `;
 
 const Spinner = styled(LoadingCircleIcon)<{ $status: boolean }>`

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

@@ -28,7 +28,8 @@ enum PayState {
 const PayWithToken: React.FC = () => {
   const walletChainId = useChainId();
   const { triggerResize, paymentState, setRoute, log } = usePayContext();
-  const { payWithToken, selectedTokenOption } = paymentState;
+  const { payWithToken, selectedTokenOption, walletPaymentOptions } =
+    paymentState;
   const { switchChainAsync } = useSwitchChain();
   const {
     store,
@@ -118,6 +119,10 @@ const PayWithToken: React.FC = () => {
           setTimeout(() => {
             setRoute(ROUTES.CONFIRMATION, { event: "wait-pay-with-token" });
           }, 200);
+          // Refresh wallet payment options after 1 second to prevent stale balances
+          setTimeout(() => {
+            walletPaymentOptions.refreshOptions();
+          }, 2000);
         } else {
           setPayState(PayState.RequestFailed);
         }
@@ -143,6 +148,10 @@ const PayWithToken: React.FC = () => {
                     event: "wait-pay-with-token",
                   });
                 }, 200);
+                // Refresh wallet payment options after 1 second to prevent stale balances
+                setTimeout(() => {
+                  walletPaymentOptions.refreshOptions();
+                }, 2000);
               } else {
                 setPayState(PayState.RequestFailed);
               }

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

@@ -170,7 +170,7 @@ function InsufficientBalance({
         gap: 16,
       }}
     >
-      <ModalH1>Insufficient balance.</ModalH1>
+      <ModalH1>Insufficient balance</ModalH1>
       <Button
         variant="secondary"
         onClick={handleRefresh}