@0xsequence/wallet-widget

Sequence Web SDK Wallet

Embedded wallet allowing to display and send collectibles and coins.

Installing the module

First install the package:

npm install @0xsequence/wallet-widget
# or
pnpm install @0xsequence/wallet-widget
# or
yarn add @0xsequence/wallet-widget

Then the wallet provider module must placed below the Sequence Web SDK Core provider.

import { SequenceWalletProvider } from '@0xsequence/wallet-widget'

const App = () => {
  return (
    <SequenceConnect config={config}>
      <SequenceWalletProvider>
        <Page />
      </SequenceWalletProvider>
    </WagmiProvider>
  )
}

Opening the embedded wallet

The embedded wallet modal can be summoded with the useOpenWalletModal hook.

import { useOpenWalletModal } from '@0xsequence/wallet-widget'

const MyComponent = () => {
  const { setOpenWalletModal } = useOpenWalletModal()

  const onClick = () => {
    setOpenWalletModal(true)
  }

  return <button onClick={onClick}>open wallet</button>
}

Trails widget customization

You can override the Trails widget styling via the connect config. Provide a single CSS string or per-theme values:

import { SequenceConnect, createConfig } from '@0xsequence/connect'

const config = createConfig('waas', {
  projectAccessKey: '<your-project-access-key>',
  waasConfigKey: '<your-waas-config-key>',
  defaultTheme: 'light',
  trailsCustomCSS: {
    light: '/* custom light theme CSS */',
    dark: '/* custom dark theme CSS */'
  }
})