Docs

WelcomeScreen

Defined in thirdweb/src/react/web/ui/ConnectWallet/screens/types.ts#L32

Render custom Welcome Screen in "wide" ConnectButton 's Modal either by passing a custom React component or by passing an object with custom title, subtitle and image

type WelcomeScreen =
  | {
      img?: { height?: number; src: string; width?: number };
      subtitle?: string;
      title?: string;
    }
  | (() => React.ReactNode);

Example

Custom React component

<ConnectButton
  connectModal={{
    welcomeScreen: () => <CustomComponent />,
  }}
/>;

Custom title, subtitle and image

<ConnectButton
  connectModal={{
    welcomeScreen: {
      title: "Custom Title",
      subtitle: "Custom Subtitle",
      img: {
        src: "https://example.com/image.png",
        width: 100,
        height: 100,
      },
    },
  }}
/>;