EVM Integration

// 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>
  )
}

// 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>
    </>
  )
}