Skip to main content
Replace InterwovenKit’s default connect UI with RainbowKit while preserving all Initia functionality. Since InterwovenKit uses wagmi connectors internally, integrating RainbowKit only changes the wallet connection interface—all other features remain identical.
This integration is perfect if you’re already using RainbowKit in your application or prefer its UI components over the default InterwovenKit interface.

​
Overview

RainbowKit integration with InterwovenKit provides:
  • Familiar UI: Keep using RainbowKit’s polished wallet connection interface
  • Full Compatibility: All InterwovenKit hooks and features work exactly the same
  • Easy Migration: Drop-in replacement for the default connect UI
  • Customization: Full access to RainbowKit’s theming and customization options

​
Integration Steps

1

Install RainbowKit

Add RainbowKit to your project dependencies:
npm install @rainbow-me/rainbowkit
2

Configure Providers

Update your provider configuration to include RainbowKit:
// providers.tsx
"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 { connectorsForWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit"
import "@rainbow-me/rainbowkit/styles.css"
import { initiaPrivyWallet, injectStyles, InterwovenKitProvider } from "@initia/interwovenkit-react"
import InterwovenKitStyles from "@initia/interwovenkit-react/styles.js"

const connectors = connectorsForWallets(
  [
    {
      groupName: "Recommended",
      wallets: [initiaPrivyWallet],
    },
  ],
  {
    appName: "Your App Name",
    projectId: "your-project-id",
  }
)

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

const queryClient = new QueryClient()

export default function Providers({ children }: PropsWithChildren) {
  useEffect(() => {
    // Inject styles into the shadow DOM used by Initia Wallet
    injectStyles(InterwovenKitStyles)
  }, [])

  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={wagmiConfig}>
        <RainbowKitProvider>
          <InterwovenKitProvider defaultChainId="YOUR_CHAIN_ID">
            {children}
          </InterwovenKitProvider>
        </RainbowKitProvider>
      </WagmiProvider>
    </QueryClientProvider>
  )
}
Configuration Requirements:
  • Replace YOUR_CHAIN_ID with your target blockchain network:
    • "interwoven-1" for Initia mainnet (default)
    • "initiation-2" for Initia testnet
    • Or any valid chain ID from the initia-registry
  • Update appName and projectId to match your application details
The defaultChainId sets the primary network for all Initia Wallet operations. See InterwovenKitProvider reference for details.
3

Use RainbowKit Components

Replace InterwovenKit’s connect UI with RainbowKit’s ConnectButton:
// page.tsx
"use client"

import { MsgSend } from "cosmjs-types/cosmos/bank/v1beta1/tx"
import { ConnectButton } from "@rainbow-me/rainbowkit"
import { truncate } from "@initia/utils"
import { useInterwovenKit } from "@initia/interwovenkit-react"

export default function Home() {
  const { address, username, openWallet, openBridge, requestTxBlock } = useInterwovenKit()

  const send = async () => {
    const messages = [
      {
        typeUrl: "/cosmos.bank.v1beta1.MsgSend",
        value: MsgSend.fromPartial({
          fromAddress: address,
          toAddress: address,
          amount: [{ amount: "1000000", denom: "uinit" }],
        }),
      },
    ]

    const { transactionHash } = await requestTxBlock({ messages })
    console.log("Transaction sent:", transactionHash)
  }

  const bridgeTransferDetails = {
    srcChainId: "SOURCE_CHAIN_ID",
    srcDenom: "SOURCE_ASSET_DENOM",
    dstChainId: "DESTINATION_CHAIN_ID",
    dstDenom: "DESTINATION_ASSET_DENOM",
  }

  if (!address) {
    return <ConnectButton />
  }

  return (
    <>
      <button onClick={send}>Send</button>
      <button onClick={() => openBridge(bridgeTransferDetails)}>Bridge</button>
      <button onClick={openWallet}>{truncate(username ?? address)}</button>
    </>
  )
}
4

Custom Fee Handling (Optional)

The custom fee handling feature allows you to bypass the “Confirm tx” modal and provide pre-calculated fees directly, giving you more control over transaction speed and UX. The requestTx functions are still available, so you can choose the workflow that fits your app best.
// page.tsx
"use client"

import { MsgSend } from "cosmjs-types/cosmos/bank/v1beta1/tx"
import { ConnectButton } from "@rainbow-me/rainbowkit"
import { truncate } from "@initia/utils"
import { calculateFee, GasPrice } from "@cosmjs/stargate"
import { useInterwovenKit } from "@initia/interwovenkit-react"

export default function Home() {
  const { address, username, openWallet, openBridge, estimateGas, submitTxBlock } = useInterwovenKit()

  const send = async () => {
    const messages = [
      {
        typeUrl: "/cosmos.bank.v1beta1.MsgSend",
        value: MsgSend.fromPartial({
          fromAddress: address,
          toAddress: address,
          amount: [{ amount: "1000000", denom: "uinit" }],
        }),
      },
    ]

    // Estimate gas and calculate fee
    const gas = await estimateGas({ messages })
    const fee = calculateFee(gas, GasPrice.fromString("0.015uinit"))
    const { transactionHash } = await submitTxBlock({ messages, fee })
    console.log("Transaction sent:", transactionHash)
  }

  const bridgeTransferDetails = {
    srcChainId: "SOURCE_CHAIN_ID",
    srcDenom: "SOURCE_ASSET_DENOM",
    dstChainId: "DESTINATION_CHAIN_ID",
    dstDenom: "DESTINATION_ASSET_DENOM",
  }

  if (!address) {
    return <ConnectButton />
  }

  return (
    <>
      <button onClick={send}>Send</button>
      <button onClick={() => openBridge(bridgeTransferDetails)}>Bridge</button>
      <button onClick={openWallet}>{truncate(username ?? address)}</button>
    </>
  )
}
⌘I