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

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

@@ -1,13 +1,16 @@
 "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 { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
 import { useScreenContext } from "../../ui/ConnectWallet/Modal/screen.js";
 import { WalletEntryButton } from "../../ui/ConnectWallet/WalletEntryButton.js";
 import { reservedScreens } from "../../ui/ConnectWallet/constants.js";
+import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
+import type { LocaleId } from "../../ui/types.js";
 import { ConnectWalletSocialOptions } from "../shared/ConnectWalletSocialOptions.js";
 import { LoadingScreen } from "../shared/LoadingScreen.js";
-import { useConnectLocale } from "./useInAppWalletLocale.js";
+import { useInAppWalletLocale } from "./useInAppWalletLocale.js";
 
 /**
  *
@@ -18,18 +21,23 @@ function InAppWalletSelectionUI(props: {
   wallet: Wallet<"inApp">;
   done: () => void;
   goBack?: () => void;
+  connectLocale: ConnectLocale;
+  client: ThirdwebClient;
+  recommendedWallets: Wallet[] | undefined;
+  chain: Chain | undefined;
+  localeId: LocaleId;
+  size: "compact" | "wide";
 }) {
   const { screen } = useScreenContext();
-  const { connectModal } = useConnectUI();
   const setData = useSetSelectionData();
-  const locale = useConnectLocale();
+  const locale = useInAppWalletLocale(props.localeId);
 
   // do not show the "selectUI" if
   // modal is compact or
   // it is being rendered in Safe wallet
   if (
-    connectModal.size === "wide" ||
-    (screen !== reservedScreens.main && connectModal.size === "compact")
+    props.size === "wide" ||
+    (screen !== reservedScreens.main && props.size === "compact")
   ) {
     return (
       <WalletEntryButton
@@ -38,6 +46,9 @@ function InAppWalletSelectionUI(props: {
           setData({});
           props.select();
         }}
+        client={props.client}
+        connectLocale={props.connectLocale}
+        recommendedWallets={props.recommendedWallets}
       />
     );
   }
@@ -53,6 +64,9 @@ function InAppWalletSelectionUI(props: {
       done={props.done}
       select={props.select}
       goBack={props.goBack}
+      chain={props.chain}
+      client={props.client}
+      size={props.size}
     />
   );
 }

package/src/react/web/wallets/in-app/useInAppWalletLocale.ts

@@ -1,17 +1,20 @@
 import { useEffect, useState } from "react";
-import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
-import { getConnectLocale } from "../shared/locale/getConnectLocale.js";
-import type { ConnectLocale } from "../shared/locale/types.js";
+import type { LocaleId } from "../../ui/types.js";
+import { getInAppWalletLocale } from "../shared/locale/getConnectLocale.js";
+import type { InAppWalletLocale } from "../shared/locale/types.js";
 
 /**
  * @internal
  */
