@daimo/pay 1.2.0 → 1.3.1

package/build/index.d.ts

@@ -1,7 +1,7 @@
 import React$1, { ReactNode } from 'react';
 export { version } from '../package.json';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DaimoPayOrderMode, DepositAddressPaymentOptionMetadata, PlatformType, ExternalPaymentOptionMetadata, WalletPaymentOption, DaimoPayOrder, DaimoPayTokenAmount, ExternalPaymentOptions, DepositAddressPaymentOptions, DepositAddressPaymentOptionData, SolanaPublicKey, PaymentStartedEvent, PaymentCompletedEvent, PaymentBouncedEvent } from '@daimo/common';
+import { DaimoPayOrderMode, DepositAddressPaymentOptionMetadata, PlatformType, ExternalPaymentOptionMetadata, WalletPaymentOption, DaimoPayOrder, DaimoPayTokenAmount, ExternalPaymentOptions, DepositAddressPaymentOptions, DepositAddressPaymentOptionData, SolanaPublicKey, DaimoPayUserMetadata, PaymentStartedEvent, PaymentCompletedEvent, PaymentBouncedEvent, DaimoPayIntentStatus } from '@daimo/common';
 import { Address, Hex } from 'viem';
 import { AppRouter } from '@daimo/pay-api';
 import { CreateTRPCClient } from '@trpc/client';
