@daimo/pay 1.7.2 → 1.7.3

package/build/index.d.ts

@@ -228,6 +228,10 @@ type PayButtonPaymentProps = {
      * Developer metadata. E.g. correlation ID.
      * */
     metadata?: DaimoPayUserMetadata;
+    /**
+     * The address to refund to if the payment bounces or a refund is requested.
+     */
+    refundAddress?: Address;
 } | {
     /** The payment ID, generated via the Daimo Pay API. Replaces params above. */
     payId: string;
@@ -239,6 +243,10 @@ type PayButtonCommonProps = PayButtonPaymentProps & {
     onPaymentCompleted?: (event: DaimoPayCompletedEvent) => void;
     /** Called when destination call reverts and funds are refunded */
     onPaymentBounced?: (event: DaimoPayBouncedEvent) => void;
+    /** Called when the modal is opened. */
+    onOpen?: () => void;
+    /** Called when the modal is closed. */
+    onClose?: () => void;
     /** Automatically close the modal after a successful payment. */
     closeOnSuccess?: boolean;
     /** Open the modal by default. */
@@ -453,6 +461,8 @@ interface PayParams {
     externalId?: string;
     /** Developer metadata. E.g. correlation ID. */
     metadata?: DaimoPayUserMetadata;
+    /** The address to refund to if the payment bounces or a refund is requested. */
+    refundAddress?: Address;
 }
 /** Creates (or loads) a payment and manages the corresponding modal. */
 interface PaymentState {
@@ -507,6 +517,8 @@ type PayContextValue = {
     setCustomTheme: React$1.Dispatch<React$1.SetStateAction<CustomTheme | undefined>>;
     lang: Languages$1;
     setLang: React$1.Dispatch<React$1.SetStateAction<Languages$1>>;
+    setOnOpen: (fn?: () => void) => void;
+    setOnClose: (fn?: () => void) => void;
     open: boolean;
     setOpen: (open: boolean, meta?: Record<string, any>) => void;
     route: string;

package/build/index.js

@@ -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.3";
 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.3",
 	"@rollup/plugin-typescript": "^12.1.2",
 	"@solana/wallet-adapter-base": "^0.9.23",
 	"@solana/wallet-adapter-react": "^0.15.35",
@@ -997,7 +997,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 +1006,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 +1041,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 +1052,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);
@@ -1260,6 +1262,7 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
     const { payWithToken } = usePayWithToken({
         trpc,
         senderAddr,
+        refundAddress: payParams?.refundAddress,
         daimoPayOrder,
         setDaimoPayOrder,
         createOrHydrate,
@@ -1267,6 +1270,7 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
     });
     const { payWithSolanaToken } = usePayWithSolanaToken({
         trpc,
+        refundAddress: payParams?.refundAddress,
         daimoPayOrder,
         setDaimoPayOrder,
         createOrHydrate,
@@ -1394,6 +1398,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);
@@ -9757,7 +9762,7 @@ 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")] }) }) }));
+    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")] }) }) }));
 };
 
 var PayState$1;
@@ -11452,18 +11457,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 +11502,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,23 +11516,18 @@ 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);
         let extra = `> $${order.destFinalCallTokenAmount.usd.toFixed(2)} to ${order.destFinalCallTokenAmount.token.chainId} ${order.destFinalCall.to}`;
@@ -11515,7 +11535,7 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
             extra += ` via ${order.intentAddr} ${order.sourceStatus} ${order.intentStatus}`;
         }
         log(`[PAY] setDaimoPayOrder: ${order.id} ${extra}`);
-    }, [setDaimoPayOrderInner]);
+    }, [log]);
     const paymentState = usePaymentState({
         trpc,
         daimoPayOrder,
@@ -11546,7 +11566,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 +11591,8 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         setCustomTheme,
         lang: ckLang,
         setLang,
+        setOnOpen,
+        setOnClose,
         open,
         setOpen,
         route,
@@ -11857,10 +11878,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 +11892,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;
@@ -11927,11 +11962,12 @@ function DaimoPayButtonCustom(props) {
             }
         }
     }, [hydOrder?.id, intentStatus]);
+    // 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");