-export function useConnectLocale() {
-  const localeId = useConnectUI().locale;
-  const [locale, setLocale] = useState<ConnectLocale | undefined>(undefined);
+export function useInAppWalletLocale(localeId: LocaleId) {
+  const [locale, setLocale] = useState<InAppWalletLocale | undefined>(
+    undefined,
+  );
 
+  // TODO: move this to a useQuery hook
+  // or at the very least dedupe it?
   useEffect(() => {
-    getConnectLocale(localeId).then((l) => {
+    getInAppWalletLocale(localeId).then((l) => {
       setLocale(l);
     });
   }, [localeId]);

package/src/react/web/wallets/shared/CoinbaseSDKConnection.tsx

@@ -1,11 +1,10 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { Chain } from "../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { COINBASE } from "../../../../wallets/constants.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 type { InjectedWalletLocale } from "../injected/locale/types.js";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { COINBASE } from "../../../../wallets/constants.js";
 import { ConnectingScreen } from "./ConnectingScreen.js";
 
 /**
@@ -18,17 +17,19 @@ function CoinbaseSDKWalletConnectUI(props: {
   locale: InjectedWalletLocale;
   wallet: Wallet<typeof COINBASE>;
   walletInfo: WalletInfo;
+  client: ThirdwebClient;
+  chain: Chain | undefined;
+  size: "compact" | "wide";
 }) {
   const { onBack, done, wallet, walletInfo, onGetStarted, locale } = props;
   const [errorConnecting, setErrorConnecting] = useState(false);
-  const { client, chain } = useConnectUI();
 
   const connect = useCallback(() => {
     setErrorConnecting(false);
     wallet
       .connect({
-        client,
-        chain,
+        client: props.client,
+        chain: props.chain,
       })
       .then(() => {
         done();
@@ -37,7 +38,7 @@ function CoinbaseSDKWalletConnectUI(props: {
         console.error(e);
         setErrorConnecting(true);
       });
-  }, [client, wallet, chain, done]);
+  }, [props.client, wallet, props.chain, done]);
 
   const scanStarted = useRef(false);
   useEffect(() => {
@@ -63,6 +64,8 @@ function CoinbaseSDKWalletConnectUI(props: {
       errorConnecting={errorConnecting}
       onRetry={connect}
       onGetStarted={onGetStarted}
+      client={props.client}
+      size={props.size}
     />
   );
 }

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -1,6 +1,8 @@
 "use client";
 import styled from "@emotion/styled";
 import { 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 { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
@@ -15,7 +17,6 @@ import {
   iconSize,
   spacing,
 } from "../../../core/design-system/index.js";
-import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
 import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
 import { WalletTypeRowButton } from "../../ui/ConnectWallet/WalletTypeRowButton.js";
 import {
@@ -30,7 +31,7 @@ import { Button } from "../../ui/components/buttons.js";
 import { InputSelectionUI } from "../in-app/InputSelectionUI.js";
 import { socialIcons } from "../in-app/socialIcons.js";
 import { validateEmail } from "../in-app/validateEmail.js";
-import type { ConnectLocale } from "./locale/types.js";
+import type { InAppWalletLocale } from "./locale/types.js";
 import { openOauthSignInWindow } from "./openOauthSignInWindow.js";
 import { setLastAuthProvider } from "./storage.js";
 
@@ -58,9 +59,12 @@ const defaultAuthOptions: AuthOption[] = [
 export type ConnectWalletSocialOptionsProps = {
   select: () => void;
   done: () => void;
-  locale: ConnectLocale;
+  locale: InAppWalletLocale;
   wallet: Wallet<EcosystemWalletId> | Wallet<"inApp">;
   goBack?: () => void;
+  chain: Chain | undefined;
+  client: ThirdwebClient;
+  size: "compact" | "wide";
 };
 
 /**
@@ -70,7 +74,6 @@ export const ConnectWalletSocialOptions = (
   props: ConnectWalletSocialOptionsProps,
 ) => {
   const locale = props.locale;
-  const { chain, client, connectModal } = useConnectUI();
   const { wallet } = props;
   const setData = useSetSelectionData() as (
     value: ConnectWalletSelectUIState,
@@ -131,8 +134,8 @@ export const ConnectWalletSocialOptions = (
         throw new Error("Failed to open login window");
       }
       const connectOptions = {
-        chain,
-        client,
+        chain: props.chain,
+        client: props.client,
         strategy,
         openedWindow: socialLoginWindow,
         closeOpenedWindow: (openedWindow: Window) => {
@@ -212,7 +215,7 @@ export const ConnectWalletSocialOptions = (
                   src={socialIcons[loginMethod]}
                   width={imgIconSize}
                   height={imgIconSize}
-                  client={client}
+                  client={props.client}
                 />
                 {!showOnlyIcons && loginMethodsLabel[loginMethod]}
               </SocialButton>
@@ -221,7 +224,7 @@ export const ConnectWalletSocialOptions = (
         </Container>
       )}
 
-      {connectModal.size === "wide" &&
+      {props.size === "wide" &&
         hasSocialLogins &&
         (isEmailEnabled || isPhoneEnabled) && <TextDivider text={locale.or} />}
 
@@ -249,7 +252,7 @@ export const ConnectWalletSocialOptions = (
             />
           ) : (
             <WalletTypeRowButton
-              client={client}
+              client={props.client}
               icon={emailIcon}
               onClick={() => {
                 setInputMode("email");
@@ -289,7 +292,7 @@ export const ConnectWalletSocialOptions = (
             />
           ) : (
             <WalletTypeRowButton
-              client={client}
+              client={props.client}
               icon={phoneIcon}
               onClick={() => {
                 setInputMode("phone");
@@ -304,7 +307,7 @@ export const ConnectWalletSocialOptions = (
       {passKeyEnabled && (
         <>
           <WalletTypeRowButton
-            client={client}
+            client={props.client}
             icon={passkeyIcon}
             onClick={() => {
               handlePassKeyLogin();

package/src/react/web/wallets/shared/ConnectingScreen.tsx

@@ -1,7 +1,7 @@
 import { ReloadIcon } from "@radix-ui/react-icons";
+import type { ThirdwebClient } from "../../../../client/client.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
 import { iconSize, spacing } from "../../../core/design-system/index.js";
-import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
 import { WalletLogoSpinner } from "../../ui/ConnectWallet/screens/WalletLogoSpinner.js";
 import { Spacer } from "../../ui/components/Spacer.js";
 import { Container, Line, ModalHeader } from "../../ui/components/basic.js";
@@ -25,9 +25,11 @@ export const ConnectingScreen: React.FC<{
     failed: string;
     inProgress: string;
   };
+  client: ThirdwebClient;
+  size: "compact" | "wide";
 }> = (props) => {
   const { locale } = props;
-  const { client, connectModal } = useConnectUI();
+
   return (
     <Container animate="fadein" fullHeight flex="column">
       <Container
@@ -43,7 +45,7 @@ export const ConnectingScreen: React.FC<{
         flex="column"
         center="y"
         expand
-        px={connectModal.size === "compact" ? "lg" : "xxl"}
+        px={props.size === "compact" ? "lg" : "xxl"}
         relative
         style={{
           paddingTop: 0,
@@ -51,7 +53,7 @@ export const ConnectingScreen: React.FC<{
       >
         <Container py="3xl">
           <WalletLogoSpinner
-            client={client}
+            client={props.client}
             error={props.errorConnecting}
             id={props.walletId}
           />
@@ -103,7 +105,7 @@ export const ConnectingScreen: React.FC<{
           </Container>
         </>
       ) : (
-        <Spacer y={connectModal.size === "compact" ? "lg" : "xxl"} />
+        <Spacer y={props.size === "compact" ? "lg" : "xxl"} />
       )}
     </Container>
   );

package/src/react/web/wallets/shared/GetStartedScreen.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import type { ThirdwebClient } from "../../../../client/client.js";
 import { isMobile } from "../../../../utils/web/isMobile.js";
 import { openWindow } from "../../../../utils/web/openWindow.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
@@ -10,7 +11,6 @@ import {
   radius,
   spacing,
 } from "../../../core/design-system/index.js";
-import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
 import { AppleIcon } from "../../ui/ConnectWallet/icons/AppleIcon.js";
 import { ChromeIcon } from "../../ui/ConnectWallet/icons/ChromeIcon.js";
 import { PlayStoreIcon } from "../../ui/ConnectWallet/icons/PlayStoreIcon.js";
@@ -33,7 +33,8 @@ export const GetStartedScreen: React.FC<{
   footer?: React.ReactNode;
   showBack?: boolean;
   locale: InjectedWalletLocale;
-}> = ({ wallet, walletInfo, header, footer, onBack, locale }) => {
+  client: ThirdwebClient;
+}> = ({ wallet, walletInfo, header, footer, onBack, locale, client }) => {
   const [showScreen, setShowScreen] = useState<
     "base" | "android-scan" | "ios-scan"
   >("base");
@@ -65,6 +66,7 @@ export const GetStartedScreen: React.FC<{
             locale={{
               scanToDownload: locale.getStartedScreen.instruction,
             }}
+            client={client}
           />
         )}
 
@@ -79,6 +81,7 @@ export const GetStartedScreen: React.FC<{
             locale={{
               scanToDownload: locale.getStartedScreen.instruction,
             }}
+            client={client}
           />
         )}
 
@@ -168,8 +171,8 @@ const InstallScanScreen: React.FC<{
   locale: {
     scanToDownload: string;
   };
+  client: ThirdwebClient;
 }> = (props) => {
-  const { client } = useConnectUI();
   return (
     <Container animate="fadein" expand>
       <ModalHeader title={props.walletName} onBack={props.onBack} />
@@ -189,7 +192,7 @@ const InstallScanScreen: React.FC<{
             <WalletImage
               id={props.walletId}
               size={iconSize.xxl}
-              client={client}
+              client={props.client}
             />
           }
         />

package/src/react/web/wallets/shared/OTPLoginUI.tsx

@@ -1,5 +1,7 @@
 "use client";
 import { useCallback, useEffect, useMemo, 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 { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import type { SendEmailOtpReturnType } from "../../../../wallets/in-app/core/authentication/type.js";
@@ -8,7 +10,6 @@ import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { fontSize } from "../../../core/design-system/index.js";
-import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
 import { FadeIn } from "../../ui/components/FadeIn.js";
 import { OTPInput } from "../../ui/components/OTPInput.js";
 import { Spacer } from "../../ui/components/Spacer.js";
@@ -17,7 +18,7 @@ import { Container, Line, ModalHeader } from "../../ui/components/basic.js";
 import { Button } from "../../ui/components/buttons.js";
 import { Text } from "../../ui/components/text.js";
 import { StyledButton } from "../../ui/design-system/elements.js";
-import type { ConnectLocale } from "./locale/types.js";
+import type { InAppWalletLocale } from "./locale/types.js";
 import { setLastAuthProvider } from "./storage.js";
 
 type VerificationStatus =
@@ -35,13 +36,15 @@ type ScreenToShow = "base" | "enter-password-or-recovery-code";
 export function OTPLoginUI(props: {
   userInfo: { email: string } | { phone: string };
   wallet: Wallet;
-  locale: ConnectLocale;
+  locale: InAppWalletLocale;
   done: () => void;
   goBack?: () => void;
+  client: ThirdwebClient;
+  chain: Chain | undefined;
+  size: "compact" | "wide";
 }) {
   const { wallet, done, goBack, userInfo } = props;
-  const { client, chain, connectModal } = useConnectUI();
-  const isWideModal = connectModal.size === "wide";
+  const isWideModal = props.size === "wide";
   const locale = props.locale;
   const [otpInput, setOtpInput] = useState("");
   const [verifyStatus, setVerifyStatus] = useState<VerificationStatus>("idle");
@@ -67,7 +70,7 @@ export function OTPLoginUI(props: {
             : undefined,
           email: userInfo.email,
           strategy: "email",
-          client,
+          client: props.client,
         });
         setAccountStatus(status);
       } else if ("phone" in userInfo) {
@@ -81,7 +84,7 @@ export function OTPLoginUI(props: {
             : undefined,
           phoneNumber: userInfo.phone,
           strategy: "phone",
-          client,
+          client: props.client,
         });
         setAccountStatus(status);
       } else {
@@ -92,25 +95,25 @@ export function OTPLoginUI(props: {
       setVerifyStatus("idle");
       setAccountStatus("error");
     }
-  }, [client, userInfo, wallet, isEcosystem]);
+  }, [props.client, userInfo, wallet, isEcosystem]);
 
   async function connect(otp: string) {
     if ("email" in userInfo) {
       await wallet.connect({
-        chain,
+        chain: props.chain,
         strategy: "email",
         email: userInfo.email,
         verificationCode: otp,
-        client,
+        client: props.client,
       });
       await setLastAuthProvider("email", webLocalStorage);
     } else if ("phone" in userInfo) {
       await wallet.connect({
-        chain,
+        chain: props.chain,
         strategy: "phone",
         phoneNumber: userInfo.phone,
         verificationCode: otp,
-        client,
+        client: props.client,
       });
       await setLastAuthProvider("phone", webLocalStorage);
     } else {

package/src/react/web/wallets/shared/PassKeyLogin.tsx

@@ -6,7 +6,6 @@ import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import { hasStoredPasskey } from "../../../../wallets/in-app/web/lib/auth/passkeys.js";
 import { iconSize } from "../../../core/design-system/index.js";
-import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
 import { AccentFailIcon } from "../../ui/ConnectWallet/icons/AccentFailIcon.js";
 import { FingerPrintIcon } from "../../ui/ConnectWallet/icons/FingerPrintIcon.js";
 import { Spacer } from "../../ui/components/Spacer.js";
@@ -26,9 +25,11 @@ export function PassKeyLogin(props: {
   wallet: Wallet;
   done: () => void;
   onBack?: () => void;
+  client: ThirdwebClient;
+  chain: Chain | undefined;
+  size: "compact" | "wide";
 }) {
-  const { client, connectModal, chain } = useConnectUI();
-  const { wallet, done } = props;
+  const { wallet, done, client, chain, size } = props;
   const [screen, setScreen] = useState<
     "select" | "login" | "loading" | "signup"
   >("loading");
@@ -63,7 +64,7 @@ export function PassKeyLogin(props: {
       </Container>
 
       <Container
-        px={connectModal.size === "wide" ? "xxl" : "lg"}
+        px={size === "wide" ? "xxl" : "lg"}
         expand
         flex="column"
         center="y"

package/src/react/web/wallets/shared/SocialLogin.tsx

@@ -1,17 +1,18 @@
 "use client";
 import { 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 { InAppWalletSocialAuth } from "../../../../wallets/in-app/core/wallet/types.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
-import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
 import { Spacer } from "../../ui/components/Spacer.js";
 import { Spinner } from "../../ui/components/Spinner.js";
 import { Container, ModalHeader } from "../../ui/components/basic.js";
 import { Button } from "../../ui/components/buttons.js";
 import { Text } from "../../ui/components/text.js";
 import type { ConnectWalletSelectUIState } from "./ConnectWalletSocialOptions.js";
-import type { ConnectLocale } from "./locale/types.js";
+import type { InAppWalletLocale } from "./locale/types.js";
 import { openOauthSignInWindow } from "./openOauthSignInWindow.js";
 import { setLastAuthProvider } from "./storage.js";
 
@@ -20,22 +21,24 @@ import { setLastAuthProvider } from "./storage.js";
  */
 export function SocialLogin(props: {
   socialAuth: InAppWalletSocialAuth;
-  locale: ConnectLocale;
+  locale: InAppWalletLocale;
   wallet: Wallet;
   done: () => void;
   goBack?: () => void;
   state: ConnectWalletSelectUIState;
+  size: "compact" | "wide";
+  client: ThirdwebClient;
+  chain: Chain | undefined;
 }) {
   const ewLocale = props.locale;
   const locale = ewLocale.socialLoginScreen;
   const themeObj = useCustomTheme();
-  const { connectModal } = useConnectUI();
+
   const [authError, setAuthError] = useState<string | undefined>(undefined);
   const { done, wallet } = props;
   const [status, setStatus] = useState<"connecting" | "connected" | "error">(
     "connecting",
   );
-  const { client, chain } = useConnectUI();
 
   const handleSocialLogin = async () => {
     try {
@@ -47,13 +50,13 @@ export function SocialLogin(props: {
 
       setStatus("connecting");
       await wallet.connect({
-        chain,
+        chain: props.chain,
         strategy: props.socialAuth,
         openedWindow: socialWindow,
         closeOpenedWindow: (openedWindow) => {
           openedWindow.close();
         },
-        client,
+        client: props.client,
       });
       await setLastAuthProvider(props.socialAuth, webLocalStorage);
       setStatus("connected");
@@ -109,7 +112,7 @@ export function SocialLogin(props: {
           <ModalHeader title={locale.title} onBack={props.goBack} />
         )}
 
-        {connectModal.size === "compact" ? <Spacer y="xl" /> : null}
+        {props.size === "compact" ? <Spacer y="xl" /> : null}
 
         <Container
           flex="column"