The Box Props

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:

Action Configs

Below are each of the corresponding configs:

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?: number; // 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