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

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

const embeddedWalletConfig = embeddedWallet();

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>;

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.

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

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

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

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>;
}

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

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

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

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

// google sign-in
type GoogleAuthParams = {
  strategy: "google";
  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";
};