@daimo/pay 1.7.4 → 1.7.6

package/build/index.d.ts

@@ -68,6 +68,7 @@ type DaimoPayContextOptions = {
 /** Modal UI options, set on the pay button triggering that modal. */
 type DaimoPayModalOptions = {
     closeOnSuccess?: boolean;
+    resetOnSuccess?: boolean;
 };
 /** Additional payment options. Onchain payments are always enabled. */
 type PaymentOption = "Daimo" | "Coinbase" | "Binance" | "RampNetwork" | "Solana" | "ExternalChains" | "Lemon";
@@ -256,6 +257,8 @@ type PayButtonCommonProps = PayButtonPaymentProps & {
     closeOnSuccess?: boolean;
     /** Open the modal by default. */
     defaultOpen?: boolean;
+    /** Reset the payment after a successful payment. */
+    resetOnSuccess?: boolean;
     /** Custom message to display on confirmation page. */
     confirmationMessage?: string;
     /** Redirect URL to return to the app. E.g. after Coinbase, Binance, RampNetwork. */
@@ -303,10 +306,9 @@ declare namespace DaimoPayButtonCustom {
  *    to the payment's configured refund address on the destination chain.
  */
 declare function useDaimoPayStatus(): {
-    paymentId?: string;
-    status?: DaimoPayIntentStatus;
-    reset: () => void;
-};
+    paymentId: string;
+    status: DaimoPayIntentStatus;
+} | undefined;
 
 /** Icon for an EVM chain, given chain ID. No ID shows a loading spinner. */
 declare const Chain: React$1.FC<{
@@ -479,8 +481,6 @@ interface PaymentState {
     resetOrder: () => void;
     daimoPayOrder: DaimoPayOrder | undefined;
     isDepositFlow: boolean;
-    modalOptions: DaimoPayModalOptions;
-    setModalOptions: (modalOptions: DaimoPayModalOptions) => void;
     paymentWaitingMessage: string | undefined;
     externalPaymentOptions: ReturnType<typeof useExternalPaymentOptions>;
     showSolanaPaymentMethod: boolean;
@@ -503,10 +503,6 @@ interface PaymentState {
     payWithDepositAddress: (option: DepositAddressPaymentOptions) => Promise<DepositAddressPaymentOptionData | null>;
     payWithSolanaToken: (inputToken: SolanaPublicKey) => Promise<string | undefined>;
     refreshOrder: () => Promise<void>;
-    onSuccess: (args: {
-        txHash: string;
-        txURL?: string;
-    }) => void;
     senderEnsName: string | undefined;
 }
 
@@ -555,6 +551,8 @@ type PayContextValue = {
     paymentState: PaymentState;
     /** TRPC API client. Internal use only. */
     trpc: any;
+    /** Callback to call when the payment is successful. */
+    onSuccess: () => void;
     /** Custom message to display on confirmation page. */
     confirmationMessage?: string;
     setConfirmationMessage: React$1.Dispatch<React$1.SetStateAction<string | undefined>>;

package/build/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 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.4";
+var version = "1.7.6";
 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.4",
+	"@daimo/pay-common": "1.7.6",
 	"@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();
@@ -543,6 +536,7 @@ const walletConfigs = {
     },
     "metaMask, metaMask-io, io.metamask, io.metamask.mobile, metaMaskSDK": {
         name: "MetaMask",
+        shortName: "MetaMask",
         icon: jsx(Logos$1.MetaMask, {}),
         iconConnector: jsx(Logos$1.MetaMask, {}),
         iconShouldShrink: true,
@@ -843,47 +837,6 @@ function extractWcWalletFromProvider(p, log) {
     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);
@@ -1175,7 +1128,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(() => {
@@ -1198,12 +1151,14 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
         paymentOptions.includes(ExternalPaymentOptions.Solana)) &&
         daimoPayOrder != null &&
         isCCTPV1Chain(getOrderDestChainId(daimoPayOrder));
-    // Daimo Pay order state.
+    // 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,
@@ -1341,7 +1296,7 @@ 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");
@@ -1361,7 +1316,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) {
@@ -1375,15 +1331,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;
@@ -1411,16 +1371,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);
-        }
-    };
-    const resetOrder = () => {
+    }, [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,
@@ -1428,8 +1400,6 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
         generatePreviewOrder,
         daimoPayOrder,
         isDepositFlow,
-        modalOptions,
-        setModalOptions,
         paymentWaitingMessage,
         selectedExternalOption,
         selectedTokenOption,
@@ -1453,7 +1423,6 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
         payWithDepositAddress,
         payWithSolanaToken,
         refreshOrder,
-        onSuccess,
         senderEnsName: senderEnsName ?? undefined,
     };
 }
@@ -4906,32 +4875,42 @@ const useWallets = (isMobile) => {
     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
+        // Add injected wallet (if any) first
         connectors.forEach((connector) => {
             if (connector.id === "metaMask")
                 return;
+            if (connector.id === "walletConnect")
+                return;
             if (isCoinbaseWalletConnector(connector.id))
                 return;
             mobileWallets.push({
                 id: connector.id,
                 connector,
-                ...walletConfigs[connector.id],
+                shortName: connector.name,
+                iconConnector: jsx("img", { src: connector.icon, alt: connector.name }),
+                iconShape: "squircle",
             });
         });
+        function addIfNotPresent(idList) {
+            if (mobileWallets.find((w) => idList.includes(w.id)))
+                return;
+            const wallet = assertNotNull(walletConfigs[idList], () => `missing ${idList}`);
+            mobileWallets.push({
+                id: idList,
+                ...wallet,
+            });
+        }
+        addIfNotPresent("me.rainbow");
+        addIfNotPresent("metaMask, metaMask-io, io.metamask, io.metamask.mobile, metaMaskSDK");
+        // Add WalletConnect last
+        const walletConnectConnector = connectors.find((c) => c.id === "walletConnect");
+        if (walletConnectConnector) {
+            mobileWallets.push({
+                id: walletConnectConnector.id,
+                connector: walletConnectConnector,
+                ...walletConfigs[walletConnectConnector.id],
+            });
+        }
         return mobileWallets;
     }
     const wallets = connectors.map((connector) => {
@@ -6889,6 +6868,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: () => "",
@@ -9610,20 +9597,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,
@@ -9634,7 +9618,12 @@ const Confirmation = () => {
             done: false,
             txURL: undefined,
         };
-    })();
+    }, [daimoPayOrder]);
+    useEffect(() => {
+        if (done) {
+            onSuccess();
+        }
+    }, [done, onSuccess]);
     return (jsx(PageContent, { style: {
             display: "flex",
             justifyContent: "center",
@@ -9678,8 +9667,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)};
@@ -9690,7 +9677,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% {
@@ -11229,9 +11215,9 @@ 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, showSolanaPaymentMethod, setPaymentWaitingMessage, setSelectedExternalOption, setSelectedTokenOption, setSelectedSolanaTokenOption, setSelectedDepositAddressOption, } = paymentState;
     const { isConnected: isEthConnected, connector, chain, address, } = useAccount();
@@ -11387,12 +11373,16 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
         }
         // 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
@@ -11409,11 +11399,12 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
                 });
             }
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isEthConnected, context.route, connector?.id, chain?.id, address]);
-    useEffect(() => context.setMode(mode), [mode]);
-    useEffect(() => context.setTheme(theme), [theme]);
-    useEffect(() => context.setCustomTheme(customTheme), [customTheme]);
-    useEffect(() => context.setLang(lang), [lang]);
+    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();
@@ -11517,7 +11508,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);
@@ -11528,22 +11522,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 ?? {})}`);
@@ -11554,23 +11572,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.
@@ -11593,9 +11599,10 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
     }, [log]);
     const paymentState = usePaymentState({
         trpc,
+        lockPayParams,
         daimoPayOrder,
         setDaimoPayOrder,
-        setOpen,
+        setRoute,
         log,
         redirectReturnUrl,
     });
@@ -11619,11 +11626,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 &&
@@ -11663,6 +11672,7 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         // Other configuration
         options: opts,
         errorMessage,
+        onSuccess,
         confirmationMessage,
         setConfirmationMessage,
         redirectReturnUrl,
@@ -11946,6 +11956,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;
@@ -11977,14 +11988,14 @@ 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(() => {
@@ -12079,12 +12090,11 @@ function DaimoPayButtonInner({ disabled }) {
  */
 function useDaimoPayStatus() {
     const { paymentState } = usePayContext();
-    const reset = paymentState.resetOrder;
     if (!paymentState || !paymentState.daimoPayOrder)
-        return { reset };
+        return undefined;
     const order = paymentState.daimoPayOrder;
     const paymentId = writeDaimoPayOrderID(order.id);
-    return { paymentId, status: order.intentStatus, reset };
+    return { paymentId, status: order.intentStatus };
 }
 
 function addressToNumber(address) {