@daimo/pay 1.7.2 → 1.7.4

package/build/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { ExternalPaymentOptions, assert, assertNotNull, debugJson, supportedChains, ethereum, readDaimoPayOrderID, getChainName, arbitrum as arbitrum$1, base as base$2, blast as blast$1, bsc as bsc$1, linea as linea$1, mantle as mantle$1, optimism as optimism$1, polygon as polygon$1, worldchain as worldchain$1, getAddressContraction, writeDaimoPayOrderID, DaimoPayOrderMode, DaimoPayOrderStatusDest, getChainExplorerTxUrl, DaimoPayIntentStatus, retryBackoff, DaimoPayOrderStatusSource, getDaimoPayOrderView } from '@daimo/pay-common';
+import { ExternalPaymentOptions, assert, assertNotNull, debugJson, supportedChains, ethereum, isCCTPV1Chain, getOrderDestChainId, readDaimoPayOrderID, getChainName, arbitrum as arbitrum$1, base as base$2, blast as blast$1, bsc as bsc$1, linea as linea$1, mantle as mantle$1, optimism as optimism$1, polygon as polygon$1, worldchain as worldchain$1, getAddressContraction, writeDaimoPayOrderID, DaimoPayOrderMode, DaimoPayOrderStatusDest, getChainExplorerTxUrl, DaimoPayIntentStatus, retryBackoff, DaimoPayOrderStatusSource, getDaimoPayOrderView } from '@daimo/pay-common';
 import { Buffer } from 'buffer';
 import React, { useState, useEffect, createContext, useCallback, useRef, useLayoutEffect, useMemo, createElement } from 'react';
 import styled$1, { css, keyframes, ThemeProvider } from 'styled-components';
