@daimo/pay 1.3.3 → 1.4.0

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, DaimoPayUserMetadata, PaymentStartedEvent, PaymentCompletedEvent, PaymentBouncedEvent, DaimoPayIntentStatus } from '@daimo/common';
+import { DaimoPayOrderMode, DepositAddressPaymentOptionMetadata, PlatformType, ExternalPaymentOptionMetadata, WalletPaymentOption, DaimoPayOrder, ExternalPaymentOptions, DepositAddressPaymentOptions, DepositAddressPaymentOptionData, SolanaPublicKey, DaimoPayUserMetadata, PaymentStartedEvent, PaymentCompletedEvent, PaymentBouncedEvent, DaimoPayIntentStatus, DaimoPayOrderView } from '@daimo/common';
 import { Address, Hex } from 'viem';
 import { AppRouter } from '@daimo/pay-api';
 import { CreateTRPCClient } from '@trpc/client';
@@ -70,7 +70,7 @@ type DaimoPayModalOptions = {
     closeOnSuccess?: boolean;
 };
 /** Additional payment options. Onchain payments are always enabled. */
-type PaymentOption = "Daimo" | "Coinbase" | "Binance" | "RampNetwork";
+type PaymentOption = "Daimo" | "Coinbase" | "Binance" | "RampNetwork" | "Solana" | "ExternalChains";
 
 type types_d_All = All;
 type types_d_CustomAvatarProps = CustomAvatarProps;
