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

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

@@ -6,7 +6,6 @@ import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
-import { ConnectUIContext } from "../../../core/providers/wallet-connection.js";
 import { WalletUIStatesProvider } from "../../providers/wallet-ui-states-provider.js";
 import { canFitWideModal } from "../../utils/canFitWideModal.js";
 import { getDefaultWallets } from "../../wallets/defaultWallets.js";
@@ -103,45 +102,51 @@ function Modal(
     [props.wallets, props.appMetadata, props.chains],
   );
 
+  const size = useMemo(() => {
+    return !canFitWideModal() || wallets.length === 1
+      ? "compact"
+      : props.size || "wide";
+  }, [props.size, wallets.length]);
+  const meta = useMemo(() => {
+    return {
+      privacyPolicyUrl: props.privacyPolicyUrl,
+      showThirdwebBranding: props.showThirdwebBranding,
+      termsOfServiceUrl: props.termsOfServiceUrl,
+      title: props.title,
+      titleIconUrl: props.titleIcon,
+    };
+  }, [
+    props.privacyPolicyUrl,
+    props.showThirdwebBranding,
+    props.termsOfServiceUrl,
+    props.title,
+    props.titleIcon,
+  ]);
+
   return (
-    <ConnectUIContext.Provider
-      value={{
-        appMetadata: props.appMetadata,
-        client: props.client,
-        wallets: wallets,
-        locale: props.locale || "en_US",
-        connectLocale: props.connectLocale,
-        chain: props.chain,
-        chains: props.chains,
-        walletConnect: props.walletConnect,
-        accountAbstraction: props.accountAbstraction,
-        recommendedWallets: props.recommendedWallets,
-        showAllWallets: props.showAllWallets,
-        isEmbed: false,
-        connectModal: {
-          privacyPolicyUrl: props.privacyPolicyUrl,
-          showThirdwebBranding: props.showThirdwebBranding,
-          termsOfServiceUrl: props.termsOfServiceUrl,
-          title: props.title,
-          welcomeScreen: props.welcomeScreen,
-          titleIcon: props.titleIcon,
-          size:
-            !canFitWideModal() || wallets.length === 1
-              ? "compact"
-              : props?.size || "wide",
-        },
-        onConnect: props.onConnect,
-      }}
-    >
-      <WalletUIStatesProvider theme={props.theme} isOpen={true}>
-        <ConnectModal
-          onClose={props.onClose}
-          shouldSetActive={
-            props.setActive === undefined ? true : props.setActive
-          }
-        />
-      </WalletUIStatesProvider>
-    </ConnectUIContext.Provider>
+    <WalletUIStatesProvider theme={props.theme} isOpen={true}>
+      <ConnectModal
+        onClose={props.onClose}
+        shouldSetActive={props.setActive === undefined ? true : props.setActive}
+        accountAbstraction={props.accountAbstraction}
+        // TODO: not set up in `useConnectModal` for some reason?
+        auth={undefined}
+        chain={props.chain}
+        client={props.client}
+        connectLocale={props.connectLocale}
+        meta={meta}
+        size={size}
+        welcomeScreen={props.welcomeScreen}
+        isEmbed={false}
+        localeId={props.locale || "en_US"}
+        onConnect={props.onConnect}
+        recommendedWallets={props.recommendedWallets}
+        showAllWallets={props.showAllWallets}
+        wallets={wallets}
+        chains={props.chains}
+        walletConnect={props.walletConnect}
+      />
+    </WalletUIStatesProvider>
   );
 }
 

package/src/react/web/ui/PayEmbed-disconnected.test.tsx

@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render } from "../../../../test/src/react-render.js";
+import { TEST_CLIENT } from "../../../../test/src/test-clients.js";
+import { PayEmbed } from "./PayEmbed.js";
+
+describe.runIf(process.env.TW_SECRET_KEY)(
+  "PayEmbed: Disconnected state",
+  () => {
+    it("renders a connect wallet button when a wallet is not connected", async () => {
+      const { findByText } = render(<PayEmbed client={TEST_CLIENT} />);
+      const connectWalletButton = await findByText("Connect Wallet");
+      expect(connectWalletButton).toBeInTheDocument();
+    });
+  },
+);

