# @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](https://docs.initia.xyz/interwovenkit).
## Table of Contents
- [Features](#features)
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Configure Providers](#configure-providers)
- [Basic Example](#basic-example)
- [Usage on Testnet](#usage-on-testnet)
- [Migrating From v1](#migrating-from-v1)
## Features
### Connect
Connect to external wallets. Supports multiple wallet providers including MetaMask and Keplr.
### Wallet
Wallet interface for managing assets across Interwoven rollups:
- View fungible tokens
- Browse NFT items
- Track transaction history
### Bridge
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
### Transaction Signing
Transaction handling with detailed preview:
- Fee estimation with multiple fee token options
- Transaction simulation before signing
- Detailed message breakdown
## Getting Started
### Installation
Install `@initia/interwovenkit-react` along with its peer dependencies:
```bash
pnpm add @initia/interwovenkit-react wagmi viem @tanstack/react-query
```
### Configure Providers
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}
)
}
```
### Basic Example
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
}
return (
<>
)
}
```
## 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
}
```
## 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](https://docs.initia.xyz/interwovenkit/migration)