Add connect preview option back for Builder

packages/connect/src/components/SequenceConnectPreview/SequenceConnectPreview.tsx

@@ -0,0 +1,42 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import type { ReactNode } from 'react'
+import { WagmiProvider, type State } from 'wagmi'
+
+import type { SequenceConnectConfig } from '../../config/createConfig.js'
+
+import { SequenceConnectPreviewProvider } from './SequenceConnectPreviewProvider.js'
+
+const defaultQueryClient = new QueryClient()
+
+interface SequenceConnectPreviewProps {
+  config: SequenceConnectConfig
+  queryClient?: QueryClient
+  initialState?: State | undefined
+  children: ReactNode
+}
+
+/**
+ * @internal
+ * Preview version of SequenceConnect component.
+ * This component should only be used for testing purposes.
+ * It provides the same functionality as SequenceConnect but only for preview purposes.
+ */
+export const SequenceConnectPreview = (props: SequenceConnectPreviewProps) => {
+  const { config, queryClient, initialState, children } = props
+  const { connectConfig, wagmiConfig } = config
+
+  return (
+    <WagmiProvider config={wagmiConfig} initialState={initialState}>
+      <QueryClientProvider client={queryClient || defaultQueryClient}>
+        <SequenceConnectPreviewProvider
+          config={{
+            ...connectConfig,
+            hideConnectedWallets: true
+          }}
+        >
+          {children}
+        </SequenceConnectPreviewProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  )
+}

packages/connect/src/components/SequenceConnectPreview/SequenceConnectPreviewProvider.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { ThemeProvider, type Theme } from '@0xsequence/design-system'
+import { GoogleOAuthProvider } from '@react-oauth/google'
+import { useState, type ReactNode } from 'react'
+import { useConfig } from 'wagmi'
+
+import { AnalyticsContextProvider } from '../../contexts/Analytics.js'
+import { ConnectConfigContextProvider } from '../../contexts/ConnectConfig.js'
+import { ThemeContextProvider } from '../../contexts/Theme.js'
+import { WalletConfigContextProvider } from '../../contexts/WalletConfig.js'
+import { useEmailConflict } from '../../hooks/useWaasEmailConflict.js'
+import { type ConnectConfig, type DisplayedAsset, type ExtendedConnector, type ModalPosition } from '../../types.js'
+import { Connect } from '../Connect/Connect.js'
+
+export type SequenceConnectProviderProps = {
+  children: ReactNode
+  config: ConnectConfig
+}
+
+/**
+ * @internal
+ * Preview version of SequenceConnectProvider component.
+ * This component should only be used for testing purposes.
+ * It provides the same functionality as SequenceConnectProvider but only for preview purposes.
+ */
+export const SequenceConnectPreviewProvider = (props: SequenceConnectProviderProps) => {
+  const { config, children } = props
+
+  const {
+    defaultTheme = 'dark',
+    position = 'center',
+    displayedAssets: displayedAssetsSetting = [],
+    readOnlyNetworks,
+    hideExternalConnectOptions = false,
+    hideConnectedWallets = false,
+    hideSocialConnectOptions = false
+  } = config
+
+  const [theme, setTheme] = useState<Exclude<Theme, undefined>>(defaultTheme || 'dark')
+  const [modalPosition, setModalPosition] = useState<ModalPosition>(position)
+  const [displayedAssets, setDisplayedAssets] = useState<DisplayedAsset[]>(displayedAssetsSetting)
+
+  const wagmiConfig = useConfig()
+
+  const googleWaasConnector = wagmiConfig.connectors.find(
+    c => c.id === 'sequence-waas' && (c as ExtendedConnector)._wallet.id === 'google-waas'
+  ) as ExtendedConnector | undefined
+  const googleClientId: string = (googleWaasConnector as any)?.params?.googleClientId || ''
+
+  const { emailConflictInfo } = useEmailConflict()
+
+  return (
+    <ConnectConfigContextProvider value={config}>
+      <ThemeContextProvider
+        value={{
+          theme,
+          setTheme,
+          position: modalPosition,
+          setPosition: setModalPosition
+        }}
+      >
+        <AnalyticsContextProvider value={{ setAnalytics: () => {}, analytics: undefined }}>
+          <GoogleOAuthProvider clientId={googleClientId}>
+            <WalletConfigContextProvider
+              value={{
+                setDisplayedAssets,
+                displayedAssets,
+                readOnlyNetworks,
+                hideExternalConnectOptions,
+                hideConnectedWallets,
+                hideSocialConnectOptions
+              }}
+            >
+              <div id="kit-provider">
+                <ThemeProvider root="#kit-provider" scope="kit" theme={theme}>
+                  <Connect onClose={() => {}} emailConflictInfo={emailConflictInfo} isInline {...props} />
+                </ThemeProvider>
+              </div>
+              {children}
+            </WalletConfigContextProvider>
+          </GoogleOAuthProvider>
+        </AnalyticsContextProvider>
+      </ThemeContextProvider>
+    </ConnectConfigContextProvider>
+  )
+}

packages/connect/src/components/SequenceConnectPreview/index.ts

@@ -0,0 +1,2 @@
+export * from './SequenceConnectPreviewProvider.js'
+export * from './SequenceConnectPreview.js'

packages/connect/src/index.ts

@@ -5,6 +5,10 @@ export { SequenceConnectInline } from './components/SequenceConnectInline/index.
 export { SequenceConnectProvider } from './components/SequenceConnectProvider/index.js'
 export { SequenceConnectInlineProvider } from './components/SequenceConnectInlineProvider/index.js'
 
+// Preview
+export { SequenceConnectPreview } from './components/SequenceConnectPreview/index.js'
+export { SequenceConnectPreviewProvider } from './components/SequenceConnectPreview/index.js'
+
 // Types
 export type {
   ConnectConfig,