Box UI Components

Chain Selector

Component Props

Parameter	Description	Type	Required
`srcChainId`	Network from which to initiate transaction.	`ChainId`	`true`
`setSrcChainId`	State function to update the source chain.	`(id: ChainId) => void`	`true`
`chains`	Optionally support only a subset of Decent chains.	`ChainId[]`	`true`
`title`	Label text for the selector.	`string`	`false`
`onSelected`	Use custom chain icons.	`(id: ChainId) => void`	`false`
`anchorToRight`	Update location of modal.	`boolean`	`false`
`chainIconDictOverride`	Use custom chain icons.	`Record<number, any>`	`false`

Sample Implementation

import { ChainSelector } from '@decent.xyz/box-ui';
import { ChainId } from '@decent.xyz/box-common';
 
const YourComponent = () => {
	const [chain, setChain] = useState< ChainId>(ChainId.ETHEREUM);
  const chains = [
    ChainId.ARBITRUM,
    ChainId.OPTIMISM,
    ChainId.ETHEREUM,
    ChainId.BASE,
    ChainId.RARIBLE,
    ChainId.ZORA,
    ChainId.POLYGON,
  ];
 
  // etc.
  return (
    <ChainSelector
      srcChainId={chain}
      setSrcChainId={setChain}
      chains={chains}
    />
  );
}

Token Selector

Component Props

Parameter	Description	Type	Required
`disabled`	Optionally disable the selector.	`boolean`	`false`
`selectedToken`	Active token selection.	`TokenInfo`	`true`
`setSelectedToken`	State function to update active source token.	`(s: TokenInfo) => void`	`true`
`address`	Wallet address to query token balances.	`Address`	`false`
`chainId`	Selected chain.	`ChainId`	`true`
`selectTokens`	Optionally restrict to specific list of tokens.	`Address[]`	`false`
`selectChains`	Optionally restrict to a specific list of chains.	`ChainId[]`	`false`
`selectorOnly`	Use custom chain icons.	`boolean`	`false`
`hidePopularSection`	Hide common tokens on a chain.	`boolean`	`false`
`searchBoxClassName`	Format the search input.	`string`	`false`
`showUsdValue`	Optionally disable USD quotes for token balances.	`boolean`	`false`

Sample Implementation

import { TokenSelector } from '@decent.xyz/box-ui';
import {
  TokenInfo,
  ChainId,
	ethGasToken
} from '@decent.xyz/box-common';
 
const YourComponent = () => {
  return (
    <TokenSelector
      selectedToken={selectedToken}
      setSelectedToken={setSelectedToken}
      chainId={chainId}
      address={address}
      selectorOnly
      searchBoxClassName="box-py-3 box-rounded-none"
      showUsdValue
    />
  );
};

Balance Selector

This component reads all of a user's token balances and groups them neatly by network and token. It is a very helpful component to let users select which token to use from their available balances.

Component Props

Parameter	Description	Type	Required
`disabled`	Optionally disable the selector.	`boolean`	`false`
`selectedToken`	Active token selection.	`TokenInfo`	`true`
`setSelectedToken`	State function to update active source token.	`(s: TokenInfo) => void`	`true`
`hideZeroBalances`	Do not show tokens without a balance.	`boolean`	`false`
`openToSide`	Show tokens by chain offset to right vs. in dropdown.	`boolean`	`false`
`closeOnSelect`	Optionally close the modal on a selection.	`boolean`	`false`
`address`	Connected wallet address.	`Address`	`false`
`chainId`	Active chain ID.	`ChainId`	`true`
`selectTokens`	Optionally restrict to specific list of tokens.	`Address[]`	`false`
`selectChains`	Optionally restrict to a specific list of chains.	`ChainId[]`	`false`
`className`	Optional Tailwind CSS styling.	`string`	`false`

Sample Implementation

import { 
  BalanceSelector,
  ClientRendered,
  ChainIcon
} from '@decent.xyz/box-ui'; 
 
const YourComponent = () => {
  return (
    <BalanceSelector
      className=""
      selectedToken={selectedToken}
      setSelectedToken={(tokeninfo: TokenInfo) => {
        setSrcToken(tokeninfo);
        setShowBalanceSelector(false);
      }}
      chainId={chainId}
      address={address}
      selectChains={[ChainId.ARBITRUM, ChainId.OPTIMISM, ChainId.POLYGON, ChainId.ETHEREUM, ChainId.BASE, ChainId.ZORA, ChainId.RARIBLE]}
    />
  )
}

Balance Chain Selector

This component reads all of a user's token balances and groups them neatly by chain. It accomplishes the same UX goals as the Balance Selector component with faster load times.

Component Props

Parameter	Description	Type	Required
`disabled`	Optionally disable the selector.	`boolean`	`false`
`selectedToken`	Active token selection.	`TokenInfo`	`true`
`setSelectedToken`	State function to update active source token.	`(s: TokenInfo) => void`	`true`
`hideZeroBalances`	Do not show tokens without a balance.	`boolean`	`false`
`openToSide`	Show tokens by chain offset to right vs. in dropdown.	`boolean`	`false`
`closeOnSelect`	Optionally close the modal on a selection.	`boolean`	`false`
`address`	Connected wallet address.	`Address`	`false`
`chainId`	Active chain ID.	`ChainId`	`true`
`selectTokens`	Optionally restrict to specific list of tokens.	`Address[]`	`false`
`selectChains`	Optionally restrict to a specific list of chains.	`ChainId[]`	`false`
`className`	Optional Tailwind CSS styling.	`string`	`false`

Sample Implementation

import { 
  BalanceChainSelector
} from '@decent.xyz/box-ui'; 
 
const YourComponent = () => {
  return (
    <BalanceChainSelector
      className={'box-border-0'}
      selectedToken={selectedSrcToken}
      setSelectedToken={(tokenInfo) => {
        setSelectedSrcToken(tokenInfo);
        setSrcSelectorOpen(false);
      }}
      selectChains={chainIds}
      selectTokens={[]}
      address={address}
    />
  )
}

Client Rendered

ClientRendered wraps Hooks to prevent any hydration errors. While optional, we recommend this component for a cleaner developer experience.

Sample Implementation

import { 
  BalanceSelector,
  ClientRendered,
  ChainIcon
} from '@decent.xyz/box-ui'; 
 
const YourComponent = () => {
  return (
    <ClientRendered> 
      <BalanceSelector
        className=""
        selectedToken={selectedToken}
        setSelectedToken={(tokeninfo: TokenInfo) => {
          setSrcToken(tokeninfo);
          setShowBalanceSelector(false);
        }}
        chainId={chainId}
        address={address}
        selectChains={[ChainId.ARBITRUM, ChainId.OPTIMISM, ChainId.POLYGON, ChainId.ETHEREUM, ChainId.BASE, ChainId.ZORA, ChainId.RARIBLE]}
      />
    </ClientRendered> 
  )
}