[BLD-286] SDK: add stable classNames to elements in Connect UI (#8065)

Author: MananTank

.changeset/nice-owls-double.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Add `tw-` class names in connect ui

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;
+} */

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}

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}

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

@@ -572,13 +572,15 @@ export function DetailsModal(props: {
           <Container px="lg">
             {/* Send, Receive, Swap */}
             <Container
+              className="tw-highlight-buttons"
               style={{
                 display: "flex",
                 gap: spacing.xs,
               }}
             >
               {!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={() => {

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}

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>

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}

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) => {

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"