ConnectWallet

import { ConnectWallet } from '@txkit/react'

<ConnectWallet />

<ConnectWallet label="Sign In" />

<ConnectWallet
  onConnect={(data) => console.log('Connected:', data.address)}
  onDisconnect={() => console.log('Disconnected')}
  onError={(error) => console.error(error.message)}
/>

<ConnectWallet
  formatAddress={(address) => `${address.slice(0, 6)}..${address.slice(-2)}`}
/>

import { arbitrum } from 'viem/chains'
 
<ConnectWallet chainId={arbitrum.id} />

<ConnectWallet showBalance={false} showAvatar={false} />

import { TxKitProvider, ConnectWallet } from '@txkit/react'
import { RainbowKitProvider, useConnectModal } from '@rainbow-me/rainbowkit'
import '@rainbow-me/rainbowkit/styles.css'
import { mainnet } from 'viem/chains'
import { http } from 'viem'
 
const ConnectButton = () => {
  const { openConnectModal } = useConnectModal()
 
  return (
    <ConnectWallet
      onRequestConnect={() => {
        if (!openConnectModal) {
          return false
        }
        openConnectModal()
        return true
      }}
    />
  )
}
 
const App = () => (
  <TxKitProvider config={{
    chains: [ mainnet ],
    transports: { [mainnet.id]: http() },
  }}>
    <RainbowKitProvider modalSize="compact" locale="en">
      <ConnectButton />
    </RainbowKitProvider>
  </TxKitProvider>
)

<WagmiProvider config={yourWagmiConfig}>
  <QueryClientProvider client={queryClient}>
    <RainbowKitProvider locale="en">
      <TxKitProvider embedded>
        <ConnectButton />
      </TxKitProvider>
    </RainbowKitProvider>
  </QueryClientProvider>
</WagmiProvider>

import { useAppKit } from '@reown/appkit/react'
 
const ConnectButton = () => {
  const { open } = useAppKit()
 
  return (
    <ConnectWallet
      onRequestConnect={() => {
        open({ view: 'Connect' })
        return true
      }}
    />
  )
}

import { useModal } from 'connectkit'
 
const ConnectButton = () => {
  const { setOpen } = useModal()
 
  return (
    <ConnectWallet
      onRequestConnect={() => {
        setOpen(true)
        return true
      }}
    />
  )
}

<ConnectWallet>
  {({ state, displayAddress, ensAvatar, openModal, disconnect, switchChain, requiredChain, error, connectingWallet }) => {
    if (state === 'connecting') {
      return (
        <button disabled>
          Connecting to {connectingWallet ?? 'wallet'}...
        </button>
      )
    }
    if (state === 'wrong-chain' && requiredChain) {
      return (
        <button onClick={() => switchChain(requiredChain.id)}>
          Switch to {requiredChain.name}
        </button>
      )
    }
    if (state === 'error') {
      return (
        <button onClick={openModal} aria-invalid="true">
          {error?.message ?? 'Connection failed'} - retry
        </button>
      )
    }
    if (state === 'connected') {
      return (
        <button onClick={disconnect}>
          {ensAvatar ? <img src={ensAvatar} alt="" /> : null}
          {displayAddress}
        </button>
      )
    }
    return <button onClick={openModal}>Sign In</button>
  }}
</ConnectWallet>

import { useWalletState } from '@txkit/react'
 
const MyWalletButton = () => {
  const { state, displayAddress, connect, connectors, disconnect } = useWalletState()
 
  if (state === 'connected') {
    return <button onClick={disconnect}>{displayAddress}</button>
  }
 
  return (
    <div>
      {connectors.map((connector) => (
        <button key={connector.uid} onClick={() => connect({ connector })}>
          {connector.name}
        </button>
      ))}
    </div>
  )
}

<ConnectWallet
  labels={{
    connect: 'Sign In',
    connecting: 'Signing in...',
    disconnect: 'Sign Out',
  }}
/>