@initia/interwovenkit-react

InterwovenKit is a React library that provides components and hooks to connect dApps to Initia and Interwoven Rollups.

For detailed documentation, visit https://docs.initia.xyz/interwovenkit.

Table of Contents

- Features
- Getting Started
- Installation
- Configure Providers
- Basic Example
- Usage on Testnet
- Migrating From v1

Features

$3

Connect to external wallets. Supports multiple wallet providers including MetaMask and Keplr.

$3

Wallet interface for managing assets across Interwoven rollups:

- View fungible tokens
- Browse NFT items
- Track transaction history

$3

Cross-chain bridge and swap functionality:

- Transfer assets between Initia and Interwoven rollups
- Swap tokens within and across chains
- Automatic route optimization for best rates
- Support for OP Bridge withdrawals

$3

Transaction handling with detailed preview:

- Fee estimation with multiple fee token options
- Transaction simulation before signing
- Detailed message breakdown

Getting Started

$3

Install @initia/interwovenkit-react along with its peer dependencies:

``bash
pnpm add @initia/interwovenkit-react wagmi viem @tanstack/react-query
`

$3

Wrap your app with providers:

`tsx
// 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 {
initiaPrivyWalletConnector,
injectStyles,
InterwovenKitProvider,
} 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(() => {
// Inject styles into the shadow DOM used by Initia Wallet
injectStyles(InterwovenKitStyles)
}, [])

return (


{children}


)
}
`

Then wrap your application root:

`tsx
// layout.tsx
import Providers from "./providers"

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
return (


{children}


)
}
`

$3

Connect the wallet, check the balance, and send a transaction:

`tsx
// page.tsx
"use client"

import { truncate } from "@initia/utils"
import { useInterwovenKit } from "@initia/interwovenkit-react"

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

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

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

const ETH = "move/edfcddacac79ab86737a1e9e65805066d8be286a37cb94f4884b892b0e39f954"
const USDC = "ibc/6490A7EAB61059BFC1CDDEB05917DD70BDF3A611654162A1A47DB930D40D8AF4"

const bridgeTransferDetails = {
srcChainId: "interwoven-1",
srcDenom: ETH,
dstChainId: "interwoven-1",
dstDenom: USDC,
}

if (!address) {
return Connect
}

return (
<>
Send
openBridge(bridgeTransferDetails)}>Bridge
{truncate(username ?? address)}

)
}
`

Custom Fee Handling

When you need to bypass the fee selection UI and use pre-calculated fees directly:

`tsx
// page.tsx
"use client"

import { calculateFee, GasPrice } from "@cosmjs/stargate"
import { useInterwovenKit } from "@initia/interwovenkit-react"

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

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

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

return Send
}
`

Usage on Testnet

`tsx
import type { PropsWithChildren } from "react"
import { InterwovenKitProvider, TESTNET } from "@initia/interwovenkit-react"

export default function Providers({ children }: PropsWithChildren) {
return {children}
}
`

Migrating From v1

To migrate from @initia/react-wallet-widget v1.x to @initia/interwovenkit-react`, see our official migration guide:

https://docs.initia.xyz/interwovenkit/migration