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

# RainbowKit Integration

Replace InterwovenKit's default connect UI with
[RainbowKit](https://rainbowkit.com) while preserving all Initia functionality.
Since InterwovenKit uses wagmi connectors internally, integrating RainbowKit
only changes the wallet connection interface—all other features remain
identical.

<Note>
  This integration is perfect if you're already using RainbowKit in your
  application or prefer its UI components over the default InterwovenKit
  interface.
</Note>

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

<Steps>
  <Step title="Install RainbowKit">
    Add RainbowKit to your project dependencies:

    <CodeGroup>
      ```sh npm theme={null}
      npm install @rainbow-me/rainbowkit
      ```

      ```sh yarn theme={null}
      yarn add @rainbow-me/rainbowkit
      ```

      ```sh pnpm theme={null}
      pnpm add @rainbow-me/rainbowkit
      ```

      ```sh bun theme={null}
      bun add @rainbow-me/rainbowkit
      ```
    </CodeGroup>
  </Step>

  <Step title="Configure Providers">
    Update your provider configuration to include RainbowKit:

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

    <Info>
      **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](https://registry.initia.xyz)
      * Update `appName` and `projectId` to match your application details

      The `defaultChainId` sets the primary network for all Initia Wallet operations. See [InterwovenKitProvider reference](/interwovenkit/references/components/interwovenkit-provider) for details.
    </Info>
  </Step>

  <Step title="Use RainbowKit Components">
    Replace InterwovenKit's connect UI with RainbowKit's `ConnectButton`:

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

  <Step title="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.

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