useConfig

Hook for getting Config from nearest StarkwebProvider.

Import

import { useConfig } from "starkweb/react"

Usage

index.tsx

import { useConfig } from "starkweb/react"
 
function App() {
  const config = useConfig()
}

Return Type

import { type UseConfigReturnType } from "starkweb/react"

chains

readonly [Chain, ...Chain[]]

chains passed to createConfig.

connectors

readonly Connectors[]

Connectors set up from passing connectors and multiInjectedProviderDiscovery to createConfig.

state

readonly State

The Config object's internal state. See State for more info.

storage

readonly Storage | null

storage passed to createConfig.

getClient

(parameters?: { chainId?: chainId | undefined }): Client<transports[chains[number]["id"]], Extract<chains[number], { chain_id: chainId }>>

Creates new Client object.

index.ts

import { config } from "./config"
 
const client = config.getClient({ chainId: 1 })

setState

(value: State | ((state: State) => State)) => void

Updates the Config object's internal state. See State for more info.

index.ts

import { mainnet } from "starkweb/react/chains"
import { config } from "./config"
 
config.setState((x) => ({
  ...x,
  chainId: x.current ? x.chainId : mainnet.chain_id,
}))

(selector: (state: State>) => state, listener: (selectedState: state, previousSelectedState: state) => void, options?: { emitImmediately?: boolean | undefined; equalityFn?: ((a: state, b: state) => boolean) | undefined } | undefined) => (() => void)

Listens for state changes matching the selector function. Returns a function that can be called to unsubscribe the listener.

index.ts

import { config } from "./config"
 
const unsubscribe = config.subscribe(
  (state) => state.chainId,
  (chainId) => console.log(`Chain ID changed to ${chainId}`),
)
unsubscribe()

Examples

Basic Usage

basic.tsx

import { useConfig } from "starkweb/react";
 
function ConfigInfo() {
  const config = useConfig();
  
  return (
    <div>
      <h3>Configuration Info</h3>
      <div>Configured Chains: {config.chains.length}</div>
      <div>
        Chains:{" "}
        {config.chains.map((chain) => chain.name).join(", ")}
      </div>
    </div>
  );
}

With Error Handling

error-handling.tsx

import { useConfig } from "starkweb/react";
import { StarkwebProviderNotFoundError } from "starkweb/react";
 
function SafeConfigInfo() {
  try {
    const config = useConfig();
    
    return (
      <div>
        <div>State Chain ID: {config.state.chainId}</div>
        <div>
          Available Chains:{" "}
          {config.chains.map((chain) => chain.name).join(", ")}
        </div>
      </div>
    );
  } catch (error) {
    if (error instanceof StarkwebProviderNotFoundError) {
      return <div>StarkwebProvider not found in React context</div>;
    }
    throw error;
  }
}

With Transport Info

transport-info.tsx

import { useConfig } from "starkweb/react";
 
function TransportInfo() {
  const config = useConfig();
  
  return (
    <div>
      <h3>Transport Configuration</h3>
      {config.chains.map((chain) => (
        <div key={chain.chain_id}>
          <div>Chain: {chain.name}</div>
          <div>
            Transport:{" "}
            {config.transports[chain.chain_id]?.type || "Not configured"}
          </div>
        </div>
      ))}
    </div>
  );
}