Safe Wallet Connection

Demonstrates how to connect a wallet without ever exposing private keys.

How This Works

Wallet Adapter Pattern: The app communicates with your wallet (Phantom, Solflare, etc.) through a standardized adapter. Your private keys NEVER leave your wallet.

What the app receives:

Public key (safe to share - like an account number)
Ability to REQUEST signatures (you approve each one in your wallet)

What the app NEVER receives:

Private key
Seed phrase / recovery phrase
Any key material that could be used to sign transactions

Live Demo

SafeConnectButton Component

Implementation

1. Provider Setup (layout.tsx)

import { SolanaWalletProvider } from './providers';

export default function Layout({ children }) {
  return (
    <SolanaWalletProvider network="devnet">
      {children}
    </SolanaWalletProvider>
  );
}

2. Safe Connect Button

import { SafeConnectButton } from './components/SafeConnectButton';

<SafeConnectButton
  onConnectionChange={(connected) => {
    // Handle connection state change
    console.log('Connected:', connected);
  }}
/>

3. Wallet Status Display

import { WalletStatus } from './components/WalletStatus';

// Shows connection health, public key, balance, and network
<WalletStatus showBalance showNetwork />

// SAFETY: Only displays public key - NEVER private keys

4. Disconnect with Confirmation

import { DisconnectConfirmation } from './components/DisconnectConfirmation';

<DisconnectConfirmation
  onDisconnect={() => console.log('User disconnected')}
  onCancel={() => console.log('User cancelled')}
/>

// SAFETY: Requires explicit confirmation
// Shows that disconnect is safe (keys not affected)

Safety Checklist

Uses official @solana/wallet-adapter packages
App never requests or stores private keys
All signing delegated to user's wallet
Clear connection state indicators
Network indicator (devnet vs mainnet)
Disconnect requires confirmation
Safety messages explain what data app can see