UI Components

Box UI is a library of components designed to provide key frontend features for handling multiple chains and tokens. The components in Box UI are not required or core to sending transactions. However, they can improve the overall devex by providing out of the box solutions for common development tasks.

Decent's components are highly customizable, enabling you to write custom themes to fit these components to the style of your application.

npm i @decent.xyz/box-ui

Dependencies:

└── @decent.xyz/box-hooks
└── @decent.xyz/box-common

Configuration

These components assume that you have properly configured your web3 library and wallet provider at the top of your component tree.

To properly load CSS styles for Decent components, please also import The Box's styles at the top of your _app.tsx file.

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

Decent Hooks require an instance of the Decent client. We recommend setting this context globally app the top of your component tree so that you can access Decent Hooks throughout your project, usually this done in your _app.tsx.

export default function ExampleApp() {
 
  return (
    <Layout>
      <BoxHooksContextProvider
        apiKey={process.env.NEXT_PUBLIC_DECENT_API_KEY}
      >
        {
          /*
          rest of your app
           */
        }
      </BoxHooksContextProvider>
    </Layout>
  );
}

Additionally, @decent.xyz/box-ui includes a helper hook, ClientRendered, that you can use to wrap Hooks requests in your application. While optional, we recommend incorporating to prevent any hydration errors, generally making for a cleaner developer experience.

export default function ExamplePage() {
  const { address: sender } = useAccount();
 
  return (
    <Layout>
      <ClientRendered> 
        <BoxHooksContextProvider
          apiKey={process.env.NEXT_PUBLIC_DECENT_API_KEY as string}
        >
          /*
          rest of your page
           */
        </BoxHooksContextProvider>
      </ClientRendered>
    </Layout>
  );
}