Skip to content

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

ParameterDescriptionTypeRequired
actionTypeType of transaction to submit.ActionTypetrue
actionConfigRequired params to fulfill action type.ActionConfigtrue
apiKeyDecent API key. Can create in Console.stringtrue
wagmiConfigConfiguration for your wagmi client.Config *imported from @wagmi/coretrue
onConnectWalletCallback function to handle connecting wallets from the modal.() => voidtrue
classNameCustom Tailwind CSS styling.stringtrue
paymentButtonTextText for button CTA.stringfalse
chainsOptionally support only a subset of Decent chains.ChainId[]false
disableLoadingModalsOption to disable default loading modals so that you can write your own.booleanfalse
enableTestnetsOption to include testnets in supported chains.booleanfalse
disableGuardDisable the "Pay Now" button based on an arbitrary disableGuard function.() => Promise<{ disable: boolean; message: string }>false
onTxErrorCallback function executed on a transaction through The Box failing.onTxError?: (e: unknown) => voidfalse
onTxPendingCallback function executed on a transaction through The Box being initiated.onTxPending?: (r: WriteContractResult) => voidfalse
onTxReceiptCallback function executed on source chain transaction confirming.onTxReceipt?: (r: TransactionReceipt) => voidfalse
onDstTxReceiptCallback function executed on destination chain transaction confirming.onDstTxReceipt?: (r: TransactionReceipt) => voidfalse

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';
import { useConnectModal } from '@rainbow-me/rainbowkit';
import { wagmiConfig } from '../your_wagmi_config_path';
 
// wagmi a required prop in v2.1.0 and higher.
// Create a config for your project following these docs:
// https://wagmi.sh/react/api/createConfig
 
...
const Component = () => {
  const { openConnectModal } = useConnectModal();
 
  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,
        ],
      }}
      wagmiConfig={wagmiConfig}
      onConnectWallet={openConnectModal}
      apiKey={'DECENT_API_KEY'}
    />
  );
};