SDK Hooks & Components

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

const config = { clientId: "YOUR_CLIENT_ID" }

export function Providers({ children }: { children: React.ReactNode }) {
  return <WalletConnectProvider config={config}>{children}</WalletConnectProvider>
}

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

export function EmbeddedLogin() {
  return <WalletConnectEmbed className="wallet-embed" />
}

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

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

const { isOpenModal, isConnected, isConnecting, error, connect, disconnect, openModal, closeModal } = useWalletConnect()

interface UseWalletConnectReturn {
  isOpenModal: boolean
  isConnected: boolean
  isConnecting: boolean
  error: string
  connect: (variables: ConnectVariables) => Promise<ConnectData>
  disconnect: () => Promise<void>
  openModal: () => void
  closeModal: () => void
}

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

export function ConnectButton() {
  const { openModal, isConnected, isConnecting, disconnect, error } = useWalletConnect()

  if (isConnecting) return <button disabled>Connecting...</button>
  if (isConnected) return <button onClick={disconnect}>Disconnect</button>

  return (
    <>
      <button onClick={openModal}>Connect Wallet</button>
      {error && <p style={{ color: "red" }}>{error}</p>}
    </>
  )
}

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

const {
  address,
  balance,
  chainType,
  chainId,
  currentWallet,
  currentProvider,
  switchChain,
  signMessage,
  signInWithWallet,
} = useAccount()

interface UseAccountReturn {
  address: string
  balance?: string
  chainType?: ChainType
  chainId?: string
  currentWallet?: Connector | null
  currentProvider?: any
  switchChain: (options: SwitchChainOptions) => Promise<boolean>
  signMessage?: (params: SignMessageParams) => Promise<string | Uint8Array>
  signInWithWallet: (params?: SignInParams) => Promise<string | Uint8Array>
}

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

export function AccountInfo() {
  const { address, chainId, balance } = useAccount()

  if (!address) return <div>Not connected</div>

  return (
    <div>
      <p>
        Address: {address.slice(0, 6)}...{address.slice(-4)}
      </p>
      <p>Chain: {chainId}</p>
      <p>Balance: {balance ?? "Loading..."}</p>
    </div>
  )
}

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

export function SignButton() {
  const { signMessage } = useAccount()

  const handleSign = async () => {
    // Always check if function exists
    const signature = await signMessage?.({
      message: "Hello, DogeOS!",
      nonce: crypto.randomUUID(),
    })
    console.log("Signature:", signature)
  }

  return (
    <button onClick={handleSign} disabled={!signMessage}>
      Sign Message
    </button>
  )
}

import { useAccount } from "@dogeos/dogeos-sdk"
import { base } from "viem/chains"

export function SwitchToBase() {
  const { switchChain } = useAccount()

  const handleSwitch = async () => {
    const success = await switchChain({
      chainType: "evm",
      chainInfo: base,
    })
    if (!success) {
      console.error("Chain switch failed")
    }
  }

  return <button onClick={handleSwitch}>Switch to Base</button>
}

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

export function SendTransaction() {
  const { currentProvider, address } = useAccount()

  const handleSend = async () => {
    if (!currentProvider || !address) return

    const txHash = await currentProvider.request({
      method: "eth_sendTransaction",
      params: [
        {
          from: address,
          to: "0x...",
          value: "0x0",
          data: "0x",
        },
      ],
    })
    console.log("Transaction:", txHash)
  }

  return (
    <button onClick={handleSend} disabled={!currentProvider}>
      Send
    </button>
  )
}

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

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

interface UseEmbeddedWalletReturn {
  wallet: any | undefined
  isAvailable: boolean
  message: string | null
  connectedInfo: ConnectData | undefined
  isLoading: boolean
}

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>
      <div>Embedded wallet ready: {Boolean(wallet)}</div>
      {connectedInfo && <div>Connected: {connectedInfo.address}</div>}
    </div>
  )
}

const { signMessage } = useAccount()

// Wrong - may throw error
await signMessage({ message: "Hello" })

// Correct - use optional chaining
await signMessage?.({ message: "Hello" })

// Or explicit check
if (signMessage) {
  await signMessage({ message: "Hello" })
}

// switchChain returns boolean
const success = await switchChain({ chainType: "evm", chainInfo: base })
if (!success) handleError()

// signMessage returns string or Uint8Array
const signature = await signMessage?.({ message: "Hello" })
if (typeof signature === "string") {
  console.log("Hex signature:", signature)
} else if (signature) {
  console.log("Uint8Array signature:", signature)
}

// Good - TypeScript infers types
const { address, chainId, signMessage } = useAccount()

// Unnecessary - manual annotation not needed
const result: UseAccountReturn = useAccount()