Skip to Content
SDKConfiguration

WalletConnectProvider accepts a required config prop. The public type is WalletConnectKitConfig.

import type { WalletConnectKitConfig } from "@dogeos/dogeos-sdk" const dogeConfig: WalletConnectKitConfig = { clientId: "YOUR_DOGEOS_CLIENT_ID", }

Fields

FieldRequiredPurpose
clientIdYesDogeOS SDK client ID from the Partner Interest Form
connectorsNoWallet configuration returned by getConnectors()
chainsNoSupported chains grouped by chain type
defaultConnectChainNoChain family to show first, such as "evm"
walletConnectProjectIdNoWalletConnect Cloud project ID
metadataNoApp metadata shown to WalletConnect-compatible wallets
themeNoSDK modal and embedded wallet theme
loginNoEmail, external-wallet, Google, and X login options
embeddedWalletConfigNoEmbedded wallet stage, defaults to "prod-dogeos"

The SDK has internal defaults, but production apps should explicitly provide clientId, app metadata, and the DogeOS chains they support.

Client ID

Request a clientId through the Partner Interest Form . The provider type requires it and embedded wallet initialization passes it through to the DogeOS embedded wallet service.

const dogeConfig = { clientId: "YOUR_DOGEOS_CLIENT_ID", }

Chains

The chains field is a partial map keyed by chain type.

type ChainType = "evm" | "dogecoin" | "solana" | "aptos" | "bitcoin" | "cosmos" | "ton" | "tron" | "sui"

For DogeOS apps, configure DogeOS Chikyū Testnet under evm and Dogecoin under dogecoin.

import type { Chain, WalletConnectKitConfig } from "@dogeos/dogeos-sdk" 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 Blockscout", url: "https://blockscout.testnet.dogeos.com", }, }, testnet: true, } satisfies Chain const dogecoin = { id: 1, name: "Dogecoin", nativeCurrency: { name: "DOGE", symbol: "DOGE", decimals: 8 }, rpcUrls: { default: { http: [] } }, } satisfies Chain export const dogeConfig: WalletConnectKitConfig = { clientId: "YOUR_DOGEOS_CLIENT_ID", defaultConnectChain: "evm", chains: { evm: [dogeOSChikyuTestnet], dogecoin: [dogecoin], }, }

Dynamic Chains

getChains() fetches chain data from the SDK chain API and falls back to recommended chains when the request fails.

"use client" import { useEffect, useState } from "react" import { WalletConnectProvider, getChains, type GetChainsReturnType } from "@dogeos/dogeos-sdk" export function DynamicChainProvider({ children }: { children: React.ReactNode }) { const [chains, setChains] = useState<Awaited<GetChainsReturnType>>() useEffect(() => { getChains().then(setChains) }, []) return ( <WalletConnectProvider config={{ clientId: "YOUR_DOGEOS_CLIENT_ID", chains, }} > {children} </WalletConnectProvider> ) }

For predictable DogeOS production behavior, prefer an explicit chain list unless you intentionally want the SDK service to drive supported chains.

Connectors

getConnectors() loads available wallet connector configuration through the SDK adapter layer. It includes browser injected wallets, Wallet Standard wallets, and WalletConnect-compatible wallets when available. If loading fails, it returns an empty array.

"use client" import { useEffect, useState } from "react" import { WalletConnectProvider, getConnectors, type GetConnectorsReturnType } from "@dogeos/dogeos-sdk" export function DynamicConnectorProvider({ children }: { children: React.ReactNode }) { const [connectors, setConnectors] = useState<Awaited<GetConnectorsReturnType>>() useEffect(() => { getConnectors().then(setConnectors) }, []) return ( <WalletConnectProvider config={{ clientId: "YOUR_DOGEOS_CLIENT_ID", connectors, }} > {children} </WalletConnectProvider> ) }

connectors in config are WalletConfig[]. They are not the same as the live WalletConnector object accepted by useWalletConnect().connect().

Login

When login is omitted, the SDK enables email, external wallets, Google, and X login.

const dogeConfig = { clientId: "YOUR_DOGEOS_CLIENT_ID", login: { basicLogins: ["email", "externalWallets"], socialLogins: [{ type: "google" }, { type: "x" }], }, }

To use your own OAuth client IDs:

