> ## Documentation Index
> Fetch the complete documentation index at: https://docs.initia.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# 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`](../utilities/inject-styles) once at app startup. Otherwise
  the UI will be unstyled.

## Quickstart

```tsx theme={null}
'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>
  )
}
```

<Note>
  This example shows the provider structure. For complete setup configurations,
  see [Provider Setup](../setup/providers).
</Note>

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

```tsx theme={null}
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>
  )
}
```

<Note>
  This example shows only the `InterwovenKitProvider` configuration. For
  complete provider setup including `QueryClientProvider`, `WagmiProvider`, and
  `injectStyles`, see [Provider Setup](../setup/providers).
</Note>

## Notes

* For end-to-end setup examples, see [Provider Setup](../setup/providers).

## Type Reference (Advanced)

```ts theme={null}
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.