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
1
"use client";
2
import React from "react";
3

4
import dynamic from "next/dynamic";
5

6
import { useAccount } from "@starknet-react/core";
7

8
const ConnectModal = dynamic(
9
() => import("./connect-modal"), { ssr: false }
10
);
11

12
const DisconnectModal = dynamic(
13
() => import("./disconnect-modal"), { ssr: false }
14
);
15

16
export default function ConnectWallet() {
17
const { address } = useAccount();
18

19
return (
20
<div className="w-full mb-8 h-12 flex items-center">
21
{address ? <DisconnectModal /> : <ConnectModal />}
22
</div>
23
);
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
1
"use client";
2
import React from "react";
3

4
import { useConnect, Connector } from "@starknet-react/core";
5
import {
6
Dialog,
7
DialogContent,
8
DialogHeader,
9
DialogTrigger,
10
} from "@/components/ui/dialog";
11
import { Button } from "@/components/ui/button";
12

13
export default function ConnectModal() {
14
const { connect, connectors } = useConnect();
15
return (
16
<div className="w-full flex justify-end">
17
<Dialog>
18
<DialogTrigger asChild>
19
<Button variant="ghost">Connect Wallet</Button>
20
</DialogTrigger>
21
<DialogContent>
22
<DialogHeader>Connect Wallet</DialogHeader>
23
<div className="flex flex-col gap-4">
24
{connectors.map((connector: Connector) => (
25
<Button
26
key={connector.id}
27
onClick={() => connect({ connector })}
28
disabled={!connector.available()}
29
>
30
Connect {connector.name}
31
</Button>
32
))}
33
</div>
34
</DialogContent>
35
</Dialog>
36
</div>
37
);
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
1
"use client";
2
import React from "react";
3

4
import { useAccount, useDisconnect } from "@starknet-react/core";
5
import {
6
Dialog,
7
DialogContent,
8
DialogHeader,
9
DialogTrigger,
10
} from "@/components/ui/dialog";
11
import { Button } from "@/components/ui/button";
12

13
export default function DisconnectModal() {
14
const { address } = useAccount();
15
const { disconnect } = useDisconnect();
16

17
const addressShort = address
18
? `${address.slice(0, 6)}...${address.slice(-4)}`
19
: null;
20

21
return (
22
<div className="w-full flex justify-end">
23
<Dialog>
24
<DialogTrigger asChild>
25
<Button variant="ghost">{addressShort}</Button>
26
</DialogTrigger>
27
<DialogContent>
28
<DialogHeader>Disconnect Wallet</DialogHeader>
29
<div className="flex flex-col gap-4">
30
<Button onClick={() => disconnect()}>Disconnect</Button>
31
</div>
32
</DialogContent>
33
</Dialog>
34
</div>
35
);
36
}

Where to go from here

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