chore(git): merge pull request #198 from 196-ext-login-infinite-loading into staging

Reviewed-on: #198
Reviewed-by: eugene <eugene@nostrdev.com>

src/components/LoadingSpinner/index.tsx

@@ -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) => {
+export const LoadingSpinner = (props: PropsWithChildren<Props>) => {
-  const { desc, variant = 'default' } = 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>
+        </div>,
+        document.getElementById('root')!
       )
   }
 }

src/components/LoadingSpinner/style.module.scss

@@ -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 {

src/pages/create/index.tsx

@@ -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>
               )}

src/pages/nostr/index.tsx

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

src/types/errors/TimeoutError.ts

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

src/utils/utils.ts

@@ -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
   })
 }