Wallet Standard Connection Flow

Wallet connection looks simple until the UI lies.

The usual bugs are not cryptographic.

They are product bugs.

A button says Connected before the wallet approves.

A rejected request looks like a crash.

A disconnected session still leaves send buttons enabled.

The fix is not more styling.

The fix is to treat wallet connection as explicit runtime state.

ConnectorTap to reveal

One Wallet Standard integration the runtime discovered in the browser, such as Phantom or another supported wallet.

Connector

Connection StatusTap to reveal

The runtime truth about whether a wallet session is absent, changing, connected, or failed.

Connection Status

Wallet SessionTap to reveal

The connected wallet account and related session data that signer-required actions depend on.

Wallet Session

Honest UITap to reveal

A wallet interface that only enables actions once the runtime actually says the session exists.

Honest UI

The Correct Mental Model

Your app does not own the wallet.

It asks the wallet connector for a session.

That session can be:

absent
connecting
connected
failed

Your UI should reflect that state exactly.

Nothing more.

Nothing less.

Step 1: Read Connection State From One Hook

The current React hooks docs expose useWalletConnection() as the main connection surface.

It gives you the available connectors, the current wallet session, the runtime status, and the connect/disconnect actions.

That is the right place to start.

Create components/solana/WalletPanel.tsx:

"use client";

import React from "react";
import { useWalletConnection } from "@solana/react-hooks";

function shortAddress(address?: string) {
  if (!address) return "";
  return `${address.slice(0, 4)}...${address.slice(-4)}`;
}

export function WalletPanel() {
  const { connectors, wallet, status, connect, disconnect } = useWalletConnection();

  const onConnect = async (connectorId: string) => {
    try {
      await connect({ connectorId });
    } catch (e) {
      console.error("connect failed", e);
    }
  };

  const onDisconnect = async () => {
    try {
      await disconnect();
    } catch (e) {
      console.error("disconnect failed", e);
    }
  };

  return (
    <div className="rounded-xl border border-zinc-700 p-4 space-y-3">
      <div className="text-sm text-zinc-300">Status: {status}</div>

      {wallet ? (
        <>
          <div className="text-sm text-zinc-200">
            Connected: {shortAddress(wallet.address)}
          </div>

          <button
            onClick={onDisconnect}
            className="px-3 py-2 rounded bg-red-600 text-white"
          >
            Disconnect
          </button>
        </>
      ) : connectors.length === 0 ? (
        <div className="text-sm text-zinc-300">No wallet connector was found in this browser.</div>
      ) : (
        <div className="space-y-2">
          <div className="text-sm text-zinc-300">Choose wallet:</div>

          {connectors.map((connector) => (
            <button
              key={connector.id}
              onClick={() => onConnect(connector.id)}
              className="mr-2 px-3 py-2 rounded bg-emerald-600 text-white"
            >
              Connect {connector.name}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}