> ## Documentation Index
> Fetch the complete documentation index at: https://initialabs-chore-prettier-tooling.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Provider Setup

## Overview

* Complete provider setup for InterwovenKit with all required dependencies.
* Two variants: basic setup (no Privy/AutoSign) and AutoSign setup (requires
  Privy).
* Use the basic setup unless you need AutoSign or embedded wallet features.

## Basic setup

For apps that don't need AutoSign or embedded wallets.

<Note>
  This setup uses `initiaPrivyWalletConnector` as a wagmi connector option, but
  does not require `PrivyProvider` at runtime.
</Note>

```tsx theme={null}
'use client'

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

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

const queryClient = new QueryClient()

export default function Providers({ children }: PropsWithChildren) {
  useEffect(() => {
    injectStyles(interwovenKitStyles)
  }, [])

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

## AutoSign setup (requires Privy)

For apps that need AutoSign or embedded wallet features. **Privy is required**
for AutoSign to work:

```tsx theme={null}
'use client'

import { PropsWithChildren, useEffect } from 'react'
import { createConfig, http, WagmiProvider } from 'wagmi'
import { mainnet } from 'wagmi/chains'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import {
  initiaPrivyWalletConnector,
  injectStyles,
  InterwovenKitProvider,
  PRIVY_APP_ID,
} from '@initia/interwovenkit-react'
import interwovenKitStyles from '@initia/interwovenkit-react/styles.js'
import {
  PrivyProvider,
  useCreateWallet,
  useLoginWithSiwe,
  usePrivy,
  useWallets,
} from '@privy-io/react-auth'

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

const queryClient = new QueryClient()

function InterwovenKitWrapper({ children }: PropsWithChildren) {
  const privy = usePrivy()
  const siwe = useLoginWithSiwe()
  const { createWallet } = useCreateWallet()
  const { wallets } = useWallets()

  return (
    <InterwovenKitProvider
      privyContext={{ privy, siwe, createWallet, wallets }}
      // Option 1: Use boolean to enable default message types based on chain type
      // - minievm: /minievm.evm.v1.MsgCall
      // - miniwasm: /cosmwasm.wasm.v1.MsgExecuteContract
      // - default: /initia.move.v1.MsgExecute
      enableAutoSign={true}
      // Option 2: Specify exact message types per chain
      // enableAutoSign={{
      //   "interwoven-1": [
      //     "/cosmos.bank.v1beta1.MsgSend",        // Token transfers
      //     "/cosmos.staking.v1beta1.MsgDelegate", // Staking/delegation
      //   ],
      // }}
    >
      {children}
    </InterwovenKitProvider>
  )
}

export default function Providers({ children }: PropsWithChildren) {
  useEffect(() => {
    injectStyles(interwovenKitStyles)
  }, [])

  return (
    <PrivyProvider
      appId="YOUR_PRIVY_APP_ID"
      config={{
        loginMethodsAndOrder: {
          primary: [`privy:${PRIVY_APP_ID}`, 'detected_ethereum_wallets'],
        },
      }}
    >
      <QueryClientProvider client={queryClient}>
        <WagmiProvider config={wagmiConfig}>
          <InterwovenKitWrapper>{children}</InterwovenKitWrapper>
        </WagmiProvider>
      </QueryClientProvider>
    </PrivyProvider>
  )
}
```

## Notes

* Call `injectStyles()` once at app startup to avoid duplicate style tags.
* Privy is **required** for AutoSign. AutoSign will not work without
  `PrivyProvider` and `privyContext`.
* Replace `YOUR_PRIVY_APP_ID` with your own Privy app ID. This is distinct from
  the imported `PRIVY_APP_ID` (which is Initia's shared Privy app ID).
* The `privyContext` prop must be passed from within a component that has access
  to Privy hooks (`usePrivy`, `useLoginWithSiwe`, `useCreateWallet`,
  `useWallets`).
* **`enableAutoSign` configuration**:
  * **Boolean (`true`)**: Enables AutoSign with default message types based on
    chain type:
    * `minievm`: `/minievm.evm.v1.MsgCall`
    * `miniwasm`: `/cosmwasm.wasm.v1.MsgExecuteContract`
    * `default`: `/initia.move.v1.MsgExecute`
  * **Record (`Record<string, string[]>`)**: Per-chain allowlist of specific
    message type URLs. Use this to control exactly which message types can be
    auto-signed (e.g., `MsgSend`, `MsgDelegate`, `MsgExecute`).
* **Config vs runtime**: Both setups use `initiaPrivyWalletConnector` in wagmi
  config (config-time), but only the AutoSign setup requires `PrivyProvider` at
  runtime. The connector itself does not require Privy runtime unless you need
  AutoSign or embedded wallet features.