thirdweb 5.30.0-nightly-991cb72bdb1b94fcf0f9a3de36b2ec8ee07ae5ec-20240619000538 → 5.30.0-nightly-fab5cd43bed972b0a3f70f0f39a790349672ba72-20240620192731

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/icons/CoinsIcon.tsx

@@ -0,0 +1,46 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const CoinsIcon: IconFC = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      role="presentation"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M18.0901 10.37C19.0354 10.7224 19.8766 11.3075 20.5358 12.0712C21.1951 12.8349 21.6512 13.7524 21.8618 14.7391C22.0725 15.7257 22.031 16.7495 21.7411 17.7158C21.4513 18.6822 20.9224 19.5598 20.2035 20.2676C19.4846 20.9754 18.5988 21.4905 17.6281 21.7652C16.6573 22.04 15.633 22.0655 14.6498 21.8395C13.6666 21.6134 12.7562 21.1431 12.0029 20.472C11.2496 19.8009 10.6777 18.9507 10.3401 18"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7 6H8V10"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.7101 13.88L17.4101 14.59L14.5901 17.41"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/react/web/ui/ConnectWallet/icons/{WalletIcon.tsx → GenericWalletIcon.tsx}

@@ -3,7 +3,7 @@ import type { IconFC } from "./types.js";
 /**
  * @internal
  */