package/src/react/web/ui/PayEmbed.test.tsx

@@ -1,10 +1,37 @@
-import { describe, it } from "vitest";
+import { userEvent } from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
 import { render } from "../../../../test/src/react-render.js";
 import { TEST_CLIENT } from "../../../../test/src/test-clients.js";
 import { PayEmbed } from "./PayEmbed.js";
 
-describe("Pay Embed", () => {
-  it("should render", () => {
-    render(<PayEmbed client={TEST_CLIENT} />);
-  });
-});
+describe.runIf(process.env.TW_SECRET_KEY)(
+  "PayEmbed - Connected state",
+  async () => {
+    const { findByRole } = render(<PayEmbed client={TEST_CLIENT} />, {
+      setConnectedWallet: true,
+    });
+
+    // continue button is shown
+    const connectWalletButton = await findByRole("button", {
+      name: "Continue",
+    });
+
+    it("continue button is disabled if no token amount is set", async () => {
+      // continue button is disabled when no amount is entered
+      expect(connectWalletButton).toBeDisabled();
+
+      // user enters an amount
+      const tokenInput = await findByRole("textbox");
+      await userEvent.type(tokenInput, "1");
+
+      // continue button is enabled
+      expect(connectWalletButton).not.toBeDisabled();
+
+      // user clears the amount
+      await userEvent.clear(tokenInput);
+
+      // continue button is disabled again
+      expect(connectWalletButton).toBeDisabled();
+    });
+  },
+);

package/src/react/web/ui/PayEmbed.tsx

