Prerequisites
Before integrating InterwovenKit, ensure you have:- A React application (Next.js or Vite)
- Node.js 22+ installed
- Basic familiarity with React hooks and TypeScript
Installation & Setup
Follow these steps to set up InterwovenKit in your application:1
Install InterwovenKit
Install the core InterwovenKit package and its peer dependencies:These packages provide:
- @initia/interwovenkit-react: React hooks and components for Initia wallet integration
- wagmi: Ethereum wallet infrastructure (required for cross-chain compatibility)
- viem: Low-level Ethereum interaction library
- @tanstack/react-query: Data fetching and state management
2
Configure Providers
Create a providers component to set up the required React contexts. This component wraps your app with the necessary providers for wallet functionality:
providers.tsx
Chain Configuration: 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
3
Wrap Your Application
Import and use the providers in your application root:For other React frameworks, wrap your app component with the
layout.tsx
Providers
component at the highest level possible.4
Implement Wallet Connection
Create a basic component that demonstrates wallet connection. This component showcases the core wallet connection functionality using InterwovenKit’s hooks:
components/WalletConnection.tsx
5
Add Transaction Functionality
Extend your component to handle transactions. This example demonstrates how to send a basic token transfer:
components/TransactionExample.tsx
6
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.You can provide fees in two ways:
Pre-calculated
: Provide a fixed fee if you are confident.Estimated
: Use estimateGas to simulate the required fee.
Since this skips the standard fee selection UI, ensure the fee is displayed somewhere else in your app to maintain transparency for users.
components/TransactionExampleWithFee.tsx