Skip to Content
On this page

This guide shows you how to use Wagmi 3 hooks such as useSignMessage, useSendTransaction and useSwitchChain with wallets connected through the DogeOS SDK. When WalletConnectProvider is inside WagmiProvider, EVM connections made through the SDK also connect Wagmi.

Install Dependencies#

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

Commit the updated lockfile and rebuild after upgrading. See Set Up the SDK for version verification.

Define the Chain#

Save the DogeOS Chikyū definition in chains.ts with viem’s defineChain, so Wagmi and the SDK use the same 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,
})

Wrap Providers#

Mount WalletConnectProvider inside WagmiProvider, with TanStack Query’s provider between them, and give both the same chain:

"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 { useConnection, useSignMessage } from "wagmi"
 
export function WagmiWalletPanel() {
  const { openModal, disconnect, isConnected } = useWalletConnect()
  const dogeAccount = useDogeAccount()
  const wagmiAccount = useConnection()
  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>
  )
}

Check the Connection#

Connect a wallet with the SDK’s modal, then check that Wagmi’s useConnection() reports the same address. Disconnecting through the SDK also disconnects Wagmi, and a restored SDK session restores the Wagmi connection. Wait for Wagmi’s connection state before you enable Wagmi actions.

Wagmi covers EVM wallets only. For Solana and Dogecoin, use useAccount().currentProvider from the SDK; see Read Balances and Call the Provider.

If Wagmi hooks don’t update after connecting, see Wagmi in Troubleshooting.