From e882c090f10df6b04f0a430e30a7a2eba3e3e09e Mon Sep 17 00:00:00 2001
From: Manan Tank <manantankm@gmail.com>
Date: Thu, 18 Sep 2025 00:52:21 +0530
Subject: [PATCH] [BLD-286] SDK: add stable classNames to elements in Connect
 UI

---
 .changeset/nice-owls-double.md                |   5 +
 packages/thirdweb/.storybook/global.css       |   5 +
 .../web/ui/Bridge/swap-widget/swap-ui.tsx     |   1 +
 .../web/ui/ConnectWallet/ConnectButton.tsx    |  14 ++
 .../react/web/ui/ConnectWallet/Details.tsx    |  12 +-
 .../ui/ConnectWallet/Modal/AllWalletsUI.tsx   |   8 +-
 .../ui/ConnectWallet/Modal/ConnectEmbed.tsx   |  20 ++-
 .../ui/ConnectWallet/Modal/ConnectModal.tsx   |   1 +
 .../web/ui/ConnectWallet/NetworkSelector.tsx  |   4 +-
 .../ui/ConnectWallet/WalletEntryButton.tsx    |   2 +
 .../web/ui/ConnectWallet/WalletSelector.tsx   |  42 +++---
 .../ui/ConnectWallet/WalletTypeRowButton.tsx  |   2 +
 .../ui/ConnectWallet/screens/ReceiveFunds.tsx |   7 +-
 .../ConnectWallet/screens/SendFunds.test.tsx  |   4 +-
 .../ui/ConnectWallet/screens/SendFunds.tsx    |  23 +++-
 .../ConnectWallet/screens/SignatureScreen.tsx |  16 ++-
 .../ConnectWallet/screens/TokenSelector.tsx   |   2 +
 .../ui/TransactionButton/TransactionModal.tsx |   1 +
 .../src/react/web/ui/components/Modal.tsx     |   3 +
 .../src/react/web/ui/components/OTPInput.tsx  |   2 +-
 .../src/react/web/ui/components/Spinner.tsx   |   1 +
 .../src/react/web/ui/components/basic.tsx     |   5 +
 .../react/web/ui/components/modalElements.tsx |   1 +
 packages/thirdweb/src/react/web/utils/cls.ts  |  13 ++
 .../web/wallets/in-app/InputSelectionUI.tsx   |   2 +
 .../shared/ConnectWalletSocialOptions.tsx     |   9 ++
 .../web/wallets/shared/ConnectingScreen.tsx   |  25 +++-
 .../react/web/wallets/shared/GuestLogin.tsx   |   7 +-
 .../react/web/wallets/shared/OTPLoginUI.tsx   |  41 +++++-
 .../react/web/wallets/shared/ScanScreen.tsx   |  25 +++-
 .../react/web/wallets/shared/SocialLogin.tsx  |   7 +-
 .../src/stories/ConnectEmbed.stories.tsx      | 128 ++++++++++++++++++
 32 files changed, 384 insertions(+), 54 deletions(-)
 create mode 100644 .changeset/nice-owls-double.md
 create mode 100644 packages/thirdweb/src/react/web/utils/cls.ts
 create mode 100644 packages/thirdweb/src/stories/ConnectEmbed.stories.tsx

diff --git a/.changeset/nice-owls-double.md b/.changeset/nice-owls-double.md
new file mode 100644
index 00000000000..0ac64f7adeb
--- /dev/null
+++ b/.changeset/nice-owls-double.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Add `tw-` class names in connect ui
diff --git a/packages/thirdweb/.storybook/global.css b/packages/thirdweb/.storybook/global.css
index ab50d79fffc..3bf8057c9ad 100644
--- a/packages/thirdweb/.storybook/global.css
+++ b/packages/thirdweb/.storybook/global.css
@@ -10,3 +10,8 @@ body {
   font-optical-sizing: auto;
   font-variation-settings: "slnt" 0;
 }
