Remove logos from signup modals, move signup hints to the top of modals, fix signup hints

Don't stop signup if enable-push failed

src/App.tsx

@@ -18,7 +18,7 @@ function App() {
 
   const load = useCallback(async () => {
     const keys: DbKey[] = await dbi.listKeys()
-    console.log(keys, 'keys')
+    // console.log(keys, 'keys')
 
     dispatch(setKeys({ keys }))
     const loadProfiles = async () => {
@@ -65,7 +65,7 @@ function App() {
 
   useEffect(() => {
     ndk.connect().then(() => {
-      console.log('NDK connected', { ndk })
+      console.log('NDK connected')
       setIsConnected(true)
     })
     // eslint-disable-next-line

src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx

@@ -1,15 +1,22 @@
 import { useModalSearchParams } from '@/hooks/useModalSearchParams'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
-import { askNotificationPermission, call, getAppIconTitle, getDomain, getReferrerAppUrl, getShortenNpub } from '@/utils/helpers/helpers'
+import {
+  askNotificationPermission,
+  call,
+  getAppIconTitle,
+  getDomain,
+  getReferrerAppUrl,
+  getShortenNpub,
+} from '@/utils/helpers/helpers'
 import { Avatar, Box, Stack, Typography } from '@mui/material'
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import { useAppSelector } from '@/store/hooks/redux'
 import { selectAppsByNpub, selectKeys, selectPendingsByNpub } from '@/store'
 import { StyledButton, StyledToggleButtonsGroup } from './styled'
 import { ActionToggleButton } from './сomponents/ActionToggleButton'
-import { useState } from 'react'
-import { swicCall } from '@/modules/swic'
+import { useEffect, useState } from 'react'
+import { swicCall, swicWaitStarted } from '@/modules/swic'
 import { ACTION_TYPE } from '@/utils/consts'
 import { useEnqueueSnackbar } from '@/hooks/useEnqueueSnackbar'
 
@@ -28,6 +35,7 @@ export const ModalConfirmConnect = () => {
   const pending = useAppSelector((state) => selectPendingsByNpub(state, npub))
 
   const [selectedActionType, setSelectedActionType] = useState<ACTION_TYPE>(ACTION_TYPE.BASIC)
+  const [isLoaded, setIsLoaded] = useState(false)
 
   const appNpub = searchParams.get('appNpub') || ''
   const pendingReqId = searchParams.get('reqId') || ''
@@ -37,7 +45,7 @@ export const ModalConfirmConnect = () => {
   const triggerApp = apps.find((app) => app.appNpub === appNpub)
   const { name, url = '', icon = '' } = triggerApp || {}
 
-  const appUrl = url || searchParams.get('appUrl') || getReferrerAppUrl();
+  const appUrl = url || searchParams.get('appUrl') || getReferrerAppUrl()
   const appDomain = getDomain(appUrl)
   const appName = name || appDomain || getShortenNpub(appNpub)
   const appAvatarTitle = getAppIconTitle(name || appDomain, appNpub)
@@ -53,14 +61,44 @@ export const ModalConfirmConnect = () => {
     },
   })
 
-  const isNpubExists = npub.trim().length && keys.some((key) => key.npub === npub)
-  // App doesn't exist yet!
-  // const isAppNpubExists = appNpub.trim().length && apps.some((app) => app.appNpub === appNpub)
-  const isPendingReqIdExists = pendingReqId.trim().length && pending.some((p) => p.id === pendingReqId)
-  // console.log("pending", {isModalOpened, isPendingReqIdExists, isNpubExists, /*isAppNpubExists,*/ pendingReqId, pending});
-  if (!isPopup && isModalOpened && (!isNpubExists /*|| !isAppNpubExists*/ || (pendingReqId && !isPendingReqIdExists))) {
-    closeModalAfterRequest()
-    return null
+  // NOTE: when opened directly to this modal using authUrl,
+  // we might not have pending requests visible yet bcs we haven't
+  // loaded them yet, which means this modal will be closed with
+  // the logic below. So now if it's popup then we wait for SW
+  // and then wait a little more to give it time to fetch
+  // pending reqs from db. Same logic implemented in confirm-event.
+
+  // FIXME move to a separate hook and reuse?
+
+  useEffect(() => {
+    if (isModalOpened) {
+      if (isPopup) {
+        console.log("waiting for sw")
+        // wait for SW to start
+        swicWaitStarted().then(() => {
+          // give it some time to load the pending reqs etc
+          console.log("waiting for sw done")
+          setTimeout(() => setIsLoaded(true), 500)
+        })
+      } else {
+        setIsLoaded(true)
+      }
+    } else {
+      setIsLoaded(false)
+    }
+  }, [isModalOpened, isPopup])
+
+  if (isLoaded) {
+    const isNpubExists = npub.trim().length && keys.some((key) => key.npub === npub)
+    // NOTE: app doesn't exist yet!
+    // const isAppNpubExists = appNpub.trim().length && apps.some((app) => app.appNpub === appNpub)
+    const isPendingReqIdExists = pendingReqId.trim().length && pending.some((p) => p.id === pendingReqId)
+    // console.log("pending", {isModalOpened, isPendingReqIdExists, isNpubExists, /*isAppNpubExists,*/ pendingReqId, pending});
+    if (isModalOpened && (!isNpubExists /*|| !isAppNpubExists*/ || (pendingReqId && !isPendingReqIdExists))) {
+      if (isPopup) window.close()
+      else closeModalAfterRequest()
+      return null
+    }
   }
 
   const handleActionTypeChange = (_: any, value: ACTION_TYPE | null) => {
@@ -85,6 +123,7 @@ export const ModalConfirmConnect = () => {
       const options = { perms, appUrl }
       await confirmPending(pendingReqId, true, true, options)
     } else {
+
       try {
         await askNotificationPermission()
         const result = await swicCall('enablePush')
@@ -93,7 +132,7 @@ export const ModalConfirmConnect = () => {
       } catch (e: any) {
         console.log('error', e)
         notify('Please enable Notifications in website settings!', 'error')
-        return
+        // keep going
       }
 
       try {
@@ -179,7 +218,7 @@ export const ModalConfirmConnect = () => {
         </StyledToggleButtonsGroup>
         <Stack direction={'row'} gap={'1rem'}>
           <StyledButton onClick={disallow} varianttype="secondary">
-            Disallow
+            Ignore
           </StyledButton>
           <StyledButton fullWidth onClick={allow}>
             Connect

src/components/Modal/ModalConfirmEvent/ModalConfirmEvent.tsx

@@ -10,7 +10,7 @@ import { ActionToggleButton } from './сomponents/ActionToggleButton'
 import { FC, useEffect, useMemo, useState } from 'react'
 import { StyledActionsListContainer, StyledButton, StyledToggleButtonsGroup } from './styled'
 import { SectionTitle } from '@/shared/SectionTitle/SectionTitle'
-import { swicCall } from '@/modules/swic'
+import { swicCall, swicWaitStarted } from '@/modules/swic'
 import { Checkbox } from '@/shared/Checkbox/Checkbox'
 import { DbPending } from '@/modules/db'
 import { IPendingsByAppNpub } from '@/pages/KeyPage/hooks/useTriggerConfirmModal'
@@ -47,6 +47,7 @@ export const ModalConfirmEvent: FC<ModalConfirmEventProps> = ({ confirmEventReqs
 
   const [selectedActionType, setSelectedActionType] = useState<ACTION_TYPE>(ACTION_TYPE.ALWAYS)
   const [pendingRequests, setPendingRequests] = useState<PendingRequest[]>([])
+  const [isLoaded, setIsLoaded] = useState(false)
 
   const currentAppPendingReqs = useMemo(() => confirmEventReqs[appNpub]?.pending || [], [confirmEventReqs, appNpub])
 
@@ -61,25 +62,31 @@ export const ModalConfirmEvent: FC<ModalConfirmEventProps> = ({ confirmEventReqs
     },
   })
 
-  // FIXME: when opened directly to this modal using authUrl,
-  // we might not have pending requests visible yet bcs we haven't
-  // loaded them yet, which means this modal will be closed with
-  // the login below. It's fine if only one app has sent pending 
-  // requests atm, bcs the modal would re-appear as soon as we load 
-  // the requests. But if there are several pending reqs from other
-  // apps then popup might show a different one! Which is very
-  // contrary to what user expects. So:
-  // - if isPopup - dont close the modal with logic below
-  // - show some 'loading' indicator until we've got some requests 
-  // for the specified appNpub
-  // FIXME is the same logic valid for Connect modal?
+  useEffect(() => {
+    if (isModalOpened) {
+      if (isPopup) {
+        // wait for SW to start
+        swicWaitStarted().then(() => {
+          // give it some time to load the pending reqs etc
+          setTimeout(() => setIsLoaded(true), 500)
+        })
+      } else {
+        setIsLoaded(true)
+      }
+    } else {
+      setIsLoaded(false)
+    }
+  }, [isModalOpened, isPopup])
 
-  const isNpubExists = npub.trim().length && keys.some((key) => key.npub === npub)
-  const isAppNpubExists = appNpub.trim().length && apps.some((app) => app.appNpub === appNpub)
-  // console.log("confirm event", { confirmEventReqs, isModalOpened, isNpubExists, isAppNpubExists });
-  if (isModalOpened && (!currentAppPendingReqs.length || !isNpubExists || !isAppNpubExists)) {
-    closeModalAfterRequest()
-    return null
+  if (isLoaded) {
+    const isNpubExists = npub.trim().length && keys.some((key) => key.npub === npub)
+    const isAppNpubExists = appNpub.trim().length && apps.some((app) => app.appNpub === appNpub)
+    // console.log("confirm event", { confirmEventReqs, isModalOpened, isNpubExists, isAppNpubExists });
+    if (isModalOpened && (!currentAppPendingReqs.length || !isNpubExists || !isAppNpubExists)) {
+      if (isPopup) window.close()
+      else closeModalAfterRequest()
+      return null
+    }
   }
 
   const triggerApp = apps.find((app) => app.appNpub === appNpub)

src/components/Modal/ModalImportKeys/ModalImportKeys.tsx

@@ -6,7 +6,6 @@ import { Input } from '@/shared/Input/Input'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
 import { Stack, Typography, useTheme } from '@mui/material'
-import { StyledAppLogo } from './styled'
 import { useNavigate } from 'react-router-dom'
 import { useForm } from 'react-hook-form'
 import { FormInputType, schema } from './const'
@@ -149,13 +148,15 @@ export const ModalImportKeys = () => {
   const nsecHelperText = getNsecHelperText()
 
   return (
-    <Modal open={isModalOpened} onClose={handleCloseModal}>
-      <Stack gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
-        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
-          <StyledAppLogo />
+    <Modal open={isModalOpened} onClose={handleCloseModal} withCloseButton={false}>
+      <Stack paddingTop={'1rem'} gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
+        <Stack gap={'0.2rem'} padding={'0 1rem'} alignSelf={'flex-start'}>
           <Typography fontWeight={600} variant="h5">
             Import key
           </Typography>
+          <Typography noWrap variant="body2" color={'GrayText'}>
+            Bring your existing Nostr keys to Nsec.app
+          </Typography>
         </Stack>
         <Input
           label="Choose a username"

src/components/Modal/ModalInitial/ModalInitial.tsx

@@ -1,14 +1,30 @@
+// import { useEffect } from 'react'
 import { useModalSearchParams } from '@/hooks/useModalSearchParams'
 import { Button } from '@/shared/Button/Button'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
 import { Stack } from '@mui/material'
+// import { AppLink } from '@/shared/AppLink/AppLink'
 
 export const ModalInitial = () => {
   const { getModalOpened, createHandleCloseReplace, handleOpen } = useModalSearchParams()
   const isModalOpened = getModalOpened(MODAL_PARAMS_KEYS.INITIAL)
   const handleCloseModal = createHandleCloseReplace(MODAL_PARAMS_KEYS.INITIAL)
 
+  // const [showAdvancedContent, setShowAdvancedContent] = useState(false)
+
+  // const handleShowAdvanced = () => {
+  //   setShowAdvancedContent(true)
+  // }
+
+  // useEffect(() => {
+  //   return () => {
+  //     if (isModalOpened) {
+  //       setShowAdvancedContent(false)
+  //     }
+  //   }
+  // }, [isModalOpened])
+
   return (
     <Modal open={isModalOpened} onClose={handleCloseModal}>
       <Stack paddingTop={'0.5rem'} gap={'1rem'}>

src/components/Modal/ModalLogin/ModalLogin.tsx

@@ -5,7 +5,6 @@ import { swicCall } from '@/modules/swic'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
 import { Stack, Typography } from '@mui/material'
-import { StyledAppLogo } from './styled'
 import { Input } from '@/shared/Input/Input'
 import { Button } from '@/shared/Button/Button'
 import { useNavigate, useSearchParams } from 'react-router-dom'
@@ -100,14 +99,14 @@ export const ModalLogin = () => {
       if (isPopup && isModalOpened) {
         swicCall('fetchPendingRequests', npub, appNpub)
 
-        fetchNpubNames(npub).then(names => {
+        fetchNpubNames(npub).then((names) => {
           if (names.length) {
             setValue('username', `${names[0]}@${DOMAIN}`)
           }
         })
       }
     }
-  }, [searchParams, isModalOpened, setValue])
+  }, [searchParams, isModalOpened, isPopup, setValue])
 
   useEffect(() => {
     return () => {
@@ -119,13 +118,15 @@ export const ModalLogin = () => {
   }, [isModalOpened, cleanUpStates])
 
   return (
-    <Modal open={isModalOpened} onClose={handleCloseModal}>
-      <Stack gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
-        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
-          <StyledAppLogo />
+    <Modal open={isModalOpened} onClose={handleCloseModal} withCloseButton={false}>
+      <Stack paddingTop={'1rem'} gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
+        <Stack gap={'0.2rem'} padding={'0 1rem'} alignSelf={'flex-start'}>
           <Typography fontWeight={600} variant="h5">
             Login
           </Typography>
+          <Typography noWrap variant="body2" color={'GrayText'}>
+            Sync keys from the cloud to this device
+          </Typography>
         </Stack>
         <Input
           label="Username or nip05 or npub"
@@ -141,10 +142,14 @@ export const ModalLogin = () => {
           {...register('password')}
           {...inputProps}
           error={!!errors.password}
+          helperText={'Password you set in Cloud Sync settings'}
         />
-        <Button type="submit" fullWidth disabled={isLoading}>
-          Add account {isLoading && <LoadingSpinner />}
-        </Button>
+
+        <Stack gap={'0.5rem'}>
+          <Button type="submit" fullWidth disabled={isLoading}>
+            Add account {isLoading && <LoadingSpinner />}
+          </Button>
+        </Stack>
       </Stack>
     </Modal>
   )

src/components/Modal/ModalSignUp/ModalSignUp.tsx

@@ -4,7 +4,6 @@ import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
 import { Stack, Typography, useTheme } from '@mui/material'
 import React, { ChangeEvent, useEffect, useState } from 'react'
-import { StyledAppLogo } from './styled'
 import { Input } from '@/shared/Input/Input'
 import { Button } from '@/shared/Button/Button'
 import { CheckmarkIcon } from '@/assets'
@@ -84,13 +83,15 @@ export const ModalSignUp = () => {
   }, [isModalOpened])
 
   return (
-    <Modal open={isModalOpened} onClose={handleCloseModal}>
+    <Modal open={isModalOpened} onClose={handleCloseModal} withCloseButton={false}>
       <Stack paddingTop={'1rem'} gap={'1rem'} component={'form'} onSubmit={handleSubmit}>
-        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
-          <StyledAppLogo />
+        <Stack gap={'0.2rem'} padding={'0 1rem'} alignSelf={'flex-start'}>
           <Typography fontWeight={600} variant="h5">
             Sign up
           </Typography>
+          <Typography noWrap variant="body2" color={'GrayText'}>
+            Generate new Nostr keys
+          </Typography>
         </Stack>
         <Input
           label="Username"
@@ -113,9 +114,11 @@ export const ModalSignUp = () => {
             },
           }}
         />
-        <Button fullWidth type="submit" disabled={isLoading}>
-          Create account {isLoading && <LoadingSpinner />}
-        </Button>
+        <Stack gap={'0.5rem'}>
+          <Button fullWidth type="submit" disabled={isLoading}>
+            Create account {isLoading && <LoadingSpinner />}
+          </Button>
+        </Stack>
       </Stack>
     </Modal>
   )

src/hooks/useModalSearchParams.ts

@@ -31,7 +31,7 @@ export const useModalSearchParams = () => {
     const enumKey = getEnumParam(modal)
     searchParams.delete(enumKey)
     extraOptions?.onClose && extraOptions?.onClose(searchParams)
-    console.log({ searchParams })
+    // console.log({ searchParams })
     setSearchParams(searchParams, { replace: !!extraOptions?.replace })
   }
 

src/modules/backend.ts

@@ -1,21 +1,30 @@
-import { generatePrivateKey, getPublicKey, nip19 } from 'nostr-tools'
+import { Event, generatePrivateKey, getPublicKey, nip19, verifySignature } from 'nostr-tools'
 import { DbApp, dbi, DbKey, DbPending, DbPerm } from './db'
 import { Keys } from './keys'
 import NDK, {
-  IEventHandlingStrategy,
   NDKEvent,
   NDKNip46Backend,
   NDKPrivateKeySigner,
   NDKSigner,
+  NDKSubscription,
+  NDKSubscriptionCacheUsage,
+  NDKUser,
 } from '@nostr-dev-kit/ndk'
 import { NOAUTHD_URL, WEB_PUSH_PUBKEY, NIP46_RELAYS, MIN_POW, MAX_POW, KIND_RPC, DOMAIN } from '../utils/consts'
-import { Nip04 } from './nip04'
+// import { Nip04 } from './nip04'
 import { fetchNip05, getReqPerm, getShortenNpub, isPackagePerm } from '@/utils/helpers/helpers'
 import { NostrPowEvent, minePow } from './pow'
 //import { PrivateKeySigner } from './signer'
 
 //const PERF_TEST = false
 
+enum DECISION {
+  ASK = '',
+  ALLOW = 'allow',
+  DISALLOW = 'disallow',
+  IGNORE = 'ignore',
+}
+
 export interface KeyInfo {
   npub: string
   nip05?: string
@@ -28,11 +37,12 @@ interface Key {
   backoff: number
   signer: NDKSigner
   backend: NDKNip46Backend
+  watcher: Watcher
 }
 
 interface Pending {
   req: DbPending
-  cb: (allow: boolean, remember: boolean, options?: any) => void
+  cb: (allow: DECISION, remember: boolean, options?: any) => void
   notified?: boolean
 }
 
@@ -46,92 +56,171 @@ interface IAllowCallbackParams {
   params?: any
 }
 
+class Watcher {
+  private ndk: NDK
+  private signer: NDKSigner
+  private onReply: (id: string) => void
+  private sub?: NDKSubscription
+
+  constructor(ndk: NDK, signer: NDKSigner, onReply: (id: string) => void) {
+    this.ndk = ndk
+    this.signer = signer
+    this.onReply = onReply
+  }
+
+  async start() {
+    this.sub = this.ndk.subscribe(
+      {
+        kinds: [KIND_RPC],
+        authors: [(await this.signer.user()).pubkey],
+        since: Math.floor(Date.now() / 1000 - 10),
+      },
+      {
+        closeOnEose: false,
+        cacheUsage: NDKSubscriptionCacheUsage.ONLY_RELAY,
+      }
+    )
+    this.sub.on('event', async (e: NDKEvent) => {
+      const peer = e.tags.find((t) => t.length >= 2 && t[0] === 'p')
+      console.log('watcher got event', { e, peer })
+      if (!peer) return
+      const decryptedContent = await this.signer.decrypt(new NDKUser({ pubkey: peer[1] }), e.content)
+      const parsedContent = JSON.parse(decryptedContent)
+      const { id, method, params, result, error } = parsedContent
+      console.log('watcher got', { peer, id, method, params, result, error })
+      if (method || result === 'auth_url') return
+      this.onReply(id)
+    })
+  }
+
+  stop() {
+    this.sub!.stop()
+  }
+}
+
 class Nip46Backend extends NDKNip46Backend {
+  private allowCb: (params: IAllowCallbackParams) => Promise<DECISION>
+  private npub: string = ''
+
+  public constructor(ndk: NDK, signer: NDKSigner, allowCb: (params: IAllowCallbackParams) => Promise<DECISION>) {
+    super(ndk, signer, () => Promise.resolve(true))
+    this.allowCb = allowCb
+    signer.user().then((u) => (this.npub = nip19.npubEncode(u.pubkey)))
+  }
+
   public async processEvent(event: NDKEvent) {
     this.handleIncomingEvent(event)
   }
-}
 
-class Nip04KeyHandlingStrategy implements IEventHandlingStrategy {
-  private privkey: string
-  private nip04 = new Nip04()
+  protected async handleIncomingEvent(event: NDKEvent) {
+    const { id, method, params } = (await this.rpc.parseEvent(event)) as any
+    const remotePubkey = event.pubkey
+    let response: string | undefined
 
-  constructor(privkey: string) {
-    this.privkey = privkey
-  }
+    this.debug('incoming event', { id, method, params })
 
-  private async getKey(backend: NDKNip46Backend, id: string, remotePubkey: string, recipientPubkey: string) {
-    if (
-      !(await backend.pubkeyAllowed({
-        id,
-        pubkey: remotePubkey,
-        // @ts-ignore
-        method: 'get_nip04_key',
-        params: recipientPubkey,
-      }))
-    ) {
-      backend.debug(`get_nip04_key request from ${remotePubkey} rejected`)
-      return undefined
+    // validate signature explicitly
+    if (!verifySignature(event.rawEvent() as Event)) {
+      this.debug('invalid signature', event.rawEvent())
+      return
     }
 
-    return Buffer.from(this.nip04.createKey(this.privkey, recipientPubkey)).toString('hex')
-  }
-
-  async handle(backend: NDKNip46Backend, id: string, remotePubkey: string, params: string[]) {
-    const [recipientPubkey] = params
-    return await this.getKey(backend, id, remotePubkey, recipientPubkey)
-  }
-}
-
-class EventHandlingStrategyWrapper implements IEventHandlingStrategy {
-  readonly backend: NDKNip46Backend
-  readonly npub: string
-  readonly method: string
-  private body: IEventHandlingStrategy
-  private allowCb: (params: IAllowCallbackParams) => Promise<boolean>
-
-  constructor(
-    backend: NDKNip46Backend,
-    npub: string,
-    method: string,
-    body: IEventHandlingStrategy,
-    allowCb: (params: IAllowCallbackParams) => Promise<boolean>
-  ) {
-    this.backend = backend
-    this.npub = npub
-    this.method = method
-    this.body = body
-    this.allowCb = allowCb
-  }
-
-  async handle(
-    backend: NDKNip46Backend,
-    id: string,
-    remotePubkey: string,
-    params: string[]
-  ): Promise<string | undefined> {
-    console.log(Date.now(), 'handle', {
-      method: this.method,
-      id,
-      remotePubkey,
-      params,
-    })
-    const allow = await this.allowCb({
-      backend: this.backend,
+    const decision = await this.allowCb({
+      backend: this,
       npub: this.npub,
       id,
-      method: this.method,
+      method,
       remotePubkey,
       params,
     })
-    if (!allow) return undefined
-    return this.body.handle(backend, id, remotePubkey, params).then((r) => {
-      console.log(Date.now(), 'req', id, 'method', this.method, 'result', r)
-      return r
-    })
+    console.log(Date.now(), 'handle', { method, id, decision, remotePubkey, params })
+    if (decision === DECISION.IGNORE) return
+
+    const allow = decision === DECISION.ALLOW
+    const strategy = this.handlers[method]
+    if (allow) {
+      if (strategy) {
+        try {
+          response = await strategy.handle(this, id, remotePubkey, params)
+          console.log(Date.now(), 'req', id, 'method', method, 'result', response)
+        } catch (e: any) {
+          this.debug('error handling event', e, { id, method, params })
+          this.rpc.sendResponse(id, remotePubkey, 'error', undefined, e.message)
+        }
+      } else {
+        this.debug('unsupported method', { method, params })
+      }
+    }
+
+    if (response) {
+      this.debug(`sending response to ${remotePubkey}`, response)
+      this.rpc.sendResponse(id, remotePubkey, response)
+    } else {
+      this.rpc.sendResponse(id, remotePubkey, 'error', undefined, 'Not authorized')
+    }
   }
 }
 
+// class Nip04KeyHandlingStrategy implements IEventHandlingStrategy {
+//   private privkey: string
+//   private nip04 = new Nip04()
+
+//   constructor(privkey: string) {
+//     this.privkey = privkey
+//   }
+
+//   private async getKey(backend: NDKNip46Backend, id: string, remotePubkey: string, recipientPubkey: string) {
+//     if (
+//       !(await backend.pubkeyAllowed({
+//         id,
+//         pubkey: remotePubkey,
+//         // @ts-ignore
+//         method: 'get_nip04_key',
+//         params: recipientPubkey,
+//       }))
+//     ) {
+//       backend.debug(`get_nip04_key request from ${remotePubkey} rejected`)
+//       return undefined
+//     }
+
+//     return Buffer.from(this.nip04.createKey(this.privkey, recipientPubkey)).toString('hex')
+//   }
+
+//   async handle(backend: NDKNip46Backend, id: string, remotePubkey: string, params: string[]) {
+//     const [recipientPubkey] = params
+//     return await this.getKey(backend, id, remotePubkey, recipientPubkey)
+//   }
+// }
+
+// FIXME why  do we need it? Just to print 
+// class EventHandlingStrategyWrapper implements IEventHandlingStrategy {
+//   readonly backend: NDKNip46Backend
+//   readonly method: string
+//   private body: IEventHandlingStrategy
+
+//   constructor(
+//     backend: NDKNip46Backend,
+//     method: string,
+//     body: IEventHandlingStrategy
+//   ) {
+//     this.backend = backend
+//     this.method = method
+//     this.body = body
+//   }
+
+//   async handle(
+//     backend: NDKNip46Backend,
+//     id: string,
+//     remotePubkey: string,
+//     params: string[]
+//   ): Promise<string | undefined> {
+//     return this.body.handle(backend, id, remotePubkey, params).then((r) => {
+//       console.log(Date.now(), 'req', id, 'method', this.method, 'result', r)
+//       return r
+//     })
+//   }
+// }
+
 export class NoauthBackend {
   readonly swg: ServiceWorkerGlobalScope
   private keysModule: Keys
@@ -146,7 +235,7 @@ export class NoauthBackend {
   private pendingNpubEvents = new Map<string, NDKEvent[]>()
   private ndk = new NDK({
     explicitRelayUrls: NIP46_RELAYS,
-    enableOutboxModel: false
+    enableOutboxModel: false,
   })
 
   public constructor(swg: ServiceWorkerGlobalScope) {
@@ -566,7 +655,7 @@ export class NoauthBackend {
     return this.keyInfo(dbKey)
   }
 
-  private getPerm(req: DbPending): string {
+  private getDecision(req: DbPending): DECISION {
     const reqPerm = getReqPerm(req)
     const appPerms = this.perms.filter((p) => p.npub === req.npub && p.appNpub === req.appNpub)
 
@@ -575,8 +664,18 @@ export class NoauthBackend {
     // non-exact next
     if (!perm) perm = appPerms.find((p) => isPackagePerm(p.perm, reqPerm))
 
-    console.log('req', req, 'perm', reqPerm, 'value', perm, appPerms)
-    return perm?.value || ''
+    if (perm) {
+      console.log('req', req, 'perm', reqPerm, 'value', perm, appPerms)
+      return perm.value === '1' ? DECISION.ALLOW : DECISION.DISALLOW
+    }
+
+    const conn = appPerms.find((p) => p.perm === 'connect')
+    if (conn && conn.value === '0') {
+      console.log('req', req, 'perm', reqPerm, 'ignore by connect disallow')
+      return DECISION.IGNORE
+    }
+
+    return DECISION.ASK
   }
 
   private async connectApp({
@@ -629,19 +728,19 @@ export class NoauthBackend {
     method,
     remotePubkey,
     params,
-  }: IAllowCallbackParams): Promise<boolean> {
+  }: IAllowCallbackParams): Promise<DECISION> {
     // same reqs usually come on reconnects
     if (this.doneReqIds.includes(id)) {
       console.log('request already done', id)
       // FIXME maybe repeat the reply, but without the Notification?
-      return false
+      return DECISION.IGNORE
     }
 
     const appNpub = nip19.npubEncode(remotePubkey)
     const connected = !!this.apps.find((a) => a.appNpub === appNpub)
     if (!connected && method !== 'connect') {
       console.log('ignoring request before connect', method, id, appNpub, npub)
-      return false
+      return DECISION.IGNORE
     }
 
     const req: DbPending = {
@@ -656,9 +755,21 @@ export class NoauthBackend {
     const self = this
     return new Promise(async (ok) => {
       // called when it's decided whether to allow this or not
-      const onAllow = async (manual: boolean, allow: boolean, remember: boolean, options?: any) => {
+      const onAllow = async (manual: boolean, decision: DECISION, remember: boolean, options?: any) => {
         // confirm
-        console.log(Date.now(), allow ? 'allowed' : 'disallowed', npub, method, options, params)
+        console.log(Date.now(), decision, npub, method, options, params)
+
+        switch (decision) {
+          case DECISION.ASK:
+            throw new Error('Make a decision!')
+          case DECISION.IGNORE:
+            return // noop
+          case DECISION.ALLOW:
+          case DECISION.DISALLOW:
+            // fall through
+        }
+
+        const allow = decision === DECISION.ALLOW
 
         if (manual) {
           await dbi.confirmPending(id, allow)
@@ -711,35 +822,40 @@ export class NoauthBackend {
 
           // reload
           this.perms = await dbi.listPerms()
-
-          // confirm pending requests that might now have
-          // the proper perms
-          const otherReqs = self.confirmBuffer.filter((r) => r.req.appNpub === req.appNpub)
-          console.log('updated perms', this.perms, 'otherReqs', otherReqs, 'connected', connected)
-          for (const r of otherReqs) {
-            let perm = this.getPerm(r.req)
-            if (perm) {
-              r.cb(perm === '1', false)
-            }
-          }
         }
 
+        // release this promise to send reply
+        // to this req
+        ok(decision)
+
         // notify UI that it was confirmed
         // if (!PERF_TEST)
         this.updateUI()
 
-        // return to let nip46 flow proceed
-        ok(allow)
+        // after replying to this req check pending
+        // reqs maybe they can be replied right away
+        if (remember) {
+          // confirm pending requests that might now have
+          // the proper perms
+          const otherReqs = self.confirmBuffer.filter((r) => r.req.appNpub === req.appNpub)
+          console.log('updated perms', this.perms, 'otherReqs', otherReqs, 'connected', connected)
+          for (const r of otherReqs) {
+            const dec = this.getDecision(r.req)
+            if (dec !== DECISION.ASK) {
+              r.cb(dec, false)
+            }
+          }
+        }
       }
 
       // check perms
-      const perm = this.getPerm(req)
-      console.log(Date.now(), 'perm', req.id, perm)
+      const dec = this.getDecision(req)
+      console.log(Date.now(), 'decision', req.id, dec)
 
       // have perm?
-      if (perm) {
+      if (dec !== DECISION.ASK) {
         // reply immediately
-        onAllow(false, perm === '1', false)
+        onAllow(false, dec, false)
       } else {
         // put pending req to db
         await dbi.addPending(req)
@@ -750,7 +866,7 @@ export class NoauthBackend {
         // put to a list of pending requests
         this.confirmBuffer.push({
           req,
-          cb: (allow, remember, options) => onAllow(true, allow, remember, options),
+          cb: (decision, remember, options) => onAllow(true, decision, remember, options),
         })
 
         // OAuth flow
@@ -783,25 +899,28 @@ export class NoauthBackend {
     ndk.connect()
 
     const signer = new NDKPrivateKeySigner(sk) // PrivateKeySigner
-    const backend = new Nip46Backend(ndk, signer, () => Promise.resolve(true))
-    this.keys.push({ npub, backend, signer, ndk, backoff })
+    const backend = new Nip46Backend(ndk, signer, this.allowPermitCallback.bind(this)) // , () => Promise.resolve(true)
+    const watcher = new Watcher(ndk, signer, (id) => {
+      // drop pending request
+      dbi.removePending(id).then(() => this.updateUI())
+    })
+    this.keys.push({ npub, backend, signer, ndk, backoff, watcher })
 
     // new method
-    backend.handlers['get_nip04_key'] = new Nip04KeyHandlingStrategy(sk)
+    // backend.handlers['get_nip04_key'] = new Nip04KeyHandlingStrategy(sk)
 
-    // assign our own permission callback
-    for (const method in backend.handlers) {
-      backend.handlers[method] = new EventHandlingStrategyWrapper(
-        backend,
-        npub,
-        method,
-        backend.handlers[method],
-        this.allowPermitCallback.bind(this)
-      )
-    }
+    // // assign our own permission callback
+    // for (const method in backend.handlers) {
+    //   backend.handlers[method] = new EventHandlingStrategyWrapper(
+    //     backend,
+    //     method,
+    //     backend.handlers[method]
+    //   )
+    // }
 
     // start
     backend.start()
+    watcher.start()
     console.log('started', npub)
 
     // backoff reset on successfull connection
@@ -825,11 +944,13 @@ export class NoauthBackend {
       const bo = self.keys.find((k) => k.npub === npub)?.backoff || 1000
       setTimeout(() => {
         console.log(new Date(), 'reconnect relays for key', npub, 'backoff', bo)
-        // @ts-ignore
         for (const r of ndk.pool.relays.values()) r.disconnect()
         // make sure it no longer activates
         backend.handlers = {}
 
+        // stop watching
+        watcher.stop()
+
         self.keys = self.keys.filter((k) => k.npub !== npub)
         self.startKey({ npub, sk, backoff: Math.min(bo * 2, 60000) })
       }, bo)
@@ -856,11 +977,11 @@ export class NoauthBackend {
 
     const events = await this.ndk.fetchEvents({
       kinds: [KIND_RPC],
-      "#p": [pubkey as string],
-      authors: [appPubkey as string]
-    });
-    console.log("fetched pending for", npub, events.size)
-    this.pendingNpubEvents.set(npub, [...events.values()]);
+      '#p': [pubkey as string],
+      authors: [appPubkey as string],
+    })
+    console.log('fetched pending for', npub, events.size)
+    this.pendingNpubEvents.set(npub, [...events.values()])
   }
 
   public async unlock(npub: string) {
@@ -977,7 +1098,7 @@ export class NoauthBackend {
       this.updateUI()
     } else {
       console.log('confirming req', id, allow, remember, options)
-      req.cb(allow, remember, options)
+      req.cb(allow ? DECISION.ALLOW : DECISION.DISALLOW, remember, options)
     }
   }
 

src/modules/swic.ts

@@ -5,7 +5,7 @@ export let swr: ServiceWorkerRegistration | null = null
 const reqs = new Map<number, { ok: (r: any) => void; rej: (r: any) => void }>()
 let nextReqId = 1
 let onRender: (() => void) | null = null
-const queue: (() => Promise<void>)[] = []
+const queue: (() => Promise<void> | void)[] = []
 
 export async function swicRegister() {
   serviceWorkerRegistration.register({
@@ -36,6 +36,13 @@ export async function swicRegister() {
   })
 }
 
+export function swicWaitStarted() {
+  return new Promise<void>(ok => {
+    if (swr && swr.active) ok()
+    else queue.push(ok)
+  })
+} 
+
 function onMessage(data: any) {
   const { id, result, error } = data
   console.log('SW message', id, result, error)

src/pages/AppPage/App.Page.tsx

@@ -46,7 +46,7 @@ const AppPage = () => {
   const shortAppNpub = getShortenNpub(appNpub)
   const appName = name || appDomain || shortAppNpub
   const appAvatarTitle = getAppIconTitle(name || appDomain, appNpub)
-  const isAppNameExists = !!name
+  const isAppNameExists = !!name || !!appDomain
 
   const { timestamp } = connectPerm || {}
   const connectedOn = connectPerm && timestamp ? `Connected at ${formatTimestampDate(timestamp)}` : 'Not connected'

src/pages/AppPage/components/Activities/ItemActivity.tsx

@@ -6,7 +6,6 @@ import { formatTimestampDate } from '@/utils/helpers/date'
 import ClearRoundedIcon from '@mui/icons-material/ClearRounded'
 import DoneRoundedIcon from '@mui/icons-material/DoneRounded'
 import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded'
-import { ACTIONS } from '@/utils/consts'
 import { getReqActionName } from '@/utils/helpers/helpers'
 
 type ItemActivityProps = DbHistory

src/pages/KeyPage/Key.Page.tsx

@@ -47,7 +47,7 @@ const KeyPage = () => {
 
   const isKeyExists = npub.trim().length && key
   const isPopup = searchParams.get('popup') === 'true'
-  console.log({ isKeyExists, isPopup })
+  // console.log({ isKeyExists, isPopup })
 
   if (isPopup && !isKeyExists) {
     searchParams.set('login', 'true')

src/pages/KeyPage/components/ItemApp.tsx

@@ -13,7 +13,7 @@ export const ItemApp: FC<ItemAppProps> = ({ npub, appNpub, icon, name, url }) =>
   const appName = name || appDomain || shortAppNpub
   const appIcon = icon || `https://${appDomain}/favicon.ico`
   const appAvatarTitle = getAppIconTitle(name || appDomain, appNpub)
-  const isAppNameExists = !!name
+  const isAppNameExists = !!name || !!appDomain
 
   return (
     <StyledItemAppContainer

src/shared/Input/Input.tsx

@@ -56,7 +56,7 @@ const StyledInputContainer = styled((props: BoxProps) => <Box {...props} />)(({
       },
     },
     '& > .helper_text': {
-      margin: '0.5rem 1rem 0',
+      margin: '0.5rem 0.5rem 0',
       color: theme.palette.text.primary,
     },
     '& > .label': {

src/utils/helpers/helpers.ts

@@ -121,7 +121,7 @@ export const getDomain = (url: string) => {
 }
 
 export const getReferrerAppUrl = () => {
-  console.log('referrer', window.document.referrer)
+  // console.log('referrer', window.document.referrer)
   if (!window.document.referrer) return ''
   try {
     const u = new URL(window.document.referrer.toLocaleLowerCase())