@initia/interwovenkit-react
Advanced tools
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.
Connect to external wallets. Supports multiple wallet providers including MetaMask and Keplr.
Wallet interface for managing assets across Interwoven rollups:
Cross-chain bridge and swap functionality:
Transaction handling with detailed preview:
Install @initia/interwovenkit-react along with its peer dependencies:
pnpm add @initia/interwovenkit-react wagmi viem @tanstack/react-query
Wrap your app with providers:
// 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 (
<QueryClientProvider client={queryClient}>
<WagmiProvider config={wagmiConfig}>
<InterwovenKitProvider defaultChainId="YOUR_CHAIN_ID">{children}</InterwovenKitProvider>
</WagmiProvider>
</QueryClientProvider>
)
}
Then wrap your application root:
// layout.tsx
import Providers from "./providers"
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
return (
<html>
<body>
<Providers>{children}</Providers>
</body>
</html>
)
}
Connect the wallet, check the balance, and send a transaction:
// 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 <button onClick={openConnect}>Connect</button>
}
return (
<>
<button onClick={send}>Send</button>
<button onClick={() => openBridge(bridgeTransferDetails)}>Bridge</button>
<button onClick={openWallet}>{truncate(username ?? address)}</button>
</>
)
}
When you need to bypass the fee selection UI and use pre-calculated fees directly:
// 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 <button onClick={send}>Send</button>
}
import type { PropsWithChildren } from "react"
import { InterwovenKitProvider, TESTNET } from "@initia/interwovenkit-react"
export default function Providers({ children }: PropsWithChildren) {
return <InterwovenKitProvider {...TESTNET}>{children}</InterwovenKitProvider>
}
To migrate from @initia/react-wallet-widget v1.x to @initia/interwovenkit-react, see our official migration guide:
FAQs
Connect dApps to Initia and Interwoven Rollups
We found that @initia/interwovenkit-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.