Skip to content

Commit 5559f1c

Browse files
andrewlee348andrewlee348
authored
added loading spinner & simplified Connect.tsx modal (#202)
* added loading spinner & simplified Connect.tsx modal * updated index.ts to match * changed loading title to 'Connecting...' * removed unused import
1 parent 4b5a507 commit 5559f1c

File tree

5 files changed

+141
-153
lines changed

5 files changed

+141
-153
lines changed

‎packages/kit/src/components/Connect/Connect.tsx‎

Lines changed: 136 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import {
88
TextInput,
99
Spinner,
1010
Image,
11-
IconButton
11+
IconButton,
12+
ModalPrimitive
1213
} from '@0xsequence/design-system'
1314
import React, { useState, useEffect } from 'react'
1415
import { appleAuthHelpers, useScript } from 'react-apple-signin-auth'
@@ -31,21 +32,25 @@ import { ExtendedWalletList } from './ExtendedWalletList'
3132
interface ConnectWalletContentProps extends KitConnectProviderProps {
3233
emailConflictInfo?: FormattedEmailConflictInfo | null
3334
onClose: () => void
35+
isPreview?: boolean
3436
}
3537

3638
export const Connect = (props: ConnectWalletContentProps) => {
3739
useScript(appleAuthHelpers.APPLE_SCRIPT_SRC)
3840

39-
const { onClose, emailConflictInfo, config = {} } = props
40-
const { signIn = {} } = config as KitConfig
41+
const { onClose, emailConflictInfo, config = {} as KitConfig, isPreview = false } = props
42+
const { signIn = {} } = config
4143
const { isConnected } = useAccount()
4244
const storage = useStorage()
4345

46+
const [isLoading, setIsLoading] = useState<boolean>(false)
47+
const projectName = config?.signIn?.projectName
48+
4449
const [email, setEmail] = useState('')
4550
const [showEmailInput, setShowEmailInput] = useState<boolean>(false)
4651
const [showEmailWaasPinInput, setShowEmailWaasPinInput] = useState(false)
4752
const [showExtendedList, setShowExtendedList] = useState<boolean>(false)
48-
const { connectors, connect } = useConnect()
53+
const { status, connectors, connect } = useConnect()
4954
const hasInjectedSequenceConnector = connectors.some(c => c.id === 'app.sequence')
5055

5156
const baseWalletConnectors = (connectors as ExtendedConnector[])
@@ -110,6 +115,10 @@ export const Connect = (props: ConnectWalletContentProps) => {
110115
}
111116
}, [isConnected])
112117

118+
useEffect(() => {
119+
setIsLoading(status === 'pending' || status === 'success')
120+
}, [status])
121+
113122
const onConnect = (connector: ExtendedConnector) => {
114123
if (signIn.useMock && mockConnector) {
115124
connect({ connector: mockConnector })
@@ -184,106 +193,134 @@ export const Connect = (props: ConnectWalletContentProps) => {
184193
}
185194
}, [emailConflictInfo])
186195