@@ -124,6 +124,8 @@ export type PayEmbedProps = {
    * Refer to the [`PayEmbedConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedConnectOptions) type for more details.
    */
   connectOptions?: PayEmbedConnectOptions;
+
+  style?: React.CSSProperties;
 };
 
 /**
@@ -229,6 +231,7 @@ export function PayEmbed(props: PayEmbedProps) {
           borderStyle: "solid",
           position: "relative",
           overflow: "hidden",
+          ...props.style,
         }}
         borderColor="borderColor"
       >

package/src/react/web/ui/components/ChainName.tsx

@@ -12,12 +12,29 @@ export const ChainName: React.FC<{
   chain: Chain;
   size: "xs" | "sm" | "md" | "lg";
   client: ThirdwebClient;
+  short?: boolean;
 }> = (props) => {
   const chainQuery = useChainQuery(props.chain);
 
   if (chainQuery.data) {
-    return <Text size={props.size}>{chainQuery.data.name}</Text>;
+    return (
+      <Text size={props.size}>
+        {props.short
+          ? shorterChainName(chainQuery.data.name)
+          : chainQuery.data.name}
+      </Text>
+    );
   }
 
   return <Skeleton width={"50px"} height={fontSize[props.size]} />;
 };
+
+function shorterChainName(name: string) {
+  const split = name.split(" ");
+  const wordsToRemove = new Set(["mainnet", "testnet", "chain"]);
+  return split
+    .filter((s) => {
+      return !wordsToRemove.has(s.toLowerCase());
+    })
+    .join(" ");
+}

package/src/react/web/ui/components/basic.tsx

@@ -35,6 +35,7 @@ export const noScrollBar = /* @__PURE__ */ {
 export function ModalHeader(props: {
   onBack?: () => void;
   title: React.ReactNode;
+  leftAligned?: boolean;
 }) {
   const { onBack, title } = props;
   return (
@@ -42,7 +43,7 @@ export function ModalHeader(props: {
       style={{
         display: "flex",
         alignItems: "center",
-        justifyContent: onBack ? "center" : "flex-start",
+        justifyContent: props.leftAligned ? "flex-start" : "center",
         position: "relative",
       }}
     >

package/src/react/web/ui/components/buttons.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import {
+  type Theme,
   fontSize,
   radius,
   spacing,
@@ -12,6 +13,7 @@ export type ButtonProps = {
   unstyled?: boolean;
   fullWidth?: boolean;
   gap?: keyof typeof spacing;
+  bg?: keyof Theme["colors"];
 };
 
 export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
@@ -39,6 +41,9 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
     textAlign: "center",
     maxWidth: "100%",
     background: (() => {
+      if (props.bg) {
+        return theme.colors[props.bg];
+      }
       switch (props.variant) {
         case "primary":
           return theme.colors.primaryButtonBg;
@@ -88,6 +93,9 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
           "&:hover": {
             borderColor: theme.colors.accentText,
           },
+          '&[aria-selected="true"]': {
+            borderColor: theme.colors.accentText,
+          },
         };
       }
 

package/src/react/web/wallets/ecosystem/EcosystemWalletConnectUI.tsx

@@ -1,12 +1,15 @@
 "use client";
+import type { Chain } from "../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
-import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
 import {
   useSelectionData,
   useSetSelectionData,
 } from "../../providers/wallet-ui-states-provider.js";
-import { useConnectLocale } from "../in-app/useInAppWalletLocale.js";
+import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
+import type { LocaleId } from "../../ui/types.js";
+import { useInAppWalletLocale } from "../in-app/useInAppWalletLocale.js";
 import type { ConnectWalletSelectUIState } from "../shared/ConnectWalletSocialOptions.js";
 import { LoadingScreen } from "../shared/LoadingScreen.js";
 import { OTPLoginUI } from "../shared/OTPLoginUI.js";
@@ -22,19 +25,30 @@ function EcosystemWalletConnectUI(props: {
   wallet: Wallet<EcosystemWalletId>;
   done: () => void;
   goBack?: () => void;
+  client: ThirdwebClient;
+  chain: Chain | undefined;
+  localeId: LocaleId;
+  connectLocale: ConnectLocale;
+  size: "compact" | "wide";
+  meta: {
+    title?: string;
+    titleIconUrl?: string;
+    showThirdwebBranding?: boolean;
+    termsOfServiceUrl?: string;
+    privacyPolicyUrl?: string;
+  };
 }) {
   const data = useSelectionData();
   const setSelectionData = useSetSelectionData();
   const state = data as ConnectWalletSelectUIState;
-  const locale = useConnectLocale();
-  const { connectModal } = useConnectUI();
+  const locale = useInAppWalletLocale(props.localeId);
 
   if (!locale) {
     return <LoadingScreen />;
   }
 
   const goBackToMain =
-    connectModal.size === "compact"
+    props.size === "compact"
       ? props.goBack
       : () => {
           setSelectionData({});
@@ -54,6 +68,9 @@ function EcosystemWalletConnectUI(props: {
         done={props.done}
         goBack={goBackToMain}
         wallet={props.wallet}
+        chain={props.chain}
+        client={props.client}
+        size={props.size}
       />
     );
   }
@@ -64,6 +81,9 @@ function EcosystemWalletConnectUI(props: {
         wallet={props.wallet}
         done={props.done}
         onBack={goBackToMain}
+        chain={props.chain}
+        client={props.client}
+        size={props.size}
       />
     );
   }
@@ -77,6 +97,9 @@ function EcosystemWalletConnectUI(props: {
         goBack={goBackToMain}
         wallet={props.wallet}
         state={state}
+        chain={props.chain}
+        client={props.client}
+        size={props.size}
       />
     );
   }
@@ -88,6 +111,11 @@ function EcosystemWalletConnectUI(props: {
       done={props.done}
       goBack={props.goBack}
       wallet={props.wallet}
+      chain={props.chain}
+      client={props.client}
+      size={props.size}
+      connectLocale={props.connectLocale}
+      meta={props.meta}
     />
   );
 }

package/src/react/web/wallets/ecosystem/EcosystemWalletFormUI.tsx

@@ -1,30 +1,42 @@
 "use client";
+import type { Chain } from "../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
-import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
 import { TOS } from "../../ui/ConnectWallet/Modal/TOS.js";
 import { useScreenContext } from "../../ui/ConnectWallet/Modal/screen.js";
 import { PoweredByThirdweb } from "../../ui/ConnectWallet/PoweredByTW.js";
+import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
 import { Spacer } from "../../ui/components/Spacer.js";
 import { Container } from "../../ui/components/basic.js";
 import { ConnectWalletSocialOptions } from "../shared/ConnectWalletSocialOptions.js";
-import type { ConnectLocale } from "../shared/locale/types.js";
+import type { InAppWalletLocale } from "../shared/locale/types.js";
 import { EcosystemWalletHeader } from "./EcosystemWalletHeader.js";
 
 export type EcosystemWalletFormUIProps = {
   select: () => void;
   done: () => void;
-  locale: ConnectLocale;
+  locale: InAppWalletLocale;
   wallet: Wallet<EcosystemWalletId>;
   goBack?: () => void;
+  size: "compact" | "wide";
+  meta: {
+    title?: string;
+    titleIconUrl?: string;
+    showThirdwebBranding?: boolean;
+    termsOfServiceUrl?: string;
+    privacyPolicyUrl?: string;
+  };
+  client: ThirdwebClient;
+  chain: Chain | undefined;
+  connectLocale: ConnectLocale;
 };
 
 /**
  * @internal
  */
 export function EcosystemWalletFormUIScreen(props: EcosystemWalletFormUIProps) {
-  const { client, connectModal } = useConnectUI();
-  const isCompact = connectModal.size === "compact";
+  const isCompact = props.size === "compact";
   const { initialScreen, screen } = useScreenContext();
 
   const onBack =
@@ -45,7 +57,7 @@ export function EcosystemWalletFormUIScreen(props: EcosystemWalletFormUIProps) {
       {isCompact ? (
         <>
           <EcosystemWalletHeader
-            client={client}
+            client={props.client}
             onBack={onBack}
             wallet={props.wallet}
           />
@@ -63,17 +75,18 @@ export function EcosystemWalletFormUIScreen(props: EcosystemWalletFormUIProps) {
       </Container>
 
       {isCompact &&
-        (connectModal.showThirdwebBranding !== false ||
-          connectModal.termsOfServiceUrl ||
-          connectModal.privacyPolicyUrl) && <Spacer y="xl" />}
+        (props.meta.showThirdwebBranding !== false ||
+          props.meta.termsOfServiceUrl ||
+          props.meta.privacyPolicyUrl) && <Spacer y="xl" />}
 
       <Container flex="column" gap="lg">
         <TOS
-          termsOfServiceUrl={connectModal.termsOfServiceUrl}
-          privacyPolicyUrl={connectModal.privacyPolicyUrl}
+          termsOfServiceUrl={props.meta.termsOfServiceUrl}
+          privacyPolicyUrl={props.meta.privacyPolicyUrl}
+          locale={props.connectLocale.agreement}
         />
 
-        {connectModal.showThirdwebBranding !== false && <PoweredByThirdweb />}
+        {props.meta.showThirdwebBranding !== false && <PoweredByThirdweb />}
       </Container>
     </Container>
   );

package/src/react/web/wallets/in-app/InAppWalletConnectUI.tsx

@@ -1,17 +1,20 @@
 "use client";
+import type { Chain } from "../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
-import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
 import {
   useSelectionData,
   useSetSelectionData,
 } from "../../providers/wallet-ui-states-provider.js";
+import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
+import type { LocaleId } from "../../ui/types.js";
 import type { ConnectWalletSelectUIState } from "../shared/ConnectWalletSocialOptions.js";
 import { LoadingScreen } from "../shared/LoadingScreen.js";
 import { OTPLoginUI } from "../shared/OTPLoginUI.js";
 import { PassKeyLogin } from "../shared/PassKeyLogin.js";
 import { SocialLogin } from "../shared/SocialLogin.js";
 import { InAppWalletFormUIScreen } from "./InAppWalletFormUI.js";
-import { useConnectLocale } from "./useInAppWalletLocale.js";
+import { useInAppWalletLocale } from "./useInAppWalletLocale.js";
 
 /**
  *
@@ -21,19 +24,30 @@ function InAppWalletConnectUI(props: {
   wallet: Wallet<"inApp">;
   done: () => void;
   goBack?: () => void;
+  size: "compact" | "wide";
+  meta: {
+    title?: string;
+    titleIconUrl?: string;
+    showThirdwebBranding?: boolean;
+    termsOfServiceUrl?: string;
+    privacyPolicyUrl?: string;
+  };
+  client: ThirdwebClient;
+  chain: Chain | undefined;
+  localeId: LocaleId;
+  connectLocale: ConnectLocale;
 }) {
   const data = useSelectionData();
   const setSelectionData = useSetSelectionData();
   const state = data as ConnectWalletSelectUIState;
-  const locale = useConnectLocale();
-  const { connectModal } = useConnectUI();
+  const locale = useInAppWalletLocale(props.localeId);
 
   if (!locale) {
     return <LoadingScreen />;
   }
 
   const goBackToMain =
-    connectModal.size === "compact"
+    props.size === "compact"
       ? props.goBack
       : () => {
           setSelectionData({});
@@ -53,6 +67,9 @@ function InAppWalletConnectUI(props: {
         done={props.done}
         goBack={goBackToMain}
         wallet={props.wallet}
+        chain={props.chain}
+        client={props.client}
+        size={props.size}
       />
     );
   }
@@ -63,6 +80,9 @@ function InAppWalletConnectUI(props: {
         wallet={props.wallet}
         done={props.done}
         onBack={goBackToMain}
+        chain={props.chain}
+        client={props.client}
+        size={props.size}
       />
     );
   }
@@ -76,6 +96,9 @@ function InAppWalletConnectUI(props: {
         goBack={goBackToMain}
         wallet={props.wallet}
         state={state}
+        chain={props.chain}
+        client={props.client}
+        size={props.size}
       />
     );
   }
@@ -83,10 +106,15 @@ function InAppWalletConnectUI(props: {
   return (
     <InAppWalletFormUIScreen
       select={() => {}}
-      locale={locale}
+      connectLocale={props.connectLocale}
+      inAppWalletLocale={locale}
       done={props.done}
       goBack={props.goBack}
       wallet={props.wallet}
+      client={props.client}
+      meta={props.meta}
+      size={props.size}
+      chain={props.chain}
     />
   );
 }

package/src/react/web/wallets/in-app/InAppWalletFormUI.tsx

@@ -1,38 +1,49 @@
 "use client";
+import type { Chain } from "../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { iconSize } from "../../../core/design-system/index.js";
-import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
 import { TOS } from "../../ui/ConnectWallet/Modal/TOS.js";
 import { useScreenContext } from "../../ui/ConnectWallet/Modal/screen.js";
 import { PoweredByThirdweb } from "../../ui/ConnectWallet/PoweredByTW.js";
+import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
 import { Img } from "../../ui/components/Img.js";
 import { Spacer } from "../../ui/components/Spacer.js";
 import { Container, ModalHeader } from "../../ui/components/basic.js";
 import { ModalTitle } from "../../ui/components/modalElements.js";
 import { ConnectWalletSocialOptions } from "../shared/ConnectWalletSocialOptions.js";
-import type { ConnectLocale } from "../shared/locale/types.js";
+import type { InAppWalletLocale } from "../shared/locale/types.js";
 
 export type InAppWalletFormUIProps = {
   select: () => void;
-  locale: ConnectLocale;
+  inAppWalletLocale: InAppWalletLocale;
+  connectLocale: ConnectLocale;
   done: () => void;
   wallet: Wallet<"inApp">;
   goBack?: () => void;
+  size: "compact" | "wide";
+  meta: {
+    title?: string;
+    titleIconUrl?: string;
+    showThirdwebBranding?: boolean;
+    termsOfServiceUrl?: string;
+    privacyPolicyUrl?: string;
+  };
+  client: ThirdwebClient;
+  chain: Chain | undefined;
 };
 
 /**
  * @internal
  */
 export function InAppWalletFormUIScreen(props: InAppWalletFormUIProps) {
-  const locale = props.locale.emailLoginScreen;
-  const { connectModal, client } = useConnectUI();
-  const isCompact = connectModal.size === "compact";
+  const isCompact = props.size === "compact";
   const { initialScreen, screen } = useScreenContext();
 
-  const onBack =
-    screen === props.wallet && initialScreen === props.wallet
-      ? undefined
-      : props.goBack;
+  const isInitialScreen =
+    screen === props.wallet && initialScreen === props.wallet;
+
+  const onBack = isInitialScreen ? undefined : props.goBack;
 
   return (
     <Container
@@ -44,27 +55,33 @@ export function InAppWalletFormUIScreen(props: InAppWalletFormUIProps) {
         minHeight: "250px",
       }}
     >
-      {isCompact ? (
+      {isCompact && isInitialScreen ? (
         <>
           <ModalHeader
             onBack={onBack}
+            leftAligned={true}
             title={
               <>
-                {!connectModal.titleIcon ? null : (
+                {!props.meta.titleIconUrl ? null : (
                   <Img
-                    src={connectModal.titleIcon}
+                    src={props.meta.titleIconUrl}
                     width={iconSize.md}
                     height={iconSize.md}
-                    client={client}
+                    client={props.client}
                   />
                 )}
-                <ModalTitle>{connectModal.title ?? locale.title}</ModalTitle>
+                <ModalTitle>
+                  {props.meta.title ??
+                    props.inAppWalletLocale.emailLoginScreen.title}
+                </ModalTitle>
               </>
             }
           />
           <Spacer y="lg" />
         </>
-      ) : null}
+      ) : (
+        <ModalHeader onBack={onBack} title={props.inAppWalletLocale.signIn} />
+      )}
 
       <Container
         expand
@@ -72,21 +89,25 @@ export function InAppWalletFormUIScreen(props: InAppWalletFormUIProps) {
         center="y"
         p={isCompact ? undefined : "lg"}
       >
-        <ConnectWalletSocialOptions {...props} />
+        <ConnectWalletSocialOptions
+          {...props}
+          locale={props.inAppWalletLocale}
+        />
       </Container>
 
       {isCompact &&
-        (connectModal.showThirdwebBranding !== false ||
-          connectModal.termsOfServiceUrl ||
-          connectModal.privacyPolicyUrl) && <Spacer y="xl" />}
+        (props.meta.showThirdwebBranding !== false ||
+          props.meta.termsOfServiceUrl ||
+          props.meta.privacyPolicyUrl) && <Spacer y="xl" />}
 
       <Container flex="column" gap="lg">
         <TOS
-          termsOfServiceUrl={connectModal.termsOfServiceUrl}
-          privacyPolicyUrl={connectModal.privacyPolicyUrl}
+          termsOfServiceUrl={props.meta.termsOfServiceUrl}
+          privacyPolicyUrl={props.meta.privacyPolicyUrl}
+          locale={props.connectLocale.agreement}
         />
 
-        {connectModal.showThirdwebBranding !== false && <PoweredByThirdweb />}
+        {props.meta.showThirdwebBranding !== false && <PoweredByThirdweb />}
       </Container>
     </Container>
   );