@daimo/pay 1.7.1 → 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.1";
+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.1",
+	"@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);
@@ -6706,7 +6711,7 @@ const ScrollArea = ({ children, height, backgroundColor, mobileDirection, hideBo
     const { log } = usePayContext();
     const ref = useRef(null);
     const moreRef = useRef(null);
-    const { isMobile } = useIsMobile();
+    const isMobileFormat = isMobile() || window?.innerWidth < defaultTheme.mobileWidth;
     useEffect(() => {
         const el = ref.current;
         if (!el)
@@ -6745,7 +6750,7 @@ const ScrollArea = ({ children, height, backgroundColor, mobileDirection, hideBo
             el.removeEventListener("scroll", handleScroll);
         };
     }, [ref.current]);
-    return (jsxs(ScrollContainer, { children: [jsx(ScrollAreaContainer, { ref: ref, "$mobile": isMobile, "$height": height, "$backgroundColor": backgroundColor, "$mobileDirection": mobileDirection, "$hideBottomLine": hideBottomLine, "$totalItems": totalItems, children: children }), jsx(MoreIndicator, { ref: moreRef, className: "hide", onClick: () => {
+    return (jsxs(ScrollContainer, { children: [jsx(ScrollAreaContainer, { ref: ref, "$mobile": isMobileFormat, "$height": height, "$backgroundColor": backgroundColor, "$mobileDirection": mobileDirection, "$hideBottomLine": hideBottomLine, "$totalItems": totalItems, children: children }), jsx(MoreIndicator, { ref: moreRef, className: "hide", onClick: () => {
                     if (ref.current) {
                         ref.current.scrollTo({
                             top: ref.current.scrollHeight,
@@ -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;
@@ -10811,6 +10816,7 @@ const ChainContainer$1 = styled(motion.div) `
 
 function SelectToken() {
     const { isMobile, isIOS } = useIsMobile();
+    const isMobileFormat = useIsMobile() || window?.innerWidth < defaultTheme.mobileWidth;
     const { setRoute, paymentState, wcWallet } = usePayContext();
     const { isDepositFlow, walletPaymentOptions, setSelectedTokenOption } = paymentState;
     const optionsList = walletPaymentOptions.options?.map((option) => {
@@ -10864,7 +10870,7 @@ function SelectToken() {
                     justifyContent: "center",
                     paddingTop: 16,
                     paddingBottom: 16,
-                }, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx(SelectAnotherMethodButton, {})] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: walletPaymentOptions.isLoading, options: optionsList, scrollHeight: isMobile ? 225 : 300, orDivider: optionsList.length != 0 }), optionsList.length != 0 && jsx(SelectAnotherMethodButton, {})] }));
+                }, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx(SelectAnotherMethodButton, {})] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: walletPaymentOptions.isLoading, options: optionsList, scrollHeight: isMobileFormat ? 225 : 300, orDivider: optionsList.length != 0 }), optionsList.length != 0 && jsx(SelectAnotherMethodButton, {})] }));
 }
 function getDaimoTokenKey(token) {
     return `${token.chainId}-${token.token}`;
@@ -11044,6 +11050,7 @@ function getDaimoSolanaTokenKey(token) {
 const SelectSolanaToken = () => {
     const { paymentState, setRoute } = usePayContext();
     const { isDepositFlow, solanaPaymentOptions, setSelectedSolanaTokenOption } = paymentState;
+    const isMobileFormat = useIsMobile() || window?.innerWidth < defaultTheme.mobileWidth;
     const optionsList = solanaPaymentOptions.options?.map((option) => {
         const titlePrice = isDepositFlow
             ? formatUsd(option.balance.usd)
@@ -11083,7 +11090,7 @@ const SelectSolanaToken = () => {
                     justifyContent: "center",
                     paddingTop: 16,
                     paddingBottom: 16,
-                }, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx(SelectAnotherMethodButton, {})] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: solanaPaymentOptions.isLoading, options: optionsList, orDivider: optionsList.length != 0 }), optionsList.length != 0 && jsx(SelectAnotherMethodButton, {})] }));
+                }, children: [jsx(ModalH1, { children: "Insufficient balance." }), jsx(SelectAnotherMethodButton, {})] })), jsx(OptionsList, { requiredSkeletons: 4, isLoading: solanaPaymentOptions.isLoading, options: optionsList, scrollHeight: isMobileFormat ? 225 : 300, orDivider: optionsList.length != 0 }), optionsList.length != 0 && jsx(SelectAnotherMethodButton, {})] }));
 };
 
 const WaitingDepositAddress = () => {
@@ -11450,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({
@@ -11470,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]);
@@ -11489,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}`;
@@ -11513,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,
@@ -11544,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);
@@ -11570,6 +11591,8 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         setCustomTheme,
         lang: ckLang,
         setLang,
+        setOnOpen,
+        setOnClose,
         open,
         setOpen,
         route,
@@ -11855,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);
@@ -11867,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;
@@ -11925,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");