Developer Integration
Starknet React

Starknet React

Starknet React provides seamless integration with Starknet ID, allowing you to effortlessly retrieve Stark names and addresses.

🔗 View the source code on GitHub (opens in a new tab)

🔗 Check out interactive demo of the hooks (opens in a new tab)

Please note that you need to install version 2 of starknet-react to use the Starknet ID hooks.

Installation

Starknet React can be installed via npm, yarn, or pnpm:

npm install @starknet-react/chains@next @starknet-react/core@next starknet get-starknet-core
 
yarn add @starknet-react/chains@next @starknet-react/core@next starknet get-starknet-core
 
pnpm add @starknet-react/chains@next @starknet-react/core@next starknet get-starknet-core

Usage

Button Component

ConnectButton is a React component that allows users to connect their wallets to Starknet and show the starkname and profile picture when the user is connected.

import { FunctionComponent } from "react";
import {
  useAccount,
  useConnect,
  useDisconnect,
  useStarkProfile,
} from "@starknet-react/core";
 
const ConnectButton: FunctionComponent = () => {
  const { address } = useAccount();
  const { connect, connectors } = useConnect();
  const { disconnect } = useDisconnect();
  const { data: profile } = useStarkProfile({ address });
 
  return !address ? (
    <div className="flex flex-col p-8 rounded-xl">
      <p className="font-bold text-center">You need a Starknet wallet</p>
      {connectors.map((connector) => {
        if (connector.available()) {
          return (
            <div className="mt-5 flex justify-center" key={connector.id}>
              <button onClick={() => connect({ connector })}>
                <div className="flex justify-center items-center">
                  Connect {connector.name}
                </div>
              </button>
            </div>
          );
        }
      })}
    </div>
  ) : (
    <button
      onClick={() => disconnect()}
      className="relative w-[300px] h-12 leading-10 text-black font-bold uppercase block text-center border-2 m-1 px-8 py-0 rounded-md"
    >
      <div className="flex items-center justify-between">
        <div className="flex flex-row gap-1.5 items-center justify-around">
          <p className="capitalize font-bold text-base font-bold mr-8">
            {profile?.name}
          </p>
          <div className="absolute self-stretch w-px right-16 inset-y-0 bg-black" />
        </div>
        <div>
          <img
            src={profile?.profilePicture}
            width="32"
            height="32"
            className="rounded-full"
          />
        </div>
      </div>
    </button>
  );
};
 
export default ConnectButton;

Hooks

useStarkProfile

The useStarkProfile hook fetches all profile data corresponding to a given address. By default, it queries the Starknet ID naming and identity contracts. However, you can specify alternative contracts by providing their addresses.

▸ useStarkProfile(address, useDefaultPfp?, namingContract?, identityContract?): useStarkProfileResult

Parameters

NameTypeDescription
addressstringThe address to look up
useDefaultPfp?booleanGet default pfp url if none was set by the user
namingContract?stringOptional naming contract address
identityContract?stringOptional identity contract address

Returns

The hook returns an object with the following structure:

interface useStarkProfileResult {
  /** Profile data. */
  data?: GetStarkprofileResponse;
  /** Error fetching name. */
  error?: unknown;
  isIdle: boolean;
  /** True if loading stark name. */
  isLoading: boolean;
  isFetching: boolean;
  isSuccess: boolean;
  /** True if error while loading stark name. */
  isError: boolean;
  isFetched: boolean;
  isFetchedAfterMount: boolean;
  isRefetching: boolean;
  refetch: () => void;
  status: "idle" | "error" | "loading" | "success";
}

Where:

type GetStarkprofileResponse = {
  /** The Stark name. */
  name?: string;
  /** Metadata url of the NFT set as profile picture. */
  profile?: string;
  /** Profile picture url. */
  profilePicture?: string;
  /** Social networks ids */
  twitter?: string;
  github?: string;
  discord?: string;
  /** Proof of personhood verification. */
  proofOfPersonhood?: boolean;
};

Defined in

core/src/hooks/useStarkProfile.ts (opens in a new tab)

Example usage

The following example demonstrates how to fetch the profile corresponding to an address.

