Embedded Wallets

Embedded wallets render the connection flow inline on your page. It uses the same SDK state and connectors as the modal, but avoids an overlay, so you can keep users in the flow of your UI.

Embedded: onboarding pages, custom layouts, multi-step flows.
Modal: quick connect buttons and lightweight flows.

Required Setup

Make sure your app is wrapped with WalletConnectProvider and includes a valid clientId.

import { WalletConnectProvider, WalletConnectEmbed } from "@dogeos/dogeos-sdk"
import "@dogeos/dogeos-sdk/style.css"

const config = { clientId: "YOUR_CLIENT_ID" }

export function EmbeddedLogin() {
  return (
    <WalletConnectProvider config={config}>
      <section className="wallet-shell">
        <h2>Connect to DogeOS</h2>
        <WalletConnectEmbed className="wallet-embed" />
      </section>
    </WalletConnectProvider>
  )
}

Embedded State

Use useEmbeddedWallet to show loading, availability, or status messaging around the inline UI.

import { useEmbeddedWallet } from "@dogeos/dogeos-sdk"

export function EmbeddedStatus() {
  const { wallet, isAvailable, message, connectedInfo, isLoading } = useEmbeddedWallet()

  if (isLoading) return <div>Loading embedded wallet...</div>
  if (!isAvailable) return <div>Unavailable: {message}</div>

  return <div>Embedded wallet ready: {Boolean(wallet)}</div>
}

Styling and Layout

WalletConnectEmbed accepts className and style.
Give the container a visible width/height to avoid the embed collapsing.

Advanced: Force a Specific Screen

view lets you render a specific screen from the flow. This is optional and best used for tailored onboarding experiences.

import { WalletConnectEmbed, ModalView } from "@dogeos/dogeos-sdk"

export function EmbeddedWalletList() {
  return <WalletConnectEmbed view={ModalView.WalletList} />
}

Embedded Views Reference

View	Purpose
`Loading`	Initial loading state
`Logged`	Post-login landing
`WalletList`	Wallet selection list
`WalletSearch`	Wallet search UI
`WalletSelectProviders`	Provider selection for a wallet
`WalletInstallGuide`	Install instructions
`Connecting`	Connection in progress
`Error`	Error state
`Account`	Connected account view
`SelectChains`	Chain selection list
`ChangeNetwork`	Network switch prompt
`SignInWallet`	Sign-in with wallet flow
`WalletConnect`	WalletConnect QR/session view
`UnsupportChain`	Unsupported network state
`SocialLogin`	Generic social login
`MyDogeSocialLogin`	MyDoge social login

EVM Provider Access

Embedded flow uses the same account state as the modal. For EVM RPC methods, use currentProvider from useAccount.

import { useAccount } from "@dogeos/dogeos-sdk"

export function GetChainIdButton() {
  const { currentProvider } = useAccount()

  const getChainId = async () => {
    if (!currentProvider) return
    const chainId = await currentProvider.request({ method: "eth_chainId" })
    console.log("Chain ID:", chainId)
  }

  return <button onClick={getChainId}>Get Chain ID</button>
}

Troubleshooting

Blank embed: ensure WalletConnectProvider is mounted and clientId is set.
No wallets listed: confirm your configuration includes supported chains and connectors.
Unexpected view: remove the view prop to let the SDK drive the flow.