Connect button - DZap

ConnectButton must render inside WalletProviders (or DZapWidgetProvider, which mounts it).

Default

The default export opens the wallet modal. Use it as a “connect another wallet” control, or replace it with the custom render-prop.

import { ConnectButton } from '@dzapio/wallet';

<ConnectButton />

Custom

ConnectButton.Custom gives you account state and modal openers. Style the trigger however you want; the package still owns the connect and account dialogs.

import { ConnectButton } from '@dzapio/wallet';

<ConnectButton.Custom>
  {({ account, accounts, openConnectModal, openAccountModal }) => {
    const isConnected = Boolean(account?.address && account.isConnected);
    return (
      <button onClick={isConnected ? openAccountModal : openConnectModal}>
        {isConnected ? (account.ensName ?? account.address) : 'Connect Wallet'}
      </button>
    );
  }}
</ConnectButton.Custom>

Render-prop field	Description
`account`	Active account (see Hooks)
`accounts`	All connected accounts across ecosystems
`openConnectModal`	Open the wallet picker
`openAccountModal`	Open the connected-account dialog

From @dzapio/widget, the equivalent styled control is ConnectWalletButton.

Last modified on August 18, 2026