The Box Props

Information on props for The Box.

import { ActionType, ChainId, TheBox } from '@decent.xyz/the-box';

TheBox takes in TheBoxProps to build a customized modal, it is of the following form:

Note: actionType, actionConfig, and apiKey are required, the rest are optional for added customization

Get started with an api key here

The Box props are of the following form

TheBoxProps = {
  actionType: ActionType;
  actionConfig: ActionConfig;
  apiKey: string;
  className?: string; // for any css related custom styling
} & TheBoxCallbacks &
  TheBoxSettings;

Action Types

To select an action type, select from the ActionType enum one of the following:

ActionTypeDescriptionActionConfig
ActionType.ArbitraryEvmActionBuild the calldata for any EVM transactionArbitraryEvmActionConfig
SwapActionExecute a cross-chain swapSwapActionConfig
ActionType.NftMintMint an ERC721 or 1155 tokenNftMintConfig
ActionType.NftPreferMintMint if not sold out, then buy on
secondary if there are available listings
NftPreferMintConfig
ActionType.NftFillAskBuy an nft if there are available listings NftFillAsk

Action Configs

Below are each of the corresponding configs:

ArbitraryEvmAction

export interface BaseActionConfig {
  chainId: ChainId;
  cost?: Payment;
  allowSwapping?: boolean;
  allowBridging?: boolean;
  onlyAllowTokens?: Lookup<ChainId, Address[]>;
}

export interface EvmAction {
  address: EvmAddress;
  signatures: string[];
  args: any[];
  functionName: string;
  value?: bigint;
}

export interface ArbitraryEvmActionConfig extends BaseActionConfig {
  actions: EvmAction[];
}

SwapAction

EXACT_AMOUNT_IN is best used for cross-chain swaps or deposits. EXACT_AMOUNT_OUT is most useful for executing targeted transactions.

export enum SwapDirection {
  EXACT_AMOUNT_IN = 'exact-amount-in',
  EXACT_AMOUNT_OUT = 'exact-amount-out',
}
export interface SwapActionConfig extends BaseActionConfig {
  swapDirection: SwapDirection;
  amount: bigint;
  receiverAddress?: Address;
}

NftMintConfig

NftMintConfig extends NftBaseActionConfig {
  chainId: ChainId;
  contractAddress: Address;
  cost?: Payment; // see Payment tab for type, if empty defaults to free
  signature?: string; // defaults to mint(address to, uint amount)
  args?: any[]; // defaults to (user's address, 1)
}

signature refers to the smart contract function signature, (see here for additional signature info)
args are the relevant parameters

NftFillAsk

export interface NftFillAskConfig {
  chainId: ChainId;
  contractAddress: Address;
  cost?: Payment;
  tokenId?: string; // optional, only if you elect to provide support for an individual nft
  recipient?: Address; // optional, if you wish to mint to a different address
}

NftPreferMintConfig

export interface NftPreferMintConfig extends NftMintConfig, NftFillAskConfig {
  supplyConfig?: NftSupplyConfig; // see below for NftSupplyConfig params, defaults to unlimited
}
  
export interface NftSupplyConfig {
  maxCap?: number;
  sellOutDate?: number;
} // if one of these two are set, the box will check to see if it's soldout

For optional props, see the OptionalProps file


What’s Next

Learn more about optional props