Skip to content

Commit b9888d0

Browse files
MananTankMananTank
committed
[BLD-286] SDK: add stable classNames to elements in Connect UI
1 parent b1f23a2 commit b9888d0

31 files changed

+353
-54
lines changed

‎packages/thirdweb/.storybook/global.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,8 @@ body {
1010
font-optical-sizing: auto;
1111
font-variation-settings: "slnt" 0;
1212
}
13+
14+
/* Use this to debug the elements having tw- classes */
15+
/* [class*="tw-"] {
16+
outline: 1px dotted yellow !important;
17+
} */

‎packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,7 @@ export function SwapUI(props: SwapUIProps) {
197197
return (
198198
<Container p="md">
199199
<Modal
200+
className="tw-modal__swap-widget"
200201
size="compact"
201202
title="Select Token"
202203
open={!!modalState}

‎packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -543,6 +543,7 @@ function ConnectButtonInner(
543543
)}
544544
</Button>
545545
<Modal
546+
className="tw-modal__sign-in"
546547
title="Sign in"
547548
open={showSignatureModal}
548549
setOpen={setShowSignatureModal}

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -572,13 +572,15 @@ export function DetailsModal(props: {
572572
<Container px="lg">
573573
{/* Send, Receive, Swap */}
574574
<Container
575+
className="tw-highlight-buttons"
575576
style={{
576577
display: "flex",
577578
gap: spacing.xs,
578579
}}
579580
>
580581
{!hideSendFunds && (
581582
<Button
583+
className="tw-highlight-button__send"
582584
onClick={() => {
583585
setScreen("send");
584586
}}
@@ -608,6 +610,7 @@ export function DetailsModal(props: {
608610

609611
{!hideReceiveFunds && (
610612
<Button
613+
className="tw-highlight-button__receive"
611614
onClick={() => {
612615
setScreen("receive");
613616
}}
@@ -632,6 +635,7 @@ export function DetailsModal(props: {
632635
chainMetadataQuery.data &&
633636
!chainMetadataQuery.data.testnet && (
634637
<Button
638+
className="tw-highlight-button__buy"
635639
onClick={() => {
636640
trackPayEvent({
637641
client: client,
@@ -682,6 +686,7 @@ export function DetailsModal(props: {
682686

683687
{/* Transactions */}
684688
<MenuButton
689+
className="tw-view-transactions-button"
685690
onClick={() => {
686691
setScreen("transactions");
687692
}}
@@ -699,6 +704,7 @@ export function DetailsModal(props: {
699704
{/* Hide the View Funds button if the assetTabs props is set to an empty array */}
700705
{(props.assetTabs === undefined || props.assetTabs.length > 0) && (
701706
<MenuButton
707+
className="tw-view-assets-button"
702708
onClick={() => {
703709
setScreen("view-assets");
704710
}}
@@ -713,6 +719,7 @@ export function DetailsModal(props: {
713719

714720
{/* Manage Wallet */}
715721
<MenuButton
722+
className="tw-manage-wallet-button"
716723
onClick={() => {
717724
setScreen("manage-wallet");
718725
}}
@@ -729,6 +736,7 @@ export function DetailsModal(props: {
729736
(chainFaucetsQuery.faucets.length > 0 ||
730737
walletChain?.id === LocalhostChainId) && (
731738
<MenuLink
739+
className="tw-request-testnet-funds-button"
732740
as="a"
733741
href={
734742
chainFaucetsQuery.faucets ? chainFaucetsQuery.faucets[0] : "#"
@@ -759,6 +767,7 @@ export function DetailsModal(props: {
759767
<Spacer y="sm" />
760768
<Container px="md">
761769
<MenuButton
770+
className="tw-disconnect-wallet-button"
762771
data-variant="danger"
763772
onClick={() => {
764773
if (activeWallet && activeAccount) {
@@ -1000,6 +1009,7 @@ export function DetailsModal(props: {
10001009
<WalletUIStatesProvider isOpen={false} theme={props.theme}>
10011010
<ScreenSetupContext.Provider value={screenSetup}>
10021011
<Modal
1012+
className="tw-modal__wallet-details"
10031013
title="Manage Wallet"
10041014
open={isOpen}
10051015
setOpen={(_open) => {
@@ -1043,7 +1053,7 @@ export function NetworkSwitcherButton(props: {
10431053
}
10441054
return (
10451055
<MenuButton
1046-
className="tw-internal-network-switcher-button"
1056+
className="tw-internal-network-switcher-button tw-switch-network-button"
10471057
data-variant="primary"
10481058
disabled={disableSwitchChain}
10491059
onClick={() => {

‎packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,12 @@ function AllWalletsUI(props: {
6969
}, [searchResults, itemsToShow]);
7070

7171
return (
72-
<Container animate="fadein" flex="column" fullHeight>
72+
<Container
73+
animate="fadein"
74+
flex="column"
75+
fullHeight
76+
className="tw-all-wallets-screen"
77+
>
7378
<Container p="lg">
7479
<ModalHeader onBack={props.onBack} title="Select Wallet" />
7580
</Container>
@@ -140,6 +145,7 @@ function AllWalletsUI(props: {
140145
}}
141146
>
142147
<WalletEntryButton
148+
className="tw-select-wallet-button"
143149
badge={undefined}
144150
client={props.client}
145151
connectLocale={props.connectLocale}

‎packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { useIsAutoConnecting } from "../../../../core/hooks/wallets/useIsAutoCon
2222
import { useConnectionManager } from "../../../../core/providers/connection-manager.js";
2323
import { WalletUIStatesProvider } from "../../../providers/wallet-ui-states-provider.js";
2424
import { canFitWideModal } from "../../../utils/canFitWideModal.js";
25+
import { cls } from "../../../utils/cls.js";
2526
import { usePreloadWalletProviders } from "../../../utils/usePreloadWalletProviders.js";
2627
import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
2728
import { AutoConnect } from "../../AutoConnect/AutoConnect.js";
@@ -266,7 +267,11 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
266267
<>
267268
{autoConnectComp}
268269
<CustomThemeProvider theme={props.theme}>
269-
<EmbedContainer modalSize={modalSize}>
270+
<EmbedContainer
271+
modalSize={modalSize}
272+
className={cls("tw-widget-loading", props.className)}
273+
style={props.style}
274+
>
270275
<LoadingScreen />
271276
</EmbedContainer>
272277
</CustomThemeProvider>

‎packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,7 @@ const ConnectModal = (props: ConnectModalOptions) => {
118118

119119
return (
120120
<Modal
121+
className="tw-modal__connect-wallet"
121122
title="Connect Wallet"
122123
hide={hideModal}
123124
open={isWalletModalOpen}

‎packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ type NetworkSelectorContentProps = {
146146
showTabs?: boolean;
147147
connectLocale: ConnectLocale;
148148
client: ThirdwebClient;
149+
className?: string;
149150
};
150151

151152
/**
@@ -364,7 +365,7 @@ export function NetworkSelectorContent(props: NetworkSelectorContentProps) {
364365
);
365366

366367
return (
367-
<Container>
368+
<Container className={props.className}>
368369
<Container p="lg">
369370
{props.onBack ? (
370371
<ModalHeader onBack={props.onBack} title={locale.title} />
@@ -954,6 +955,7 @@ export function useNetworkSwitcherModal() {
954955
setRootEl(
955956
<CustomThemeProvider theme={props.theme}>
956957
<Modal
958+
className="tw-modal__switch-network"
957959
title="Switch Network"
958960
open={true}
959961
setOpen={(value) => {

‎packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import type { ConnectLocale } from "./locale/types.js";
2323
* @internal
2424
*/
2525
export function WalletEntryButton(props: {
26+
className?: string;
2627
wallet: Wallet;
2728
selectWallet: () => void;
2829
connectLocale: ConnectLocale;
@@ -56,6 +57,7 @@ export function WalletEntryButton(props: {
5657

5758
return (
5859
<WalletButtonEl
60+
className={props.className}
5961
data-active={props.isActive}
6062
onClick={selectWallet}
6163
type="button"

‎packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22
import { ChevronLeftIcon } from "@radix-ui/react-icons";
3-
import { lazy, Suspense, useEffect, useRef, useState } from "react";
3+
import { useEffect, useRef, useState } from "react";
44
import type { Chain } from "../../../../chains/types.js";
55
import type { ThirdwebClient } from "../../../../client/client.js";
66
import type { InjectedSupportedWalletIds } from "../../../../wallets/__generated__/wallet-ids.js";
@@ -18,7 +18,7 @@ import {
1818
} from "../../../core/design-system/index.js";
1919
import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
2020
import { sortWallets } from "../../utils/sortWallets.js";
21-
import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
21+
import InAppWalletSelectionUI from "../../wallets/in-app/InAppWalletSelectionUI.js";
2222
import {
2323
Container,
2424
Line,
@@ -43,10 +43,6 @@ import { PoweredByThirdweb } from "./PoweredByTW.js";
4343
import { WalletButtonEl, WalletEntryButton } from "./WalletEntryButton.js";
4444
import { WalletTypeRowButton } from "./WalletTypeRowButton.js";
4545

46-
const InAppWalletSelectionUI = /* @__PURE__ */ lazy(
47-
() => import("../../wallets/in-app/InAppWalletSelectionUI.js"),
48-
);
49-
5046
// const localWalletId = "local";
5147
const inAppWalletId: WalletId = "inApp";
5248

@@ -202,7 +198,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
202198
title={props.modalHeader.title}
203199
/>
204200
) : (
205-
<Container center="y" flex="row" gap="xxs">
201+
<Container center="y" flex="row" gap="xs" className="tw-header">
206202
{!props.meta.titleIconUrl ? null : (
207203
<Img
208204
client={props.client}
@@ -222,6 +218,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
222218

223219
const connectAWallet = (
224220
<WalletTypeRowButton
221+
className="tw-select-connect-a-wallet-button"
225222
client={props.client}
226223
disabled={props.meta.requireApproval && !approvedTOS}
227224
icon={OutlineWalletIcon}
@@ -234,6 +231,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
234231

235232
const newToWallets = (
236233
<Container
234+
className="tw-get-started-container"
237235
flex="row"
238236
style={{
239237
justifyContent: "space-between",
@@ -489,6 +487,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
489487
return (
490488
<Container
491489
animate="fadein"
490+
className="tw-wallet-selection"
492491
flex="column"
493492
fullHeight
494493
scrollY
@@ -620,22 +619,21 @@ const WalletSelection: React.FC<{
620619
// data-full-width={!!walletConfig.selectUI}
621620
>
622621
{wallet.id === "inApp" && props.size === "compact" ? (
623-
<Suspense fallback={<LoadingScreen height="195px" />}>
624-
<InAppWalletSelectionUI
625-
chain={props.chain}
626-
client={props.client}
627-
connectLocale={props.connectLocale}
628-
disabled={props.disabled}
629-
done={() => props.done(wallet)}
630-
goBack={props.goBack}
631-
recommendedWallets={props.recommendedWallets}
632-
select={() => props.selectWallet(wallet)}
633-
size={props.size}
634-
wallet={wallet as Wallet<"inApp">}
635-
/>
636-
</Suspense>
622+
<InAppWalletSelectionUI
623+
chain={props.chain}
624+
client={props.client}
625+
connectLocale={props.connectLocale}
626+
disabled={props.disabled}
627+
done={() => props.done(wallet)}
628+
goBack={props.goBack}
629+
recommendedWallets={props.recommendedWallets}
630+
select={() => props.selectWallet(wallet)}
631+
size={props.size}
632+
wallet={wallet as Wallet<"inApp">}
633+
/>
637634
) : (
638635
<WalletEntryButton
636+
className="tw-wallet-select-wallet-button"
639637
badge={undefined}
640638
client={props.client}
641639
connectLocale={props.connectLocale}
@@ -655,7 +653,7 @@ const WalletSelection: React.FC<{
655653
})}
656654

657655
{props.onShowAll && props.showAllWallets !== false && (
658-
<ButtonContainer>
656+
<ButtonContainer className="tw-show-all-wallets-button">
659657
<WalletButtonEl onClick={props.onShowAll}>
660658
<ShowAllWalletsIcon>
661659
<div data-dot />

0 commit comments

Comments
 (0)