dApp Kit
Wallet Components
ConnectModal

ConnectModal

The ConnectModal component opens a modal that guides the user through connecting their wallet to the dApp.

Controlled Example

import { ConnectModal, useCurrentAccount } from '@mysten/dapp-kit';
 
export function YourApp() {
	const currentAccount = useCurrentAccount();
	const [open, setOpen] = useState(false);
 
	return (
		<ConnectModal
			trigger={
				<button disabled={!!currentAccount}> {currentAccount ? 'Connected' : 'Connect'}</button>
			}
			open={open}
			onOpenChange={(isOpen) => setOpen(isOpen)}
		/>
	);
}

Uncontrolled Example

import { ConnectModal, useCurrentAccount } from '@mysten/dapp-kit';
 
export function YourApp() {
	const currentAccount = useCurrentAccount();
 
	return (
		<ConnectModal
			trigger={
				<button disabled={!!currentAccount}> {currentAccount ? 'Connected' : 'Connect'}</button>
			}
		/>
	);
}

Controlled props

  • open - The controlled open state of the dialog.
  • onOpenChange - Event handler called when the open state of the dialog changes.
  • trigger - The trigger button that opens the dialog.

Uncontrolled props

  • defaultOpen - The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
  • trigger - The trigger button that opens the dialog.
ConnectButtonuseWallets