User Onboarding to New Chains & Wallets
Many applications try to create user accounts to improve the user experience. Some common use cases include applications deploying embedded wallets for users, DeFi platforms onboarding users into vaulted accounts, and applications deploying their own chains.
Decent streamlines user onboarding by enabling users to swap directly into the application's required token(s) and fill this application account.
- Developers can embed Decent's onboarding modal in account creation and profile pages.
- Developers can specify a target token (e.g., USDC on Arbitrum) and wallet address (e.g., a new Privy or Dynamic wallet) as the destination.
- Users can connect an existing EOA and view all of their token balances across chains.
- Users can select a target balance and enter an amount to transfer.
- In one click, users can onboard directly into their account!
Key supplementary links:
![onboarding-selection](/onboarding-1.png)
![onboarding-modal](/onboarding-2.png)
Component Props
Parameter | Description | Type (see examples below) | Required |
---|---|---|---|
apiKey | Target contract's chain ID. | ChainId | true |
wagmiConfig | Configuration for your wagmi client. | Config *imported from @wagmi/core | true |
onConnectWallet | Callback function to handle connecting wallets from the modal. | () => void | true |
chainIds | Optionally support only a subset of Decent chains. | ChainId[] | false |
className | Tailwind CSS styling. | string | false |
onDstTokenSelected | Callback function to update state based on dst token selection. | (t: TokenInfo) => void | false |
onSrcTokenSelected | Callback function to update state based on src token selection. | (t: TokenInfo) => void | false |
receiverAddress | Address to receive the swapped funds. Will default to connected address. | 0x${string} | false |
selectedSrcToken | Force specific source token. | SelectedChainOrToken | false |
selectedDstToken | Force specific destination token. | SelectedChainOrToken | false |
sendInfoTooltip | Text for the tooltip to explain destination for transaction. | string | false |
Sample Implementation
Below is an example of how to style and install the Onboarding Modal.
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.
import "@decent.xyz/the-box/index.css";
import { BoxThemeProvider } from "@decent.xyz/the-box";
// Eligible theme elements that you may choose to customize.
export const onboardingDarkTheme = {
mainBgColor: '#121212',
mainTextColor: '#ffffff',
lighterBgColor: '#1B1B1B',
tokenSwapCardBgColor: '#1B1B1B',
buyBtnBgColor: '#8236FD',
buyBtnTextColor: '#ffffff',
switchBtnBgColor: '#3A3842',
tokenDialogHoverColor: '#444444',
boxSubtleColor1: '#605E6E',
borderColor: '#27252B',
loadShineColor1: '#121212',
loadShineColor2: '#333333',
greenBadgeTextColor: '#11BC91',
greenBadgeBgColor: '#123129',
yellowBadgeTextColor: '#FF8B31',
yellowBadgeBgColor: '#3D2818',
blueBadgeBgColor: '#256AF633',
blueBadgeTextColor: '#256AF6',
circleLinkChainColor: '#9969FF',
circleLinkBgColor: '#261D3C',
borderRadius: '0',
buyBtnBorderRadius: '999px',
}
...
function MyApp({ Component, pageProps }: AppProps) {
return (
<BoxThemeProvider theme={onboardingDarkTheme}>
<Component {...pageProps} />
</BoxThemeProvider>
);
};
Step two: Import the Onboarding Modal into the appropriate page or component
The Onboarding Modal requires a wagmiConfig
and handler to connect your wallet. Please visit this section of wagmi's docs to reference how you can use wagmi with popular third party wallet connection libraries like RainbowKit, ConnectKit, and others. Your wallet connection library will include an import similar to the useConnectModal
hook depicted here.
import { SwapModal } from "@decent.xyz/the-box";
import { useConnectModal } from "@rainbow-me/rainbowkit";
import { wagmiConfig } from '../your_wagmi_config_path';
...
const Component = () => {
const { openConnectModal } = useConnectModal();
return (
<OnboardingModal
receiverAddress=''
wagmiConfig={wagmiConfig}
apiKey={process.env.NEXT_PUBLIC_DECENT_API_KEY as string}
onConnectWallet={openConnectModal}
sendInfoTooltip={`You're fillling your application wallet!`}
className={''}
selectedDstToken={{
chainId: ChainId.BASE,
tokenInfo: getNativeTokenInfo(ChainId.BASE),
}}
chainIds={[
ChainId.ETHEREUM,
ChainId.ARBITRUM,
ChainId.OPTIMISM,
ChainId.POLYGON,
ChainId.ZORA,
ChainId.MODE,
]}
/>
);
};