@daimo/pay 1.7.3 → 1.7.5

package/build/index.js

@@ -1,7 +1,7 @@
 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 React, { useState, useEffect, createContext, useRef, useCallback, useLayoutEffect, useMemo, createElement } from 'react';
 import styled$1, { css, keyframes, ThemeProvider } from 'styled-components';
 import { http, useConfig, useAccountEffect, useWriteContract, useSendTransaction, useAccount, useEnsName, useConnectors as useConnectors$1, useSwitchChain, useConnect as useConnect$1, useDisconnect, useChainId, WagmiContext, createConfig, useEnsAddress, useEnsAvatar } from 'wagmi';
 import { mainnet, base as base$1, polygon, optimism, arbitrum, linea, bsc, sepolia, baseSepolia, worldchain, blast, mantle } from 'wagmi/chains';
@@ -22,7 +22,7 @@ import { WalletSignTransactionError, WalletSendTransactionError } from '@solana/
 import { normalize } from 'viem/ens';
 
 var name = "@daimo/pay";
-var version = "1.7.3";
+var version = "1.7.5";
 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.3",
+	"@daimo/pay-common": "1.7.5",
 	"@rollup/plugin-typescript": "^12.1.2",
 	"@solana/wallet-adapter-base": "^0.9.23",
 	"@solana/wallet-adapter-react": "^0.15.35",
