thirdweb 5.30.0-nightly-fe775166d40fdd50faaa8d6da3fcd624f9a450ed-20240622000610 → 5.30.0-nightly-3979ff0238ae9b3a0a216e6c2d562eb7206a9fe8-20240626085813

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

@@ -1,16 +1,24 @@
 "use client";
 import { Suspense, lazy, useCallback } from "react";
+import type { Chain } from "../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
-import { useSiweAuth } from "../../../../core/hooks/auth/useSiweAuth.js";
-import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
+import type { SmartWalletOptions } from "../../../../../wallets/smart/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 { 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";
 import { SignatureScreen } from "../screens/SignatureScreen.js";
 import { StartScreen } from "../screens/StartScreen.js";
+import type { WelcomeScreen } from "../screens/types.js";
 import { AnyWalletConnectUI } from "./AnyWalletConnectUI.js";
 import {
   ConnectModalCompactLayout,
@@ -30,23 +38,40 @@ export const ConnectModalContent = (props: {
   isOpen: boolean;
   setModalVisibility: (value: boolean) => void;
   shouldSetActive: boolean;
+  wallets: Wallet[];
+  accountAbstraction: SmartWalletOptions | undefined;
+  auth: SiweAuthOptions | undefined;
+  onConnect: ((wallet: Wallet) => void) | undefined;
+  size: "compact" | "wide";
+  meta: {
+    title?: string;
+    titleIconUrl?: string;
+    showThirdwebBranding?: boolean;
+    termsOfServiceUrl?: string;
+    privacyPolicyUrl?: string;
+  };
+  welcomeScreen: WelcomeScreen | undefined;
+  connectLocale: ConnectLocale;
+  client: ThirdwebClient;
+  isEmbed: boolean;
+  recommendedWallets: Wallet[] | undefined;
+  localeId: LocaleId;
+  chain: Chain | undefined;
+  chains: Chain[] | undefined;
+  showAllWallets: boolean | undefined;
+  walletConnect:
+    | {
+        projectId?: string;
+      }
+    | undefined;
 }) => {
   const { setModalVisibility, onClose, shouldSetActive } = props;
   const { screen, setScreen, initialScreen } = props.screenSetup;
-  const {
-    wallets,
-    accountAbstraction,
-    auth,
-    onConnect,
-    connectModal,
-    connectLocale,
-    client,
-  } = useConnectUI();
   const setActiveWallet = useSetActiveWallet();
   const setSelectionData = useSetSelectionData();
 
   const activeWallet = useActiveWallet();
-  const siweAuth = useSiweAuth(activeWallet, auth);
+  const siweAuth = useSiweAuth(activeWallet, props.auth);
   const showSignatureScreen = siweAuth.requiresAuth && !siweAuth.isLoggedIn;
 
   const handleConnected = useCallback(
@@ -55,8 +80,8 @@ export const ConnectModalContent = (props: {
         setActiveWallet(wallet);
       }
 
-      if (onConnect) {
-        onConnect(wallet);
+      if (props.onConnect) {
+        props.onConnect(wallet);
       }
 
       onModalUnmount(() => {
@@ -74,7 +99,7 @@ export const ConnectModalContent = (props: {
     [
       setModalVisibility,
       onClose,
-      onConnect,
+      props.onConnect,
       setActiveWallet,
       showSignatureScreen,
       setScreen,
@@ -89,8 +114,8 @@ export const ConnectModalContent = (props: {
 
   const walletList = (
     <WalletSelector
-      title={connectModal.title || connectLocale.defaultModalTitle}
-      wallets={wallets}
+      title={props.meta.title || props.connectLocale.defaultModalTitle}
+      wallets={props.wallets}
       onGetStarted={() => {
         setScreen(reservedScreens.getStarted);
       }}
@@ -108,33 +133,68 @@ export const ConnectModalContent = (props: {
         setScreen(reservedScreens.showAll);
       }}
       done={handleConnected}
-      goBack={wallets.length > 1 ? handleBack : undefined}
+      goBack={props.wallets.length > 1 ? handleBack : undefined}
       setModalVisibility={setModalVisibility}
+      client={props.client}
+      connectLocale={props.connectLocale}
+      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}
     />
   );
 
   const showAll = (
     <Suspense fallback={<LoadingScreen />}>
-      <AllWalletsUI onBack={handleBack} onSelect={setScreen} />
+      <AllWalletsUI
+        onBack={handleBack}
+        onSelect={setScreen}
+        client={props.client}
+        connectLocale={props.connectLocale}
+        recommendedWallets={props.recommendedWallets}
+        specifiedWallets={props.wallets}
+        size={props.size}
+      />
     </Suspense>
   );
 
-  const getStarted = <StartScreen />;
+  const getStarted = (
+    <StartScreen
+      client={props.client}
+      connectLocale={props.connectLocale}
+      meta={props.meta}
+      welcomeScreen={props.welcomeScreen}
+    />
+  );
 
-  const goBack = wallets.length > 1 ? handleBack : undefined;
+  const goBack = props.wallets.length > 1 ? handleBack : undefined;
 
   const getWalletUI = (wallet: Wallet) => {
-    if (accountAbstraction) {
+    if (props.accountAbstraction) {
       return (
         <SmartConnectUI
           key={wallet.id}
-          accountAbstraction={accountAbstraction}
+          accountAbstraction={props.accountAbstraction}
           done={(smartWallet) => {
             handleConnected(smartWallet);
           }}
           personalWallet={wallet}
           onBack={goBack}
           setModalVisibility={props.setModalVisibility}
+          meta={props.meta}
+          size={props.size}
+          localeId={props.localeId}
+          chain={props.chain}
+          chains={props.chains}
+          client={props.client}
+          walletConnect={props.walletConnect}
+          connectLocale={props.connectLocale}
         />
       );
     }
@@ -148,6 +208,14 @@ export const ConnectModalContent = (props: {
           handleConnected(wallet);
         }}
         setModalVisibility={props.setModalVisibility}
+        chain={props.chain}
+        chains={props.chains}
+        client={props.client}
+        meta={props.meta}
+        size={props.size}
+        localeId={props.localeId}
+        walletConnect={props.walletConnect}
+        connectLocale={props.connectLocale}
       />
     );
   };
@@ -155,18 +223,18 @@ export const ConnectModalContent = (props: {
   const signatureScreen = (
     <SignatureScreen
       onDone={onClose}
-      modalSize={connectModal.size}
-      termsOfServiceUrl={connectModal.termsOfServiceUrl}
-      privacyPolicyUrl={connectModal.privacyPolicyUrl}
-      auth={auth}
-      client={client}
-      connectLocale={connectLocale}
+      modalSize={props.size}
+      termsOfServiceUrl={props.meta.termsOfServiceUrl}
+      privacyPolicyUrl={props.meta.privacyPolicyUrl}
+      auth={props.auth}
+      client={props.client}
+      connectLocale={props.connectLocale}
     />
   );
 
   return (
     <ScreenSetupContext.Provider value={props.screenSetup}>
-      {connectModal.size === "wide" ? (
+      {props.size === "wide" ? (
         <ConnectModalWideLayout
           left={walletList}
           right={

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

@@ -1,5 +1,9 @@
 "use client";
 import { Cross2Icon } from "@radix-ui/react-icons";
+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 { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import {
   type Theme,
@@ -7,18 +11,20 @@ import {
   radius,
   shadow,
 } from "../../../../core/design-system/index.js";
-import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
+import type { SiweAuthOptions } from "../../../../core/hooks/auth/useSiweAuth.js";
 import { WalletUIStatesProvider } from "../../../providers/wallet-ui-states-provider.js";
 import { canFitWideModal } from "../../../utils/canFitWideModal.js";
 import { DynamicHeight } from "../../components/DynamicHeight.js";
 import { CrossContainer } from "../../components/Modal.js";
 import { IconButton } from "../../components/buttons.js";
 import { StyledDiv } from "../../design-system/elements.js";
+import type { LocaleId } from "../../types.js";
 import {
   modalMaxWidthCompact,
   modalMaxWidthWide,
   wideModalMaxHeight,
 } 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";
@@ -28,7 +34,6 @@ import { useSetupScreen } from "./screen.js";
  */
 export type ConnectModalInlineProps = {
   chainId?: bigint;
-  chains?: (bigint | number)[];
   className?: string;
   theme?: "dark" | "light" | Theme;
   modalTitle?: string;
@@ -37,25 +42,62 @@ export type ConnectModalInlineProps = {
   modalSize?: "compact" | "wide";
   termsOfServiceUrl?: string;
   privacyPolicyUrl?: string;
-  welcomeScreen?: WelcomeScreen;
   showThirdwebBranding?: boolean;
+  accountAbstraction: SmartWalletOptions | undefined;
+  auth: SiweAuthOptions | undefined;
+  chain: Chain | undefined;
+  chains: Chain[] | undefined;
+  client: ThirdwebClient;
+  connectLocale: ConnectLocale;
+  size: "compact" | "wide";
+  welcomeScreen: WelcomeScreen;
+  meta: {
+    title?: string;
+    titleIconUrl?: string;
+    showThirdwebBranding?: boolean;
+    termsOfServiceUrl?: string;
+    privacyPolicyUrl?: string;
+  };
+  isEmbed: boolean;
+  localeId: LocaleId;
+  onConnect: ((wallet: Wallet) => void) | undefined;
+  recommendedWallets: Wallet[] | undefined;
+  showAllWallets: boolean | undefined;
+  wallets: Wallet[];
+  walletConnect:
+    | {
+        projectId?: string;
+      }
+    | undefined;
 };
 
 /**
  * @internal
  */
 export const ConnectModalInline = (props: ConnectModalInlineProps) => {
-  const walletConfigs = useConnectUI().wallets;
   const modalSize =
-    !canFitWideModal() || walletConfigs.length === 1
-      ? "compact"
-      : props.modalSize;
+    !canFitWideModal() || props.wallets.length === 1 ? "compact" : props.size;
 
   return (
     <WalletUIStatesProvider theme={props.theme} isOpen={true}>
       <ConnectModalInlineContent
         className={props.className}
-        modalSize={modalSize}
+        size={modalSize}
+        meta={props.meta}
+        welcomeScreen={props.welcomeScreen}
+        wallets={props.wallets}
+        accountAbstraction={props.accountAbstraction}
+        auth={props.auth}
+        chain={props.chain}
+        client={props.client}
+        connectLocale={props.connectLocale}
+        isEmbed={props.isEmbed}
+        localeId={props.localeId}
+        onConnect={props.onConnect}
+        recommendedWallets={props.recommendedWallets}
+        showAllWallets={props.showAllWallets}
+        chains={props.chains}
+        walletConnect={props.walletConnect}
       />
     </WalletUIStatesProvider>
   );
@@ -63,10 +105,39 @@ export const ConnectModalInline = (props: ConnectModalInlineProps) => {
 
 function ConnectModalInlineContent(props: {
   className?: string;
-  modalSize?: "compact" | "wide";
   style?: React.CSSProperties;
+  accountAbstraction: SmartWalletOptions | undefined;
+  auth: SiweAuthOptions | undefined;
+  chain: Chain | undefined;
+  chains: Chain[] | undefined;
+  client: ThirdwebClient;
+  connectLocale: ConnectLocale;
+  size: "compact" | "wide";
+  welcomeScreen: WelcomeScreen | undefined;
+  meta: {
+    title?: string;
+    titleIconUrl?: string;
+    showThirdwebBranding?: boolean;
+    termsOfServiceUrl?: string;
+    privacyPolicyUrl?: string;
+  };
+  isEmbed: boolean;
+  localeId: LocaleId;
+  onConnect: ((wallet: Wallet) => void) | undefined;
+  recommendedWallets: Wallet[] | undefined;
+  showAllWallets: boolean | undefined;
+  wallets: Wallet[];
+  walletConnect:
+    | {
+        projectId?: string;
+      }
+    | undefined;
 }) {
-  const screenSetup = useSetupScreen();
+  const screenSetup = useSetupScreen({
+    size: props.size,
+    welcomeScreen: props.welcomeScreen,
+    wallets: props.wallets,
+  });
 
   const content = (
     <>
@@ -80,6 +151,22 @@ function ConnectModalInlineContent(props: {
         onClose={() => {
           // no op
         }}
+        accountAbstraction={props.accountAbstraction}
+        auth={props.auth}
+        chain={props.chain}
+        client={props.client}
+        connectLocale={props.connectLocale}
+        size={props.size}
+        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}
       />
 
       {/* close icon */}
@@ -101,15 +188,13 @@ function ConnectModalInlineContent(props: {
     <ConnectModalInlineContainer
       className={props.className}
       style={{
-        height: props.modalSize === "compact" ? "auto" : wideModalMaxHeight,
+        height: props.size === "compact" ? "auto" : wideModalMaxHeight,
         maxWidth:
-          props.modalSize === "compact"
-            ? modalMaxWidthCompact
-            : modalMaxWidthWide,
+          props.size === "compact" ? modalMaxWidthCompact : modalMaxWidthWide,
         ...props.style,
       }}
     >
-      {props.modalSize === "compact" ? (
+      {props.size === "compact" ? (
         <DynamicHeight> {content} </DynamicHeight>
       ) : (
         content

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

@@ -1,12 +1,12 @@
 "use client";
 import { keyframes } from "@emotion/react";
 import { ExternalLinkIcon } from "@radix-ui/react-icons";
+import type { ThirdwebClient } from "../../../../../client/client.js";
 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 { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { iconSize, radius } from "../../../../core/design-system/index.js";
-import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import type { InjectedWalletLocale } from "../../../wallets/injected/locale/types.js";
 import { WalletImage } from "../../components/WalletImage.js";
 import { Container, ModalHeader } from "../../components/basic.js";
@@ -23,10 +23,8 @@ export const DeepLinkConnectUI = (props: {
   walletInfo: WalletInfo;
   deepLinkPrefix: string;
   onBack?: () => void;
+  client: ThirdwebClient;
 }) => {
-  const { client } = useConnectUI();
-  const { wallet } = props;
-
   return (
     <Container animate="fadein">
       <Container p="lg">
@@ -35,7 +33,7 @@ export const DeepLinkConnectUI = (props: {
 
       <Container flex="row" center="x" animate="fadein" py="3xl">
         <PulsatingContainer>
-          <WalletImage id={wallet.id} client={client} size={"80"} />
+          <WalletImage id={props.wallet.id} client={props.client} size={"80"} />
         </PulsatingContainer>
       </Container>
 

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

@@ -1,8 +1,9 @@
 "use client";
 import { useCallback, useEffect, useRef, useState } from "react";
+import type { Chain } from "../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { InjectedSupportedWalletIds } from "../../../../../wallets/__generated__/wallet-ids.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.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";
 import { ConnectingScreen } from "../../../wallets/shared/ConnectingScreen.js";
@@ -17,9 +18,11 @@ export const InjectedConnectUI = (props: {
   walletName: string;
   onBack?: () => void;
   done: () => void;
+  client: ThirdwebClient;
+  chain: Chain | undefined;
+  size: "compact" | "wide";
 }) => {
   const { wallet, done } = props;
-  const { client, chain } = useConnectUI();
   const [errorConnecting, setErrorConnecting] = useState(false);
   const locale = props.locale;
 
@@ -29,8 +32,8 @@ export const InjectedConnectUI = (props: {
       setErrorConnecting(false);
       await wait(1000);
       await wallet.connect({
-        client,
-        chain: chain,
+        client: props.client,
+        chain: props.chain,
       });
 
       done();
@@ -38,7 +41,7 @@ export const InjectedConnectUI = (props: {
       setErrorConnecting(true);
       console.error(e);
     }
-  }, [client, chain, done, wallet]);
+  }, [props.client, props.chain, done, wallet]);
 
   const connectPrompted = useRef(false);
   useEffect(() => {
@@ -66,6 +69,8 @@ export const InjectedConnectUI = (props: {
         connectToExtension();
       }}
       errorConnecting={errorConnecting}
+      client={props.client}
+      size={props.size}
     />
   );
 };

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

@@ -1,6 +1,8 @@
 "use client";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { useCallback, useEffect, useRef, useState } from "react";
+import type { Chain } from "../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
 import { webLocalStorage } from "../../../../../utils/storage/webStorage.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
@@ -11,7 +13,6 @@ import {
   iconSize,
   spacing,
 } from "../../../../core/design-system/index.js";
-import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { getSmartWalletLocale } from "../../../wallets/smartWallet/locale/getSmartWalletLocale.js";
 import type { SmartWalletLocale } from "../../../wallets/smartWallet/locale/types.js";
@@ -21,6 +22,8 @@ import { Container, ModalHeader } from "../../components/basic.js";
 import { Button } from "../../components/buttons.js";
 import { Text } from "../../components/text.js";
 import { useWalletInfo } from "../../hooks/useWalletInfo.js";
+import type { LocaleId } from "../../types.js";
+import type { ConnectLocale } from "../locale/types.js";
 import { AnyWalletConnectUI } from "./AnyWalletConnectUI.js";
 
 /**
@@ -32,6 +35,24 @@ export function SmartConnectUI(props: {
   onBack?: () => void;
   accountAbstraction: SmartWalletOptions;
   setModalVisibility: (value: boolean) => void;
+  localeId: LocaleId;
+  meta: {
+    title?: string;
+    titleIconUrl?: string;
+    showThirdwebBranding?: boolean;
+    termsOfServiceUrl?: string;
+    privacyPolicyUrl?: string;
+  };
+  size: "compact" | "wide";
+  client: ThirdwebClient;
+  chain: Chain | undefined;
+  chains: Chain[] | undefined;
+  connectLocale: ConnectLocale;
+  walletConnect:
+    | {
+        projectId?: string;
+      }
+    | undefined;
 }) {
   const personalWalletInfo = useWalletInfo(props.personalWallet.id);
   const [keyConnected, setKeyConnected] = useState(false);
@@ -50,6 +71,14 @@ export function SmartConnectUI(props: {
         }}
         onBack={props.onBack}
         setModalVisibility={props.setModalVisibility}
+        chain={props.chain}
+        chains={props.chains}
+        client={props.client}
+        meta={props.meta}
+        size={props.size}
+        localeId={props.localeId}
+        walletConnect={props.walletConnect}
+        connectLocale={props.connectLocale}
       />
     );
   }
@@ -61,6 +90,9 @@ export function SmartConnectUI(props: {
       accountAbstraction={props.accountAbstraction}
       onBack={props.onBack}
       personalWalletInfo={personalWalletInfo.data}
+      localeId={props.localeId}
+      size={props.size}
+      client={props.client}
     />
   );
 }
@@ -71,16 +103,17 @@ function SmartWalletConnecting(props: {
   accountAbstraction: SmartWalletOptions;
   onBack?: () => void;
   personalWalletInfo: WalletInfo;
+  localeId: LocaleId;
+  size: "compact" | "wide";
+  client: ThirdwebClient;
 }) {
-  const { locale: localeId, connectModal } = useConnectUI();
-  const client = useConnectUI().client;
   const [locale, setLocale] = useState<SmartWalletLocale | undefined>();
-  const modalSize = connectModal.size;
   const { chain: smartWalletChain } = props.accountAbstraction;
 
+  // FIXME: use a query instead
   useEffect(() => {
-    getSmartWalletLocale(localeId).then(setLocale);
-  }, [localeId]);
+    getSmartWalletLocale(props.localeId).then(setLocale);
+  }, [props.localeId]);
 
   const { personalWallet } = props;
   const { done } = props;
@@ -119,7 +152,7 @@ function SmartWalletConnecting(props: {
         webLocalStorage,
       ).handleConnection(personalWallet, {
         accountAbstraction: props.accountAbstraction,
-        client,
+        client: props.client,
       });
       done(connected);
       setSmartWalletConnectionStatus("idle");
@@ -127,7 +160,7 @@ function SmartWalletConnecting(props: {
       console.error(e);
       setSmartWalletConnectionStatus("connect-error");
     }
-  }, [done, personalWallet, client, props.accountAbstraction]);
+  }, [done, personalWallet, props.client, props.accountAbstraction]);
 
   const connectStarted = useRef(false);
   useEffect(() => {
@@ -151,10 +184,10 @@ function SmartWalletConnecting(props: {
           />
         </Container>
 
-        {modalSize === "compact" && <Spacer y="lg" />}
+        {props.size === "compact" && <Spacer y="lg" />}
 
         <Container expand flex="column" center="both" p="lg">
-          <Container p={modalSize === "wide" ? "lg" : undefined}>
+          <Container p={props.size === "wide" ? "lg" : undefined}>
             <Container flex="row" center="x" color="danger">
               <ExclamationTriangleIcon
                 width={iconSize.lg}

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

@@ -1,8 +1,8 @@
 "use client";
-import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { Container } from "../../components/basic.js";
 import { Link } from "../../components/text.js";
 import { Text } from "../../components/text.js";
+import type { ConnectLocale } from "../locale/types.js";
 
 /**
  * @internal
@@ -10,9 +10,9 @@ import { Text } from "../../components/text.js";
 export function TOS(props: {
   termsOfServiceUrl?: string;
   privacyPolicyUrl?: string;
+  locale: ConnectLocale["agreement"];
 }) {
-  const { termsOfServiceUrl, privacyPolicyUrl } = props;
-  const locale = useConnectUI().connectLocale.agreement;
+  const { termsOfServiceUrl, privacyPolicyUrl, locale } = props;
 
   if (!termsOfServiceUrl && !privacyPolicyUrl) {
     return null;