function Component() {
  const address =
    "0x061b6c0a78f9edf13cea17b50719f3344533fadd470b8cb29c2b4318014f52d3";
  const { data, isLoading, isError } = useStarkProfile({
    address,
  });
 
  if (isLoading) return <span>Loading...</span>;
  if (isError) return <span>Error fetching profile...</span>;
  return (
    <>
      <p>Name: {data?.name}</p>
      <p>Discord id: {data?.discord}</p>
      <p>Twitter id: {data?.twitter}</p>
      <p>Github id: {data?.github}</p>
      <p>Proof of personhood verification: {data?.proofOfPersonhood}</p>
      <p>Profile picture metadata : {data?.profilePicture}</p>
    </>
  );
}

useStarkName

The useStarkName hook enables you to fetch the Stark name associated with a given address. By default, it uses the Starknet ID naming contract, but you can specify an alternative contract if needed. If no Stark name is found for the address, the hook will return "stark."

▸ useStarkName(address, contract?): StarkNameResult

Parameters

NameTypeDescription
addressstringThe address to query
contract?stringOptional naming contract address

Returns

The hook returns an object with the following structure:

interface StarkNameResult {
  /** Stark name. */
  data?: string;
  /** Error fetching name. */
  error?: unknown;
  isIdle: boolean;
  /** True if loading stark name. */
  isLoading: boolean;
  isFetching: boolean;
  isSuccess: boolean;
  /** True if error while loading stark name. */
  isError: boolean;
  isFetched: boolean;
  isFetchedAfterMount: boolean;
  isRefetching: boolean;
  refetch: () => void;
  status: "idle" | "error" | "loading" | "success";
}

Defined in

core/src/hooks/useStarkName.ts (opens in a new tab)

Example usage

Fetching the Stark name using the default contract

function Component() {
  const address =
    "0x061b6c0a78f9edf13cea17b50719f3344533fadd470b8cb29c2b4318014f52d3";
  const { data, isLoading, isError } = useStarkName({ address });
 
  if (isLoading) return <span>Loading...</span>;
  if (isError) return <span>Error fetching name...</span>;
  return <span>StarkName: {data}</span>;
}

Fetching the Stark name using a custom contract

function Component() {
  const address =
    "0x061b6c0a78f9edf13cea17b50719f3344533fadd470b8cb29c2b4318014f52d3";
  const { data, isLoading, isError } = useStarkName({
    address,
    contract: "0x1234",
  });
 
  if (isLoading) return <span>Loading...</span>;
  if (isError) return <span>Error fetching name...</span>;
  return <span>StarkName: {data}</span>;
}

useAddressFromStarkName

The useAddressFromStarkName hook fetches the address corresponding to a given stark name. By default, it queries the Starknet ID naming contract. However, you can specify an alternative contract by providing its address. If the Stark name doesn't have an associated address, the hook returns "0x0".

▸ useAddressFromStarkName(name, contract?): AddressFromStarkNameResult

Parameters

NameTypeDescription
namestringThe starkname to look up
contract?stringOptional naming contract address

Returns

The hook returns an object with the following structure:

interface AddressFromStarkNameResult {
  /** Address. */
  data?: string;
  /** Error fetching name. */
  error?: unknown;
  isIdle: boolean;
  /** True if loading stark name. */
  isLoading: boolean;
  isFetching: boolean;
  isSuccess: boolean;
  /** True if error while loading stark name. */
  isError: boolean;
  isFetched: boolean;
  isFetchedAfterMount: boolean;
  isRefetching: boolean;
  refetch: () => void;
  status: "idle" | "error" | "loading" | "success";
}

Defined in

core/src/hooks/useStarkAddress.ts (opens in a new tab)

Example usage

The following example demonstrates how to fetch the address corresponding to a stark name.

function Component() {
  const { data, isLoading, isError } = useAddressFromStarkName({
    name: "vitalik.stark",
  });
 
  if (isLoading) return <span>Loading...</span>;
  if (isError) return <span>Error fetching address...</span>;
  return <span>address: {data}</span>;
}
Starknet ID SDKStarknet.js