> ## 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 using dApp Kit components

# Connecting Wallets

## ConnectButton Component

The simplest way to add wallet connection:

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

function App() {
  return (
    <div>
      <h1>My Sui dApp</h1>
      <ConnectButton />
    </div>
  );
}
```

The `ConnectButton`:

* Shows "Connect Wallet" when disconnected
* Opens a wallet selection modal
* Displays connected address when connected
* Provides disconnect option

## Get Connected Account

Use `useCurrentAccount` to get the connected wallet:

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

function AccountInfo() {
  const currentAccount = useCurrentAccount();

  if (!currentAccount) {
    return <div>No wallet connected</div>;
  }

  return <div>Address: {currentAccount.address}</div>;
}
```

## Complete Example

```typescript title="src/components/WalletConnection.tsx" theme={null}
import {
  ConnectButton,
  useCurrentAccount,
  useCurrentWallet,
} from "@mysten/dapp-kit";
import { Card, CardContent } from "./ui/card";

export function WalletConnection() {
  const currentAccount = useCurrentAccount();
  const { currentWallet } = useCurrentWallet();

  if (!currentAccount) {
    return (
      <div className="wallet-connect">
        <h3>Connect Your Wallet</h3>
        <ConnectButton />
      </div>
    );
  }

  return (
    <div className="wallet-info">
      <Card className="w-fit">
        <CardContent className="flex flex-col gap-2">
          <div className="flex items-center gap-2">
            <img
              src={currentWallet?.icon}
              alt={currentWallet?.name}
              width={24}
              height={24}
            />
            <span>{currentWallet?.name}</span>
          </div>
          <ConnectButton />
        </CardContent>
      </Card>
    </div>
  );
}
```

## Next Steps

<Card title="Read Data" icon="arrow-right" href="/sui/frontend/workshop-1/04-read-data" horizontal>
  Query blockchain data using React hooks
</Card>