Documentation
Introduction

Embed Wallet

Obvious Embed is a powerful React component library to embed any account in your dapp. Built on top of wagmi and viem, it provides an intuitive, responsive and customizable interface for interacting with web3 accounts.

⚡️

Obvious Embed is currently in [Beta]. Configurations might change

Features

Some of the key features include:

  • Responsive Design: is designed to work on all devices and screen sizes.
  • Customizable: can customize the look and feel to match your dapp’s branding.
  • Intuitive UX: provides an intuitive user experience for interacting with the UI.
  • Smart Accounts: supports smart accounts like Biconomy, Alchemy, etc out of the box.
  • Custom Chains: supports custom chains and other L2s.
  • Web3 Standard: is built on top of wagmi, viem and permissionless which are now ecosystem standard packages for building dApps.
  • Additional Hooks: provides a collection of hooks to interact with smart contracts and manage Tokens, NFTs, Transactions.
  • EIP-6963, Support for Multiple Wallets: supports multiple wallets types including Metamask, WalletConnect, Social and custom local wallets.

Packages

Obvious Embed Kit has several packages that you can use to build your dapp:

@itsobvioustech/embed - is the complete package that embeds a wallet interface inside your dapp, exposing collection of hooks to manage Tokens, NFTs and Transactions along with Sign In / Connect Wallet Buttons

@itsobvioustech/accounts - adds support for Smart accounts (Biconomy, Alchemy, etc.) along with options to customize bundlers and paymasters using permissionless package

@itsobvioustech/connectors - has custom connectors for wagmi to support all custom signers / wallet clients (Privy, Web3Auth etc.)

@itsobvioustech/ui - coming soon UI package that provides the ready to use responsive web3 components across your dApp.

Get a Demo

If you’re planning to use EmbedKit for your project, we’d love to hear from you. Reach out for Integrations: Discord or Telegram

Community & Support

XDiscordDiscordTelegramGitHubGithub

Quickstart

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

Just wrap your dapp with ObviousEmbedProvider and add the WalletButton, you are good to go.

index.tsx
// Wagmi and React Query Imports
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { http, WagmiProvider, createConfig, useAccount } from "wagmi"
import { mainnet, base } from "wagmi/chains"
 
// EmbedKit Imports
import "@itsobvioustech/embed/style.css" // Import the default styles
import { ObviousEmbedProvider, EmbedAccountButton } from "@itsobvioustech/embed"
import { embedInjected } from "@itsobvioustech/connectors/injected"
import { embedWalletConnect } from "@itsobvioustech/connectors/walletconnect"
 
const wagmiConfig = createConfig({
  chains: [mainnet, base], // Chains you want to support
  transports: {
    // HTTP Transport for each supported chain
    [mainnet.id]: http(),
    [base.id]: http(),
  },
  connectors: [
    // custom wagmi connectors to support AA4337 based smart wallets
    ...embedInjected(), // Injected Browser Wallets (Metamask, etc.)
    // Get PROJECT_ID from https://cloud.walletconnect.com/sign-in
    embedWalletConnect({ projectId: "PROJECT_ID" }), // Mobile Wallets
  ],
  // Disable the default mipd of wagmi
  multiInjectedProviderDiscovery: false, 
})
 
const queryClient = new QueryClient() 
 
export default function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <ObviousEmbedProvider
          // Contact us for generating a key 
          embedKey="YOUR_OBVIOUS_EMBED_WALLET_KEY" 
          settings={{ theme: "light" }}
        >
          {/* Place this somewhere in you header or where you want users to login */}
          <EmbedAccountButton />
 
          {/* Your dapp Code */}
        </ObviousEmbedProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}
Installation