Getting Started with Hooks

Decent Hooks enable you to quickly embed cross-chain & any-token execution and instant bridging into your application. Hooks allow for highly customizable interfaces, while streamlining development in Typescript / JavaScript projects.

For server-side implementations or projects that conflict with package requirements, you can use our API's directly - please refer to the API Documentation.

npm i @decent.xyz/box-hooks

Dependencies:

└── @decent.xyz/box-hooks
    └── @decent.xyz/box-common
        ├── @wagmi/core@^2.x
        ├── react@^18.0.0
        ├── viem@^2.x
        └── wagmi@^2.x

Configuration

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.

Decent packages v2.1.0 and higher require a wagmiConfig. Please follow this guide to create a wagmi configuration that you can import into components using Decent.

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>
  );
}