thirdweb 5.30.0-nightly-e7434891354f351d2a399daebdddae9cf1fc817b-20240623000619 → 5.30.0-nightly-3979ff0238ae9b3a0a216e6c2d562eb7206a9fe8-20240626085813

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

@@ -4,7 +4,6 @@ import styled from "@emotion/styled";
 import { useEffect, useMemo, useState } from "react";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
-import { ConnectUIContext } from "../../../core/providers/wallet-connection.js";
 import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
 import { useActiveWalletConnectionStatus } from "../../hooks/wallets/useActiveWalletConnectionStatus.js";
@@ -64,6 +63,12 @@ export function ConnectButton(props: ConnectButtonProps) {
     client: props.client,
   });
 
+  const size = useMemo(() => {
+    return !canFitWideModal() || wallets.length === 1
+      ? "compact"
+      : props.connectModal?.size || "wide";
+  }, [wallets.length, props.connectModal?.size]);
+
   const autoConnectComp = props.autoConnect !== false && (
     <AutoConnect
       appMetadata={props.appMetadata}
@@ -100,38 +105,35 @@ export function ConnectButton(props: ConnectButtonProps) {
   }
 
   return (
-    <ConnectUIContext.Provider
-      value={{
-        appMetadata: props.appMetadata,
-        client: props.client,
-        wallets: wallets,
-        locale: props.locale || "en_US",
-        connectLocale: localeQuery.data,
-        chain: props.chain || props.accountAbstraction?.chain,
-        chains: props.chains,
-        walletConnect: props.walletConnect,
-        accountAbstraction: props.accountAbstraction,
-        recommendedWallets: props.recommendedWallets,
-        showAllWallets: props.showAllWallets,
-        isEmbed: false,
-        connectModal: {
-          ...props.connectModal,
-          size:
-            !canFitWideModal() || wallets.length === 1
-              ? "compact"
-              : props.connectModal?.size || "wide",
-        },
-        onConnect: props.onConnect,
-        onDisconnect: props.onDisconnect,
-        auth: props.auth,
-      }}
-    >
-      <WalletUIStatesProvider theme={props.theme} isOpen={false}>
-        <ConnectButtonInner {...props} connectLocale={localeQuery.data} />
-        <ConnectModal shouldSetActive={true} />
-        {autoConnectComp}
-      </WalletUIStatesProvider>
-    </ConnectUIContext.Provider>
+    <WalletUIStatesProvider theme={props.theme} isOpen={false}>
+      <ConnectButtonInner {...props} connectLocale={localeQuery.data} />
+      <ConnectModal
+        shouldSetActive={true}
+        accountAbstraction={props.accountAbstraction}
+        auth={props.auth}
+        chain={props.chain || props.accountAbstraction?.chain}
+        chains={props.chains}
+        client={props.client}
+        connectLocale={localeQuery.data}
+        meta={{
+          title: props.connectModal?.title,
+          titleIconUrl: props.connectModal?.titleIcon,
+          showThirdwebBranding: props.connectModal?.showThirdwebBranding,
+          termsOfServiceUrl: props.connectModal?.termsOfServiceUrl,
+          privacyPolicyUrl: props.connectModal?.privacyPolicyUrl,
+        }}
+        welcomeScreen={props.connectModal?.welcomeScreen}
+        size={size}
+        isEmbed={false}
+        localeId={props.locale || "en_US"}
+        onConnect={props.onConnect}
+        recommendedWallets={props.recommendedWallets}
+        showAllWallets={props.showAllWallets}
+        walletConnect={props.walletConnect}
+        wallets={wallets}
+      />
+      {autoConnectComp}
+    </WalletUIStatesProvider>
   );
 }
 

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

