Demos
Starknet.ID

Starknet.ID

This example shows how to lookup Starknet.ID addresses and names.

Lookup address

Lookup a Starknet address by its Starknet ID.

Address:

Lookup address

Use the useStarkAddress to map a Starknet.ID name to a wallet address.

lookup-address.tsx
1
import { useStarkName } from "@starknet-react/core";
2

3
function MyComponent() {
4
const [starknetId, setStarknetId] = useState<string>("");
5
const debouncedStarknetId = useDebounce(starknetId, 500);
6

7
const { data, error, isLoading } = useStarkAddress({
8
name: debouncedStarknetId,
9
});
10

11
return (
12
<div className="space-y-2">
13
<div className="space-y-1">
14
<Label htmlFor="starknet-id">Starknet ID</Label>
15
<Input
16
id="starknet-id"
17
placeholder="vitalik.stark"
18
value={starknetId}
19
onChange={(evt) => setStarknetId(evt.target.value)}
20
/>
21
</div>
22
<div className="space-y-1">
23
{isLoading ? (
24
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
25
) : (
26
<p>Address: {data}</p>
27
)}
28
</div>
29
</div>
30
);
31
}

Lookup name

Use the useStarkName hook to lookup the Starknet.ID associated with a Starknet address.

lookup-name.tsx
1
import { useStarkAddress } from "@starknet-react/core";
2

3
function MyComponent() {
4
const [address, setAddress] = useState<string>("");
5
const debounceAddress = useDebounce(address, 500);
6

7
const { data, error, isLoading } = useStarkName({
8
address: debounceAddress
9
});
10

11
return (
12
<div className="space-y-2">
13
<div className="space-y-1">
14
<Label htmlFor="address">Address</Label>
15
<Input
16
id="address"
17
placeholder="0x0508...8775"
18
value={address}
19
onChange={(evt) => setAddress(evt.target.value)}
20
/>
21
</div>
22
<div className="space-y-1">
23
{isLoading ? (
24
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
25
) : (
26
<p>Name: {data}</p>
27
)}
28
</div>
29
</div>
30
);
31
}