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.

This setup uses initiaPrivyWalletConnector as a wagmi connector option, but does not require PrivyProvider at runtime.

'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:

'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.