@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
629 lines (604 loc) • 24.3 kB
TypeScript
import { CreateConfigParameters } from '@wagmi/core';
import { CreateConnectorFn } from 'wagmi';
import { CoinbaseWalletParameters } from 'wagmi/connectors';
import * as react_jsx_runtime from 'react/jsx-runtime';
import React__default, { ReactElement } from 'react';
import { T as Theme, M as Mode, C as CustomTheme, D as DaimoPayContextOptions, L as Languages, a as DaimoPayModalOptions } from './types-1473bcf4.js';
export { c as All, A as Avatar, b as CustomAvatarProps } from './types-1473bcf4.js';
import { DaimoPayOrderView, PaymentStartedEvent, PaymentCompletedEvent, PaymentBouncedEvent, ExternalPaymentOptionsString, DaimoPayUserMetadata, UniquePaymentOptionsString, DaimoPayOrderWithOrg, DaimoPayHydratedOrderWithOrg, DaimoPayOrder, DaimoPayOrderID, SolanaPublicKey, DaimoPayIntentStatus, DaimoPayOrderMode, DepositAddressPaymentOptionMetadata, PlatformType, ExternalPaymentOptionMetadata, WalletPaymentOption, ExternalPaymentOptions, DepositAddressPaymentOptions, DepositAddressPaymentOptionData } from '@daimo/pay-common';
import { Address, Hex } from 'viem';
import { AppRouter } from '@daimo/pay-api';
import { CreateTRPCClient } from '@trpc/client';
import { WalletName } from '@solana/wallet-adapter-base';
declare let version: string;
type DefaultConfigProps = {
appName: string;
appIcon?: string;
appDescription?: string;
appUrl?: string;
coinbaseWalletPreference?: CoinbaseWalletParameters<"4">["preference"];
additionalConnectors?: CreateConnectorFn[];
} & Partial<CreateConfigParameters>;
/** Daimo Pay recommended config, for use with wagmi's createConfig(). */
declare const defaultConfig: ({ appName, appIcon, appDescription, appUrl, additionalConnectors, chains, client, ...props }: DefaultConfigProps) => CreateConfigParameters;
type useConnectCallbackProps = {
onConnect?: ({ address, connectorId, }: {
address?: string;
connectorId?: string;
}) => void;
onDisconnect?: () => void;
};
type DaimoPayProviderProps = {
children?: React__default.ReactNode;
theme?: Theme;
mode?: Mode;
customTheme?: CustomTheme;
options?: DaimoPayContextOptions;
debugMode?: boolean;
/**
* Be careful with this endpoint, some endpoints (incl. Alchemy) don't support
* `signatureSubscribe` which leads to txes behaving erratically
* (ex. successful txes take minutes to confirm instead of seconds)
*/
solanaRpcUrl?: string;
/** Custom Pay API, useful for test and staging. */
payApiUrl?: string;
} & useConnectCallbackProps;
/**
* Provides context for DaimoPayButton and hooks. Place in app root or layout.
*/
declare const DaimoPayProvider: (props: DaimoPayProviderProps) => react_jsx_runtime.JSX.Element;
/** Payment details and status. */
type DaimoPayment = DaimoPayOrderView;
/** Props for DaimoPayButton. */
type PayButtonPaymentProps = {
/**
* Your public app ID. Specify either (payId) or (appId + parameters).
*/
appId: string;
/**
* Destination chain ID.
*/
toChain: number;
/**
* The destination token to send, completing payment. Must be an ERC-20
* token or the zero address, indicating the native token / ETH.
*/
toToken: Address;
/**
* The amount of destination token to send (transfer or approve).
* If not provided, the user will be prompted to enter an amount.
*/
toUnits?: string;
/**
* The destination address to transfer to, or contract to call.
*/
toAddress: Address;
/**
* Optional calldata to call an arbitrary function on `toAddress`.
*/
toCallData?: Hex;
/**
* The intent verb, such as "Pay", "Deposit", or "Purchase".
*/
intent?: string;
/**
* Payment options. By default, all are enabled.
*/
paymentOptions?: ExternalPaymentOptionsString[];
/**
* Preferred chain IDs. Assets on these chains will appear first.
*/
preferredChains?: number[];
/**
* Preferred tokens. These appear first in the token list.
*/
preferredTokens?: {
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.
* */
metadata?: DaimoPayUserMetadata;
/**
* The address to refund to if the payment bounces.
*/
refundAddress?: Address;
/**
* Pass-through tokens. If the user pays via a pass-through
* token, it is sent directly to `toAddress` with no swapping or bridging.
*/
passthroughTokens?: PassthroughToken[];
/** Only show one payment option to the user. */
uniquePaymentOption?: UniquePaymentOptionsString;
} | {
/** The payment ID, generated via the Daimo Pay API. Replaces params above. */
payId: string;
/** Payment options. By default, all are enabled. */
paymentOptions?: ExternalPaymentOptionsString[];
/** Only show one payment option to the user. */
uniquePaymentOption?: UniquePaymentOptionsString;
};
/**
* Represents a pass-through token. If the user pays via a pass-through
* token, it is sent directly to `toAddress` with no swapping or bridging.
*/
type PassthroughToken = {
chain: number;
address: Address;
};
type PayButtonCommonProps = PayButtonPaymentProps & {
/** Called when user sends payment and transaction is seen on chain */
onPaymentStarted?: (event: PaymentStartedEvent) => void;
/** Called when destination transfer or call completes successfully */
onPaymentCompleted?: (event: PaymentCompletedEvent) => void;
/** Called when destination call reverts and funds are refunded */
onPaymentBounced?: (event: PaymentBouncedEvent) => void;
/** Called when the modal is opened. */
onOpen?: () => void;
/** Called when the modal is closed. */
onClose?: () => void;
/** Open the modal by default. */
defaultOpen?: boolean;
/** Automatically close the modal after a successful payment. */
closeOnSuccess?: boolean;
/** Reset the payment after a successful payment. */
resetOnSuccess?: boolean;
/** Go directly to tokens in already-connected Ethereum and Solana wallet(s).
* Don't let the user pick any other payment method. Used in embedded flows.*/
connectedWalletOnly?: 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. */
mode?: Mode;
/** Named theme. See docs for options. */
theme?: Theme;
/** Custom theme. See docs for options. */
customTheme?: CustomTheme;
/** Disable interaction. */
disabled?: boolean;
};
type DaimoPayButtonCustomProps = PayButtonCommonProps & {
/** Custom renderer */
children: (renderProps: {
show: () => void;
hide: () => void;
}) => ReactElement;
};
/**
* A button that shows the Daimo Pay checkout. Replaces the traditional
* Connect Wallet » approve » execute sequence with a single action.
*/
declare function DaimoPayButton(props: DaimoPayButtonProps): JSX.Element;
declare namespace DaimoPayButton {
var Custom: typeof DaimoPayButtonCustom;
}
/** Like DaimoPayButton, but with custom styling. */
declare function DaimoPayButtonCustom(props: DaimoPayButtonCustomProps): JSX.Element;
declare namespace DaimoPayButtonCustom {
var displayName: string;
}
/** Payment parameters. The payment is created only after user taps pay. */
interface PayParams {
/** App ID, for authentication. */
appId: string;
/** Destination chain ID. */
toChain: number;
/** The destination token to send. */
toToken: Address;
/**
* The amount of the token to send.
* If not provided, the user will be prompted to enter an amount.
*/
toUnits?: string;
/** The final address to transfer to or contract to call. */
toAddress: Address;
/** Calldata for final call, or empty data for transfer. */
toCallData?: Hex;
/** The intent verb, such as Pay, Deposit, or Purchase. Default: Pay */
intent?: string;
/** Payment options. By default, all are enabled. */
paymentOptions?: ExternalPaymentOptionsString[];
/** Preferred chain IDs. */
preferredChains?: number[];
/** Preferred tokens. These appear first in the token list. */
preferredTokens?: {
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. */
metadata?: DaimoPayUserMetadata;
/** The address to refund to if the payment bounces or a refund is requested. */
refundAddress?: Address;
/** Pass-through tokens. If the user pays via these tokens, they're sent directly without swapping. */
passthroughTokens?: {
chain: number;
address: Address;
}[];
/** Only show one payment option to the user. */
uniquePaymentOption?: UniquePaymentOptionsString;
}
type PaymentState$1 = {
type: "idle";
} | {
type: "preview";
order: DaimoPayOrderWithOrg;
payParamsData: PayParamsData;
} | {
type: "unhydrated";
order: DaimoPayOrderWithOrg;
} | {
type: "payment_unpaid";
order: DaimoPayHydratedOrderWithOrg;
} | {
type: "payment_started";
order: DaimoPayHydratedOrderWithOrg;
} | {
type: "payment_completed";
order: DaimoPayHydratedOrderWithOrg;
} | {
type: "payment_bounced";
order: DaimoPayHydratedOrderWithOrg;
} | {
type: "error";
order: DaimoPayOrder | undefined;
message: string;
};
type PayParamsData = {
appId: string;
};
type DaimoPayFunctions = {
/**
* Create a new Daimo Pay order preview with the given parameters.
* Call this to start a new payment flow.
*
* @param params - Parameters describing the payment to be created.
*/
createPreviewOrder: (params: PayParams) => Promise<Extract<PaymentState$1, {
type: "preview";
}>>;
/**
* Set the order ID to fetch and manage an existing Daimo Pay order.
* Useful for resuming or referencing a previously created order.
*
* @param id - The Daimo Pay order ID to set.
*/
setPayId: (id: DaimoPayOrderID) => Promise<Extract<PaymentState$1, {
type: "unhydrated" | "payment_unpaid" | "payment_started" | "payment_completed" | "payment_bounced";
}>>;
/**
* Hydrate the current order, locking in the payment intent details and
* token swap prices.
*/
hydrateOrder: (refundAddress?: Address) => Promise<Extract<PaymentState$1, {
type: "payment_unpaid";
}>>;
/** Trigger search for payment on the current order. */
paySource: () => void;
/**
* Register an Ethereum payment source for the current order.
* Call this after the user has submitted an Ethereum payment transaction.
*
* @param args - Details about the Ethereum payment transaction.
*/
payEthSource: (args: {
paymentTxHash: Hex;
sourceChainId: number;
payerAddress: Address;
sourceToken: Address;
sourceAmount: bigint;
}) => Promise<Extract<PaymentState$1, {
type: "payment_started" | "payment_completed" | "payment_bounced";
}>>;
/**
* Register a Solana payment source for the current order.
* Call this after the user has submitted a Solana payment transaction.
*
* @param args - Details about the Solana payment transaction.
*/
paySolanaSource: (args: {
paymentTxHash: string;
sourceToken: SolanaPublicKey;
}) => Promise<Extract<PaymentState$1, {
type: "payment_started" | "payment_completed" | "payment_bounced";
}>>;
/**
* Reset the current payment state and clear the active order.
* Call this to start a new payment flow.
*/
reset: () => void;
/**
* Update the user's chosen amount in USD. Applies only to deposit flow.
*
* @deprecated
*/
setChosenUsd: (usd: number) => void;
};
type DaimoPayState = {
[S in PaymentState$1 as S["type"]]: {
paymentState: S["type"];
order: S extends {
order: infer O;
} ? O : null;
paymentErrorMessage: S extends {
message: infer M;
} ? M : null;
};
}[PaymentState$1["type"]];
type UseDaimoPay = DaimoPayFunctions & DaimoPayState;
/**
* React hook for interacting with Daimo Pay orders and payments. Use this hook
* to manage the lifecycle of a Daimo Pay payment in your application.
*
* This hook provides a simple interface to create, hydrate, pay, and reset
* Daimo Pay orders.
*
* @returns {UseDaimoPay} An object with current payment state and methods to
* manage Daimo Pay orders and payments.
*/
declare function useDaimoPay(): UseDaimoPay;
/** Returns the current payment, or undefined if there is none.
*
* Status values:
* - `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
* - `payment_bounced` - the final call or transfer reverted. Funds were sent
* to the payment's configured refund address on the destination chain.
*/
declare function useDaimoPayStatus(): {
paymentId: string;
status: DaimoPayIntentStatus;
} | undefined;
type UseDaimoPayUI = {
resetPayment: (payParams?: Partial<PayParams>) => Promise<void>;
};
declare function useDaimoPayUI(): UseDaimoPayUI;
/** Icon for an EVM chain, given chain ID. No ID shows a loading spinner. */
declare const Chain: React__default.FC<{
id?: number;
unsupported?: boolean;
radius?: number | string;
size?: number | string;
}>;
/** Ethereum wallets, by name. */
declare const wallets: {
[key: string]: CreateConnectorFn;
};
declare const daimoPayVersion: string;
declare enum ROUTES {
SELECT_METHOD = "daimoPaySelectMethod",
SELECT_TOKEN = "daimoPaySelectToken",
SELECT_AMOUNT = "daimoPaySelectAmount",
SELECT_EXTERNAL_AMOUNT = "daimoPaySelectExternalAmount",
SELECT_EXCHANGE = "daimoPaySelectExchange",
SELECT_DEPOSIT_ADDRESS_AMOUNT = "daimoPaySelectDepositAddressAmount",
SELECT_WALLET_AMOUNT = "daimoPaySelectWalletAmount",
SELECT_WALLET_CHAIN = "daimoPaySelectWalletChain",
SELECT_ZKP2P = "daimoPaySelectZKP2P",
WAITING_EXTERNAL = "daimoPayWaitingExternal",
WAITING_WALLET = "daimoPayWaitingWallet",
SELECT_DEPOSIT_ADDRESS_CHAIN = "daimoPaySelectDepositAddressChain",
WAITING_DEPOSIT_ADDRESS = "daimoPayWaitingDepositAddress",
PAY_WITH_TOKEN = "daimoPayPayWithToken",
CONFIRMATION = "daimoPayConfirmation",
SOLANA_CONNECTOR = "daimoPaySolanaConnector",
SOLANA_SELECT_AMOUNT = "daimoPaySolanaSelectAmount",
SOLANA_PAY_WITH_TOKEN = "daimoPaySolanaPayWithToken",
ERROR = "daimoPayError",
ONBOARDING = "onboarding",
ABOUT = "about",
CONNECTORS = "connectors",
MOBILECONNECTORS = "mobileConnectors",
CONNECT = "connect",
DOWNLOAD = "download",
SWITCHNETWORKS = "switchNetworks"
}
type TrpcClient = CreateTRPCClient<AppRouter>;
type WalletConfigProps = {
id?: string;
name?: string;
shortName?: string;
icon?: string | React.ReactNode;
iconConnector?: React.ReactNode;
iconShape?: "squircle" | "circle" | "square";
iconShouldShrink?: boolean;
downloadUrls?: {
download?: string;
website?: string;
desktop?: string;
android?: string;
ios?: string;
chrome?: string;
firefox?: string;
brave?: string;
edge?: string;
safari?: string;
};
deeplinkScheme?: string;
getDaimoPayDeeplink?: (payId: string) => string;
showInMobileConnectors?: boolean;
isSolanaOnly?: boolean;
};
declare function useDepositAddressOptions({ trpc, usdRequired, mode, }: {
trpc: TrpcClient;
usdRequired: number | undefined;
mode: DaimoPayOrderMode | undefined;
}): {
options: DepositAddressPaymentOptionMetadata[];
loading: boolean;
};
declare function useExternalPaymentOptions({ trpc, filterIds, platform, usdRequired, mode, }: {
trpc: TrpcClient;
filterIds: string[] | undefined;
platform: PlatformType | undefined;
usdRequired: number | undefined;
mode: DaimoPayOrderMode | undefined;
}): {
options: Map<"external" | "zkp2p" | "exchange", ExternalPaymentOptionMetadata[]>;
loading: boolean;
};
/** Wallet payment options. User picks one. */
declare function useSolanaPaymentOptions({ trpc, address, usdRequired, isDepositFlow, showSolanaPaymentMethod, }: {
trpc: TrpcClient;
address: string | undefined;
usdRequired: number | undefined;
isDepositFlow: boolean;
showSolanaPaymentMethod: boolean;
}): {
options: WalletPaymentOption[] | null;
isLoading: boolean;
};
/** Wallet payment options. User picks one. */
declare function useWalletPaymentOptions({ trpc, address, usdRequired, destChainId, destAddress, preferredChains, preferredTokens, evmChains, passthroughTokens, isDepositFlow, log, }: {
trpc: TrpcClient;
address: string | undefined;
usdRequired: number | undefined;
destChainId: number | undefined;
destAddress: Address | undefined;
preferredChains: number[] | undefined;
preferredTokens: {
chain: number;
address: string;
}[] | undefined;
evmChains: number[] | undefined;
passthroughTokens: {
chain: number;
address: string;
}[] | undefined;
isDepositFlow: boolean;
log: (msg: string) => void;
}): {
options: WalletPaymentOption[] | null;
isLoading: boolean;
};
/** Creates (or loads) a payment and manages the corresponding modal. */
interface PaymentState {
generatePreviewOrder: () => void;
resetOrder: (payParams?: Partial<PayParams>) => Promise<void>;
buttonProps: PayButtonPaymentProps | undefined;
setButtonProps: (props: PayButtonPaymentProps | undefined) => void;
setPayId: (id: string | undefined) => void;
setPayParams: (payParams: PayParams | undefined) => Promise<void>;
isDepositFlow: boolean;
paymentWaitingMessage: string | undefined;
externalPaymentOptions: ReturnType<typeof useExternalPaymentOptions>;
selectedWallet: WalletConfigProps | undefined;
selectedWalletDeepLink: string | undefined;
showSolanaPaymentMethod: boolean;
walletPaymentOptions: ReturnType<typeof useWalletPaymentOptions>;
solanaPaymentOptions: ReturnType<typeof useSolanaPaymentOptions>;
depositAddressOptions: ReturnType<typeof useDepositAddressOptions>;
/** Whether Untron receivers are currently available. `null` when unknown. */
untronAvailable: boolean | null;
selectedExternalOption: ExternalPaymentOptionMetadata | undefined;
selectedTokenOption: WalletPaymentOption | undefined;
selectedSolanaTokenOption: WalletPaymentOption | undefined;
selectedDepositAddressOption: DepositAddressPaymentOptionMetadata | undefined;
getOrderUsdLimit: () => number;
setPaymentWaitingMessage: (message: string | undefined) => void;
tokenMode: "evm" | "solana" | "all";
setTokenMode: (mode: "evm" | "solana" | "all") => void;
setSelectedWallet: (wallet: WalletConfigProps | undefined) => void;
setSelectedWalletDeepLink: (deepLink: string | undefined) => void;
setSelectedExternalOption: (option: ExternalPaymentOptionMetadata | undefined) => void;
setSelectedTokenOption: (option: WalletPaymentOption | undefined) => void;
setSelectedSolanaTokenOption: (option: WalletPaymentOption | undefined) => void;
setSelectedDepositAddressOption: (option: DepositAddressPaymentOptionMetadata | undefined) => void;
setChosenUsd: (usd: number) => void;
payWithToken: (walletOption: WalletPaymentOption) => Promise<{
txHash?: Hex;
success: boolean;
}>;
payWithExternal: (option: ExternalPaymentOptions) => Promise<string>;
payWithDepositAddress: (option: DepositAddressPaymentOptions) => Promise<DepositAddressPaymentOptionData | null>;
payWithSolanaToken: (inputToken: SolanaPublicKey) => Promise<{
txHash: string;
success: boolean;
}>;
openInWalletBrowser: (wallet: WalletConfigProps, amountUsd?: number) => void;
senderEnsName: string | undefined;
}
type SolanaWalletName = WalletName<string>;
/** Meant for internal use. This will be non-exported in a future SDK version. */
declare const PayContext: React__default.Context<PayContextValue | null>;
type PayLogFn = (message: string, ...props: any[]) => void;
/** Daimo Pay internal context. */
type PayContextValue = {
theme: Theme;
setTheme: React__default.Dispatch<React__default.SetStateAction<Theme>>;
mode: Mode;
setMode: React__default.Dispatch<React__default.SetStateAction<Mode>>;
customTheme: CustomTheme | undefined;
setCustomTheme: React__default.Dispatch<React__default.SetStateAction<CustomTheme | undefined>>;
lang: Languages;
setLang: React__default.Dispatch<React__default.SetStateAction<Languages>>;
disableMobileInjector: boolean;
setDisableMobileInjector: React__default.Dispatch<React__default.SetStateAction<boolean>>;
setOnOpen: (fn?: () => void) => void;
setOnClose: (fn?: () => void) => void;
open: boolean;
setOpen: (open: boolean, meta?: Record<string, any>) => void;
route: string;
setRoute: (route: ROUTES, data?: Record<string, any>) => void;
errorMessage: string | React__default.ReactNode | null;
debugMode?: boolean;
log: PayLogFn;
displayError: (message: string | React__default.ReactNode | null, code?: any) => void;
resize: number;
triggerResize: () => void;
uniquePaymentMethodPage: ROUTES;
setUniquePaymentMethodPage: React__default.Dispatch<React__default.SetStateAction<ROUTES>>;
/** Session ID. */
sessionId: string;
/** EVM pending connector */
pendingConnectorId: string | undefined;
setPendingConnectorId: (id: string) => void;
/** Chosen Solana wallet, eg Phantom.*/
solanaConnector: SolanaWalletName | undefined;
setSolanaConnector: React__default.Dispatch<React__default.SetStateAction<SolanaWalletName | undefined>>;
/** Global options, across all pay buttons and payments. */
options?: DaimoPayContextOptions;
/** Loads a payment, then shows the modal to complete payment. */
showPayment: (modalOptions: DaimoPayModalOptions) => Promise<void>;
/** Payment status & callbacks. */
paymentState: PaymentState;
/** TRPC API client. Internal use only. */
trpc: any;
/** Callback to call when the payment is successful. */
onSuccess: () => void;
/**
* Whether to show the contact support button. Used specifically for
* WorldPayButton on iOS since links are broken on iOS in World App.
*/
showContactSupport: boolean;
setShowContactSupport: React__default.Dispatch<React__default.SetStateAction<boolean>>;
/** Custom message to display on confirmation page. */
confirmationMessage?: string;
setConfirmationMessage: React__default.Dispatch<React__default.SetStateAction<string | undefined>>;
/** Redirect URL to return to the app. E.g. after Coinbase, Binance, RampNetwork. */
redirectReturnUrl?: string;
setRedirectReturnUrl: React__default.Dispatch<React__default.SetStateAction<string | undefined>>;
} & useConnectCallbackProps;
/** Daimo Pay internal context. */
declare const usePayContext: () => PayContextValue;
export { Chain as ChainIcon, CustomTheme, DaimoPayButton, PayContext as DaimoPayContext, DaimoPayContextOptions, DaimoPayModalOptions, DaimoPayProvider, Languages, Mode, Theme, daimoPayVersion, defaultConfig as getDefaultConfig, useDaimoPay, useDaimoPayStatus, useDaimoPayUI, usePayContext, version, wallets };
export type { DaimoPayButtonCustomProps, DaimoPayButtonProps, DaimoPayment };