@@ -94,6 +94,7 @@ var devDependencies = {
 	"@types/react-dom": "^18.2.18",
 	"@types/rollup-plugin-peer-deps-external": "^2.2.5",
 	"@types/styled-components": "^5.1.25",
+	"eslint-plugin-react-hooks": "^5.2.0",
 	rollup: "^3.29.5",
 	"rollup-plugin-dts": "^6.1.1",
 	"rollup-plugin-peer-deps-external": "^2.2.4",
@@ -244,14 +245,6 @@ const defaultConfig = ({ appName = "Daimo Pay", appIcon, appDescription, appUrl,
     return config;
 };
 
-/** Determines whether the current wagmi configuration supports a given chain. */
-function useChainIsSupported(chainId) {
-    const { chains } = useConfig();
-    if (!chainId)
-        return false;
-    return chains.some((x) => x.id === chainId);
-}
-
 /** Returns currently configured wagmi chains. */
 function useChains() {
     const wagmi = useConfig();
@@ -377,7 +370,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 +573,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 +726,7 @@ const walletConfigs = {
         getWalletConnectDeeplink: (uri) => {
             return `https://app.zerion.io/wc?uri=${encodeURIComponent(uri)}`;
         },
-        showInMobileConnectors: false,
+        showInMobileConnectors: true,
     },
     slope: {
         name: "Slope",
@@ -838,51 +832,10 @@ 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;
 }
 
-function useGoogleFont(font) {
-    useEffect(() => {
-        if (!font)
-            return;
-        font = font.replace(/ /g, "+");
-        const googleapis = document.createElement("link");
-        googleapis.href = `https://fonts.googleapis.com`;
-        googleapis.rel = "preconnect";
-        const gstatic = document.createElement("link");
-        gstatic.href = `https://fonts.gstatic.com`;
-        gstatic.rel = "preconnect";
-        gstatic.crossOrigin = "true";
-        const link = document.createElement("link");
-        link.href = `https://fonts.googleapis.com/css2?family=${font}:wght@400;500;600&display=swap`;
-        link.rel = "stylesheet";
-        document.head.appendChild(googleapis);
-        document.head.appendChild(gstatic);
-        document.head.appendChild(link);
-        return () => {
-            try {
-                document.head.removeChild(googleapis);
-                document.head.removeChild(gstatic);
-                document.head.removeChild(link);
-            }
-            catch { }
-        };
-    }, [font]);
-}
-// TODO: This could be dynamic if theming wasn't set up as css variables
-function useThemeFont(theme) {
-    const themeFonts = {
-        web95: "Lato",
-        retro: "Nunito",
-        midnight: "Inter",
-        minimal: "Inter",
-        rounded: "Nunito",
-    };
-    const font = themeFonts[theme] ?? null;
-    useGoogleFont(font ?? "");
-}
-
 /** Daimo Pay internal context. */
 const usePayContext = () => {
     const context = React.useContext(PayContext);
@@ -1174,7 +1127,7 @@ function useWalletPaymentOptions({ trpc, address, usdRequired, destChainId, pref
     };
 }
 
-function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log, redirectReturnUrl, }) {
+function usePaymentState({ trpc, lockPayParams, daimoPayOrder, setDaimoPayOrder, setRoute, log, redirectReturnUrl, }) {
     // Browser state.
     const [platform, setPlatform] = useState();
     useEffect(() => {
@@ -1189,12 +1142,22 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
     // Solana wallet state.
     const solanaWallet = useWallet$1();
     const solanaPubKey = solanaWallet.publicKey?.toBase58();
-    // Daimo Pay order state.
+    // 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));
+    // Refs the survive re-renders and stores any updated param values while
+    // lockPayParams is true
+    const latestPayParamsRef = useRef();
+    const latestPayIdRef = useRef();
+    // Current pay params to do processing off of
     const [payParams, setPayParamsState] = useState();
     const [paymentWaitingMessage, setPaymentWaitingMessage] = useState();
     const [isDepositFlow, setIsDepositFlow] = useState(false);
-    // Payment UI config.
-    const [modalOptions, setModalOptions] = useState({});
     // UI state. Selection for external payment (Binance, etc) vs wallet payment.
     const externalPaymentOptions = useExternalPaymentOptions({
         trpc,
@@ -1332,16 +1295,16 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
         else {
             log(`[CHECKOUT] IGNORING refreshOrder, wrong ID: ${order.id} vs ${daimoPayOrder.id}`);
         }
-    }, [daimoPayOrder?.id]);
+    }, [daimoPayOrder, trpc, setDaimoPayOrder, log]);
     /** User picked a different deposit amount. */
     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: {
@@ -1352,7 +1315,8 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
         });
     };
     const setPayId = useCallback(async (payId) => {
-        if (!payId)
+        latestPayIdRef.current = payId;
+        if (lockPayParams || !payId)
             return;
         const id = readDaimoPayOrderID(payId).toString();
         if (daimoPayOrder && BigInt(id) == daimoPayOrder.id) {
@@ -1366,15 +1330,19 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
         }
         log(`[CHECKOUT] setPayId: fetched order: ${JSON.stringify(order)}`);
         setDaimoPayOrder(order);
-    }, [daimoPayOrder]);
+    }, [daimoPayOrder, lockPayParams, trpc, log, setDaimoPayOrder]);
     /** Called whenever params change. */
     const setPayParams = async (payParams) => {
+        latestPayParamsRef.current = payParams;
+        if (lockPayParams)
+            return;
         assert(payParams != null, "[SET PAY PARAMS] payParams cannot be null");
+        console.log("[SET PAY PARAMS] setting payParams");
         setPayParamsState(payParams);
         setIsDepositFlow(payParams.toUnits == null);
         generatePreviewOrder(payParams);
     };
