From 4aa4f7f175825d3e1ef8cae40abef825e2aacf89 Mon Sep 17 00:00:00 2001 From: artur Date: Thu, 8 Feb 2024 19:51:47 +0300 Subject: [PATCH] Add text to enable notifications, add account created message --- .../ModalConfirmConnect.tsx | 109 +++++++++--------- src/pages/CreatePage/Create.Page.tsx | 64 ++++++---- 2 files changed, 97 insertions(+), 76 deletions(-) diff --git a/src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx b/src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx index 9c955a4..35e063c 100644 --- a/src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx +++ b/src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx @@ -16,11 +16,11 @@ import { useEnqueueSnackbar } from '@/hooks/useEnqueueSnackbar' export const ModalConfirmConnect = () => { const { getModalOpened, createHandleCloseReplace } = useModalSearchParams() const notify = useEnqueueSnackbar() - const navigate = useNavigate() + const navigate = useNavigate() const isModalOpened = getModalOpened(MODAL_PARAMS_KEYS.CONFIRM_CONNECT) const [searchParams] = useSearchParams() - const paramNpub = searchParams.get('npub') || '' + const paramNpub = searchParams.get('npub') || '' const { npub = paramNpub } = useParams<{ npub: string }>() const apps = useAppSelector((state) => selectAppsByNpub(state, npub)) @@ -34,10 +34,10 @@ export const ModalConfirmConnect = () => { const triggerApp = apps.find((app) => app.appNpub === appNpub) const { name, url = '', icon = '' } = triggerApp || {} const appUrl = url || searchParams.get('appUrl') || '' - const appDomain = getDomain(appUrl) + const appDomain = getDomain(appUrl) const appName = name || appDomain || getShortenNpub(appNpub) - const appAvatarTitle = getAppIconTitle(name || appDomain, appNpub) - const appIcon = icon || (appDomain ? `https://${appDomain}/favicon.ico` : '') + const appAvatarTitle = getAppIconTitle(name || appDomain, appNpub) + const appIcon = icon || (appDomain ? `https://${appDomain}/favicon.ico` : '') const handleActionTypeChange = (_: any, value: ACTION_TYPE | null) => { if (!value) return undefined @@ -71,56 +71,52 @@ export const ModalConfirmConnect = () => { } const allow = async () => { - let perms = ['connect','get_public_key']; - if (selectedActionType === ACTION_TYPE.BASIC) perms = [ACTION_TYPE.BASIC] + let perms = ['connect', 'get_public_key'] + if (selectedActionType === ACTION_TYPE.BASIC) perms = [ACTION_TYPE.BASIC] - if (pendingReqId) { - const options = { perms } - await confirmPending(pendingReqId, true, true, options) - } else { - try { - await swicCall('enablePush') - console.log('enablePush done') - } catch (e: any) { - console.log('error', e) - notify('Please enable Notifications in website settings!', 'error') - return; - } + if (pendingReqId) { + const options = { perms } + await confirmPending(pendingReqId, true, true, options) + } else { + try { + await swicCall('enablePush') + console.log('enablePush done') + } catch (e: any) { + console.log('error', e) + notify('Please enable Notifications in website settings!', 'error') + return + } - try { - await swicCall('connectApp', { npub, appNpub, appUrl, perms }) - console.log('connectApp done', npub, appNpub, appUrl, perms) - } catch (e: any) { - notify(e.toString(), 'error') - return; - } + try { + await swicCall('connectApp', { npub, appNpub, appUrl, perms }) + console.log('connectApp done', npub, appNpub, appUrl, perms) + } catch (e: any) { + notify(e.toString(), 'error') + return + } - if (token) { - try { - await swicCall('redeemToken', npub, token) - console.log('redeemToken done') - } catch (e) { - console.log("error", e); - notify('App did not reply. Please try to log in now.', 'error') - navigate(`/key/${npub}`, { replace: true }) - return; - } - } + if (token) { + try { + await swicCall('redeemToken', npub, token) + console.log('redeemToken done') + } catch (e) { + console.log('error', e) + notify('App did not reply. Please try to log in now.', 'error') + navigate(`/key/${npub}`, { replace: true }) + return + } + } - notify('App connected! Closing...', 'success') + notify('App connected! Closing...', 'success') - if (isPopup) - setTimeout(() => window.close(), 3000); - else - navigate(`/key/${npub}`, { replace: true }) - } + if (isPopup) setTimeout(() => window.close(), 3000) + else navigate(`/key/${npub}`, { replace: true }) + } } const disallow = () => { - if (pendingReqId) - confirmPending(pendingReqId, false, true) - else - closeModalAfterRequest() + if (pendingReqId) confirmPending(pendingReqId, false, true) + else closeModalAfterRequest() } if (isPopup) { @@ -132,10 +128,19 @@ export const ModalConfirmConnect = () => { } return ( - + + {!pendingReqId && ( + + You will be asked to enable notifications, this + is needed for a reliable communication with Nostr apps. + + )} { }} src={appIcon} > - {appAvatarTitle} - + {appAvatarTitle} + {appName} diff --git a/src/pages/CreatePage/Create.Page.tsx b/src/pages/CreatePage/Create.Page.tsx index a8af42d..08b7010 100644 --- a/src/pages/CreatePage/Create.Page.tsx +++ b/src/pages/CreatePage/Create.Page.tsx @@ -7,10 +7,12 @@ import { useEnqueueSnackbar } from '@/hooks/useEnqueueSnackbar' import { ModalConfirmConnect } from '@/components/Modal/ModalConfirmConnect/ModalConfirmConnect' import { useModalSearchParams } from '@/hooks/useModalSearchParams' import { MODAL_PARAMS_KEYS } from '@/types/modal' +import { useState } from 'react' const CreatePage = () => { const notify = useEnqueueSnackbar() const { handleOpen } = useModalSearchParams() + const [created, setCreated] = useState(false) const [searchParams] = useSearchParams() @@ -39,6 +41,7 @@ const CreatePage = () => { } console.log('Created', key.npub, 'app', appUrl) + setCreated(true) handleOpen(MODAL_PARAMS_KEYS.CONFIRM_CONNECT, { search: { @@ -49,11 +52,10 @@ const CreatePage = () => { // needed for this screen itself name, // will close after all done - popup: 'true' + popup: 'true', }, - replace: true - }); - + replace: true, + }) } catch (error: any) { notify(error.message || error.toString(), 'error') } @@ -72,28 +74,42 @@ const CreatePage = () => { return ( <> - - Welcome to Nostr! - - - - Chosen name: {nip05} - - Create account + {created && ( + <> + + Account created! + + + User name: {nip05} + + + )} + {!created && ( + <> + + Welcome to Nostr! + + + + Chosen name: {nip05} + + Create account - - What you need to know: - + + What you need to know: + -
    -
  1. Nostr accounts are based on cryptographic keys.
    2. -
  2. All your actions on Nostr will be signed by your keys.
    3. -
  3. Nsec.app is one of many services to manage Nostr keys.
    4. -
  4. When you create an account, a new key will be created.
    5. -
  5. This key can later be used with other Nostr websites.
    6. -
- Learn more - +
    +
  1. Nostr accounts are based on cryptographic keys.
    2. +
  2. All your actions on Nostr will be signed by your keys.
    3. +
  3. Nsec.app is one of many services to manage Nostr keys.
    4. +
  4. When you create an account, a new key will be created.
    5. +
  5. This key can later be used with other Nostr websites.
    6. +
+ Learn more + + + )}