@@ -69,8 +69,6 @@ type DaimoPayContextOptions = {
 type DaimoPayModalOptions = {
     closeOnSuccess?: boolean;
 };
-/** Payment status. See webhooks and React useDaimoPayStatus() hook. */
-type PaymentStatus = "payment_pending" | "payment_started" | "payment_completed" | "payment_bounced";
 /** Additional payment options. Onchain payments are always enabled. */
 type PaymentOption = "Daimo" | "Coinbase" | "Binance" | "RampNetwork";
 
@@ -82,10 +80,9 @@ type types_d_DaimoPayModalOptions = DaimoPayModalOptions;
 type types_d_Languages = Languages;
 type types_d_Mode = Mode;
 type types_d_PaymentOption = PaymentOption;
-type types_d_PaymentStatus = PaymentStatus;
 type types_d_Theme = Theme;
 declare namespace types_d {
-  export type { types_d_All as All, types_d_CustomAvatarProps as CustomAvatarProps, types_d_CustomTheme as CustomTheme, types_d_DaimoPayContextOptions as DaimoPayContextOptions, types_d_DaimoPayModalOptions as DaimoPayModalOptions, types_d_Languages as Languages, types_d_Mode as Mode, types_d_PaymentOption as PaymentOption, types_d_PaymentStatus as PaymentStatus, types_d_Theme as Theme };
+  export type { types_d_All as All, types_d_CustomAvatarProps as CustomAvatarProps, types_d_CustomTheme as CustomTheme, types_d_DaimoPayContextOptions as DaimoPayContextOptions, types_d_DaimoPayModalOptions as DaimoPayModalOptions, types_d_Languages as Languages, types_d_Mode as Mode, types_d_PaymentOption as PaymentOption, types_d_Theme as Theme };
 }
 
 type useConnectCallbackProps = {
@@ -175,6 +172,10 @@ interface PayParams {
         chain: number;
         address: Address;
     }[];
+    /** External ID. E.g. a correlation ID. */
+    externalId?: string;
+    /** Developer metadata. E.g. correlation ID. */
+    metadata?: DaimoPayUserMetadata;
 }
 /** Creates (or loads) a payment and manages the corresponding modal. */
 interface PaymentState {
@@ -256,9 +257,9 @@ type ContextValue = {
     lang: Languages;
     setLang: React$1.Dispatch<React$1.SetStateAction<Languages>>;
     open: boolean;
-    setOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
+    setOpen: (open: boolean, meta?: Record<string, any>) => void;
     route: string;
-    setRoute: React$1.Dispatch<React$1.SetStateAction<ROUTES>>;
+    setRoute: (route: ROUTES, data?: Record<string, any>) => void;
     connector: Connector;
     setConnector: React$1.Dispatch<React$1.SetStateAction<Connector>>;
     errorMessage: Error;
@@ -267,6 +268,8 @@ type ContextValue = {
     displayError: (message: string | React$1.ReactNode | null, code?: any) => void;
     resize: number;
     triggerResize: () => void;
+    /** Session ID. */
+    sessionId: string;
     /** Chosen Solana wallet, eg Phantom.*/
     solanaConnector: SolanaWalletName | undefined;
     setSolanaConnector: React$1.Dispatch<React$1.SetStateAction<SolanaWalletName | undefined>>;
@@ -369,6 +372,14 @@ type PayButtonPaymentProps = {
         chain: number;
         address: Address;
     }[];
+    /**
+     * External ID. E.g. a correlation ID.
+     */
+    externalId?: string;
+    /**
+     * Developer metadata. E.g. correlation ID.
+     * */
+    metadata?: DaimoPayUserMetadata;
 } | {
     /** The payment ID, generated via the Daimo Pay API. Replaces params above. */
     payId: string;
@@ -421,7 +432,7 @@ declare namespace DaimoPayButtonCustom {
 /** Returns the current payment, or undefined if there is none.
  *
  * Status values:
- * - `payment_pending` - the user has not paid yet
+ * - `payment_unpaid` - the user has not paid yet
  * - `payment_started` - the user has paid & payment is in progress. This status
  *    typically lasts a few seconds.
  * - `payment_completed` - the final call or transfer succeeded
@@ -430,16 +441,9 @@ declare namespace DaimoPayButtonCustom {
  */
 declare function useDaimoPayStatus(): {
     paymentId: string;
-    status: PaymentStatus;
+    status: DaimoPayIntentStatus;
 } | undefined;
 
-type UseModalProps = {} & useConnectCallbackProps;
-/** Opens and closes the payment modal. */
-declare const useModal: ({ onConnect, onDisconnect }?: UseModalProps) => {
-    open: boolean;
-    setOpen: (show: boolean) => void;
-};
-
 /** Icon for an EVM chain, given chain ID. No ID shows a loading spinner. */
 declare const Chain: React$1.FC<{
     id?: number;
@@ -454,9 +458,7 @@ declare const wallets: {
 };
 
 declare const daimoPayVersion: string;
-/** Generates a globally-unique payId. */
-declare function generatePayId(): string;
 /** Chain ids supported by Daimo Pay. */
 declare const supportedChainIds: Set<number>;
 
-export { Avatar, Chain as ChainIcon, DaimoPayButton, Context as DaimoPayContext, DaimoPayProvider, types_d as Types, daimoPayVersion, generatePayId, defaultConfig as getDefaultConfig, supportedChainIds, useModal as useDaimoPayModal, useDaimoPayStatus, usePayContext, wallets };
+export { Avatar, Chain as ChainIcon, DaimoPayButton, Context as DaimoPayContext, DaimoPayProvider, types_d as Types, daimoPayVersion, defaultConfig as getDefaultConfig, supportedChainIds, useDaimoPayStatus, usePayContext, wallets };

package/build/package.json.js

@@ -1,5 +1,5 @@
 var name = "@daimo/pay";
-var version = "1.2.0";
+var version = "1.3.1";
 var author = "Daimo";
 var homepage = "https://pay.daimo.com";
 var license = "BSD-2-Clause license";
@@ -38,8 +38,8 @@ var keywords = [
 	"crypto"
 ];
 var dependencies = {
-	"@daimo/common": "1.1.1",
-	"@daimo/contract": "1.1.1",
+	"@daimo/common": "1.3.1",
+	"@daimo/contract": "1.3.1",
 	"@solana/wallet-adapter-base": "^0.9.23",
 	"@solana/wallet-adapter-react": "^0.15.35",
 	"@solana/web3.js": "^1.95.4",

package/build/src/components/Common/AmountInput/index.js

@@ -98,7 +98,11 @@ const MultiCurrencySelectAmount = ({ selectedTokenOption, setSelectedTokenOption
             },
         });
         paymentState.setChosenUsd(usd);
-        setRoute(nextPage);
+        setRoute(nextPage, {
+            amountUsd: usd,
+            amountUnits,
+            tokenSymbol: balanceToken.symbol,
+        });
     };
     return (jsxs(PageContent, { children: [jsx(TokenLogoSpinner, { token: balanceToken, showSpinner: false }), jsxs(ModalContent, { "$preserveDisplay": true, children: [jsxs(AmountInputContainer, { 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" })] }), !isUsdStablecoin && (jsx(SwitchContainer, { children: jsx(SwitchButton, { onClick: handleSwitchCurrency, children: jsx(SecondaryAmount, { children: isEditingUsd
                                     ? `${tokenValue} ${balanceToken.symbol}`

package/build/src/components/Common/AmountInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/DaimoPay.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { DaimoPayOrderMode, DaimoPayOrderStatusSource, DaimoPayIntentStatus, retryBackoff, debugJson } from '@daimo/common';
+import { DaimoPayOrderMode, DaimoPayIntentStatus, retryBackoff, debugJson, DaimoPayOrderStatusSource } from '@daimo/common';
 import { Buffer } from 'buffer';
-import React, { createContext, useState, useEffect, useMemo, createElement } from 'react';
+import React, { createContext, useState, useEffect, useMemo, useCallback, createElement } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { WagmiContext, useAccount } from 'wagmi';
 import { REQUIRED_CHAINS } from '../defaultConfig.js';
@@ -103,12 +103,30 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
     const [ckMode, setMode] = useState(mode);
     const [ckCustomTheme, setCustomTheme] = useState(customTheme ?? {});
     const [ckLang, setLang] = useState("en-US");
-    const [open, setOpen] = useState(false);
+    const [open, setOpenState] = useState(false);
+    const setOpen = (open, meta) => {
+        setOpenState(open);
+        trpc.nav.mutate({
+            action: open ? "navOpenPay" : "navClosePay",
+            orderId: daimoPayOrder?.id?.toString(),
+            data: meta ?? {},
+        });
+    };
     const [connector, setConnector] = useState({
         id: "",
     });
     const [solanaConnector, setSolanaConnector] = useState();
-    const [route, setRoute] = useState(ROUTES.SELECT_METHOD);
+    const [route, setRouteState] = useState(ROUTES.SELECT_METHOD);
+    const setRoute = (route, data) => {
+        const action = route.replace("daimoPay", "");
+        log(`[SET ROUTE] ${action} ${daimoPayOrder?.id} ${debugJson(data ?? {})}`);
+        trpc.nav.mutate({
+            action,
+            orderId: daimoPayOrder?.id?.toString(),
+            data: data ?? {},
+        });
+        setRouteState(route);
+    };
     const [errorMessage, setErrorMessage] = useState("");
     const [confirmationMessage, setConfirmationMessage] = useState(undefined);
     const [resize, onResize] = useState(0);
@@ -129,13 +147,23 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         }
     }, [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("-", ""));
     // Connect to the Daimo Pay TRPC API
-    const trpc = useMemo(() => createTrpcClient(payApiUrl), [payApiUrl]);
+    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, setDaimoPayOrder] = useState();
+    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}`;
+        if (order.mode === DaimoPayOrderMode.HYDRATED) {
+            extra += ` via ${order.intentAddr} ${order.sourceStatus} ${order.intentStatus}`;
+        }
+        log(`[PAY] setDaimoPayOrder: ${order.id} ${extra}`);
+    }, [setDaimoPayOrderInner]);
     const paymentState = usePaymentState({
         trpc,
         daimoPayOrder,
@@ -149,13 +177,13 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         // Order just updated...
         if (daimoPayOrder?.mode !== DaimoPayOrderMode.HYDRATED)
             return;
-        const { sourceStatus, intentStatus } = daimoPayOrder;
+        const { intentStatus } = daimoPayOrder;
         let intervalMs = 0;
-        if (sourceStatus === DaimoPayOrderStatusSource.WAITING_PAYMENT) {
-            intervalMs = 2500; // additional, faster polling in WaitingOther
+        if (intentStatus === DaimoPayIntentStatus.UNPAID) {
+            intervalMs = 2000; // additional, faster polling in WaitingOther
         }
-        else if (intentStatus === DaimoPayIntentStatus.PENDING) {
-            intervalMs = 300; // poll fast from (payment initiated) to (finished)
+        else if (intentStatus === DaimoPayIntentStatus.STARTED) {
+            intervalMs = 300; // poll fast from payment started to payment completed
         }
         else {
             return;
@@ -169,6 +197,7 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         const id = daimoPayOrder?.id;
         log(`[PAY] showing payment ${debugJson({ id, modalOptions })}`);
         paymentState.setModalOptions(modalOptions);
+        setOpen(true);
         if (daimoPayOrder &&
             daimoPayOrder.mode === DaimoPayOrderMode.HYDRATED &&
             (daimoPayOrder.sourceStatus !==
@@ -180,7 +209,6 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         else {
             setRoute(ROUTES.SELECT_METHOD);
         }
-        setOpen(true);
     };
     const value = {
         theme: ckTheme,
@@ -196,6 +224,8 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         route,
         setRoute,
         connector,
+        // Daimo Pay context
+        sessionId,
         setConnector,
         solanaConnector,
         setSolanaConnector,

package/build/src/components/DaimoPay.js.map

@@ -1 +1 @@
-{"version":3,"file":"DaimoPay.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DaimoPay.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/DaimoPayButton/index.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useEffect } from 'react';
 import { usePayContext } from '../DaimoPay.js';
 import { TextContainer } from './styles.js';
-import { DaimoPayOrderMode, DaimoPayOrderStatusSource, writeDaimoPayOrderID, assertNotNull, DaimoPayIntentStatus } from '@daimo/common';
+import { DaimoPayOrderMode, DaimoPayIntentStatus, writeDaimoPayOrderID, assertNotNull, getDaimoPayOrderView } from '@daimo/common';
 import { AnimatePresence } from 'framer-motion';
 import { ResetContainer } from '../../styles/index.js';
 import ThemedButton from '../Common/ThemedButton/index.js';
@@ -34,6 +34,8 @@ function DaimoPayButtonCustom(props) {
             paymentOptions: props.paymentOptions,
             preferredChains: props.preferredChains,
             preferredTokens: props.preferredTokens,
+            externalId: props.externalId,
+            metadata: props.metadata,
         }
         : null;
     let payId = "payId" in props ? props.payId : null;
@@ -45,7 +47,7 @@ function DaimoPayButtonCustom(props) {
         else if (payParams != null) {
             paymentState.setPayParams(payParams);
         }
-    }, [payId, ...Object.values(payParams || {})]);
+    }, [payId, ...JSON.stringify(payParams || {})]);
     const { setConfirmationMessage } = context;
     useEffect(() => {
         if (props.confirmationMessage) {
@@ -55,8 +57,8 @@ function DaimoPayButtonCustom(props) {
     // Payment events: call these three event handlers.
     const { onPaymentStarted, onPaymentCompleted, onPaymentBounced } = props;
     const order = paymentState.daimoPayOrder;
+    const intentStatus = order?.intentStatus;
     const hydOrder = order?.mode === DaimoPayOrderMode.HYDRATED ? order : null;
-    const isStarted = hydOrder?.sourceStatus !== DaimoPayOrderStatusSource.WAITING_PAYMENT;
     // Functions to show and hide the modal
     const { children, closeOnSuccess } = props;
     const modalOptions = { closeOnSuccess };
@@ -66,33 +68,38 @@ function DaimoPayButtonCustom(props) {
         context.showPayment(modalOptions);
     };
     const hide = () => context.setOpen(false);
-    useEffect(() => {
-        if (hydOrder == null || !isStarted)
-            return;
-        onPaymentStarted?.({
-            paymentId: writeDaimoPayOrderID(hydOrder.id),
-            type: "payment_started",
-            chainId: assertNotNull(hydOrder.sourceTokenAmount).token.chainId,
-            txHash: assertNotNull(hydOrder.sourceInitiateTxHash),
-        });
-    }, [isStarted]);
+    // Emit event handlers when payment status changes
     useEffect(() => {
         if (hydOrder == null)
             return;
-        if (hydOrder.intentStatus === DaimoPayIntentStatus.PENDING)
+        if (intentStatus === DaimoPayIntentStatus.UNPAID)
             return;
-        const commonFields = {
-            paymentId: writeDaimoPayOrderID(hydOrder.id),
-            chainId: assertNotNull(hydOrder.destFinalCallTokenAmount).token.chainId,
-            txHash: assertNotNull(hydOrder.destFastFinishTxHash ?? hydOrder.destClaimTxHash),
-        };
-        if (hydOrder.intentStatus === DaimoPayIntentStatus.SUCCESSFUL) {
-            onPaymentCompleted?.({ type: "payment_completed", ...commonFields });
+        if (intentStatus === DaimoPayIntentStatus.STARTED) {
+            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}`),
+                payment: getDaimoPayOrderView(hydOrder),
+            });
         }
-        else if (hydOrder.intentStatus === DaimoPayIntentStatus.REFUNDED) {
-            onPaymentBounced?.({ type: "payment_bounced", ...commonFields });
+        else if (intentStatus === DaimoPayIntentStatus.COMPLETED ||
+            intentStatus === DaimoPayIntentStatus.BOUNCED) {
+            const event = {
+                type: intentStatus,
+                paymentId: writeDaimoPayOrderID(hydOrder.id),
+                chainId: hydOrder.destFinalCallTokenAmount.token.chainId,
+                txHash: assertNotNull(hydOrder.destFastFinishTxHash ?? hydOrder.destClaimTxHash, `[PAY BUTTON] dest tx hash null on order ${hydOrder.id} when intent status is ${intentStatus}`),
+                payment: getDaimoPayOrderView(hydOrder),
+            };
+            if (intentStatus === DaimoPayIntentStatus.COMPLETED) {
+                onPaymentCompleted?.(event);
+            }
+            else if (intentStatus === DaimoPayIntentStatus.BOUNCED) {
+                onPaymentBounced?.(event);
+            }
         }
-    }, [hydOrder?.intentStatus]);
+    }, [hydOrder?.id, intentStatus]);
     useEffect(() => {
         if (props.defaultOpen) {
             show();

package/build/src/components/DaimoPayButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/DaimoPayModal/index.js

@@ -35,7 +35,7 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
     const context = usePayContext();
     const paymentState = context.paymentState;
     const { payParams, generatePreviewOrder, isDepositFlow, setPaymentWaitingMessage, setSelectedExternalOption, setSelectedTokenOption, setSelectedSolanaTokenOption, setSelectedDepositAddressOption, } = paymentState;
-    const { isConnected, chain } = useAccount();
+    const { isConnected, connector, chain, address } = useAccount();
     const chainIsSupported = useChainIsSupported(chain?.id);
     //if chain is unsupported we enforce a "switch chain" prompt
     const closeable = !(context.options?.enforceSupportedChains &&
@@ -45,81 +45,82 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
         context.route !== ROUTES.SELECT_METHOD &&
         context.route !== ROUTES.CONFIRMATION;
     const onBack = () => {
+        const meta = { event: "click-back" };
         if (context.route === ROUTES.DOWNLOAD) {
-            context.setRoute(ROUTES.CONNECT);
+            context.setRoute(ROUTES.CONNECT, meta);
         }
         else if (context.route === ROUTES.CONNECTORS) {
-            context.setRoute(ROUTES.SELECT_METHOD);
+            context.setRoute(ROUTES.SELECT_METHOD, meta);
         }
         else if (context.route === ROUTES.SELECT_TOKEN) {
-            context.setRoute(ROUTES.SELECT_METHOD);
+            context.setRoute(ROUTES.SELECT_METHOD, meta);
         }
         else if (context.route === ROUTES.SELECT_AMOUNT) {
             setSelectedTokenOption(undefined);
-            context.setRoute(ROUTES.SELECT_TOKEN);
+            context.setRoute(ROUTES.SELECT_TOKEN, meta);
         }
         else if (context.route === ROUTES.SELECT_EXTERNAL_AMOUNT) {
             setSelectedExternalOption(undefined);
-            context.setRoute(ROUTES.SELECT_METHOD);
+            context.setRoute(ROUTES.SELECT_METHOD, meta);
         }
         else if (context.route === ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT) {
             setSelectedDepositAddressOption(undefined);
-            context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN);
+            context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN, meta);
         }
         else if (context.route === ROUTES.WAITING_EXTERNAL) {
             setPaymentWaitingMessage(undefined);
             if (isDepositFlow) {
-                assert(payParams != null, "payParams cannot be null in deposit flow");
+                assert(payParams != null, "[PAY MODAL] payParams cannot be null in deposit flow");
                 generatePreviewOrder(payParams);
-                context.setRoute(ROUTES.SELECT_EXTERNAL_AMOUNT);
+                context.setRoute(ROUTES.SELECT_EXTERNAL_AMOUNT, meta);
             }
             else {
                 setSelectedExternalOption(undefined);
-                context.setRoute(ROUTES.SELECT_METHOD);
+                context.setRoute(ROUTES.SELECT_METHOD, meta);
             }
         }
         else if (context.route === ROUTES.PAY_WITH_TOKEN) {
             if (isDepositFlow) {
-                assert(payParams != null, "payParams cannot be null in deposit flow");
+                assert(payParams != null, "[PAY MODAL] payParams cannot be null in deposit flow");
                 generatePreviewOrder(payParams);
-                context.setRoute(ROUTES.SELECT_AMOUNT);
+                context.setRoute(ROUTES.SELECT_AMOUNT, meta);
             }
             else {
                 setSelectedTokenOption(undefined);
-                context.setRoute(ROUTES.SELECT_TOKEN);
+                context.setRoute(ROUTES.SELECT_TOKEN, meta);
             }
         }
         else if (context.route === ROUTES.ONBOARDING) {
-            context.setRoute(ROUTES.CONNECTORS);
+            context.setRoute(ROUTES.CONNECTORS, meta);
         }
         else if (context.route === ROUTES.WAITING_DEPOSIT_ADDRESS) {
             if (isDepositFlow) {
-                assert(payParams != null, "payParams cannot be null in deposit flow");
+                assert(payParams != null, "[PAY MODAL] payParams cannot be null in deposit flow");
                 generatePreviewOrder(payParams);
-                context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT);
+                context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT, meta);
             }
             else {
                 setSelectedDepositAddressOption(undefined);
-                context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN);
+                context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN, meta);
             }
         }
         else if (context.route === ROUTES.SOLANA_SELECT_AMOUNT) {
             setSelectedSolanaTokenOption(undefined);
-            context.setRoute(ROUTES.SOLANA_SELECT_TOKEN);
+            context.setRoute(ROUTES.SOLANA_SELECT_TOKEN, meta);
         }
         else if (context.route === ROUTES.SOLANA_PAY_WITH_TOKEN) {
             if (isDepositFlow) {
-                assert(payParams != null, "payParams cannot be null in deposit flow");
+                assert(payParams != null, "[PAY MODAL] payParams cannot be null in deposit flow");
                 generatePreviewOrder(payParams);
-                context.setRoute(ROUTES.SOLANA_SELECT_AMOUNT);
+                context.setRoute(ROUTES.SOLANA_SELECT_AMOUNT, meta);
             }
             else {
                 setSelectedSolanaTokenOption(undefined);
-                context.setRoute(ROUTES.SOLANA_SELECT_TOKEN);
+                context.setRoute(ROUTES.SOLANA_SELECT_TOKEN, meta);
             }
         }
         else {
-            context.setRoute(ROUTES.SELECT_METHOD);
+            context.setRoute(ROUTES.SELECT_METHOD, meta);
         }
     };
     const pages = {
@@ -149,17 +150,22 @@ const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThem
     };
     function hide() {
         if (isDepositFlow) {
-            assert(payParams != null, "payParams cannot be null in deposit flow");
+            assert(payParams != null, "[PAY MODAL] payParams cannot be null in deposit flow");
             generatePreviewOrder(payParams);
         }
-        context.setOpen(false);
+        context.setOpen(false, { event: "click-close" });
     }
     useEffect(() => {
         if (context.route === ROUTES.CONNECT ||
             context.route === ROUTES.CONNECTORS ||
             context.route === ROUTES.MOBILECONNECTORS) {
             if (isConnected) {
-                context.setRoute(ROUTES.SELECT_TOKEN);
+                context.setRoute(ROUTES.SELECT_TOKEN, {
+                    event: "connected",
+                    walletId: connector?.id,
+                    chainId: chain?.id,
+                    address,
+                });
             }
         }
     }, [isConnected, context.route]);

package/build/src/components/DaimoPayModal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Pages/Confirmation/index.js

@@ -21,7 +21,7 @@ const Confirmation = () => {
                 destStatus === DaimoPayOrderStatusDest.CLAIM_SUCCESSFUL) {
                 const txHash = daimoPayOrder.destFastFinishTxHash ?? daimoPayOrder.destClaimTxHash;
                 const chainId = daimoPayOrder.destFinalCallTokenAmount.token.chainId;
-                assert(txHash != null, `Dest ${destStatus}, but missing txHash`);
+                assert(txHash != null, `[CONFIRMATION] dest status: ${destStatus}, but missing txHash`);
                 const txURL = getChainExplorerTxUrl(chainId, txHash);
                 paymentState.onSuccess({ txHash, txURL });
                 return {

package/build/src/components/Pages/PayWithToken/index.js

@@ -53,7 +53,7 @@ const PayWithToken = () => {
             await payWithToken(option.required);
             setPayState(PayState.RequestSuccessful);
             setTimeout(() => {
-                setRoute(ROUTES.CONFIRMATION);
+                setRoute(ROUTES.CONFIRMATION, { event: "wait-pay-with-token" });
             }, 200);
         }
         catch (e) {

package/build/src/components/Pages/SelectDepositAddressAmount/index.js

@@ -45,8 +45,9 @@ const SelectDepositAddressAmount = () => {
         }
     };
     const handleContinue = () => {
-        paymentState.setChosenUsd(Number(sanitizeNumber(usdInput)));
-        setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS);
+        const amountUsd = Number(sanitizeNumber(usdInput));
+        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, { children: jsx(AmountInputField, { value: usdInput, onChange: handleAmountChange, onKeyDown: handleKeyDown }) }), message && jsx(ModalBody, { children: message }), jsx(Button, { onClick: handleContinue, disabled: continueDisabled, children: "Continue" })] })] }));
 };