-    const generatePreviewOrder = async (payParams) => {
+    const generatePreviewOrder = useCallback(async (payParams) => {
         // toUnits is undefined if and only if we're in deposit flow.
         // Set dummy value for deposit flow, since user can edit the amount.
         const toUnits = payParams.toUnits == null ? "0" : payParams.toUnits;
@@ -1402,13 +1370,28 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
         });
         log(`[CHECKOUT] generated preview: ${JSON.stringify(orderPreview)}`);
         setDaimoPayOrder(orderPreview);
-    };
-    const onSuccess = ({ txHash, txURL }) => {
-        if (modalOptions?.closeOnSuccess) {
-            log(`[CHECKOUT] transaction succeeded, closing: ${txHash} ${txURL}`);
-            setTimeout(() => setOpen(false, { event: "wait-success" }), 1000);
+    }, [trpc, log, setDaimoPayOrder]);
+    const resetOrder = useCallback(() => {
+        // Clear the old order & UI
+        setDaimoPayOrder(undefined);
+        setRoute(ROUTES.SELECT_METHOD);
+        // Prefer an explicit payId, otherwise use the queued payParams
+        if (latestPayIdRef.current) {
+            setPayId(latestPayIdRef.current);
+            latestPayIdRef.current = undefined;
+        }
+        else if (latestPayParamsRef.current) {
+            const p = latestPayParamsRef.current;
+            setPayParamsState(p);
+            generatePreviewOrder(p);
         }
-    };
+    }, [
+        setDaimoPayOrder,
+        setRoute,
+        setPayId,
+        setPayParamsState,
+        generatePreviewOrder,
+    ]);
     return {
         setPayId,
         payParams,
@@ -1416,18 +1399,18 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
         generatePreviewOrder,
         daimoPayOrder,
         isDepositFlow,
-        modalOptions,
-        setModalOptions,
         paymentWaitingMessage,
         selectedExternalOption,
         selectedTokenOption,
         selectedSolanaTokenOption,
         externalPaymentOptions,
+        showSolanaPaymentMethod,
         walletPaymentOptions,
         solanaPaymentOptions,
         depositAddressOptions,
         selectedDepositAddressOption,
         getOrderUsdLimit,
+        resetOrder,
         setPaymentWaitingMessage,
         setSelectedExternalOption,
         setSelectedTokenOption,
@@ -1439,7 +1422,6 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
         payWithDepositAddress,
         payWithSolanaToken,
         refreshOrder,
-        onSuccess,
         senderEnsName: senderEnsName ?? undefined,
     };
 }
@@ -4887,9 +4869,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(
@@ -4944,8 +4956,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)
@@ -6845,6 +6857,14 @@ function useWalletConnectUri({ enabled } = {
     };
 }
 
+/** Determines whether the current wagmi configuration supports a given chain. */
+function useChainIsSupported(chainId) {
+    const { chains } = useConfig();
+    if (!chainId)
+        return false;
+    return chains.some((x) => x.id === chainId);
+}
+
 const Web3Context = React.createContext({
     connect: {
         getUri: () => "",
@@ -7246,15 +7266,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))) }))] }));
 };
@@ -7271,7 +7291,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
@@ -8225,7 +8245,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;
@@ -9357,7 +9377,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 &&
@@ -9369,9 +9389,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))] }) })] }) }));
 };