187-
if (showEmailWaasPinInput) {
188-
return <EmailWaasVerify error={emailAuthError} isLoading={emailAuthLoading} onConfirm={sendChallengeAnswer} />
189-
}
196+
return (
197+
<Box padding="4">
198+
<Box
199+
justifyContent="center"
200+
color="text100"
201+
alignItems="center"
202+
fontWeight="medium"
203+
style={{
204+
marginTop: '4px'
205+
}}
206+
>
207+
<TitleWrapper isPreview={isPreview}>
208+
<Text>{isLoading ? `Connecting...` : `Sign in ${projectName ? `to ${projectName}` : ''}`}</Text>
209+
</TitleWrapper>
210+
</Box>
190211

191-
if (showExtendedList) {
192-
return (
193-
<>
194-
<Box position="absolute" top="4">
195-
<IconButton icon={ChevronLeftIcon} onClick={() => setShowExtendedList(false)} size="xs" />
212+
{isLoading ? (
213+
<Box justifyContent="center" alignItems="center" paddingTop="4">
214+
<Spinner />
196215
</Box>
197-
<ExtendedWalletList connectors={walletConnectors} onConnect={onConnect} />
198-
</>
199-
)
200-
}
201-
202-
return (
203-
<>
204-
<Banner config={config as KitConfig} />
205-
206-
<Box marginTop="6">
207-
{emailConnector && (showEmailInput || isEmailOnly) ? (
208-
<form onSubmit={onConnectInlineEmail}>
209-
<TextInput onChange={onChangeEmail} value={email} name="email" placeholder="Enter email" data-1p-ignore />
210-
<Box alignItems="center" justifyContent="center" marginTop="4">
211-
{!emailAuthInProgress && (
212-
<Box gap="2" width="full">
213-
{!isEmailOnly && <Button label="Back" width="full" onClick={() => setShowEmailInput(false)} />}
214-
215-
<Button
216-
type="submit"
217-
variant="primary"
218-
disabled={!isEmailValid(email)}
219-
width="full"
220-
label="Continue"
221-
rightIcon={ChevronRightIcon}
222-
/>
223-
</Box>
224-
)}
225-
{emailAuthInProgress && <Spinner />}
226-
</Box>
227-
</form>
228-
) : (
229-
<>
230-
{socialAuthConnectors.length > 0 && (
231-
<Box marginTop="2" gap="2" flexDirection="row" justifyContent="center" alignItems="center" flexWrap="wrap">
232-
{socialAuthConnectors.map(connector => {
233-
return (
234-
<Box key={connector.uid} aspectRatio="1/1" alignItems="center" justifyContent="center">
235-
{connector._wallet.id === 'google-waas' ? (
236-
<GoogleWaasConnectButton connector={connector} onConnect={onConnect} />
237-
) : connector._wallet.id === 'apple-waas' ? (
238-
<AppleWaasConnectButton connector={connector} onConnect={onConnect} />
239-
) : connector._wallet.id.includes('email') ? (
240-
<EmailConnectButton onClick={() => setShowEmailInput(true)} />
241-
) : (
242-
<ConnectButton connector={connector} onConnect={onConnect} />
216+
) : (
217+
<>
218+
{showEmailWaasPinInput ? (
219+
<EmailWaasVerify error={emailAuthError} isLoading={emailAuthLoading} onConfirm={sendChallengeAnswer} />
220+
) : showExtendedList ? (
221+
<>
222+
<Box position="absolute" top="4">
223+
<IconButton icon={ChevronLeftIcon} onClick={() => setShowExtendedList(false)} size="xs" />
224+
</Box>
225+
<ExtendedWalletList connectors={walletConnectors} onConnect={onConnect} />
226+
</>
227+
) : (
228+
<>
229+
<Banner config={config as KitConfig} />
230+
231+
<Box marginTop="6">
232+
{emailConnector && (showEmailInput || isEmailOnly) ? (
233+
<form onSubmit={onConnectInlineEmail}>
234+
<TextInput onChange={onChangeEmail} value={email} name="email" placeholder="Enter email" data-1p-ignore />
235+
<Box alignItems="center" justifyContent="center" marginTop="4">
236+
{!emailAuthInProgress && (
237+
<Box gap="2" width="full">
238+
{!isEmailOnly && <Button label="Back" width="full" onClick={() => setShowEmailInput(false)} />}
239+
240+
<Button
241+
type="submit"
242+
variant="primary"
243+
disabled={!isEmailValid(email)}
244+
width="full"
245+
label="Continue"
246+
rightIcon={ChevronRightIcon}
247+
/>
248+
</Box>
243249
)}
250+
{emailAuthInProgress && <Spinner />}
244251
</Box>
245-
)
246-
})}
247-
</Box>
248-
)}
249-
</>
250-
)}
251-
252-
{walletConnectors.length > 0 && !showEmailInput && (
253-
<>
254-
{socialAuthConnectors.length > 0 && (
255-
<>
256-
<Divider color="backgroundSecondary" />
257-
<Box justifyContent="center" alignItems="center">
258-
<Text variant="small" color="text50">
259-
or select a wallet
260-
</Text>
261-
</Box>
262-
</>
263-
)}
264-
265-
<Box marginTop="2" gap="2" flexDirection="row" justifyContent="center" alignItems="center">
266-
{walletConnectors.slice(0, 7).map(connector => {
267-
return <ConnectButton key={connector.uid} connector={connector} onConnect={onConnect} />
268-
})}
269-
</Box>
270-
271-
{displayExtendedListButton && (
272-
<Box marginTop="4" justifyContent="center">
273-
<Button
274-
shape="square"
275-
size="xs"
276-
onClick={() => setShowExtendedList(true)}
277-
label="More options"
278-
rightIcon={ChevronRightIcon}
279-
/>
252+
</form>
253+
) : (
254+
<>
255+
{socialAuthConnectors.length > 0 && (
256+
<Box marginTop="2" gap="2" flexDirection="row" justifyContent="center" alignItems="center" flexWrap="wrap">
257+
{socialAuthConnectors.map(connector => {
258+
return (
259+
<Box key={connector.uid} aspectRatio="1/1" alignItems="center" justifyContent="center">
260+
{connector._wallet.id === 'google-waas' ? (
261+
<GoogleWaasConnectButton connector={connector} onConnect={onConnect} />
262+
) : connector._wallet.id === 'apple-waas' ? (
263+
<AppleWaasConnectButton connector={connector} onConnect={onConnect} />
264+
) : connector._wallet.id.includes('email') ? (
265+
<EmailConnectButton onClick={() => setShowEmailInput(true)} />
266+
) : (
267+
<ConnectButton connector={connector} onConnect={onConnect} />
268+
)}
269+
</Box>
270+
)
271+
})}
272+
</Box>
273+
)}
274+
</>
275+
)}
276+
277+
{walletConnectors.length > 0 && !showEmailInput && (
278+
<>
279+
{socialAuthConnectors.length > 0 && (
280+
<>
281+
<Divider color="backgroundSecondary" />
282+
<Box justifyContent="center" alignItems="center">
283+
<Text variant="small" color="text50">
284+
or select a wallet
285+
</Text>
286+
</Box>
287+
</>
288+
)}
289+
290+
<Box marginTop="2" gap="2" flexDirection="row" justifyContent="center" alignItems="center">
291+
{walletConnectors.slice(0, 7).map(connector => {
292+
return <ConnectButton key={connector.uid} connector={connector} onConnect={onConnect} />
293+
})}
294+
</Box>
295+
296+
{displayExtendedListButton && (
297+
<Box marginTop="4" justifyContent="center">
298+
<Button
299+
shape="square"
300+
size="xs"
301+
onClick={() => setShowExtendedList(true)}
302+
label="More options"
303+
rightIcon={ChevronRightIcon}
304+
/>
305+
</Box>
306+
)}
307+
</>
308+
)}
280309
</Box>
281-
)}
282-
</>
283-
)}
284-
</Box>
285310

286-
<PoweredBySequence />
287-
</>
311+
<PoweredBySequence />
312+
</>
313+
)}
314+
</>
315+
)}
316+
</Box>
288317
)
289318
}
319+
320+
const TitleWrapper = ({ children, isPreview }: { children: React.ReactNode; isPreview: boolean }) => {
321+
if (isPreview) {
322+
return <>{children}</>
323+
}
324+
325+
return <ModalPrimitive.Title asChild>{children}</ModalPrimitive.Title>
326+
}

‎packages/kit/src/components/Connect/ConnectWalletContent.tsx‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎packages/kit/src/components/Connect/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { ConnectWalletContent } from './ConnectWalletContent'
1+
export { Connect } from './Connect'

‎packages/kit/src/components/KitPreviewProvider/KitPreviewProvider.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { WalletConfigContextProvider } from '../../contexts/WalletSettings'
1616
import { useStorage } from '../../hooks/useStorage'
1717
import { useEmailConflict } from '../../hooks/useWaasEmailConflict'
1818
import { ExtendedConnector, DisplayedAsset, EthAuthSettings, KitConfig, Theme, ModalPosition } from '../../types'
19-
import { ConnectWalletContent } from '../Connect'
19+
import { Connect } from '../Connect/Connect'
2020

2121
export type KitConnectProviderProps = {
2222
children: React.ReactNode
@@ -123,7 +123,7 @@ export const KitPreviewProvider = (props: KitConnectProviderProps) => {
123123
<AnalyticsContextProvider value={{ setAnalytics, analytics }}>
124124
<div id="kit-provider">
125125
<ThemeProvider root="#kit-provider" scope="kit" theme={theme}>
126-
<ConnectWalletContent
126+
<Connect
127127
onClose={() => setOpenConnectModal(false)}
128128
emailConflictInfo={emailConflictInfo}
129129
isPreview

‎packages/kit/src/components/KitProvider/KitProvider.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@ import { useWaasConfirmationHandler } from '../../hooks/useWaasConfirmationHandl
2121
import { useEmailConflict } from '../../hooks/useWaasEmailConflict'
2222
import { ExtendedConnector, DisplayedAsset, EthAuthSettings, KitConfig, Theme, ModalPosition } from '../../types'
2323
import { getModalPositionCss } from '../../utils/styling'
24-
import { ConnectWalletContent } from '../Connect'
2524
import { NetworkBadge } from '../NetworkBadge'
2625
import { PageHeading } from '../PageHeading'
2726
import { PoweredBySequence } from '../SequenceLogo'
2827
import { TxnDetails } from '../TxnDetails'
28+
import { Connect } from '../Connect/Connect'
2929

3030
export type KitConnectProviderProps = {
3131
children: React.ReactNode
@@ -157,11 +157,7 @@ export const KitProvider = (props: KitConnectProviderProps) => {
157157
}}
158158
onClose={() => setOpenConnectModal(false)}
159159
>
160-
<ConnectWalletContent
161-
onClose={() => setOpenConnectModal(false)}
162-
emailConflictInfo={emailConflictInfo}
163-
{...props}
164-
/>
160+
<Connect onClose={() => setOpenConnectModal(false)} emailConflictInfo={emailConflictInfo} {...props} />
165161
</Modal>
166162
)}
167163

0 commit comments

Comments
 (0)