package/build/src/components/Pages/SelectDepositAddressAmount/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Pages/SelectDepositAddressChain/index.js

@@ -22,11 +22,12 @@ const SelectDepositAddressChain = () => {
                         icons: [option.logoURI],
                         onClick: () => {
                             setSelectedDepositAddressOption(option);
+                            const meta = { event: "click-option", option: option.id };
                             if (isDepositFlow) {
-                                setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT);
+                                setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT, meta);
                             }
                             else {
-                                setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS);
+                                setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS, meta);
                             }
                         },
                     };

package/build/src/components/Pages/SelectDepositAddressChain/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Pages/SelectExternalAmount/index.js

@@ -47,8 +47,9 @@ const SelectExternalAmount = () => {
         }
     };
     const handleContinue = () => {
-        paymentState.setChosenUsd(Number(sanitizeNumber(usdInput)));
-        setRoute(ROUTES.WAITING_EXTERNAL);
+        const amountUsd = Number(sanitizeNumber(usdInput));
+        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" })] })] }));
 };

package/build/src/components/Pages/SelectExternalAmount/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/Pages/SelectMethod/index.js

@@ -64,7 +64,7 @@ function getDepositAddressOption(depositAddressOptions) {
 }
 const SelectMethod = () => {
     const isMobile = useIsMobile();
-    const { address, isConnected, connector } = useAccount();
+    const { address, chain, isConnected, connector } = useAccount();
     const { disconnectAsync } = useDisconnect();
     const { setRoute, paymentState, log } = usePayContext();
     const { setSelectedExternalOption, externalPaymentOptions, depositAddressOptions, senderEnsName, } = paymentState;
@@ -75,7 +75,12 @@ const SelectMethod = () => {
             title: `Pay with ${displayName}`,
             icons: connector && connector.icon ? [connector.icon] : [jsx(MetaMask, {})],
             onClick: () => {
-                setRoute(ROUTES.SELECT_TOKEN);
+                setRoute(ROUTES.SELECT_TOKEN, {
+                    event: "click-wallet",
+                    walletId: connector?.id,
+                    chainId: chain?.id,
+                    address: address,
+                });
             },
         }
         : null;
@@ -103,11 +108,12 @@ const SelectMethod = () => {
             icons: [option.logoURI],
             onClick: () => {
                 setSelectedExternalOption(option);
+                const meta = { event: "click-option", option: option.id };
                 if (paymentState.isDepositFlow) {
-                    setRoute(ROUTES.SELECT_EXTERNAL_AMOUNT);
+                    setRoute(ROUTES.SELECT_EXTERNAL_AMOUNT, meta);
                 }
                 else {
-                    setRoute(ROUTES.WAITING_EXTERNAL);
+                    setRoute(ROUTES.WAITING_EXTERNAL, meta);
                 }
             },
             disabled: option.disabled,

package/build/src/components/Pages/SelectMethod/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}