Show EmbeddedWallet UI as initial screen in CW (#2289)

thirdweb-dev · Feb 9, 2024 · 0155adc · 0155adc
1 parent 74d76ff
commit 0155adc
Show file tree

Hide file tree

Showing 11 changed files with 216 additions and 171 deletions.
diff --git a/.changeset/fluffy-cougars-walk.md b/.changeset/fluffy-cougars-walk.md
@@ -0,0 +1,8 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+- Show EmbeddedWallet UI instead of the default welcomeScreen in the ConnectWallet wide modal. If a custom welcomeScreen is provided, it will be shown instead of the EmbeddedWallet UI. Same Is done for the deprecated PaperWallet as well
+- Stop treating Magic Link as a Social Login and remove the custom Select UI for it
+- highlight the wallet for which the Connect UI is shown in the ConnectWallet wide modal
+-
diff --git a/packages/react/src/wallet/ConnectWallet/Modal/ConnectEmbed.tsx b/packages/react/src/wallet/ConnectWallet/Modal/ConnectEmbed.tsx
@@ -8,7 +8,7 @@ import {
   reservedScreens,
 } from "../constants";
 import { ConnectModalContent } from "./ConnectModal";
-import { useScreen } from "./screen";
+import { useSetupScreen } from "./screen";
 import { DynamicHeight } from "../../../components/DynamicHeight";
 import {
   CustomThemeProvider,
@@ -19,7 +19,6 @@ import { useTWLocale } from "../../../evm/providers/locale-provider";
 import { StyledDiv } from "../../../design-system/elements";
 import { Theme, radius } from "../../../design-system";
 import {
-  WalletConfig,
   useConnectionStatus,
   useThirdwebAuthContext,
   useUser,
@@ -300,29 +299,30 @@ export function useShowConnectEmbed(loginOptional?: boolean) {
  */
 export function ConnectEmbed(props: ConnectEmbedProps) {
   const loginOptional = props.auth?.loginOptional;
-  const requiresSignIn = useSignInRequired(loginOptional);
   const show = useShowConnectEmbed(loginOptional);
-  const { screen, setScreen, initialScreen } = useScreen();
 
-  // if showing main screen but signIn is required, switch to signIn screen
-  useEffect(() => {
-    if (requiresSignIn && screen === reservedScreens.main) {
-      setScreen(reservedScreens.signIn);
-    }
-  }, [requiresSignIn, screen, setScreen]);
+  const contextTheme = useCustomTheme();
+
+  const walletUIStatesProps = {
+    theme: props.theme || contextTheme || defaultTheme,
+    modalSize: "compact" as const,
+    title: undefined,
+    termsOfServiceUrl: props.termsOfServiceUrl,
+    privacyPolicyUrl: props.privacyPolicyUrl,
+    isEmbed: true,
+    auth: props.auth,
+    onConnect: props.onConnect,
+    showThirdwebBranding: props.showThirdwebBranding,
+  };
 
   if (show) {
     return (
-      <ConnectEmbedContent
-        {...props}
-        onClose={() => {
-          setScreen(initialScreen);
-        }}
-        screen={screen}
-        setScreen={setScreen}
-        initialScreen={initialScreen}
-        onConnect={props.onConnect}
-      />
+      <WalletUIStatesProvider {...walletUIStatesProps}>
+        <CustomThemeProvider theme={walletUIStatesProps.theme}>
+          <ConnectEmbedContent {...props} onConnect={props.onConnect} />
+          <SyncedWalletUIStates {...walletUIStatesProps} />
+        </CustomThemeProvider>
+      </WalletUIStatesProvider>
     );
   }
 
@@ -331,17 +331,23 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
 
 const ConnectEmbedContent = (
   props: Omit<ConnectEmbedProps, "onConnect"> & {
-    onClose: () => void;
-    screen: string | WalletConfig;
-    setScreen: (screen: string | WalletConfig) => void;
-    initialScreen: string | WalletConfig;
     onConnect?: () => void;
+    loginOptional?: boolean;
   },
 ) => {
-  const modalSize = "compact" as const;
+  const requiresSignIn = useSignInRequired(props.loginOptional);
+  const screenSetup = useSetupScreen();
+  const { screen, setScreen, initialScreen } = screenSetup;
+
+  // if showing main screen but signIn is required, switch to signIn screen
+  useEffect(() => {
+    if (requiresSignIn && screen === reservedScreens.main) {
+      setScreen(reservedScreens.signIn);
+    }
+  }, [requiresSignIn, screen, setScreen]);
+
   const connectionStatus = useConnectionStatus();
   const { isAutoConnecting } = useWalletContext();
-  const contextTheme = useCustomTheme();
 
   let content = null;
 
@@ -361,11 +367,11 @@ const ConnectEmbedContent = (
   } else {
     content = (
       <ConnectModalContent
-        initialScreen={props.initialScreen}
-        screen={props.screen}
-        setScreen={props.setScreen}
+        screenSetup={screenSetup}
         isOpen={true}
-        onClose={props.onClose}
+        onClose={() => {
+          setScreen(initialScreen);
+        }}
         onHide={() => {
           // no op
         }}
@@ -376,34 +382,17 @@ const ConnectEmbedContent = (
     );
   }
 
-  const walletUIStatesProps = {
-    theme: props.theme || contextTheme || defaultTheme,
-    modalSize: modalSize,
-    title: undefined,
-    termsOfServiceUrl: props.termsOfServiceUrl,
-    privacyPolicyUrl: props.privacyPolicyUrl,
-    isEmbed: true,
-    auth: props.auth,
-    onConnect: props.onConnect,
-    showThirdwebBranding: props.showThirdwebBranding,
-  };
-
   return (
-    <WalletUIStatesProvider {...walletUIStatesProps}>
-      <CustomThemeProvider theme={walletUIStatesProps.theme}>
-        <EmbedContainer
-          className={props.className}
-          style={{
-            height: "auto",
-            maxWidth: modalMaxWidthCompact,
-            ...props.style,
-          }}
-        >
-          <DynamicHeight> {content} </DynamicHeight>
-          <SyncedWalletUIStates {...walletUIStatesProps} />
-        </EmbedContainer>
-      </CustomThemeProvider>
-    </WalletUIStatesProvider>
+    <EmbedContainer
+      className={props.className}
+      style={{
+        height: "auto",
+        maxWidth: modalMaxWidthCompact,
+        ...props.style,
+      }}
+    >
+      <DynamicHeight> {content} </DynamicHeight>
+    </EmbedContainer>
   );
 };
 

diff --git a/packages/react/src/wallet/ConnectWallet/Modal/ConnectModal.tsx b/packages/react/src/wallet/ConnectWallet/Modal/ConnectModal.tsx
@@ -26,7 +26,7 @@ import {
 } from "../constants";
 import { HeadlessConnectUI } from "../../wallets/headlessConnectUI";
 import { Container, noScrollBar } from "../../../components/basic";
-import { ScreenContext, useScreen } from "./screen";
+import { ScreenSetup, ScreenSetupContext, useSetupScreen } from "./screen";
 import { StartScreen } from "../screens/StartScreen";
 import {
   CustomThemeProvider,
@@ -36,15 +36,14 @@ import { SignatureScreen } from "../SignatureScreen";
 import { StyledDiv } from "../../../design-system/elements";
 
 export const ConnectModalContent = (props: {
-  screen: string | WalletConfig;
-  initialScreen: string | WalletConfig;
-  setScreen: (screen: string | WalletConfig) => void;
+  screenSetup: ScreenSetup;
   onHide: () => void;
   onShow: () => void;
   isOpen: boolean;
   onClose: () => void;
 }) => {
-  const { screen, setScreen, initialScreen, onHide, onShow, onClose } = props;
+  const { onHide, onShow, onClose } = props;
+  const { screen, setScreen, initialScreen } = props.screenSetup;
 
   const walletConfigs = useWallets();
   const connectionStatus = useConnectionStatus();
@@ -173,7 +172,7 @@ export const ConnectModalContent = (props: {
   );
 
   return (
-    <ScreenContext.Provider value={screen}>
+    <ScreenSetupContext.Provider value={props.screenSetup}>
       {isWideModal ? (
         <div
           style={{
@@ -205,14 +204,15 @@ export const ConnectModalContent = (props: {
           {typeof screen !== "string" && getWalletUI(screen)}
         </Container>
       )}
-    </ScreenContext.Provider>
+    </ScreenSetupContext.Provider>
   );
 };
 
 export const ConnectModal = () => {
   const { theme, modalSize } = useContext(ModalConfigCtx);
 
-  const { screen, setScreen, initialScreen } = useScreen();
+  const screenSetup = useSetupScreen();
+  const { screen, setScreen, initialScreen } = screenSetup;
   const isWalletModalOpen = useIsWalletModalOpen();
   const setIsWalletModalOpen = useSetIsWalletModalOpen();
   const [hideModal, setHideModal] = useState(false);
@@ -311,9 +311,7 @@ export const ConnectModal = () => {
         }}
       >
         <ConnectModalContent
-          initialScreen={initialScreen}
-          screen={screen}
-          setScreen={setScreen}
+          screenSetup={screenSetup}
           onHide={onHide}
           onShow={onShow}
           isOpen={isWalletModalOpen}

diff --git a/packages/react/src/wallet/ConnectWallet/Modal/ConnectModalInline.tsx b/packages/react/src/wallet/ConnectWallet/Modal/ConnectModalInline.tsx
@@ -9,7 +9,7 @@ import {
   modalMaxWidthWide,
 } from "../constants";
 import { ConnectModalContent } from "./ConnectModal";
-import { useScreen } from "./screen";
+import { useSetupScreen } from "./screen";
 import { useWallets } from "@thirdweb-dev/react-core";
 import { DynamicHeight } from "../../../components/DynamicHeight";
 import {
@@ -41,20 +41,48 @@ export type ConnectModalInlineProps = {
  * @internal
  */
 export const ConnectModalInline = (props: ConnectModalInlineProps) => {
-  const { screen, setScreen, initialScreen } = useScreen();
   const walletConfigs = useWallets();
   const modalSize =
     !canFitWideModal() || walletConfigs.length === 1
       ? "compact"
       : props.modalSize;
   const ctxTheme = useCustomTheme();
 
+  const walletUIStatesProps = {
+    theme: props.theme || ctxTheme,
+    modalSize: modalSize,
+    title: props.modalTitle,
+    termsOfServiceUrl: props.termsOfServiceUrl,
+    privacyPolicyUrl: props.privacyPolicyUrl,
+    welcomeScreen: props.welcomeScreen,
+    titleIconUrl: props.modalTitleIconUrl,
+    showThirdwebBranding: props.showThirdwebBranding,
+  };
+
+  return (
+    <WalletUIStatesProvider {...walletUIStatesProps}>
+      <CustomThemeProvider theme={walletUIStatesProps.theme}>
+        <ConnectModalInlineContent
+          className={props.className}
+          modalSize={modalSize}
+        />
+        <SyncedWalletUIStates {...walletUIStatesProps} />
+      </CustomThemeProvider>
+    </WalletUIStatesProvider>
+  );
+};
+
+function ConnectModalInlineContent(props: {
+  className?: string;
+  modalSize?: "compact" | "wide";
+  style?: React.CSSProperties;
+}) {
+  const screenSetup = useSetupScreen();
+
   const content = (
     <>
       <ConnectModalContent
-        initialScreen={initialScreen}
-        screen={screen}
-        setScreen={setScreen}
+        screenSetup={screenSetup}
         onHide={() => {
           // no op
         }}
@@ -82,42 +110,26 @@ export const ConnectModalInline = (props: ConnectModalInlineProps) => {
     </>
   );
 
-  const walletUIStatesProps = {
-    theme: props.theme || ctxTheme,
-    modalSize: modalSize,
-    title: props.modalTitle,
-    termsOfServiceUrl: props.termsOfServiceUrl,
-    privacyPolicyUrl: props.privacyPolicyUrl,
-    welcomeScreen: props.welcomeScreen,
-    titleIconUrl: props.modalTitleIconUrl,
-    showThirdwebBranding: props.showThirdwebBranding,
-  };
-
   return (
-    <WalletUIStatesProvider {...walletUIStatesProps}>
-      <CustomThemeProvider theme={walletUIStatesProps.theme}>
-        <ConnectModalInlineContainer
-          className={props.className}
-          style={{
-            height: modalSize === "compact" ? "auto" : wideModalMaxHeight,
-            maxWidth:
-              modalSize === "compact"
-                ? modalMaxWidthCompact
-                : modalMaxWidthWide,
-            ...props.style,
-          }}
-        >
-          {modalSize === "compact" ? (
-            <DynamicHeight> {content} </DynamicHeight>
-          ) : (
-            content
-          )}
-          <SyncedWalletUIStates {...walletUIStatesProps} />
-        </ConnectModalInlineContainer>
-      </CustomThemeProvider>
-    </WalletUIStatesProvider>
+    <ConnectModalInlineContainer
+      className={props.className}
+      style={{
+        height: props.modalSize === "compact" ? "auto" : wideModalMaxHeight,
+        maxWidth:
+          props.modalSize === "compact"
+            ? modalMaxWidthCompact
+            : modalMaxWidthWide,
+        ...props.style,
+      }}
+    >
+      {props.modalSize === "compact" ? (
+        <DynamicHeight> {content} </DynamicHeight>
+      ) : (
+        content
+      )}
+    </ConnectModalInlineContainer>
   );
-};
+}
 
 const ConnectModalInlineContainer = /* @__PURE__ */ StyledDiv(() => {
   const theme = useCustomTheme();