Embedded wallets let users connect through email, Google, X, or an external wallet without leaving your app flow. The SDK can show this experience inside the normal modal or inline with WalletConnectEmbed.

Defaults

When login is omitted, embedded wallet login is enabled with:

• email login
• external wallet login
• Google login using the DogeOS default Google client ID
• X login using the DogeOS default X client ID
• embedded wallet stage "prod-dogeos"

You still must pass your DogeOS SDK clientId to WalletConnectProvider.

Configure Login Methods

Use login.basicLogins and login.socialLogins to control which login methods appear.

import type { WalletConnectKitConfig } from "@dogeos/dogeos-sdk"
 
export const dogeConfig: WalletConnectKitConfig = {
  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 you include a social login without a clientId, the SDK falls back to DogeOS defaults. Use your own Google or X client IDs when you need origin-specific OAuth configuration.

To disable embedded wallet login, omit email/social methods and keep external wallets only:

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

When embedded login is disabled this way, walletStatus becomes "disabled".

Render Inline

WalletConnectEmbed renders the same SDK wallet flow inline instead of as an overlay. It must be inside WalletConnectProvider.

"use client"
 
import { WalletConnectEmbed, WalletConnectProvider } from "@dogeos/dogeos-sdk"
import "@dogeos/dogeos-sdk/style.css"
 
const dogeConfig = {
  clientId: "YOUR_DOGEOS_CLIENT_ID",
}
 
export function EmbeddedWalletPanel() {
  return (
    <WalletConnectProvider config={dogeConfig}>
      <section>
        <h2>Connect to DogeOS</h2>
        <WalletConnectEmbed className="wallet-embed" style={{ width: "100%", maxWidth: 448 }} />
      </section>
    </WalletConnectProvider>
  )
}

The component accepts:

The SDK gives the embed a default width of 448px. Override that with className or style if your layout needs a different size.

Track Readiness

Use useWalletConnect() for embedded wallet readiness. useEmbeddedWallet() still exists for backward compatibility, but the SDK marks it as deprecated and keeps embedded wallet state internal.

import { useWalletConnect } from "@dogeos/dogeos-sdk"
 
export function EmbeddedReadiness() {
  const { walletStatus, isWalletReady, isWalletLoading } = useWalletConnect()
 
  if (isWalletLoading) return <p>Preparing wallet...</p>
  if (walletStatus === "error") return <p>Wallet could not initialize.</p>
  if (walletStatus === "unavailable") return <p>Embedded wallet unavailable.</p>
 
  return <p>{isWalletReady ? "Wallet ready" : walletStatus}</p>
}

Theme Mode

The provider passes the configured SDK theme mode into the embedded wallet. Set theme.defaultTheme to "light" or "dark" to choose the initial mode.

const dogeConfig = {
  clientId: "YOUR_DOGEOS_CLIENT_ID",
  theme: {
    defaultTheme: "dark",
  },
}

See Configuration for color overrides.

Content Security Policy

If your app uses a strict Content Security Policy, allow the embedded wallet frame and relay endpoints.

<meta
  http-equiv="Content-Security-Policy"
  content="frame-src 'self' https://dogeos.embedded-wallet.tomo.inc; connect-src 'self' https://mydoge-wallet.tomo.inc https://social-relay.tomo.inc;"
/>

Adapt the directive to your existing policy instead of replacing it wholesale.