-export const WalletIcon: IconFC = (props) => {
+export const GenericWalletIcon: IconFC = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

package/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx

@@ -0,0 +1,32 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const OutlineWalletIcon: IconFC = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      role="presentation"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19 7V4C19 3.73478 18.8946 3.48043 18.7071 3.29289C18.5196 3.10536 18.2652 3 18 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5C3 5.53043 3.21071 6.03914 3.58579 6.41421C3.96086 6.78929 4.46957 7 5 7H20C20.2652 7 20.5196 7.10536 20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V12M21 12H18C17.4696 12 16.9609 12.2107 16.5858 12.5858C16.2107 12.9609 16 13.4696 16 14C16 14.5304 16.2107 15.0391 16.5858 15.4142C16.9609 15.7893 17.4696 16 18 16H21C21.2652 16 21.5196 15.8946 21.7071 15.7071C21.8946 15.5196 22 15.2652 22 15V13C22 12.7348 21.8946 12.4804 21.7071 12.2929C21.5196 12.1054 21.2652 12 21 12Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H20C20.2652 21 20.5196 20.8946 20.7071 20.7071C20.8946 20.5196 21 20.2652 21 20V16"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/react/web/ui/ConnectWallet/icons/WalletConnectIcon.tsx

@@ -0,0 +1,22 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const WalletConnectIcon: IconFC = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      fill="none"
+      role="presentation"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.91334 7.73539C8.82714 4.0882 15.1729 4.0882 19.0867 7.73539L19.5577 8.17432C19.7534 8.35664 19.7534 8.65232 19.5577 8.83464L17.9464 10.3362C17.8485 10.4274 17.6899 10.4274 17.5921 10.3362L16.9439 9.73217C14.2134 7.18782 9.7866 7.18782 7.05614 9.73217L6.36193 10.379C6.26407 10.4702 6.10547 10.4702 6.0076 10.379L4.39629 8.87747C4.20056 8.69515 4.20056 8.39947 4.39629 8.21715L4.91334 7.73539ZM22.4191 10.8407L23.8532 12.1771C24.0489 12.3594 24.0489 12.6551 23.8532 12.8374L17.3867 18.8632C17.1911 19.0456 16.8738 19.0456 16.6781 18.8632L12.0886 14.5865C12.0397 14.5409 11.9604 14.5409 11.9115 14.5865L7.32202 18.8632C7.12638 19.0456 6.8091 19.0456 6.61337 18.8632L0.146771 12.8373C-0.0489237 12.655 -0.0489237 12.3593 0.146771 12.177L1.58087 10.8406C1.77657 10.6582 2.09384 10.6582 2.28954 10.8406L6.87907 15.1173C6.928 15.163 7.0073 15.163 7.05623 15.1173L11.6456 10.8406C11.8412 10.6582 12.1585 10.6582 12.3542 10.8406L16.9438 15.1173C16.9927 15.163 17.072 15.163 17.1209 15.1173L21.7105 10.8407C21.9061 10.6583 22.2234 10.6583 22.4191 10.8407Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx

@@ -18,7 +18,7 @@ import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
 import type { TokenInfo } from "../../../defaultTokens.js";
-import { WalletIcon } from "../../../icons/WalletIcon.js";
+import { GenericWalletIcon } from "../../../icons/GenericWalletIcon.js";
 import { formatTokenBalance } from "../../formatTokenBalance.js";
 import { type NativeToken, isNativeToken } from "../../nativeToken.js";
 
@@ -126,7 +126,7 @@ export function PayWithCrypto(props: {
         )}
 
         <Container flex="row" gap="xxs" center="y" color="secondaryText">
-          <WalletIcon size={fontSize.xs} />
+          <GenericWalletIcon size={fontSize.xs} />
           {balanceQuery.data ? (
             <Text size="xs" color="secondaryText" weight={500}>
               {formatTokenBalance(balanceQuery.data, true)}

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

@@ -0,0 +1,124 @@
+"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";
+import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Container, Line, ModalHeader } from "../../components/basic.js";
+import { Text } from "../../components/text.js";
+import { MenuButton } from "../MenuButton.js";
+import { KeyIcon } from "../icons/KeyIcon.js";
+import { WalletConnectIcon } from "../icons/WalletConnectIcon.js";
+import type { ConnectLocale } from "../locale/types.js";
+import type { WalletDetailsModalScreen } from "./types.js";
+
+/**
+ * @internal
+ */
+export function ManageWalletScreen(props: {
+  onBack: () => void;
+  setScreen: (screen: WalletDetailsModalScreen) => void;
+  closeModal: () => void;
+  locale: ConnectLocale;
+  client: ThirdwebClient;
+}) {
+  const activeWallet = useActiveWallet();
+
+  return (
+    <Container
+      style={{
+        minHeight: "300px",
+      }}
+    >
+      <Container p="lg">
+        <ModalHeader title="Manage Wallet" onBack={props.onBack} />
+      </Container>
+      <Line />
+      <Container
+        px="sm"
+        scrollY
+        style={{
+          maxHeight: "500px",
+        }}
+      >
+        <Spacer y="md" />
+        <Container style={{ position: "relative", height: "250px" }}>
+          {/* Switch Metamask Account (only shows if the active wallet is MetaMask) */}
+          <SwitchMetamaskAccount
+            closeModal={props.closeModal}
+            connectLocale={props.locale}
+          />
+
+          {/* Wallet Connect Receiver */}
+          <MenuButton
+            onClick={() => {
+              props.setScreen("wallet-connect-receiver");
+            }}
+            style={{
+              fontSize: fontSize.sm,
+            }}
+          >
+            <WalletConnectIcon size={iconSize.md} />
+            <Text color="primaryText">Connect an App</Text>
+          </MenuButton>
+
+          {/* Private Key Export (if enabled) */}
+          {activeWallet &&
+            ((isInAppWallet(activeWallet) &&
+              !activeWallet.getConfig()?.hidePrivateKeyExport) ||
+              isEcosystemWallet(activeWallet)) && (
+              <MenuButton
+                onClick={() => {
+                  props.setScreen("private-key");
+                }}
+                style={{
+                  fontSize: fontSize.sm,
+                }}
+              >
+                <KeyIcon size={iconSize.md} />
+                <Text color="primaryText">Export Private Key</Text>
+              </MenuButton>
+            )}
+        </Container>
+        <Spacer y="lg" />
+      </Container>
+    </Container>
+  );
+}
+
+function SwitchMetamaskAccount(props: {
+  closeModal: () => void;
+  connectLocale: ConnectLocale;
+}) {
+  const wallet = useActiveWallet();
+  const connectLocale = props.connectLocale;
+
+  if (wallet?.id !== "io.metamask") {
+    return null;
+  }
+
+  const injectedMetamaskProvider = injectedProvider("io.metamask");
+
+  if (!injectedMetamaskProvider) {
+    return null;
+  }
+
+  return (
+    <MenuButton
+      type="button"
+      onClick={async () => {
+        await injectedMetamaskProvider.request({
+          method: "wallet_requestPermissions",
+          params: [{ eth_accounts: {} }],
+        });
+        props.closeModal();
+      }}
+    >
+      <ShuffleIcon width={iconSize.md} height={iconSize.md} />
+      <Text color="primaryText">{connectLocale.switchAccount}</Text>
+    </MenuButton>
+  );
+}