@@ -127,7 +127,7 @@ declare function useSolanaPaymentOptions({ trpc, address, usdRequired, isDeposit
 };
 
 /** Wallet payment options. User picks one. */
-declare function useWalletPaymentOptions({ trpc, address, usdRequired, destChainId, preferredChains, preferredTokens, isDepositFlow, log, }: {
+declare function useWalletPaymentOptions({ trpc, address, usdRequired, destChainId, preferredChains, preferredTokens, evmChains, isDepositFlow, log, }: {
     trpc: TrpcClient;
     address: string | undefined;
     usdRequired: number | undefined;
@@ -137,6 +137,7 @@ declare function useWalletPaymentOptions({ trpc, address, usdRequired, destChain
         chain: number;
         address: string;
     }[] | undefined;
+    evmChains: number[] | undefined;
     isDepositFlow: boolean;
     log: (msg: string) => void;
 }): {
@@ -172,6 +173,8 @@ interface PayParams {
         chain: number;
         address: Address;
     }[];
+    /** Only allow payments on these EVM chains. */
+    evmChains?: number[];
     /** External ID. E.g. a correlation ID. */
     externalId?: string;
     /** Developer metadata. E.g. correlation ID. */
@@ -203,7 +206,7 @@ interface PaymentState {
     setSelectedSolanaTokenOption: (option: WalletPaymentOption | undefined) => void;
     setSelectedDepositAddressOption: (option: DepositAddressPaymentOptionMetadata | undefined) => void;
     setChosenUsd: (usd: number) => void;
-    payWithToken: (tokenAmount: DaimoPayTokenAmount) => Promise<void>;
+    payWithToken: (walletOption: WalletPaymentOption) => Promise<void>;
     payWithExternal: (option: ExternalPaymentOptions) => Promise<string>;
     payWithDepositAddress: (option: DepositAddressPaymentOptions) => Promise<DepositAddressPaymentOptionData | null>;
     payWithSolanaToken: (inputToken: SolanaPublicKey) => Promise<string | undefined>;
@@ -284,6 +287,9 @@ type ContextValue = {
     /** Custom message to display on confirmation page. */
     confirmationMessage?: string;
     setConfirmationMessage: React$1.Dispatch<React$1.SetStateAction<string | undefined>>;
+    /** Redirect URL to return to the app. E.g. after Coinbase, Binance, RampNetwork. */
+    redirectReturnUrl?: string;
+    setRedirectReturnUrl: React$1.Dispatch<React$1.SetStateAction<string | undefined>>;
 } & useConnectCallbackProps;
 /** Meant for internal use. This will be non-exported in a future SDK version. */
 declare const Context: React$1.Context<ContextValue | null>;
@@ -372,6 +378,10 @@ type PayButtonPaymentProps = {
         chain: number;
         address: Address;
     }[];
+    /**
+     * Only allow payments on these EVM chains.
+     */
+    evmChains?: number[];
     /**
      * External ID. E.g. a correlation ID.
      */
@@ -397,6 +407,8 @@ type PayButtonCommonProps = PayButtonPaymentProps & {
     defaultOpen?: boolean;
     /** Custom message to display on confirmation page. */
     confirmationMessage?: string;
+    /** Redirect URL to return to the app. E.g. after Coinbase, Binance, RampNetwork. */
+    redirectReturnUrl?: string;
 };
 type DaimoPayButtonProps = PayButtonCommonProps & {
     /** Light mode, dark mode, or auto. */
@@ -461,4 +473,7 @@ declare const daimoPayVersion: 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, defaultConfig as getDefaultConfig, supportedChainIds, useDaimoPayStatus, usePayContext, wallets };
+type DaimoPayment = DaimoPayOrderView;
+type DaimoPayEvent = PaymentStartedEvent | PaymentCompletedEvent | PaymentBouncedEvent;
+
+export { Avatar, Chain as ChainIcon, DaimoPayButton, type DaimoPayButtonCustomProps, type DaimoPayButtonProps, Context as DaimoPayContext, type DaimoPayEvent, DaimoPayProvider, type DaimoPayment, 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.3.3";
+var version = "1.4.0";
 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.3.1",
-	"@daimo/contract": "1.3.1",
+	"@daimo/common": "1.3.4",
+	"@daimo/contract": "1.3.4",
 	"@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/PaymentBreakdown/index.js

@@ -4,9 +4,9 @@ import styled from '../../../styles/styled/index.js';
 import { ModalBody } from '../Modal/styles.js';
 
 const PaymentBreakdown = ({ paymentOption }) => {
-    const totalUsd = paymentOption.required.usd;
+    const subtotalUsd = paymentOption.required.usd;
     const feesUsd = paymentOption.fees.usd;
-    const subtotalUsd = totalUsd - feesUsd;
+    const totalUsd = subtotalUsd + feesUsd;
     return (jsxs(FeesContainer, { children: [feesUsd > 0 && (jsxs(FeeRow, { children: [jsx(ModalBody, { children: "Subtotal" }), jsxs(ModalBody, { children: ["$", subtotalUsd.toFixed(2)] })] })), jsxs(FeeRow, { children: [jsx(ModalBody, { children: "Fees" }), feesUsd === 0 ? (jsx(Badge, { children: "Free" })) : (jsxs(ModalBody, { children: ["$", feesUsd.toFixed(2)] }))] }), jsxs(FeeRow, { style: { marginTop: 8 }, children: [jsx(ModalBody, { style: { fontWeight: 600 }, children: "Total" }), jsxs(ModalBody, { style: { fontWeight: 600 }, children: ["$", totalUsd.toFixed(2)] })] })] }));
 };
 const FeesContainer = styled.div `

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

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { keyframes } from 'styled-components';
 import CrepeIcon from '../../../assets/crepe.js';
 import styled from '../../../styles/styled/index.js';
+import { daimoPayVersion } from '../../../utils/exports.js';
 
 const PoweredByFooter = ({ supportUrl } = {}) => {
     const [supportVisible, setSupportVisible] = useState(false);
@@ -17,7 +18,9 @@ const PoweredByFooter = ({ supportUrl } = {}) => {
         return () => clearTimeout(timer);
     }, []);
     return (jsx(Container, { children: jsxs(TextButton, { onClick: () => {
-                window.open(supportVisible ? supportUrl : "https://pay.daimo.com?ref=paykit", "_blank");
+                window.open(supportVisible
+                    ? supportUrl
+                    : `https://pay.daimo.com?ref=paykit-v${daimoPayVersion}`, "_blank");
             }, className: supportVisible ? "support" : "", children: [!supportVisible && jsx(CrepeIcon, {}), jsx("span", { children: supportVisible ? (jsxs(Fragment, { children: ["Need help? ", jsx(Underline, { children: "Contact support" })] })) : (jsx(Fragment, { children: "Powered by Daimo Pay" })) })] }) }));
 };
 const Container = styled(motion.div) `

package/build/src/components/Common/PoweredByFooter/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

@@ -129,6 +129,7 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
     };
     const [errorMessage, setErrorMessage] = useState("");
     const [confirmationMessage, setConfirmationMessage] = useState(undefined);
+    const [redirectReturnUrl, setRedirectReturnUrl] = useState(undefined);
     const [resize, onResize] = useState(0);
     // Include Google Font that is needed for a themes
     if (opts.embedGoogleFonts)
@@ -170,6 +171,7 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         setDaimoPayOrder,
         setOpen,
         log,
+        redirectReturnUrl,
     });
     // When a payment is in progress, poll for status updates. Do this regardless
     // of whether the modal is still being displayed for useDaimoPayStatus().
@@ -235,6 +237,8 @@ const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto"
         errorMessage,
         confirmationMessage,
         setConfirmationMessage,
+        redirectReturnUrl,
+        setRedirectReturnUrl,
         debugMode,
         log,
         displayError: (message, code) => {

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

@@ -34,6 +34,7 @@ function DaimoPayButtonCustom(props) {
             paymentOptions: props.paymentOptions,
             preferredChains: props.preferredChains,
             preferredTokens: props.preferredTokens,
+            evmChains: props.evmChains,
             externalId: props.externalId,
             metadata: props.metadata,
         }
@@ -54,6 +55,12 @@ function DaimoPayButtonCustom(props) {
             setConfirmationMessage(props.confirmationMessage);
         }
     }, [props.confirmationMessage, setConfirmationMessage]);
+    const { setRedirectReturnUrl } = context;
+    useEffect(() => {
+        if (props.redirectReturnUrl) {
+            setRedirectReturnUrl(props.redirectReturnUrl);
+        }
+    }, [props.redirectReturnUrl, setRedirectReturnUrl]);
     // Payment events: call these three event handlers.
     const { onPaymentStarted, onPaymentCompleted, onPaymentBounced } = props;
     const order = paymentState.daimoPayOrder;

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/ConnectWithInjector/index.js

@@ -7,7 +7,7 @@ import Button from '../../Common/Button/index.js';
 import { PageContent, ModalHeading, ModalContent, ModalContentContainer, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
 import Tooltip from '../../Common/Tooltip/index.js';
 import SquircleSpinner from '../../Spinners/SquircleSpinner/index.js';
-import { RetryIconCircle, AlertIcon, TickIcon } from '../../../assets/icons.js';
+import { RetryIconCircle, AlertIcon, ExternalLinkIcon, TickIcon } from '../../../assets/icons.js';
 import { useConnect } from '../../../hooks/useConnect.js';
 import useLocales from '../../../hooks/useLocales.js';
 import { detectBrowser, isWalletConnectConnector } from '../../../utils/index.js';
@@ -195,7 +195,7 @@ const ConnectWithInjector = ({ switchConnectMethod, forceState }) => {
                                                 ? locales.injectionScreen_connecting_injected_h1
                                                 : locales.injectionScreen_connecting_h1 }), jsx(ModalBody, { children: wallet.connector.id === "injected"
                                                 ? locales.injectionScreen_connecting_injected_p
-                                                : locales.injectionScreen_connecting_p })] }) }, states.CONNECTING)), status === states.CONNECTED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsxs(ModalContent, { children: [jsxs(ModalH1, { "$valid": true, children: [jsx(TickIcon, {}), " ", locales.injectionScreen_connected_h1] }), jsx(ModalBody, { children: locales.injectionScreen_connected_p })] }) }, states.CONNECTED)), status === states.NOTCONNECTED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsxs(ModalContent, { children: [jsx(ModalH1, { children: locales.injectionScreen_notconnected_h1 }), jsx(ModalBody, { children: locales.injectionScreen_notconnected_p })] }) }, states.NOTCONNECTED)), status === states.UNAVAILABLE && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: !extensionUrl ? (jsxs(Fragment, { children: [jsxs(ModalContent, { style: { paddingBottom: 12 }, children: [jsx(ModalH1, { children: locales.injectionScreen_unavailable_h1 }), jsx(ModalBody, { children: locales.injectionScreen_unavailable_p })] }), !wallet.isInstalled && suggestedExtension && (jsxs(Button, { href: suggestedExtension?.url, icon: jsx(BrowserIcon, { browser: suggestedExtension?.name }), children: ["Install on ", suggestedExtension?.label] }))] })) : (jsxs(Fragment, { children: [jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [jsx(ModalH1, { children: locales.injectionScreen_install_h1 }), jsx(ModalBody, { children: locales.injectionScreen_install_p })] }), !wallet.isInstalled && extensionUrl && (jsx(Button, { href: extensionUrl, icon: jsx(BrowserIcon, {}), children: locales.installTheExtension }))] })) }, states.UNAVAILABLE))] }) })] }) }));
+                                                : locales.injectionScreen_connecting_p }), jsxs(Button, { icon: jsx(ExternalLinkIcon, {}), onClick: runConnect, children: ["Connect ", walletInfo.name] })] }) }, states.CONNECTING)), status === states.CONNECTED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsxs(ModalContent, { children: [jsxs(ModalH1, { "$valid": true, children: [jsx(TickIcon, {}), " ", locales.injectionScreen_connected_h1] }), jsx(ModalBody, { children: locales.injectionScreen_connected_p })] }) }, states.CONNECTED)), status === states.NOTCONNECTED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsxs(ModalContent, { children: [jsx(ModalH1, { children: locales.injectionScreen_notconnected_h1 }), jsx(ModalBody, { children: locales.injectionScreen_notconnected_p })] }) }, states.NOTCONNECTED)), status === states.UNAVAILABLE && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: !extensionUrl ? (jsxs(Fragment, { children: [jsxs(ModalContent, { style: { paddingBottom: 12 }, children: [jsx(ModalH1, { children: locales.injectionScreen_unavailable_h1 }), jsx(ModalBody, { children: locales.injectionScreen_unavailable_p })] }), !wallet.isInstalled && suggestedExtension && (jsxs(Button, { href: suggestedExtension?.url, icon: jsx(BrowserIcon, { browser: suggestedExtension?.name }), children: ["Install on ", suggestedExtension?.label] }))] })) : (jsxs(Fragment, { children: [jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [jsx(ModalH1, { children: locales.injectionScreen_install_h1 }), jsx(ModalBody, { children: locales.injectionScreen_install_p })] }), !wallet.isInstalled && extensionUrl && (jsx(Button, { href: extensionUrl, icon: jsx(BrowserIcon, {}), children: locales.installTheExtension }))] })) }, states.UNAVAILABLE))] }) })] }) }));
 };
 
 export { ConnectWithInjector as default, states };

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

@@ -50,7 +50,7 @@ const PayWithToken = () => {
         }
         setPayState(PayState.RequestingPayment);
         try {
-            await payWithToken(option.required);
+            await payWithToken(option);
             setPayState(PayState.RequestSuccessful);
             setTimeout(() => {
                 setRoute(ROUTES.CONFIRMATION, { event: "wait-pay-with-token" });
@@ -64,7 +64,7 @@ const PayWithToken = () => {
                 const switchSuccessful = await trySwitchingChain(option, true);
                 if (switchSuccessful) {
                     try {
-                        await payWithToken(option.required);
+                        await payWithToken(option);
                         return; // Payment successful after switching chain
                     }
                     catch (retryError) {

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { usePayContext, ROUTES } from '../../DaimoPay.js';
 import { PageContent } from '../../Common/Modal/styles.js';
-import { getAddressContraction } from '@daimo/common';
+import { getAddressContraction, ExternalPaymentOptions } from '@daimo/common';
 import { useWallet } from '@solana/wallet-adapter-react';
 import { useAccount, useDisconnect } from 'wagmi';
 import { Solana, Bitcoin, Tron, Zcash } from '../../../assets/chains.js';
@@ -67,8 +67,9 @@ const SelectMethod = () => {
     const { address, chain, isConnected, connector } = useAccount();
     const { disconnectAsync } = useDisconnect();
     const { setRoute, paymentState, log } = usePayContext();
-    const { setSelectedExternalOption, externalPaymentOptions, depositAddressOptions, senderEnsName, } = paymentState;
+    const { daimoPayOrder, setSelectedExternalOption, externalPaymentOptions, depositAddressOptions, senderEnsName, } = paymentState;
     const displayName = senderEnsName ?? (address ? getAddressContraction(address) : "wallet");
+    const paymentOptions = daimoPayOrder?.metadata.payer?.paymentOptions;
     const connectedWalletOption = isConnected
         ? {
             id: "connectedWallet",
@@ -97,30 +98,43 @@ const SelectMethod = () => {
         ? [connectedWalletOption, unconnectedWalletOption]
         : [unconnectedWalletOption];
     log(`[SELECT_METHOD] loading: ${externalPaymentOptions.loading}, options: ${JSON.stringify(externalPaymentOptions.options)}`);
-    const solanaOption = getSolanaOption();
-    const depositAddressOption = getDepositAddressOption(depositAddressOptions);
-    const options = [
-        ...walletOptions,
-        ...(solanaOption ? [solanaOption] : []),
-        ...(externalPaymentOptions.options ?? []).map((option) => ({
-            id: option.id,
-            title: option.cta,
-            icons: [option.logoURI],
-            onClick: () => {
-                setSelectedExternalOption(option);
-                const meta = { event: "click-option", option: option.id };
-                if (paymentState.isDepositFlow) {
-                    setRoute(ROUTES.SELECT_EXTERNAL_AMOUNT, meta);
-                }
-                else {
-                    setRoute(ROUTES.WAITING_EXTERNAL, meta);
-                }
-            },
-            disabled: option.disabled,
-            subtitle: option.message,
-        })),
-        ...(depositAddressOption ? [depositAddressOption] : []),
-    ];
+    const options = [...walletOptions];
+    // Solana payment option
+    // Include by default if paymentOptions not provided
+    const includeSolana = paymentOptions == null ||
+        paymentOptions.includes(ExternalPaymentOptions.Solana);
+    if (includeSolana) {
+        const solanaOption = getSolanaOption();
+        if (solanaOption) {
+            options.push(solanaOption);
+        }
+    }
+    // External payment options, e.g. Binance, Coinbase, etc.
+    options.push(...(externalPaymentOptions.options ?? []).map((option) => ({
+        id: option.id,
+        title: option.cta,
+        icons: [option.logoURI],
+        onClick: () => {
+            setSelectedExternalOption(option);
+            const meta = { event: "click-option", option: option.id };
+            if (paymentState.isDepositFlow) {
+                setRoute(ROUTES.SELECT_EXTERNAL_AMOUNT, meta);
+            }
+            else {
+                setRoute(ROUTES.WAITING_EXTERNAL, meta);
+            }
+        },
+        disabled: option.disabled,
+        subtitle: option.message,
+    })));
+    // Deposit address options, e.g. Bitcoin, Tron, Zcash, etc.
+    // Include by default if paymentOptions not provided
+    const includeDepositAddressOption = paymentOptions == null ||
+        paymentOptions.includes(ExternalPaymentOptions.ExternalChains);
+    if (includeDepositAddressOption) {
+        const depositAddressOption = getDepositAddressOption(depositAddressOptions);
+        options.push(depositAddressOption);
+    }
     return (jsxs(PageContent, { children: [jsx(OrderHeader, {}), jsx(OptionsList, { requiredSkeletons: isMobile ? 4 : 3, isLoading: externalPaymentOptions.loading, options: externalPaymentOptions.loading ? [] : options }), jsx(PoweredByFooter, {})] }));
 };
 

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -46,7 +46,7 @@ const WaitingExternal = () => {
     return (jsxs(PageContent, { children: [jsx(ExternalPaymentSpinner, { logoURI: selectedExternalOption.logoURI, logoShape: selectedExternalOption.logoShape }), jsxs(ModalContent, { style: { marginLeft: 24, marginRight: 24 }, children: [jsx(ModalH1, { children: "Waiting for Payment" }), paymentWaitingMessage && (jsx(ModalBody, { style: { marginTop: 12, marginBottom: 12 }, children: paymentWaitingMessage }))] }), jsx(Button, { icon: jsx(ExternalLinkIcon, {}), onClick: () => {
                     if (externalURL)
                         window.open(externalURL, "_blank");
-                }, children: "Open in New Tab" })] }));
+                }, children: selectedExternalOption.cta })] }));
 };
 
 export { WaitingExternal as default };

package/build/src/hooks/useExternalPaymentOptions.js

@@ -6,6 +6,7 @@ const DEFAULT_EXTERNAL_PAYMENT_OPTIONS = [
     ExternalPaymentOptions.Binance,
     ExternalPaymentOptions.Daimo,
     ExternalPaymentOptions.RampNetwork,
+    // Solana and ExternalChains are handled in the SelectMethod component.
 ];
 function useExternalPaymentOptions({ trpc, filterIds, platform, usdRequired, mode, }) {
     const [options, setOptions] = useState([]);

package/build/src/hooks/useExternalPaymentOptions.js.map

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

package/build/src/hooks/usePayWithSolanaToken.js

@@ -3,13 +3,12 @@ import { useConnection, useWallet } from '@solana/wallet-adapter-react';
 import { VersionedTransaction } from '@solana/web3.js';
 import { hexToBytes } from 'viem';
 
-function usePayWithSolanaToken({ trpc, daimoPayOrder, setDaimoPayOrder, createOrHydrate, platform, log, }) {
+function usePayWithSolanaToken({ trpc, daimoPayOrder, setDaimoPayOrder, createOrHydrate, log, }) {
     const { connection } = useConnection();
     const wallet = useWallet();
     const payWithSolanaToken = async (inputToken) => {
         assert(!!wallet.publicKey, "[PAY SOLANA] No wallet connected");
         assert(!!daimoPayOrder, "[PAY SOLANA] daimoPayOrder cannot be null");
-        assert(!!platform, "[PAY SOLANA] platform cannot be null");
         const orderId = daimoPayOrder.id;
         const { hydratedOrder } = await createOrHydrate({
             order: daimoPayOrder,

package/build/src/hooks/usePayWithSolanaToken.js.map

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

package/build/src/hooks/usePayWithToken.js

@@ -1,39 +1,41 @@
-import { assert, assertNotNull } from '@daimo/common';
+import { assert, debugJson, assertNotNull } from '@daimo/common';
 import { zeroAddress, erc20Abi, getAddress } from 'viem';
 import { useWriteContract, useSendTransaction } from 'wagmi';
 
-function usePayWithToken({ trpc, senderAddr, daimoPayOrder, setDaimoPayOrder, createOrHydrate, platform, log, }) {
+function usePayWithToken({ trpc, senderAddr, daimoPayOrder, setDaimoPayOrder, createOrHydrate, log, }) {
     const { writeContractAsync } = useWriteContract();
     const { sendTransactionAsync } = useSendTransaction();
     /** Commit to a token + amount = initiate payment. */
-    const payWithToken = async (tokenAmount) => {
+    const payWithToken = async (walletOption) => {
         assert(!!daimoPayOrder, "[PAY TOKEN] daimoPayOrder cannot be null");
-        assert(!!platform, "[PAY TOKEN] platform cannot be null");
+        const { required, fees } = walletOption;
+        assert(required.token.token === fees.token.token, `[PAY TOKEN] required token ${debugJson(required)} does not match fees token ${debugJson(fees)}`);
+        const paymentAmount = BigInt(required.amount) + BigInt(fees.amount);
         const { hydratedOrder } = await createOrHydrate({
             order: daimoPayOrder,
             refundAddress: senderAddr,
         });
-        log(`[CHECKOUT] hydrated order: ${JSON.stringify(hydratedOrder)}, checking out with ${tokenAmount.token.token}`);
+        log(`[PAY TOKEN] hydrated order: ${JSON.stringify(hydratedOrder)}, paying ${paymentAmount} of token ${required.token.token}`);
         setDaimoPayOrder(hydratedOrder);
         const txHash = await (async () => {
             try {
-                if (tokenAmount.token.token === zeroAddress) {
+                if (required.token.token === zeroAddress) {
                     return await sendTransactionAsync({
                         to: hydratedOrder.intentAddr,
-                        value: BigInt(tokenAmount.amount),
+                        value: paymentAmount,
                     });
                 }
                 else {
                     return await writeContractAsync({
                         abi: erc20Abi,
-                        address: getAddress(tokenAmount.token.token),
+                        address: getAddress(required.token.token),
                         functionName: "transfer",
-                        args: [hydratedOrder.intentAddr, BigInt(tokenAmount.amount)],
+                        args: [hydratedOrder.intentAddr, paymentAmount],
                     });
                 }
             }
             catch (e) {
-                console.error(`[CHECKOUT] error sending token: ${e}`);
+                console.error(`[PAY TOKEN] error sending token: ${e}`);
                 throw e;
             }
         })();
@@ -41,10 +43,10 @@ function usePayWithToken({ trpc, senderAddr, daimoPayOrder, setDaimoPayOrder, cr
             await trpc.processSourcePayment.mutate({
                 orderId: daimoPayOrder.id.toString(),
                 sourceInitiateTxHash: txHash,
-                sourceChainId: tokenAmount.token.chainId,
+                sourceChainId: required.token.chainId,
                 sourceFulfillerAddr: assertNotNull(senderAddr, `[PAY TOKEN] senderAddr cannot be null on order ${daimoPayOrder.id}`),
-                sourceToken: tokenAmount.token.token,
-                sourceAmount: tokenAmount.amount,
+                sourceToken: required.token.token,
+                sourceAmount: paymentAmount.toString(),
             });
             // TODO: update order immediately, do not wait for polling.
         }

package/build/src/hooks/usePayWithToken.js.map

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

package/build/src/hooks/usePaymentState.js

@@ -13,7 +13,7 @@ import { usePayWithToken } from './usePayWithToken.js';
 import { useSolanaPaymentOptions } from './useSolanaPaymentOptions.js';
 import { useWalletPaymentOptions } from './useWalletPaymentOptions.js';
 
-function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log, }) {
+function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log, redirectReturnUrl, }) {
     // Browser state.
     const [platform, setPlatform] = useState();
     useEffect(() => {
@@ -49,6 +49,7 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
         destChainId: daimoPayOrder?.destFinalCallTokenAmount.token.chainId,
         preferredChains: daimoPayOrder?.metadata.payer?.preferredChains,
         preferredTokens: daimoPayOrder?.metadata.payer?.preferredTokens,
+        evmChains: daimoPayOrder?.metadata.payer?.evmChains,
         isDepositFlow,
         log,
     });
@@ -75,6 +76,7 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
                 platform,
                 refundAddress,
                 externalPaymentOption,
+                redirectReturnUrl,
             });
         }
         log(`[CREATE/HYDRATE] creating+hydrating new order ${order.id}`);
@@ -93,6 +95,7 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
             platform,
             refundAddress,
             externalPaymentOption,
+            redirectReturnUrl,
         });
     };
     const { payWithToken } = usePayWithToken({
@@ -101,7 +104,6 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
         daimoPayOrder,
         setDaimoPayOrder,
         createOrHydrate,
-        platform,
         log,
     });
     const { payWithSolanaToken } = usePayWithSolanaToken({
@@ -109,7 +111,6 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
         daimoPayOrder,
         setDaimoPayOrder,
         createOrHydrate,
-        platform,
         log,
     });
     const [selectedExternalOption, setSelectedExternalOption] = useState();
@@ -229,6 +230,7 @@ function usePaymentState({ trpc, daimoPayOrder, setDaimoPayOrder, setOpen, log,
                     paymentOptions: payParams.paymentOptions,
                     preferredChains: payParams.preferredChains,
                     preferredTokens: payParams.preferredTokens,
+                    evmChains: payParams.evmChains,
                 },
             },
             externalId: payParams.externalId,

package/build/src/hooks/usePaymentState.js.map

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

package/build/src/hooks/useWalletPaymentOptions.js

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { supportedChainIds } from '../utils/exports.js';
 
 /** Wallet payment options. User picks one. */
-function useWalletPaymentOptions({ trpc, address, usdRequired, destChainId, preferredChains, preferredTokens, isDepositFlow, log, }) {
+function useWalletPaymentOptions({ trpc, address, usdRequired, destChainId, preferredChains, preferredTokens, evmChains, isDepositFlow, log, }) {
     const [options, setOptions] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
     useEffect(() => {
@@ -19,6 +19,7 @@ function useWalletPaymentOptions({ trpc, address, usdRequired, destChainId, pref
                     destChainId,
                     preferredChains,
                     preferredTokens,
+                    evmChains,
                 });
                 // Filter out chains we don't support yet.
                 const isSupported = (o) => supportedChainIds.has(o.balance.token.chainId);

package/build/src/hooks/useWalletPaymentOptions.js.map

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

package/build/src/utils/supportUrl.js

@@ -1,18 +1,17 @@
 import { writeDaimoPayOrderID } from '@daimo/common';
+import { daimoPayVersion } from './exports.js';
 
 function getSupportUrl(daimoPayOrder, screen) {
-    const encodedOrderId = daimoPayOrder == null ? null : writeDaimoPayOrderID(daimoPayOrder.id);
+    const payId = daimoPayOrder == null ? null : writeDaimoPayOrderID(daimoPayOrder.id);
     const email = "support@daimo.com";
-    const subject = `Support with Daimo Pay Id ${encodedOrderId}`;
-    let body = "";
-    if (daimoPayOrder != null) {
-        body += `Id: ${encodedOrderId}\n`;
-        body += `Org Id: ${daimoPayOrder.orgId}\n`;
-    }
-    body += `Support requested on ${screen} screen at ${new Date().toISOString()}\n\n`;
-    body += "Please explain the issue you are experiencing:\n\n";
-    const mailtoUrl = `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
-    return mailtoUrl;
+    const subject = `Support${payId ? ` #${payId}` : ""}`;
+    let body = [
+        `Transaction: ${screen}`,
+        `Version: ${daimoPayVersion}`,
+        ``,
+        `Tell us how we can help`,
+    ].join("\n");
+    return `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
 }
 
 export { getSupportUrl };

package/build/src/utils/supportUrl.js.map

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@daimo/pay",
   "private": false,
-  "version": "1.3.3",
+  "version": "1.4.0",
   "author": "Daimo",
   "homepage": "https://pay.daimo.com",
   "license": "BSD-2-Clause license",
@@ -40,8 +40,8 @@
     "crypto"
   ],
   "dependencies": {
-    "@daimo/common": "1.3.1",
-    "@daimo/contract": "1.3.1",
+    "@daimo/common": "1.3.4",
+    "@daimo/contract": "1.3.4",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/web3.js": "^1.95.4",