Merge branch 'main' of github.com:thirdweb-dev/js into mariano/cli-auth-flow

Author: Marfuen

.changeset/olive-zebras-live.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+Export ConnectModalInline component

packages/react/src/components/Modal.tsx

@@ -152,7 +152,7 @@ const DialogContent = styled.div<{ theme?: Theme }>`
   }
 `;
 
-const DialogTitle = /* @__PURE__ */ styled(/* @__PURE__ */ Dialog.Title)<{
+const DialogTitle = /* @__PURE__ */ styled.h2<{
   theme?: Theme;
 }>`
   margin: 0;

packages/react/src/components/modalElements.tsx

@@ -2,10 +2,9 @@ import { type Theme, fontSize, media } from "../design-system";
 import { iconSize } from "../design-system";
 import { IconButton } from "./buttons";
 import styled from "@emotion/styled";
-import { Title } from "@radix-ui/react-dialog";
 import { ChevronLeftIcon } from "@radix-ui/react-icons";
 
-export const ModalTitle = /* @__PURE__ */ styled(Title)<{
+export const ModalTitle = /* @__PURE__ */ styled.h2<{
   theme?: Theme;
   centerOnMobile?: boolean;
 }>`

packages/react/src/evm/index.ts

@@ -7,6 +7,8 @@ export { useSafe } from "./connectors/gnosis";
 export { useMagic } from "./connectors/magic";
 
 export { ConnectWallet } from "../wallet/ConnectWallet/ConnectWallet";
+export { ConnectModalInline } from "../wallet/ConnectWallet/ConnectModal";
+
 export { NetworkSelector } from "../wallet/ConnectWallet/NetworkSelector";
 export type { NetworkSelectorProps } from "../wallet/ConnectWallet/NetworkSelector";
 

packages/react/src/wallet/ConnectWallet/ConnectModal.tsx

@@ -10,25 +10,41 @@ import {
 import {
   ModalConfigCtx,
   SetModalConfigCtx,
+  WalletUIStatesProvider,
   useIsWalletModalOpen,
   useSetIsWalletModalOpen,
 } from "../../evm/providers/wallet-ui-states-provider";
 import { ThemeProvider } from "@emotion/react";
-import { darkTheme, lightTheme } from "../../design-system";
+import {
+  Theme,
+  darkTheme,
+  lightTheme,
+  radius,
+  spacing,
+} from "../../design-system";
 import { useState, useCallback, useEffect, useRef, useContext } from "react";
 import { GetStartedWithWallets } from "./screens/GetStartedWithWallets";
 import { reservedScreens } from "./constants";
 import { HeadlessConnectUI } from "../wallets/headlessConnectUI";
+import styled from "@emotion/styled";
+import { scrollbar } from "../../design-system/styles";
 
-export const ConnectModal = () => {
-  const { theme, title } = useContext(ModalConfigCtx);
+export const ConnectModalContent = (props: {
+  screen: string | WalletConfig;
+  setScreen: (screen: string | WalletConfig) => void;
+  theme?: "light" | "dark";
+  title?: string;
+}) => {
+  const { screen, setScreen } = props;
+  const modalConfig = useContext(ModalConfigCtx);
+  const title = props.title || modalConfig.title;
+  const theme = props.theme || modalConfig.theme;
   const walletConfigs = useWallets();
   const initialScreen =
     walletConfigs.length === 1 && !walletConfigs[0].selectUI
       ? walletConfigs[0]
       : reservedScreens.main;
 
-  const [screen, setScreen] = useState<string | WalletConfig>(initialScreen);
   const isWalletModalOpen = useIsWalletModalOpen();
   const setIsWalletModalOpen = useSetIsWalletModalOpen();
   const connectionStatus = useConnectionStatus();
@@ -47,7 +63,13 @@ export const ConnectModal = () => {
       }
       setIsWalletModalOpen(false);
     },
-    [setIsWalletModalOpen, initialScreen, connectionStatus, disconnect],
+    [
+      connectionStatus,
+      setIsWalletModalOpen,
+      setScreen,
+      initialScreen,
+      disconnect,
+    ],
   );
 
   const handleBack = useCallback(() => {
@@ -95,6 +117,55 @@ export const ConnectModal = () => {
           : darkTheme
       }
     >
+      {screen === reservedScreens.main && (
+        <WalletSelector
+          title={title}
+          walletConfigs={walletConfigs}
+          onGetStarted={() => {
+            setScreen(reservedScreens.getStarted);
+          }}
+          selectWallet={setScreen}
+        />
+      )}
+
+      {screen === reservedScreens.getStarted && (
+        <GetStartedWithWallets onBack={handleBack} />
+      )}
+
+      {WalletConnectUI && (
+        <WalletConnectUI
+          supportedWallets={walletConfigs}
+          theme={theme}
+          goBack={handleBack}
+          close={handleClose}
+          isOpen={isWalletModalOpen}
+          open={() => {
+            setIsWalletModalOpen(true);
+          }}
+          walletConfig={screen}
+          selectionData={walletModalConfig.data}
+          setSelectionData={(data) => {
+            setWalletModalConfig((config) => ({
+              ...config,
+              data,
+            }));
+          }}
+        />
+      )}
+    </ThemeProvider>
+  );
+};
+
+export const ConnectModal = () => {
+  const { theme } = useContext(ModalConfigCtx);
+  const { screen, setScreen, initialScreen } = useScreen();
+  const isWalletModalOpen = useIsWalletModalOpen();
+  const setIsWalletModalOpen = useSetIsWalletModalOpen();
+  const connectionStatus = useConnectionStatus();
+  const disconnect = useDisconnect();
+
+  return (
+    <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
       <Modal
         style={{
           maxWidth: "450px",
@@ -111,42 +182,62 @@ export const ConnectModal = () => {
           }
         }}
       >
-        {screen === reservedScreens.main && (
-          <WalletSelector
-            title={title}
-            walletConfigs={walletConfigs}
-            onGetStarted={() => {
-              setScreen(reservedScreens.getStarted);
-            }}
-            selectWallet={setScreen}
-          />
-        )}
-
-        {screen === reservedScreens.getStarted && (
-          <GetStartedWithWallets onBack={handleBack} />
-        )}
-
-        {WalletConnectUI && (
-          <WalletConnectUI
-            supportedWallets={walletConfigs}
-            theme={theme}
-            goBack={handleBack}
-            close={handleClose}
-            isOpen={isWalletModalOpen}
-            open={() => {
-              setIsWalletModalOpen(true);
-            }}
-            walletConfig={screen}
-            selectionData={walletModalConfig.data}
-            setSelectionData={(data) => {
-              setWalletModalConfig((config) => ({
-                ...config,
-                data,
-              }));
-            }}
-          />
-        )}
+        <ConnectModalContent screen={screen} setScreen={setScreen} />
       </Modal>
     </ThemeProvider>
   );
 };
+
+export const ConnectModalInline = (props: {
+  theme?: "light" | "dark";
+  title?: string;
+  className?: string;
+}) => {
+  const { screen, setScreen } = useScreen();
+  return (
+    <WalletUIStatesProvider theme={props.theme}>
+      <ThemeProvider theme={props.theme === "light" ? lightTheme : darkTheme}>
+        <ConnectModalInlineContainer className={props.className}>
+          <ConnectModalContent
+            screen={screen}
+            setScreen={setScreen}
+            theme={props.theme}
+            title={props.title}
+          />
+        </ConnectModalInlineContainer>
+      </ThemeProvider>
+    </WalletUIStatesProvider>
+  );
+};
+
+function useScreen() {
+  const walletConfigs = useWallets();
+  const initialScreen =
+    walletConfigs.length === 1 && !walletConfigs[0].selectUI
+      ? walletConfigs[0]
+      : reservedScreens.main;
+
+  const [screen, setScreen] = useState<string | WalletConfig>(initialScreen);
+  return {
+    screen,
+    setScreen,
+    initialScreen,
+  };
+}
+
+const ConnectModalInlineContainer = styled.div<{ theme?: Theme }>`
+  background: ${(p) => p.theme.bg.base};
+  padding: ${spacing.lg};
+  border-radius: ${radius.xl};
+  max-width: 450px;
+  width: 100%;
+  box-sizing: border-box;
+  max-height: 70vh;
+  overflow-y: auto;
+  ${(p) =>
+    scrollbar({
+      track: "transparent",
+      thumb: p.theme.bg.elevated,
+      hover: p.theme.bg.highlighted,
+    })}
+`;