Skip to content

Getting Started with React Components

The Box package includes a point of sale component and an embeddable swap modal. These React components are the fastest way to integrate cross-chain swaps and execution into your application.

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

npm
npm i @decent.xyz/the-box

Dependencies:

└── @decent.xyz/box-hooks
    └── @decent.xyz/box-common
    └── @decent.xyz/box-hooks
    └── @decent.xyz/box-ui
    └── @decent.xyz/box-evm
└── viem "2.x"
└── wagmi "v2.x"

Configuration

These components assume that you have properly configured your web3 library and wallet provider at the top of your component tree. 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.

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';