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.
• AutoSign is optional. Enable it with enableAutoSign when you want signature-derived automatic signing flows.

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
lockStakeModuleAddress	string	From preset	On-chain module address used for lock/stake position queries
minityUrl	string	From preset	Base URL for Minity portfolio streaming and related portfolio APIs
dexUrl	string	From preset	Base URL for DEX-related data used by portfolio and positions
vipUrl	string	From preset	Base URL for VIP-related data used by portfolio and positions
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 the default message type for the current default chain. Record<string, string[]> is a per-chain allowlist of message type URLs
autoSignFeePolicy	Record<string, AutoSignFeePolicy>	undefined	Optional per-chain fee policy overrides for AutoSign gas multiplier and allowed fee denoms
cosmosWallets	CosmosWallet[]	undefined	Optional additional Cosmos wallet entries shown in the connect flow

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 end-to-end setup examples, 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
  lockStakeModuleAddress: string
  minityUrl: string
  dexUrl: string
  vipUrl: string
  theme: 'light' | 'dark'
  container?: HTMLElement
  disableAnalytics?: boolean
  enableAutoSign?: boolean | Record<string, string[]>
  autoSignFeePolicy?: Record<string, AutoSignFeePolicy>
  cosmosWallets?: CosmosWallet[]
}

Types Chain, GeneratedType, AminoConverters, AutoSignFeePolicy, and CosmosWallet are from InterwovenKit source and its external dependencies. See @initia/initia-registry-types, @cosmjs/proto-signing, and @cosmjs/stargate for related external types.