Use the @decent.xyz/box-ui package if you would like to use some of our components in you application! The Box's UI components library is a great way to avoid duplicitous developer efforts on commoditized components like network selectors. These components are all used in The Box React component and pair well with The Box's hooks for developers seeking maximum customizability.

Installation

Simply Install the '@decent.xyz/box-ui' UI package from your favourite package manager.

npm i @decent.xyz/box-ui # or pnpm or yarn

Importing Styles

Import the styles from box-ui somewhere in your application. Usually we do this in the _app.tsx.

import '@decent.xyz/box-ui/index.css';

🎉 That's it! You can now use it.

Components

ChainSelector

Usage:

import {
  ChainSelector,
  ChainId,
} from '@decent.xyz/box-ui';

const YourComponent = () => {
	const [chain, setChain] = useState< ChainId>(ChainId.ETHEREUM);
  const chains = [
    ChainId.ARBITRUM,
    ChainId.OPTIMISM,
    ChainId.GOERLI,
    ChainId.BASE,
  ];

  // etc.
  return (
    <>
      {/*
        // your own stuff
           */}
      <ChainSelector
        srcChainId={chain}
        setSrcChainId={setChain}
        chains={chains}
      />
    </>
  );

}

You can see this live here.

TokenSelector

Usage:

import {
  TokenSelector,
  TokenInfo,
  ChainId,
	ethGasToken
} from '@decent.xyz/box-ui';

const YourComponent = () => {
  const [srcToken, setSrcToken] = useState<TokenInfo>(ethGasToken);
  return (
    <TokenSelector
      srcToken={srcToken}
      setSrcToken={setSrcToken}
      tokens={tokens}
    />
  );

}

srcToken & setSrcToken: State variable of the TokenInfo type. An example is:

export const ethGasToken: TokenInfo = {
  address: zeroAddress,
  decimals: 18,
  name: 'Ethereum',
  symbol: 'ETH',
  logo: ethLogo,
  chainId: ChainId.ETHEREUM,
  isNative: true,
};

tokens: An array of UserTokenInfo's.

UserTokenInfo also contains user's balance, and that's because we show the user's balance of each passed-in token in our modal.