Optional Props

Additional customizations for The Box.

For additional configuration, pass any of the following props into TheBoxProps for your box component:

paymentButtonText

paymentButtonText?: string;
AboutCustomizable text for the transaction button
DefaultPay Now

disableLoadingModals

disableLoadingModals?: boolean;
AboutDisable the loading modals after clicking on the transaction button
Defaultfalse
ConsiderationsSet to true and use in combination with onTxError, onTxPending, and onTxReceipt to build a custom loading modal flow.

enableTestnets

enableTestnets?: boolean;
AboutSupport for testnet chains in The Box
Defaultfalse
ConsiderationsWe strongly recommend testing on mainnets. Testnet relayers are scarce, so crosschain transactions will take significantly longer on testnets.

disableGuard

disableGuard?: () => Promise<{ disable: boolean; message: string }>;
AboutDisable the box "Pay Now" button depending on an arbitrary disableGuard function
DefaultNone
ConsiderationsAmong other things, this is great for NFT claim conditions or launching / ending functionality at a given time.

onTxError

onTxError?: (e: unknown) => void;
AboutCallback function executed on a transaction through The Box failing
DefaultNone

onTxPending

onTxPending?: (r: WriteContractResult) => void;
AboutCallback function executed on a transaction through The Box being initiated
DefaultNone

onTxReceipt

onTxReceipt?: (r: TransactionReceipt) => void;
AboutCallback function executed on source chain transaction confirming
DefaultNone

onDstTxReceipt

onDstTxReceipt?: (r: TransactionReceipt) => void;
AboutCallback function executed on destination chain transaction confirming
DefaultNone
ConsiderationsTransactions on destination network will very rarely fail if The Box has been properly configured. From your users' point-of-view, it is safe for them to assume that their transaction is taken care of once it is confirmed on the source chain. We recommend anchoring core transaction loading states and messaging on onTxReceipt. onDstTxReceipt is best for asynchronously notifying users about the outcome of their transaction.