@@ -459,7 +459,7 @@ export type ConnectButtonProps = {
    * At minimum, you need to pass the `id` of the blockchain to `defineChain` function to create a `Chain` object.
    * @example
    * ```tsx
-   * import { polygon } from "thirdweb/wallets";
+   * import { polygon } from "thirdweb/chains";
    *
    * function Example() {
    *  return <div> <ConnectButton chain={polygon} /> </div>
@@ -486,7 +486,7 @@ export type ConnectButtonProps = {
    * At minimum, you need to pass the `id` of the blockchain to `defineChain` function to create a `Chain` object.
    *
    * ```tsx
-   * import { defineChain } from "thirdweb/react";
+   * import { defineChain } from "thirdweb/chains";
    *
    * const polygon = defineChain({
    *   id: 137,

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

@@ -4,12 +4,12 @@ import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { CrossCircledIcon } from "@radix-ui/react-icons";
 import Fuse from "fuse.js";
 import { useMemo, useRef, useState } from "react";
+import type { ThirdwebClient } from "../../../../../client/client.js";
 import walletInfos from "../../../../../wallets/__generated__/wallet-infos.js";
 import { createWallet } from "../../../../../wallets/create-wallet.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { iconSize, spacing } from "../../../../core/design-system/index.js";
-import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { sortWallets } from "../../../utils/sortWallets.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Spinner } from "../../components/Spinner.js";
@@ -19,6 +19,7 @@ import { Text } from "../../components/text.js";
 import { useDebouncedValue } from "../../hooks/useDebouncedValue.js";
 import { useShowMore } from "../../hooks/useShowMore.js";
 import { WalletEntryButton } from "../WalletEntryButton.js";
+import type { ConnectLocale } from "../locale/types.js";
 
 /**
  *
@@ -27,15 +28,19 @@ import { WalletEntryButton } from "../WalletEntryButton.js";
 function AllWalletsUI(props: {
   onBack: () => void;
   onSelect: (wallet: Wallet) => void;
+  specifiedWallets: Wallet[];
+  size: "compact" | "wide";
+  client: ThirdwebClient;
+  recommendedWallets: Wallet[] | undefined;
+  connectLocale: ConnectLocale;
 }) {
   const { itemsToShow, lastItemRef } = useShowMore<HTMLLIElement>(10, 10);
-  const { wallets: specifiedWallets, connectModal } = useConnectUI();
 
   const walletList = useMemo(() => {
     return walletInfos.filter((wallet) => {
-      return specifiedWallets.findIndex((x) => x.id === wallet.id) === -1;
+      return props.specifiedWallets.findIndex((x) => x.id === wallet.id) === -1;
     });
-  }, [specifiedWallets]);
+  }, [props.specifiedWallets]);
 
   const fuseInstance = useMemo(() => {
     return new Fuse(walletList, {
@@ -116,8 +121,7 @@ function AllWalletsUI(props: {
             <div
               ref={listContainer}
               style={{
-                maxHeight:
-                  connectModal.size === "compact" ? "400px" : undefined,
+                maxHeight: props.size === "compact" ? "400px" : undefined,
                 paddingInline: spacing.md,
               }}
             >
@@ -138,6 +142,9 @@ function AllWalletsUI(props: {
                         const wallet = createWallet(walletInfo.id);
                         props.onSelect(wallet);
                       }}
+                      client={props.client}
+                      recommendedWallets={props.recommendedWallets}
+                      connectLocale={props.connectLocale}
                     />
                   </li>
                 );

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

@@ -1,6 +1,8 @@
 "use client";
 import { useQuery } from "@tanstack/react-query";
 import { Suspense, lazy, useEffect, useState } from "react";
+import type { Chain } from "../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
 import { isMobile } from "../../../../../utils/web/isMobile.js";
 import type {
   DeepLinkSupportedWalletIds,
@@ -13,7 +15,6 @@ import { getInstalledWalletProviders } from "../../../../../wallets/injected/mip
 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";
@@ -27,7 +28,9 @@ 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 type { LocaleId } from "../../types.js";
 import { AccentFailIcon } from "../icons/AccentFailIcon.js";
+import type { ConnectLocale } from "../locale/types.js";
 import { DeepLinkConnectUI } from "./DeepLinkConnectUI.js";
 import { InjectedConnectUI } from "./InjectedConnectUI.js";
 
@@ -46,12 +49,29 @@ export function AnyWalletConnectUI(props: {
   done: () => void;
   onBack?: () => void;
   setModalVisibility: (value: boolean) => void;
+  localeId: LocaleId;
+  chain: Chain | undefined;
+  chains: Chain[] | undefined;
+  client: ThirdwebClient;
+  size: "compact" | "wide";
+  meta: {
+    title?: string;
+    titleIconUrl?: string;
+    showThirdwebBranding?: boolean;
+    termsOfServiceUrl?: string;
+    privacyPolicyUrl?: string;
+  };
+  walletConnect:
+    | {
+        projectId?: string;
+      }
+    | undefined;
+  connectLocale: ConnectLocale;
 }) {
   const [screen, setScreen] = useState<"main" | "get-started">("main");
   const { wallet } = props;
   const walletInfo = useWalletInfo(props.wallet.id);
   const setSelectionData = useSetSelectionData();
-  const localeId = useConnectUI().locale;
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: reset the selection data when the wallet changes
   useEffect(() => {
@@ -59,9 +79,9 @@ export function AnyWalletConnectUI(props: {
   }, [wallet.id]);
 
   const localeFnQuery = useQuery({
-    queryKey: ["injectedWalletLocale", localeId, walletInfo.data?.name],
+    queryKey: ["injectedWalletLocale", props.localeId, walletInfo.data?.name],
     queryFn: async () => {
-      return getInjectedWalletLocale(localeId);
+      return getInjectedWalletLocale(props.localeId);
     },
     refetchOnWindowFocus: false,
     refetchOnMount: false,
@@ -87,6 +107,9 @@ export function AnyWalletConnectUI(props: {
           done={props.done}
           locale={localeFn(injectedProvider.info.name)}
           onBack={props.onBack}
+          chain={props.chain}
+          client={props.client}
+          size={props.size}
         />
       );
     }
@@ -134,6 +157,7 @@ export function AnyWalletConnectUI(props: {
         onBack={() => {
           setScreen("main");
         }}
+        client={props.client}
       />
     );
   }
@@ -155,6 +179,7 @@ export function AnyWalletConnectUI(props: {
           setScreen("get-started");
         }}
         onBack={props.onBack}
+        client={props.client}
       />
     );
   }
@@ -170,6 +195,9 @@ export function AnyWalletConnectUI(props: {
           setScreen("get-started");
         }}
         onBack={props.onBack}
+        chain={props.chain}
+        client={props.client}
+        size={props.size}
       />
     );
   }
@@ -187,6 +215,9 @@ export function AnyWalletConnectUI(props: {
           done={props.done}
           wallet={props.wallet as Wallet<typeof COINBASE>}
           walletInfo={walletInfo.data}
+          chain={props.chain}
+          client={props.client}
+          size={props.size}
         />
       </Suspense>
     );
@@ -204,6 +235,11 @@ export function AnyWalletConnectUI(props: {
         done={props.done}
         wallet={props.wallet as Wallet<WCSupportedWalletIds>}
         walletInfo={walletInfo.data}
+        chain={props.chain}
+        chains={props.chains}
+        client={props.client}
+        size={props.size}
+        walletConnect={props.walletConnect}
       />
     );
   }
@@ -218,6 +254,11 @@ export function AnyWalletConnectUI(props: {
         wallet={props.wallet as Wallet<"walletConnect">}
         walletInfo={walletInfo.data}
         setModalVisibility={props.setModalVisibility}
+        chain={props.chain}
+        chains={props.chains}
+        client={props.client}
+        size={props.size}
+        walletConnect={props.walletConnect}
       />
     );
   }
@@ -229,6 +270,12 @@ export function AnyWalletConnectUI(props: {
           wallet={props.wallet as Wallet<"inApp">}
           done={props.done}
           goBack={props.onBack}
+          chain={props.chain}
+          client={props.client}
+          size={props.size}
+          connectLocale={props.connectLocale}
+          meta={props.meta}
+          localeId={props.localeId}
         />
       </Suspense>
     );
@@ -241,6 +288,12 @@ export function AnyWalletConnectUI(props: {
           wallet={props.wallet as Wallet<EcosystemWalletId>}
           done={props.done}
           goBack={props.onBack}
+          chain={props.chain}
+          client={props.client}
+          size={props.size}
+          meta={props.meta}
+          localeId={props.localeId}
+          connectLocale={props.connectLocale}
         />
       </Suspense>
     );
@@ -255,6 +308,7 @@ export function AnyWalletConnectUI(props: {
       onBack={() => {
         setScreen("main");
       }}
+      client={props.client}
     />
   );
 }

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

@@ -12,7 +12,6 @@ import {
 import { type Theme, radius } from "../../../../core/design-system/index.js";
 import type { SiweAuthOptions } from "../../../../core/hooks/auth/useSiweAuth.js";
 import { useSiweAuth } from "../../../../core/hooks/auth/useSiweAuth.js";
-import { ConnectUIContext } from "../../../../core/providers/wallet-connection.js";
 import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
 import { useIsAutoConnecting } from "../../../hooks/wallets/useIsAutoConnecting.js";
@@ -32,6 +31,7 @@ import {
   wideModalMaxHeight,
 } from "../constants.js";
 import { useConnectLocale } from "../locale/getConnectLocale.js";
+import type { ConnectLocale } from "../locale/types.js";
 import { ConnectModalContent } from "./ConnectModalContent.js";
 import { useSetupScreen } from "./screen.js";
 
@@ -358,10 +358,25 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
     client: props.client,
   });
 
-  const modalSize =
-    !canFitWideModal() || wallets.length === 1
+  const modalSize = useMemo(() => {
+    return !canFitWideModal() || wallets.length === 1
       ? "compact"
       : props.modalSize || ("compact" as const);
+  }, [wallets.length, props.modalSize]);
+
+  const meta = useMemo(() => {
+    return {
+      privacyPolicyUrl: props.privacyPolicyUrl,
+      showThirdwebBranding: props.showThirdwebBranding !== false,
+      termsOfServiceUrl: props.termsOfServiceUrl,
+      title: undefined,
+      titleIconUrl: undefined,
+    };
+  }, [
+    props.privacyPolicyUrl,
+    props.showThirdwebBranding,
+    props.termsOfServiceUrl,
+  ]);
 
   const autoConnectComp = props.autoConnect !== false && (
     <AutoConnect
@@ -393,35 +408,31 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
     }
 
     return (
-      <ConnectUIContext.Provider
-        value={{
-          appMetadata: props.appMetadata,
-          client: props.client,
-          wallets: wallets,
-          locale: localeId,
-          connectLocale: localeQuery.data,
-          chain: props.chain || props.accountAbstraction?.chain,
-          chains: props.chains,
-          walletConnect: props.walletConnect,
-          accountAbstraction: props.accountAbstraction,
-          recommendedWallets: props.recommendedWallets,
-          showAllWallets: props.showAllWallets,
-          isEmbed: true,
-          connectModal: {
-            size: modalSize,
-            privacyPolicyUrl: props.privacyPolicyUrl,
-            showThirdwebBranding: props.showThirdwebBranding !== false,
-            termsOfServiceUrl: props.termsOfServiceUrl,
-          },
-          onConnect: props.onConnect,
-          auth: props.auth,
-        }}
-      >
-        <WalletUIStatesProvider theme={props.theme} isOpen={true}>
-          <ConnectEmbedContent {...props} onConnect={props.onConnect} />
-          {autoConnectComp}
-        </WalletUIStatesProvider>
-      </ConnectUIContext.Provider>
+      <WalletUIStatesProvider theme={props.theme} isOpen={true}>
+        <ConnectEmbedContent
+          auth={props.auth}
+          accountAbstraction={props.accountAbstraction}
+          chain={props.chain || props.accountAbstraction?.chain}
+          chains={props.chains}
+          client={props.client}
+          connectLocale={localeQuery.data}
+          size={modalSize}
+          // TODO: no welcome screen for embed right now?
+          // welcomeScreen={undefined}
+          meta={meta}
+          isEmbed={true}
+          localeId={props.locale || "en_US"}
+          onConnect={props.onConnect}
+          recommendedWallets={props.recommendedWallets}
+          showAllWallets={props.showAllWallets}
+          walletConnect={props.walletConnect}
+          wallets={wallets}
+          className={props.className}
+          modalSize={modalSize}
+          style={props.style}
+        />
+        {autoConnectComp}
+      </WalletUIStatesProvider>
     );
   }
 
@@ -431,13 +442,43 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
 /**
  * @internal
  */
-const ConnectEmbedContent = (
-  props: ConnectEmbedProps & {
-    loginOptional?: boolean;
-  },
-) => {
+const ConnectEmbedContent = (props: {
+  modalSize?: "compact" | "wide";
+  className?: string;
+  style?: React.CSSProperties;
+  // ---
+  accountAbstraction: SmartWalletOptions | undefined;
+  auth: SiweAuthOptions | undefined;
+  chain: Chain | undefined;
+  chains: Chain[] | undefined;
+  client: ThirdwebClient;
+  connectLocale: ConnectLocale;
+  meta: {
+    title?: string;
+    titleIconUrl?: string;
+    showThirdwebBranding?: boolean;
+    termsOfServiceUrl?: string;
+    privacyPolicyUrl?: string;
+  };
+  size: "compact" | "wide";
+  isEmbed: boolean;
+  localeId: LocaleId;
+  onConnect: ((wallet: Wallet) => void) | undefined;
+  recommendedWallets: Wallet[] | undefined;
+  showAllWallets: boolean | undefined;
+  walletConnect:
+    | {
+        projectId?: string;
+      }
+    | undefined;
+  wallets: Wallet[];
+}) => {
   // const requiresSignIn = false;
-  const screenSetup = useSetupScreen();
+  const screenSetup = useSetupScreen({
+    size: props.size,
+    welcomeScreen: undefined,
+    wallets: props.wallets,
+  });
   const { setScreen, initialScreen } = screenSetup;
   const activeWallet = useActiveWallet();
   const siweAuth = useSiweAuth(activeWallet, props.auth);
@@ -472,6 +513,24 @@ const ConnectEmbedContent = (
         setModalVisibility={() => {
           // no op
         }}
+        accountAbstraction={props.accountAbstraction}
+        auth={props.auth}
+        chain={props.chain}
+        chains={props.chains}
+        client={props.client}
+        connectLocale={props.connectLocale}
+        meta={props.meta}
+        size={props.size}
+        // TODO: no welcome screen for embed right now?
+        // 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}
       />
     );
   }

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

@@ -1,6 +1,10 @@
 "use client";
 import { useCallback, useEffect, useState } from "react";
-import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
+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 { SiweAuthOptions } from "../../../../core/hooks/auth/useSiweAuth.js";
 import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
 import {
   useIsWalletModalOpen,
@@ -8,26 +12,58 @@ import {
   useSetSelectionData,
 } from "../../../providers/wallet-ui-states-provider.js";
 import { Modal } from "../../components/Modal.js";
+import type { LocaleId } from "../../types.js";
 import { onModalUnmount, reservedScreens } from "../constants.js";
+import type { ConnectLocale } from "../locale/types.js";
+import type { WelcomeScreen } from "../screens/types.js";
 import { ConnectModalContent } from "./ConnectModalContent.js";
 import { useSetupScreen } from "./screen.js";
 
 type ConnectModalOptions = {
   onClose?: () => void;
   shouldSetActive: boolean;
+  wallets: Wallet[];
+  accountAbstraction: SmartWalletOptions | undefined;
+  auth: SiweAuthOptions | undefined;
+  onConnect: ((wallet: Wallet) => void) | undefined;
+  size: "compact" | "wide";
+  welcomeScreen: WelcomeScreen | undefined;
+  meta: {
+    title?: string;
+    titleIconUrl?: string;
+    showThirdwebBranding?: boolean;
+    termsOfServiceUrl?: string;
+    privacyPolicyUrl?: string;
+  };
+  connectLocale: ConnectLocale;
+  client: ThirdwebClient;
+  isEmbed: boolean;
+  recommendedWallets: Wallet[] | undefined;
+  localeId: LocaleId;
+  chain: Chain | undefined;
+  showAllWallets: boolean | undefined;
+  chains: Chain[] | undefined;
+  walletConnect:
+    | {
+        projectId?: string;
+      }
+    | undefined;
 };
 
 /**
  * @internal
  */
 const ConnectModal = (props: ConnectModalOptions) => {
-  const screenSetup = useSetupScreen();
+  const screenSetup = useSetupScreen({
+    size: props.size,
+    welcomeScreen: props.welcomeScreen,
+    wallets: props.wallets,
+  });
   const setSelectionData = useSetSelectionData();
   const { screen, setScreen, initialScreen } = screenSetup;
   const isWalletModalOpen = useIsWalletModalOpen();
   const setIsWalletModalOpen = useSetIsWalletModalOpen();
   const [hideModal, setHideModal] = useState(false);
-  const { connectModal } = useConnectUI();
 
   const closeModal = useCallback(() => {
     props.onClose?.();
@@ -81,7 +117,7 @@ const ConnectModal = (props: ConnectModalOptions) => {
   return (
     <Modal
       hide={hideModal}
-      size={connectModal.size}
+      size={props.size}
       open={isWalletModalOpen}
       setOpen={(value) => {
         if (hideModal) {
@@ -99,6 +135,22 @@ const ConnectModal = (props: ConnectModalOptions) => {
         setModalVisibility={setModalVisibility}
         isOpen={isWalletModalOpen}
         onClose={closeModal}
+        accountAbstraction={props.accountAbstraction}
+        auth={props.auth}
+        client={props.client}
+        connectLocale={props.connectLocale}
+        size={props.size}
+        welcomeScreen={props.welcomeScreen}
+        meta={props.meta}
+        isEmbed={props.isEmbed}
+        onConnect={props.onConnect}
+        recommendedWallets={props.recommendedWallets}
+        wallets={props.wallets}
+        localeId={props.localeId}
+        chain={props.chain}
+        showAllWallets={props.showAllWallets}
+        chains={props.chains}
+        walletConnect={props.walletConnect}
       />
     </Modal>
   );