const dogeConfig = { clientId: "YOUR_DOGEOS_CLIENT_ID", login: { basicLogins: ["email", "externalWallets"], socialLogins: [ { type: "google", clientId: "YOUR_GOOGLE_CLIENT_ID" }, { type: "x", clientId: "YOUR_X_CLIENT_ID" }, ], }, }

If login is present, missing arrays default to empty arrays. For example, login: { basicLogins: ["externalWallets"] } disables social login and email login.

WalletConnect

The SDK has a default WalletConnect project ID, but production apps should use their own WalletConnect Cloud project ID and app metadata.

const dogeConfig = { clientId: "YOUR_DOGEOS_CLIENT_ID", walletConnectProjectId: "YOUR_WALLETCONNECT_PROJECT_ID", metadata: { name: "Your App", description: "Your DogeOS application", url: "https://your-app.example", icons: ["https://your-app.example/icon.png"], }, }

metadata is merged with SDK defaults before being passed to WalletConnect.

Embedded Wallet Stage

The embedded wallet stage defaults to "prod-dogeos". Most apps should omit it.

const dogeConfig = { clientId: "YOUR_DOGEOS_CLIENT_ID", embeddedWalletConfig: { stage: "prod-dogeos", }, }

Only change this field when the DogeOS team gives you an environment-specific instruction.

Theme

The SDK delegates styling to the Tomo UI theme system. User theme colors are merged with the SDK base theme, so you can override only the tokens you need.

const dogeConfig = { clientId: "YOUR_DOGEOS_CLIENT_ID", theme: { defaultTheme: "dark", themes: { light: { colors: { primary: { DEFAULT: "#fcd436", }, }, }, dark: { colors: { primary: { DEFAULT: "#fcd436", }, background: "#0d0d0d", content1: "#161616", }, }, }, }, }

defaultTheme controls the initial light/dark mode for the SDK UI and is also passed to the embedded wallet iframe.

Style Overrides

Import the SDK stylesheet once, then use theme for supported visual changes. This keeps overrides on stable theme tokens instead of SDK internal class names.

import type { WalletConnectKitConfig } from "@dogeos/dogeos-sdk" import "@dogeos/dogeos-sdk/style.css" const dogeConfig: WalletConnectKitConfig = { clientId: "YOUR_DOGEOS_CLIENT_ID", theme: { defaultTheme: "light", themes: { light: { colors: { primary: { DEFAULT: "#fcd436", foreground: "#12122a", }, content1: "#fcfcfd", }, }, dark: { colors: { content1: "#1a1a1a", }, }, }, }, }

For embedded wallet layouts, WalletConnectEmbed also accepts wrapper-level className and style props. Keep those overrides focused on layout and spacing.

import { WalletConnectEmbed } from "@dogeos/dogeos-sdk" export function WalletPanel() { return <WalletConnectEmbed className="shadow-lg" style={{ width: "100%", maxWidth: 448 }} /> }

When your app has a dark-mode toggle, pass the current mode through theme.defaultTheme and re-render the provider when the app theme changes.

The public SDK demo shows this pattern in its GlobalWalletProvider and uses WalletConnectEmbed wrapper props on the home page .

Complete Example

import type { Chain, WalletConnectKitConfig } from "@dogeos/dogeos-sdk" 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 Blockscout", url: "https://blockscout.testnet.dogeos.com", }, }, testnet: true, } satisfies Chain const dogecoin = { id: 1, name: "Dogecoin", nativeCurrency: { name: "DOGE", symbol: "DOGE", decimals: 8 }, rpcUrls: { default: { http: [] } }, } satisfies Chain export const dogeConfig: WalletConnectKitConfig = { clientId: "YOUR_DOGEOS_CLIENT_ID", walletConnectProjectId: "YOUR_WALLETCONNECT_PROJECT_ID", defaultConnectChain: "evm", chains: { evm: [dogeOSChikyuTestnet], dogecoin: [dogecoin], }, metadata: { name: "Your App", description: "Your DogeOS application", url: "https://your-app.example", icons: ["https://your-app.example/icon.png"], }, login: { basicLogins: ["email", "externalWallets"], socialLogins: [{ type: "google" }, { type: "x" }], }, theme: { defaultTheme: "light", }, }