createConfig

Creates a new Config object.

Import

import { createConfig } from "starkweb/react"

Usage

config.ts

import { http, createConfig } from "starkweb/react";
import { mainnet, sepolia } from "starkweb/chains";
 
export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.chain_id]: http(),
    [sepolia.chain_id]: http(),
  },
});

Parameters

import { type CreateConfigParameters } from "starkweb/react"

chains

readonly [Chain, ...Chain[]]

Chains used by the Config.
See Chains for more details about built-in chains and the Chain type.

import { createConfig, http } from "starkweb/react"
import { mainnet, sepolia } from "starkweb/chains"
 
const config = createConfig({
  chains: [mainnet, sepolia], 
  transports: {
    [mainnet.chain_id]: http("https://mainnet.example.com"),
    [sepolia.chain_id]: http("https://sepolia.example.com"),
  },
})

connectors

CreateConnectorFn[] | undefined

Connectors used by the Config.

import { createConfig, http } from "starkweb/react"
import { mainnet, sepolia } from "starkweb/chains"
import { injected } from "starkweb/connectors"
 
const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [injected()], 
  transports: {
    [mainnet.chain_id]: http("https://mainnet.example.com"),
    [sepolia.chain_id]: http("https://sepolia.example.com"),
  },
})

multiInjectedProviderDiscovery

boolean | undefined

Enables discovery of injected providers via EIP-6963 and converting to injected connectors.
Defaults to true.

import { createConfig, http } from "starkweb/react"
import { mainnet, sepolia } from "starkweb/chains"
 
const config = createConfig({
  chains: [mainnet, sepolia],
  multiInjectedProviderDiscovery: false, 
  transports: {
    [mainnet.chain_id]: http("https://mainnet.example.com"),
    [sepolia.chain_id]: http("https://sepolia.example.com"),
  },
})

ssr

boolean | undefined

Flag to indicate if the config is being used in a server-side rendering environment. Defaults to false.

import { createConfig, http } from "starkweb/react"
import { mainnet, sepolia } from "starkweb/chains"
 
const config = createConfig({
  chains: [mainnet, sepolia],
  ssr: true, 
  transports: {
    [mainnet.chain_id]: http("https://mainnet.example.com"),
    [sepolia.chain_id]: http("https://sepolia.example.com"),
  },
})

storage

Storage | null | undefined

Storage used by the config. Persists Config's State between sessions.
Defaults to createStorage({ storage: typeof window !== 'undefined' && window.localStorage ? window.localStorage : noopStorage }).

import { createConfig, createStorage, http } from "starkweb/react"
import { mainnet, sepolia } from "starkweb/chains"
 
const config = createConfig({
  chains: [mainnet, sepolia],
  storage: createStorage({ storage: window.localStorage }), 
  transports: {
    [mainnet.chain_id]: http("https://mainnet.example.com"),
    [sepolia.chain_id]: http("https://sepolia.example.com"),
  },
})

syncConnectedChain

boolean | undefined

Keep the State["chainId"] in sync with the current connection.
Defaults to true.

import { createConfig, http } from "starkweb/react"
import { mainnet, sepolia } from "starkweb/chains"
 
const config = createConfig({
  chains: [mainnet, sepolia],
  syncConnectedChain: false, 
  transports: {
    [mainnet.chain_id]: http("https://mainnet.example.com"),
    [sepolia.chain_id]: http("https://sepolia.example.com"),
  },
})

batch

{ multicall?: boolean | { batchSize?: number | undefined; wait?: number | undefined } | undefined } | { [_ in chains[number]["id"]]?: { multicall?: boolean | { batchSize?: number | undefined; wait?: number | undefined } | undefined } | undefined } | undefined

Batch settings.
Defaults to { multicall: true }.

import { createConfig, http } from "starkweb/react"
import { mainnet, sepolia } from "starkweb/chains"
 
const config = createConfig({
  chains: [mainnet, sepolia],
  batch: { multicall: true }, 
  transports: {
    [mainnet.chain_id]: http("https://mainnet.example.com"),
    [sepolia.chain_id]: http("https://sepolia.example.com"),
  },
})

cacheTime

number | { [_ in chains[number]["id"]]?: number | undefined } | undefined

Frequency in milliseconds for polling enabled features.
Defaults to pollingInterval or 4_000.

import { createConfig, http } from "starkweb/react"
import { mainnet, sepolia } from "starkweb/chains"
 
const config = createConfig({
  chains: [mainnet, sepolia],
  cacheTime: 4_000, 
  transports: {
    [mainnet.chain_id]: http("https://mainnet.example.com"),
    [sepolia.chain_id]: http("https://sepolia.example.com"),
  },
})

pollingInterval

number | { [_ in chains[number]["id"]]?: number | undefined } | undefined

Frequency in milliseconds for polling enabled features.
Defaults to 4_000.

import { createConfig, http } from "starkweb/react"
import { mainnet, sepolia } from "starkweb/chains"
 
const config = createConfig({
  chains: [mainnet, sepolia],
  pollingInterval: 4_000, 
  transports: {
    [mainnet.chain_id]: http("https://mainnet.example.com"),
    [sepolia.chain_id]: http("https://sepolia.example.com"),
  },
})

transports

Record<chains[number]["id"], Transport>

Mapping of chain IDs to Transport. This mapping is used internally when creating chain-aware Client objects. See the Transports docs for more info.

import { createConfig, fallback, http } from "starkweb/react"
import { mainnet, sepolia } from "starkweb/chains"
 
const config = createConfig({
  chains: [mainnet, sepolia],
  transports: { 
    [mainnet.chain_id]: fallback([ 
      http("https://..."), 
      http("https://..."), 
    ]), 
    [sepolia.chain_id]: http("https://..."), 
  }, 
})

client

(parameters: { chain: chains[number] }) => Client<Transport, chains[number]>

Function for creating new Client to be used internally. Exposes more control over the internal Client creation logic versus using the transports property.

import { createClient, http, createConfig } from "starkweb/react"
import { mainnet, sepolia } from "starkweb/chains"
 
const config = createConfig({
  chains: [mainnet, sepolia],
  client({ chain }) { 
    return createClient({ chain, transport: http("https://...") }) 
  }, 
})

Return Type

import { type Config } 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()