chore(git): merge pull request #198 from 196-ext-login-infinite-loading into staging
All checks were successful
Release to Staging / build_and_release (push) Successful in 1m18s

Reviewed-on: #198
Reviewed-by: eugene <eugene@nostrdev.com>
This commit is contained in:
enes 2024-09-16 12:27:43 +00:00
commit 84c374bb2c
6 changed files with 98 additions and 31 deletions

View File

@ -1,12 +1,14 @@
import { createPortal } from 'react-dom'
import styles from './style.module.scss'
import { PropsWithChildren } from 'react'
interface Props {
desc?: string
variant?: 'small' | 'default'
}
export const LoadingSpinner = (props: Props) => {
const { desc, variant = 'default' } = props
export const LoadingSpinner = (props: PropsWithChildren<Props>) => {
const { desc, children, variant = 'default' } = props
switch (variant) {
case 'small':
@ -20,16 +22,22 @@ export const LoadingSpinner = (props: Props) => {
)
default:
return (
return createPortal(
<div className={styles.loadingSpinnerOverlay}>
<div
className={styles.loadingSpinnerContainer}
data-variant={variant}
>
<div className={styles.loadingSpinner}></div>
{desc && <p className={styles.loadingSpinnerDesc}>{desc}</p>}
{desc && (
<div className={styles.loadingSpinnerDesc}>
{desc}
{children}
</div>
)}
</div>
</div>,
document.getElementById('root')!
)
}
}

View File

@ -42,11 +42,15 @@
width: 100%;
padding: 15px;
border-top: solid 1px rgba(0, 0, 0, 0.1);
text-align: center;
color: rgba(0, 0, 0, 0.5);
font-size: 16px;
font-weight: 400;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
@keyframes spin {

View File

@ -957,9 +957,6 @@ export const CreatePage = () => {
<FontAwesomeIcon icon={faPlus} />
</Button>
</div>
<Button onClick={handleCreate} variant="contained">
Publish
</Button>
<div className={`${styles.paperGroup} ${styles.toolbox}`}>
{toolbox.map((drawTool: DrawTool, index: number) => {
@ -986,6 +983,10 @@ export const CreatePage = () => {
})}
</div>
<Button onClick={handleCreate} variant="contained">
Publish
</Button>
{!!error && (
<FormHelperText error={!!error}>{error}</FormHelperText>
)}

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 = 5
const EXTENSION_LOGIN_TIMEOUT_SECONDS = EXTENSION_LOGIN_DELAY_SECONDS + 55
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,43 @@ export const Nostr = () => {
}
const loginWithExtension = async () => {
let waitTimeout: number | undefined
try {
// Wait EXTENSION_LOGIN_DELAY_SECONDS before showing extension delay message
waitTimeout = window.setTimeout(() => {
setIsExtensionSlow(true)
}, EXTENSION_LOGIN_DELAY_SECONDS * 1000)
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 (error) {
if (error instanceof TimeoutError) {
// Just log the error, no toast, user has already been notified with the loading screen
console.error("Extension didn't respond in time")
} else {
toast.error('Error capturing public key from nostr extension: ' + error)
}
} finally {
// Clear the wait timeout so we don't change the state unnecessarily
window.clearTimeout(waitTimeout)
if (redirectPath) navigateAfterLogin(redirectPath)
})
.catch((err) => {
toast.error('Error capturing public key from nostr extension: ' + err)
})
.finally(() => {
setIsLoading(false)
setLoadingSpinnerDesc('')
})
setIsExtensionSlow(false)
}
}
/**
@ -354,7 +375,33 @@ export const Nostr = () => {
return (
<>
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
{isLoading && (
<LoadingSpinner desc={loadingSpinnerDesc}>
{isExtensionSlow && (
<>
<p>
Your nostr extension is not responding. Check these
alternatives:{' '}
<a href="https://github.com/aljazceru/awesome-nostr?tab=readme-ov-file#nip-07-browser-extensions">
https://github.com/aljazceru/awesome-nostr
</a>
</p>
<br />
<Button
fullWidth
variant="contained"
onClick={() => {
setLoadingSpinnerDesc('')
setIsLoading(false)
setIsExtensionSlow(false)
}}
>
Close
</Button>
</>
)}
</LoadingSpinner>
)}
{isNostrExtensionAvailable && (
<>

View File

@ -0,0 +1,6 @@
export class TimeoutError extends Error {
constructor() {
super('Timeout')
this.name = this.constructor.name
}
}

View File

@ -1,3 +1,4 @@
import { TimeoutError } from '../types/errors/TimeoutError.ts'
import { CurrentUserFile } from '../types/file.ts'
import { SigitFile } from './file.ts'
@ -34,7 +35,7 @@ export const isOnline = async () => {
try {
// Define a URL to check the online status
const url = 'https://www.google.com'
const url = document.location.pathname + '?v=' + new Date().getTime()
// Make a HEAD request to the URL with 'no-cors' mode
// This mode is used to handle opaque responses which do not expose their content
@ -63,7 +64,7 @@ export const timeout = (ms: number = 60000) => {
// Set a timeout using setTimeout
setTimeout(() => {
// Reject the promise with an Error indicating a timeout
reject(new Error('Timeout'))
reject(new TimeoutError())
}, ms) // Timeout duration in milliseconds
})
}