Skip to main content

Documentation Index

Fetch the complete documentation index at: https://suicamp.site/llms.txt

Use this file to discover all available pages before exploring further.

​
Connect Wallet

Now let’s add wallet connection to our app.

​
Update App Component

Update src/app.tsx: 
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: 
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

Setup Contracts

Configure contract addresses and helpers