Wallet overview

import { ConnectButton, WalletProviders, useAccount } from '@dzapio/wallet';
import type { InitialChainsData } from '@dzapio/wallet';

const config = {
  walletConnectProjectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID!,
  dzapApiKey: process.env.NEXT_PUBLIC_DZAP_API_KEY,
  appName: 'My dApp',
};

export function App({ chainsData }: { chainsData: InitialChainsData }) {
  return (
    <WalletProviders chainsData={chainsData} config={config}>
      <WalletHeader />
    </WalletProviders>
  );
}

function WalletHeader() {
  const { account } = useAccount();

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