+
+/* Use this to debug the elements having tw- classes */
+/* [class*="tw-"] {
+  outline: 1px dotted yellow !important;
+} */
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx
index 8212e230a74..9cf75e982b5 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx
@@ -197,6 +197,7 @@ export function SwapUI(props: SwapUIProps) {
   return (
     <Container p="md">
       <Modal
+        className="tw-modal__swap-widget"
         size="compact"
         title="Select Token"
         open={!!modalState}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx
index 87788ad3dcf..f71d7066844 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx
@@ -161,6 +161,19 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
  *
  * [View all available themes properties](https://portal.thirdweb.com/references/typescript/v5/Theme)
  *
+ * ### Overriding styles using class names
+ *
+ * Some elements in this component have classes with a `tw-` prefix.
+ * You can target these classes in your own CSS stylesheet to override their styles.
+ *
+ * In some cases, you may need to use the `!important` flag for the override to take effect. Do not use on auto-generated class names, as they may change between builds.
+ *
+ * ```css
+ * .tw-back-button {
+ *   background-color: red !important;
+ * }
+ * ```
+ *
  * ### Changing the display language
  *
  * ```tsx
@@ -543,6 +556,7 @@ function ConnectButtonInner(
             )}
           </Button>
           <Modal
+            className="tw-modal__sign-in"
             title="Sign in"
             open={showSignatureModal}
             setOpen={setShowSignatureModal}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
index 40645a4d213..66ae3b42ae7 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
@@ -572,6 +572,7 @@ export function DetailsModal(props: {
           <Container px="lg">
             {/* Send, Receive, Swap */}
             <Container
+              className="tw-highlight-buttons"
               style={{
                 display: "flex",
                 gap: spacing.xs,
@@ -579,6 +580,7 @@ export function DetailsModal(props: {
             >
               {!hideSendFunds && (
                 <Button
+                  className="tw-highlight-button__send"
                   onClick={() => {
                     setScreen("send");
                   }}
@@ -608,6 +610,7 @@ export function DetailsModal(props: {
 
               {!hideReceiveFunds && (
                 <Button
+                  className="tw-highlight-button__receive"
                   onClick={() => {
                     setScreen("receive");
                   }}
@@ -632,6 +635,7 @@ export function DetailsModal(props: {
                 chainMetadataQuery.data &&
                 !chainMetadataQuery.data.testnet && (
                   <Button
+                    className="tw-highlight-button__buy"
                     onClick={() => {
                       trackPayEvent({
                         client: client,
@@ -682,6 +686,7 @@ export function DetailsModal(props: {
 
           {/* Transactions */}
           <MenuButton
+            className="tw-view-transactions-button"
             onClick={() => {
               setScreen("transactions");
             }}
@@ -699,6 +704,7 @@ export function DetailsModal(props: {
           {/* Hide the View Funds button if the assetTabs props is set to an empty array */}
           {(props.assetTabs === undefined || props.assetTabs.length > 0) && (
             <MenuButton
+              className="tw-view-assets-button"
               onClick={() => {
                 setScreen("view-assets");
               }}
@@ -713,6 +719,7 @@ export function DetailsModal(props: {
 
           {/* Manage Wallet */}
           <MenuButton
+            className="tw-manage-wallet-button"
             onClick={() => {
               setScreen("manage-wallet");
             }}
@@ -729,6 +736,7 @@ export function DetailsModal(props: {
             (chainFaucetsQuery.faucets.length > 0 ||
               walletChain?.id === LocalhostChainId) && (
               <MenuLink
+                className="tw-request-testnet-funds-button"
                 as="a"
                 href={
                   chainFaucetsQuery.faucets ? chainFaucetsQuery.faucets[0] : "#"
@@ -759,6 +767,7 @@ export function DetailsModal(props: {
           <Spacer y="sm" />
           <Container px="md">
             <MenuButton
+              className="tw-disconnect-wallet-button"
               data-variant="danger"
               onClick={() => {
                 if (activeWallet && activeAccount) {
@@ -1000,6 +1009,7 @@ export function DetailsModal(props: {
       <WalletUIStatesProvider isOpen={false} theme={props.theme}>
         <ScreenSetupContext.Provider value={screenSetup}>
           <Modal
+            className="tw-modal__wallet-details"
             title="Manage Wallet"
             open={isOpen}
             setOpen={(_open) => {
@@ -1043,7 +1053,7 @@ export function NetworkSwitcherButton(props: {
   }
   return (
     <MenuButton
-      className="tw-internal-network-switcher-button"
+      className="tw-internal-network-switcher-button tw-switch-network-button"
       data-variant="primary"
       disabled={disableSwitchChain}
       onClick={() => {
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx
index 7e7b7e86bfc..215219bc2e8 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx
@@ -69,7 +69,12 @@ function AllWalletsUI(props: {
   }, [searchResults, itemsToShow]);
 
   return (
-    <Container animate="fadein" flex="column" fullHeight>
+    <Container
+      animate="fadein"
+      flex="column"
+      fullHeight
+      className="tw-all-wallets-screen"
+    >
       <Container p="lg">
         <ModalHeader onBack={props.onBack} title="Select Wallet" />
       </Container>
@@ -140,6 +145,7 @@ function AllWalletsUI(props: {
                     }}
                   >
                     <WalletEntryButton
+                      className="tw-select-wallet-button"
                       badge={undefined}
                       client={props.client}
                       connectLocale={props.connectLocale}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
index 2b4d64c6ed1..ddffd23ea0e 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
@@ -22,6 +22,7 @@ import { useIsAutoConnecting } from "../../../../core/hooks/wallets/useIsAutoCon
 import { useConnectionManager } from "../../../../core/providers/connection-manager.js";
 import { WalletUIStatesProvider } from "../../../providers/wallet-ui-states-provider.js";
 import { canFitWideModal } from "../../../utils/canFitWideModal.js";
+import { cls } from "../../../utils/cls.js";
 import { usePreloadWalletProviders } from "../../../utils/usePreloadWalletProviders.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { AutoConnect } from "../../AutoConnect/AutoConnect.js";
@@ -161,6 +162,19 @@ import { useSetupScreen } from "./screen.js";
  *
  * [View all available themes properties](https://portal.thirdweb.com/references/typescript/v5/Theme)
  *
+ * ### Overriding styles using class names
+ *
+ * Some elements in this component have classes with a `tw-` prefix.
+ * You can target these classes in your own CSS stylesheet to override their styles.
+ *
+ * In some cases, you may need to use the `!important` flag for the override to take effect. Do not use on auto-generated class names, as they may change between builds.
+ *
+ * ```css
+ * .tw-back-button {
+ *   background-color: red !important;
+ * }
+ * ```
+ *
  * ### Changing the display language
  *
  * ```tsx
@@ -266,7 +280,11 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
         <>
           {autoConnectComp}
           <CustomThemeProvider theme={props.theme}>
-            <EmbedContainer modalSize={modalSize}>
+            <EmbedContainer
+              modalSize={modalSize}
+              className={cls("tw-widget-loading", props.className)}
+              style={props.style}
+            >
               <LoadingScreen />
             </EmbedContainer>
           </CustomThemeProvider>
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx
index cd9a5568f45..d6175f1c24b 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx
@@ -118,6 +118,7 @@ const ConnectModal = (props: ConnectModalOptions) => {
 
   return (
     <Modal
+      className="tw-modal__connect-wallet"
       title="Connect Wallet"
       hide={hideModal}
       open={isWalletModalOpen}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx
index a0554a2fce7..d755cbe09f3 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx
@@ -146,6 +146,7 @@ type NetworkSelectorContentProps = {
   showTabs?: boolean;
   connectLocale: ConnectLocale;
   client: ThirdwebClient;
+  className?: string;
 };
 
 /**
@@ -364,7 +365,7 @@ export function NetworkSelectorContent(props: NetworkSelectorContentProps) {
   );
 
   return (
-    <Container>
+    <Container className={props.className}>
       <Container p="lg">
         {props.onBack ? (
           <ModalHeader onBack={props.onBack} title={locale.title} />
@@ -954,6 +955,7 @@ export function useNetworkSwitcherModal() {
       setRootEl(
         <CustomThemeProvider theme={props.theme}>
           <Modal
+            className="tw-modal__switch-network"
             title="Switch Network"
             open={true}
             setOpen={(value) => {
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx
index 1a057c45a4b..fb0f4c02e63 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx
@@ -23,6 +23,7 @@ import type { ConnectLocale } from "./locale/types.js";
  * @internal
  */
 export function WalletEntryButton(props: {
+  className?: string;
   wallet: Wallet;
   selectWallet: () => void;
   connectLocale: ConnectLocale;
@@ -56,6 +57,7 @@ export function WalletEntryButton(props: {
 
   return (
     <WalletButtonEl
+      className={props.className}
       data-active={props.isActive}
       onClick={selectWallet}
       type="button"
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx
index 2fc370a6611..4bd732de3e2 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { ChevronLeftIcon } from "@radix-ui/react-icons";
-import { lazy, Suspense, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { InjectedSupportedWalletIds } from "../../../../wallets/__generated__/wallet-ids.js";
@@ -18,7 +18,7 @@ import {
 } from "../../../core/design-system/index.js";
 import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
 import { sortWallets } from "../../utils/sortWallets.js";
-import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
+import InAppWalletSelectionUI from "../../wallets/in-app/InAppWalletSelectionUI.js";
 import {
   Container,
   Line,
@@ -43,10 +43,6 @@ import { PoweredByThirdweb } from "./PoweredByTW.js";
 import { WalletButtonEl, WalletEntryButton } from "./WalletEntryButton.js";
 import { WalletTypeRowButton } from "./WalletTypeRowButton.js";
 
-const InAppWalletSelectionUI = /* @__PURE__ */ lazy(
-  () => import("../../wallets/in-app/InAppWalletSelectionUI.js"),
-);
-
 // const localWalletId = "local";
 const inAppWalletId: WalletId = "inApp";
 
@@ -202,7 +198,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
       title={props.modalHeader.title}
     />
   ) : (
-    <Container center="y" flex="row" gap="xxs">
+    <Container center="y" flex="row" gap="xs" className="tw-header">
       {!props.meta.titleIconUrl ? null : (
         <Img
           client={props.client}
@@ -222,6 +218,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
 
   const connectAWallet = (
     <WalletTypeRowButton
+      className="tw-select-connect-a-wallet-button"
       client={props.client}
       disabled={props.meta.requireApproval && !approvedTOS}
       icon={OutlineWalletIcon}
@@ -234,6 +231,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
 
   const newToWallets = (
     <Container
+      className="tw-get-started-container"
       flex="row"
       style={{
         justifyContent: "space-between",
@@ -489,6 +487,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
   return (
     <Container
       animate="fadein"
+      className="tw-wallet-selection"
       flex="column"
       fullHeight
       scrollY
@@ -620,22 +619,21 @@ const WalletSelection: React.FC<{
             // data-full-width={!!walletConfig.selectUI}
           >
             {wallet.id === "inApp" && props.size === "compact" ? (
-              <Suspense fallback={<LoadingScreen height="195px" />}>
-                <InAppWalletSelectionUI
-                  chain={props.chain}
-                  client={props.client}
-                  connectLocale={props.connectLocale}
-                  disabled={props.disabled}
-                  done={() => props.done(wallet)}
-                  goBack={props.goBack}
-                  recommendedWallets={props.recommendedWallets}
-                  select={() => props.selectWallet(wallet)}
-                  size={props.size}
-                  wallet={wallet as Wallet<"inApp">}
-                />
-              </Suspense>
+              <InAppWalletSelectionUI
+                chain={props.chain}
+                client={props.client}
+                connectLocale={props.connectLocale}
+                disabled={props.disabled}
+                done={() => props.done(wallet)}
+                goBack={props.goBack}
+                recommendedWallets={props.recommendedWallets}
+                select={() => props.selectWallet(wallet)}
+                size={props.size}
+                wallet={wallet as Wallet<"inApp">}
+              />
             ) : (
               <WalletEntryButton
+                className="tw-wallet-select-wallet-button"
                 badge={undefined}
                 client={props.client}
                 connectLocale={props.connectLocale}
@@ -655,7 +653,7 @@ const WalletSelection: React.FC<{
       })}
 
       {props.onShowAll && props.showAllWallets !== false && (
-        <ButtonContainer>
+        <ButtonContainer className="tw-show-all-wallets-button">
           <WalletButtonEl onClick={props.onShowAll}>
             <ShowAllWalletsIcon>
               <div data-dot />
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx
index fe1cc9b0e2c..6e3aa8251c5 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx
@@ -11,12 +11,14 @@ type WalletTypeRowProps = {
   title: string;
   icon: IconFC;
   disabled?: boolean;
+  className?: string;
 };
 
 export function WalletTypeRowButton(props: WalletTypeRowProps) {
   return (
     <Button
       disabled={props.disabled}
+      className={props.className}
       fullWidth
       onClick={() => {
         props.onClick();
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx
index f348bef9c0d..a07e5a5ecff 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx
@@ -35,7 +35,7 @@ export function ReceiveFunds(props: {
   const locale = connectLocale.receiveFundsScreen;
 
   return (
-    <Container p="lg">
+    <Container p="lg" className="tw-receive-funds-screen">
       <ModalHeader onBack={props.onBack} title={locale.title} />
 
       <Spacer y="xl" />
@@ -57,7 +57,10 @@ export function ReceiveFunds(props: {
       </Container>
       <Spacer y="xl" />
 
-      <WalletAddressContainer onClick={onCopy}>
+      <WalletAddressContainer
+        onClick={onCopy}
+        className="tw-copy-address-button"
+      >
         <Text color="primaryText" size="md">
           {shortenString(address || "")}
         </Text>
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.test.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.test.tsx
index b631b025ccb..e3880b16bec 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.test.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.test.tsx
@@ -58,9 +58,7 @@ describe("SendFunds screen", () => {
         token={{ nativeToken: true }}
       />,
     );
-    const element = container.querySelector(
-      "button.tw-sendfunds-screen-send-button",
-    );
+    const element = container.querySelector("button.tw-send-funds-button");
     expect(element?.innerHTML).toBe(en.sendFundsScreen.submitButton);
     vi.resetAllMocks();
   });
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx
index 5ffc50d57c9..4340a35aedd 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx
@@ -170,7 +170,11 @@ export function SendFundsForm(props: {
 
   if (sendTokenMutation.isError) {
     return (
-      <Container animate="fadein" p="lg">
+      <Container
+        animate="fadein"
+        p="lg"
+        className="tw-send-funds-screen tw-send-funds-screen__error"
+      >
         <ModalHeader
           onBack={() => {
             sendTokenMutation.reset();
@@ -199,7 +203,11 @@ export function SendFundsForm(props: {
 
   if (sendTokenMutation.isSuccess) {
     return (
-      <Container animate="fadein" p="lg">
+      <Container
+        animate="fadein"
+        p="lg"
+        className="tw-send-funds-screen tw-send-funds-screen__success"
+      >
         <ModalHeader
           onBack={() => {
             sendTokenMutation.reset();
@@ -232,7 +240,11 @@ export function SendFundsForm(props: {
     balanceQuery?.data?.symbol;
 
   return (
-    <Container animate="fadein" p="lg">
+    <Container
+      animate="fadein"
+      p="lg"
+      className="tw-send-funds-screen tw-send-funds-screen__form"
+    >
       <ModalHeader onBack={props.onBack} title={locale.title} />
       <Spacer y="xl" />
 
@@ -247,6 +259,7 @@ export function SendFundsForm(props: {
         </Label>
         <Spacer y="sm" />
         <Button
+          className="tw-select-token-button"
           fullWidth
           id={tokenId}
           onClick={props.onTokenSelect}
@@ -289,6 +302,7 @@ export function SendFundsForm(props: {
         </Label>
         <Spacer y="sm" />
         <Input
+          className="tw-address-input"
           id={receiverId}
           onChange={(e) => {
             setReceiverAddress(e.target.value);
@@ -308,6 +322,7 @@ export function SendFundsForm(props: {
         <Spacer y="sm" />
         <Container relative>
           <Input
+            className="tw-amount-input"
             id={amountId}
             onChange={(e) => {
               setAmount(e.target.value);
@@ -326,7 +341,7 @@ export function SendFundsForm(props: {
 
         {/* Submit */}
         <Button
-          className="tw-sendfunds-screen-send-button"
+          className="tw-send-funds-button"
           fullWidth
           onClick={async () => {
             if (!receiverAddress || !amount) {
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx
index fcc03be16f6..883661e0bda 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx
@@ -169,14 +169,24 @@ export const SignatureScreen: React.FC<{
             </Container>
 
             <Container animate="fadein" flex="column" gap="md" key={status}>
-              <Text center color="primaryText" size="lg">
+              <Text
+                center
+                color="primaryText"
+                size="lg"
+                className="tw-screen-title"
+              >
                 {status === "failed"
                   ? error || locale.signingScreen.failedToSignIn
-                  : locale.signingScreen.inProgress}
+                  : locale.signingScreen.inProgress}{" "}
               </Text>
 
               {status === "signing" && (
-                <Text balance center multiline>
+                <Text
+                  balance
+                  center
+                  multiline
+                  className="tw-screen-description"
+                >
                   {connectLocale.signatureScreen.signingScreen.prompt}
                 </Text>
               )}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx
index af35e30289a..a2383d98d7a 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx
@@ -101,6 +101,7 @@ export function TokenSelector(props: {
   if (screen === "select-chain" && chainSelection) {
     return (
       <NetworkSelectorContent
+        className="tw-send-funds-screen tw-send-funds-screen__select-chain"
         chains={chainSelection.chains}
         client={props.client}
         closeModal={() => setScreen("base")}
@@ -131,6 +132,7 @@ export function TokenSelector(props: {
 
   return (
     <Container
+      className="tw-send-funds-screen tw-send-funds-screen__select-token"
       animate="fadein"
       style={{
         minHeight: "300px",
diff --git a/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx b/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx
index 380b02094f3..293168eceab 100644
--- a/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx
+++ b/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx
@@ -68,6 +68,7 @@ export function TransactionModal(props: ModalProps) {
   return (
     <CustomThemeProvider theme={props.theme}>
       <Modal
+        className="tw-modal__view-transaction"
         title="View Transaction"
         open={true}
         setOpen={(_open) => {
diff --git a/packages/thirdweb/src/react/web/ui/components/Modal.tsx b/packages/thirdweb/src/react/web/ui/components/Modal.tsx
index 0245dc70084..4323b20d38a 100644
--- a/packages/thirdweb/src/react/web/ui/components/Modal.tsx
+++ b/packages/thirdweb/src/react/web/ui/components/Modal.tsx
@@ -12,6 +12,7 @@ import {
   shadow,
   spacing,
 } from "../../../core/design-system/index.js";
+import { cls } from "../../utils/cls.js";
 import {
   compactModalMaxHeight,
   modalCloseFadeOutDuration,
@@ -33,6 +34,7 @@ export const Modal: React.FC<{
   open?: boolean;
   setOpen?: (open: boolean) => void;
   children: React.ReactNode;
+  className: string;
   style?: React.CSSProperties;
   hideCloseIcon?: boolean;
   size: "wide" | "compact";
@@ -90,6 +92,7 @@ export const Modal: React.FC<{
         <FocusScope trapped={!props.hide}>
           <Dialog.Content aria-describedby={undefined} asChild>
             <DialogContent
+              className={cls("tw-modal", props.className)}
               ref={contentRef}
               style={
                 props.hide
diff --git a/packages/thirdweb/src/react/web/ui/components/OTPInput.tsx b/packages/thirdweb/src/react/web/ui/components/OTPInput.tsx
index 7c0ef823d98..3302dfb27b4 100644
--- a/packages/thirdweb/src/react/web/ui/components/OTPInput.tsx
+++ b/packages/thirdweb/src/react/web/ui/components/OTPInput.tsx
@@ -21,7 +21,7 @@ export function OTPInput(props: {
   onEnter: () => void;
 }) {
   return (
-    <OTPInputContainer>
+    <OTPInputContainer className="tw-otp-input-container">
       <InputOTP
         maxLength={6}
         onChange={(newValue) => {
diff --git a/packages/thirdweb/src/react/web/ui/components/Spinner.tsx b/packages/thirdweb/src/react/web/ui/components/Spinner.tsx
index 4a1cd57c3c9..c4d541cfbc6 100644
--- a/packages/thirdweb/src/react/web/ui/components/Spinner.tsx
+++ b/packages/thirdweb/src/react/web/ui/components/Spinner.tsx
@@ -22,6 +22,7 @@ export const Spinner: React.FC<{
         ...props.style,
       }}
       viewBox="0 0 50 50"
+      className="tw-spinner"
     >
       <Circle
         cx="25"
diff --git a/packages/thirdweb/src/react/web/ui/components/basic.tsx b/packages/thirdweb/src/react/web/ui/components/basic.tsx
index b3b6ea71ec1..270bd21b1ab 100644
--- a/packages/thirdweb/src/react/web/ui/components/basic.tsx
+++ b/packages/thirdweb/src/react/web/ui/components/basic.tsx
@@ -2,6 +2,7 @@
 import type { CSSObject } from "@emotion/react";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { spacing, type Theme } from "../../../core/design-system/index.js";
+import { cls } from "../../utils/cls.js";
 import {
   fadeInAnimation,
   floatDownAnimation,
@@ -36,10 +37,12 @@ export function ModalHeader(props: {
   onBack?: () => void;
   title: React.ReactNode;
   leftAligned?: boolean;
+  className?: string;
 }) {
   const { onBack, title } = props;
   return (
     <div
+      className={cls("tw-header", props.className)}
       style={{
         alignItems: "center",
         display: "flex",
@@ -94,6 +97,7 @@ export function Container(props: {
   debug?: boolean;
   bg?: keyof Theme["colors"];
   borderColor?: keyof Theme["colors"];
+  className?: string;
 }) {
   const styles: React.CSSProperties = {};
 
@@ -177,6 +181,7 @@ export function Container(props: {
       color={props.color}
       data-animate={props.animate}
       data-scrolly={props.scrollY}
+      className={props.className}
       style={{
         ...styles,
         ...props.style,
diff --git a/packages/thirdweb/src/react/web/ui/components/modalElements.tsx b/packages/thirdweb/src/react/web/ui/components/modalElements.tsx
index 9f6c931481d..43280327875 100644
--- a/packages/thirdweb/src/react/web/ui/components/modalElements.tsx
+++ b/packages/thirdweb/src/react/web/ui/components/modalElements.tsx
@@ -26,6 +26,7 @@ export const BackButton: React.FC<{
 }> = (props) => {
   return (
     <IconButton
+      className="tw-back-button"
       onClick={props.onClick}
       style={{ transform: "translateX(-25%)", ...props.style }}
       type="button"
diff --git a/packages/thirdweb/src/react/web/utils/cls.ts b/packages/thirdweb/src/react/web/utils/cls.ts
new file mode 100644
index 00000000000..63706dc4356
--- /dev/null
+++ b/packages/thirdweb/src/react/web/utils/cls.ts
@@ -0,0 +1,13 @@
+/**
+ * @internal
+ * Utility for merging class names
+ *
+ * @example
+ * ```ts
+ * cls("foo", "bar", true, false, "baz") // "foo bar baz"
+ * cls('foo', someCondition && "bar") // "foo bar" or "foo"
+ * ```
+ */
+export function cls(...classes: (string | unknown)[]) {
+  return classes.filter((v) => typeof v === "string").join(" ");
+}
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx b/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx
index cae7bb03a9d..f60653cc4b5 100644
--- a/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx
+++ b/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx
@@ -14,6 +14,7 @@ import { CountrySelector, getCountrySelector } from "./CountrySelector.js";
 import type { SupportedSmsCountry } from "./supported-sms-countries.js";
 
 export function InputSelectionUI(props: {
+  className?: string;
   onSelect: (data: string) => void;
   placeholder: string;
   name: string;
@@ -63,6 +64,7 @@ export function InputSelectionUI(props: {
       }}
     >
       <InputContainer
+        className={props.className}
         data-error={renderingError}
         style={{
           display: "flex",
diff --git a/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx b/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx
index 722fc429a39..af3ed95e2d2 100644
--- a/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx
+++ b/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx
@@ -358,6 +358,7 @@ export const ConnectWalletSocialOptions = (
                 })();
                 return (
                   <SocialButton
+                    className="tw-social-button"
                     aria-label={`Login with ${loginMethod}`}
                     data-variant={showOnlyIcons ? "icon" : "full"}
                     disabled={props.disabled}
@@ -394,6 +395,7 @@ export const ConnectWalletSocialOptions = (
       {isEmailEnabled &&
         (inputMode === "email" ? (
           <InputSelectionUI
+            className="tw-input-container tw-input-container__email"
             disabled={props.disabled}
             emptyErrorMessage={emptyErrorMessage}
             errorMessage={(input) => {
@@ -414,6 +416,7 @@ export const ConnectWalletSocialOptions = (
           />
         ) : (
           <WalletTypeRowButton
+            className="tw-select-button tw-select-button__email"
             client={props.client}
             disabled={props.disabled}
             icon={EmailIcon}
@@ -426,6 +429,7 @@ export const ConnectWalletSocialOptions = (
       {isPhoneEnabled &&
         (inputMode === "phone" ? (
           <InputSelectionUI
+            className="tw-input-container tw-input-container__phone"
             allowedSmsCountryCodes={
               wallet.getConfig()?.auth?.allowedSmsCountryCodes
             }
@@ -458,6 +462,7 @@ export const ConnectWalletSocialOptions = (
           />
         ) : (
           <WalletTypeRowButton
+            className="tw-select-button tw-select-button__phone"
             client={props.client}
             disabled={props.disabled}
             icon={PhoneIcon}
@@ -470,6 +475,7 @@ export const ConnectWalletSocialOptions = (
 
       {passKeyEnabled && (
         <WalletTypeRowButton
+          className="tw-select-button tw-select-button__passkey"
           client={props.client}
           disabled={props.disabled}
           icon={FingerPrintIcon}
@@ -483,6 +489,7 @@ export const ConnectWalletSocialOptions = (
       {/* SIWE login */}
       {siweEnabled && !props.isLinking && (
         <WalletTypeRowButton
+          className="tw-select-button tw-select-button__link-wallet"
           client={props.client}
           icon={OutlineWalletIcon}
           onClick={() => {
@@ -495,6 +502,7 @@ export const ConnectWalletSocialOptions = (
       {/* Guest login */}
       {guestEnabled && (
         <WalletTypeRowButton
+          className="tw-select-button tw-select-button__guest"
           client={props.client}
           disabled={props.disabled}
           icon={GuestIcon}
@@ -507,6 +515,7 @@ export const ConnectWalletSocialOptions = (
 
       {props.isLinking && (
         <WalletTypeRowButton
+          className="tw-select-button tw-select-button__link-wallet"
           client={props.client}
           icon={OutlineWalletIcon}
           onClick={() => {
diff --git a/packages/thirdweb/src/react/web/wallets/shared/ConnectingScreen.tsx b/packages/thirdweb/src/react/web/wallets/shared/ConnectingScreen.tsx
index a920910580d..47bd841d68c 100644
--- a/packages/thirdweb/src/react/web/wallets/shared/ConnectingScreen.tsx
+++ b/packages/thirdweb/src/react/web/wallets/shared/ConnectingScreen.tsx
@@ -31,7 +31,12 @@ export const ConnectingScreen: React.FC<{
   const { locale } = props;
 
   return (
-    <Container animate="fadein" flex="column" fullHeight>
+    <Container
+      animate="fadein"
+      flex="column"
+      fullHeight
+      className="tw-connecting-wallet-screen"
+    >
       <Container
         p="lg"
         style={{
@@ -65,19 +70,27 @@ export const ConnectingScreen: React.FC<{
             animationDuration: "200ms",
           }}
         >
-          <Text center color="primaryText" size="lg" weight={600}>
+          <Text
+            center
+            color="primaryText"
+            size="lg"
+            weight={600}
+            className="tw-screen-title"
+            data-status={props.errorConnecting ? "failed" : "in-progress"}
+          >
             {props.errorConnecting ? locale.failed : locale.inProgress}
           </Text>
 
           <Spacer y="md" />
 
           {!props.errorConnecting ? (
-            <Text balance center multiline>
+            <Text balance center multiline className="tw-screen-description">
               {locale.instruction}
             </Text>
           ) : (
             <Container animate="fadein" center="x" flex="row">
               <Button
+                className="tw-retry-button"
                 fullWidth
                 onClick={props.onRetry}
                 style={{
@@ -99,7 +112,11 @@ export const ConnectingScreen: React.FC<{
           <Spacer y="xl" />
           <Line />
           <Container center="x" flex="row" p="lg">
-            <Button onClick={props.onGetStarted} variant="link">
+            <Button
+              onClick={props.onGetStarted}
+              variant="link"
+              className="tw-get-started-button"
+            >
               {locale.getStartedLink}
             </Button>
           </Container>
diff --git a/packages/thirdweb/src/react/web/wallets/shared/GuestLogin.tsx b/packages/thirdweb/src/react/web/wallets/shared/GuestLogin.tsx
index 8e3d57b694d..8ad15e89df5 100644
--- a/packages/thirdweb/src/react/web/wallets/shared/GuestLogin.tsx
+++ b/packages/thirdweb/src/react/web/wallets/shared/GuestLogin.tsx
@@ -91,7 +91,12 @@ export function GuestLogin(props: {
   }, [done, guestLogin]);
 
   return (
-    <Container animate="fadein" flex="column" fullHeight>
+    <Container
+      animate="fadein"
+      flex="column"
+      fullHeight
+      className="tw-guest-login-screen"
+    >
       <Container
         expand
         flex="column"
diff --git a/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx b/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx
index fef5307e77c..7aeffc41bb8 100644
--- a/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx
+++ b/packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx
@@ -206,7 +206,12 @@ export function OTPLoginUI(props: {
 
   if (screen === "base") {
     return (
-      <Container animate="fadein" flex="column" fullHeight>
+      <Container
+        animate="fadein"
+        flex="column"
+        fullHeight
+        className="tw-otp-login-screen"
+      >
         <Container p="lg">
           <ModalHeader onBack={goBack} title={locale.signIn} />
         </Container>
@@ -219,7 +224,9 @@ export function OTPLoginUI(props: {
           >
             <Container center="x" flex="column" px="lg">
               {!isWideModal && <Spacer y="xl" />}
-              <Text>{locale.emailLoginScreen.enterCodeSendTo}</Text>
+              <Text className="tw-screen-title">
+                {locale.emailLoginScreen.enterCodeSendTo}
+              </Text>
               <Spacer y="sm" />
               <Text color="primaryText">
                 {"email" in userInfo ? userInfo.email : userInfo.phone}
@@ -243,7 +250,12 @@ export function OTPLoginUI(props: {
             {verifyStatus === "invalid" && (
               <FadeIn>
                 <Spacer y="md" />
-                <Text center color="danger" size="sm">
+                <Text
+                  center
+                  color="danger"
+                  size="sm"
+                  className="tw-invalid-code-text"
+                >
                   {locale.emailLoginScreen.invalidCode}
                 </Text>
               </FadeIn>
@@ -252,7 +264,12 @@ export function OTPLoginUI(props: {
             {verifyStatus === "linking_error" && (
               <FadeIn>
                 <Spacer y="md" />
-                <Text center color="danger" size="sm">
+                <Text
+                  center
+                  color="danger"
+                  size="sm"
+                  className="tw-screen-error"
+                >
                   {error || "Failed to verify code"}
                 </Text>
               </FadeIn>
@@ -261,7 +278,12 @@ export function OTPLoginUI(props: {
             {verifyStatus === "payment_required" && (
               <FadeIn>
                 <Spacer y="md" />
-                <Text center color="danger" size="sm">
+                <Text
+                  center
+                  color="danger"
+                  size="sm"
+                  className="tw-screen-error"
+                >
                   {locale.maxAccountsExceeded}
                 </Text>
               </FadeIn>
@@ -283,6 +305,7 @@ export function OTPLoginUI(props: {
                     }}
                     type="submit"
                     variant="accent"
+                    className="tw-verify-button"
                   >
                     {locale.emailLoginScreen.verify}
                   </Button>
@@ -296,7 +319,12 @@ export function OTPLoginUI(props: {
 
             <Container gap="xs" p={isWideModal ? undefined : "lg"}>
               {accountStatus === "error" && (
-                <Text center color="danger" size="sm">
+                <Text
+                  center
+                  color="danger"
+                  size="sm"
+                  className="tw-screen-error"
+                >
                   {locale.emailLoginScreen.failedToSendCode}
                 </Text>
               )}
@@ -322,6 +350,7 @@ export function OTPLoginUI(props: {
                     cursor: countdown > 0 ? "default" : "pointer",
                     opacity: countdown > 0 ? 0.5 : 1,
                   }}
+                  className="tw-resend-button"
                   type="button"
                 >
                   {countdown > 0
diff --git a/packages/thirdweb/src/react/web/wallets/shared/ScanScreen.tsx b/packages/thirdweb/src/react/web/wallets/shared/ScanScreen.tsx
index 7f1b10ffd04..feab0cbbb9e 100644
--- a/packages/thirdweb/src/react/web/wallets/shared/ScanScreen.tsx
+++ b/packages/thirdweb/src/react/web/wallets/shared/ScanScreen.tsx
@@ -40,7 +40,12 @@ export const ScanScreen: React.FC<{
   const [linkCopied, setLinkCopied] = useState(false);
 
   return (
-    <Container animate="fadein" flex="column" fullHeight>
+    <Container
+      animate="fadein"
+      flex="column"
+      fullHeight
+      className="tw-qr-scan-screen"
+    >
       <Container p="lg">
         <ModalHeader onBack={props.onBack} title={props.walletName} />
       </Container>
@@ -68,6 +73,7 @@ export const ScanScreen: React.FC<{
             <Spacer y="xs" />
 
             <Button
+              className="tw-copy-link-button"
               disabled={props.qrCodeUri === undefined}
               onClick={() => {
                 navigator.clipboard
@@ -101,6 +107,7 @@ export const ScanScreen: React.FC<{
               balance
               center
               multiline
+              className="tw-screen-description"
               style={{
                 paddingInline: spacing.lg,
               }}
@@ -122,12 +129,23 @@ export const ScanScreen: React.FC<{
               <AccentFailIcon size={iconSize["3xl"]} />
             </Container>
             <Spacer y="lg" />
-            <Text center color="primaryText" size="lg">
+            <Text
+              center
+              color="primaryText"
+              size="lg"
+              className="tw-screen-title"
+              data-status="failed"
+            >
               Connection Failed
             </Text>
             <Spacer y="3xl" />
 
-            <Button fullWidth onClick={props.onRetry} variant="accent">
+            <Button
+              fullWidth
+              onClick={props.onRetry}
+              variant="accent"
+              className="tw-retry-button"
+            >
               Try again
             </Button>
           </Container>
@@ -144,6 +162,7 @@ export const ScanScreen: React.FC<{
         >
           <Button
             onClick={props.onGetStarted}
+            className="tw-get-started-button"
             style={{
               fontSize: fontSize.sm,
               textAlign: "center",
diff --git a/packages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsx b/packages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsx
index 5f304b86656..130581dd46f 100644
--- a/packages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsx
+++ b/packages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsx
@@ -154,7 +154,12 @@ export function SocialLogin(props: {
   }, [done, socialLogin]);
 
   return (
-    <Container animate="fadein" flex="column" fullHeight>
+    <Container
+      animate="fadein"
+      flex="column"
+      fullHeight
+      className="tw-social-login-screen"
+    >
       <Container
         expand
         flex="column"
diff --git a/packages/thirdweb/src/stories/ConnectEmbed.stories.tsx b/packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
new file mode 100644
index 00000000000..536d05f925b
--- /dev/null
+++ b/packages/thirdweb/src/stories/ConnectEmbed.stories.tsx
@@ -0,0 +1,128 @@
+import type { Meta } from "@storybook/react";
+import { ConnectButton } from "../react/web/ui/ConnectWallet/ConnectButton.js";
+import { ConnectEmbed } from "../react/web/ui/ConnectWallet/Modal/ConnectEmbed.js";
+import { ecosystemWallet } from "../wallets/in-app/web/ecosystem.js";
+import { inAppWallet } from "../wallets/in-app/web/in-app.js";
+import { storyClient } from "./utils.js";
+
+const meta: Meta<typeof ConnectEmbed> = {
+  title: "Connect/ConnectEmbed",
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => {
+      return (
+        <div>
+          <Story />
+          <div
+            style={{
+              position: "absolute",
+              bottom: "20px",
+              right: "20px",
+            }}
+          >
+            <ConnectButton client={storyClient} />
+          </div>
+        </div>
+      );
+    },
+  ],
+};
+export default meta;
+
+export function BasicUsage() {
+  return <ConnectEmbed client={storyClient} />;
+}
+
+export function Header() {
+  return (
+    <ConnectEmbed
+      client={storyClient}
+      header={{
+        title: "Foo bar",
+        titleIcon: "https://placehold.co/400x400",
+      }}
+    />
+  );
+}
+
+export function WideModal() {
+  return <ConnectEmbed client={storyClient} modalSize="wide" />;
+}
+
+export function ClassNameAndStylesAdded() {
+  return (
+    <ConnectEmbed
+      client={storyClient}
+      className="foo-bar"
+      style={{
+        outline: "1px solid red",
+      }}
+    />
+  );
+}
+
+export function WideModalAndClassNameAndStylesAdded() {
+  return (
+    <ConnectEmbed
+      client={storyClient}
+      modalSize="wide"
+      className="foo-bar"
+      style={{
+        outline: "1px solid red",
+      }}
+    />
+  );
+}
+
+export function AllInAppWalletAuthMethods() {
+  return (
+    <ConnectEmbed
+      client={storyClient}
+      className="foo-bar"
+      wallets={[
+        inAppWallet({
+          auth: {
+            options: [
+              "line",
+              "google",
+              "apple",
+              "facebook",
+              "discord",
+              "x",
+              "tiktok",
+              "coinbase",
+              "farcaster",
+              "telegram",
+              "github",
+              "twitch",
+              "steam",
+              "guest",
+              "backend",
+              "email",
+              "phone",
+              "passkey",
+              "wallet",
+            ],
+          },
+        }),
+      ]}
+    />
+  );
+}
+
+export function EcosystemWallet() {
+  return (
+    <ConnectEmbed
+      showThirdwebBranding={false}
+      client={storyClient}
+      wallets={[
+        ecosystemWallet("ecosystem.b3-open-gaming", {
+          partnerId: "dbcd5e9b-564e-4ba0-91a0-becf0edabb61",
+        }),
+      ]}
+      theme="light"
+    />
+  );
+}