Developers can customize the Sequence Kit experience by passing configuration options to the KitProvider wrapper.

Here's how you can configure the kit using these options:

 
  const kitConfig =  {
		defaultTheme: 'light',
		position: 'top-left',
		...
	}
 
  <KitProvider config={kitConfig}>
    <App />
  <KitProvider>
 

defaultTheme

The defaultTheme determines the color palette used for styling the modal. Possible values include:

• 'light'
• 'dark'
• object

Specific colors can be overwritten by passing a theme override object. The Sequence Builder provides a useful playground for toying with the colors in Sequence Kit.

position

The position parameter determines the location of the various modals on the screen. Possible values include:

• center
• middle-right
• middle-left
• top-center
• top-right
• top-left
• bottom-center
• bottom-right
• bottom-left

Sign In Modal Configuration (signIn)

The signIn object is used to configure the sign in modal.

signIn.logoUrl

URL of the logo to be shown in the sign in modal.

signIn.projectName

Name of the project to be shown in the sign in modal.

signIn.showEmailInput

Determines whether the inline email input will be shown in the sign in modal.

signIn.socialAuthOptions

Determines which authentication options will be shown as social options in the sign in modal. The wallets will be displayed in the order they are passed in the array. The values correspond to the connector's id and a corresponding connector must be passed down to wagmi.

For a full list of official connectors, see the connectors page.

signIn.walletAuthOptions

Determines which authentication options will be shown in the modal as web3 wallet options. The wallets will be displayed in the order they are passed in the array. The values correspond to the connector's id and a corresponding connector must be passed down to wagmi.

For a full list of official connectors, see the connectors page.

displayedAssets

If provided, this will determine which assets are to be displayed in the in-game wallet modal main view. By passing a list of displayed assets, only assets from the provided list will be displayed in the main view. In the case that no assets are provided, all owned assets can be displayed in the main view.