Skip to content

Commit

Permalink
Email sign in was moved to a sign in tile rather than immediately sho…
Browse files Browse the repository at this point in the history 
…wing the email input (#96)

* Email sign in was moved to a sign in tile rather than immediately showing the email input

* Show Email Input only if there are no social auth connectors or wallet connectors
  • Loading branch information
@corbanbrook
corbanbrook authored Jul 10, 2024
1 parent eed02ac commit 1cfafeb
Showing 1 changed file with 98 additions and 67 deletions.
165 changes: 98 additions & 67 deletions packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import {
Image,
IconButton,
Tooltip,
PINCodeInput
PINCodeInput,
EmailIcon
} from '@0xsequence/design-system'
import { GoogleLogin } from '@react-oauth/google'
import React, { useState, useEffect } from 'react'
Expand Down Expand Up @@ -42,14 +43,15 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
const { config = {} } = props
const { signIn = {} } = config as KitConfig
const {
showEmailInput = defaultSignInOptions.showEmailInput,
showEmailInput: showEmailConnector = defaultSignInOptions.showEmailInput,
socialAuthOptions = defaultSignInOptions.socialAuthOptions,
walletAuthOptions = defaultSignInOptions.walletAuthOptions
} = signIn

const { openConnectModal, setOpenConnectModal } = props

const [email, setEmail] = useState('')
const [showEmailInput, setShowEmailInput] = useState<boolean>(false)
const [showEmailWaasPinInput, setShowEmailWaasPinInput] = useState(false)
const [waasEmailPinCode, setWaasEmailPinCode] = useState<string[]>([])
const { connectors: baseConnectors, connect } = useConnect()
Expand Down Expand Up @@ -80,7 +82,8 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
return connector._wallet.id === 'mock'
})

const emailConnector = connectors.find(c => c._wallet.id.includes('email'))
const emailConnector = showEmailConnector ? connectors.find(c => c._wallet.id.includes('email')) : undefined

