embeddedWallet

A wallet configurator for Embedded Wallet which allows integrating the wallet with React

import { embeddedWallet } from "@thirdweb-dev/react";

const embeddedWalletConfig = embeddedWallet();

customize (optional)

embeddedWalletConfig contains the default config for metadata and UI. you can optionally choose to override the defaults to customize the wallet. Learn more about these configs

const embeddedWalletConfig = embeddedWallet({ ... });

// override metadata
embeddedWalletConfig.meta.name = "..."; // change the name
embeddedWalletConfig.meta.iconURL = "..."; // change the icon
embeddedWalletConfig.meta.urls = {
  // change urls to download the wallet on various platforms
  android: "https://...",
  ios: "https://...",
  chrome: "https://...",
  firefox: "https://...",
};

// override connection UI
embeddedWalletConfig.connectUI = embeddedWalletConnectUI; // react component

// custom selection UI
embeddedWalletConfig.selectUI = embeddedWalletSelectUI; // react component

Once the config is ready, you can use it with ConnectWallet component or useConnect hook as shown below

// add to ThirdwebProvider to add it in ConnectWallet's modal
<ThirdwebProvider supportedWallets={[embeddedWalletConfig]} clientId="your-client-id"/>;

// or use it with useConnect hook
const connect = useConnect();
connect(embeddedWalletConfig, { ... });

authentication options (optional)

Customize what authentication options to show to your users in the ConnectWallet Modal.

By default, email, Google, Apple and Facebook sign in options are shown.

embeddedWallet({
  auth: {
    options: ["email", "google", "apple", "facebook"],
  },
});

recommended (optional)

Show this wallet as "recommended" in the ConnectWallet Modal.

embeddedWallet({
  recommended: true,
});

Usage with ConnectWallet

To allow users to connect to this wallet using the ConnectWallet component, you can add it to ThirdwebProvider's supportedWallets prop.

<ThirdwebProvider
  clientId="your-client-id"
  supportedWallets={[embeddedWallet()]}
>
  <YourApp />
</ThirdwebProvider>

Usage with useEmbeddedWallet

You can use the useEmbeddedWallet hook to programmatically connect to the wallet without using the ConnectWallet component.

The wallet also needs to be added in ThirdwebProvider's supportedWallets if you want the wallet to auto-connect on next page load.

The hook will return all the necessary functions you'll need to authenticate and connect to the embedded wallet.

Connecting with Google sign in:

Note that if you want to sign in with Apple or Facebook, you can pass in strategy: "apple" or strategy: "facebook" instead.

function App() {
  const { connect } = useEmbeddedWallet();

  const handleConnect = async () => {
    await connect({
      strategy: "google",
    });
  };

  return <div> ... </div>;
}

Connecting with email verification:

function App() {
  const { connect, sendVerificationEmail } = useEmbeddedWallet();

  const preLogin = async (email: string) => {
    // send email verification code
    await sendVerificationEmail({ email });
  };

  const handleLogin = async (email: string, verificationCode: string) => {
    // verify email and connect
    await connect({
      strategy: "email_verification",
      email,
      verificationCode,
    });
  };

  return <div> ... </div>;
}

Connecting with iframe:

function App() {
  const { connect } = useEmbeddedWallet();

  const handleConnect = async () => {
    await connect({
      strategy: "iframe",
    });
  };

  return <div> ... </div>;
}

Available connection strategies

// email verification
type EmailVerificationAuthParams = {
  strategy: "email_verification";
  email: string;
  verificationCode: string;
  recoveryCode?: string;
};

export type EmbeddedWalletOauthStrategy = "google" | "apple" | "facebook";

type OauthAuthParams = {
  strategy: EmbeddedWalletOauthStrategy;
  openedWindow?: Window;
  closeOpenedWindow?: (window: Window) => void;
};

// bring your own authentication
type JwtAuthParams = {
  strategy: "jwt";
  jwt: string;
  encryptionKey?: string;
};

// open iframe to send and input the verification code only
type IframeOtpAuthParams = {
  strategy: "iframe_email_verification";
  email: string;
};

// open iframe to enter email and verification code
type IframeAuthParams = {
  strategy: "iframe";
};

chainId (optional)

If chainId is provided, wallet will be connected to network with given chainId, else wallet will be connected to the activeChain by default.