Quick Start

Installation

npm install @dogeos/sdk

Create a Project and Retrieve clientId

Provide details of your project in the Partner Interest Form for Dogeos SDK Integration.
A clientId will be provided to you after you submit the form.
Use this clientId in your DogeosSDKProvider.

Setup Provider

Use React, Wagmi and Viem

Use a clientId obtained from the Partner Interest Form. Your application will fetch application data from our backend with clientId

import "@dogeos/sdk/styles.css"
import { getDefaultConfig, DogeosSDKProvider } from "@dogeos/sdk"
import { WagmiProvider } from "wagmi"
import { mainnet, polygon, optimism, arbitrum, base } from "wagmi/chains"
import { QueryClientProvider, QueryClient } from "@tanstack/react-query"

const config = getDefaultConfig({
  clientId: "YOUR_CLIENT_ID", // Replace with your clientId
  appName: "My DogeosSDK App",
  projectId: "YOUR_PROJECT_ID", // Note: Every dApp that relies on WalletConnect now needs to obtain a projectId from WalletConnect Cloud.
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server-side rendering (SSR)
})

const queryClient = new QueryClient()

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <DogeosSDKProvider>{/* Your App */}</DogeosSDKProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

export default App

DogeosSDK integrates multiple wallets, including MetaMask, WalletConnect, and more. Add wallets during configuration using the following example:

import { metaMaskWallet, rainbowWallet, walletConnectWallet } from "@dogeos/sdk/wallets"

const config = getDefaultConfig({
  clientId: "YOUR_CLIENT_ID", // Replace with your clientId
  appName: "My DogeosSDK App",
  projectId: "YOUR_PROJECT_ID", // Note: Every dApp relying on WalletConnect needs a projectId from WalletConnect Cloud.
  // Additional configuration options can be added here
  wallets: [
    {
      groupName: "Popular",
      wallets: [
        metaMaskWallet,
        rainbowWallet,
        walletConnectWallet, // Add other wallets if needed
      ],
    },
  ],
})

export default config

To display the modal for wallet connection, you can use the hooks provided by DogeosSDK. These hooks are based on RainbowKit’s modal system.

Example Code:

import { useConnectModal } from "@tomo-inc/tomo-evm-kit"

const ConnectButton = () => {
  const { openConnectModal } = useConnectModal()

  return <button onClick={openConnectModal}>Connect Wallet</button>
}

export default ConnectButton

Customize Theme

Same as RainbowKit: customizing the built-in themes.

const App = () => {
  return (
    <DogeosSDKProvider
      theme={darkTheme({
        accentColor: "blue",
        accentColorForeground: "white",
      })}
      {...etc}
    >
      {/* Your App */}
    </DogeosSDKProvider>
  )
}

If you want to put the wallet list before social login, you can set the property socailsFirst to false.

Wallet list configuration

Additional Reference

For more advanced usage, refer to the RainbowKit Documentation. The behavior and integration are similar, making it easy to adapt.