# Starknet React
## Deploying Contracts
This guide explains how to deploy contracts on Starknet using the `useUniversalDeployerContract` hook in combination with `useSendTransaction`.
### Overview
The Universal Deployer Contract (UDC) is a utility contract that allows you to deploy new contracts on Starknet. The `useUniversalDeployerContract` hook provides an easy way to interact with the UDC.
### Usage
#### 1. Get the UDC Instance
First, import and use the `useUniversalDeployerContract` hook:
```tsx
import { useUniversalDeployerContract } from "@starknet-start/react";
function YourComponent() {
const { udc } = useUniversalDeployerContract();
}
```
#### 2. Prepare the Transaction
Use `useSendTransaction` to prepare and execute the contract deployment. You'll need:
* `classHash`: The hash of the contract class you want to deploy
* `salt`: A number used to generate the contract's address
* `fromZero`: Boolean flag for address calculation
* `calldata`: Constructor arguments for your contract
```tsx
import { useSendTransaction } from "@starknet-start/react";
import { CallData } from "starknet";
function DeployContract() {
const { udc } = useUniversalDeployerContract();
const { send, isPending, error, data } = useSendTransaction({
calls: udc ? [udc.populate("deploy_contract", [classHash, salt, fromZero, constructorCalldata])] : undefined,
});
}
```
#### 3. Complete Example
Here's a complete example showing how to deploy an ERC20 token:
```tsx
import { useUniversalDeployerContract, useSendTransaction } from "@starknet-start/react";
import { CallData } from "starknet";
function DeployERC20() {
const { address } = useAccount();
const { udc } = useUniversalDeployerContract();
const { send, isPending, error, data } = useSendTransaction({
calls:
udc && address
? [
udc.populate("deploy_contract", [
ERC20_CLASS_HASH,
23, // salt
false, // fromZero
getConstructorCalldata(address),
]),
]
: undefined,
});
return (
);
}
```
### API Reference
#### useUniversalDeployerContract
```tsx
function useUniversalDeployerContract(props?: {
address?: Address; // Optional: Override default UDC address
provider?: ProviderInterface | null; // Optional: Custom provider
}): {
udc: Contract; // The UDC contract instance
};
```
#### Deploy Contract Parameters
The `deploy_contract` function takes the following parameters:
* `class_hash`: The hash of the contract class to deploy
* `salt`: A number used to generate a unique contract address
* `from_zero`: Boolean flag that affects address calculation
* `calldata`: Constructor arguments for the contract being deployed
### Notes
* Make sure you're connected to the correct network before deploying
* The UDC has a default address that's used if none is provided
* Constructor calldata must be properly formatted according to your contract's ABI
* Transaction fees will apply for contract deployment
### Error Handling
Always handle potential errors during deployment:
```tsx
const { error, isError, send } = useSendTransaction({
// ... configuration
});
if (isError) {
console.error("Deployment failed:", error.message);
}
```
For a complete working example, check out our [deployment demo](/demo/deploy-contract).
## Explorers
The `StarknetConfig` provider accepts an optional `explorer` property to
configure the block explorer used by the `useExplorer` hook.
Starknet React ships with the following block explorers (in alphabetical order):
* Cartridge Explorer
* Viewblock
* Voyager
### The `Explorer` interface
The `Explorer` interface is used to generate links to the block explorer.
It provides the following properties and methods.
* `name: string`: human-friendly explorer name.
* `block({ hash?: string, number?: number }): string`: link to the specified
block, either by hash or number.
* `transaction(hash: string): string`: link to the specified transaction.
* `contract(address: string): string`: link to the specified contract.
* `class(hash: string): string`: link to the specified class.
### Explorer factory
`StarknetConfig` expects an **explorer factory**, that is a function with the
following signature:
```ts
type ExplorerFactory = (chain: Chain) => T | null;
```
Starknet React ships with the following explorer factories:
* `cartridge`
* `viewblock`
* `voyager`
### `useExplorer` hook
You can get an instance of the current explorer already initialized for the current chain
using the `useExplorer` hook.
```tsx twoslash
import { useExplorer } from "@starknet-start/react";
const explorer = useExplorer();
const name = explorer.name;
const link = explorer.block({ number: 123 });
```
import { Callout } from "vocs/components";
import { constants } from "starknet";
## Getting Started
### Overview
Starknet Start is a collection of React hooks for Starknet. It combines the following packages:
* [Tanstack Query](https://tanstack.com/query/latest) for data fetching.
* [Starknet.js](https://www.starknetjs.com/) for interacting with Starknet.
* [abi-wan-kanabi](https://github.com/keep-starknet-strange/abi-wan-kanabi) for type-safe contract calls.
### Setup
::::steps
#### Installation
Start by installing Starknet React.
:::code-group
```bash [npm]
npm add @starknet-start/chains @starknet-start/providers @starknet-start/react
```
```bash [pnpm]
pnpm add @starknet-start/chains @starknet-start/providers @starknet-start/react
```
:::
#### Configure the provider
The next step is to configure the Starknet provider. You need to configure the
following:
* `chains`: a list of chains supported by your dapp.
* `provider`: the JSON-RPC provider you want to use.
* `connectors`: the wallet connectors supported by your dapp. See the wallets page for more information.
Starknet React provides the `useInjectedConnectors` hook to merge a static list
of recommended connectors with a dynamic list of injected connectors.
```tsx [components/starknet-provider.tsx]
"use client";
import { mainnet, sepolia } from "@starknet-start/chains";
import { publicProvider } from "@starknet-start/providers";
import { StarknetConfig } from "@starknet-start/react";
export function StarknetProvider({ children }: { children: React.ReactNode }) {
const chains = [sepolia, mainnet];
const provider = publicProvider();
return (
{children}
);
}
```
#### Wrap your app in the provider
Wrap your app in the provider just created.
```tsx [app.tsx]
import { StarknetProvider } from "@/components/starknet-provider";
export function App() {
return (
);
}
```
Notice that if you are using Next.js app routes, you should place the provider
in the root layout file.
```tsx [app/layout.tsx]
import { StarknetProvider } from "@/components/starknet-provider";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
#### Using hooks
You can now use the Starknet React hooks from any component wrapped by the root
provider!
::::
## Migrating to Starknet Start
Starknet Start React (formerly Starknet React) represents a major rewrite of the library. The core packages have been renamed and restructured to support multiple frameworks (React, Vue) and provide a more consistent experience with the wider Starknet ecosystem via `@starknet-io/get-starknet-core`.
The most significant change is the renaming of the package from `@starknet-react/core` (or `starknet-react`) to `@starknet-start/react`.
### Package Renaming
The monorepo structure has changed to separate core logic from framework-specific bindings.
| Old Package | New Package | Description |
| :---------------------------------------- | :------------------------------ | :---------------------------------------- |
| `starknet-react` / `@starknet-react/core` | **`@starknet-start/react`** | The main React library. |
| (internal) | **`@starknet-start/providers`** | Shared provider logic and factories. |
| (internal) | **`@starknet-start/chains`** | Chain definitions (`mainnet`, `sepolia`). |
| (internal) | **`@starknet-start/explorers`** | Block explorer URL helpers. |
### Installation
Uninstall the old packages and install the new ones along with their peer dependencies.
:::code-group
```bash [npm]
npm uninstall @starknet-react/core
npm install @starknet-start/react starknet @tanstack/react-query
```
```bash [pnpm]
pnpm remove @starknet-react/core
pnpm add @starknet-start/react starknet @tanstack/react-query
```
```bash [yarn]
yarn remove @starknet-react/core
yarn add @starknet-start/react starknet @tanstack/react-query
```
:::
### Enhancements to `StarknetConfig`
The `StarknetConfig` component to track the dapps current state is now a lightweight wrapper around the [`GetStarknetProvider` from `@starknet-io/get-starknet-modal`](https://get-starknet.starknet-react.com/modal/GetStarknetProvider).
#### 1. Update Imports
Update your imports to point to the new package.
```diff
- import { StarknetConfig, useConnect } from "@starknet-react/core";
+ import { StarknetConfig, useConnect } from "@starknet-start/react";
```
#### 2. Update Provider Props
The `StarknetConfig` now simplifies wallet connection management. You no longer need to manually instantiate connectors for common wallets; `get-starknet` handles discovery.
**Before:**
```tsx
import { StarknetConfig, InjectedConnector } from "@starknet-react/core";
// ... manually creating connectors
const connectors = [
new InjectedConnector({ options: { id: "braavos", name: "Braavos" } }),
new InjectedConnector({ options: { id: "argentX", name: "Argent X" } }),
];
function App() {
return (
{children}
)
}
```
**After:**
```tsx
import { StarknetConfig } from "@starknet-start/react";
import { mainnet } from "@starknet-start/chains";
import { publicProvider } from "@starknet-start/providers";
function App() {
return (
{children}
);
}
```
The `chains` are now imported from `@starknet-start/chains`.
Providers are imported from `@starknet-start/providers`.
### Shared Logic & Consistency
By moving shared logic to `@starknet-start/core` packages, the library ensures that both React and Vue adapters behave consistently. This also brings the library closer to the `get-starknet` standard, ensuring better compatibility with future wallet updates.
Notice that this is only relevant for developers who wish to use a framework other than React.
#### Chains and Providers
Chains are no longer hardcoded or internal types but are exported from `@starknet-start/chains`.
```ts
import { mainnet, sepolia } from "@starknet-start/chains";
```
Similarly, RPC providers and other network logic reside in `@starknet-start/providers`.
```ts
import {
jsonRpcProvider,
publicProvider,
alchemyProvider,
/* and more... */
} from "@starknet-start/providers";
```
### Breaking Changes Checklist
* [ ] **Package Name**: Update `package.json` dependencies.
* [ ] **Imports**: Global find/replace `@starknet-react/core` (or `starknet-react`) with `@starknet-start/react`.
* [ ] **Connectors**: Remove manual `InjectedConnector` setup unless you have custom needs; rely on the provider's default discovery or `recommendedWallets` prop.
* [ ] **Chains**: Import chain objects from `@starknet-start/chains`.
### Get Starknet Integration
Starknet Start integrates deeply with the [Get Starknet](https://get-starknet.starknet-react.com/) ecosystem to provide a unified wallet connection experience. This ensures your dApp behaves consistently with other major Starknet applications and automatically supports new wallets as they adhere to the standard.
#### Wallet Discovery
The `StarknetConfig` automatically handles wallet discovery using the underlying get starknet library.
* **Automatic Detection**: Standard Starknet wallets (like Argent X and Braavos) are detected automatically via the `window` object.
* **No Manual Connectors**: You no longer need to instantiate `InjectedConnector` classes for standard wallets.
#### Customizing Wallets
You can customize which wallets are displayed or highlighted using props on the `StarknetConfig`. These are passed through to the `GetStarknetProvider`.
* **`recommendedWallets`**: An array of wallet objects to prioritize (e.g. show at the top of the list).
* **`extraWallets`**: An array of additional non-standard or custom wallets to include in the discovery list.
```tsx
import { StarknetConfig } from "@starknet-start/react";
import { mainnet } from "@starknet-start/chains";
function App() {
return (
{/* ... */}
);
}
```
#### Using `@starknet-io/get-starknet-ui`
For a complete UI solution (connect modal, wallet lists), you can use `@starknet-io/get-starknet-ui`. Since `StarknetConfig` already effectively includes the logic of `GetStarknetProvider`, you can use the UI components directly inside your app.
**Installation**:
```bash
npm install @starknet-io/get-starknet-ui@next
```
**Example Usage**:
Use the `WalletConnectModal` to handle the connection flow.
```tsx
import { WalletConnectModal } from "@starknet-io/get-starknet-ui";
import { useConnect } from "@starknet-start/react";
function ConnectWallet() {
// StarknetConfig manages the state, so we just use the UI component
return ;
}
```
#### Manual Connection
If you prefer to build your own UI without the modal, you can use `useConnect` to iterate over available wallets and connect to them programmatically.
```tsx
import { useConnect } from "@starknet-start/react";
function WalletList() {
const { connectors, connect } = useConnect();
return (
{connectors.map((connector) => (
))}
);
}
```
## Paymaster Providers
You need to configure a Paymaster RPC provider to allow your dapp to execute gasless/gasfree transaction to
Starknet.
Starknet React paymaster providers are factories that, given a chain, return a Starknet.js
`PaymasterInterface` object.
### Providers
This section provides an alphabetical list of Paymaster RPC Providers supported by
Starknet React.
#### Public
Starknet React ships with a public provider that you can use to run **Gasless** transactions.
For any project that needs **Gasfree** transaction, you should configure an *api key* to one
of the providers below.
At the moment, this provider uses the free Paymaster RPC endpoints provided by:
* AVNU
#### AVNU
Create an AVNU API key from the dashboard(soon available - contact AVNU team until available).
```ts twoslash
import { avnuPaymasterProvider } from "@starknet-start/providers/paymaster";
const apiKey = "your-api-key";
const provider = avnuPaymasterProvider({ apiKey });
```
#### Cartridge Paymaster
Cartridge Paymaster is natively supported in the [Controller](https://docs.cartridge.gg/controller/overview) and requires no additional configuration.
Transactions that match a Paymaster policy (indicating a contract address and entrypoint) will automatically be subsidized.
Paymaster policies and budgets can be [managed through the Slot CLI](https://docs.cartridge.gg/slot/paymaster).
## RPC Providers
You need to configure an RPC provider to allow your dapp to fetch data from
Starknet.
Starknet React providers are factories that, given a chain, return a Starknet.js
`ProviderInterface` object.
### Providers
This section provides an alphabetical list of RPC Providers supported by
Starknet React.
#### Public
Starknet React ships with a public provider that you can use for quick demos.
For any project that makes more than an handful of requests, you should use one
of the providers below.
At the moment, this provider uses the free RPC endpoints provided by:
* Blast API
* Lava
* Nethermind
#### JSON-RPC
This is generic RPC provider. Use it to connect to private endpoints or to
services not yet supported by Starknet React. The value returned by the `rpc`
function is passed to the Starknet `RpcProvider` constructor.
```tsx twoslash
import { jsonRpcProvider } from "@starknet-start/providers";
import { Chain } from "@starknet-start/chains";
function rpc(chain: Chain) {
return {
nodeUrl: `https://${chain.network}.example.org`,
};
}
const provider = jsonRpcProvider({ rpc });
```
#### Alchemy
Create an Alchemy API key from the dashboard.
```ts twoslash
import { alchemyProvider } from "@starknet-start/providers";
const apiKey = "your-api-key";
const provider = alchemyProvider({ apiKey });
```
#### Blast
Create a Bast API key from the dashboard.
```ts twoslash
import { blastProvider } from "@starknet-start/providers";
const apiKey = "your-api-key";
const provider = blastProvider({ apiKey });
```
#### Infura
Create an Infura API key from the dashboard.
```ts twoslash
import { infuraProvider } from "@starknet-start/providers";
const apiKey = "your-api-key";
const provider = infuraProvider({ apiKey });
```
#### Lava
Create a Lava API key from the dashboard.
```ts twoslash
import { lavaProvider } from "@starknet-start/providers";
const apiKey = "your-api-key";
const provider = lavaProvider({ apiKey });
```
#### Cartridge
Cartridge offers a Starknet RPC provider.
```ts twoslash
import { cartridgeProvider } from "@starknet-start/providers";
const provider = cartridgeProvider();
```
#### Slot
Create a Slot project from the [CLI](https://github.com/cartridge-gg/slot).
```ts twoslash
import { slotProvider } from "@starknet-start/providers";
const projectId = "your-project-id";
const provider = slotProvider({ projectId });
```
## StarknetConfig
The React Context provider for Starknet.
### Usage
```tsx twoslash
"use client";
import React from "react";
import { mainnet } from "@starknet-start/chains";
import { publicProvider } from "@starknet-start/providers";
import { StarknetConfig } from "@starknet-start/react";
function App() {
return (
{/* your app here */}
);
}
```
### Arguments
#### chains
* Type: `Chain[]`
List of supported chains.
#### provider
* Type: `ChainProviderFactory`
The JSON-RPC provider you want to use. See [the RPC providers page](/docs/providers) for more information.
#### connectors
* Type: `Connector[]`
List of wallet connectors you want to use. See [the wallets page](/docs/wallets) for more information.
#### explorer
* Type: `ExplorerFactory`
Explorer factory to use. See [the explorers page](/docs/explorers) for more information.
#### autoConnect
* Type: `boolean | undefined`
Whether to automatically connect to the first available wallet.
#### queryClient
* Type: `QueryClient`
React Query client to use.
#### defaultChainId
* Type: `bigint | undefined`
Default chain to use when no wallet is connected. This chain must be included in the `chains` array.
## Wallets
Connectors are used to *connect* the user's wallet to your dapp.
If you dapp requires the user to submit a transaction or sign a message,
you must provide a list of supported wallets to Starknet React.
### Connectors
This in an alphabetical list of connectors supported by Starknet React.
#### Injected Connector
An *injected connector* is a wallet that injects itself in the web page. This
type of wallets are also known as *"browser wallets"*.
Configure a new injected wallet with the following properties:
* `id` (required): unique wallet id, used when injecting the wallet in the web page.
* `name` (optional): human friendly name.
* `icon` (optional): wallet icons, for both light and dark mode. Icons should be base 64
encoded svg images that developers can use as `src` properties on an `img`
HTML tag.
#### Injected
This helper is useful to create a new connector with the provided `StarknetWindowObject`
```tsx
import { StarknetInjectedWallet } from "@starknet-io/get-starknet-core";
const connector = new StarknetInjectedWallet(window.starknet_myWallet);
```
#### Ready Wallet (formerly Argent X)
The Ready Wallet (formerly Argent X) wallet is supported out of the box.
```tsx twoslash
import { readyWallet } from "@starknet-io/get-starknet-core/wallets";
const wallets = [readyWallet];
```
#### Braavos
The Braavos wallet is supported out of the box.
```tsx twoslash
import { braavos } from "@starknet-io/get-starknet-core/wallets";
const wallets = [braavos];
```
#### Cartridge Controller
The Cartridge Controller wallet is supported however, you need to install both the
`@cartridge/connector` and `@cartridge/controller` packages.
The Controller enables seamless use of Session Keys.
```bash
pnpm i @cartridge/connector @cartridge/controller
```
```tsx
// TODO: This Code has to be updated as per get-starknet standards.
import { ControllerConnector } from "@cartridge/connector";
import { Connector } from "@starknet-start/react";
import { constants } from "starknet";
// Without Session Keys
const connectors = [
new ControllerConnector({
chains: [
{
rpcUrl: "https://api.cartridge.gg/x/starknet/sepolia",
},
{
rpcUrl: "https://api.cartridge.gg/x/starknet/mainnet",
},
],
defaultChainId: constants.StarknetChainId.SN_SEPOLIA,
}),
];
```
```tsx
// TODO: This Code has to be updated as per get-starknet standards.
import { ControllerConnector } from "@cartridge/connector";
import { SessionPolicies } from "@cartridge/controller";
import { Connector } from "@starknet-start/react";
import { constants } from "starknet";
// Define session policies
const policies: SessionPolicies = {
contracts: {
"0x3f96056436be253753351fe689110ced7d53f5db3fd98f13df3f19058311b95": {
name: "Example Contract",
description: "Example contract interaction",
methods: [
{
name: "Create",
description: "Create a new instance",
entrypoint: "create",
},
],
},
},
};
// With Session Keys
const connectors = [
new ControllerConnector({
chains: [
{
rpcUrl: "https://api.cartridge.gg/x/starknet/sepolia",
},
{
rpcUrl: "https://api.cartridge.gg/x/starknet/mainnet",
},
],
defaultChainId: constants.StarknetChainId.SN_SEPOLIA,
policies,
}),
];
```
## useAccount
Access the currently connected account, if any.
### Usage
```ts twoslash
import { useAccount } from "@starknet-start/react";
const { address, status } = useAccount();
```
#### Listening for changes
You can listen for the connection/disconnection events using the `useEffect` hook.
```ts twoslash
import { useEffect } from "react";
import { useAccount } from "@starknet-start/react";
const { address, status } = useAccount();
useEffect(() => {
if (status === "disconnected") {
// on disconnect
} else if (status === "connected") {
// on connect
}
}, [address, status]);
```
### Returns
#### address
* Type: `0x${string} | undefined`
The address of the currently connected account.
#### connector
* Type: `Connector | undefined`
The connector used to connect the account.
#### chainId
* Type: `bigint | undefined`
The account's chain id.
#### status
* Type: `"connected" | "disconnected" | "connecting" | "reconnecting"`
Account connection status.
#### isConnecting
* Type: `boolean | undefined`
Derived from `status`.
#### isReconnecting
* Type: `boolean | undefined`
Derived from `status`.
#### isConnected
* Type: `boolean | undefined`
Derived from `status`.
#### isDisconnected
* Type: `boolean | undefined`
Derived from `status`.
## useAddChain
Request the user to add a chain to their wallet.
### Usage
```ts twoslash
import { shortString } from "starknet";
import { useAddChain } from "@starknet-start/react";
const { addChain, error } = useAddChain({
params: {
id: "ZORG",
chain_id: shortString.encodeShortString("ZORG"),
chain_name: "ZORG",
rpc_urls: ["http://192.168.1.44:6060"],
native_currency: {
type: "ERC20",
options: {
address: "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
name: "ETHER",
symbol: "ETH",
decimals: 18,
},
},
},
});
```
:::warning
This hook is not supported by Braavos wallet at the moment.
:::
### Arguments
#### params
* Type: `AddStarknetChainParameters`
The chain definition. This type is defined in the Starknet Types package.
### Returns
#### addChain
* Type: `(args?: AddStarknetChainParameters) => void`
Function to send the request to the user, optionally overriding the arguments to the hook.
#### addChainAsync
* Type: `(args?: AddStarknetChainParameters) => Promise`
Send the request to the user and block until it receives a response.
#### data
* Type: `boolean | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the mutation.
#### reset
* Type: `() => void`
Reset the mutation status.
#### variables
* Type: `AddStarknetChainParameters | undefined`
The variables passed to `addChain` or `addChainAsync`.
#### status
* Type: `"error" | "idle" | "pending" | "success"`
The mutation status.
* `idle`: the mutation has not been triggered yet.
* `pending`: the mutation is being executed, e.g. waiting for the user to confirm in their wallet.
* `success`: the mutation executed without an error.
* `error`: the mutation threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isIdle
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
## useBalance
Fetch the balance for the provided address and token.
If no token is provided, the native currency is used.
### Usage
```ts twoslash
import { useBalance } from "@starknet-start/react";
const { data, error } = useBalance({
address: "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
});
```
### Data
#### value
* Type: `bigint`
The raw token balance.
#### decimals
* Type: `number`
The token decimals.
#### symbol
* Type: `string`
The token symbol.
#### formatted
* Type: `string`
The formatted token balance.
### Arguments
#### token
* Type: `0x${string} | undefined`
The token address. Defaults to the chain's native currency.
#### address
* Type: `0x${string} | undefined`
The address to fetch the balance for.
#### watch
* Type: `boolean | undefined`
If `true`, refresh the query at every new block.
#### blockIdentifier
* Type: `BlockNumber | undefined`
Perform the query against the provided block, e.g. `BlockTag.LATEST`.
#### enabled
* Type: `boolean | undefined`
If `false`, don't perform the query.
#### refetchInterval
* Type: `number | false | ((query: Query) => number | false | undefined)`
If set to a number, the query is refetched at the provided interval (in milliseconds).
If set to a function, the callback will be used to determine the refetch interval.
### Returns
#### data
* Type: `Data | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the query.
#### reset
* Type: `() => void`
Reset the query status.
#### status
* Type: `"error" | "pending" | "success"`
The mutation status.
* `pending`: the query is being executed.
* `success`: the query executed without an error.
* `error`: the query threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
#### fetchStatus
* Type: `"fetching" | "paused" | "idle"`
* `fetching`: the query is fetching.
* `paused`: the query is paused.
* `idle`: the query is not fetching.
#### isFetching
* Type: `boolean`
Derived from `fetchStatus`.
#### isPaused
* Type: `boolean`
Derived from `fetchStatus`.
#### isIdle
* Type: `boolean`
Derived from `fetchStatus`.
## useBlockNumber
Fetch a single block number.
By default this hook fetches the latest block, but you can change it with the `blockIdentifier` argument.
### Usage
```ts twoslash
import { useBlockNumber } from "@starknet-start/react";
const { data, error } = useBlockNumber();
```
### Data
* Type: `number`
The block number.
### Arguments
#### blockIdentifier
* Type: `BlockNumber | undefined`
Perform the query against the provided block, e.g. `BlockTag.LATEST`.
#### enabled
* Type: `boolean | undefined`
If `false`, don't perform the query.
#### refetchInterval
* Type: `number | false | ((query: Query) => number | false | undefined)`
If set to a number, the query is refetched at the provided interval (in milliseconds).
If set to a function, the callback will be used to determine the refetch interval.
### Returns
#### data
* Type: `Data | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the query.
#### reset
* Type: `() => void`
Reset the query status.
#### status
* Type: `"error" | "pending" | "success"`
The mutation status.
* `pending`: the query is being executed.
* `success`: the query executed without an error.
* `error`: the query threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
#### fetchStatus
* Type: `"fetching" | "paused" | "idle"`
* `fetching`: the query is fetching.
* `paused`: the query is paused.
* `idle`: the query is not fetching.
#### isFetching
* Type: `boolean`
Derived from `fetchStatus`.
#### isPaused
* Type: `boolean`
Derived from `fetchStatus`.
#### isIdle
* Type: `boolean`
Derived from `fetchStatus`.
## useBlock
Fetch a single block.
By default this hook fetches the latest block, but you can change it with the `blockIdentifier` argument.
### Usage
```ts twoslash
import { useBlock } from "@starknet-start/react";
const { data, error } = useBlock();
```
### Data
* Type: `GetBlockResponse`
The block response type from `starknet`.
### Arguments
#### blockIdentifier
* Type: `BlockNumber | undefined`
Perform the query against the provided block, e.g. `BlockTag.LATEST`.
#### enabled
* Type: `boolean | undefined`
If `false`, don't perform the query.
#### refetchInterval
* Type: `number | false | ((query: Query) => number | false | undefined)`
If set to a number, the query is refetched at the provided interval (in milliseconds).
If set to a function, the callback will be used to determine the refetch interval.
### Returns
#### data
* Type: `Data | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the query.
#### reset
* Type: `() => void`
Reset the query status.
#### status
* Type: `"error" | "pending" | "success"`
The mutation status.
* `pending`: the query is being executed.
* `success`: the query executed without an error.
* `error`: the query threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
#### fetchStatus
* Type: `"fetching" | "paused" | "idle"`
* `fetching`: the query is fetching.
* `paused`: the query is paused.
* `idle`: the query is not fetching.
#### isFetching
* Type: `boolean`
Derived from `fetchStatus`.
#### isPaused
* Type: `boolean`
Derived from `fetchStatus`.
#### isIdle
* Type: `boolean`
Derived from `fetchStatus`.
## useCall
Perform a read-only contract call.
This hook expects the arguments to be "compiled" call data, use
[`useReadContract`](/docs/hooks/use-read-contract) if you'd like abi encoding
and decoding to be automatically handled.
### Usage
```ts twoslash
import { useCall, useNetwork } from "@starknet-start/react";
const { chain } = useNetwork();
const { data, error } = useCall({
abi: [
{
name: "symbol",
type: "function",
inputs: [],
outputs: [
{
type: "core::felt252",
},
],
state_mutability: "view",
},
],
functionName: "symbol",
address: chain.nativeCurrency.address,
args: [],
});
```
### Data
* Type: `Result`
The call `Result` type from `starknet`.
### Arguments
#### functionName
* Type: `string`
The contract function name.
#### args
* Type: `ArgsOrCalldata`
The arguments to the function.
#### address
* Type: `0x${string}`
The contract address.
#### abi
* Type: `Abi`
The contract abi.
#### parseArgs
* Type: `boolean | undefined`
Parse arguments before calling the contract.
#### parseResult
* Type: `boolean | undefined`
Parse the return value from the contract.
#### blockIdentifier
* Type: `BlockNumber | undefined`
Perform the query against the provided block, e.g. `BlockTag.LATEST`.
#### watch
* Type: `boolean | undefined`
If `true`, refetch the data at every block.
#### enabled
* Type: `boolean | undefined`
If `false`, don't perform the query.
#### refetchInterval
* Type: `number | false | ((query: Query) => number | false | undefined)`
If set to a number, the query is refetched at the provided interval (in milliseconds).
If set to a function, the callback will be used to determine the refetch interval.
### Returns
#### data
* Type: `Data | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the query.
#### reset
* Type: `() => void`
Reset the query status.
#### status
* Type: `"error" | "pending" | "success"`
The mutation status.
* `pending`: the query is being executed.
* `success`: the query executed without an error.
* `error`: the query threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
#### fetchStatus
* Type: `"fetching" | "paused" | "idle"`
* `fetching`: the query is fetching.
* `paused`: the query is paused.
* `idle`: the query is not fetching.
#### isFetching
* Type: `boolean`
Derived from `fetchStatus`.
#### isPaused
* Type: `boolean`
Derived from `fetchStatus`.
#### isIdle
* Type: `boolean`
Derived from `fetchStatus`.
## useConnect
Hook for connecting to a StarkNet wallet.
### Usage
```ts twoslash
import { useConnect } from "@starknet-start/react";
const { connect, error } = useConnect({});
```
### Arguments
No arguments are required
### Returns
#### connect
* Type: `(args?: ConnectVariables) => void`
Function to send the request to the user, optionally overriding the arguments to the hook.
#### connectAsync
* Type: `(args?: ConnectVariables) => Promise`
Send the request to the user and block until it receives a response.
#### data
* Type: `boolean | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the mutation.
#### reset
* Type: `() => void`
Reset the mutation status.
#### variables
* Type: `ConnectVariables | undefined`
The variables passed to `connect` or `connectAsync`.
#### status
* Type: `"error" | "idle" | "pending" | "success"`
The mutation status.
* `idle`: the mutation has not been triggered yet.
* `pending`: the mutation is being executed, e.g. waiting for the user to confirm in their wallet.
* `success`: the mutation executed without an error.
* `error`: the mutation threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isIdle
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
## useContractFactory
Hook to create a `ContractFactory`
### Usage
```tsx
import { useContractFactory } from "@starknet-start/react";
const { contractFactory } = useContractFactory({
compiledContract: compiledErc20,
classHash: erc20ClassHash,
abi: compiledErc20.abi,
});
```
### Data
* Type: `ContractFactory`
Type `ContractFactory` from `starknet`.
### Arguments
#### compiledContract
* Type: `CompiledContract`
Type `CompiledContract` from `starknet`.
#### classHash
* Type: `string`
The class hash.
#### abi
* Type: `Abi`
The contract abi.
### Returns
#### contractFactory
* Type: `ContractFactory | undefined`
The contract factory.
## useContract
Get a typed contract.
This hook is equivalent to creating a new `Contract` instance with the
current provider and then calling `typedv2` with the provided ABI.
### Usage
```ts twoslash
import { useContract } from "@starknet-start/react";
const testAddress = "0x49d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7";
const abi = [
{
members: [
{
name: "low",
type: "felt",
},
{
name: "high",
type: "felt",
},
],
name: "Uint256",
type: "struct",
},
{
inputs: [
{
name: "name",
type: "felt",
},
{
name: "symbol",
type: "felt",
},
{
name: "recipient",
type: "felt",
},
],
name: "constructor",
type: "constructor",
},
{
inputs: [],
name: "name",
outputs: [
{
type: "felt",
},
],
state_mutability: "view",
type: "function",
},
] as const;
const { contract } = useContract({
abi,
address: testAddress,
});
```
### Data
* Type: `StarknetTypedContract`
Typed contract with `abi-wan-kanabi` types.
### Arguments
#### address
* Type: `0x${string}`
The contract address.
#### abi
* Type: `Abi`
The contract abi.
#### provider
* Type: `ProviderInterface | undefined`
ProviderInterface is from starknet.js. by default it will be the current one
### Returns
#### contract
* Type: `StarknetTypedContract | undefined`
Typed Contract
## useDeclareContract
Hook to declare a new class in the current network.
### Usage
```tsx
import { useDeclareContract } from "@starknet-start/react";
const { declare, error } = useDeclareContract({
params: {
compiled_class_hash: hash.computeCompiledClassHash(contractCasm),
contract_class: {
sierra_program: contractSierra.sierra_program,
contract_class_version: "0x01",
entry_points_by_type: contractSierra.entry_points_by_type,
abi: json.stringify(contractSierra.abi),
},
},
});
```
### Arguments
#### params
* Type: `AddDeclareTransactionParameters`
The Contract definition. This type is defined in the Starknet Types package.
### Returns
#### declare
* Type: `(args?: AddDeclareTransactionParameters) => void`
Function to send the request to the user, optionally overriding the arguments to the hook.
#### declareAsync
* Type: `(args?: AddDeclareTransactionParameters) => Promise`
Send the request to the user and block until it receives a response.
#### data
* Type: `AddDeclareTransactionResult | undefined`
The resolved data. This type is defined in the Starknet Types package.
#### error
* Type: `Error | null`
Any error thrown by the mutation.
#### reset
* Type: `() => void`
Reset the mutation status.
#### variables
* Type: `AddDeclareTransactionParameters | undefined`
The variables passed to `declare` or `declareAsync`.
#### status
* Type: `"error" | "idle" | "pending" | "success"`
The mutation status.
* `idle`: the mutation has not been triggered yet.
* `pending`: the mutation is being executed, e.g. waiting for the user to confirm in their wallet.
* `success`: the mutation executed without an error.
* `error`: the mutation threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isIdle
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
## useDeployAccount
Hook for deploying a contract.
### Usage
```ts twoslash
import { useDeployAccount } from "@starknet-start/react";
// TODO
const { deployAccount, error } = useDeployAccount({});
```
### Arguments
#### classHash
* Type: `string`
The class hash of the contract to deploy.
#### constructorCalldata
* Type: `RawArgs`
The constructor arguments. Type from `starknet`.
#### addressSalt
* Type: `BigNumberish`
Address salt. Type from `starknet`.
#### contractAddress
* Type: `string`
Contract address.
#### options
* Type: `InvocationsDetails`
Transaction options. Type from `starknet`.
### Returns
#### deployAccount
* Type: `(args?: DeployAccountVariables) => void`
Function to send the request to the user, optionally overriding the arguments to the hook.
#### deployAccountAsync
* Type: `(args?: DeployAccountVariables) => Promise`
Send the request to the user and block until it receives a response.
#### data
* Type: `DeployContractResponse | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the mutation.
#### reset
* Type: `() => void`
Reset the mutation status.
#### variables
* Type: `DeployAccountVariables | undefined`
The variables passed to `deployAccount` or `deployAccountAsync`.
#### status
* Type: `"error" | "idle" | "pending" | "success"`
The mutation status.
* `idle`: the mutation has not been triggered yet.
* `pending`: the mutation is being executed, e.g. waiting for the user to confirm in their wallet.
* `success`: the mutation executed without an error.
* `error`: the mutation threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isIdle
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
## useDisconnect
Hook for disconnecting connected StarkNet wallet.
### Usage
```ts twoslash
import { useDisconnect } from "@starknet-start/react";
const { disconnect, error } = useDisconnect({});
```
### Returns
#### disconnect
* Type: `() => void`
Function to send the request to the user, optionally overriding the arguments to the hook.
#### disconnectAsync
* Type: `() => Promise`
Send the request to the user and block until it receives a response.
#### data
* Type: `void | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the mutation.
#### reset
* Type: `() => void`
Reset the mutation status.
#### variables
* Type: `void | undefined`
The variables passed to `disconnect` or `disconnectAsync`.
#### status
* Type: `"error" | "idle" | "pending" | "success"`
The mutation status.
* `idle`: the mutation has not been triggered yet.
* `pending`: the mutation is being executed, e.g. waiting for the user to confirm in their wallet.
* `success`: the mutation executed without an error.
* `error`: the mutation threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isIdle
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
## useEstimateFees
Hook to estimate fees for smart contract calls.
### Usage
```ts twoslash
import { useEstimateFees } from "@starknet-start/react";
// TODO
const { data, error } = useEstimateFees({
calls: [],
options: {},
});
```
### Data
* Type: `EstimateFeeResponse`
The `EstimateFeeResponse` response type from `starknet`.
### Arguments
#### calls
* Type: `Call[] | undefined`
List of smart contract calls to estimate, type from `starknet`
#### options
* Type: `EstimateFeeDetails`
Estimate Fee options, type from `starknet`
#### enabled
* Type: `boolean | undefined`
If `false`, don't perform the query.
#### refetchInterval
* Type: `number | false | ((query: Query) => number | false | undefined)`
If set to a number, the query is refetched at the provided interval (in milliseconds).
If set to a function, the callback will be used to determine the refetch interval.
### Returns
#### data
* Type: `Data | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the query.
#### reset
* Type: `() => void`
Reset the query status.
#### status
* Type: `"error" | "pending" | "success"`
The mutation status.
* `pending`: the query is being executed.
* `success`: the query executed without an error.
* `error`: the query threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
#### fetchStatus
* Type: `"fetching" | "paused" | "idle"`
* `fetching`: the query is fetching.
* `paused`: the query is paused.
* `idle`: the query is not fetching.
#### isFetching
* Type: `boolean`
Derived from `fetchStatus`.
#### isPaused
* Type: `boolean`
Derived from `fetchStatus`.
#### isIdle
* Type: `boolean`
Derived from `fetchStatus`.
## useEvents
Fetch Starknet events continuously
By default this hook tries to fetches all the events (5 events per page) starting from genesis but you can pass arguments for filtering
### Usage
Fetch ETH Transfer events:
```ts twoslash
import { useEvents } from "@starknet-start/react";
const { data, error, fetchNextPage, hasNextPage, isFetchingNextPage } = useEvents({
address: "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
eventName: "Transfer",
fromBlock: 442920,
toBlock: "latest",
pageSize: 10,
});
```
### Arguments
#### address
* Type: `Address | undefined`
Filter events emitted by a specific contract address
#### eventName
* Type: `string | undefined`
Filter events using an event name, e.g "Transfer".
#### fromBlock
* Type: `BlockIdentifier | undefined`
The `BlockIdentifer` type from `starknet` excluding `bigint`
Start fetching events from this block, e.g 44920.
#### toBlock
* Type: `BlockIdentifier | undefined`
The `BlockIdentifer` type from `starknet` excluding `bigint`
Stop fetching events at this block, e.g `BlockTag.LATEST`.
#### pageSize
* Type: `number | undefined`
The number of events returned from each individual query, default to 5.
### Returns
#### data
* Type: `InfiniteData`
```
InfiniteData = {
pages: Array; // Array containing all pages.
pageParams: Array; // Array containing all page params.
}
```
The `InfiniteData` type from `react-query` and the `Events` type from `starknet`.
#### hasNextPage
* Type: `boolean`
Will be true if there is a next page to be fetched
#### isFetchingNextPage
* Type: `boolean`
Will be true while fetching the next page with `fetchNextPage`.
#### fetchNextPage
* Type: `(options?: FetchNextPageOptions) => Promise`
`UseEventsResult` is the same return type of the `useEvents` hook
This function allows you to fetch the next page of events, make sure to check `isFetchingNextPage` and `hasNextPage` before calling it.
If `options.cancelRefetch: boolean` is set to true, calling `fetchNextPage` repeatedly will fetch events every time, whether the previous invocation has resolved or not. Also, the result from previous invocations will be ignored. If set to false, calling `fetchNextPage` repeatedly won't have any effect until the first invocation has resolved. Default is true.
#### error
* Type: `Error | null`
Any error thrown by the query.
#### status
* Type: `"error" | "pending" | "success"`
The query status.
* `pending`: the query is being executed.
* `success`: the query executed without an error.
* `error`: the query threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
#### fetchStatus
* Type: `"fetching" | "paused" | "idle"`
* `fetching`: the query is fetching.
* `paused`: the query is paused.
* `idle`: the query is not fetching.
#### isFetching
* Type: `boolean`
Derived from `fetchStatus`.
## useExplorer
Access the current explorer, should be inside a `StarknetConfig`.
### Usage
```ts twoslash
import { useExplorer } from "@starknet-start/react";
const explorer = useExplorer();
```
### Returns
#### explorer
* Type: `Explorer`
The current explorer, e.g. voyager.
## useInvalidateOnBlock
Invalidate the given query on every new block.
### Usage
```ts twoslash
import { useInvalidateOnBlock } from "@starknet-start/react";
useInvalidateOnBlock({ queryKey: ["somekey"] });
```
### Arguments
#### enabled
* enabled: `boolean`
Enable or disable the query from automatically running. `true` by default
#### queryKey
* queryKey: `QueryKey`
Type from `@tanstack/react-query`
## useNetwork
Hook for accessing the current connected chain.
### Usage
```ts twoslash
import { useNetwork } from "@starknet-start/react";
const { chain, chains } = useNetwork();
```
### Returns
#### chain
* Type: `Chain`
The current chain.
#### chains
* Type: `Chain[]`
List of supported chains.
## useNonceForAddress
Returns the nonce associated with the given address in the given block
By default this hook fetches the latest block, but you can change it with the `blockIdentifier` argument.
### Usage
```ts twoslash
import { useNonceForAddress, useAccount } from "@starknet-start/react";
import { type Address } from "@starknet-start/chains";
const { address } = useAccount();
const { data, isLoading, isError, error, isPending } = useNonceForAddress({
address,
});
```
### Data
* Type: `Nonce`
The Nonce type from `starknet`.
### Arguments
#### address
* Type: `Address`
Contract address.
#### blockIdentifier
* Type: `BlockNumber | undefined`
Perform the query against the provided block, e.g. `BlockTag.LATEST`.
#### enabled
* Type: `boolean | undefined`
If `false`, don't perform the query.
#### refetchInterval
* Type: `number | false | ((query: Query) => number | false | undefined)`
If set to a number, the query is refetched at the provided interval (in milliseconds).
If set to a function, the callback will be used to determine the refetch interval.
### Returns
#### data
* Type: `Data | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the query.
#### reset
* Type: `() => void`
Reset the query status.
#### status
* Type: `"error" | "pending" | "success"`
The mutation status.
* `pending`: the query is being executed.
* `success`: the query executed without an error.
* `error`: the query threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
#### fetchStatus
* Type: `"fetching" | "paused" | "idle"`
* `fetching`: the query is fetching.
* `paused`: the query is paused.
* `idle`: the query is not fetching.
#### isFetching
* Type: `boolean`
Derived from `fetchStatus`.
#### isPaused
* Type: `boolean`
Derived from `fetchStatus`.
#### isIdle
* Type: `boolean`
Derived from `fetchStatus`.
## usePaymasterEstimateFees
Hook to estimate fees for smart contract calls.
### Usage
```ts twoslash
import { usePaymasterEstimateFees } from "@starknet-start/react";
import { Call, FeeMode } from "starknet";
const calls: Call[] = [
{
contractAddress: "STRK_SEPOLIA_ADDRESS",
entrypoint: "transfer",
calldata: ["recipient_address", "0x1", "0x0"],
},
];
const feeMode: FeeMode = {
mode: "default", // default or sponsored(need api-key)
gasToken: "USDC_SEPOLIA_ADDRESS", // mandatory if 'default'
};
const { data, error } = usePaymasterEstimateFees({
calls,
options: {
feeMode,
},
});
```
### Data
* Type: `PaymasterFeeEstimate`
The `PaymasterFeeEstimate` response type from `starknet`.
### Arguments
#### calls
* Type: `Call[] | undefined`
List of smart contract calls to estimate, type from `starknet`
#### options
* Type: `PaymasterDetails`
Paymaster details, type from `starknet`
#### enabled
* Type: `boolean | undefined`
If `false`, don't perform the query.
#### refetchInterval
* Type: `number | false | ((query: Query) => number | false | undefined)`
If set to a number, the query is refetched at the provided interval (in milliseconds).
If set to a function, the callback will be used to determine the refetch interval.
### Returns
#### data
* Type: `Data | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the query.
#### reset
* Type: `() => void`
Reset the query status.
#### status
* Type: `"error" | "pending" | "success"`
The mutation status.
* `pending`: the query is being executed.
* `success`: the query executed without an error.
* `error`: the query threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
#### fetchStatus
* Type: `"fetching" | "paused" | "idle"`
* `fetching`: the query is fetching.
* `paused`: the query is paused.
* `idle`: the query is not fetching.
#### isFetching
* Type: `boolean`
Derived from `fetchStatus`.
#### isPaused
* Type: `boolean`
Derived from `fetchStatus`.
#### isIdle
* Type: `boolean`
Derived from `fetchStatus`.
## usePaymasterGasTokens
Hook to fetch all gas token supported by the Paymaster.
### Usage
```ts twoslash
import { usePaymasterGasTokens } from "@starknet-start/react";
const { data, error } = usePaymasterGasTokens();
```
### Data
* Type: `TokenData[]`
The list of `TokenData` supported by the Paymaster. `TokenData` type from `starknet`
### Arguments
#### calls
* Type: `Call[] | undefined`
List of smart contract calls to estimate, type from `starknet`
#### options
* Type: `PaymasterDetails`
Paymaster details, type from `starknet`
#### enabled
* Type: `boolean | undefined`
If `false`, don't perform the query.
#### refetchInterval
* Type: `number | false | ((query: Query) => number | false | undefined)`
If set to a number, the query is refetched at the provided interval (in milliseconds).
If set to a function, the callback will be used to determine the refetch interval.
### Returns
#### data
* Type: `Data | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the query.
#### reset
* Type: `() => void`
Reset the query status.
#### status
* Type: `"error" | "pending" | "success"`
The mutation status.
* `pending`: the query is being executed.
* `success`: the query executed without an error.
* `error`: the query threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
#### fetchStatus
* Type: `"fetching" | "paused" | "idle"`
* `fetching`: the query is fetching.
* `paused`: the query is paused.
* `idle`: the query is not fetching.
#### isFetching
* Type: `boolean`
Derived from `fetchStatus`.
#### isPaused
* Type: `boolean`
Derived from `fetchStatus`.
#### isIdle
* Type: `boolean`
Derived from `fetchStatus`.
## usePaymasterSendTransaction
Hook to send one or several transaction(s) to the network in a **Gasless**/**Gasfree** way using the Paymaster.
Use this hook together with [`usePaymasterGasTokens`](/docs/hooks/use-paymaster-gas-tokens) to fetch supported gas tokens & [`usePaymasterEstimateFees`](/docs/hooks/use-paymaster-estimate-fees) to estimate
fees in gas token.
### Usage
The following example shows how to transfer `$STRK` tokens to an address using `$USDC` as gas token.
```ts twoslash
import { usePaymasterSendTransaction } from "@starknet-start/react";
import { Call, FeeMode } from "starknet";
const calls: Call[] = [
{
contractAddress: "STRK_SEPOLIA_ADDRESS",
entrypoint: "transfer",
calldata: ["recipient_address", "0x1", "0x0"],
},
];
const feeMode: FeeMode = {
mode: "default", // default or sponsored(need api-key)
gasToken: "USDC_SEPOLIA_ADDRESS", // mandatory if 'default'
};
const { data, error } = usePaymasterSendTransaction({
calls,
options: {
feeMode,
},
});
```
### Arguments
#### calls
* Type: `Call[]`
List of smart contract calls to execute. Type is from `starknet`
### Returns
#### send
* Type: `(args?: Call[]) => void`
Function to send the request to the user, optionally overriding the arguments to the hook.
#### sendAsync
* Type: `(args?: Call[]) => Promise`
Send the request to the user and block until it receives a response, optionally overriding the arguments to the hook.
#### data
* Type: `InvokeFunctionResponse | undefined`
The resolved data. This type is defined in the Starknet Types package.
#### error
* Type: `Error | null`
Any error thrown by the mutation.
#### reset
* Type: `() => void`
Reset the mutation status.
#### variables
* Type: `Call[] | undefined`
The variables passed to `send` or `sendAsync`.
#### status
* Type: `"error" | "idle" | "pending" | "success"`
The mutation status.
* `idle`: the mutation has not been triggered yet.
* `pending`: the mutation is being executed, e.g. waiting for the user to confirm in their wallet.
* `success`: the mutation executed without an error.
* `error`: the mutation threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isIdle
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
## useProvider
Hook for accessing the current provider.
### Usage
```ts twoslash
import { useProvider } from "@starknet-start/react";
const { provider } = useProvider();
```
### Returns
#### provider
* Type: `ProviderInterface`
The current provider.
## useReadContract
Perform a read-only contract call with type safety.
If you don't need type safety, use [`useCall`](/docs/hooks/use-call) instead.
### Usage
```ts twoslash
import { useReadContract, useNetwork } from "@starknet-start/react";
const { chain } = useNetwork();
const { data, error } = useReadContract({
abi: [
{
name: "symbol",
type: "function",
inputs: [],
outputs: [
{
type: "core::felt252",
},
],
state_mutability: "view",
},
] as const,
functionName: "symbol",
address: chain.nativeCurrency.address,
args: [],
});
```
### Data
* Type: `unknown`
The response from the contract. Type is inferred.
### Arguments
#### functionName
* Type: `string`
The contract function name.
#### args
* Type: `ArgsOrCalldata`
The arguments to the function.
#### address
* Type: `0x${string}`
The contract address.
#### abi
* Type: `Abi`
The contract abi which needs to be a const for type safety
#### blockIdentifier
* Type: `BlockNumber | undefined`
Perform the query against the provided block, e.g. `BlockTag.LATEST`.
#### watch
* Type: `boolean | undefined`
If `true`, refetch the data at every block.
#### enabled
* Type: `boolean | undefined`
If `false`, don't perform the query.
#### refetchInterval
* Type: `number | false | ((query: Query) => number | false | undefined)`
If set to a number, the query is refetched at the provided interval (in milliseconds).
If set to a function, the callback will be used to determine the refetch interval.
### Returns
#### data
* Type: `Data | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the query.
#### reset
* Type: `() => void`
Reset the query status.
#### status
* Type: `"error" | "pending" | "success"`
The mutation status.
* `pending`: the query is being executed.
* `success`: the query executed without an error.
* `error`: the query threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
#### fetchStatus
* Type: `"fetching" | "paused" | "idle"`
* `fetching`: the query is fetching.
* `paused`: the query is paused.
* `idle`: the query is not fetching.
#### isFetching
* Type: `boolean`
Derived from `fetchStatus`.
#### isPaused
* Type: `boolean`
Derived from `fetchStatus`.
#### isIdle
* Type: `boolean`
Derived from `fetchStatus`.
## useSendTransaction
Hook to send one or several transaction(s) to the network.
Use this hook together with [`useContract`](/docs/hooks/use-contract) to
send transactions to the network in a type-safe way.
### Usage
The following example shows how to transfer `$STRK` tokens to an address.
```ts twoslash
import { useSendTransaction, useContract, useNetwork, useAccount } from "@starknet-start/react";
import type { Abi } from "starknet";
const abi = [
{
type: "function",
name: "transfer",
state_mutability: "external",
inputs: [
{
name: "recipient",
type: "core::starknet::contract_address::ContractAddress",
},
{
name: "amount",
type: "core::integer::u256",
},
],
outputs: [],
},
] as const satisfies Abi;
const { address } = useAccount();
const { chain } = useNetwork();
const { contract } = useContract({
// [!code focus]
abi, // [!code focus]
address: chain.nativeCurrency.address, // [!code focus]
}); // [!code focus]
const { send, error } = useSendTransaction({
// [!code focus]
// [!code focus]
calls:
contract && address // [!code focus]
? [contract.populate("transfer", [address, 1n])] // [!code focus]
: undefined, // [!code focus]
}); // [!code focus]
```
### Arguments
#### calls
* Type: `Call[]`
List of smart contract calls to execute. Type is from `starknet`
### Returns
#### send
* Type: `(args?: Call[]) => void`
Function to send the request to the user, optionally overriding the arguments to the hook.
#### sendAsync
* Type: `(args?: Call[]) => Promise`
Send the request to the user and block until it receives a response.
#### data
* Type: `AddInvokeTransactionResult | undefined`
The resolved data. This type is defined in the Starknet Types package.
#### error
* Type: `Error | null`
Any error thrown by the mutation.
#### reset
* Type: `() => void`
Reset the mutation status.
#### variables
* Type: `Call[] | undefined`
The variables passed to `send` or `sendAsync`.
#### status
* Type: `"error" | "idle" | "pending" | "success"`
The mutation status.
* `idle`: the mutation has not been triggered yet.
* `pending`: the mutation is being executed, e.g. waiting for the user to confirm in their wallet.
* `success`: the mutation executed without an error.
* `error`: the mutation threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isIdle
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
## useSignTypedData
Hook which returns the signature of an EIP712 "like" message, made by the current account of the wallet.
### Usage
```ts twoslash
import { useSignTypedData } from "@starknet-start/react";
import { shortString } from "starknet";
const { signTypedData, error } = useSignTypedData({
params: {
message: {
id: "0x0000004f000f",
from: "0x2c94f628d125cd0e86eaefea735ba24c262b9a441728f63e5776661829a4066",
amount: "400",
nameGamer: "Hector26",
endDate: "0x27d32a3033df4277caa9e9396100b7ca8c66a4ef8ea5f6765b91a7c17f0109c",
itemsAuthorized: ["0x01", "0x03", "0x0a", "0x0e"],
chkFunction: "check_authorization",
rootList: [
{
address: "0x69b49c2cc8b16e80e86bfc5b0614a59aa8c9b601569c7b80dde04d3f3151b79",
amount: "1554785",
},
],
},
types: {
StarkNetDomain: [
{ name: "name", type: "string" },
{ name: "version", type: "string" },
{ name: "chainId", type: "string" },
],
Airdrop: [
{ name: "address", type: "string" },
{ name: "amount", type: "string" },
],
Validate: [
{ name: "id", type: "string" },
{ name: "from", type: "string" },
{ name: "amount", type: "string" },
{ name: "nameGamer", type: "string" },
{ name: "endDate", type: "string" },
{ name: "itemsAuthorized", type: "string*" }, // array of string
{ name: "chkFunction", type: "selector" }, // name of function
{ name: "rootList", type: "merkletree", contains: "Airdrop" }, // root of a merkle tree
],
},
primaryType: "Validate",
domain: {
name: "myDapp",
version: "1",
chainId: shortString.encodeShortString("SN_SEPOLIA"),
},
},
});
```
### Arguments
#### params
* Type: `TypedData`
TypedData. This type is defined in the Starknet Types package.
### Returns
#### signTypedData
* Type: `(args?: TypedData) => void`
Function to send the request to the user, optionally overriding the arguments to the hook.
#### signTypedDataAsync
* Type: `(args?: TypedData) => Promise`
Send the request to the user and block until it receives a response.
#### data
* Type: `SIGNATURE | undefined`
The resolved data. This type is defined in the Starknet Types package.
#### error
* Type: `Error | null`
Any error thrown by the mutation.
#### reset
* Type: `() => void`
Reset the mutation status.
#### variables
* Type: `TypedData | undefined`
The variables passed to `signTypedData` or `signTypedDataAsync`.
#### status
* Type: `"error" | "idle" | "pending" | "success"`
The mutation status.
* `idle`: the mutation has not been triggered yet.
* `pending`: the mutation is being executed, e.g. waiting for the user to confirm in their wallet.
* `success`: the mutation executed without an error.
* `error`: the mutation threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isIdle
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
## useStarkAddress
Hook to get the address associated to a stark name.
### Usage
```ts twoslash
import { useStarkAddress } from "@starknet-start/react";
const { data, error } = useStarkAddress({
name: "vitalik.stark",
});
```
### Data
* Type: `string | undefined`
Address associated to stark name
### Arguments
#### name
* Type: `string | undefined`
Stark name.
#### contract
* Type: `Address | undefined`
Naming contract to use
#### enabled
* Type: `boolean | undefined`
If `false`, don't perform the query.
#### refetchInterval
* Type: `number | false | ((query: Query) => number | false | undefined)`
If set to a number, the query is refetched at the provided interval (in milliseconds).
If set to a function, the callback will be used to determine the refetch interval.
### Returns
#### data
* Type: `Data | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the query.
#### reset
* Type: `() => void`
Reset the query status.
#### status
* Type: `"error" | "pending" | "success"`
The mutation status.
* `pending`: the query is being executed.
* `success`: the query executed without an error.
* `error`: the query threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
#### fetchStatus
* Type: `"fetching" | "paused" | "idle"`
* `fetching`: the query is fetching.
* `paused`: the query is paused.
* `idle`: the query is not fetching.
#### isFetching
* Type: `boolean`
Derived from `fetchStatus`.
#### isPaused
* Type: `boolean`
Derived from `fetchStatus`.
#### isIdle
* Type: `boolean`
Derived from `fetchStatus`.
## useStarkName
Hook for fetching Stark name for address.
### Usage
```ts twoslash
import { useStarkName } from "@starknet-start/react";
const { data, error } = useStarkName({
address: "0x7cffe72748da43594c5924129b4f18bffe643270a96b8760a6f2e2db49d9732",
});
```
### Data
* Type: `string | undefined`
Stark Name associated to address
### Arguments
#### address
* Type: `Address | undefined`
Account address.
#### contract
* Type: `Address | undefined`
Naming contract to use
#### enabled
* Type: `boolean | undefined`
If `false`, don't perform the query.
#### refetchInterval
* Type: `number | false | ((query: Query) => number | false | undefined)`
If set to a number, the query is refetched at the provided interval (in milliseconds).
If set to a function, the callback will be used to determine the refetch interval.
### Returns
#### data
* Type: `Data | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the query.
#### reset
* Type: `() => void`
Reset the query status.
#### status
* Type: `"error" | "pending" | "success"`
The mutation status.
* `pending`: the query is being executed.
* `success`: the query executed without an error.
* `error`: the query threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
#### fetchStatus
* Type: `"fetching" | "paused" | "idle"`
* `fetching`: the query is fetching.
* `paused`: the query is paused.
* `idle`: the query is not fetching.
#### isFetching
* Type: `boolean`
Derived from `fetchStatus`.
#### isPaused
* Type: `boolean`
Derived from `fetchStatus`.
#### isIdle
* Type: `boolean`
Derived from `fetchStatus`.
## useStarkProfile
Hook for fetching Stark profile for address.
### Usage
```ts twoslash
import { useStarkProfile } from "@starknet-start/react";
const { data, error } = useStarkProfile({
address: "0x7cffe72748da43594c5924129b4f18bffe643270a96b8760a6f2e2db49d9732",
});
```
### Data
* Type: `GetStarkprofileResponse | undefined`
Stark Profile associated to address
### Arguments
#### address
* Type: `Address | undefined`
Account address.
#### useDefaultPfp
* Type: `boolean | undefined`
Get Starknet ID default pfp url if no profile picture is set
#### namingContract
* Type: `Address | undefined`
Naming contract to use.
#### identityContract
* Type: `Address | undefined`
Identity contract to use.
#### enabled
* Type: `boolean | undefined`
If `false`, don't perform the query.
#### refetchInterval
* Type: `number | false | ((query: Query) => number | false | undefined)`
If set to a number, the query is refetched at the provided interval (in milliseconds).
If set to a function, the callback will be used to determine the refetch interval.
### Returns
#### data
* Type: `Data | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the query.
#### reset
* Type: `() => void`
Reset the query status.
#### status
* Type: `"error" | "pending" | "success"`
The mutation status.
* `pending`: the query is being executed.
* `success`: the query executed without an error.
* `error`: the query threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
#### fetchStatus
* Type: `"fetching" | "paused" | "idle"`
* `fetching`: the query is fetching.
* `paused`: the query is paused.
* `idle`: the query is not fetching.
#### isFetching
* Type: `boolean`
Derived from `fetchStatus`.
#### isPaused
* Type: `boolean`
Derived from `fetchStatus`.
#### isIdle
* Type: `boolean`
Derived from `fetchStatus`.
## useSwitchChain
Hook to change the current network of the wallet.
### Usage
```ts twoslash
import { useSwitchChain } from "@starknet-start/react";
import { constants } from "starknet";
const { switchChain, error } = useSwitchChain({
params: {
chainId: constants.StarknetChainId.SN_SEPOLIA,
},
});
```
:::warning
This hook is not supported by Braavos wallet at the moment.
:::
### Arguments
#### params
* Type: `SwitchStarknetChainParameters`
Chain id on which to change. This type is defined in the Starknet Types package.
### Returns
#### switchChain
* Type: `(args?: SwitchStarknetChainParameters) => void`
Function to send the request to the user, optionally overriding the arguments to the hook.
#### switchChainAsync
* Type: `(args?: SwitchStarknetChainParameters) => Promise`
Send the request to the user and block until it receives a response.
#### data
* Type: `boolean | undefined`
The resolved data. This type is defined in the Starknet Types package.
#### error
* Type: `Error | null`
Any error thrown by the mutation.
#### reset
* Type: `() => void`
Reset the mutation status.
#### variables
* Type: `TypedData | undefined`
The variables passed to `switchChain` or `switchChainAsync`.
#### status
* Type: `"error" | "idle" | "pending" | "success"`
The mutation status.
* `idle`: the mutation has not been triggered yet.
* `pending`: the mutation is being executed, e.g. waiting for the user to confirm in their wallet.
* `success`: the mutation executed without an error.
* `error`: the mutation threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isIdle
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
## useTransactionReceipt
Hook to fetch a single transaction receipt.
### Usage
```ts twoslash
import { useTransactionReceipt } from "@starknet-start/react";
// TODO
const { data, error } = useTransactionReceipt({
hash: "",
});
```
### Data
* Type: `GetTransactionReceiptResponse`
The transaction receipt response type from `starknet`.
### Arguments
#### hash
* Type: `string | undefined`
The transaction hash.
#### watch
* Type: `boolean | undefined`
If `true`, refetch the data at every block.
#### enabled
* Type: `boolean | undefined`
If `false`, don't perform the query.
#### refetchInterval
* Type: `number | false | ((query: Query) => number | false | undefined)`
If set to a number, the query is refetched at the provided interval (in milliseconds).
If set to a function, the callback will be used to determine the refetch interval.
### Returns
#### data
* Type: `Data | undefined`
The resolved data.
#### error
* Type: `Error | null`
Any error thrown by the query.
#### reset
* Type: `() => void`
Reset the query status.
#### status
* Type: `"error" | "pending" | "success"`
The mutation status.
* `pending`: the query is being executed.
* `success`: the query executed without an error.
* `error`: the query threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
#### fetchStatus
* Type: `"fetching" | "paused" | "idle"`
* `fetching`: the query is fetching.
* `paused`: the query is paused.
* `idle`: the query is not fetching.
#### isFetching
* Type: `boolean`
Derived from `fetchStatus`.
#### isPaused
* Type: `boolean`
Derived from `fetchStatus`.
#### isIdle
* Type: `boolean`
Derived from `fetchStatus`.
## useUniversalDeployerContract
Get a typed contract for the Universal Deployer contract.
This hook internally calls `useContract` with the Universal Deployer contract address and it's ABI.
### Usage
```ts twoslash
import { useUniversalDeployerContract } from "@starknet-start/react";
const { udc } = useUniversalDeployerContract();
```
### Data
#### udc
* Type: `StarknetTypedContract`
Typed contract with `abi-wan-kanabi` types.
### Arguments
#### address
* Type: `0x${string}`
The contract address.
#### provider
* Type: `ProviderInterface | undefined`
ProviderInterface is from starknet.js. by default it will be the current one
### Returns
#### contract
* Type: `StarknetTypedContract | undefined`
Typed Contract
## useWalletRequest
Hook to perform request calls to the connected wallet.
You can use this hook to have more control over the requests sent to the wallet
or to use methods not yet supported by Starknet React.
### Usage
```ts twoslash
import { useWalletRequest } from "@starknet-start/react";
const { request, error } = useWalletRequest({
type: "wallet_requestAccounts",
params: { silent_mode: true },
});
```
### Arguments
#### type
* Type: `T`
Type of Request message
Where `T extends RequestMessageTypes` and This type is defined in the Starknet Types package.
#### params
* Type: `RpcTypeToMessageMap[T]["params"]`
Options for request, inferred based on request type. This type is defined in the Starknet Types package.
### Returns
#### request
* Type: `(args?: RequestArgs) => void`
Function to send the request to the user, optionally overriding the arguments to the hook.
#### requestAsync
* Type: `(args?: RequestArgs) => Promise>`
Send the request to the user and block until it receives a response.
#### data
* Type: `RequestResult | undefined`
The resolved data. This type is defined in the Starknet Types package.
#### error
* Type: `Error | null`
Any error thrown by the mutation.
#### reset
* Type: `() => void`
Reset the mutation status.
#### variables
* Type: `TypedData | undefined`
The variables passed to `request` or `requestAsync`.
#### status
* Type: `"error" | "idle" | "pending" | "success"`
The mutation status.
* `idle`: the mutation has not been triggered yet.
* `pending`: the mutation is being executed, e.g. waiting for the user to confirm in their wallet.
* `success`: the mutation executed without an error.
* `error`: the mutation threw an error.
#### isError
* Type: `boolean`
Derived from `status`.
#### isIdle
* Type: `boolean`
Derived from `status`.
#### isPending
* Type: `boolean`
Derived from `status`.
#### isSuccess
* Type: `boolean`
Derived from `status`.
import Demo from "../../components/demo";
## Account
This demo shows how to access the currently connected account and its address.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/account.tsx)
Hook(s)
* `useAccount`
import Demo from "../../components/demo";
## Add Chain
This demo shows how to add a new chain to the wallet.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/add-chain.tsx)
Hook(s)
* `useAddChain`
import Demo from "../../components/demo";
## Token Balance
This demo shows how to fetch an ERC-20 token balance.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/balance.tsx)
Hooks
* `useAccount`
* `useBalance`
import Demo from "../../components/demo";
## Change Default Network
This demo shows how to change the default network.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/change-default-network.tsx)
Hooks
* `publicProvider`
* `useAccount`
* `useNetwork`
import Demo from "../../components/demo";
## Declare Contract (Todo)
This demo shows how to declare a contract.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/declare-contract.tsx)
Hooks
* `useAccount`
* `useDeclareContract`
import Demo from "../../components/demo";
## Deploy Contract
This demo shows how to use the `useUniversalDeployerContract` with `useSendTransaction` to deploy a contract.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/deploy-contract.tsx)
Hooks
* `useUniversalDeployerContract`
* `useSendTransaction`
import Demo from "../../components/demo";
## Estimate Fees
This demo shows a fee estimate fees for smart contract calls.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/estimate-fees.tsx)
Hooks
* `useAccount`
* `useContract`
* `useEstimateFees`
* `useNetwork`
import Demo from "../../components/demo";
## Events
This demo shows how to fetch events continuously.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/events.tsx)
Hook(s)
* `useEvents`
## Demos
This section contains a list of demos showing how to use Starknet React.
You can find the source code for these demos [on GitHub](https://github.com/starknet-start/starknet-start/tree/main/docs/components/demo).
### Connect Wallet UI
**[Connect Wallet UI](/demo/ui)**: Shows how to integrate the premade connect wallet ui.
### Common Hooks
**[Account](/demo/account)**: Shows how to access the current account and its address.
**[Balance](/demo/balance)**: Shows how to fetch an ERC-20 token balance.
**[Estimate Fees](/demo/estimate-fees)**: Shows how to estimate fees for smart contract calls.
**[Nonce for Address](/demo/nonce-for-address)**: Shows how to get the nonce for an address.
**[Read contract](/demo/read-contract)**: Shows how to use the `useReadContract` type-safe API to query a Starknet contract.
**[Declare contract](/demo/declare-contract)**: Shows how to declare a contract.
**[Deploy contract](/demo/deploy-contract)**: Shows how to use the `useUniversalDeployerContract` with `useSendTransaction` hooks to deploy a contract.
**[Send transaction](/demo/send-transaction)**: Shows how to use the `useContract` and `useSendTransaction` hooks to send transactions to the network.
**[Send gasless transaction using the Paymaster](/demo/send-gasless-transaction)**: Shows how to use the `usePaymasterEstimateFees` and `usePaymasterSendTransaction` hooks to send gasless transactions to the network.
**[Fetch gas token supported by the Paymaster](/demo/paymaster-gas-tokens)**: Shows how to use the `usePaymsterGasTokens` hook to fetch all gas tokens supported by the Paymaster.
**[Sign Typed Data](/demo/sign-typed-data)**: Shows how to request users to sign a piece of data.
**[Change Default Network](/demo/change-default-network)**: Shows how to change the default network.
**[Events](/demo/events)**: Shows how to fetch events continuously.
### New APIs
**[Request wallet permissions](/demo/wallet-permission)**: Shows how to request wallet permissions.
**[Add Chain](/demo/add-chain)**: Shows how to add a new chain to the wallet.
**[Switch Chain](/demo/switch-chain)**: Shows how to switch between chains.
### Starknet ID
**[Stark Address](/demo/stark-address)**: Shows how to get the address associated to a Starknet ID.
**[Stark Name](/demo/stark-name)**: Shows how to get the Starknet ID associated to an address.
**[Stark Profile](/demo/stark-profile)**: Shows how to get the Starknet ID profile associated to an address.
import Demo from "../../components/demo";
## Nonce for Address
This demo shows how to get the nonce for an address.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/nonce-for-address.tsx)
Hooks
* `useAccount`
* `useNonceForAddress`
import Demo from "../../components/demo";
## Fetch supported gas token by the Paymaster
This demo shows how to fetch all supported gas token by the used Paymaster.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/paymaster-gas-tokens.tsx)
Hooks
* `usePaymasterGasTokens`
import Demo from "../../components/demo";
## Read Contract
This demo shows how to use the `useReadContract` type-safe API to query a Starknet contract.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/read-contract.tsx)
Hooks
* `useNetwork`
* `useReadContract`
import Demo from "../../components/demo";
## Send gasless transaction using the Paymaster
This demo shows how to send a gasless transaction using ´$USDC´ as gas token to the network.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/send-gasless-transaction.tsx)
Hooks
* `usePaymasterEstimateFees`
* `usePaymasterSendTransaction`
import Demo from "../../components/demo";
## Send Transaction
This demo shows how to send transactions to the network.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/send-transaction.tsx)
Hooks
* `useContract`
* `useSendTransaction`
import Demo from "../../components/demo";
## Sign Typed Data
This demo shows how to sign typed data via the wallet of the connected account.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/sign-typed-data.tsx)
Hook(s)
* `useSignTypedData`
import Demo from "../../components/demo";
## Stark Address
This demo shows how to get the address associated to a Starknet ID.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/stark-address.tsx)
Hook(s)
* `useStarkAddress`
import Demo from "../../components/demo";
## Stark Name
This demo shows how to get the Starknet ID associated to an address.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/stark-name.tsx)
Hook(s)
* `useStarkName`
import Demo from "../../components/demo";
## Stark Profile
This demo shows how to get the Starknet ID profile associated to an address.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/stark-profile.tsx)
Hook(s)
* `useStarkProfile`
import Demo from "../../components/demo";
## Switch Chain
This demo shows how to switch between chains.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/switch-chain.tsx)
Hooks
* `useAccount`
* `useNetwork`
* `useSwitchChain`
import Demo from "../../components/demo";
## Connect Wallet UI
This demo shows how to use the premade connect wallet UI.
1. Import `WalletConnectModal` from `@starknet-io/get-starknet-ui`
2. Place the `` component where you want the "connect wallet button"
The UI takes care of wallet discovery, showing the correct wallet icon, and showing the user which wallet they last used with the current dapp.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/ui.tsx)
import Demo from "../../components/demo";
## Wallet Permission
This demo shows how to request wallet permissions.
[Link to GitHub](https://github.com/starknet-start/starknet-start/blob/main/docs/components/demo/wallet-permission.tsx)
Hook(s)
* `useWalletRequest`