Skip to Content
SDKWagmi 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 wagmi viem @tanstack/react-query

Wrap Providers

Mount WalletConnectProvider inside WagmiProvider. Wagmi also needs TanStack Query.

"use client"
 
import type { ReactNode } from "react"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { WalletConnectProvider } from "@dogeos/dogeos-sdk"
import "@dogeos/dogeos-sdk/style.css"
import { createConfig, http, WagmiProvider } from "wagmi"
import { mainnet } from "wagmi/chains"
 
const queryClient = new QueryClient()
 
const wagmiConfig = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
})
 
const dogeConfig = {
  clientId: "YOUR_DOGEOS_CLIENT_ID",
}
 
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

  • The SDK reads Wagmi config with Wagmi’s useConfig().
  • When SDK wallet data is loaded, EVM wallet connectors are converted into Wagmi-compatible connectors.
  • The SDK merges converted connectors with connectors already present in your Wagmi config.
  • When a user connects an EVM wallet through the SDK, the matching Wagmi connector is connected as well.
  • When the SDK disconnects, it calls Wagmi disconnect when available.
  • Restored SDK wallet state can also restore Wagmi connection in the background.

This integration only applies to EVM wallets. Dogecoin provider access remains available through the SDK useAccount().currentProvider.

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"
import { createConfig, http } from "wagmi"
 
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 Blockscout",
      url: "https://blockscout.testnet.dogeos.com",
    },
  },
  testnet: true,
})
 
export const wagmiConfig = createConfig({
  chains: [dogeOSChikyuTestnet],
  transports: {
    [dogeOSChikyuTestnet.id]: http(),
  },
})

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.

Embedded WalletsTroubleshooting