Point of Sale

Decent enables one click transactions using any token on any chain. The Box is a point of sale modal that abstracts bridging and swapping, enabling users to execute any smart contract function with any token in their wallet.

Decent's React components let developers inherit functionality like chain and token selectors, reading users' wallet balances across chains, and tracking the progress of transactions to get up and running as quickly as possible. Developers can write custom themes to style The Box to fit their application's design. For maximally customizable solutions though, please view Hooks or API implementations.

Component Props

Parameter	Description	Type	Required
`actionType`	Type of transaction to submit.	`ActionType`	`true`
`actionConfig`	Required params to fulfill action type.	`ActionConfig`	`true`
`apiKey`	Decent API key. Can create in Console.	`string`	`true`
`className`	Tailwind CSS styling.	`string`	`true`
`paymentButtonText`	Text for button CTA.	`string`	`false`
`chains`	Optionally support only a subset of Decent chains.	`ChainId[]`	`false`
`disableLoadingModals`	Option to disable default loading modals so that you can write your own.	`boolean`	`false`
`enableTestnets`	Option to include testnets in supported chains.	`boolean`	`false`
`disableGuard`	Disable the "Pay Now" button based on an arbitrary disableGuard function.	`() => Promise<{ disable: boolean; message: string }>`	`false`
`onTxError`	Callback function executed on a transaction through The Box failing.	`onTxError?: (e: unknown) => void`	`false`
`onTxPending`	Callback function executed on a transaction through The Box being initiated.	`onTxPending?: (r: WriteContractResult) => void`	`false`
`onTxReceipt`	Callback function executed on source chain transaction confirming.	`onTxReceipt?: (r: TransactionReceipt) => void`	`false`
`onDstTxReceipt`	Callback function executed on destination chain transaction confirming.	`onDstTxReceipt?: (r: TransactionReceipt) => void`	`false`

Sample Implementation

Below is an example of how to style The Box and use the EvmFunction action type to supply liquidity to Aave on Base. Please see example use cases for additional ideas as to where you might use Decent.

Please be sure to view the Getting Started section before progressing through these steps.

Step one (optional): Write a custom theme for the modal

Import the BoxThemeProvider at the top of your component tree. You can either write your own custom theme or import Decent's darkMode as an alternative styling option.

_app.tsx

import "@decent.xyz/the-box/index.css";
import { BoxThemeProvider } from "@decent.xyz/the-box";
 
const myTheme = {
  mainBgColor: "...",
  mainTextColor: "...",
  boxSubtleColor1: "...",
  boxSubtleColor2: "...",
  gearCircleColor: "...",
  loadShineColor1: "...",
  loadShineColor2: "...",
  chainDropdownBorder: "...",
  chainDropdownHoverColor: "...",
  buyBtnBgColor: "...",
  buyBtnTextColor: "...",
  boxLoadingBadgeColor: "...",
  boxDialogBgColor: "...",
}
 
...
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <BoxThemeProvider theme={myBoxTheme}>
      <Component {...pageProps} />  
    </BoxThemeProvider>
  );
};

Step two: Import The Box into the appropriate page or component

Please refer to the Types Glossary for detailed information on available action types and their corresponding configurations.

import { TheBox } from "@decent.xyz/the-box";
import { ActionType, ChainId } from '@decent.xyz/box-common';
...
const Component = () => {
  return (
    <TheBox
      actionType={ActionType.EvmFunction}
      actionConfig={{
        chainId: ChainId.BASE,
        contractAddress: '0xA238Dd80C259a72e81d7e4664a9801593F98d1c5',
        cost: {
          amount: 10000000000000000n,
          isNative: true,
          tokenAddress: '0x0000000000000000000000000000000000000000',
        },
        signature: 'function supply(address asset, uint256 amount, address onBehalfOf, uint16 referralCode)'',
        args: [
          '0x0000000000000000000000000000000000000000',
          10000000000000000n,
          '0xAcCC1fe6537eb8EB56b31CcFC48Eb9363e8dd32E',
          0n,
        ],
      }}
      apiKey={'DECENT_API_KEY'}
    />
  );
};