thirdwebDocs

ConnectEmbed

Defined in

A component that allows the user to connect their wallet.

it renders the same UI as the ConnectWallet component's modal - but directly on the page instead of being in a modal.

It only renders UI if either one of the following conditions are met:

  • wallet is not connected

  • wallet is connected but the user is not signed in and auth is required ( loginOptional is not set to false )

ConnectEmbed uses the useShowConnectEmbed hook internally to determine if it should be rendered or not. You can also use this hook to determine if you should render something else instead of ConnectEmbed

Example

function Example() {
  const loginOptional = false;
  const showConnectEmbed = useShowConnectEmbed(loginOptional);
 
  if (!showConnectEmbed) {
    return <div> Wallet is connected </div>;
  }
 
  return (
    <div>
      <ConnectEmbed
        auth={{
          loginOptional,
        }}
      />
    </div>
  );
}
function ConnectEmbed(props: ConnectEmbedProps): Element;

Parameters

The props for the component.

className

Class name to be added to the root element of ConnectEmbed

theme

theme for the ConnectEmbed

If a theme is set on the ThirdWebProvider component, it will be used as the default theme for all thirdweb components, else the default will be "dark"

theme can be set to either "dark" or "light" or a custom theme object.

You can also import lightTheme or darkTheme functions from @thirdweb-dev/react to use the default themes as base and overrides parts of it.

import { lightTheme } from "@thirdweb-dev/react";
const customTheme = lightTheme({
  colors: {
    modalBg: "red",
  },
});

style

CSS styles to be applied to the root element of ConnectEmbed

termsOfServiceUrl

If provided, Embed will show a Terms of Service message at the bottom with below link

privacyPolicyUrl

If provided, Embed will show a Privacy Policy message at the bottom with below link

auth

Enforce that users must sign in with their wallet using auth after connecting their wallet.

This requires the authConfig prop to be set on the ThirdWebProvider component.

The auth prop accepts an object with the following properties:

  • loginOptional - specify whether signing in is optional or not. By default it is false ( sign in is required ) if authConfig is set on ThirdWebProvider

  • onLogin - Callback to be called after user signs in with their wallet

  • onLogout - Callback to be called after user signs out

onConnect

Callback to be called on successful connection of wallet

<ConnectEmbed
  onConnect={() => {
    console.log("wallet connected");
  }}
/>;

Note that this does not include the sign in, If you want to call a callback after user connects AND signs in with their wallet, use auth.onLogin prop instead

<ConnectEmbed
  auth={{
    onLogin: () => {
      console.log("wallet connected and signed in");
    },
  }}
/>;

showThirdwebBranding

By default ConnectWallet shows "Powered by Thirdweb" branding at the bottom of the ConnectWallet Modal.

If you want to hide the branding, set this prop to false

<ConnectWallet showThirdwebBranding={false} />;

Type

let props: {
  accountAbstraction?: SmartWalletOptions;
  appMetadata?: AppMetadata;
  autoConnect?: { timeout: number } | boolean;
  chain?: Chain;
  chains?: Array<Chain>;
  className?: string;
  client: ThirdwebClient;
  header?: { title?: string; titleIcon?: string } | true;
  locale?: LocaleId;
  modalSize?: "compact" | "wide";
  onConnect?: (wallet: Wallet) => void;
  privacyPolicyUrl?: string;
  recommendedWallets?: Array<Wallet>;
  requireApproval?: boolean;
  showAllWallets?: boolean;
  showThirdwebBranding?: boolean;
  style?: React.CSSProperties;
  termsOfServiceUrl?: string;
  theme?: "dark" | "light" | Theme;
  walletConnect?: { projectId?: string };
  wallets?: Array<Wallet>;
  welcomeScreen?: WelcomeScreen;
};

Returns

let returnType: Element;