Wagmi Integration

The SDK detects an existing Wagmi config when WalletConnectProvider is mounted inside WagmiProvider. For EVM connections, the SDK can then synchronize the connected wallet with Wagmi so your app can use Wagmi hooks such as useAccount, useSignMessage, useSendTransaction, and useSwitchChain.

Install Dependencies#


npm install @dogeos/dogeos-sdk@^4.0.0 wagmi viem @tanstack/react-query

Wrap Providers#

Mount WalletConnectProvider inside WagmiProvider. Wagmi also needs TanStack Query. Save the Chikyū definition from Chain Configuration in chains.ts, and use the same chain in both providers.


"use client"
 
import type { ReactNode } from "react"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { ChainTypeEnum, WalletConnectProvider, type WalletConnectKitConfig } from "@dogeos/dogeos-sdk"
import "@dogeos/dogeos-sdk/style.css"
import { createConfig, http, WagmiProvider } from "wagmi"
import { dogeOSChikyuTestnet } from "./chains"
 
const queryClient = new QueryClient()
 
const wagmiConfig = createConfig({
  chains: [dogeOSChikyuTestnet],
  transports: {
    [dogeOSChikyuTestnet.id]: http(),
  },
})
 
const dogeConfig: WalletConnectKitConfig = {
  clientId: "YOUR_DOGEOS_CLIENT_ID",
  defaultConnectChain: ChainTypeEnum.EVM,
  chains: { evm: [dogeOSChikyuTestnet] },
}
 
export function Providers({ children }: { children: ReactNode }) {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <WalletConnectProvider config={dogeConfig}>{children}</WalletConnectProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Use SDK and Wagmi Hooks Together#

Use the SDK for the connection modal and embedded wallet experience. Use Wagmi hooks for EVM reads, writes, and signatures after the wallet connects.


"use client"
 
import { useAccount as useDogeAccount, useWalletConnect } from "@dogeos/dogeos-sdk"
import { useAccount as useWagmiAccount, useSignMessage } from "wagmi"
 
export function WagmiWalletPanel() {
  const { openModal, disconnect, isConnected } = useWalletConnect()
  const dogeAccount = useDogeAccount()
  const wagmiAccount = useWagmiAccount()
  const { signMessageAsync } = useSignMessage()
 
  async function onSign() {
    const signature = await signMessageAsync({
      message: "Hello from DogeOS",
    })
    console.log(signature)
  }
 
  return (
    <div>
      <button onClick={isConnected ? disconnect : openModal}>{isConnected ? "Disconnect" : "Connect wallet"}</button>
 
      <p>SDK address: {dogeAccount.address || "not connected"}</p>
      <p>Wagmi address: {wagmiAccount.address || "not connected"}</p>
 
      <button disabled={!wagmiAccount.isConnected} onClick={onSign}>
        Sign with Wagmi
      </button>
    </div>
  )
}

How Synchronization Works#

EVM connections made through the SDK become available to Wagmi hooks. Disconnecting through the SDK also disconnects Wagmi, and a restored SDK session can restore the Wagmi connection. Wait for Wagmi’s connection state before enabling Wagmi actions.

This integration applies to EVM wallets. Use useAccount().currentProvider from the SDK for Solana and Dogecoin.

Chain Configuration#

Keep Wagmi chains aligned with the EVM chains you expose through the SDK. If your SDK config includes DogeOS Chikyū Testnet, add a matching Wagmi chain.


import { defineChain } from "viem"
 
export const dogeOSChikyuTestnet = defineChain({
  id: 6281971,
  name: "DogeOS Chikyū Testnet",
  nativeCurrency: { name: "DOGE", symbol: "DOGE", decimals: 18 },
  rpcUrls: {
    default: {
      http: ["https://rpc.testnet.dogeos.com/"],
    },
  },
  blockExplorers: {
    default: {
      name: "DogeOS L2Scan",
      url: "https://dogeos-testnet.l2scan.co",
    },
  },
  testnet: true,
})

Troubleshooting#

If Wagmi hooks do not update after connecting through the SDK:

Confirm WalletConnectProvider is nested inside WagmiProvider.
Confirm Wagmi has a matching EVM chain configured.
Confirm the connected wallet is an EVM-capable wallet.
Confirm your component reads Wagmi hooks below both providers.

The SDK still works without Wagmi synchronization. In that case, use useAccount().currentProvider for direct EVM provider calls.