From 4bc5882ab60cd4b31f532d506433d24c67548082 Mon Sep 17 00:00:00 2001 From: enes Date: Wed, 11 Sep 2024 13:27:50 +0200 Subject: [PATCH 01/11] fix(loading): make sure the default spinner is absolute relative to root always --- src/components/LoadingSpinner/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/LoadingSpinner/index.tsx b/src/components/LoadingSpinner/index.tsx index 2c6f4e5..648eb9a 100644 --- a/src/components/LoadingSpinner/index.tsx +++ b/src/components/LoadingSpinner/index.tsx @@ -1,3 +1,4 @@ +import { createPortal } from 'react-dom' import styles from './style.module.scss' interface Props { @@ -20,7 +21,7 @@ export const LoadingSpinner = (props: Props) => { ) default: - return ( + return createPortal(
{
{desc &&

{desc}

}
-
+ , + document.getElementById('root')! ) } } -- 2.34.1 From 4d1e6722681849c72d8ad5cfaebc543ab61dd907 Mon Sep 17 00:00:00 2001 From: enes Date: Wed, 11 Sep 2024 16:33:13 +0200 Subject: [PATCH 02/11] feat(loading-spinner): add children support for default variant --- src/components/LoadingSpinner/index.tsx | 12 +++++++++--- src/components/LoadingSpinner/style.module.scss | 6 +++++- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/LoadingSpinner/index.tsx b/src/components/LoadingSpinner/index.tsx index 648eb9a..d19d01f 100644 --- a/src/components/LoadingSpinner/index.tsx +++ b/src/components/LoadingSpinner/index.tsx @@ -1,13 +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) => { + const { desc, children, variant = 'default' } = props switch (variant) { case 'small': @@ -28,7 +29,12 @@ export const LoadingSpinner = (props: Props) => { data-variant={variant} >
- {desc &&

{desc}

} + {desc && ( +
+ {desc} + {children} +
+ )} , document.getElementById('root')! diff --git a/src/components/LoadingSpinner/style.module.scss b/src/components/LoadingSpinner/style.module.scss index e1a5978..d51b743 100644 --- a/src/components/LoadingSpinner/style.module.scss +++ b/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 { -- 2.34.1 From 9c545a477cf5e6e9ecf8f171af3857fd64b5a78d Mon Sep 17 00:00:00 2001 From: enes Date: Wed, 11 Sep 2024 16:33:53 +0200 Subject: [PATCH 03/11] fix(errors): add custom timeout error --- src/types/errors/TimeoutError.ts | 6 ++++++ src/utils/utils.ts | 3 ++- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 src/types/errors/TimeoutError.ts diff --git a/src/types/errors/TimeoutError.ts b/src/types/errors/TimeoutError.ts new file mode 100644 index 0000000..5bd31c5 --- /dev/null +++ b/src/types/errors/TimeoutError.ts @@ -0,0 +1,6 @@ +export class TimeoutError extends Error { + constructor() { + super('Timeout') + this.name = this.constructor.name + } +} diff --git a/src/utils/utils.ts b/src/utils/utils.ts index f32e14e..ee21230 100644 --- a/src/utils/utils.ts +++ b/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' @@ -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 }) } -- 2.34.1 From 7c80643aba266fc0279c593f1951931f3fbb9ce2 Mon Sep 17 00:00:00 2001 From: enes Date: Wed, 11 Sep 2024 16:44:45 +0200 Subject: [PATCH 04/11] fix(login): extension login infinite loading Fixes #196 --- src/pages/nostr/index.tsx | 75 ++++++++++++++++++++++++++++----------- 1 file changed, 55 insertions(+), 20 deletions(-) diff --git a/src/pages/nostr/index.tsx b/src/pages/nostr/index.tsx index bd99485..8726c6e 100644 --- a/src/pages/nostr/index.tsx +++ b/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 = 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() @@ -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 && } + {isLoading && ( + + {isExtensionSlow && ( + <> +

Extension is not responding

+ + + )} + + )} {isNostrExtensionAvailable && ( <> -- 2.34.1 From 9191336722c234eb1945e06230099051c7fc9df3 Mon Sep 17 00:00:00 2001 From: enes Date: Thu, 12 Sep 2024 12:17:58 +0200 Subject: [PATCH 05/11] refactor(login): update the delay message and increase timers --- src/pages/nostr/index.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/pages/nostr/index.tsx b/src/pages/nostr/index.tsx index 8726c6e..557d9e3 100644 --- a/src/pages/nostr/index.tsx +++ b/src/pages/nostr/index.tsx @@ -25,8 +25,8 @@ 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 +const EXTENSION_LOGIN_DELAY_SECONDS = 5 +const EXTENSION_LOGIN_TIMEOUT_SECONDS = EXTENSION_LOGIN_DELAY_SECONDS + 55 export const Nostr = () => { const [searchParams] = useSearchParams() @@ -375,7 +375,14 @@ export const Nostr = () => { {isExtensionSlow && ( <> -

Extension is not responding

+

+ Your nostr extension is not responding. Check these + alternatives:{' '} + + https://github.com/aljazceru/awesome-nostr + +

+
-
{toolbox.map((drawTool: DrawTool, index: number) => { @@ -987,6 +984,10 @@ export const CreatePage = () => { })}
+ + {!!error && ( {error} )} -- 2.34.1 From ea7e3a096450940689a5fd24dacad27d4b006f91 Mon Sep 17 00:00:00 2001 From: enes Date: Fri, 13 Sep 2024 11:06:06 +0200 Subject: [PATCH 08/11] refactor: update url for online status --- src/utils/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/utils.ts b/src/utils/utils.ts index ee21230..ece0770 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -35,7 +35,7 @@ export const isOnline = async () => { try { // Define a URL to check the online status - const url = 'https://www.google.com' + const url = 'https://www.sigit.io' // 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 -- 2.34.1 From ba24e7417d99ba678b0eed4dd5e6c354e4a95921 Mon Sep 17 00:00:00 2001 From: enes Date: Fri, 13 Sep 2024 11:14:10 +0200 Subject: [PATCH 09/11] refactor: log timeout error only, no toast --- src/pages/nostr/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/nostr/index.tsx b/src/pages/nostr/index.tsx index 0467c9b..7933ba0 100644 --- a/src/pages/nostr/index.tsx +++ b/src/pages/nostr/index.tsx @@ -101,7 +101,8 @@ export const Nostr = () => { } } catch (error) { if (error instanceof TimeoutError) { - toast.error("Extension didn't respond in time") + // 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) } -- 2.34.1 From 79ef9eb8d6ced4cbb0517def4b7864176c78b1f4 Mon Sep 17 00:00:00 2001 From: enes Date: Fri, 13 Sep 2024 17:47:55 +0200 Subject: [PATCH 10/11] fix: url --- src/utils/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/utils.ts b/src/utils/utils.ts index ece0770..7691fc7 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -35,7 +35,7 @@ export const isOnline = async () => { try { // Define a URL to check the online status - const url = 'https://www.sigit.io' + const url = 'https://sigit.io' // 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 -- 2.34.1 From 8b4f1a8973abe0a395cacf9617aab80bb606bf61 Mon Sep 17 00:00:00 2001 From: enes Date: Mon, 16 Sep 2024 11:00:16 +0200 Subject: [PATCH 11/11] fix(online-detection): use relative url --- src/utils/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 7691fc7..11053b9 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -35,7 +35,7 @@ export const isOnline = async () => { try { // Define a URL to check the online status - const url = 'https://sigit.io' + 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 -- 2.34.1