const walletConnectors = [
...connectors
.filter(connector => {
Expand All @@ -104,6 +107,8 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
return socialAuthOptions.indexOf(a._wallet.id) - socialAuthOptions.indexOf(b._wallet.id)
})

const isEmailOnly = emailConnector && socialAuthConnectors.length === 0 && walletConnectors.length === 0

const displayExtendedListButton = walletConnectors.length > 7

const onChangeEmail: React.ChangeEventHandler<HTMLInputElement> = ev => {
Expand Down Expand Up @@ -227,84 +232,85 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
<Banner config={config as KitConfig} />

<Box marginTop="6">
{emailConnector && showEmailInput && (
{emailConnector && (showEmailInput || isEmailOnly) ? (
<form onSubmit={onConnectInlineEmail}>
<TextInput onChange={onChangeEmail} value={email} name="email" placeholder="Enter email" data-1p-ignore />
<Box alignItems="center" justifyContent="center" marginTop="4">
{!emailAuthInProgress && (
<Button
type="submit"
disabled={!isEmailValid(email)}
width="full"
label="Continue"
rightIcon={ChevronRightIcon}
/>
<Box gap="2" width="full">
{!isEmailOnly && <Button label="Back" width="full" onClick={() => setShowEmailInput(false)} />}

<Button
type="submit"
variant="primary"
disabled={!isEmailValid(email)}
width="full"
label="Continue"
rightIcon={ChevronRightIcon}
/>
</Box>
)}
{emailAuthInProgress && <Spinner />}
</Box>
</form>
)}

{socialAuthConnectors.length > 0 && (
) : (
<>
{emailConnector && showEmailInput && (
<>
<Divider color="backgroundSecondary" />
<Box justifyContent="center" alignItems="center">
<Text variant="small" color="text50">
or sign in via
</Text>
</Box>
</>
)}
<Box marginTop="2" gap="2" flexDirection="row" justifyContent="center" alignItems="center" flexWrap="wrap">
{socialAuthConnectors.map(connector => {
return (
<Box key={connector.uid} aspectRatio="1/1" alignItems="center" justifyContent="center">
{connector._wallet.id === 'google-waas' && (
<GoogleWaasConnectButton connector={connector} onConnect={onConnect} />
)}

{connector._wallet.id === 'apple-waas' && (
<AppleWaasConnectButton connector={connector} onConnect={onConnect} />
)}

{!connector._wallet.id.includes('waas') && <ConnectButton connector={connector} onConnect={onConnect} />}
{(emailConnector || socialAuthConnectors.length > 0) && (
<Box marginTop="2" gap="2" flexDirection="row" justifyContent="center" alignItems="center" flexWrap="wrap">
{socialAuthConnectors.map(connector => {
return (
<Box key={connector.uid} aspectRatio="1/1" alignItems="center" justifyContent="center">
{connector._wallet.id === 'google-waas' && (
<GoogleWaasConnectButton connector={connector} onConnect={onConnect} />
)}

{connector._wallet.id === 'apple-waas' && (
<AppleWaasConnectButton connector={connector} onConnect={onConnect} />
)}

{!connector._wallet.id.includes('waas') && <ConnectButton connector={connector} onConnect={onConnect} />}
</Box>
)
})}

{emailConnector && (
<Box aspectRatio="1/1" alignItems="center" justifyContent="center">
<EmailConnectButton onClick={() => setShowEmailInput(true)} />
</Box>
)
})}
</Box>
</>
)}
)}
</Box>
)}

{walletConnectors.length > 0 && (
<>
{((emailConnector && showEmailInput) || socialAuthConnectors.length > 0) && (
{walletConnectors.length > 0 && (
<>
<Divider color="backgroundSecondary" />
<Box justifyContent="center" alignItems="center">
<Text variant="small" color="text50">
or select a wallet
</Text>
{(emailConnector || socialAuthConnectors.length > 0) && (
<>
<Divider color="backgroundSecondary" />
<Box justifyContent="center" alignItems="center">
<Text variant="small" color="text50">
or select a wallet
</Text>
</Box>
</>
)}
<Box marginTop="2" gap="2" flexDirection="row" justifyContent="center" alignItems="center">
{walletConnectors.slice(0, 7).map(connector => (
<ConnectButton key={connector.uid} connector={connector} onConnect={onConnect} />
))}
</Box>
</>
)}
<Box marginTop="2" gap="2" flexDirection="row" justifyContent="center" alignItems="center">
{walletConnectors.slice(0, 7).map(connector => (
<ConnectButton key={connector.uid} connector={connector} onConnect={onConnect} />
))}
</Box>

{displayExtendedListButton && (
<Box marginTop="4" justifyContent="center">
<Button
shape="square"
size="xs"
onClick={() => setShowExtendedList(true)}
label="More options"
rightIcon={ChevronRightIcon}
/>
</Box>
{displayExtendedListButton && (
<Box marginTop="4" justifyContent="center">
<Button
shape="square"
size="xs"
onClick={() => setShowExtendedList(true)}
label="More options"
rightIcon={ChevronRightIcon}
/>
</Box>
)}
</>
)}
</>
)}
Expand Down Expand Up @@ -453,6 +459,31 @@ export const AppleWaasConnectButton = (props: ConnectButtonProps) => {
) : null
}

interface EmailConnectButtonProps {
onClick: () => void
}

export const EmailConnectButton = (props: EmailConnectButtonProps) => {
const { onClick } = props

return (
<Tooltip message={'Email'}>
<Card
clickable
width={BUTTON_SIZE}
height={BUTTON_SIZE}
padding="2"
borderRadius="xs"
justifyContent="center"
alignItems="center"
onClick={onClick}
>
<EmailIcon size="xl" color="text100" />
</Card>
</Tooltip>
)
}

const getLogo = (theme: any, walletProps: WalletProperties) =>
theme === 'dark'
? walletProps.logoDark || walletProps.monochromeLogoDark
Expand Down

0 comments on commit 1cfafeb

Please sign in to comment.