thirdweb 5.30.0-nightly-33777df88fb190c2af8ad25e4930040884996f1e-20240620000630 → 5.30.0-nightly-d320777eea5404f596aa39b2b49b5165d3e1959a-20240621000551

package/src/react/web/ui/ConnectWallet/ConnectButtonProps.ts

@@ -1,6 +1,6 @@
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
-import type { Wallet } from "../../../../wallets/interfaces/wallet.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 type { Theme } from "../../../core/design-system/index.js";
@@ -525,13 +525,11 @@ export type ConnectButtonProps = {
    * ```tsx
    * <ConnectButton
    *   connectButton={{
-   *     connectButton: {
    *       label: "Connect",
    *       className: "my-custom-class",
    *       style: {
    *         borderRadius: "10px",
    *       },
-   *     },
    *   }}
    * />;
    * ```
@@ -691,17 +689,20 @@ export type ConnectButtonProps = {
   onConnect?: (wallet: Wallet) => void;
 
   /**
-   * Called when a wallet is disconnected.
+   * Called when the user disconnects the wallet by clicking on the "Disconnect Wallet" button in the `ConnectButton`'s Details Modal.
    *
    * ```tsx
    * <ConnectButton
-   *  onDisconnect={() => {
-   *    console.log("disconnected")
+   *  onDisconnect={({ wallet, account }) => {
+   *    console.log("disconnected", wallet, account)
    *  }}
    * />
    * ```
    */
-  onDisconnect?: () => void;
+  onDisconnect?: (info: {
+    wallet: Wallet;
+    account: Account;
+  }) => void;
 
   /**
    * Configure options for WalletConnect

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

@@ -17,6 +17,7 @@ import { getContract } from "../../../../contract/contract.js";
 import { resolveAvatar } from "../../../../extensions/ens/resolve-avatar.js";
 import { resolveName } from "../../../../extensions/ens/resolve-name.js";
 import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
+import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import {
   CustomThemeProvider,
   useCustomTheme,
@@ -94,7 +95,10 @@ const LocalhostChainId = 1337;
  * @internal
  */
 export const ConnectedWalletDetails: React.FC<{
-  onDisconnect: () => void;
+  onDisconnect: (info: {
+    wallet: Wallet;
+    account: Account;
+  }) => void;
   detailsButton?: ConnectButton_detailsButtonOptions;
   detailsModal?: ConnectButton_detailsModalOptions;
   theme: "light" | "dark" | Theme;
@@ -229,7 +233,10 @@ function DetailsModal(props: {
   theme: "light" | "dark" | Theme;
   supportedTokens?: SupportedTokens;
   closeModal: () => void;
-  onDisconnect: () => void;
+  onDisconnect: (info: {
+    wallet: Wallet;
+    account: Account;
+  }) => void;
   chains: Chain[];
   displayBalanceToken?: Record<number, string>;
 }) {
@@ -257,10 +264,10 @@ function DetailsModal(props: {
     });
   }
 
-  function handleDisconnect() {
+  function handleDisconnect(info: { wallet: Wallet; account: Account }) {
     setIsOpen(false);
     props.closeModal();
-    props.onDisconnect();
+    props.onDisconnect(info);
   }
 
   const networkSwitcherButton = (
@@ -561,9 +568,12 @@ function DetailsModal(props: {
               data-variant="danger"
               type="button"
               onClick={() => {
-                if (activeWallet) {
+                if (activeWallet && activeAccount) {
                   disconnect(activeWallet);
-                  handleDisconnect();
+                  handleDisconnect({
+                    account: activeAccount,
+                    wallet: activeWallet,
+                  });
                 }
               }}
             >
@@ -635,6 +645,7 @@ function DetailsModal(props: {
         onBack={() => {
           setScreen("manage-wallet");
         }}
+        wallet={activeWallet}
         client={client}
       />
     );
@@ -725,7 +736,7 @@ function DetailsModal(props: {
   );
 }
 
-const WalletInfoButton = /* @__PURE__ */ StyledButton(() => {
+const WalletInfoButton = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
     all: "unset",
@@ -839,9 +850,7 @@ function ConnectedToSmartWallet(props: {
   return null;
 }
 
-function InAppWalletUserInfo(props: {
-  client: ThirdwebClient;
-}) {
+function InAppWalletUserInfo(props: { client: ThirdwebClient }) {
   const { client } = props;
   const account = useActiveAccount();
 
@@ -977,32 +986,38 @@ export type UseWalletDetailsModalOptions = {
    * supportedTokens prop allows you to customize this list as shown below which shows  "Dai Stablecoin" when users wallet is connected to the "Base" mainnet.
    *
    * ```tsx
-   * import { ConnectButton } from 'thirdweb/react';
+   * import { useWalletDetailsModal } from 'thirdweb/react';
    *
    * function Example() {
+   *   const detailsModal = useWalletDetailsModal();
+   *
+   *   function handleClick() {
+   *      detailsModal.open({
+   *        client,
+   *        supportedTokens:{
+   * 				  84532: [
+   * 					  {
+   * 						  address: '0x50c5725949A6F0c72E6C4a641F24049A917DB0Cb', // token contract address
+   * 						  name: 'Dai Stablecoin',
+   * 						  symbol: 'DAI',
+   * 						  icon: 'https://assets.coingecko.com/coins/images/9956/small/Badge_Dai.png?1687143508',
+   * 					  },
+   * 				  ],
+   * 			  }
+   *      });
+   *   }
+   *
    *   return (
-   * 		<ConnectButton
-   * 			supportedTokens={{
-   *        // when connected to "Base" mainnet - show balance of DAI stablecoin
-   * 				84532: [
-   * 					{
-   * 						address: '0x50c5725949A6F0c72E6C4a641F24049A917DB0Cb', // token contract address
-   * 						name: 'Dai Stablecoin',
-   * 						symbol: 'DAI',
-   * 						icon: 'https://assets.coingecko.com/coins/images/9956/small/Badge_Dai.png?1687143508',
-   * 					},
-   * 				],
-   * 			}}
-   * 		/>
+   * 		<button onClick={handleClick}> show wallet details </button>
    * 	);
    * }
    * ```
    */
   supportedTokens?: SupportedTokens;
   /**
-   * By default - ConnectButton UI uses the `en-US` locale for english language users.
+   * By default - Details Modal UI uses the `en-US` locale for english language users.
    *
-   * You can customize the language used in the ConnectButton UI by setting the `locale` prop.
+   * You can customize the language used in the Details Modal UI by setting the `locale` prop.
    *
    * Refer to the [`LocaleId`](https://portal.thirdweb.com/references/typescript/v5/LocaleId) type for supported locales.
    */
@@ -1044,6 +1059,35 @@ export type UseWalletDetailsModalOptions = {
    */
   hideDisconnect?: boolean;
 
+  /**
+   * Callback to be called when a wallet is disconnected by clicking the "Disconnect Wallet" button in the Wallet Details Modal.
+   *
+   * ```tsx
+   * import { useWalletDetailsModal } from 'thirdweb/react';
+   *
+   * function Example() {
+   *   const detailsModal = useWalletDetailsModal();
+   *
+   *   function handleClick() {
+   *      detailsModal.open({
+   *        client,
+   *        onDisconnect: ({ wallet, account }) => {
+   *           console.log('disconnected', wallet, account);
+   *        }
+   *      });
+   *   }
+   *
+   *   return (
+   * 		<button onClick={handleClick}> wallet details </button>
+   * 	);
+   * }
+   * ```
+   */
+  onDisconnect?: (info: {
+    wallet: Wallet;
+    account: Account;
+  }) => void;
+
   /**
    * Render custom UI at the bottom of the Details Modal
    */
@@ -1057,7 +1101,7 @@ export type UseWalletDetailsModalOptions = {
   payOptions?: PayUIOptions;
 
   /**
-   * Display the balance of a token instead of the native token in `ConnectButton` details button.
+   * Display the balance of a token instead of the native token
    * @example
    * ```tsx
    * const displayBalanceToken = {
@@ -1083,10 +1127,10 @@ export type UseWalletDetailsModalOptions = {
  * });
  *
  * function Example() {
- *   const { open } = useWalletDetailsModal();
+ *   const detailsModal = useWalletDetailsModal();
  *
  *   function handleClick() {
- *      open({ client, theme: 'light' });
+ *      detailsModal.open({ client, theme: 'light' });
  *   }
  *
  *   return <button onClick={handleClick}> Show Wallet Details </button>
@@ -1123,7 +1167,10 @@ export function useWalletDetailsModal() {
             theme={props.theme || "dark"}
             supportedTokens={props.supportedTokens}
             closeModal={closeModal}
-            onDisconnect={closeModal}
+            onDisconnect={(info) => {
+              props.onDisconnect?.(info);
+              closeModal();
+            }}
             chains={props.chains || []}
           />,
         );

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

@@ -6,7 +6,7 @@ import {
 } from "../../../core/design-system/index.js";
 import { StyledButton } from "../design-system/elements.js";
 
-export const MenuButton = /* @__PURE__ */ StyledButton(() => {
+export const MenuButton = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
     all: "unset",

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

@@ -170,7 +170,7 @@ function AllWalletsUI(props: {
 }
 
 const StyledMagnifyingGlassIcon = /* @__PURE__ */ styled(MagnifyingGlassIcon)(
-  () => {
+  (_) => {
     const theme = useCustomTheme();
     return {
       color: theme.colors.secondaryText,

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

@@ -1,6 +1,6 @@
 "use client";
 import { useQuery } from "@tanstack/react-query";
-import { Suspense, lazy, useState } from "react";
+import { Suspense, lazy, useEffect, useState } from "react";
 import { isMobile } from "../../../../../utils/web/isMobile.js";
 import type {
   DeepLinkSupportedWalletIds,
@@ -8,9 +8,14 @@ import type {
   WCSupportedWalletIds,
 } from "../../../../../wallets/__generated__/wallet-ids.js";
 import { COINBASE } from "../../../../../wallets/constants.js";
+import { isEcosystemWallet } from "../../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import { getInstalledWalletProviders } from "../../../../../wallets/injected/mipdStore.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
+import type { EcosystemWalletId } from "../../../../../wallets/wallet-types.js";
+import { iconSize } from "../../../../core/design-system/index.js";
 import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
+import { useSetSelectionData } from "../../../providers/wallet-ui-states-provider.js";
+import EcosystemWalletConnectUI from "../../../wallets/ecosystem/EcosystemWalletConnectUI.js";
 import { getInjectedWalletLocale } from "../../../wallets/injected/locale/getInjectedWalletLocale.js";
 import { GetStartedScreen } from "../../../wallets/shared/GetStartedScreen.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
@@ -18,7 +23,11 @@ import {
   WalletConnectConnection,
   WalletConnectStandaloneConnection,
 } from "../../../wallets/shared/WalletConnectConnection.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Container, ModalHeader } from "../../components/basic.js";
+import { Text } from "../../components/text.js";
 import { useWalletInfo } from "../../hooks/useWalletInfo.js";
+import { AccentFailIcon } from "../icons/AccentFailIcon.js";
 import { DeepLinkConnectUI } from "./DeepLinkConnectUI.js";
 import { InjectedConnectUI } from "./InjectedConnectUI.js";
 
@@ -41,26 +50,76 @@ export function AnyWalletConnectUI(props: {
   const [screen, setScreen] = useState<"main" | "get-started">("main");
   const { wallet } = props;
   const walletInfo = useWalletInfo(props.wallet.id);
+  const setSelectionData = useSetSelectionData();
   const localeId = useConnectUI().locale;
 
-  const localeQuery = useQuery({
+  // biome-ignore lint/correctness/useExhaustiveDependencies: reset the selection data when the wallet changes
+  useEffect(() => {
+    setSelectionData({});
+  }, [wallet.id]);
+
+  const localeFnQuery = useQuery({
     queryKey: ["injectedWalletLocale", localeId, walletInfo.data?.name],
     queryFn: async () => {
-      if (!walletInfo.data) {
-        throw new Error("Wallet info not available");
-      }
-      const w = await getInjectedWalletLocale(localeId);
-      return w(walletInfo.data.name);
+      return getInjectedWalletLocale(localeId);
     },
-    enabled: !!walletInfo.data,
     refetchOnWindowFocus: false,
     refetchOnMount: false,
   });
 
-  if (!walletInfo.data || !localeQuery.data) {
+  if (walletInfo.isLoading || !localeFnQuery.data) {
     return <LoadingScreen />;
   }
 
+  const localeFn = localeFnQuery.data;
+
+  if (!walletInfo.data) {
+    const injectedProvider = getInstalledWalletProviders().find(
+      (w) => w.info.rdns === wallet.id,
+    );
+
+    // Unknown wallet id but it's injected
+    if (injectedProvider) {
+      return (
+        <InjectedConnectUI
+          wallet={props.wallet as Wallet<InjectedSupportedWalletIds>}
+          walletName={injectedProvider.info.name}
+          done={props.done}
+          locale={localeFn(injectedProvider.info.name)}
+          onBack={props.onBack}
+        />
+      );
+    }
+
+    // This will only happen if developer passes a wallet with unknown id and it's not injected
+    // Adding a fallback UI just in case
+    return (
+      <Container animate="fadein" fullHeight flex="column">
+        <Container p="lg">
+          <ModalHeader title="Not Supported" onBack={props.onBack} />
+        </Container>
+        <Container
+          flex="column"
+          expand
+          center="both"
+          p="lg"
+          style={{
+            minHeight: "300px",
+          }}
+        >
+          <AccentFailIcon size={iconSize["3xl"]} />
+          <Spacer y="lg" />
+          <Text color="primaryText" center>
+            Wallet is not supported
+          </Text>
+          <Spacer y="xxl" />
+        </Container>
+      </Container>
+    );
+  }
+
+  const locale = localeFn(walletInfo.data.name);
+
   // if wallet can connect to injected wallet + wallet is injected
   const isInstalled = getInstalledWalletProviders().find(
     (w) => w.info.rdns === walletInfo.data.rdns,
@@ -69,7 +128,7 @@ export function AnyWalletConnectUI(props: {
   if (screen === "get-started") {
     return (
       <GetStartedScreen
-        locale={localeQuery.data}
+        locale={locale}
         wallet={props.wallet}
         walletInfo={walletInfo.data}
         onBack={() => {
@@ -91,7 +150,7 @@ export function AnyWalletConnectUI(props: {
         wallet={props.wallet as Wallet<InjectedSupportedWalletIds>}
         walletInfo={walletInfo.data}
         deepLinkPrefix={walletInfo.data.deepLink.mobile}
-        locale={localeQuery.data}
+        locale={locale}
         onGetStarted={() => {
           setScreen("get-started");
         }}
@@ -104,9 +163,9 @@ export function AnyWalletConnectUI(props: {
     return (
       <InjectedConnectUI
         wallet={props.wallet as Wallet<InjectedSupportedWalletIds>}
-        walletInfo={walletInfo.data}
+        walletName={walletInfo.data.name}
         done={props.done}
-        locale={localeQuery.data}
+        locale={locale}
         onGetStarted={() => {
           setScreen("get-started");
         }}
@@ -120,7 +179,7 @@ export function AnyWalletConnectUI(props: {
     return (
       <Suspense fallback={<LoadingScreen />}>
         <CoinbaseSDKWalletConnectUI
-          locale={localeQuery.data}
+          locale={locale}
           onGetStarted={() => {
             setScreen("get-started");
           }}
@@ -137,7 +196,7 @@ export function AnyWalletConnectUI(props: {
   if (walletInfo.data.mobile.native || walletInfo.data.mobile.universal) {
     return (
       <WalletConnectConnection
-        locale={localeQuery.data}
+        locale={locale}
         onGetStarted={() => {
           setScreen("get-started");
         }}
@@ -153,7 +212,7 @@ export function AnyWalletConnectUI(props: {
   if (props.wallet.id === "walletConnect") {
     return (
       <WalletConnectStandaloneConnection
-        locale={localeQuery.data}
+        locale={locale}
         onBack={props.onBack}
         done={props.done}
         wallet={props.wallet as Wallet<"walletConnect">}
@@ -175,10 +234,22 @@ export function AnyWalletConnectUI(props: {
     );
   }
 
+  if (isEcosystemWallet(props.wallet.id)) {
+    return (
+      <Suspense fallback={<LoadingScreen />}>
+        <EcosystemWalletConnectUI
+          wallet={props.wallet as Wallet<EcosystemWalletId>}
+          done={props.done}
+          goBack={props.onBack}
+        />
+      </Suspense>
+    );
+  }
+
   // if can't connect in any way - show get started screen
   return (
     <GetStartedScreen
-      locale={localeQuery.data}
+      locale={locale}
       wallet={props.wallet}
       walletInfo={walletInfo.data}
       onBack={() => {

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

@@ -383,7 +383,7 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
       return (
         <>
           {autoConnectComp}
-          <CustomThemeProvider theme={props.theme || "dark"}>
+          <CustomThemeProvider theme={props.theme}>
             <EmbedContainer modalSize={modalSize}>
               <LoadingScreen />
             </EmbedContainer>
@@ -491,29 +491,29 @@ const ConnectEmbedContent = (
   );
 };
 
-const EmbedContainer = /* @__PURE__ */ StyledDiv(
-  (props: { modalSize: "compact" | "wide" }) => {
-    const { modalSize } = props;
-    const theme = useCustomTheme();
-    return {
-      color: theme.colors.primaryText,
-      background: theme.colors.modalBg,
-      height: modalSize === "compact" ? "auto" : wideModalMaxHeight,
-      width: modalSize === "compact" ? modalMaxWidthCompact : modalMaxWidthWide,
+const EmbedContainer = /* @__PURE__ */ StyledDiv<{
+  modalSize: "compact" | "wide";
+}>((props) => {
+  const { modalSize } = props;
+  const theme = useCustomTheme();
+  return {
+    color: theme.colors.primaryText,
+    background: theme.colors.modalBg,
+    height: modalSize === "compact" ? "auto" : wideModalMaxHeight,
+    width: modalSize === "compact" ? modalMaxWidthCompact : modalMaxWidthWide,
+    boxSizing: "border-box",
+    position: "relative",
+    lineHeight: "normal",
+    borderRadius: radius.xl,
+    border: `1px solid ${theme.colors.borderColor}`,
+    overflow: "hidden",
+    fontFamily: theme.fontFamily,
+    "& *::selection": {
+      backgroundColor: theme.colors.primaryText,
+      color: theme.colors.modalBg,
+    },
+    "& *": {
       boxSizing: "border-box",
-      position: "relative",
-      lineHeight: "normal",
-      borderRadius: radius.xl,
-      border: `1px solid ${theme.colors.borderColor}`,
-      overflow: "hidden",
-      fontFamily: theme.fontFamily,
-      "& *::selection": {
-        backgroundColor: theme.colors.primaryText,
-        color: theme.colors.modalBg,
-      },
-      "& *": {
-        boxSizing: "border-box",
-      },
-    };
-  },
-);
+    },
+  };
+});

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

@@ -118,7 +118,7 @@ function ConnectModalInlineContent(props: {
   );
 }
 
-const ConnectModalInlineContainer = /* @__PURE__ */ StyledDiv(() => {
+const ConnectModalInlineContainer = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     background: theme.colors.modalBg,

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

@@ -47,7 +47,7 @@ export function ConnectModalCompactLayout(props: {
   );
 }
 
-const LeftContainer = /* @__PURE__ */ StyledDiv(() => {
+const LeftContainer = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     display: "flex",

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

@@ -66,7 +66,7 @@ const pulseAnimation = keyframes`
 }
 `;
 
-const PulsatingContainer = /* @__PURE__ */ StyledDiv(() => {
+const PulsatingContainer = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   return {
     position: "relative",

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

@@ -2,7 +2,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { InjectedSupportedWalletIds } from "../../../../../wallets/__generated__/wallet-ids.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
-import type { WalletInfo } from "../../../../../wallets/wallet-info.js";
 import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { wait } from "../../../../core/utils/wait.js";
 import type { InjectedWalletLocale } from "../../../wallets/injected/locale/types.js";
@@ -12,10 +11,10 @@ import { ConnectingScreen } from "../../../wallets/shared/ConnectingScreen.js";
  * @internal
  */
 export const InjectedConnectUI = (props: {
-  onGetStarted: () => void;
+  onGetStarted?: () => void;
   locale: InjectedWalletLocale;
   wallet: Wallet<InjectedSupportedWalletIds>;
-  walletInfo: WalletInfo;
+  walletName: string;
   onBack?: () => void;
   done: () => void;
 }) => {
@@ -60,7 +59,7 @@ export const InjectedConnectUI = (props: {
         failed: locale.connectionScreen.failed,
       }}
       onBack={props.onBack}
-      walletName={props.walletInfo.name}
+      walletName={props.walletName}
       onGetStarted={props.onGetStarted}
       walletId={props.wallet.id}
       onRetry={() => {

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

@@ -752,7 +752,7 @@ export const ChainButton = /* @__PURE__ */ memo(function ChainButton(props: {
 });
 
 const TabButton = /* @__PURE__ */ (() =>
-  styled.button(() => {
+  styled.button((_) => {
     const theme = useCustomTheme();
     return {
       all: "unset",
@@ -793,7 +793,7 @@ const NetworkListUl = /* @__PURE__ */ StyledUl({
   boxSizing: "border-box",
 });
 
-const NetworkButton = /* @__PURE__ */ StyledButton(() => {
+const NetworkButton = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
     all: "unset",
@@ -820,7 +820,7 @@ const NetworkButton = /* @__PURE__ */ StyledButton(() => {
 });
 
 const StyledMagnifyingGlassIcon = /* @__PURE__ */ styled(MagnifyingGlassIcon)(
-  () => {
+  (_) => {
     const theme = useCustomTheme();
     return {
       color: theme.colors.secondaryText,

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

@@ -8,7 +8,6 @@ import {
   radius,
   spacing,
 } from "../../../core/design-system/index.js";
-// import { localWalletMetadata } from "../../../../wallets/local/index._ts";
 import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
 import { Skeleton } from "../components/Skeleton.js";
 import { WalletImage } from "../components/WalletImage.js";
@@ -68,7 +67,7 @@ export function WalletEntryButton(props: {
   );
 }
 
-export const WalletButton = /* @__PURE__ */ StyledButton(() => {
+export const WalletButton = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
     all: "unset",

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

@@ -614,7 +614,7 @@ const WalletList = /* @__PURE__ */ StyledUl({
   paddingBottom: spacing.lg,
 });
 
-const GradientDiv = /* @__PURE__ */ StyledDiv(() => {
+const GradientDiv = /* @__PURE__ */ StyledDiv((_) => {
   const theme = useCustomTheme();
   theme.colors.modalBg;
   return {

package/src/react/web/ui/ConnectWallet/screens/ManageWalletScreen.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { ShuffleIcon } from "@radix-ui/react-icons";
 import type { ThirdwebClient } from "../../../../../client/client.js";
+import { isEcosystemWallet } from "../../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import { isInAppWallet } from "../../../../../wallets/in-app/core/wallet/index.js";
 import { injectedProvider } from "../../../../../wallets/injected/mipdStore.js";
 import { fontSize, iconSize } from "../../../../core/design-system/index.js";
@@ -66,8 +67,9 @@ export function ManageWalletScreen(props: {
 
           {/* Private Key Export (if enabled) */}
           {activeWallet &&
-            isInAppWallet(activeWallet) &&
-            !activeWallet.getConfig()?.hidePrivateKeyExport && (
+            ((isInAppWallet(activeWallet) &&
+              !activeWallet.getConfig()?.hidePrivateKeyExport) ||
+              isEcosystemWallet(activeWallet)) && (
               <MenuButton
                 onClick={() => {
                   props.setScreen("private-key");