Connecting Wallets
Learn how to add wallet connection functionality to your Sui dApp using pre-built UI components and React hooks.
Wallet Connection UI
The dApp Kit provides ready-to-use components for wallet connection with minimal setup.
The ConnectButton is the simplest way to add wallet connection:
import { ConnectButton } from "@mysten/dapp-kit";
function App() {
return (
<div>
<h1>My Sui dApp</h1>
<ConnectButton />
</div>
);
}
ConnectButton:
- ✅ Shows “Connect Wallet” when disconnected
- ✅ Opens a wallet selection modal automatically
- ✅ Displays connected address when connected
- ✅ Provides account menu with disconnect option
- ✅ Handles all wallet connection logic
Props:
<ConnectButton
connectText="Connect Your Wallet"
walletFilter={(wallet) => wallet.name !== "Unsafe Burner"}
/>
| Prop | Type | Description |
|---|
connectText | string | Custom text for the connect button (default: “Connect Wallet”) |
walletFilter | (wallet: Wallet) => boolean | Filter which wallets to show |
ConnectModal Component
For more control, use the ConnectModal component with your own trigger:
import { ConnectModal, useCurrentAccount } from "@mysten/dapp-kit";
import { useState } from "react";
function CustomConnect() {
const [open, setOpen] = useState(false);
const currentAccount = useCurrentAccount();
return (
<>
{!currentAccount ? (
<button onClick={() => setOpen(true)}>Connect Wallet</button>
) : (
<div>Connected: {currentAccount.address}</div>
)}
<ConnectModal
open={open}
onOpenChange={setOpen}
trigger={<button>Open Wallet Selection</button>}
/>
</>
);
}
| Prop | Type | Description |
|---|
open | boolean | Control modal visibility |
onOpenChange | (open: boolean) => void | Callback when modal state changes |
trigger | ReactNode | Optional custom trigger element |
Wallet Hooks
Use hooks to access wallet state and functionality in your components.
useCurrentAccount
Get the currently connected wallet account:
import { useCurrentAccount } from "@mysten/dapp-kit";
function AccountInfo() {
const currentAccount = useCurrentAccount();
if (!currentAccount) {
return <div>No wallet connected</div>;
}
return (
<div>
<p>Address: {currentAccount.address}</p>
<p>Public Key: {currentAccount.publicKey}</p>
</div>
);
}
{
address: string; // Sui address (0x...)
publicKey: Uint8Array; // Public key bytes
chains: string[]; // Supported chains
features: string[]; // Supported wallet features
label?: string; // Account label/name
icon?: string; // Account icon URL
} | null
useAccounts
Get all connected accounts (for multi-account wallets):
import { useAccounts } from "@mysten/dapp-kit";
function AccountList() {
const accounts = useAccounts();
return (
<ul>
{accounts.map((account) => (
<li key={account.address}>{account.label || account.address}</li>
))}
</ul>
);
}
useCurrentWallet
Get information about the currently connected wallet:
import { useCurrentWallet } from "@mysten/dapp-kit";
function WalletInfo() {
const { currentWallet, connectionStatus } = useCurrentWallet();
if (connectionStatus === "disconnected") {
return <div>No wallet connected</div>;
}
return (
<div>
<p>Wallet: {currentWallet?.name}</p>
<p>Status: {connectionStatus}</p>
</div>
);
}
{
currentWallet: Wallet | null;
connectionStatus: "disconnected" | "connecting" | "connected";
}
useConnectWallet
Programmatically connect to a wallet:
import { useConnectWallet, useWallets } from "@mysten/dapp-kit";
function WalletSelector() {
const wallets = useWallets();
const { mutate: connect } = useConnectWallet();
return (
<div>
{wallets.map((wallet) => (
<button
key={wallet.name}
onClick={() => {
connect(
{ wallet },
{
onSuccess: () => console.log("Connected!"),
onError: (error) => console.error("Connection failed:", error),
}
);
}}
>
<img src={wallet.icon} alt={wallet.name} width={24} />
{wallet.name}
</button>
))}
</div>
);
}
useDisconnectWallet
Disconnect the current wallet:
import { useDisconnectWallet } from "@mysten/dapp-kit";
function DisconnectButton() {
const { mutate: disconnect } = useDisconnectWallet();
return <button onClick={() => disconnect()}>Disconnect Wallet</button>;
}
useWallets
Get a list of all available wallets:
import { useWallets } from "@mysten/dapp-kit";
function WalletList() {
const wallets = useWallets();
return (
<div>
<h3>Available Wallets ({wallets.length})</h3>
<ul>
{wallets.map((wallet) => (
<li key={wallet.name}>
{wallet.name} - {wallet.version}
</li>
))}
</ul>
</div>
);
}
Supported Wallets
The dApp Kit automatically detects installed Sui wallets:
| Wallet | Description |
|---|
| Sui Wallet | Official Mysten Labs wallet |
| Suiet | Popular multi-chain wallet |
| Ethos Wallet | User-friendly wallet with social recovery |
| Martian Wallet | Multi-chain wallet supporting Sui |
| Morphis | Privacy-focused wallet |
| Glass Wallet | Browser extension wallet |
| OneKey | Hardware wallet support |
Users need to have at least one Sui wallet extension installed in their
browser to connect.
Complete Example
Here’s a complete example with wallet connection, account display, and disconnect:
src/components/WalletConnection.tsx
/* eslint-disable @next/next/no-img-element */
import {
ConnectButton,
useCurrentAccount,
useCurrentWallet,
} from "@mysten/dapp-kit";
import { Card, CardContent } from "./ui/card";
export function WalletConnection() {
const currentAccount = useCurrentAccount();
const { currentWallet } = useCurrentWallet();
// Show connect button if not connected
if (!currentAccount) {
return (
<div className="wallet-connect">
<h3>Connect Your Wallet</h3>
<ConnectButton />
</div>
);
}
// Show account info when connected
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
Now that you can connect wallets, let’s learn how to read data from the Sui blockchain.
Read Data
Query blockchain data using React hooks
