InterwovenKitProvider

Overview

React provider that configures and renders the InterwovenKit widget shell (drawer, routes, and supporting providers).
Mount once near the top of your app, wrapping your root component.
Privy and AutoSign are optional. Configure privyContext and enableAutoSign only if needed. AutoSign requires Privy (PrivyProvider and privyContext).

Prerequisites

Must be used within a React Query QueryClientProvider.
Must be used within a wagmi WagmiProvider if using wallet-related APIs.
Client-only (no SSR): Put this in a use client provider tree, or use a dynamic import in Next.js.

Styles

CSS styles must be injected manually using injectStyles once at app startup. Otherwise the UI will be unstyled.

Quickstart

'use client'

import { useEffect } from 'react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { createConfig, http, WagmiProvider } from 'wagmi'
import { mainnet } from 'wagmi/chains'
import {
  initiaPrivyWalletConnector,
  injectStyles,
  InterwovenKitProvider,
  MAINNET,
} from '@initia/interwovenkit-react'
import interwovenKitStyles from '@initia/interwovenkit-react/styles.js'

const queryClient = new QueryClient()
const wagmiConfig = createConfig({
  connectors: [initiaPrivyWalletConnector],
  chains: [mainnet],
  transports: { [mainnet.id]: http() },
})

export function AppProviders({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    injectStyles(interwovenKitStyles)
  }, [])

  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={wagmiConfig}>
        <InterwovenKitProvider {...MAINNET}>{children}</InterwovenKitProvider>
      </WagmiProvider>
    </QueryClientProvider>
  )
}

This example shows the provider structure. For complete setup configurations, see Provider Setup.

Props

Prop	Type	Default	Description
`defaultChainId`	`string`	From preset	Initia or rollup chain ID that InterwovenKit should treat as the “home” chain
`registryUrl`	`string`	From preset	Base URL for the Initia registry API used to resolve chains and assets
`routerApiUrl`	`string`	From preset	Base URL for the router API used by the bridge and swap flows
`glyphUrl`	`string`	From preset	Base URL for Glyph profile data (user avatars and related metadata)
`usernamesModuleAddress`	`string`	From preset	On‑chain module address of the Initia (`.init`) username contract
`theme`	`"light" \| "dark"`	From preset (typically dark)	Visual theme for the widget
`customChain`	`Chain`	`undefined`	Adds or overrides a chain definition in the Initia registry. Use when you run a private rollup or need to inject a chain that is not yet in the public registry
`protoTypes`	`Iterable<[string, GeneratedType]>`	`undefined`	Additional protobuf type mappings used when encoding Cosmos transactions. Only needed if you use custom message types
`aminoConverters`	`AminoConverters`	`undefined`	Custom Amino converters for legacy signing. Only needed for advanced integrations
`container`	`HTMLElement`	`undefined`	Optional element the widget should render into instead of the default Shadow DOM host
`disableAnalytics`	`boolean`	`false` (mainnet), `true` (testnet)	When `true`, disables InterwovenKit’s built‑in analytics events
`enableAutoSign`	`boolean \| Record<string, string[]>`	`undefined`	Enables AutoSign and optionally whitelists chains and message types. `true` enables for supported chains and messages. `Record<string, string[]>` is a per-chain allowlist of message type URLs. Requires Privy (`PrivyProvider` and `privyContext`). Required at runtime only if you want AutoSign flows to be available
`privyContext`	`PrivyContext`	`undefined`	Passes Privy authentication and wallet helpers into InterwovenKit. Required for AutoSign and embedded wallet features, otherwise optional

Return value

Renders children and mounts the InterwovenKit UI shell.

Examples

Custom chain configuration

import type { Chain } from '@initia/initia-registry-types'
import { InterwovenKitProvider, MAINNET } from '@initia/interwovenkit-react'

const MY_ROLLUP: Chain = {
  chain_id: 'my-rollup-1',
  chain_name: 'my-rollup',
  pretty_name: 'My Rollup',
  network_type: 'mainnet',
  bech32_prefix: 'init',
  fees: {
    fee_tokens: [
      {
        denom: 'uinit',
        fixed_min_gas_price: 0.1,
      },
    ],
  },
  apis: {
    rpc: [{ address: 'https://rpc.my-rollup.com' }],
    rest: [{ address: 'https://api.my-rollup.com' }],
    indexer: [{ address: 'https://indexer.my-rollup.com' }],
  },
} as Chain

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <InterwovenKitProvider
      {...MAINNET}
      defaultChainId={MY_ROLLUP.chain_id}
      customChain={MY_ROLLUP}
    >
      {children}
    </InterwovenKitProvider>
  )
}

This example shows only the InterwovenKitProvider configuration. For complete provider setup including QueryClientProvider, WagmiProvider, and injectStyles, see Provider Setup.

Notes

For AutoSign and Privy integration setup, see Provider Setup.

Type reference (advanced)

type InterwovenKitProviderProps = React.PropsWithChildren<Partial<Config>>

type Config = {
  defaultChainId: string
  customChain?: Chain
  protoTypes?: Iterable<[string, GeneratedType]>
  aminoConverters?: AminoConverters
  registryUrl: string
  routerApiUrl: string
  glyphUrl: string
  usernamesModuleAddress: string
  theme: 'light' | 'dark'
  container?: HTMLElement
  disableAnalytics?: boolean
  enableAutoSign?: boolean | Record<string, string[]>
  privyContext?: PrivyContext
}

type PrivyContext = {
  privy: ReturnType<typeof usePrivy>
  createWallet: ReturnType<typeof useCreateWallet>['createWallet']
  wallets: ReturnType<typeof useWallets>['wallets']
  siwe: ReturnType<typeof useLoginWithSiwe>
}

Types Chain, GeneratedType, and AminoConverters are from external packages. See @initia/initia-registry-types, @cosmjs/proto-signing, and @cosmjs/stargate for details. PrivyContext members are derived from Privy hooks: usePrivy, useCreateWallet, useWallets, and useLoginWithSiwe from @privy-io/react-auth.

InterwovenKit

Integrations

Features

API Reference

InterwovenKitProvider

Overview

Prerequisites

Styles

Quickstart

Props

Return value

Examples

Custom chain configuration

Notes

Type reference (advanced)

​Overview

​Prerequisites

​Styles

​Quickstart

​Props

​Return value

​Examples

​Custom chain configuration

​Notes

​Type reference (advanced)

Overview

Prerequisites

Styles

Quickstart

Props

Return value

Examples

Custom chain configuration

Notes

Type reference (advanced)