Connect a Wallet

A minimal connect/disconnect button that shows the user's public key when connected.

Code

ConnectButton.tsx

import { useWallet } from '@wankmi/wankmi'
 
export function ConnectButton() {
  const { connect, disconnect, connected, connecting, publicKey } = useWallet()
 
  if (connecting) {
    return <button disabled>Connecting...</button>
  }
 
  if (connected && publicKey) {
    const short = `${publicKey.toBase58().slice(0, 4)}...${publicKey.toBase58().slice(-4)}`
    return (
      <button onClick={disconnect}>
        {short} — Disconnect
      </button>
    )
  }
 
  return <button onClick={connect}>Connect Wallet</button>
}

app.tsx

import { WankmiProvider } from '@wankmi/wankmi'
import { ConnectButton } from './ConnectButton'
 
export default function App() {
  return (
    <WankmiProvider endpoint="https://api.devnet.solana.com">
      <ConnectButton />
    </WankmiProvider>
  )
}

How it works

connecting is true while the wallet popup is open, so the button is disabled to prevent double-clicks.
When connected, the public key is truncated to ABCD...WXYZ format for a clean UI.
disconnect() clears the session — the user will need to approve again next time.

Solflare Display SOL Balance