fix(login): extension login infinite loading
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 34s

Fixes #196
This commit is contained in:
enes 2024-09-11 16:44:45 +02:00
parent 9c545a477c
commit 7c80643aba

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 () => {
setIsLoading(true)
setLoadingSpinnerDesc('Capturing pubkey from nostr extension')
try {
// Wait EXTENSION_LOGIN_DELAY_SECONDS before showing extension delay message
const waitTimeout = window.setTimeout(() => {
setIsExtensionSlow(true)
}, 2000)
nostrController
.capturePublicKey()
.then(async (pubkey) => {
dispatch(updateLoginMethod(LoginMethods.extension))
setIsLoading(true)
setLoadingSpinnerDesc('Capturing pubkey from nostr extension')
setLoadingSpinnerDesc('Authenticating and finding metadata')
const redirectPath =
await authController.authAndGetMetadataAndRelaysMap(pubkey)
const pubkey = await nostrController.capturePublicKey()
dispatch(updateLoginMethod(LoginMethods.extension))
if (redirectPath) navigateAfterLogin(redirectPath)
})
.catch((err) => {
toast.error('Error capturing public key from nostr extension: ' + err)
})
.finally(() => {
setIsLoading(false)
setLoadingSpinnerDesc('')
})
setLoadingSpinnerDesc('Authenticating and finding metadata')
const redirectPath = await Promise.race([
authController.authAndGetMetadataAndRelaysMap(pubkey),
timeout(EXTENSION_LOGIN_TIMEOUT_SECONDS * 1000)
])
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 && (
<>