This guide shows you how to let users connect a wallet and how to show the connection in your UI. The examples run in client components under WalletConnectProvider.

Add a Connect Button#

Open the SDK’s wallet modal from a button. The same button connects inside the MyDoge app, where openModal() asks MyDoge instead of showing the modal.

"use client"
 
import { useWalletConnect } from "@dogeos/dogeos-sdk"
 
export function WalletButton() {
  const { isConnected, isConnecting, error, openModal, disconnect } = useWalletConnect()
 
  return (
    <div>
      <button disabled={isConnecting} onClick={isConnected ? disconnect : openModal}>
        {isConnecting ? "Connecting..." : isConnected ? "Disconnect" : "Connect wallet"}
      </button>
      {error ? <p role="alert">{error}</p> : null}
    </div>
  )
}

When a wallet is already connected, openModal() opens the account view instead.

If you want the wallet flow inside your page rather than in a modal, see Show the Wallet Inline.

Connect From Your Own Code#

If you need the connected account as a result, for example to continue a flow after connecting, use connect() from useWalletHost(). In a browser it opens the modal and resolves when a wallet connects; inside MyDoge it asks MyDoge directly.

"use client"
 
import { isWalletError, useWalletHost, WalletErrorCode } from "@dogeos/dogeos-sdk"
 
export function ConnectButton() {
  const { isNativeHost, connect } = useWalletHost()
 
  async function onClick() {
    try {
      const { address } = await connect()
      console.log("Connected", address)
    } catch (error) {
      if (isWalletError(error, WalletErrorCode.UserRejected)) return // The user cancelled.
      throw error
    }
  }
 
  return (
    <button type="button" onClick={onClick}>
      {isNativeHost ? "Connect MyDoge" : "Connect wallet"}
    </button>
  )
}

To connect a particular chain family, pass connect({ chainType: "evm" }). See useWalletHost for every option and error.

Show the Connected Account#

Read the account from useAccount():

"use client"
 
import { useAccount } from "@dogeos/dogeos-sdk"
 
export function ConnectedAccount() {
  const { address, chainType, chainId, currentWallet } = useAccount()
 
  if (!address) {
    return <p>Connect a wallet to continue.</p>
  }
 
  return (
    <p>
      {address.slice(0, 6)}...{address.slice(-4)} on {currentWallet?.info?.name ?? "wallet"} ({chainType}:{chainId})
    </p>
  )
}

Read the account again whenever you start a wallet action, because the user can switch account or network at any time. To show balances, see Read Balances and Call the Provider.

Show the Connection Status#

"use client"
 
import { useWalletConnect } from "@dogeos/dogeos-sdk"
 
export function WalletStatusBadge() {
  const { connectionStatus } = useWalletConnect()
  return <span>{connectionStatus}</span>
}

connectionStatus is "disconnected", "connecting" or "connected". Base wallet actions on it, or on isConnected, rather than on walletStatus, which only describes the embedded wallet. About Wallet Connections explains the difference.

Connect a Specific Wallet Programmatically#

If you build your own wallet picker, useWalletConnect().connect() connects a wallet object you choose:

import { ChainTypeEnum } from "@dogeos/dogeos-sdk"
 
await connect({
  wallet,
  chainType: ChainTypeEnum.EVM,
})

wallet must be a live WalletConnector, the object the SDK’s own wallet list uses. The entries returned by getConnectors() are configuration, not live connectors, so they don’t work here. If you don’t already manage live connectors, use openModal() or useWalletHost().connect() instead.

On a Phone#

When a user picks a wallet that opens your page in its own browser, such as MyDoge, the modal stays on Continue in the wallet’s name. Open tries the wallet again, and Get opens its App Store or Google Play page, or the wallet’s website. Leave the modal open so users who don’t have the app can install it and continue.