fix(connect): make Google WaaS sign-in directly interactive

.changeset/bright-mice-connect.md

@@ -0,0 +1,5 @@
+---
+'@0xsequence/connect': patch
+---
+
+Fix Google WaaS v2 sign-in clicks failing in Chromium by replacing the hidden, transformed iframe with a directly interactive Google button.

.gitignore

@@ -15,6 +15,7 @@ dist/
 .DS_Store
 .vscode
 .idea
+.codex/
 *.iml
 .cache
 package-lock.json

examples/react-waas/src/App.tsx

@@ -3,21 +3,42 @@ import { SequenceConnect } from '@0xsequence/connect'
 import { ThemeProvider } from '@0xsequence/design-system'
 import { SequenceWalletProvider } from '@0xsequence/wallet-widget'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import { useMemo, useState } from 'react'
 
 import { Homepage } from './components/Homepage'
 import { InlineDemo } from './components/InlineDemo'
 import { XAuthCallback } from './components/XAuthCallback'
 import { checkoutConfig, config } from './config'
 
 export const App = () => {
+  const [useFullWidthSocials, setUseFullWidthSocials] = useState(config.connectConfig.signIn?.descriptiveSocials ?? false)
+  const demoConfig = useMemo(
+    () => ({
+      ...config,
+      connectConfig: {
+        ...config.connectConfig,
+        signIn: {
+          ...config.connectConfig.signIn,
+          descriptiveSocials: useFullWidthSocials
+        }
+      }
+    }),
+    [useFullWidthSocials]
+  )
+
   return (
     <ThemeProvider defaultTheme="dark">
-      <SequenceConnect config={config}>
+      <SequenceConnect config={demoConfig}>
         <SequenceWalletProvider>
           <SequenceCheckoutProvider config={checkoutConfig}>
             <BrowserRouter>
               <Routes>
-                <Route path="/" element={<Homepage />} />
+                <Route
+                  path="/"
+                  element={
+                    <Homepage useFullWidthSocials={useFullWidthSocials} onUseFullWidthSocialsChange={setUseFullWidthSocials} />
+                  }
+                />
                 <Route path="/inline" element={<InlineDemo />} />
                 <Route path="/auth-callback-X" element={<XAuthCallback />} />
               </Routes>

examples/react-waas/src/components/Homepage.tsx

@@ -1,11 +1,16 @@
 import { useOpenConnectModal, useWallets } from '@0xsequence/connect'
-import { Button, Image, useTheme } from '@0xsequence/design-system'
+import { Button, Image, Switch, Text, useTheme } from '@0xsequence/design-system'
 import { Footer } from 'example-shared-components'
 import { Link } from 'react-router-dom'
 
 import { Connected } from './Connected'
 
-export const Homepage = () => {
+interface HomepageProps {
+  useFullWidthSocials: boolean
+  onUseFullWidthSocialsChange: (useFullWidthSocials: boolean) => void
+}
+
+export const Homepage = ({ useFullWidthSocials, onUseFullWidthSocialsChange }: HomepageProps) => {
   const { wallets } = useWallets()
   const { setOpenConnectModal } = useOpenConnectModal()
   const { theme } = useTheme()
@@ -33,6 +38,22 @@ export const Homepage = () => {
               <Button variant="primary">Inline Demo</Button>
             </Link>
           </div>
+
+          <label className="flex items-center gap-3">
+            <Text variant="small" color={useFullWidthSocials ? 'muted' : 'primary'}>
+              Compact
+            </Text>
+            <Switch
+              name="social-button-layout"
+              size="sm"
+              checked={useFullWidthSocials}
+              onCheckedChange={onUseFullWidthSocialsChange}
+              aria-label="Use full width social buttons"
+            />
+            <Text variant="small" color={useFullWidthSocials ? 'primary' : 'muted'}>
+              Full width
+            </Text>
+          </label>
         </div>
       ) : (
         <Connected />

packages/connect/src/components/Connect/Connect.tsx

@@ -588,13 +588,19 @@ export const Connect = (props: ConnectProps) => {
 
   const renderConnectorButton = (
     connector: ExtendedConnector,
-    options?: { isDescriptive?: boolean; disableTooltip?: boolean }
+    options?: {
+      isDescriptive?: boolean
+      disableTooltip?: boolean
+      forceIcon?: boolean
+      googleButtonTheme?: 'filled_blue' | 'outline'
+    }
   ) => {
     const commonProps = {
       connector,
       onConnect,
       isDescriptive: options?.isDescriptive,
-      disableTooltip: options?.disableTooltip
+      disableTooltip: options?.disableTooltip,
+      forceIcon: options?.forceIcon
     }
 
     // Special handling for ecosystem connector - use config data for display
@@ -650,9 +656,7 @@ export const Connect = (props: ConnectProps) => {
           <GuestWaasConnectButton {...commonProps} setIsLoading={setIsLoading} setConnectingConnector={setConnectingConnector} />
         )
       case 'google-waas':
-        return (
-          <GoogleWaasConnectButton {...commonProps} setIsLoading={setIsLoading} setConnectingConnector={setConnectingConnector} />
-        )
+        return <GoogleWaasConnectButton {...commonProps} buttonTheme={options?.googleButtonTheme} />
       case 'apple-waas':
         return (
           <AppleWaasConnectButton {...commonProps} setIsLoading={setIsLoading} setConnectingConnector={setConnectingConnector} />
@@ -831,6 +835,7 @@ export const Connect = (props: ConnectProps) => {
 
   const showMoreSocialOptions = socialAuthConnectors.length > MAX_ITEM_PER_ROW
   const showMoreWalletOptions = walletConnectors.length > MAX_ITEM_PER_ROW
+  const googleSocialConnector = socialAuthConnectors.find(connector => connector._wallet?.id === 'google-waas')
   const socialConnectorsPerRow = showMoreSocialOptions && !descriptiveSocials ? MAX_ITEM_PER_ROW - 1 : socialAuthConnectors.length
   const walletConnectorsPerRow = showMoreWalletOptions ? MAX_ITEM_PER_ROW - 1 : walletConnectors.length
 
@@ -1045,7 +1050,7 @@ export const Connect = (props: ConnectProps) => {
                 )}
 
                 {!hasPrimarySequenceConnection && (
-                  <div className="flex mt-4 gap-6 flex-col">
+                  <div className={clsx('flex mt-4 flex-col', !descriptiveSocials && googleSocialConnector ? 'gap-3' : 'gap-6')}>
                     <>
                       {showEcosystemConnectorSection && ecosystemConnector && (
                         <div
@@ -1059,31 +1064,82 @@ export const Connect = (props: ConnectProps) => {
                           </div>
                         </div>
                       )}
-                      {!hideSocialConnectOptions && showSocialConnectorSection && (
-                        <div
-                          className={`flex gap-2 ${descriptiveSocials ? 'flex-col items-start justify-start' : 'flex-row items-center justify-center'}`}
-                        >
-                          {socialAuthConnectors.slice(0, socialConnectorsPerRow).map(connector => {
-                            return (
-                              <div className="w-full" key={connector.uid}>
-                                {renderConnectorButton(connector, {
+                      {!hideSocialConnectOptions &&
+                        showSocialConnectorSection &&
+                        (() => {
+                          const visibleSocialConnectors = socialAuthConnectors.slice(0, socialConnectorsPerRow)
+                          const otherConnectors = visibleSocialConnectors.filter(
+                            connector => connector._wallet?.id !== 'google-waas'
+                          )
+                          const renderConnectorGroup = (connectors: ExtendedConnector[]) => (
+                            <div
+                              className={`flex gap-2 ${descriptiveSocials ? 'flex-col items-start justify-start' : 'flex-row items-center justify-center'}`}
+                            >
+                              {connectors.map(connector => {
+                                const connectorButton = renderConnectorButton(connector, {
                                   isDescriptive: descriptiveSocials,
-                                  disableTooltip: config?.signIn?.disableTooltipForDescriptiveSocials
-                                })}
+                                  disableTooltip: config?.signIn?.disableTooltipForDescriptiveSocials,
+                                  forceIcon: !descriptiveSocials && connector._wallet?.id === 'guest-waas'
+                                })
+
+                                return (
+                                  <div className="w-full" key={connector.uid}>
+                                    {connectorButton}
+                                  </div>
+                                )
+                              })}
+                            </div>
+                          )
+                          if (!googleSocialConnector) {
+                            return (
+                              <div className="flex w-full flex-col gap-2">
+                                {renderConnectorGroup(visibleSocialConnectors)}
+                                {showMoreSocialOptions && <ShowAllWalletsButton onClick={() => setShowExtendedList('social')} />}
                               </div>
                             )
-                          })}
-                          {showMoreSocialOptions && (
-                            <div className="w-full">
-                              <ShowAllWalletsButton onClick={() => setShowExtendedList('social')} />
+                          }
+
+                          if (descriptiveSocials) {
+                            return (
+                              <div className="flex w-full flex-col gap-3">
+                                <Separator className="w-full" />
+                                <div className="rounded-xl border border-border-card bg-background-secondary p-2">
+                                  {renderConnectorButton(googleSocialConnector, {
+                                    isDescriptive: true,
+                                    disableTooltip: true,
+                                    googleButtonTheme: 'filled_blue'
+                                  })}
+                                </div>
+                                <Separator className="w-full" />
+                                {renderConnectorGroup(otherConnectors)}
+                                {showMoreSocialOptions && <ShowAllWalletsButton onClick={() => setShowExtendedList('social')} />}
+                              </div>
+                            )
+                          }
+
+                          return (
+                            <div className="flex w-full flex-col gap-3">
+                              {renderConnectorGroup(otherConnectors)}
+                              {showMoreSocialOptions && <ShowAllWalletsButton onClick={() => setShowExtendedList('social')} />}
+                              <Separator className="w-full" />
+                              {renderConnectorButton(googleSocialConnector, {
+                                isDescriptive: true,
+                                disableTooltip: true,
+                                googleButtonTheme: 'outline'
+                              })}
                             </div>
-                          )}
-                        </div>
-                      )}
+                          )
+                        })()}
                       {!hideSocialConnectOptions && showSocialConnectorSection && showEmailInputSection && (
                         <div className="flex gap-2 flex-row justify-center items-center w-full">
                           <Separator className="flex-1" />
-                          <Text className="leading-4 h-4 text-sm shrink-0" variant="normal" fontWeight="medium" color="muted">
+                          <Text
+                            className="h-4 text-sm shrink-0"
+                            style={{ lineHeight: '16px' }}
+                            variant="normal"
+                            fontWeight="medium"
+                            color="muted"
+                          >
                             or
                           </Text>
                           <Separator className="flex-1" />