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

_31
import { useStarkName } from "@starknet-react/core";
_31
_31
function MyComponent() {
_31
const [starknetId, setStarknetId] = useState<string>("");
_31
const debouncedStarknetId = useDebounce(starknetId, 500);
_31
_31
const { data, error, isLoading } = useStarkAddress({
_31
name: debouncedStarknetId,
_31
});
_31
_31
return (
_31
<div className="space-y-2">
_31
<div className="space-y-1">
_31
<Label htmlFor="starknet-id">Starknet ID</Label>
_31
<Input
_31
id="starknet-id"
_31
placeholder="vitalik.stark"
_31
value={starknetId}
_31
onChange={(evt) => setStarknetId(evt.target.value)}
_31
/>
_31
</div>
_31
<div className="space-y-1">
_31
{isLoading ? (
_31
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
_31
) : (
_31
<p>Address: {data}</p>
_31
)}
_31
</div>
_31
</div>
_31
);
_31
}

Lookup name

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

lookup-name.tsx

_31
import { useStarkAddress } from "@starknet-react/core";
_31
_31
function MyComponent() {
_31
const [address, setAddress] = useState<string>("");
_31
const debounceAddress = useDebounce(address, 500);
_31
_31
const { data, error, isLoading } = useStarkName({
_31
address: debounceAddress
_31
});
_31
_31
return (
_31
<div className="space-y-2">
_31
<div className="space-y-1">
_31
<Label htmlFor="address">Address</Label>
_31
<Input
_31
id="address"
_31
placeholder="0x0508...8775"
_31
value={address}
_31
onChange={(evt) => setAddress(evt.target.value)}
_31
/>
_31
</div>
_31
<div className="space-y-1">
_31
{isLoading ? (
_31
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
_31
) : (
_31
<p>Name: {data}</p>
_31
)}
_31
</div>
_31
</div>
_31
);
_31
}