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

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>
}

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

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)