Overview
When working with EVM-based chains, you can configure wagmi to connect directly to your custom EVM network instead of Ethereum mainnet. This approach allows you to:- Use wagmi for direct interaction with your EVM chain
- Leverage Initia Wallet for interwoven rollup balance viewing and bridging
- Maintain seamless connectivity between different blockchain environments
Non-EVM chains: If your chain is not EVM-based, you can leave the default chain set to mainnet. Initia Wallet won’t actually connect to Ethereum—it only uses an arbitrary signer to sign amino messages.
Setup Guide
1
Configure Providers
Set up your providers to connect wagmi to your custom EVM chain. This configuration includes your chain details, wagmi config, and the InterwovenKit provider.Key Configuration Elements:
- Chain Definition: Define your custom EVM chain with its ID, name, native currency, and RPC endpoints
- Wagmi Config: Set up wagmi to use your custom chain and the Initia Privy wallet connector
- Style Injection: Use
injectStyles()
to ensure proper styling within Initia Wallet’s shadow DOM - Provider Hierarchy: Wrap your app with QueryClient, WagmiProvider, and InterwovenKitProvider
- Default Chain ID: Set to your target rollup chain ID (e.g.,
"minievm-2"
for Minievm testnet)
Chain ID Configuration: The
defaultChainId
parameter sets the primary blockchain for Initia Wallet operations. For EVM rollups, use your rollup’s chain ID (like "minievm-2"
), not the EVM chain ID. This ensures proper balance display and bridging functionality. See InterwovenKitProvider reference for more details.2
Install Dependencies
To follow the implementation example, install
viem
for Ethereum utilities:- npm
- yarn
- pnpm
- bun
npm
3
Implementation Example
The following React component demonstrates a complete integration that combines wagmi’s EVM functionality with InterwovenKit features. This example shows how to:Component Features:
- Send transactions on your custom EVM chain using wagmi
- Access Initia Wallet features for bridging and account management
- Handle wallet connection states and user interactions
- Transaction Handling: The
send()
function switches to the correct chain and sends a value transfer using wagmi’suseSendTransaction
- Bridge Integration: The
bridgeTransferDetails
object defines parameters for cross-chain bridging operations - Wallet Management: Conditional rendering based on connection status, with buttons for connecting, sending transactions, bridging, and accessing the wallet interface
- User Experience: Displays truncated usernames or addresses for connected users