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 = () => ( - - - - - - - - - -) 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([]) 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) => { )} - {socialAuthConnectors.length > 0 && !isPendingStorage && ( + {socialAuthConnectors.length > 0 && ( <> {emailConnector && showEmailInput && ( <> @@ -276,91 +263,11 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => { return ( {connector._wallet.id === 'google-waas' && ( - - - - { - if (credentialResponse.credential) { - storage?.setItem(LocalStorageKey.WaasGoogleIdToken, credentialResponse.credential) - onConnect(connector) - } - }} - onError={() => { - console.log('Login Failed') - }} - /> - - - - - - - - + )} - {connector._wallet.id === 'apple-waas' && appleClientId && appleRedirectUri && ( - { - 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' && ( + )} {!connector._wallet.id.includes('waas') && } @@ -440,3 +347,105 @@ const ConnectButton = (props: ConnectButtonProps) => { ) } + +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 ? ( + + + + { + if (credentialResponse.credential) { + console.log(credentialResponse) + storage?.setItem(LocalStorageKey.WaasGoogleIdToken, credentialResponse.credential) + onConnect(connector) + } + }} + onError={() => { + console.log('Login Failed') + }} + /> + + + + + + + ) : 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 ? ( + { + 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 +}