@@ -9459,7 +9479,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
@@ -9566,20 +9586,17 @@ const Underline = styled(motion.span) `
 `;
 
 const Confirmation = () => {
-    const { paymentState, confirmationMessage } = usePayContext();
+    const { paymentState, confirmationMessage, onSuccess } = usePayContext();
     const { daimoPayOrder } = paymentState;
-    const { done, txURL } = (() => {
+    const { done, txURL } = useMemo(() => {
         if (daimoPayOrder && daimoPayOrder.mode === DaimoPayOrderMode.HYDRATED) {
-            // Frontends are optimistic, assume submits will be successful
             const { destStatus } = daimoPayOrder;
-            if (destStatus === DaimoPayOrderStatusDest.FAST_FINISH_SUBMITTED ||
-                destStatus === DaimoPayOrderStatusDest.FAST_FINISHED ||
+            if (destStatus === DaimoPayOrderStatusDest.FAST_FINISHED ||
                 destStatus === DaimoPayOrderStatusDest.CLAIM_SUCCESSFUL) {
                 const txHash = daimoPayOrder.destFastFinishTxHash ?? daimoPayOrder.destClaimTxHash;
-                const chainId = daimoPayOrder.destFinalCallTokenAmount.token.chainId;
+                const destChainId = getOrderDestChainId(daimoPayOrder);
                 assert(txHash != null, `[CONFIRMATION] dest status: ${destStatus}, but missing txHash`);
-                const txURL = getChainExplorerTxUrl(chainId, txHash);
-                paymentState.onSuccess({ txHash, txURL });
+                const txURL = getChainExplorerTxUrl(destChainId, txHash);
                 return {
                     done: true,
                     txURL,
@@ -9590,7 +9607,12 @@ const Confirmation = () => {
             done: false,
             txURL: undefined,
         };
-    })();
+    }, [daimoPayOrder]);
+    useEffect(() => {
+        if (done) {
+            onSuccess();
+        }
+    }, [done, onSuccess]);
     return (jsx(PageContent, { style: {
             display: "flex",
             justifyContent: "center",
@@ -9634,8 +9656,6 @@ const Link = styled.a `
 `;
 const SuccessIcon = styled(TickIcon) `
   color: var(--ck-body-color-valid);
-
-  transform: scale(0.5);
   transition: all 0.2s ease-in-out;
   position: absolute;
   opacity: ${(props) => (props.$status ? 1 : 0)};
@@ -9646,7 +9666,6 @@ const Spinner$1 = styled(LoadingCircleIcon) `
   transition: all 0.2s ease-in-out;
   animation: rotateSpinner 400ms linear infinite;
   opacity: ${(props) => (props.$status ? 0 : 1)};
-  transform: ${(props) => (props.$status ? "scale(0.5)" : "scale(1)")};
 
   @keyframes rotateSpinner {
     0% {
@@ -9761,8 +9780,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 }), 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;
@@ -9869,12 +9888,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" }))] })] }));
 };
 
 /**
@@ -10087,7 +10106,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" })] })] }));
 };
@@ -10135,13 +10154,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 }) }) }));
@@ -10187,7 +10206,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;
@@ -10449,7 +10468,7 @@ const IconStackItem = styled(motion.div) `
   border-radius: 22.5%;
 `;
 
-const OptionsContainer = styled$1.div `
+const OptionsContainer = styled.div `
   width: 100%;
   margin-top: 1rem;
 `;
@@ -10598,7 +10617,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;
@@ -10630,7 +10649,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;
@@ -10665,7 +10684,7 @@ function SelectMethod() {
             };
             connectedOptions.push(connectedEthWalletOption);
         }
-        if (isSolanaConnected && includeSolana) {
+        if (isSolanaConnected && showSolanaPaymentMethod) {
             const solWalletDisplayName = getAddressContraction(publicKey?.toBase58() ?? "");
             const connectedSolWalletOption = {
                 id: "connectedSolanaWallet",
@@ -10690,13 +10709,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 = {
@@ -10714,7 +10729,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);
@@ -10738,7 +10753,7 @@ function SelectMethod() {
         disabled: option.disabled,
         subtitle: option.message,
     })));
-    if (includeDepositAddressOption) {
+    if (showDepositAddressMethod) {
         const depositAddressOption = getDepositAddressOption(depositAddressOptions);
         options.push(depositAddressOption);
     }
@@ -10998,7 +11013,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 {
@@ -11135,6 +11150,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(() => {
@@ -11160,17 +11176,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(() => {
@@ -11186,18 +11204,18 @@ const WaitingExternal = () => {
                 }, children: selectedExternalOption.cta })] }));
 };
 
-const customThemeDefault = {};
-const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThemeDefault, lang = "en-US", }) => {
+const DaimoPayModal = ({ mode, theme, customTheme, lang, }) => {
     const context = usePayContext();
+    const { setMode, setTheme, setCustomTheme, setLang } = context;
     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
@@ -11317,34 +11335,46 @@ 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
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        context.open,
+        context.wcWallet,
+        isEthConnected,
+        isSolanaConnected,
+        showSolanaPaymentMethod,
+        address,
+        chain?.id,
+        connector?.id,
+    ]);
+    // 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 ||
@@ -11358,11 +11388,12 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
                 });
             }
         }
-    }, [isEthConnected, context.route]);
-    useEffect(() => context.setMode(mode), [mode]);
-    useEffect(() => context.setTheme(theme), [theme]);
-    useEffect(() => context.setCustomTheme(customTheme), [customTheme]);
-    useEffect(() => context.setLang(lang), [lang]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isEthConnected, context.route, connector?.id, chain?.id, address]);
+    useEffect(() => setMode(mode), [mode, setMode]);
+    useEffect(() => setTheme(theme), [theme, setTheme]);
+    useEffect(() => setCustomTheme(customTheme), [customTheme, setCustomTheme]);
+    useEffect(() => setLang(lang), [lang, setLang]);
     /* When pulling data into WalletConnect, it prioritises the og:title tag over the title tag */
     useEffect(() => {
         const appName = getAppName();
@@ -11466,7 +11497,10 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         onCloseRef.current = fn;
     }, []);
     const [open, setOpenState] = useState(false);
+    const [lockPayParams, setLockPayParams] = useState(false);
+    const [paymentCompleted, setPaymentCompleted] = useState(false);
     const [route, setRouteState] = useState(ROUTES.SELECT_METHOD);
+    const [modalOptions, setModalOptions] = useState();
     // Daimo Pay context
     const [daimoPayOrder, setDaimoPayOrderInner] = useState();
     const [pendingConnectorId, setPendingConnectorId] = useState(undefined);
@@ -11477,22 +11511,46 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
     const [errorMessage, setErrorMessage] = useState("");
     const [confirmationMessage, setConfirmationMessage] = useState(undefined);
     const [redirectReturnUrl, setRedirectReturnUrl] = useState(undefined);
-    const log = debugMode ? console.log : () => { };
+    const log = useMemo(() => (debugMode ? console.log : () => { }), [debugMode]);
     // Connect to the Daimo Pay TRPC API
-    const trpc = useMemo(() => createTrpcClient(payApiUrl, sessionId), [payApiUrl]);
+    const trpc = useMemo(() => createTrpcClient(payApiUrl, sessionId), [payApiUrl, sessionId]);
     const [resize, onResize] = useState(0);
     const setOpen = useCallback((open, meta) => {
         setOpenState(open);
+        // Lock pay params starting from the first time the modal is opened to
+        // prevent the daimo pay order from changing from under the user
+        if (open) {
+            setLockPayParams(true);
+        }
+        // Reset payment state on close if resetOnSuccess is true
+        if (!open && paymentCompleted && modalOptions?.resetOnSuccess) {
+            setPaymentCompleted(false);
+            setLockPayParams(false);
+            paymentState.resetOrder();
+        }
+        // Log the open/close event
         trpc.nav.mutate({
             action: open ? "navOpenPay" : "navClosePay",
             orderId: daimoPayOrder?.id?.toString(),
             data: meta ?? {},
         });
+        // Run the onOpen and onClose callbacks
         if (open)
             onOpenRef.current?.();
         else
             onCloseRef.current?.();
-    }, [trpc, daimoPayOrder?.id]);
+    }, 
+    // We don't have good caching on paymentState, so don't include it as a dep
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [trpc, daimoPayOrder?.id, modalOptions?.resetOnSuccess, paymentCompleted]);
+    // Callback when a payment is successfully completed (regardless of whether
+    // the final call succeeded or bounced)
+    const onSuccess = useCallback(() => {
+        if (modalOptions?.closeOnSuccess) {
+            setTimeout(() => setOpen(false, { event: "wait-success" }), 1000);
+        }
+        setPaymentCompleted(true);
+    }, [modalOptions?.closeOnSuccess, setOpen, setPaymentCompleted]);
     const setRoute = useCallback((route, data) => {
         const action = route.replace("daimoPay", "");
         log(`[SET ROUTE] ${action} ${daimoPayOrder?.id} ${debugJson(data ?? {})}`);
@@ -11503,23 +11561,11 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         });
         setRouteState(route);
     }, [trpc, daimoPayOrder?.id, log]);
-    // Include Google Font that is needed for a themes
-    if (opts.embedGoogleFonts)
-        useThemeFont(ckTheme);
     // Other Configuration
     useEffect(() => setTheme(theme), [theme]);
     useEffect(() => setLang(opts.language || "en-US"), [opts.language]);
     useEffect(() => setErrorMessage(null), [route, open]);
-    // Check if chain is supported, elsewise redirect to switches page
-    const { chain, isConnected, connector } = useAccount();
-    const isChainSupported = useChainIsSupported(chain?.id);
-    useEffect(() => {
-        if (isConnected && opts.enforceSupportedChains && !isChainSupported) {
-            setOpen(true);
-            if (route !== ROUTES.SWITCHNETWORKS)
-                setRoute(ROUTES.SWITCHNETWORKS);
-        }
-    }, [isConnected, isChainSupported, chain, route, open]);
+    const { connector } = useAccount();
     // 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.
@@ -11530,6 +11576,10 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
     // set refresh context when payment status changes; done via setDaimoPayOrder.
     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}`;
@@ -11538,9 +11588,10 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
     }, [log]);
     const paymentState = usePaymentState({
         trpc,
+        lockPayParams,
         daimoPayOrder,
         setDaimoPayOrder,
-        setOpen,
+        setRoute,
         log,
         redirectReturnUrl,
     });
@@ -11564,11 +11615,13 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         log(`[PAY] polling in ${intervalMs}ms`);
         const timeout = setTimeout(() => retryBackoff("refreshOrder", () => paymentState.refreshOrder()), intervalMs);
         return () => clearTimeout(timeout);
-    }, [daimoPayOrder]);
+        // We don't have good caching on paymentState, so don't include it as a dep
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [daimoPayOrder, log]);
     const showPayment = async (modalOptions) => {
         const id = daimoPayOrder?.id;
         log(`[PAY] showing payment ${debugJson({ id, modalOptions })}`);
-        paymentState.setModalOptions(modalOptions);
+        setModalOptions(modalOptions);
         setOpen(true);
         if (daimoPayOrder &&
             daimoPayOrder.mode === DaimoPayOrderMode.HYDRATED &&
@@ -11608,6 +11661,7 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         // Other configuration
         options: opts,
         errorMessage,
+        onSuccess,
         confirmationMessage,
         setConfirmationMessage,
         redirectReturnUrl,
@@ -11891,6 +11945,7 @@ function DaimoPayButtonCustom(props) {
         else if (payParams != null) {
             paymentState.setPayParams(payParams);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [payId, JSON.stringify(payParams || {})]);
     // Set the confirmation message
     const { setConfirmationMessage } = context;
@@ -11922,30 +11977,32 @@ function DaimoPayButtonCustom(props) {
     const intentStatus = order?.intentStatus;
     const hydOrder = order?.mode === DaimoPayOrderMode.HYDRATED ? order : null;
     // Functions to show and hide the modal
-    const { children, closeOnSuccess } = props;
-    const modalOptions = { closeOnSuccess };
-    const show = () => {
+    const { children, closeOnSuccess, resetOnSuccess } = props;
+    const show = useCallback(() => {
         if (paymentState.daimoPayOrder == null)
             return;
+        const modalOptions = { closeOnSuccess, resetOnSuccess };
         context.showPayment(modalOptions);
-    };
-    const hide = () => context.setOpen(false);
+    }, [context, paymentState.daimoPayOrder, closeOnSuccess, resetOnSuccess]);
+    const hide = useCallback(() => context.setOpen(false), [context]);
     // 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,
@@ -11961,7 +12018,7 @@ 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 && order != null) {