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
| Field | Required | Purpose |
|---|---|---|
clientId | Yes | DogeOS SDK client ID from the Partner Interest Form |
connectors | No | Wallet configuration returned by getConnectors() |
chains | No | Supported chains grouped by chain type |
defaultConnectChain | No | Chain family to show first, such as "evm" |
walletConnectProjectId | No | WalletConnect Cloud project ID |
metadata | No | App metadata shown to WalletConnect-compatible wallets |
theme | No | SDK modal and embedded wallet theme |
login | No | Email, external-wallet, Google, and X login options |
embeddedWalletConfig | No | Embedded 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",
},
}