thirdweb 5.32.2-nightly-a6ed6e66dae7f2fa239c76a57e93b545e5d8da8d-20240704000330 → 5.32.2

package/src/react/native/ui/connect/ConnectModal.tsx

@@ -8,7 +8,6 @@ import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
 import type { ConnectEmbedProps } from "../../../core/hooks/connection/ConnectEmbedProps.js";
-import { genericWalletIcon } from "../../../core/utils/socialIcons.js";
 import { useWalletInfo } from "../../../core/utils/wallet.js";
 import { radius, spacing } from "../../design-system/index.js";
 import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
@@ -24,7 +23,7 @@ import { ThemedButtonWithIcon } from "../components/button.js";
 import { Spacer } from "../components/spacer.js";
 import { ThemedText } from "../components/text.js";
 import { ThemedView } from "../components/view.js";
-import { TW_ICON } from "../icons/svgs.js";
+import { TW_ICON, WALLET_ICON } from "../icons/svgs.js";
 import { ErrorView } from "./ErrorView.js";
 import { ExternalWalletsList } from "./ExternalWalletsList.js";
 import { InAppWalletUI, OtpLogin } from "./InAppWalletUI.js";
@@ -128,6 +127,7 @@ export function ConnectModal(
             onClose={props.onClose}
             containerType={containerType}
             onBack={() => setModalState({ screen: "base" })}
+            title={props.connectModal?.title || "Sign in"}
           />
           <Spacer size="xl" />
           <View
@@ -163,6 +163,7 @@ export function ConnectModal(
             onClose={props.onClose}
             containerType={containerType}
             onBack={() => setModalState({ screen: "base" })}
+            title={props.connectModal?.title || "Sign in"}
           />
           <Spacer size="lg" />
           <ExternalWalletsList
@@ -184,6 +185,7 @@ export function ConnectModal(
             onClose={props.onClose}
             containerType={containerType}
             onBack={() => setModalState({ screen: "base" })}
+            title={props.connectModal?.title || "Sign in"}
           />
           {containerType === "modal" ? (
             <View style={{ flex: 1 }} />
@@ -212,6 +214,7 @@ export function ConnectModal(
             onClose={props.onClose}
             containerType={containerType}
             onBack={() => setModalState({ screen: "base" })}
+            title={props.connectModal?.title || "Sign in"}
           />
           {containerType === "modal" ? (
             <View style={{ flex: 1 }} />
@@ -235,6 +238,7 @@ export function ConnectModal(
             theme={theme}
             onClose={props.onClose}
             containerType={containerType}
+            title={props.connectModal?.title || "Sign in"}
           />
           {inAppWallet ? (
             <>
@@ -262,7 +266,7 @@ export function ConnectModal(
                     <OrDivider theme={theme} />
                     <ThemedButtonWithIcon
                       theme={theme}
-                      icon={genericWalletIcon}
+                      icon={WALLET_ICON}
                       title="Connect a wallet"
                       onPress={() =>
                         setModalState({ screen: "external_wallets" })
@@ -279,7 +283,7 @@ export function ConnectModal(
             </>
           ) : externalWallets.length > 0 ? (
             <>
-              <Spacer size="lg" />
+              <Spacer size="xl" />
               <View
                 style={{
                   flex: 1,
@@ -343,6 +347,7 @@ function LoadingView({
               theme={theme}
               size={90}
               data={getAuthProviderImage(authProvider)}
+              color={theme.colors.accentButtonBg}
             />
           </View>
         ) : (

package/src/react/native/ui/connect/InAppWalletUI.tsx

@@ -73,26 +73,30 @@ export function InAppWalletUI(props: InAppWalletFormUIProps) {
           <SocialLogin key={auth} auth={auth} {...props} />
         ))}
       </View>
-      {inputMode === "email" ? (
-        <PreOtpLogin auth="email" {...props} />
-      ) : (
-        <ThemedButtonWithIcon
-          theme={theme}
-          title="Email address"
-          icon={EMAIL_ICON}
-          onPress={() => setInputMode("email")}
-        />
-      )}
-      {inputMode === "phone" ? (
-        <PreOtpLogin auth="phone" {...props} />
-      ) : (
-        <ThemedButtonWithIcon
-          theme={theme}
-          title="Phone number"
-          icon={PHONE_ICON}
-          onPress={() => setInputMode("phone")}
-        />
-      )}
+      {authOptions.includes("email") ? (
+        inputMode === "email" ? (
+          <PreOtpLogin auth="email" {...props} />
+        ) : (
+          <ThemedButtonWithIcon
+            theme={theme}
+            title="Email address"
+            icon={EMAIL_ICON}
+            onPress={() => setInputMode("email")}
+          />
+        )
+      ) : null}
+      {authOptions.includes("phone") ? (
+        inputMode === "phone" ? (
+          <PreOtpLogin auth="phone" {...props} />
+        ) : (
+          <ThemedButtonWithIcon
+            theme={theme}
+            title="Phone number"
+            icon={PHONE_ICON}
+            onPress={() => setInputMode("phone")}
+          />
+        )
+      ) : null}
     </View>
   );
 }

package/src/react/native/ui/icons/svgs.ts

@@ -30,13 +30,13 @@ export const GOOGLE_ICON = `<svg height={height} viewBox="0 0 24 24" width={widt
 </svg>`;
 
 export const EMAIL_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.3335 2.6665H2.66683C1.93045 2.6665 1.3335 3.26346 1.3335 3.99984V11.9998C1.3335 12.7362 1.93045 13.3332 2.66683 13.3332H13.3335C14.0699 13.3332 14.6668 12.7362 14.6668 11.9998V3.99984C14.6668 3.26346 14.0699 2.6665 13.3335 2.6665Z" stroke="#3385FF" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M14.6668 4.6665L8.68683 8.4665C8.48101 8.59545 8.24304 8.66384 8.00016 8.66384C7.75728 8.66384 7.51931 8.59545 7.3135 8.4665L1.3335 4.6665" stroke="#3385FF" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.3335 2.6665H2.66683C1.93045 2.6665 1.3335 3.26346 1.3335 3.99984V11.9998C1.3335 12.7362 1.93045 13.3332 2.66683 13.3332H13.3335C14.0699 13.3332 14.6668 12.7362 14.6668 11.9998V3.99984C14.6668 3.26346 14.0699 2.6665 13.3335 2.6665Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.6668 4.6665L8.68683 8.4665C8.48101 8.59545 8.24304 8.66384 8.00016 8.66384C7.75728 8.66384 7.51931 8.59545 7.3135 8.4665L1.3335 4.6665" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
 
 export const PHONE_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_5639_632)">
-<path d="M14.6669 11.2802V13.2802C14.6677 13.4659 14.6297 13.6497 14.5553 13.8198C14.4809 13.9899 14.3718 14.1426 14.235 14.2681C14.0982 14.3937 13.9367 14.4892 13.7608 14.5487C13.5849 14.6082 13.3985 14.6303 13.2136 14.6136C11.1622 14.3907 9.19161 13.6897 7.46028 12.5669C5.8495 11.5433 4.48384 10.1777 3.46028 8.56689C2.3336 6.8277 1.63244 4.84756 1.41361 2.78689C1.39695 2.60254 1.41886 2.41673 1.47795 2.24131C1.53703 2.06589 1.63199 1.90469 1.75679 1.76797C1.88159 1.63126 2.03348 1.52203 2.20281 1.44724C2.37213 1.37245 2.55517 1.33374 2.74028 1.33356H4.74028C5.06382 1.33038 5.37748 1.44495 5.62279 1.65592C5.8681 1.86689 6.02833 2.15986 6.07361 2.48023C6.15803 3.12027 6.31458 3.74871 6.54028 4.35356C6.62998 4.59218 6.64939 4.8515 6.59622 5.10081C6.54305 5.35012 6.41952 5.57897 6.24028 5.76023L5.39361 6.60689C6.34265 8.27592 7.72458 9.65786 9.39361 10.6069L10.2403 9.76023C10.4215 9.58099 10.6504 9.45746 10.8997 9.40429C11.149 9.35112 11.4083 9.37053 11.6469 9.46023C12.2518 9.68593 12.8802 9.84248 13.5203 9.92689C13.8441 9.97258 14.1399 10.1357 14.3513 10.3852C14.5627 10.6348 14.6751 10.9533 14.6669 11.2802Z" stroke="#3385FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.6669 11.2802V13.2802C14.6677 13.4659 14.6297 13.6497 14.5553 13.8198C14.4809 13.9899 14.3718 14.1426 14.235 14.2681C14.0982 14.3937 13.9367 14.4892 13.7608 14.5487C13.5849 14.6082 13.3985 14.6303 13.2136 14.6136C11.1622 14.3907 9.19161 13.6897 7.46028 12.5669C5.8495 11.5433 4.48384 10.1777 3.46028 8.56689C2.3336 6.8277 1.63244 4.84756 1.41361 2.78689C1.39695 2.60254 1.41886 2.41673 1.47795 2.24131C1.53703 2.06589 1.63199 1.90469 1.75679 1.76797C1.88159 1.63126 2.03348 1.52203 2.20281 1.44724C2.37213 1.37245 2.55517 1.33374 2.74028 1.33356H4.74028C5.06382 1.33038 5.37748 1.44495 5.62279 1.65592C5.8681 1.86689 6.02833 2.15986 6.07361 2.48023C6.15803 3.12027 6.31458 3.74871 6.54028 4.35356C6.62998 4.59218 6.64939 4.8515 6.59622 5.10081C6.54305 5.35012 6.41952 5.57897 6.24028 5.76023L5.39361 6.60689C6.34265 8.27592 7.72458 9.65786 9.39361 10.6069L10.2403 9.76023C10.4215 9.58099 10.6504 9.45746 10.8997 9.40429C11.149 9.35112 11.4083 9.37053 11.6469 9.46023C12.2518 9.68593 12.8802 9.84248 13.5203 9.92689C13.8441 9.97258 14.1399 10.1357 14.3513 10.3852C14.5627 10.6348 14.6751 10.9533 14.6669 11.2802Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 <defs>
 <clipPath id="clip0_5639_632">
@@ -52,8 +52,8 @@ export const RIGHT_ARROW = `<svg width="20" height="20" viewBox="0 0 20 20" fill
 `;
 
 export const WALLET_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.6667 4.66667V2.66667C12.6667 2.48986 12.5964 2.32029 12.4714 2.19526C12.3464 2.07024 12.1768 2 12 2H3.33333C2.97971 2 2.64057 2.14048 2.39052 2.39052C2.14048 2.64057 2 2.97971 2 3.33333C2 3.68696 2.14048 4.02609 2.39052 4.27614C2.64057 4.52619 2.97971 4.66667 3.33333 4.66667H13.3333C13.5101 4.66667 13.6797 4.7369 13.8047 4.86193C13.9298 4.98695 14 5.15652 14 5.33333V8M14 8H12C11.6464 8 11.3072 8.14048 11.0572 8.39052C10.8071 8.64057 10.6667 8.97971 10.6667 9.33333C10.6667 9.68696 10.8071 10.0261 11.0572 10.2761C11.3072 10.5262 11.6464 10.6667 12 10.6667H14C14.1768 10.6667 14.3464 10.5964 14.4714 10.4714C14.5964 10.3464 14.6667 10.1768 14.6667 10V8.66667C14.6667 8.48986 14.5964 8.32029 14.4714 8.19526C14.3464 8.07024 14.1768 8 14 8Z" stroke="#3385FF" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2 3.3335V12.6668C2 13.0205 2.14048 13.3596 2.39052 13.6096C2.64057 13.8597 2.97971 14.0002 3.33333 14.0002H13.3333C13.5101 14.0002 13.6797 13.9299 13.8047 13.8049C13.9298 13.6799 14 13.5103 14 13.3335V10.6668" stroke="#3385FF" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.6667 4.66667V2.66667C12.6667 2.48986 12.5964 2.32029 12.4714 2.19526C12.3464 2.07024 12.1768 2 12 2H3.33333C2.97971 2 2.64057 2.14048 2.39052 2.39052C2.14048 2.64057 2 2.97971 2 3.33333C2 3.68696 2.14048 4.02609 2.39052 4.27614C2.64057 4.52619 2.97971 4.66667 3.33333 4.66667H13.3333C13.5101 4.66667 13.6797 4.7369 13.8047 4.86193C13.9298 4.98695 14 5.15652 14 5.33333V8M14 8H12C11.6464 8 11.3072 8.14048 11.0572 8.39052C10.8071 8.64057 10.6667 8.97971 10.6667 9.33333C10.6667 9.68696 10.8071 10.0261 11.0572 10.2761C11.3072 10.5262 11.6464 10.6667 12 10.6667H14C14.1768 10.6667 14.3464 10.5964 14.4714 10.4714C14.5964 10.3464 14.6667 10.1768 14.6667 10V8.66667C14.6667 8.48986 14.5964 8.32029 14.4714 8.19526C14.3464 8.07024 14.1768 8 14 8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 3.3335V12.6668C2 13.0205 2.14048 13.3596 2.39052 13.6096C2.64057 13.8597 2.97971 14.0002 3.33333 14.0002H13.3333C13.5101 14.0002 13.6797 13.9299 13.8047 13.8049C13.9298 13.6799 14 13.5103 14 13.3335V10.6668" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
 

package/src/react/web/hooks/transaction/useSendTransaction.tsx

@@ -185,6 +185,8 @@ function ModalContent(props: ModalProps) {
       onDone={() => {
         setScreen("execute-tx");
       }}
+      connectOptions={undefined}
+      onBack={undefined}
     />
   );
 }
@@ -224,33 +226,44 @@ function ExecutingTxScreen(props: {
   return (
     <Container p="lg">
       <ModalHeader title="Transaction" />
+
       <Spacer y="xxl" />
       <Spacer y="xxl" />
+
       <Container flex="row" center="x">
         {status === "loading" && <Spinner size="3xl" color="accentText" />}
-        status === "failed" && <AccentFailIcon size={iconSize["3xl"]} />
-        status === "sent" && (
-        <Container color="success" flex="row" center="both">
-          <CheckCircledIcon width={iconSize["3xl"]} height={iconSize["3xl"]} />
-        </Container>
-        )
+        {status === "failed" && <AccentFailIcon size={iconSize["3xl"]} />}
+        {status === "sent" && (
+          <Container color="success" flex="row" center="both">
+            <CheckCircledIcon
+              width={iconSize["3xl"]}
+              height={iconSize["3xl"]}
+            />
+          </Container>
+        )}
       </Container>
       <Spacer y="lg" />
+
       <Text color="primaryText" center size="lg">
-        status === "loading" && "Sending transaction"status === "failed" &&
-        "Transaction failed"status === "sent" && "Transaction sent"
+        {status === "loading" && "Sending transaction"}
+        {status === "failed" && "Transaction failed"}
+        {status === "sent" && "Transaction sent"}
       </Text>
+
       <Spacer y="xxl" />
       <Spacer y="xxl" />
-      status === "failed" && (
-      <Button variant="accent" fullWidth onClick={sendTx}>
-        Try Again
-      </Button>
-      )status === "sent" && (
-      <Button variant="accent" fullWidth onClick={props.closeModal}>
-        Done
-      </Button>
-      )
+
+      {status === "failed" && (
+        <Button variant="accent" fullWidth onClick={sendTx}>
+          Try Again
+        </Button>
+      )}
+
+      {status === "sent" && (
+        <Button variant="accent" fullWidth onClick={props.closeModal}>
+          Done
+        </Button>
+      )}
     </Container>
   );
 }

package/src/react/web/ui/ConnectWallet/ConnectButton.tsx

@@ -222,7 +222,7 @@ function ConnectButtonInner(
   if (siweAuth.requiresAuth) {
     // loading state if loading
     // TODO: figure out a way to consolidate the loading states with the ones from locale loading
-    if (siweAuth.isLoading) {
+    if (siweAuth.isLoading || siweAuth.isLoggingIn || siweAuth.isLoggingOut) {
       return (
         <AnimatedButton
           disabled={true}
@@ -304,6 +304,17 @@ function ConnectButtonInner(
       switchButton={props.switchButton}
       client={props.client}
       connectLocale={locale}
+      connectOptions={{
+        accountAbstraction: props.accountAbstraction,
+        appMetadata: props.appMetadata,
+        chain: props.chain,
+        chains: props.chains,
+        connectModal: props.connectModal,
+        recommendedWallets: props.recommendedWallets,
+        showAllWallets: props.showAllWallets,
+        walletConnect: props.walletConnect,
+        wallets: props.wallets,
+      }}
     />
   );
 }

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -6,6 +6,7 @@ import {
   PaperPlaneIcon,
   PinBottomIcon,
   PlusIcon,
+  ShuffleIcon,
   TextAlignJustifyIcon,
 } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
@@ -15,6 +16,8 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import { getContract } from "../../../../contract/contract.js";
 import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
+import type { AppMetadata } from "../../../../wallets/types.js";
 import {
   CustomThemeProvider,
   useCustomTheme,
@@ -29,6 +32,7 @@ import {
 } from "../../../core/design-system/index.js";
 import type {
   ConnectButtonProps,
+  ConnectButton_connectModalOptions,
   ConnectButton_detailsButtonOptions,
   ConnectButton_detailsModalOptions,
   PayUIOptions,
@@ -76,6 +80,7 @@ import { getConnectLocale } from "./locale/getConnectLocale.js";
 import type { ConnectLocale } from "./locale/types.js";
 import { LazyBuyScreen } from "./screens/Buy/LazyBuyScreen.js";
 import { BuyTxHistory } from "./screens/Buy/tx-history/BuyTxHistory.js";
+import { WalletManagerScreen } from "./screens/Details/WalletManagerScreen.js";
 import { ManageWalletScreen } from "./screens/ManageWalletScreen.js";
 import { PrivateKey } from "./screens/PrivateKey.js";
 import { ReceiveFunds } from "./screens/ReceiveFunds.js";
@@ -105,6 +110,7 @@ export const ConnectedWalletDetails: React.FC<{
   switchButton: ConnectButtonProps["switchButton"];
   connectLocale: ConnectLocale;
   client: ThirdwebClient;
+  connectOptions: DetailsModalConnectOptions | undefined;
 }> = (props) => {
   const { connectLocale: locale, client } = props;
 
@@ -137,6 +143,7 @@ export const ConnectedWalletDetails: React.FC<{
         onDisconnect={props.onDisconnect}
         chains={props.chains}
         displayBalanceToken={props.detailsButton?.displayBalanceToken}
+        connectOptions={props.connectOptions}
       />,
     );
   }
@@ -238,6 +245,7 @@ function DetailsModal(props: {
   }) => void;
   chains: Chain[];
   displayBalanceToken?: Record<number, string>;
+  connectOptions: DetailsModalConnectOptions | undefined;
 }) {
   const [screen, setScreen] = useState<WalletDetailsModalScreen>("main");
   const { disconnect } = useDisconnect();
@@ -298,12 +306,12 @@ function DetailsModal(props: {
             client={client}
           />
         ) : (
-          <Skeleton height={iconSize.md} width={iconSize.md} />
+          <Skeleton height={`${iconSize.md}px`} width={`${iconSize.md}px`} />
         )}
       </div>
 
       {chainNameQuery.isLoading ? (
-        <Skeleton height={"16px"} width={"200px"} />
+        <Skeleton height={"16px"} width={"150px"} />
       ) : (
         <Text color="primaryText" multiline>
           {chainNameQuery.name || `Unknown chain #${walletChain?.id}`}
@@ -324,6 +332,21 @@ function DetailsModal(props: {
   let content = (
     <div>
       <Spacer y="xl" />
+
+      <IconButton
+        style={{
+          position: "absolute",
+          top: `${spacing.lg}`,
+          left: `${spacing.sm}`,
+          padding: "3px",
+        }}
+        onClick={() => {
+          setScreen("wallet-manager");
+        }}
+      >
+        <ShuffleIcon width={iconSize.md} height={iconSize.md} />
+      </IconButton>
+
       <Container px="lg" flex="column" center="x">
         {ensAvatarQuery.data ? (
           <Img
@@ -613,6 +636,32 @@ function DetailsModal(props: {
     );
   }
 
+  if (
+    screen === "wallet-manager" &&
+    activeAccount &&
+    walletChain &&
+    activeWallet
+  ) {
+    content = (
+      <WalletManagerScreen
+        onBack={() => setScreen("main")}
+        accountAbstraction={props.connectOptions?.accountAbstraction}
+        appMetadata={props.connectOptions?.appMetadata}
+        chain={props.connectOptions?.chain}
+        chains={props.connectOptions?.chains}
+        client={client}
+        connectLocale={locale}
+        recommendedWallets={props.connectOptions?.recommendedWallets}
+        showAllWallets={!!props.connectOptions?.showAllWallets}
+        walletConnect={props.connectOptions?.walletConnect}
+        wallets={props.connectOptions?.wallets}
+        activeAccount={activeAccount}
+        activeChain={walletChain}
+        activeWallet={activeWallet}
+      />
+    );
+  }
+
   if (screen === "network-switcher") {
     content = (
       <NetworkSelectorContent
@@ -718,6 +767,8 @@ function DetailsModal(props: {
         payOptions={props.detailsModal?.payOptions || {}}
         theme={typeof props.theme === "string" ? props.theme : props.theme.type}
         onDone={closeModal}
+        connectOptions={undefined}
+        buyForTx={undefined}
       />
     );
   }
@@ -943,6 +994,20 @@ function SwitchNetworkButton(props: {
   );
 }
 
+export type DetailsModalConnectOptions = {
+  connectModal?: ConnectButton_connectModalOptions;
+  walletConnect?: {
+    projectId?: string;
+  };
+  accountAbstraction?: SmartWalletOptions;
+  wallets?: Wallet[];
+  appMetadata?: AppMetadata;
+  chain?: Chain;
+  chains?: Chain[];
+  recommendedWallets?: Wallet[];
+  showAllWallets?: boolean;
+};
+
 export type UseWalletDetailsModalOptions = {
   /**
    * A client is the entry point to the thirdweb SDK.
@@ -1115,6 +1180,11 @@ export type UseWalletDetailsModalOptions = {
    * ```
    */
   displayBalanceToken?: Record<number, string>;
+
+  /**
+   * Options to configure the Connect UI shown when user clicks the "Connect Wallet" button in the Wallet Switcher screen.
+   */
+  connectOptions?: DetailsModalConnectOptions;
 };
 
 /**
@@ -1176,6 +1246,7 @@ export function useWalletDetailsModal() {
               closeModal();
             }}
             chains={props.chains || []}
+            connectOptions={props.connectOptions}
           />,
         );
       })

package/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx

@@ -145,6 +145,8 @@ function AllWalletsUI(props: {
                       client={props.client}
                       recommendedWallets={props.recommendedWallets}
                       connectLocale={props.connectLocale}
+                      isActive={false}
+                      badge={undefined}
                     />
                   </li>
                 );

package/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx

@@ -27,7 +27,6 @@ import {
 import { Spacer } from "../../components/Spacer.js";
 import { Container, ModalHeader } from "../../components/basic.js";
 import { Text } from "../../components/text.js";
-import type { LocaleId } from "../../types.js";
 import { AccentFailIcon } from "../icons/AccentFailIcon.js";
 import type { ConnectLocale } from "../locale/types.js";
 import { DeepLinkConnectUI } from "./DeepLinkConnectUI.js";
@@ -48,7 +47,6 @@ export function AnyWalletConnectUI(props: {
   done: () => void;
   onBack?: () => void;
   setModalVisibility: (value: boolean) => void;
-  localeId: LocaleId;
   chain: Chain | undefined;
   chains: Chain[] | undefined;
   client: ThirdwebClient;
@@ -71,10 +69,11 @@ export function AnyWalletConnectUI(props: {
   const { wallet } = props;
   const walletInfo = useWalletInfo(props.wallet.id);
 
+  const localeId = props.connectLocale.id;
   const localeFnQuery = useQuery({
-    queryKey: ["injectedWalletLocale", props.localeId, walletInfo.data?.name],
+    queryKey: ["injectedWalletLocale", localeId, walletInfo.data?.name],
     queryFn: async () => {
-      return getInjectedWalletLocale(props.localeId);
+      return getInjectedWalletLocale(localeId);
     },
     refetchOnWindowFocus: false,
     refetchOnMount: false,
@@ -268,7 +267,6 @@ export function AnyWalletConnectUI(props: {
           size={props.size}
           connectLocale={props.connectLocale}
           meta={props.meta}
-          localeId={props.localeId}
         />
       </Suspense>
     );
@@ -285,7 +283,6 @@ export function AnyWalletConnectUI(props: {
           client={props.client}
           size={props.size}
           meta={props.meta}
-          localeId={props.localeId}
           connectLocale={props.connectLocale}
         />
       </Suspense>

package/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -246,12 +246,13 @@ const ConnectEmbedContent = (props: {
         // welcomeScreen={undefined}
         welcomeScreen={undefined}
         isEmbed={props.isEmbed}
-        localeId={props.localeId}
         onConnect={props.onConnect}
         recommendedWallets={props.recommendedWallets}
         showAllWallets={props.showAllWallets}
         walletConnect={props.walletConnect}
         wallets={props.wallets}
+        modalHeader={undefined}
+        walletIdsToHide={undefined}
       />
     );
   }
@@ -271,7 +272,7 @@ const ConnectEmbedContent = (props: {
   );
 };
 
-const EmbedContainer = /* @__PURE__ */ StyledDiv<{
+export const EmbedContainer = /* @__PURE__ */ StyledDiv<{
   modalSize: "compact" | "wide";
 }>((props) => {
   const { modalSize } = props;

package/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx

@@ -146,11 +146,12 @@ const ConnectModal = (props: ConnectModalOptions) => {
         onConnect={props.onConnect}
         recommendedWallets={props.recommendedWallets}
         wallets={props.wallets}
-        localeId={props.localeId}
         chain={props.chain}
         showAllWallets={props.showAllWallets}
         chains={props.chains}
         walletConnect={props.walletConnect}
+        modalHeader={undefined}
+        walletIdsToHide={undefined}
       />
     </Modal>
   );

package/src/react/web/ui/ConnectWallet/Modal/ConnectModalContent.tsx

@@ -4,15 +4,16 @@ import type { Chain } from "../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
+import type { WalletId } from "../../../../../wallets/wallet-types.js";
 import {
   type SiweAuthOptions,
   useSiweAuth,
 } from "../../../../core/hooks/auth/useSiweAuth.js";
 import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
 import { useSetActiveWallet } from "../../../hooks/wallets/useSetActiveWallet.js";
+import { connectionManager } from "../../../index.js";
 import { useSetSelectionData } from "../../../providers/wallet-ui-states-provider.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
-import type { LocaleId } from "../../types.js";
 import { WalletSelector } from "../WalletSelector.js";
 import { onModalUnmount, reservedScreens } from "../constants.js";
 import type { ConnectLocale } from "../locale/types.js";
@@ -34,7 +35,7 @@ const AllWalletsUI = /* @__PURE__ */ lazy(() => import("./AllWalletsUI.js"));
  */
 export const ConnectModalContent = (props: {
   screenSetup: ScreenSetup;
-  onClose: () => void;
+  onClose: (() => void) | undefined;
   isOpen: boolean;
   setModalVisibility: (value: boolean) => void;
   shouldSetActive: boolean;
@@ -55,7 +56,6 @@ export const ConnectModalContent = (props: {
   client: ThirdwebClient;
   isEmbed: boolean;
   recommendedWallets: Wallet[] | undefined;
-  localeId: LocaleId;
   chain: Chain | undefined;
   chains: Chain[] | undefined;
   showAllWallets: boolean | undefined;
@@ -64,6 +64,13 @@ export const ConnectModalContent = (props: {
         projectId?: string;
       }
     | undefined;
+  modalHeader:
+    | {
+        title: string;
+        onBack: () => void;
+      }
+    | undefined;
+  walletIdsToHide: WalletId[] | undefined;
 }) => {
   const { setModalVisibility, onClose, shouldSetActive } = props;
   const { screen, setScreen, initialScreen } = props.screenSetup;
@@ -78,6 +85,8 @@ export const ConnectModalContent = (props: {
     (wallet: Wallet) => {
       if (shouldSetActive) {
         setActiveWallet(wallet);
+      } else {
+        connectionManager.addConnectedWallet(wallet);
       }
 
       if (props.onConnect) {
@@ -93,7 +102,8 @@ export const ConnectModalContent = (props: {
       if (showSignatureScreen) {
         setScreen(reservedScreens.signIn);
       } else {
-        onClose();
+        setScreen(initialScreen);
+        onClose?.();
       }
     },
     [
@@ -105,6 +115,7 @@ export const ConnectModalContent = (props: {
       setScreen,
       setSelectionData,
       shouldSetActive,
+      initialScreen,
     ],
   );
 
@@ -117,9 +128,6 @@ export const ConnectModalContent = (props: {
     <WalletSelector
       title={props.meta.title || props.connectLocale.defaultModalTitle}
       wallets={props.wallets}
-      onGetStarted={() => {
-        setScreen(reservedScreens.getStarted);
-      }}
       selectWallet={(newWallet) => {
         setSelectionData({});
         if (newWallet.onConnectRequested) {
@@ -142,13 +150,14 @@ export const ConnectModalContent = (props: {
       isEmbed={props.isEmbed}
       recommendedWallets={props.recommendedWallets}
       accountAbstraction={props.accountAbstraction}
-      localeId={props.localeId}
       chain={props.chain}
       showAllWallets={props.showAllWallets}
       chains={props.chains}
       walletConnect={props.walletConnect}
       meta={props.meta}
       size={props.size}
+      modalHeader={props.modalHeader}
+      walletIdsToHide={props.walletIdsToHide}
     />
   );
 
@@ -191,7 +200,6 @@ export const ConnectModalContent = (props: {
           setModalVisibility={props.setModalVisibility}
           meta={props.meta}
           size={props.size}
-          localeId={props.localeId}
           chain={props.chain}
           chains={props.chains}
           client={props.client}
@@ -215,7 +223,6 @@ export const ConnectModalContent = (props: {
         client={props.client}
         meta={props.meta}
         size={props.size}
-        localeId={props.localeId}
         walletConnect={props.walletConnect}
         connectLocale={props.connectLocale}
       />

package/src/react/web/ui/ConnectWallet/Modal/ConnectModalInline.tsx

@@ -160,13 +160,14 @@ function ConnectModalInlineContent(props: {
         meta={props.meta}
         welcomeScreen={props.welcomeScreen}
         isEmbed={props.isEmbed}
-        localeId={props.localeId}
         onConnect={props.onConnect}
         recommendedWallets={props.recommendedWallets}
         showAllWallets={props.showAllWallets}
         wallets={props.wallets}
         chains={props.chains}
         walletConnect={props.walletConnect}
+        modalHeader={undefined}
+        walletIdsToHide={undefined}
       />
 
       {/* close icon */}