Connecting Wallets

ConnectButton Component

The simplest way to add wallet connection:

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:

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

src/components/WalletConnection.tsx

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

Read Data

Query blockchain data using React hooks