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
_31import { useStarkName } from "@starknet-react/core";_31_31function 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
_33import { useStarkAddress } from "@starknet-react/core";_33_33function MyComponent() {_33 const [address, setAddress] = useState<string>(_33 "0x00a00373a00352aa367058555149b573322910d54fcdf3a926e3e56d0dcb4b0c"_33 );_33 const debounceAddress = useDebounce(address, 500);_33_33 const { data, error, isLoading } = useStarkName({_33 address: debounceAddress,_33 });_33_33 return (_33 <div className="space-y-2">_33 <div className="space-y-1">_33 <Label htmlFor="address">Address</Label>_33 <Input_33 id="address"_33 placeholder="0x0508...8775"_33 value={address}_33 onChange={(evt) => setAddress(evt.target.value)}_33 />_33 </div>_33 <div className="space-y-1">_33 {isLoading ? (_33 <Loader2 className="h-4 w-4 mr-2 animate-spin" />_33 ) : (_33 <p>Name: {data}</p>_33 )}_33 </div>_33 </div>_33 );_33}
Lookup Stark profile
Use the useStarkProfile hook to lookup the Starknet.ID associated data with a Starknet
address.
lookup-stark-profile.tsx
_42import { useStarkProfile } from "@starknet-react/core";_42_42function MyComponent() {_42 const [address, setAddress] = useState<string>(_42 "0x00a00373a00352aa367058555149b573322910d54fcdf3a926e3e56d0dcb4b0c"_42 );_42_42 const debounceAddress = useDebounce(address, 500);_42_42 const { data, error, isLoading } = useStarkProfile({_42 address: debounceAddress,_42 });_42_42 return (_42 <div className="space-y-2">_42 <div className="space-y-1">_42 <Label htmlFor="address">Address</Label>_42 <Input_42 id="address"_42 placeholder="0x0508...8775"_42 value={address}_42 onChange={(evt) => setAddress(evt.target.value)}_42 />_42 </div>_42 <div className="space-y-1">_42 {isLoading ? (_42 <Loader2 className="h-4 w-4 mr-2 animate-spin" />_42 ) : (_42 <>_42 <p>Name: {data?.name}</p>_42 <p>Discord id: {data?.discord}</p>_42 <p>Twitter id: {data?.twitter}</p>_42 <p>Github id: {data?.github}</p>_42 <p>Proof of personhood verification: {data?.proofOfPersonhood}</p>_42 <p>Profile picture metadata uri : {data?.profile}</p>_42 <p>Profile picture uri : {data?.profilePicture}</p>_42 </>_42 )}_42 </div>_42 </div>_42 );_42}