@@ -7,7 +7,7 @@ import { http, useConfig, useAccountEffect, useWriteContract, useSendTransaction
 import { mainnet, base as base$1, polygon, optimism, arbitrum, linea, bsc, sepolia, baseSepolia, worldchain, blast, mantle } from 'wagmi/chains';
 import { safe, injected, coinbaseWallet, walletConnect } from '@wagmi/connectors';
 import { useConnection, useWallet as useWallet$1, ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
-import { hexToBytes, zeroAddress, erc20Abi, getAddress, parseUnits, formatUnits } from 'viem';
+import { hexToBytes, zeroAddress, erc20Abi, getAddress, formatUnits, parseUnits } from 'viem';
 import { VersionedTransaction } from '@solana/web3.js';
 import { createTRPCClient, httpBatchLink } from '@trpc/client';
 import { motion, AnimatePresence, MotionConfig } from 'framer-motion';
@@ -22,7 +22,7 @@ import { WalletSignTransactionError, WalletSendTransactionError } from '@solana/
 import { normalize } from 'viem/ens';
 
 var name = "@daimo/pay";
-var version = "1.7.2";
+var version = "1.7.4";
 var author = "Daimo";
 var homepage = "https://pay.daimo.com";
 var license = "BSD-2-Clause license";
@@ -61,7 +61,7 @@ var keywords = [
 	"crypto"
 ];
 var dependencies = {
-	"@daimo/pay-common": "1.7.2",
+	"@daimo/pay-common": "1.7.4",
 	"@rollup/plugin-typescript": "^12.1.2",
 	"@solana/wallet-adapter-base": "^0.9.23",
 	"@solana/wallet-adapter-react": "^0.15.35",
@@ -377,7 +377,7 @@ const OtherWallets = ({ ...props }) => {
         overflow: "hidden",
         borderRadius: "27.5%",
     };
-    return (jsxs("div", { style: column, ...props, children: [jsxs("div", { style: row, children: [jsx("div", { style: cell, children: jsx(Rainbow, {}) }), jsx("div", { style: cell, children: jsx(WalletConnect, { background: true }) })] }), jsxs("div", { style: row, children: [jsx("div", { style: cell, children: jsx(Family, {}) }), jsx("div", { style: cell, children: jsx(Ledger, {}) })] })] }));
+    return (jsxs("div", { style: column, ...props, children: [jsxs("div", { style: row, children: [jsx("div", { style: cell, children: jsx(Zerion, {}) }), jsx("div", { style: cell, children: jsx(WalletConnect, { background: true }) })] }), jsxs("div", { style: row, children: [jsx("div", { style: cell, children: jsx(Family, {}) }), jsx("div", { style: cell, children: jsx(Ledger, {}) })] })] }));
 };
 const Fordefi = ({ ...props }) => (jsxs("svg", { ...props, width: "88", height: "88", viewBox: "0 0 96 96", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxs("g", { clipPath: "url(#clip0_14298_75627)", children: [jsx("path", { d: "M43.5075 62.5508H6V73.5954C6 79.2046 10.5379 83.7515 16.1357 83.7515H32.9997L43.5075 62.5508Z", fill: "#7994FF" }), jsx("path", { d: "M6.00098 39.1016H76.2075L68.0567 55.4841H6.00098V39.1016Z", fill: "#486DFF" }), jsx("path", { d: "M30.6398 12H6.09766V32.0282H89.8447V12H65.3025V26.9577H60.2423V12H35.7001V26.9577H30.6398V12Z", fill: "#5CD1FA" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_14298_75627", children: jsx("rect", { width: "84", height: "72", fill: "white", transform: "translate(6 12)" }) }) })] }));
 const SquircleIcon = ({ icon, alt, }) => {
@@ -580,11 +580,12 @@ const walletConfigs = {
             edge: "https://rainbow.me/extension?utm_source=daimopay",
             brave: "https://rainbow.me/extension?utm_source=daimopay",
         },
-        showInMobileConnectors: true,
+        showInMobileConnectors: false,
         isWcMobileConnector: false,
         getWalletConnectDeeplink: (uri) => {
-            return `https://rnbwapp.com/wc?uri=${encodeURIComponent(uri)}&connector=daimopay`;
+            return `rainbow://wc?uri=${encodeURIComponent(uri)}&connector=daimopay`;
         },
+        walletDeepLink: "rainbow://",
     },
     "io.rabby": {
         name: "Rabby Wallet",
@@ -732,7 +733,7 @@ const walletConfigs = {
         getWalletConnectDeeplink: (uri) => {
             return `https://app.zerion.io/wc?uri=${encodeURIComponent(uri)}`;
         },
-        showInMobileConnectors: false,
+        showInMobileConnectors: true,
     },
     slope: {
         name: "Slope",
@@ -838,7 +839,7 @@ function extractWcWalletFromProvider(p, log) {
             isWcMobileConnector: true,
         };
     }
-    log(`[WCWALLET] name: ${name} wcWallet: ${wallet?.name} isWcMobileConnector: ${wallet?.isWcMobileConnector} provider: ${p}`);
+    log(`[WCWALLET] name: ${name} wcWallet: ${wallet?.name} isWcMobileConnector: ${wallet?.isWcMobileConnector} provider: `, p);
     return wallet;
 }
 
@@ -997,7 +998,7 @@ function useOrderUsdLimits({ trpc }) {
     return { limits, loading };
 }
 
-function usePayWithSolanaToken({ trpc, daimoPayOrder, setDaimoPayOrder, createOrHydrate, log, }) {
+function usePayWithSolanaToken({ trpc, refundAddress, daimoPayOrder, setDaimoPayOrder, createOrHydrate, log, }) {
     const { connection } = useConnection();
     const wallet = useWallet$1();
     const payWithSolanaToken = async (inputToken) => {
@@ -1006,6 +1007,7 @@ function usePayWithSolanaToken({ trpc, daimoPayOrder, setDaimoPayOrder, createOr
         const orderId = daimoPayOrder.id;
         const { hydratedOrder } = await createOrHydrate({
             order: daimoPayOrder,
+            refundAddress,
         });
         log(`[CHECKOUT] Hydrated order: ${JSON.stringify(hydratedOrder)}, checking out with Solana ${inputToken}`);
         const txHash = await (async () => {
@@ -1040,7 +1042,7 @@ function usePayWithSolanaToken({ trpc, daimoPayOrder, setDaimoPayOrder, createOr
     return { payWithSolanaToken };
 }
 
-function usePayWithToken({ trpc, senderAddr, daimoPayOrder, setDaimoPayOrder, createOrHydrate, log, }) {
+function usePayWithToken({ trpc, senderAddr, refundAddress, daimoPayOrder, setDaimoPayOrder, createOrHydrate, log, }) {
     const { writeContractAsync } = useWriteContract();
     const { sendTransactionAsync } = useSendTransaction();
     /** Commit to a token + amount = initiate payment. */
@@ -1051,7 +1053,8 @@ function usePayWithToken({ trpc, senderAddr, daimoPayOrder, setDaimoPayOrder, cr
         const paymentAmount = BigInt(required.amount) + BigInt(fees.amount);
         const { hydratedOrder } = await createOrHydrate({
             order: daimoPayOrder,
-            refundAddress: senderAddr,
+            // Use the developer-provided refund address. Default to the sender.
+            refundAddress: refundAddress ?? senderAddr,
         });
         log(`[PAY TOKEN] hydrated order: ${JSON.stringify(hydratedOrder)}, paying ${paymentAmount} of token ${required.token.token}`);
         setDaimoPayOrder(hydratedOrder);
@@ -1187,6 +1190,14 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
     // Solana wallet state.
     const solanaWallet = useWallet$1();
     const solanaPubKey = solanaWallet.publicKey?.toBase58();
+    // TODO: backend should determine whether to show solana payment method
+    const paymentOptions = daimoPayOrder?.metadata.payer?.paymentOptions;
+    // Include by default if paymentOptions not provided. Solana bridging is only
+    // supported on CCTP v1 chains.
+    const showSolanaPaymentMethod = (paymentOptions == null ||
+        paymentOptions.includes(ExternalPaymentOptions.Solana)) &&
+        daimoPayOrder != null &&
+        isCCTPV1Chain(getOrderDestChainId(daimoPayOrder));
     // Daimo Pay order state.
     const [payParams, setPayParamsState] = useState();
     const [paymentWaitingMessage, setPaymentWaitingMessage] = useState();
@@ -1260,6 +1271,7 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
     const { payWithToken } = usePayWithToken({
         trpc,
         senderAddr,
+        refundAddress: payParams?.refundAddress,
         daimoPayOrder,
         setDaimoPayOrder,
         createOrHydrate,
@@ -1267,6 +1279,7 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
     });
     const { payWithSolanaToken } = usePayWithSolanaToken({
         trpc,
+        refundAddress: payParams?.refundAddress,
         daimoPayOrder,
         setDaimoPayOrder,
         createOrHydrate,
@@ -1333,11 +1346,11 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
     const setChosenUsd = (usd) => {
         assert(!!daimoPayOrder, "[SET CHOSEN USD] daimoPayOrder cannot be null");
         const token = daimoPayOrder.destFinalCallTokenAmount.token;
-        const tokenUnits = (usd / token.usd).toString();
+        const tokenUnits = (usd / token.priceFromUsd).toString();
         const tokenAmount = parseUnits(tokenUnits, token.decimals);
         // TODO: remove amount from destFinalCall, it is redundant with
         // destFinalCallTokenAmount. Here, we only modify one and not the other.
-        log(`[CHECKOUT] setting chosen USD amount to $${usd} = ${tokenUnits} ${token.symbol}`);
+        log(`[CHECKOUT] chose USD amount $${usd} = ${tokenUnits} ${token.symbol}`);
         setDaimoPayOrder({
             ...daimoPayOrder,
             destFinalCallTokenAmount: {
@@ -1394,6 +1407,7 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
             },
             externalId: payParams.externalId,
             userMetadata: payParams.metadata,
+            refundAddress: payParams.refundAddress,
         });
         log(`[CHECKOUT] generated preview: ${JSON.stringify(orderPreview)}`);
         setDaimoPayOrder(orderPreview);
@@ -1404,6 +1418,9 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
             setTimeout(() => setOpen(false, { event: "wait-success" }), 1000);
         }
     };
+    const resetOrder = () => {
+        setDaimoPayOrder(undefined);
+    };
     return {
         setPayId,
         payParams,
@@ -1418,11 +1435,13 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
         selectedTokenOption,
         selectedSolanaTokenOption,
         externalPaymentOptions,
+        showSolanaPaymentMethod,
         walletPaymentOptions,
         solanaPaymentOptions,
         depositAddressOptions,
         selectedDepositAddressOption,
         getOrderUsdLimit,
+        resetOrder,
         setPaymentWaitingMessage,
         setSelectedExternalOption,
         setSelectedTokenOption,
@@ -4882,9 +4901,39 @@ const useWallet = (id) => {
         return null;
     return wallet;
 };
-const useWallets = () => {
+const useWallets = (isMobile) => {
     const connectors = useConnectors();
     const context = usePayContext();
+    if (isMobile) {
+        const mobileWallets = [];
+        // Add Rainbow first
+        mobileWallets.push({
+            id: "me.rainbow",
+            ...walletConfigs["me.rainbow"],
+        });
+        // Add MetaMask second
+        const metaMaskConnector = connectors.find((c) => c.id === "metaMask");
+        if (metaMaskConnector) {
+            mobileWallets.push({
+                id: metaMaskConnector.id,
+                connector: metaMaskConnector,
+                ...walletConfigs["metaMask, metaMask-io, io.metamask, io.metamask.mobile, metaMaskSDK"],
+            });
+        }
+        // Add WalletConnect and other wallets
+        connectors.forEach((connector) => {
+            if (connector.id === "metaMask")
+                return;
+            if (isCoinbaseWalletConnector(connector.id))
+                return;
+            mobileWallets.push({
+                id: connector.id,
+                connector,
+                ...walletConfigs[connector.id],
+            });
+        });
+        return mobileWallets;
+    }
     const wallets = connectors.map((connector) => {
         // use overrides
         const walletId = Object.keys(walletConfigs).find(
@@ -4939,8 +4988,8 @@ const useWallets = () => {
         self.find((w) => w.id === "farcaster")))
         // order by isInstalled injected connectors first
         .sort((a, b) => {
-        const AisInstalled = a.isInstalled && isInjectedConnector(a.connector.type);
-        const BisInstalled = b.isInstalled && isInjectedConnector(b.connector.type);
+        const AisInstalled = a.isInstalled && isInjectedConnector(a.connector?.type);
+        const BisInstalled = b.isInstalled && isInjectedConnector(b.connector?.type);
         if (AisInstalled && !BisInstalled)
             return -1;
         if (!AisInstalled && BisInstalled)
@@ -7241,15 +7290,15 @@ const ConnectorsContainer = styled.div `
 const ConnectorList = () => {
     const context = usePayContext();
     const { isMobile } = useIsMobile();
-    const wallets = useWallets();
+    const wallets = useWallets(isMobile);
     const { lastConnectorId } = useLastConnector();
     const walletsToDisplay = context.options?.hideRecentBadge || lastConnectorId === "walletConnect" // do not hoist walletconnect to top of list
         ? wallets
         : [
             // move last used wallet to top of list
             // using .filter and spread to avoid mutating original array order with .sort
-            ...wallets.filter((wallet) => lastConnectorId === wallet.connector.id),
-            ...wallets.filter((wallet) => lastConnectorId !== wallet.connector.id),
+            ...wallets.filter((wallet) => lastConnectorId === wallet.connector?.id),
+            ...wallets.filter((wallet) => lastConnectorId !== wallet.connector?.id),
         ];
     return (jsxs(ScrollArea, { mobileDirection: "horizontal", children: [walletsToDisplay.length === 0 && (jsx(Alert, { error: true, children: "No connectors found in ConnectKit config." })), walletsToDisplay.length > 0 && (jsx(ConnectorsContainer, { "$mobile": isMobile, "$totalResults": walletsToDisplay.length, children: walletsToDisplay.map((wallet) => (jsx(ConnectorItem, { wallet: wallet, isRecent: wallet.id === lastConnectorId }, wallet.id))) }))] }));
 };
@@ -7266,7 +7315,7 @@ const ConnectorItem = ({ wallet, isRecent, }) => {
     const redirectToMoreWallets = isMobile && isWalletConnectConnector(wallet.id);
     // Safari requires opening popup on user gesture, so we connect immediately here
     const shouldConnectImmediately = (detectBrowser() === "safari" || detectBrowser() === "ios") &&
-        isCoinbaseWalletConnector(wallet.connector.id);
+        isCoinbaseWalletConnector(wallet.connector?.id);
     if (redirectToMoreWallets || shouldConnectImmediately)
         deeplink = undefined; // mobile redirects to more wallets page
     return (jsxs(ConnectorButton, { type: "button", as: deeplink ? "a" : undefined, href: deeplink ? deeplink : undefined, disabled: context.route !== ROUTES.CONNECTORS, onClick: deeplink
@@ -8220,7 +8269,7 @@ const MobileConnectors = () => {
     // filter out installed wallets
     const walletsIdsToDisplay = Object.keys(walletConfigs).filter((walletId) => {
         const wallet = walletConfigs[walletId];
-        if (wallets.find((w) => w.connector.id === walletId))
+        if (wallets.find((w) => w.connector?.id === walletId))
             return false;
         if (!wallet.getWalletConnectDeeplink)
             return false;
@@ -9352,7 +9401,7 @@ const ConnectWithInjector = ({ switchConnectMethod, forceState }) => {
         return (jsx(PageContent, { children: jsxs(Container$4, { children: [jsx(ModalHeading, { children: "Invalid State" }), jsx(ModalContent, { children: jsx(Alert, { children: "No connectors match the id given. This state should never happen." }) })] }) }));
     }
     // TODO: Make this more generic
-    if (isWalletConnectConnector(wallet?.connector.id)) {
+    if (isWalletConnectConnector(wallet?.connector?.id)) {
         return (jsx(PageContent, { children: jsxs(Container$4, { children: [jsx(ModalHeading, { children: "Invalid State" }), jsx(ModalContent, { children: jsx(Alert, { children: "WalletConnect does not have an injection flow. This state should never happen." }) })] }) }));
     }
     return (jsx(PageContent, { children: jsxs(Container$4, { children: [jsx(ConnectingContainer, { children: jsxs(ConnectingAnimation, { "$shake": status === states$1.FAILED || status === states$1.REJECTED, "$circle": walletInfo.iconShape === "circle", children: [jsx(AnimatePresence, { children: (status === states$1.FAILED || status === states$1.REJECTED) && (jsx(RetryButton, { "aria-label": "Retry", initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, whileTap: { scale: 0.9 }, transition: { duration: 0.1 }, onClick: runConnect, children: jsx(RetryIconContainer, { children: jsx(Tooltip, { open: showTryAgainTooltip &&
@@ -9364,9 +9413,9 @@ const ConnectWithInjector = ({ switchConnectMethod, forceState }) => {
                                         transform: "scale(1.14)",
                                         position: "relative",
                                         width: "100%",
-                                    }, children: walletInfo.icon })) : (jsx(Fragment, { children: walletInfo.icon })), loading: status === states$1.CONNECTING }))] }) }), jsx(ModalContentContainer, { children: jsxs(AnimatePresence, { initial: false, children: [status === states$1.FAILED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants$1, children: jsxs(ModalContent, { children: [jsxs(ModalH1, { "$error": true, children: [jsx(AlertIcon, {}), locales.injectionScreen_failed_h1] }), jsx(ModalBody, { children: locales.injectionScreen_failed_p })] }) }, states$1.FAILED)), status === states$1.REJECTED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants$1, children: jsxs(ModalContent, { style: { paddingBottom: 28 }, children: [jsx(ModalH1, { children: locales.injectionScreen_rejected_h1 }), jsx(ModalBody, { children: locales.injectionScreen_rejected_p })] }) }, states$1.REJECTED)), (status === states$1.CONNECTING || status === states$1.EXPIRING) && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants$1, children: jsxs(ModalContent, { style: { paddingBottom: 28 }, children: [jsx(ModalH1, { children: wallet.connector.id === "injected"
+                                    }, children: walletInfo.icon })) : (jsx(Fragment, { children: walletInfo.icon })), loading: status === states$1.CONNECTING }))] }) }), jsx(ModalContentContainer, { children: jsxs(AnimatePresence, { initial: false, children: [status === states$1.FAILED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants$1, children: jsxs(ModalContent, { children: [jsxs(ModalH1, { "$error": true, children: [jsx(AlertIcon, {}), locales.injectionScreen_failed_h1] }), jsx(ModalBody, { children: locales.injectionScreen_failed_p })] }) }, states$1.FAILED)), status === states$1.REJECTED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants$1, children: jsxs(ModalContent, { style: { paddingBottom: 28 }, children: [jsx(ModalH1, { children: locales.injectionScreen_rejected_h1 }), jsx(ModalBody, { children: locales.injectionScreen_rejected_p })] }) }, states$1.REJECTED)), (status === states$1.CONNECTING || status === states$1.EXPIRING) && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants$1, children: jsxs(ModalContent, { style: { paddingBottom: 28 }, children: [jsx(ModalH1, { children: wallet.connector?.id === "injected"
                                                 ? locales.injectionScreen_connecting_injected_h1
-                                                : locales.injectionScreen_connecting_h1 }), jsx(ModalBody, { children: wallet.connector.id === "injected"
+                                                : locales.injectionScreen_connecting_h1 }), jsx(ModalBody, { children: wallet.connector?.id === "injected"
                                                 ? locales.injectionScreen_connecting_injected_p
                                                 : locales.injectionScreen_connecting_p }), jsxs(Button, { icon: jsx(ExternalLinkIcon, {}), onClick: runConnect, children: ["Connect ", walletInfo.name] })] }) }, states$1.CONNECTING)), status === states$1.CONNECTED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants$1, children: jsxs(ModalContent, { children: [jsxs(ModalH1, { "$valid": true, children: [jsx(TickIcon, {}), " ", locales.injectionScreen_connected_h1] }), jsx(ModalBody, { children: locales.injectionScreen_connected_p })] }) }, states$1.CONNECTED)), status === states$1.NOTCONNECTED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants$1, children: jsxs(ModalContent, { children: [jsx(ModalH1, { children: locales.injectionScreen_notconnected_h1 }), jsx(ModalBody, { children: locales.injectionScreen_notconnected_p })] }) }, states$1.NOTCONNECTED)), status === states$1.UNAVAILABLE && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants$1, children: !extensionUrl ? (jsxs(Fragment, { children: [jsxs(ModalContent, { style: { paddingBottom: 12 }, children: [jsx(ModalH1, { children: locales.injectionScreen_unavailable_h1 }), jsx(ModalBody, { children: locales.injectionScreen_unavailable_p })] }), !wallet.isInstalled && suggestedExtension && (jsxs(Button, { href: suggestedExtension?.url, icon: jsx(BrowserIcon, { browser: suggestedExtension?.name }), children: ["Install on ", suggestedExtension?.label] }))] })) : (jsxs(Fragment, { children: [jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [jsx(ModalH1, { children: locales.injectionScreen_install_h1 }), jsx(ModalBody, { children: locales.injectionScreen_install_p })] }), !wallet.isInstalled && extensionUrl && (jsx(Button, { href: extensionUrl, icon: jsx(BrowserIcon, {}), children: locales.installTheExtension }))] })) }, states$1.UNAVAILABLE))] }) })] }) }));
 };
@@ -9454,7 +9503,7 @@ const ConnectUsing = () => {
     useEffect(() => {
         // if no provider, change to qrcode
         const checkProvider = async () => {
-            const res = await wallet?.connector.getProvider();
+            const res = await wallet?.connector?.getProvider();
             if (!res) {
                 setStatus(states.QRCODE);
                 setTimeout(context.triggerResize, 10); // delay required here for modal to resize
@@ -9756,8 +9805,8 @@ const ChainLogoContainer = styled(motion.div) `
   }
 `;
 
-const TokenLogoSpinner = ({ token, showSpinner = true, }) => {
-    return (jsx(LoadingContainer$2, { children: jsx(AnimationContainer$1, { "$circle": true, children: jsxs(AnimatePresence, { children: [chainToLogo[token.chainId] && (jsx(ChainLogoContainer, { children: chainToLogo[token.chainId] }, "ChainLogoContainer")), jsx(CircleSpinner, { logo: jsx("img", { src: token.logoURI, alt: token.symbol }, token.logoURI), loading: showSpinner, unavailable: false }, "CircleSpinner")] }) }) }));
+const TokenLogoSpinner = ({ token }) => {
+    return (jsx(LoadingContainer$2, { children: jsx(AnimationContainer$1, { "$circle": true, children: jsxs(AnimatePresence, { children: [chainToLogo[token.chainId] && (jsx(ChainLogoContainer, { children: chainToLogo[token.chainId] }, "ChainLogoContainer")), jsx(CircleSpinner, { logo: jsx("img", { src: token.logoURI, alt: token.symbol }), loading: false, unavailable: false }, "CircleSpinner")] }) }) }));
 };
 
 var PayState$1;
@@ -9864,12 +9913,12 @@ const PayWithToken = () => {
     if (selectedTokenOption == null) {
         return jsx(PageContent, {});
     }
-    return (jsxs(PageContent, { children: [jsx(TokenLogoSpinner, { token: selectedTokenOption.required.token }), jsxs(ModalContent, { style: { paddingBottom: 0 }, "$preserveDisplay": true, children: [jsx(ModalH1, { children: payState }), jsx(PaymentBreakdown, { paymentOption: selectedTokenOption }), payState === PayState$1.RequestingPayment && wcWallet && isMobile && (jsxs(Button, { icon: jsx(ExternalLinkIcon, {}), onClick: wcWallet.isWcMobileConnector
+    return (jsxs(PageContent, { children: [jsx(TokenLogoSpinner, { token: selectedTokenOption.required.token }), jsxs(ModalContent, { style: { paddingBottom: 0 }, "$preserveDisplay": true, children: [jsx(ModalH1, { children: payState }), jsx(PaymentBreakdown, { paymentOption: selectedTokenOption }), payState === PayState$1.RequestingPayment && wcWallet && isMobile && (jsx(Button, { icon: jsx(ExternalLinkIcon, {}), onClick: wcWallet.isWcMobileConnector
                             ? () => handleTransfer(selectedTokenOption)
                             : undefined, href: wcWallet.isWcMobileConnector
                             ? undefined
                             : wcWallet.walletDeepLink ||
-                                wcWallet.getWalletConnectDeeplink?.(""), children: ["Pay with ", wcWallet.name] })), payState === PayState$1.RequestCancelled && (jsx(Button, { onClick: () => handleTransfer(selectedTokenOption), children: "Retry Payment" }))] })] }));
+                                wcWallet.getWalletConnectDeeplink?.(""), children: "Tap Here to Pay" })), payState === PayState$1.RequestCancelled && (jsx(Button, { onClick: () => handleTransfer(selectedTokenOption), children: "Retry Payment" }))] })] }));
 };
 
 /**
@@ -10082,7 +10131,7 @@ const MultiCurrencySelectAmount = ({ selectedTokenOption, setSelectedTokenOption
             tokenSymbol: balanceToken.symbol,
         });
     };
-    return (jsxs(PageContent, { children: [jsx(TokenLogoSpinner, { token: balanceToken, showSpinner: false }), jsxs(ModalContent, { "$preserveDisplay": true, children: [jsxs(AmountInputContainer$2, { children: [jsx(MaxButton, { style: { visibility: "hidden" }, children: "Max" }), jsx(AmountInputField, { value: isEditingUsd ? usdValue : tokenValue, onChange: handleAmountChange, currency: isEditingUsd ? "$" : balanceToken.symbol, onKeyDown: handleKeyDown }), jsx(MaxButton, { onClick: handleMax, children: "Max" })] }), balanceToken.fiatIso !== "USD" && (jsx(SwitchContainer, { children: jsx(SwitchButton, { onClick: handleSwitchCurrency, children: jsx(SecondaryAmount, { children: isEditingUsd
+    return (jsxs(PageContent, { children: [jsx(TokenLogoSpinner, { token: balanceToken }), jsxs(ModalContent, { "$preserveDisplay": true, children: [jsxs(AmountInputContainer$2, { children: [jsx(MaxButton, { style: { visibility: "hidden" }, children: "Max" }), jsx(AmountInputField, { value: isEditingUsd ? usdValue : tokenValue, onChange: handleAmountChange, currency: isEditingUsd ? "$" : balanceToken.symbol, onKeyDown: handleKeyDown }), jsx(MaxButton, { onClick: handleMax, children: "Max" })] }), balanceToken.fiatISO !== "USD" && (jsx(SwitchContainer, { children: jsx(SwitchButton, { onClick: handleSwitchCurrency, children: jsx(SecondaryAmount, { children: isEditingUsd
                                     ? `${tokenValue} ${balanceToken.symbol}`
                                     : `$${usdValue}` }) }) })), message && jsx(ModalBody, { children: message }), jsx(Button, { onClick: handleContinue, disabled: continueDisabled, children: "Continue" })] })] }));
 };
@@ -10130,13 +10179,13 @@ const SelectAmount = () => {
     return (jsx(MultiCurrencySelectAmount, { selectedTokenOption: selectedTokenOption, setSelectedTokenOption: setSelectedTokenOption, nextPage: ROUTES.PAY_WITH_TOKEN }));
 };
 
-const ExternalPaymentSpinner = ({ logoURI, logoShape, showSpinner = true, }) => {
+const ExternalPaymentSpinner = ({ logoURI, logoShape, }) => {
     const optionSpinner = (() => {
         if (logoShape === "circle") {
-            return (jsx(CircleSpinner, { logo: jsx("img", { src: logoURI }), loading: showSpinner, unavailable: false }));
+            return (jsx(CircleSpinner, { logo: jsx("img", { src: logoURI }), loading: false, unavailable: false }));
         }
         else {
-            return (jsx(SquircleSpinner, { logo: jsx("img", { src: logoURI }), loading: showSpinner }));
+            return jsx(SquircleSpinner, { logo: jsx("img", { src: logoURI }), loading: false });
         }
     })();
     return (jsx(LoadingContainer$2, { children: jsx(AnimationContainer$1, { "$circle": logoShape === "circle", children: jsx(AnimatePresence, { children: optionSpinner }) }) }));
@@ -10182,7 +10231,7 @@ const SelectDepositAddressAmount = () => {
         paymentState.setChosenUsd(amountUsd);
         setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS, { amountUsd });
     };
-    return (jsxs(PageContent, { children: [jsx(ExternalPaymentSpinner, { logoURI: selectedDepositAddressOption.logoURI, logoShape: "circle", showSpinner: false }), jsxs(ModalContent, { "$preserveDisplay": true, children: [jsx(AmountInputContainer$1, { children: jsx(AmountInputField, { value: usdInput, onChange: handleAmountChange, onKeyDown: handleKeyDown }) }), message && jsx(ModalBody, { children: message }), jsx(Button, { onClick: handleContinue, disabled: continueDisabled, children: "Continue" })] })] }));
+    return (jsxs(PageContent, { children: [jsx(ExternalPaymentSpinner, { logoURI: selectedDepositAddressOption.logoURI, logoShape: "circle" }), jsxs(ModalContent, { "$preserveDisplay": true, children: [jsx(AmountInputContainer$1, { children: jsx(AmountInputField, { value: usdInput, onChange: handleAmountChange, onKeyDown: handleKeyDown }) }), message && jsx(ModalBody, { children: message }), jsx(Button, { onClick: handleContinue, disabled: continueDisabled, children: "Continue" })] })] }));
 };
 const AmountInputContainer$1 = styled.div `
   display: flex;
@@ -10444,7 +10493,7 @@ const IconStackItem = styled(motion.div) `
   border-radius: 22.5%;
 `;
 
-const OptionsContainer = styled$1.div `
+const OptionsContainer = styled.div `
   width: 100%;
   margin-top: 1rem;
 `;
@@ -10593,7 +10642,7 @@ const SelectExternalAmount = () => {
         paymentState.setChosenUsd(amountUsd);
         setRoute(ROUTES.WAITING_EXTERNAL, { amountUsd });
     };
-    return (jsxs(PageContent, { children: [jsx(ExternalPaymentSpinner, { logoURI: selectedExternalOption.logoURI, logoShape: selectedExternalOption.logoShape, showSpinner: false }), jsxs(ModalContent, { "$preserveDisplay": true, children: [jsx(AmountInputContainer, { children: jsx(AmountInputField, { value: usdInput, onChange: handleAmountChange, onKeyDown: handleKeyDown }) }), message && jsx(ModalBody, { children: message }), jsx(Button, { onClick: handleContinue, disabled: continueDisabled, children: "Continue" })] })] }));
+    return (jsxs(PageContent, { children: [jsx(ExternalPaymentSpinner, { logoURI: selectedExternalOption.logoURI, logoShape: selectedExternalOption.logoShape }), jsxs(ModalContent, { "$preserveDisplay": true, children: [jsx(AmountInputContainer, { children: jsx(AmountInputField, { value: usdInput, onChange: handleAmountChange, onKeyDown: handleKeyDown }) }), message && jsx(ModalBody, { children: message }), jsx(Button, { onClick: handleContinue, disabled: continueDisabled, children: "Continue" })] })] }));
 };
 const AmountInputContainer = styled.div `
   display: flex;
@@ -10625,7 +10674,7 @@ function SelectMethod() {
     const { connected: isSolanaConnected, wallet: solanaWallet, publicKey, } = useWallet$1();
     const { setRoute, paymentState, wcWallet, log } = usePayContext();
     const { disconnectAsync } = useDisconnect();
-    const { daimoPayOrder, setSelectedExternalOption, externalPaymentOptions, depositAddressOptions, senderEnsName, } = paymentState;
+    const { daimoPayOrder, setSelectedExternalOption, externalPaymentOptions, showSolanaPaymentMethod, depositAddressOptions, senderEnsName, } = paymentState;
     const paymentOptions = daimoPayOrder?.metadata.payer?.paymentOptions;
     const getConnectedWalletOptions = () => {
         const showChainLogo = isEthConnected && isSolanaConnected;
@@ -10660,7 +10709,7 @@ function SelectMethod() {
             };
             connectedOptions.push(connectedEthWalletOption);
         }
-        if (isSolanaConnected && includeSolana) {
+        if (isSolanaConnected && showSolanaPaymentMethod) {
             const solWalletDisplayName = getAddressContraction(publicKey?.toBase58() ?? "");
             const connectedSolWalletOption = {
                 id: "connectedSolanaWallet",
@@ -10685,13 +10734,9 @@ function SelectMethod() {
         }
         return connectedOptions;
     };
-    // Solana payment option
-    // Include by default if paymentOptions not provided
-    const includeSolana = paymentOptions == null ||
-        paymentOptions.includes(ExternalPaymentOptions.Solana);
     // Deposit address options, e.g. Bitcoin, Tron, Zcash, etc.
     // Include by default if paymentOptions not provided
-    const includeDepositAddressOption = paymentOptions == null ||
+    const showDepositAddressMethod = paymentOptions == null ||
         paymentOptions.includes(ExternalPaymentOptions.ExternalChains);
     const connectedWalletOptions = getConnectedWalletOptions();
     const unconnectedWalletOption = {
@@ -10709,7 +10754,7 @@ function SelectMethod() {
     options.push(...connectedWalletOptions);
     options.push(unconnectedWalletOption);
     log(`[SELECT_METHOD] loading: ${externalPaymentOptions.loading}, options: ${JSON.stringify(externalPaymentOptions.options)}`);
-    if (includeSolana) {
+    if (showSolanaPaymentMethod) {
         const solanaOption = getSolanaOption(isIOS);
         if (solanaOption) {
             options.push(solanaOption);
@@ -10733,7 +10778,7 @@ function SelectMethod() {
         disabled: option.disabled,
         subtitle: option.message,
     })));
-    if (includeDepositAddressOption) {
+    if (showDepositAddressMethod) {
         const depositAddressOption = getDepositAddressOption(depositAddressOptions);
         options.push(depositAddressOption);
     }
@@ -10993,7 +11038,7 @@ var PayState;
 })(PayState || (PayState = {}));
 const PayWithSolanaToken = () => {
     const { triggerResize, paymentState, setRoute } = usePayContext();
-    const { payParams, generatePreviewOrder, selectedSolanaTokenOption, payWithSolanaToken, } = paymentState;
+    const { selectedSolanaTokenOption, payWithSolanaToken } = paymentState;
     const [payState, setPayState] = useState(PayState.RequestingPayment);
     const handleTransfer = async () => {
         try {
@@ -11130,6 +11175,7 @@ const WaitingExternal = () => {
     const context = usePayContext();
     const { triggerResize, paymentState, setRoute } = context;
     const trpc = context.trpc;
+    const { isMobile } = useIsMobile();
     const { selectedExternalOption, payWithExternal, paymentWaitingMessage, daimoPayOrder, } = paymentState;
     const [externalURL, setExternalURL] = useState(null);
     useEffect(() => {
@@ -11155,17 +11201,19 @@ const WaitingExternal = () => {
         });
     }, [selectedExternalOption]);
     const openExternalWindow = (url) => {
-        if (selectedExternalOption?.id === "Coinbase") {
-            //opening Coinbase onramp in a popup window in portrait mode in the center of the screen
+        if (isMobile) {
+            // on mobile: open in a new tab
+            window.open(url, "_blank");
+        }
+        else {
+            // on desktop: open in a popup window in
+            // portrait mode in the center of the screen
             const width = 500;
             const height = 700;
             const left = Math.max(0, Math.floor((window.innerWidth - width) / 2) + window.screenX);
             const top = Math.max(0, Math.floor((window.innerHeight - height) / 2) + window.screenY);
             window.open(url, "popupWindow", `width=${width},height=${height},left=${left},top=${top},scrollbars=yes`);
         }
-        else {
-            window.open(url, "_blank");
-        }
     };
     const waitingMessageLength = paymentWaitingMessage?.length;
     useEffect(() => {
@@ -11185,14 +11233,14 @@ const customThemeDefault = {};
 const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThemeDefault, lang = "en-US", }) => {
     const context = usePayContext();
     const paymentState = context.paymentState;
-    const { payParams, generatePreviewOrder, isDepositFlow, setPaymentWaitingMessage, setSelectedExternalOption, setSelectedTokenOption, setSelectedSolanaTokenOption, setSelectedDepositAddressOption, } = paymentState;
+    const { payParams, generatePreviewOrder, isDepositFlow, showSolanaPaymentMethod, setPaymentWaitingMessage, setSelectedExternalOption, setSelectedTokenOption, setSelectedSolanaTokenOption, setSelectedDepositAddressOption, } = paymentState;
     const { isConnected: isEthConnected, connector, chain, address, } = useAccount();
     const { connected: isSolanaConnected } = useWallet$1();
     const { daimoPayOrder } = paymentState;
     const paymentOptions = daimoPayOrder?.metadata.payer?.paymentOptions;
     // Solana payment option
     // Include by default if paymentOptions not provided
-    const includeSolana = paymentOptions == null ||
+    paymentOptions == null ||
         paymentOptions.includes(ExternalPaymentOptions.Solana);
     const chainIsSupported = useChainIsSupported(chain?.id);
     //if chain is unsupported we enforce a "switch chain" prompt
@@ -11312,34 +11360,42 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
         }
         context.setOpen(false, { event: "click-close" });
     }
-    // Separate effect for initial route when modal opens
+    // If the user has a wallet already connected upon opening the modal, go
+    // straight to the select token screen
     useEffect(() => {
-        if (context.open &&
-            !isSolanaConnected &&
-            (context.wcWallet || isEthConnected)) {
-            // Only set initial route if we're at SELECT_METHOD when opening
-            if (context.route === ROUTES.SELECT_METHOD) {
-                context.setRoute(ROUTES.SELECT_TOKEN, {
-                    event: "eth_connected_on_open",
-                    walletId: connector?.id,
-                    chainId: chain?.id,
-                    address,
-                });
-            }
+        if (!context.open)
+            return;
+        if (context.route !== ROUTES.SELECT_METHOD)
+            return;
+        const ethMethodAvailable = context.wcWallet != null || isEthConnected;
+        const solanaMethodAvailable = isSolanaConnected && showSolanaPaymentMethod;
+        // Skip to token selection if exactly one wallet is connected. If both
+        // wallets are connected, stay on the SELECT_METHOD screen to allow the
+        // user to select which wallet to use
+        if (ethMethodAvailable && !solanaMethodAvailable) {
+            context.setRoute(ROUTES.SELECT_TOKEN, {
+                event: "eth_connected_on_open",
+                walletId: connector?.id,
+                chainId: chain?.id,
+                address,
+            });
         }
-        else if (context.open &&
-            isSolanaConnected &&
-            !isEthConnected &&
-            context.wcWallet === undefined &&
-            includeSolana) {
-            if (context.route === ROUTES.SELECT_METHOD) {
-                context.setRoute(ROUTES.SOLANA_SELECT_TOKEN, {
-                    event: "solana_connected_on_open",
-                });
-            }
+        else if (solanaMethodAvailable && !ethMethodAvailable) {
+            context.setRoute(ROUTES.SOLANA_SELECT_TOKEN, {
+                event: "solana_connected_on_open",
+            });
         }
-        // If both are connected, do nothing and stay on SELECT_METHOD
-    }, [context.open]);
+        // Don't include context.route in the dependency array otherwise the user
+        // can't go back from the select token screen to the select method screen
+    }, [
+        context.open,
+        context.wcWallet,
+        isEthConnected,
+        isSolanaConnected,
+        showSolanaPaymentMethod,
+    ]);
+    // If we're on the connect page and the user successfully connects their
+    // wallet, go to the select token page
     useEffect(() => {
         if (context.route === ROUTES.CONNECT ||
             context.route === ROUTES.CONNECTORS ||
@@ -11353,7 +11409,7 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
                 });
             }
         }
-    }, [isEthConnected, context.route]);
+    }, [isEthConnected, context.route, connector?.id, chain?.id, address]);
     useEffect(() => context.setMode(mode), [mode]);
     useEffect(() => context.setTheme(theme), [theme]);
     useEffect(() => context.setCustomTheme(customTheme), [customTheme]);
@@ -11452,18 +11508,43 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
     const [ckMode, setMode] = useState(mode);
     const [ckCustomTheme, setCustomTheme] = useState(customTheme ?? {});
     const [ckLang, setLang] = useState("en-US");
+    const onOpenRef = useRef();
+    const onCloseRef = useRef();
+    const setOnOpen = useCallback((fn) => {
+        onOpenRef.current = fn;
+    }, []);
+    const setOnClose = useCallback((fn) => {
+        onCloseRef.current = fn;
+    }, []);
     const [open, setOpenState] = useState(false);
-    const setOpen = (open, meta) => {
+    const [route, setRouteState] = useState(ROUTES.SELECT_METHOD);
+    // Daimo Pay context
+    const [daimoPayOrder, setDaimoPayOrderInner] = useState();
+    const [pendingConnectorId, setPendingConnectorId] = useState(undefined);
+    // Track sessions. Each generates separate intent IDs unless using externalId.
+    const [sessionId] = useState(() => crypto.randomUUID().replaceAll("-", ""));
+    const [solanaConnector, setSolanaConnector] = useState();
+    // Other configuration
+    const [errorMessage, setErrorMessage] = useState("");
+    const [confirmationMessage, setConfirmationMessage] = useState(undefined);
+    const [redirectReturnUrl, setRedirectReturnUrl] = useState(undefined);
+    const log = debugMode ? console.log : () => { };
+    // Connect to the Daimo Pay TRPC API
+    const trpc = useMemo(() => createTrpcClient(payApiUrl, sessionId), [payApiUrl]);
+    const [resize, onResize] = useState(0);
+    const setOpen = useCallback((open, meta) => {
         setOpenState(open);
         trpc.nav.mutate({
             action: open ? "navOpenPay" : "navClosePay",
             orderId: daimoPayOrder?.id?.toString(),
             data: meta ?? {},
         });
-    };
-    const [solanaConnector, setSolanaConnector] = useState();
-    const [route, setRouteState] = useState(ROUTES.SELECT_METHOD);
-    const setRoute = (route, data) => {
+        if (open)
+            onOpenRef.current?.();
+        else
+            onCloseRef.current?.();
+    }, [trpc, daimoPayOrder?.id]);
+    const setRoute = useCallback((route, data) => {
         const action = route.replace("daimoPay", "");
         log(`[SET ROUTE] ${action} ${daimoPayOrder?.id} ${debugJson(data ?? {})}`);
         trpc.nav.mutate({
@@ -11472,15 +11553,10 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
             data: data ?? {},
         });
         setRouteState(route);
-    };
-    const [errorMessage, setErrorMessage] = useState("");
-    const [confirmationMessage, setConfirmationMessage] = useState(undefined);
-    const [redirectReturnUrl, setRedirectReturnUrl] = useState(undefined);
-    const [resize, onResize] = useState(0);
-    const [pendingConnectorId, setPendingConnectorId] = useState(undefined);
+    }, [trpc, daimoPayOrder?.id, log]);
     // Include Google Font that is needed for a themes
     if (opts.embedGoogleFonts)
-        useThemeFont(theme);
+        useThemeFont(ckTheme);
     // Other Configuration
     useEffect(() => setTheme(theme), [theme]);
     useEffect(() => setLang(opts.language || "en-US"), [opts.language]);
@@ -11491,31 +11567,30 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
     useEffect(() => {
         if (isConnected && opts.enforceSupportedChains && !isChainSupported) {
             setOpen(true);
-            setRoute(ROUTES.SWITCHNETWORKS);
+            if (route !== ROUTES.SWITCHNETWORKS)
+                setRoute(ROUTES.SWITCHNETWORKS);
         }
     }, [isConnected, isChainSupported, chain, route, open]);
-    const log = debugMode ? console.log : () => { };
-    // Track sessions. Each generates separate intent IDs unless using externalId.
-    const [sessionId] = useState(() => crypto.randomUUID().replaceAll("-", ""));
     // Single source of truth for the currently-connected wallet is the connector
     // exposed by wagmi. See useAccount(). We watch this connector and use it to
     // extract the current WalletConnect wallet, if any.
     const wcWallet = useExtractWcWallet({ connector, log });
-    // Connect to the Daimo Pay TRPC API
-    const trpc = useMemo(() => createTrpcClient(payApiUrl, sessionId), [payApiUrl]);
     // PaymentInfo is a second, inner context object containing a DaimoPayOrder
     // plus all associated status and callbacks. In order for useContext() and
     // downstream hooks like useDaimoPayStatus() to work correctly, we must set
     // set refresh context when payment status changes; done via setDaimoPayOrder.
-    const [daimoPayOrder, setDaimoPayOrderInner] = useState();
     const setDaimoPayOrder = useCallback((order) => {
         setDaimoPayOrderInner(order);
+        if (order == null) {
+            log(`[PAY] setDaimoPayOrder: reset`);
+            return;
+        }
         let extra = `> $${order.destFinalCallTokenAmount.usd.toFixed(2)} to ${order.destFinalCallTokenAmount.token.chainId} ${order.destFinalCall.to}`;
         if (order.mode === DaimoPayOrderMode.HYDRATED) {
             extra += ` via ${order.intentAddr} ${order.sourceStatus} ${order.intentStatus}`;
         }
         log(`[PAY] setDaimoPayOrder: ${order.id} ${extra}`);
-    }, [setDaimoPayOrderInner]);
+    }, [log]);
     const paymentState = usePaymentState({
         trpc,
         daimoPayOrder,
@@ -11546,7 +11621,6 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         return () => clearTimeout(timeout);
     }, [daimoPayOrder]);
     const showPayment = async (modalOptions) => {
-        const { daimoPayOrder } = paymentState;
         const id = daimoPayOrder?.id;
         log(`[PAY] showing payment ${debugJson({ id, modalOptions })}`);
         paymentState.setModalOptions(modalOptions);
@@ -11572,6 +11646,8 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         setCustomTheme,
         lang: ckLang,
         setLang,
+        setOnOpen,
+        setOnClose,
         open,
         setOpen,
         route,
@@ -11857,10 +11933,12 @@ function DaimoPayButtonCustom(props) {
             evmChains: props.evmChains,
             externalId: props.externalId,
             metadata: props.metadata,
+            refundAddress: props.refundAddress,
         }
         : null;
     let payId = "payId" in props ? props.payId : null;
     const { paymentState } = context;
+    // Set the payId or payParams
     useEffect(() => {
         if (payId != null) {
             paymentState.setPayId(payId);
@@ -11869,18 +11947,30 @@ function DaimoPayButtonCustom(props) {
             paymentState.setPayParams(payParams);
         }
     }, [payId, JSON.stringify(payParams || {})]);
+    // Set the confirmation message
     const { setConfirmationMessage } = context;
     useEffect(() => {
         if (props.confirmationMessage) {
             setConfirmationMessage(props.confirmationMessage);
         }
     }, [props.confirmationMessage, setConfirmationMessage]);
+    // Set the redirect return url
     const { setRedirectReturnUrl } = context;
     useEffect(() => {
         if (props.redirectReturnUrl) {
             setRedirectReturnUrl(props.redirectReturnUrl);
         }
     }, [props.redirectReturnUrl, setRedirectReturnUrl]);
+    // Set the onOpen and onClose callbacks
+    const { setOnOpen, setOnClose } = context;
+    useEffect(() => {
+        setOnOpen(props.onOpen);
+        return () => setOnOpen(undefined);
+    }, [props.onOpen, setOnOpen]);
+    useEffect(() => {
+        setOnClose(props.onClose);
+        return () => setOnClose(undefined);
+    }, [props.onClose, setOnClose]);
     // Payment events: call these three event handlers.
     const { onPaymentStarted, onPaymentCompleted, onPaymentBounced } = props;
     const order = paymentState.daimoPayOrder;
@@ -11896,21 +11986,23 @@ function DaimoPayButtonCustom(props) {
     };
     const hide = () => context.setOpen(false);
     // Emit event handlers when payment status changes
+    const sentStart = useRef(false);
     useEffect(() => {
         if (hydOrder == null)
             return;
         if (intentStatus === DaimoPayIntentStatus.UNPAID)
             return;
-        if (intentStatus === DaimoPayIntentStatus.STARTED) {
+        if (!sentStart.current && hydOrder.sourceTokenAmount) {
+            sentStart.current = true;
             onPaymentStarted?.({
                 type: DaimoPayIntentStatus.STARTED,
                 paymentId: writeDaimoPayOrderID(hydOrder.id),
-                chainId: hydOrder.destFinalCallTokenAmount.token.chainId,
-                txHash: assertNotNull(hydOrder.sourceInitiateTxHash, `[PAY BUTTON] source initiate tx hash null on order ${hydOrder.id} when intent status is ${intentStatus}`),
+                chainId: hydOrder.sourceTokenAmount?.token.chainId,
+                txHash: hydOrder.sourceInitiateTxHash ?? null,
                 payment: getDaimoPayOrderView(hydOrder),
             });
         }
-        else if (intentStatus === DaimoPayIntentStatus.COMPLETED ||
+        if (intentStatus === DaimoPayIntentStatus.COMPLETED ||
             intentStatus === DaimoPayIntentStatus.BOUNCED) {
             const event = {
                 type: intentStatus,
@@ -11926,12 +12018,13 @@ function DaimoPayButtonCustom(props) {
                 onPaymentBounced?.(event);
             }
         }
-    }, [hydOrder?.id, intentStatus]);
+    }, [hydOrder?.id, intentStatus, hydOrder?.sourceTokenAmount?.token.chainId]);
+    // Open the modal by default if the defaultOpen prop is true
     useEffect(() => {
-        if (props.defaultOpen) {
+        if (props.defaultOpen && order != null) {
             show();
         }
-    }, [order != null]);
+    }, [order != null, props.defaultOpen]);
     // Validation
     if ((payId == null) == (payParams == null)) {
         throw new Error("Must specify either payId or appId, not both");
@@ -11986,11 +12079,12 @@ function DaimoPayButtonInner({ disabled }) {
  */
 function useDaimoPayStatus() {
     const { paymentState } = usePayContext();
+    const reset = paymentState.resetOrder;
     if (!paymentState || !paymentState.daimoPayOrder)
-        return undefined;
+        return { reset };
     const order = paymentState.daimoPayOrder;
     const paymentId = writeDaimoPayOrderID(order.id);
-    return { paymentId, status: order.intentStatus };
+    return { paymentId, status: order.intentStatus, reset };
 }
 
 function addressToNumber(address) {