Documentation
Installation

Installation

Obvious Embed comes with sensible defaults out of the box ready to interact with your dApp.

Setup

To use the Embedded Wallet, you have to install @itsobvioustech/embed and its peer dependencies.

npm i @itsobvioustech/embed wagmi@2.x viem@2.x @tanstack/react-query@5.x

Keys

To use the Obvious Embed Wallet, you need to get a key from us. Contact us on Discord or Telegram to get your key.

Add Imports

Import EmbedKit and Wagmi and TanStack Query in your project.

import "@itsobvioustech/embed/style.css" 
 
import { ObviousEmbedProvider, EmbedAccountButton } from "@itsobvioustech/embed"
import { embedInjected } from "@itsobvioustech/connectors/injected"
import { embedWalletConnect } from "@itsobvioustech/connectors/walletconnect"
 
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { http, WagmiProvider, createConfig, useAccount } from "wagmi"
import { mainnet, base } from "wagmi/chains"

Configure Wagmi

Create wagmi config with the supported chains, transports, and connectors.

Get the projectId from the WalletConnect Cloud

const config = createConfig({
  chains: [mainnet, base],
  transports: {
    [mainnet.id]: http(),
    [base.id]: http(),
  },
  connectors: [
    ...embedInjected(), 
    embedWalletConnect({ projectId: "PROJECT_ID" }),
  ],
  multiInjectedProviderDiscovery: false, 
})

Wrap Providers

const queryClient = new QueryClient() 
 
export default function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <ObviousEmbedProvider
          embedKey="YOUR_OBVIOUS_EMBED_WALLET_KEY" 
          settings={{ theme: "light" }}
        >
          {/* Your dApp starts here */}
        </ObviousEmbedProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Use Wallet

You can add our Wallet button to your dApp or create a custom interface by depending on the useAccount hook.

export default function DApp() {
  return (
    <header>
      <EmbedAccountButton />
    </header>
  )
}

or

import { useAccount } from "wagmi"
import { useObviousWallet } from "@itsobvioustech/embed"
 
export default function DApp() {
  const { address } = useAccount()
  const { open } = useObviousWallet()
  return (
    <header>
      <button onClick={open}>
        {address ? address : "Connect Account"}
      </button>
    </header>
  )
}

Setup Build Tools

Next.js

next.config.ts
const nextConfig = {
  transpilePackages: ["@itsobvioustech/embed"],
}
 
export default nextConfig

RSC - Next App Router

For frameworks that support React Server Components, add "use client" to the top of the file that contains Providers.

Providers.tsx
"use client"
 
// ...
 
export default function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <ObviousEmbedProvider
          embedKey="YOUR_OBVIOUS_EMBED_WALLET_KEY" 
          settings={{ theme: "light" }}
        >
          {/* Your dApp starts here */}
        </ObviousEmbedProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Vite

Add vite-plugin-node-polyfills Vite plugin to polyfill Node.js core libraries like Buffer, util, and process.

vite.config.ts
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react-swc"
import { nodePolyfills } from "vite-plugin-node-polyfills"
 
export default defineConfig({
  clearScreen: true,
  plugins: [
    nodePolyfills({
      include: ["buffer", "util", "process"],
      globals: { Buffer: true, global: true, process: true },
    }),
    react(),
  ],
})

Remix

remix.config.js
export default {
  // ...
  browserNodeBuiltinsPolyfill: {
    modules: ["buffer", "util", "process", "events", "http"],
  },
  globals: { Buffer: true, process: true, global: true, events: true, http: true },
};

Others

For Bundlers that dont provider Node polyfills, we will to manually add like Buffer, util, and process.

IntroductionObvious Embed Provider