Skip to main content

​
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.
// providers.tsx
"use client"

import { PropsWithChildren, useEffect } from "react"
import { createConfig, http, WagmiProvider } from "wagmi"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { initiaPrivyWalletConnector, injectStyles, InterwovenKitProvider, TESTNET } from "@initia/interwovenkit-react"
import InterwovenKitStyles from "@initia/interwovenkit-react/styles.js"

const minievm = {
  id: 4303131403034904,
  name: "Minievm",
  nativeCurrency: { name: "GAS", symbol: "GAS", decimals: 18 },
  rpcUrls: { default: { http: ["https://jsonrpc-evm-1.anvil.asia-southeast.initia.xyz"] } },
}
const wagmiConfig = createConfig({
  connectors: [initiaPrivyWalletConnector],
  chains: [minievm],
  transports: { [minievm.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 {...TESTNET} defaultChainId="minievm-2">
          {children}
        </InterwovenKitProvider>
      </WagmiProvider>
    </QueryClientProvider>
  )
}
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
npm install viem
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:
  • 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
// page.tsx
"use client"

import { parseEther } from "viem"
import { useAccount, useChainId, useSendTransaction, useSwitchChain } from "wagmi"
import { truncate } from "@initia/utils"
import { useInterwovenKit } from "@initia/interwovenkit-react"

export default function Home() {
  const chainId = useChainId()
  const { address } = useAccount()
  const { switchChainAsync } = useSwitchChain()
  const { sendTransactionAsync } = useSendTransaction()
  const { username, openConnect, openWallet, openBridge } = useInterwovenKit()

  const send = async () => {
    await switchChainAsync({ chainId })
    const transactionHash = await sendTransactionAsync({ to: address, value: parseEther("0.01"), chainId: chainId })
    console.log("Transaction sent:", transactionHash)
  }

  const bridgeTransferDetails = {
    srcChainId: "SOURCE_CHAIN_ID",
    srcDenom: "SOURCE_ASSET_DENOM",
    dstChainId: "DESTINATION_CHAIN_ID",
    dstDenom: "DESTINATION_ASSET_DENOM",
  }

  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>
    </>
  )
}
Component Features:
  • Transaction Handling: The send() function switches to the correct chain and sends a value transfer using wagmi’s useSendTransaction
  • 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