From 587756267de348f82552fe019a380872a6f30907 Mon Sep 17 00:00:00 2001
From: Corban Riley <corbanbrook@gmail.com>
Date: Thu, 16 May 2024 12:28:23 -0400
Subject: [PATCH] Refactored GoogleWaasConnectButton and AppleWaasConnectButton

---
 .../ConnectWalletContent/GoogleLogo.tsx       |  13 --
 .../ConnectWalletContent/index.tsx            | 203 +++++++++---------
 2 files changed, 106 insertions(+), 110 deletions(-)
 delete mode 100644 packages/kit/src/components/KitProvider/ConnectWalletContent/GoogleLogo.tsx

diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/GoogleLogo.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/GoogleLogo.tsx
deleted file mode 100644
index 2089f867..00000000
--- a/packages/kit/src/components/KitProvider/ConnectWalletContent/GoogleLogo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-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
index 7a7623e3..95bbd941 100644
--- a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx
+++ b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx
@@ -29,7 +29,6 @@ import { KitConnectProviderProps } from '../index'
 
 import { Banner } from './Banner'
 import { ExtendedWalletList } from './ExtendedWalletList'
-import { GoogleLogo } from './GoogleLogo'
 
 interface ConnectWalletContentProps extends KitConnectProviderProps {
   openConnectModal: boolean
@@ -40,11 +39,6 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
   useScript(appleAuthHelpers.APPLE_SCRIPT_SRC)
 
   const storage = useStorage()
-  const { data: sessionHash, isPending: isPendingNonce } = useStorageItem(LocalStorageKey.WaasSessionHash)
-  const { data: appleClientId, isPending: isPendingAppleClientId } = useStorageItem(LocalStorageKey.WaasAppleClientID)
-  const { data: appleRedirectUri, isPending: isPendingAppleRedirectUri } = useStorageItem(LocalStorageKey.WaasAppleRedirectURI)
-  const isPendingStorage = isPendingNonce || isPendingAppleClientId || isPendingAppleRedirectUri
-
   const { isConnected } = useAccount()
   const { config = {} } = props
   const { signIn = {} } = config as KitConfig
@@ -60,13 +54,6 @@ 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
@@ -259,7 +246,7 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
           </form>
         )}
 
-        {socialAuthConnectors.length > 0 && !isPendingStorage && (
+        {socialAuthConnectors.length > 0 && (
           <>
             {emailConnector && showEmailInput && (
               <>
@@ -276,91 +263,11 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
                 return (
                   <Box key={connector.uid} aspectRatio="1/1" alignItems="center" justifyContent="center">
                     {connector._wallet.id === 'google-waas' && (
-                      <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={sessionHash}
-                              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>
+                      <GoogleWaasConnectButton connector={connector} onConnect={onConnect} />
                     )}
 
-                    {connector._wallet.id === 'apple-waas' && appleClientId && appleRedirectUri && (
-                      <ConnectButton
-                        connector={connector}
-                        onConnect={() => {
-                          appleAuthHelpers.signIn({
-                            authOptions: {
-                              clientId: appleClientId,
-                              redirectURI: appleRedirectUri,
-                              nonce: sessionHash,
-                              scope: 'openid email',
-                              usePopup: true
-                            },
-                            onSuccess: (response: any) => {
-                              if (response.authorization?.id_token) {
-                                storage?.setItem(LocalStorageKey.WaasAppleIdToken, response.authorization.id_token)
-                                onConnect(connector)
-                              } else {
-                                console.log('Apple login error: No id_token found')
-                              }
-                            },
-                            onError: (error: any) => console.error(error)
-                          })
-                        }}
-                      />
+                    {connector._wallet.id === 'apple-waas' && (
+                      <AppleWaasConnectButton connector={connector} onConnect={onConnect} />
                     )}
 
                     {!connector._wallet.id.includes('waas') && <ConnectButton connector={connector} onConnect={onConnect} />}
@@ -440,3 +347,105 @@ const ConnectButton = (props: ConnectButtonProps) => {
     </Tooltip>
   )
 }
+
+const GoogleWaasConnectButton = (props: ConnectButtonProps) => {
+  const { connector, onConnect } = props
+  const storage = useStorage()
+  const { data: sessionHash, isPending: isPendingNonce } = useStorageItem(LocalStorageKey.WaasSessionHash)
+  const [enableGoogleTooltip, setEnableGoogleTooltip] = useState(false)
+  const { theme } = useTheme()
+  const walletProps = connector._wallet
+
+  const Logo =
+    theme === 'dark'
+      ? walletProps.monochromeLogoDark || walletProps.logoDark
+      : walletProps.monochromeLogoLight || walletProps.logoLight
+
+  useEffect(() => {
+    setTimeout(() => {
+      setEnableGoogleTooltip(true)
+    }, 300)
+  })
+
+  return !isPendingNonce ? (
+    <Tooltip message="Google" disabled={!enableGoogleTooltip}>
+      <Card clickable background="transparent" borderRadius="xs" padding="0" width="10" height="10" position="relative">
+        <Box
+          width="10"
+          height="10"
+          overflow="hidden"
+          borderRadius="sm"
+          alignItems="center"
+          justifyContent="center"
+          style={{ opacity: 0.0000001 }}
+        >
+          <GoogleLogin
+            type="icon"
+            size="large"
+            width={40}
+            nonce={sessionHash}
+            onSuccess={credentialResponse => {
+              if (credentialResponse.credential) {
+                console.log(credentialResponse)
+                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"
+          width="10"
+          height="10"
+          top="0"
+          right="0"
+        >
+          <Box as={Logo} width="6" height="6" />
+        </Box>
+      </Card>
+    </Tooltip>
+  ) : null
+}
+
+export const AppleWaasConnectButton = (props: ConnectButtonProps) => {
+  const { connector, onConnect } = props
+  const storage = useStorage()
+  const { data: sessionHash, isPending: isPendingNonce } = useStorageItem(LocalStorageKey.WaasSessionHash)
+  const { data: appleClientId } = useStorageItem(LocalStorageKey.WaasAppleClientID)
+  const { data: appleRedirectUri } = useStorageItem(LocalStorageKey.WaasAppleRedirectURI)
+
+  return !isPendingNonce && appleClientId && appleRedirectUri ? (
+    <ConnectButton
+      connector={connector}
+      onConnect={() => {
+        appleAuthHelpers.signIn({
+          authOptions: {
+            clientId: appleClientId,
+            redirectURI: appleRedirectUri,
+            nonce: sessionHash,
+            scope: 'openid email',
+            usePopup: true
+          },
+          onSuccess: (response: any) => {
+            if (response.authorization?.id_token) {
+              storage?.setItem(LocalStorageKey.WaasAppleIdToken, response.authorization.id_token)
+              onConnect(connector)
+            } else {
+              console.log('Apple login error: No id_token found')
+            }
+          },
+          onError: (error: any) => console.error(error)
+        })
+      }}
+    />
+  ) : null
+}