Demos
Connect Wallet

Connect Wallet

This example shows how to build a basic "connect wallet" interface with Starknet React.

You will learn the basic concepts, such as:

  • what are connectors, provider, and chains.
  • how to connect and disconnect the user's wallet.
  • how to display the currently connected account.

Your Wallet

Connect wallet to get started

Configure StarknetConfig

The first step is to configure the root Starknet context. Refer to the "Getting Started" guide to learn how to set it up.

Root connect wallet component

We are going to add a root wallet component that, based on the current wallet connection status, will display either the "connect wallet" or the "disconnect wallet" interface.

components/wallet/connect.tsx

_24
"use client";
_24
import React from "react";
_24
_24
import dynamic from "next/dynamic";
_24
_24
import { useAccount } from "@starknet-react/core";
_24
_24
const ConnectModal = dynamic(
_24
() => import("./connect-modal"), { ssr: false }
_24
);
_24
_24
const DisconnectModal = dynamic(
_24
() => import("./disconnect-modal"), { ssr: false }
_24
);
_24
_24
export default function ConnectWallet() {
_24
const { address } = useAccount();
_24
_24
return (
_24
<div className="w-full mb-8 h-12 flex items-center">
_24
{address ? <DisconnectModal /> : <ConnectModal />}
_24
</div>
_24
);
_24
}

Connect wallet modal

The next component is a "connect wallet modal". We use the useConnect hook to list all availale connectors from StarknetConfig and to allow the user to connect to one.

components/wallet/connect-modal.tsx

_38
"use client";
_38
import React from "react";
_38
_38
import { useConnect, Connector } from "@starknet-react/core";
_38
import {
_38
Dialog,
_38
DialogContent,
_38
DialogHeader,
_38
DialogTrigger,
_38
} from "@/components/ui/dialog";
_38
import { Button } from "@/components/ui/button";
_38
_38
export default function ConnectModal() {
_38
const { connect, connectors } = useConnect();
_38
return (
_38
<div className="w-full flex justify-end">
_38
<Dialog>
_38
<DialogTrigger asChild>
_38
<Button variant="ghost">Connect Wallet</Button>
_38
</DialogTrigger>
_38
<DialogContent>
_38
<DialogHeader>Connect Wallet</DialogHeader>
_38
<div className="flex flex-col gap-4">
_38
{connectors.map((connector: Connector) => (
_38
<Button
_38
key={connector.id}
_38
onClick={() => connect({ connector })}
_38
disabled={!connector.available()}
_38
>
_38
Connect {connector.name}
_38
</Button>
_38
))}
_38
</div>
_38
</DialogContent>
_38
</Dialog>
_38
</div>
_38
);
_38
}

Disconnect wallet modal

This component shows the currently-connected address and a modal to disconnect the wallet from the dapp.

components/wallet/disconnect-modal.tsx

_36
"use client";
_36
import React from "react";
_36
_36
import { useAccount, useDisconnect } from "@starknet-react/core";
_36
import {
_36
Dialog,
_36
DialogContent,
_36
DialogHeader,
_36
DialogTrigger,
_36
} from "@/components/ui/dialog";
_36
import { Button } from "@/components/ui/button";
_36
_36
export default function DisconnectModal() {
_36
const { address } = useAccount();
_36
const { disconnect } = useDisconnect();
_36
_36
const addressShort = address
_36
? `${address.slice(0, 6)}...${address.slice(-4)}`
_36
: null;
_36
_36
return (
_36
<div className="w-full flex justify-end">
_36
<Dialog>
_36
<DialogTrigger asChild>
_36
<Button variant="ghost">{addressShort}</Button>
_36
</DialogTrigger>
_36
<DialogContent>
_36
<DialogHeader>Disconnect Wallet</DialogHeader>
_36
<div className="flex flex-col gap-4">
_36
<Button onClick={() => disconnect()}>Disconnect</Button>
_36
</div>
_36
</DialogContent>
_36
</Dialog>
_36
</div>
_36
);
_36
}

Where to go from here

This guide showed how to build a simple connect wallet ui.