Embed Account Button

This is the main component responsible for rendering the Mini Account UI.

To open the Account you can use our inbuilt component or build your own button with the help of hooks.

import { EmbedAccountButton } from '@itsobvioustech/embed';
 
// Ideally in your Header or any place you want users to access the account
export const YourDapp = () => {
  return <EmbedAccountButton />;
};

You can customize the label to read as Connect Account / Connect Wallet / Login

Props

label

string

Default: Sign In

Use the label prop to set a custom text. Eg: Connect Wallet, Login, etc.

Customizing the Button

You can create you own interface for the button and trigger the modal.

MyButton.tsx

import { useAccount } from "wagmi";
import { useObviousWallet } from '@itsobvioustech/embed';
 
// Make sure that this component is wrapped with ObviousEmbedProvider
const MyButton = () => {
  const { open, close } = useObviousWallet();
  const { address, isConnecting, isDisconnected } = useAccount();
 
  if (isConnecting) return <div>Connecting...</div>;
  if (isDisconnected) return <div>Disconnected</div>;
  return <button onClick={() => open()}>{address}</button>;
};

Obvious Embed Provider useObviousWallet