> ## Documentation Index
> Fetch the complete documentation index at: https://web3docs.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Connect Wallet

> Add wallet connection functionality

# Connect Wallet

Now let's add wallet connection to our app.

## Update App Component

Update `src/app.tsx`:

```typescript theme={null}
import { ConnectButton, useCurrentAccount } from "@mysten/dapp-kit-react";

export function App() {
  const account = useCurrentAccount();

  return (
    <div className="min-h-screen bg-background bg-grid">
      <header className="sticky top-0 z-50 border-b bg-background/80 backdrop-blur">
        <div className="max-w-4xl mx-auto px-4 py-3 flex items-center justify-between">
          <h1 className="font-bold">Sui Workshop</h1>
          <ConnectButton />
        </div>
      </header>

      <main className="max-w-4xl mx-auto px-4 py-6">
        {account ? (
          <div>
            <p>Connected: {account.address}</p>
          </div>
        ) : (
          <div className="text-center py-20">
            <h2 className="text-xl font-bold mb-2">Welcome</h2>
            <p className="text-muted-foreground mb-4">Connect wallet to start</p>
            <ConnectButton />
          </div>
        )}
      </main>
    </div>
  );
}
```

## Key Hooks

### useCurrentAccount

Returns the currently connected wallet account:

```typescript theme={null}
const account = useCurrentAccount();

// account is null if not connected
// account.address - wallet address
```

## ConnectButton Component

The `ConnectButton` component:

* Shows "Connect Wallet" when disconnected
* Shows wallet address when connected
* Handles wallet selection modal

## Test Connection

1. Run `npm run dev`
2. Click "Connect Wallet"
3. Select your wallet (Slush, Sui Wallet, etc.)
4. Approve the connection

You should see your wallet address displayed.

## Next Steps

<Card title="Setup Contracts" icon="arrow-right" href="/sui/frontend/workshop-2/04-setup-contracts" horizontal>
  Configure contract addresses and helpers
</Card>