Connect Wallet

Add the ConnectWalletButton component to let users authenticate and create a smart wallet.

The ConnectWalletButton is the primary entry point for user authentication. When no session exists, it renders a connect button that opens the authentication modal. Once connected, it displays the user profile with balance, avatar, and keyshare backup indicators.

Import


import { ConnectWalletButton } from '@embarkai/ui-kit'

Basic Usage

Place the button anywhere inside the Provider tree:


import { Provider, ConnectWalletButton } from '@embarkai/ui-kit'
 
function App() {
  return (
    <Provider projectId="your-project-id">
      <nav>
        <ConnectWalletButton />
      </nav>
    </Provider>
  )
}

Props

Prop	Type	Default	Description
`ConnectButton`	`FC<HTMLAttributes<HTMLButtonElement>>`	Built-in button	Custom React component to render as the connect trigger.
`className`	`string`	`undefined`	CSS class applied to the outer wrapper element.
`label`	`string`	`'Connect'`	Text displayed on the default connect button.
`usePaymaster`	`boolean`	`false`	When `true`, gas fees are sponsored via the configured paymaster.

Custom Connect Button

You can replace the default connect button with your own component. The button receives standard HTML button attributes including the onClick handler:


import { ConnectWalletButton } from '@embarkai/ui-kit'
 
function MyButton(props: React.HTMLAttributes<HTMLButtonElement>) {
  return (
    <button {...props} className="my-custom-btn">
      Sign In
    </button>
  )
}
 
function Header() {
  return <ConnectWalletButton ConnectButton={MyButton} />
}

Styling

Use the className prop to apply custom styles to the wrapper element:


<ConnectWalletButton className="rounded-full shadow-lg" />

The component uses CSS variables from the EmbarkAI theme system. See Theming for details on customizing colors and appearance.

Connected State

When the user is authenticated, the button automatically transitions to a profile widget that displays:

Wallet address (truncated)
Native token balance
User avatar
Keyshare backup status indicator

Clicking the profile widget opens a dropdown with account details, network info, and a disconnect option.

Custom Label

Override the default button text:


<ConnectWalletButton label="Get Started" />

Full Example


import { Provider, ConnectWalletButton } from '@embarkai/ui-kit'
 
function App() {
  return (
    <Provider
      projectId={process.env.NEXT_PUBLIC_EMBARK_PROJECT_ID!}
      initialConfig={{
        network: { chainId: 994873017 }, // Lumia Mainnet
        preferedColorMode: 'dark',
      }}
    >
      <header className="flex items-center justify-between p-4">
        <h1>My dApp</h1>
        <ConnectWalletButton
          label="Enter App"
          usePaymaster
          className="rounded-xl"
        />
      </header>
    </Provider>
  )
}

Next Steps

Provider Setup — configure authentication methods and chains
Session Hooks — read session state after connection
Send Transactions — submit transactions from the connected wallet