Skip to Content
On this page

In this tutorial we’ll build a small web app that connects a wallet on DogeOS Chikyū Testnet, shows the wallet’s address, and signs a message with it. It takes about 15 minutes.

We’ll use React with Vite, and a public sandbox client ID that DogeOS provides for trying the SDK on your own computer.

What You Need#

  • Node.js  20.19 or later.
  • pnpm . If you don’t have it, run npm install --global pnpm.
  • An email address, a Google account or an X account to sign in with.

Create the App#

First, create a new React app:

pnpm create vite@latest dogeos-first-dapp --template react-ts --no-interactive
cd dogeos-first-dapp
pnpm install

Now start it:

pnpm dev

The output should include Local: http://localhost:5173/. Open that address in your browser, and you’ll see Vite’s starter page. Leave the server running.

The sandbox client ID we’ll use works only on http://localhost:5173. If Vite printed a different port, stop the other app that’s using 5173 and run pnpm dev again.

Install the SDK#

In a second terminal, in the dogeos-first-dapp folder, install the SDK and Wagmi, which the SDK needs alongside it:

pnpm add @dogeos/dogeos-sdk@^4 wagmi

pnpm may print a box saying some build scripts were ignored. That’s fine; the app doesn’t need them.

Add the Provider#

The SDK’s provider gives every component in the app access to the wallet. Replace the contents of src/main.tsx with:

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { ChainTypeEnum, WalletConnectProvider, type Chain, type WalletConnectKitConfig } from "@dogeos/dogeos-sdk"
import "@dogeos/dogeos-sdk/style.css"
import App from "./App.tsx"
 
const dogeOSChikyuTestnet = {
  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,
} satisfies Chain
 
const dogeConfig: WalletConnectKitConfig = {
  // Public sandbox client ID. It works only on http://localhost:5173.
  clientId: "mg7xe8v7rQ0hjU9cKsy22w1ixrds0fmKAI9UlCe8RBBxvOcspnxeh9pqutM4x5zrBrKR1V7HS1G7FmHiFB45wKVM",
  defaultConnectChain: ChainTypeEnum.EVM,
  chains: { evm: [dogeOSChikyuTestnet] },
}
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <WalletConnectProvider config={dogeConfig}>
      <App />
    </WalletConnectProvider>
  </StrictMode>
)

We’ve told the SDK about one network, DogeOS Chikyū Testnet, so that’s the network our app will use.

Add a Connect Button#

Replace the contents of src/App.tsx with:

import { useWalletConnect } from "@dogeos/dogeos-sdk"
 
export default function App() {
  const { isConnected, openModal } = useWalletConnect()
 
  if (!isConnected) {
    return (
      <main>
        <h1>My first DogeOS dApp</h1>
        <button onClick={openModal}>Connect wallet</button>
      </main>
    )
  }
 
  return (
    <main>
      <h1>My first DogeOS dApp</h1>
      <p>Connected!</p>
    </main>
  )
}

Save the file and look at the browser. The page now shows My first DogeOS dApp and a Connect wallet button. It looks plain, because we haven’t styled anything.

Click Connect wallet. A window titled Log in or sign up opens, with X and Google buttons and an email field.

Connect#

Sign in with X, Google or your email address. For email, enter the code DogeOS sends you.

After a moment the window closes, and the page says Connected!

If the window shows an error about the client ID instead, check that the address bar says exactly http://localhost:5173.

Show the Address#

Now let’s show which wallet is connected. Replace src/App.tsx again:

import { useAccount, useWalletConnect } from "@dogeos/dogeos-sdk"
 
export default function App() {
  const { isConnected, openModal } = useWalletConnect()
  const { address, chainId } = useAccount()
 
  if (!isConnected) {
    return (
      <main>
        <h1>My first DogeOS dApp</h1>
        <button onClick={openModal}>Connect wallet</button>
      </main>
    )
  }
 
  return (
    <main>
      <h1>My first DogeOS dApp</h1>
      <p>Address: {address}</p>
      <p>Chain: {chainId}</p>
    </main>
  )
}

The page now shows your wallet’s address, starting with 0x, and the chain 0x5fdaf3, which is DogeOS Chikyū Testnet’s ID, 6281971, in hexadecimal.

Sign a Message and Disconnect#

Finally, let’s ask the wallet to sign something, and add a way to disconnect. Replace src/App.tsx one last time:

import { useState } from "react"
import { useAccount, useWalletConnect } from "@dogeos/dogeos-sdk"
 
export default function App() {
  const { isConnected, openModal, disconnect } = useWalletConnect()
  const { address, chainId, signMessage } = useAccount()
  const [signature, setSignature] = useState("")
 
  async function sign() {
    if (!signMessage) return
    const result = await signMessage({ message: "Hello from my first DogeOS dApp" })
    setSignature(String(result))
  }
 
  if (!isConnected) {
    return (
      <main>
        <h1>My first DogeOS dApp</h1>
        <button onClick={openModal}>Connect wallet</button>
      </main>
    )
  }
 
  return (
    <main>
      <h1>My first DogeOS dApp</h1>
      <p>Address: {address}</p>
      <p>Chain: {chainId}</p>
      <button onClick={sign}>Sign a message</button>
      {signature && <p>Signature: {signature.slice(0, 20)}…</p>}
      <button onClick={disconnect}>Disconnect</button>
    </main>
  )
}

Click Sign a message. The wallet asks you to approve the message “Hello from my first DogeOS dApp”. Approve it.

After a moment, the page shows the start of the signature, a long string starting with 0x. That signature proves the message came from your address.

Now click Disconnect. The page goes back to the Connect wallet button. Connect again with the same sign-in method, and you get the same address as before.

What You’ve Built#

You have built a dApp that connects a wallet on DogeOS Chikyū Testnet, reads its account, and asks it to sign a message, in two small files.

From here: