Merge pull request #41 from 0xsequence/10052024-google-button

google button
0xsequence · May 10, 2024 · 22184c9 · 22184c9
2 parents 2674fc5 + 8ab6696
commit 22184c9
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 16 deletions.
diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/GoogleLogo.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/GoogleLogo.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export const GoogleLogo = () => (
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+    <g>
+      <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
+      <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
+      <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
+      <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
+      <path fill="none" d="M0 0h48v48H0z"></path>
+    </g>
+  </svg>
+)
diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx
@@ -23,6 +23,7 @@ import { appleAuthHelpers, useScript } from 'react-apple-signin-auth'
 
 import { ExtendedWalletList } from './ExtendedWalletList'
 import { Banner } from './Banner'
+import { GoogleLogo } from './GoogleLogo'
 
 import { KitConfig } from '../../index'
 import { LocalStorageKey, defaultSignInOptions } from '../../../constants'
@@ -58,6 +59,11 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
   const [showEmailWaasPinInput, setShowEmailWaasPinInput] = useState(false)
   const [waasEmailPinCode, setWaasEmailPinCode] = useState<string[]>([])
   const { connectors: baseConnectors, connect } = useConnect()
+  const [enableGoogleTooltip, setEnableGoogleTooltip] = useState(false)
+
+  useEffect(() => {
+    setTimeout(() => { setEnableGoogleTooltip(true) },300)
+  })
 
   // EIP-6963 connectors will not have the _wallet property
   const injectedConnectors: ExtendedConnector[] = baseConnectors
@@ -267,22 +273,65 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
                 return (
                   <Box key={connector.uid} aspectRatio="1/1" alignItems="center" justifyContent="center">
                     {connector._wallet.id === 'google-waas' && (
-                      <Box width="10" height="10" overflow="hidden" borderRadius="sm" alignItems="center" justifyContent="center">
-                        <GoogleLogin
-                          type="icon"
-                          size="large"
-                          nonce={getStorageItem(LocalStorageKey.WaasSessionHash)}
-                          onSuccess={credentialResponse => {
-                            if (credentialResponse.credential) {
-                              storage?.setItem(LocalStorageKey.WaasGoogleIdToken, credentialResponse.credential)
-                              onConnect(connector)
-                            }
-                          }}
-                          onError={() => {
-                            console.log('Login Failed')
-                          }}
-                        />
-                      </Box>
+                      <Tooltip message="Google" disabled={!enableGoogleTooltip}>
+                        <Box position="relative" opacity={{ hover: '80' }}>
+                          <Box
+                            width="10"
+                            height="10"
+                            overflow="hidden"
+                            borderRadius="sm"
+                            alignItems="center"
+                            justifyContent="center"
+                            style={{ opacity: 0.0000001 }}
+                          >
+                            <GoogleLogin
+                              type="icon"
+                              size="large"
+                              nonce={getStorageItem(LocalStorageKey.WaasSessionHash)}
+                              onSuccess={credentialResponse => {
+                                if (credentialResponse.credential) {
+                                  storage?.setItem(LocalStorageKey.WaasGoogleIdToken, credentialResponse.credential)
+                                  onConnect(connector)
+                                }
+                              }}
+                              onError={() => {
+                                console.log('Login Failed')
+                              }}
+                            />
+                          </Box>
+                          <Box
+                            background="backgroundSecondary"
+                            borderRadius="xs"
+                            display="flex"
+                            justifyContent="center"
+                            alignItems="center"
+                            position="absolute"
+                            pointerEvents="none"
+                            style={{
+                              width: '40px',
+                              height: '40px',
+                              paddingTop: '2px',
+                              paddingBottom: '2px',
+                              paddingLeft: '12px',
+                              paddingRight: '12px',
+                              top: '50%',
+                              left: '50%',
+                              transform: 'translate(-50%, -50%)',
+                            }}
+                          >
+                            <Box
+                              position="relative"
+                              style={{
+                                width: '18px',
+                                top: '2px',
+                                left: '2px'
+                              }}
+                            >
+                              <GoogleLogo />
+                            </Box>
+                          </Box>
+                        </Box>
+                      </Tooltip>
                     )}
 
                     {connector._wallet.id === 'apple-waas' && (