Extension login infinite loading #198

Merged
enes merged 13 commits from 196-ext-login-infinite-loading into staging 2024-09-16 12:27:44 +00:00
Showing only changes of commit 7c80643aba - Show all commits

View File

@ -18,12 +18,16 @@ import {
} from '../../store/actions'
import { LoginMethods } from '../../store/auth/types'
import { Dispatch } from '../../store/store'
import { npubToHex, queryNip05 } from '../../utils'
import { npubToHex, queryNip05, timeout } from '../../utils'
import { hexToBytes } from '@noble/hashes/utils'
import { NIP05_REGEX } from '../../constants'
import styles from './styles.module.scss'
import { TimeoutError } from '../../types/errors/TimeoutError'
const EXTENSION_LOGIN_DELAY_SECONDS = 2
const EXTENSION_LOGIN_TIMEOUT_SECONDS = EXTENSION_LOGIN_DELAY_SECONDS + 10
export const Nostr = () => {
const [searchParams] = useSearchParams()
@ -36,6 +40,7 @@ export const Nostr = () => {
const [isLoading, setIsLoading] = useState(false)
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
const [isExtensionSlow, setIsExtensionSlow] = useState(false)
const [inputValue, setInputValue] = useState('')
const [authUrl, setAuthUrl] = useState<string>()
@ -72,27 +77,39 @@ export const Nostr = () => {
}
const loginWithExtension = async () => {
try {
// Wait EXTENSION_LOGIN_DELAY_SECONDS before showing extension delay message
const waitTimeout = window.setTimeout(() => {
setIsExtensionSlow(true)
}, 2000)
setIsLoading(true)
setLoadingSpinnerDesc('Capturing pubkey from nostr extension')
nostrController
.capturePublicKey()
.then(async (pubkey) => {
const pubkey = await nostrController.capturePublicKey()
dispatch(updateLoginMethod(LoginMethods.extension))
setLoadingSpinnerDesc('Authenticating and finding metadata')
const redirectPath =
await authController.authAndGetMetadataAndRelaysMap(pubkey)
const redirectPath = await Promise.race([
authController.authAndGetMetadataAndRelaysMap(pubkey),
timeout(EXTENSION_LOGIN_TIMEOUT_SECONDS * 1000)
])
if (redirectPath) navigateAfterLogin(redirectPath)
})
.catch((err) => {
toast.error('Error capturing public key from nostr extension: ' + err)
})
.finally(() => {
if (redirectPath) {
window.clearTimeout(waitTimeout)
navigateAfterLogin(redirectPath)
}
} catch (error) {
if (error instanceof TimeoutError) {
toast.error("Extension didn't respond in time")
} else {
toast.error('Error capturing public key from nostr extension: ' + error)
}
} finally {
setIsLoading(false)
setLoadingSpinnerDesc('')
})
setIsExtensionSlow(false)
}
}
/**
@ -354,7 +371,25 @@ export const Nostr = () => {
return (
<>
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
{isLoading && (
<LoadingSpinner desc={loadingSpinnerDesc}>
{isExtensionSlow && (
<>
<p>Extension is not responding</p>
<Button
fullWidth
variant="contained"
onClick={() => {
setLoadingSpinnerDesc('')
setIsLoading(false)
}}
>
Close
</Button>
</>
)}
</LoadingSpinner>
)}
{isNostrExtensionAvailable && (
<>