add reload badge on sw update

format code
Fix ignore unknown methods
2024-02-19 21:41:10 +06:00 · 2024-02-19 19:35:12 +06:00 · 2024-02-19 14:54:00 +03:00 · 2024-02-19 14:14:37 +03:00 · 2024-02-19 14:12:51 +03:00 · 2024-02-19 14:10:15 +03:00
45 changed files with 1291 additions and 426 deletions
--- a/23
+++ b/23
@ -1,23 +0,0 @@
-Noauth - Nostr key manager
--------------------------
-
-THIS IS BETA SOFTWARE, DON'T USE WITH REAL KEYS!
-
-This is a web-based nostr signer app, it uses nip46 signer
-running inside a service worker, if SW is not running -
-a noauthd server sends a push message and wakes SW up. Also,
-keys can be saved to server and fetched later in an end-to-end
-encrypted way. Keys are encrypted with user-defined password, 
-a good key derivation function is used to resist brute force.
-
-This app works in Chrome on desktop and Android out of the box,
-try it with snort.social (use bunker:/... string as 'login string').
-
-On iOS web push notifications are still experimental, eventually
-it will work on iOS out of the box too.
-
-It works across devices, but that's unreliable, especially if
-signer is on mobile - if smartphone is locked then service worker might
-not wake up. Thanks to cloud sync/recovery of keys users can import 
-their keys into this app on every device and then it works well.
-
--- a/README.md
+++ b/README.md
@ -0,0 +1,95 @@
+Noauth - Nostr key manager
+--------------------------
+
+Nsec.app is a web app to store your Nostr keys 
+and provide remote access to keys using nip46.
+
+Features:
+- non-custodial store for your keys
+- can store many keys
+- provides nip46 access to apps
+- permission management for connected apps
+- works in any browser or platform
+- background operation even if app tab is closed
+- cloud e2ee sync for your keys 
+- support for OAuth-like signin flow
+
+
+How it works
+------------
+
+This is a web-based nostr signer app, it uses nip46 signer
+running inside a service worker, if SW is not running -
+a noauthd server sends a push message and wakes SW up. Also,
+keys can be saved to server and fetched later in an end-to-end
+encrypted way. Keys are encrypted with user-defined password, 
+a good key derivation function is used to resist brute force.
+
+It works across devices, but that's unreliable, especially if
+signer is on mobile - if your phone is locked then service worker might
+not wake up. Thanks to cloud sync/recovery of keys users can import 
+their keys into this app on every device and then it works well.
+
+How to self-host
+----------------
+
+This app is non-custodial, so there isn't much need for 
+self-hosting. However, if you'd like to run your own version of
+it, here is how to do it:
+
+Create web push keys (https://github.com/web-push-libs/web-push):
+```
+npm install web-push;
+web-push generate-vapid-keys --json
+```
+
+Edit .end in noauth:
+```
+REACT_APP_WEB_PUSH_PUBKEY=web push public key, 
+REACT_APP_NOAUTHD_URL=address of the noauthd server (see below)
+REACT_APP_DOMAIN=domain name of your bunker (i.e. nsec.app)
+REACT_APP_RELAY=relay that you'll use, can use wss://relay.nsec.app - don't use public general-purpose relays, you'll hit rate limits very fast
+```
+
+Then do:
+```
+npm install; 
+npm run build; 
+```
+The app is in the `build` folder. 
+
+To run the noauthd server (https://github.com/nostrband/noauthd),
+edit .env in noauthd:
+```
+PUSH_PUBKEY=web push public key, same as above
+PUSH_SECRET=web push private key that you generated above
+ORIGIN=address of the server itself, like http://localhost:8000
+DATABASE_URL="file:./prod.db"
+BUNKER_NSEC=nsec of the bunker (needed for create_account methods)
+BUNKER_RELAY="wss://relay.nsec.app" - same as above
+BUNKER_DOMAIN="nsec.app" - same as above
+BUNKER_ORIGIN=where noauth is hosted 
+```
+
+Then init the database and launch: 
+```
+npx prisma migrate deploy
+node -r dotenv/config src/index.js dotenv_config_path=.env
+```
+
+TODO
+----
+
+- Show details of requested operations
+- Publish a profile for new sign ups
+- Sync processed reqs across devices
+- Sync connected apps and perms across devices
+- Sync app activity across devices
+- Group apps by domain
+- Encrypt local nsec in Safari
+- Add WebAuthn to the mix
+- Add LN address to new profiles 
+- Confirm relay/contact list pruning requests
+- Transfer/change nip05 name
+- Better notifs with activity summaries
+- How to send auth_url to new device if all other devices are down?
--- a/public/manifest.json
+++ b/public/manifest.json
@ -1,6 +1,6 @@
 {
-  "name": "Nsec.app",
-  "short_name": "Nsec.app - Nostr key management tool",
+  "name": "Nsec.app - Nostr key management tool",
+  "short_name": "Nsec.app",
  "start_url": ".",
  "icons": [
    {
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,27 +1,25 @@
 import { DbKey, dbi } from './modules/db'
 import { useCallback, useEffect, useState } from 'react'
-import { swicOnRender } from './modules/swic'
+import { swicOnReload, swicOnRender } from './modules/swic'
 import { useAppDispatch } from './store/hooks/redux'
 import { setApps, setKeys, setPending, setPerms } from './store/reducers/content.slice'
 import AppRoutes from './routes/AppRoutes'
 import { fetchProfile, ndk } from './modules/nostr'
-import { useModalSearchParams } from './hooks/useModalSearchParams'
-import { MODAL_PARAMS_KEYS } from './types/modal'
 import { ModalInitial } from './components/Modal/ModalInitial/ModalInitial'
 import { ModalImportKeys } from './components/Modal/ModalImportKeys/ModalImportKeys'
 import { ModalSignUp } from './components/Modal/ModalSignUp/ModalSignUp'
 import { ModalLogin } from './components/Modal/ModalLogin/ModalLogin'
+import { useSearchParams } from 'react-router-dom'

 function App() {
  const [render, setRender] = useState(0)
-  const { handleOpen } = useModalSearchParams()
  const dispatch = useAppDispatch()
+  const [searchParams, setSearchParams] = useSearchParams()

  const [isConnected, setIsConnected] = useState(false)

  const load = useCallback(async () => {
    const keys: DbKey[] = await dbi.listKeys()
-    console.log(keys, 'keys')

    dispatch(setKeys({ keys }))
    const loadProfiles = async () => {
@ -58,7 +56,6 @@ function App() {
    // rerender
    //		setRender((r) => r + 1)

-    if (!keys.length) handleOpen(MODAL_PARAMS_KEYS.INITIAL)
    // eslint-disable-next-line
  }, [dispatch])

@ -68,7 +65,7 @@ function App() {

  useEffect(() => {
    ndk.connect().then(() => {
-      console.log('NDK connected', { ndk })
+      console.log('NDK connected')
      setIsConnected(true)
    })
    // eslint-disable-next-line
@ -80,9 +77,17 @@ function App() {
    setRender((r) => r + 1)
  })

+  // subscribe to service worker updates
+  swicOnReload(() => {
+    console.log('reload')
+    searchParams.set('reload', 'true')
+    setSearchParams(searchParams)
+  })
+
  return (
    <>
      <AppRoutes />
+
      <ModalInitial />
      <ModalImportKeys />
      <ModalSignUp />
--- a/src/components/Modal/ModalAppDetails/ModalAppDetails.tsx
+++ b/src/components/Modal/ModalAppDetails/ModalAppDetails.tsx
@ -3,7 +3,7 @@ import { Button } from '@/shared/Button/Button'
 import { Input } from '@/shared/Input/Input'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
-import { Autocomplete, CircularProgress, Stack, Typography } from '@mui/material'
+import { Autocomplete, Stack, Typography } from '@mui/material'
 import { StyledInput } from './styled'
 import { FormEvent, useEffect, useState } from 'react'
 import { isEmptyString } from '@/utils/helpers/helpers'
@ -13,6 +13,7 @@ import { selectApps } from '@/store'
 import { dbi } from '@/modules/db'
 import { useEnqueueSnackbar } from '@/hooks/useEnqueueSnackbar'
 import { setApps } from '@/store/reducers/content.slice'
+import { LoadingSpinner } from '@/shared/LoadingSpinner/LoadingSpinner'

 export const ModalAppDetails = () => {
  const { getModalOpened, createHandleCloseReplace } = useModalSearchParams()
@ -118,7 +119,7 @@ export const ModalAppDetails = () => {
    }
  }

-  const isFormValid = !isEmptyString(url) && !isEmptyString(name) && !isEmptyString(icon)
+  const isFormValid = !isEmptyString(name)

  return (
    <Modal open={isModalOpened} onClose={handleCloseModal}>
@ -129,6 +130,13 @@ export const ModalAppDetails = () => {
          </Typography>
        </Stack>

+        <Input
+          label="Name"
+          fullWidth
+          placeholder="Enter app name"
+          onChange={handleInputChange('name')}
+          value={details.name}
+        />
        <Autocomplete
          options={[]}
          freeSolo
@ -149,13 +157,6 @@ export const ModalAppDetails = () => {
            )
          }}
        />
-        <Input
-          label="Name"
-          fullWidth
-          placeholder="Enter app name"
-          onChange={handleInputChange('name')}
-          value={details.name}
-        />
        <Input
          label="Icon"
          fullWidth
@ -165,7 +166,7 @@ export const ModalAppDetails = () => {
        />

        <Button varianttype="secondary" type="submit" fullWidth disabled={!isFormValid || isLoading}>
-          Save changes {isLoading && <CircularProgress sx={{ marginLeft: '0.5rem' }} size={'1rem'} />}
+          Save changes {isLoading && <LoadingSpinner />}
        </Button>
      </Stack>
    </Modal>
--- a/src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx
+++ b/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,15 +61,45 @@ export const ModalConfirmConnect = () => {
    },
  })

+  // 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)
-  // App doesn't exist yet!
+    // 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 (!isPopup && isModalOpened && (!isNpubExists /*|| !isAppNpubExists*/ || (pendingReqId && !isPendingReqIdExists))) {
-    closeModalAfterRequest()
+    // 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) => {
    if (!value) return undefined
@ -93,7 +131,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 +217,7 @@ export const ModalConfirmConnect = () => {
        </StyledToggleButtonsGroup>
        <Stack direction={'row'} gap={'1rem'}>
          <StyledButton onClick={disallow} varianttype="secondary">
-            Disallow
+            Ignore
          </StyledButton>
          <StyledButton fullWidth onClick={allow}>
            Connect
--- a/src/components/Modal/ModalConfirmEvent/ModalConfirmEvent.tsx
+++ b/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,13 +62,32 @@ export const ModalConfirmEvent: FC<ModalConfirmEventProps> = ({ confirmEventReqs
    },
  })

+  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])
+
+  if (isLoaded) {
    const isNpubExists = npub.trim().length && keys.some((key) => key.npub === npub)
    const isAppNpubExists = appNpub.trim().length && apps.some((app) => app.appNpub === appNpub)
-
-  if (isModalOpened && (!isNpubExists || !isAppNpubExists)) {
-    closeModalAfterRequest()
+    // 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)
  const { name, icon = '' } = triggerApp || {}
--- a/src/components/Modal/ModalEditName/ModalEditName.tsx
+++ b/src/components/Modal/ModalEditName/ModalEditName.tsx
@ -0,0 +1,174 @@
+import { CheckmarkIcon } from '@/assets'
+import { useEnqueueSnackbar } from '@/hooks/useEnqueueSnackbar'
+import { useModalSearchParams } from '@/hooks/useModalSearchParams'
+import { swicCall } from '@/modules/swic'
+import { Button } from '@/shared/Button/Button'
+import { Input } from '@/shared/Input/Input'
+import { LoadingSpinner } from '@/shared/LoadingSpinner/LoadingSpinner'
+import { Modal } from '@/shared/Modal/Modal'
+import { selectKeys } from '@/store'
+import { useAppSelector } from '@/store/hooks/redux'
+import { MODAL_PARAMS_KEYS } from '@/types/modal'
+import { DOMAIN } from '@/utils/consts'
+import { fetchNip05 } from '@/utils/helpers/helpers'
+import { Stack, Typography, useTheme } from '@mui/material'
+import { ChangeEvent, Fragment, useCallback, useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { useDebounce } from 'use-debounce'
+import { StyledSettingContainer } from './styled'
+import { SectionTitle } from '@/shared/SectionTitle/SectionTitle'
+
+export const ModalEditName = () => {
+  const keys = useAppSelector(selectKeys)
+  const notify = useEnqueueSnackbar()
+  const { npub = '' } = useParams<{ npub: string }>()
+
+  const key = keys.find((k) => k.npub === npub)
+  const name = key?.name || ''
+
+  const { palette } = useTheme()
+
+  const { getModalOpened, createHandleCloseReplace } = useModalSearchParams()
+  const isModalOpened = getModalOpened(MODAL_PARAMS_KEYS.EDIT_NAME)
+  const handleCloseModal = createHandleCloseReplace(MODAL_PARAMS_KEYS.EDIT_NAME)
+
+  const [enteredName, setEnteredName] = useState('')
+  const [debouncedName] = useDebounce(enteredName, 300)
+  const isNameEqual = debouncedName === name
+
+  const [receiverNpub, setReceiverNpub] = useState('')
+
+  const [isAvailable, setIsAvailable] = useState(true)
+  const [isChecking, setIsChecking] = useState(false)
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [isTransferLoading, setIsTransferLoading] = useState(false)
+
+  const checkIsUsernameAvailable = useCallback(async () => {
+    if (!debouncedName.trim().length) return undefined
+    try {
+      setIsChecking(true)
+      const npubNip05 = await fetchNip05(`${debouncedName}@${DOMAIN}`)
+      setIsAvailable(!npubNip05 || npubNip05 === npub)
+      setIsChecking(false)
+    } catch (error) {
+      setIsAvailable(true)
+      setIsChecking(false)
+    }
+  }, [debouncedName, npub])
+
+  useEffect(() => {
+    checkIsUsernameAvailable()
+  }, [checkIsUsernameAvailable])
+
+  useEffect(() => {
+    setEnteredName(name)
+    return () => {
+      if (isModalOpened) {
+        setEnteredName('')
+        setReceiverNpub('')
+      }
+    }
+    // eslint-disable-next-line
+  }, [isModalOpened])
+
+  const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => setEnteredName(e.target.value)
+
+  const handleReceiverNpubChange = (e: ChangeEvent<HTMLInputElement>) => setReceiverNpub(e.target.value)
+
+  const getInputHelperText = () => {
+    if (!debouncedName.trim().length || isNameEqual) return ''
+    if (isChecking) return 'Loading...'
+    if (!isAvailable) return 'Already taken'
+    return (
+      <Fragment>
+        <CheckmarkIcon /> Available
+      </Fragment>
+    )
+  }
+  const inputHelperText = getInputHelperText()
+
+  const getHelperTextColor = useCallback(() => {
+    if (!debouncedName || isChecking || isNameEqual) return palette.textSecondaryDecorate.main
+    return isAvailable ? palette.success.main : palette.error.main
+    // deps
+  }, [debouncedName, isAvailable, isChecking, isNameEqual, palette])
+
+  const isNpubExists = npub.trim().length && keys.some((key) => key.npub === npub)
+  if (isModalOpened && !isNpubExists) {
+    handleCloseModal()
+    return null
+  }
+
+  const isEditButtonDisabled = isNameEqual || !isAvailable || isChecking || isLoading || !enteredName.trim().length
+  const isTransferButtonDisabled = !name.length || !receiverNpub.trim().length || isTransferLoading
+
+  const handleEditName = async () => {
+    if (isEditButtonDisabled) return
+    try {
+      setIsLoading(true)
+      await swicCall('editName', npub, enteredName)
+      notify('Username updated!', 'success')
+      setIsLoading(false)
+    } catch (error: any) {
+      setIsLoading(false)
+      notify(error?.message || 'Failed to edit username!', 'error')
+    }
+  }
+
+  const handleTransferName = async () => {
+    if (isTransferButtonDisabled) return
+    try {
+      setIsTransferLoading(true)
+      await swicCall('transferName', npub, enteredName, receiverNpub)
+      notify('Username transferred!', 'success')
+      setIsTransferLoading(false)
+      setEnteredName('')
+    } catch (error: any) {
+      setIsTransferLoading(false)
+      notify(error?.message || 'Failed to transfer username!', 'error')
+    }
+  }
+
+  return (
+    <Modal open={isModalOpened} title="Username Settings" onClose={handleCloseModal}>
+      <Stack gap={'1rem'}>
+        <StyledSettingContainer>
+          <SectionTitle>Change name</SectionTitle>
+          <Input
+            label="User name"
+            fullWidth
+            placeholder="Enter a Username"
+            endAdornment={<Typography color={'#FFFFFFA8'}>@{DOMAIN}</Typography>}
+            helperText={inputHelperText}
+            onChange={handleNameChange}
+            value={enteredName}
+            helperTextProps={{
+              sx: {
+                '&.helper_text': {
+                  color: getHelperTextColor(),
+                },
+              },
+            }}
+          />
+          <Button fullWidth disabled={isEditButtonDisabled} onClick={handleEditName}>
+            Save name {isLoading && <LoadingSpinner />}
+          </Button>
+        </StyledSettingContainer>
+        <StyledSettingContainer>
+          <SectionTitle>Transfer name</SectionTitle>
+          <Input
+            label="Receiver npub"
+            fullWidth
+            placeholder="npub1..."
+            onChange={handleReceiverNpubChange}
+            value={receiverNpub}
+          />
+          <Button fullWidth onClick={handleTransferName} disabled={isTransferButtonDisabled}>
+            Transfer name
+          </Button>
+        </StyledSettingContainer>
+      </Stack>
+    </Modal>
+  )
+}
--- a/src/components/Modal/ModalEditName/styled.tsx
+++ b/src/components/Modal/ModalEditName/styled.tsx
@ -0,0 +1,10 @@
+import { Stack, StackProps, styled } from '@mui/material'
+
+export const StyledSettingContainer = styled((props: StackProps) => (
+  <Stack gap={'0.75rem'} component={'form'} {...props} />
+))(({ theme }) => ({
+  padding: '1rem',
+  borderRadius: '1rem',
+  background: theme.palette.background.default,
+  color: theme.palette.text.primary,
+}))
--- a/src/components/Modal/ModalImportKeys/ModalImportKeys.tsx
+++ b/src/components/Modal/ModalImportKeys/ModalImportKeys.tsx
@ -5,8 +5,7 @@ import { Button } from '@/shared/Button/Button'
 import { Input } from '@/shared/Input/Input'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
-import { CircularProgress, Stack, Typography, useTheme } from '@mui/material'
-import { StyledAppLogo } from './styled'
+import { Stack, Typography, useTheme } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import { useForm } from 'react-hook-form'
 import { FormInputType, schema } from './const'
@ -17,6 +16,8 @@ import { useDebounce } from 'use-debounce'
 import { fetchNip05 } from '@/utils/helpers/helpers'
 import { DOMAIN } from '@/utils/consts'
 import { CheckmarkIcon } from '@/assets'
+import { getPublicKey, nip19 } from 'nostr-tools'
+import { LoadingSpinner } from '@/shared/LoadingSpinner/LoadingSpinner'

 const FORM_DEFAULT_VALUES = {
  username: '',
@ -42,35 +43,73 @@ export const ModalImportKeys = () => {
    mode: 'onSubmit',
  })
  const [isLoading, setIsLoading] = useState(false)
-  const [isAvailable, setIsAvailable] = useState(false)
+  const [nameNpub, setNameNpub] = useState('')
+  const [isTakenByNsec, setIsTakenByNsec] = useState(false)
+  const [isBadNsec, setIsBadNsec] = useState(false)
  const enteredUsername = watch('username')
+  const enteredNsec = watch('nsec')
  const [debouncedUsername] = useDebounce(enteredUsername, 100)
+  const [debouncedNsec] = useDebounce(enteredNsec, 100)

  const checkIsUsernameAvailable = useCallback(async () => {
    if (!debouncedUsername.trim().length) return undefined
    const npubNip05 = await fetchNip05(`${debouncedUsername}@${DOMAIN}`)
-
-    setIsAvailable(!npubNip05)
+    setNameNpub(npubNip05 || '')
  }, [debouncedUsername])

  useEffect(() => {
    checkIsUsernameAvailable()
  }, [checkIsUsernameAvailable])

+  const checkNsecUsername = useCallback(async () => {
+    if (!debouncedNsec.trim().length) {
+      setIsTakenByNsec(false)
+      setIsBadNsec(false)
+      return
+    }
+    try {
+      const { type, data } = nip19.decode(debouncedNsec)
+      const ok = type === 'nsec'
+      setIsBadNsec(!ok)
+      if (ok) {
+        const npub = nip19.npubEncode(
+          // @ts-ignore
+          getPublicKey(data)
+        )
+        setIsTakenByNsec(!!nameNpub && nameNpub === npub)
+      } else {
+        setIsTakenByNsec(false)
+      }
+    } catch {
+      setIsBadNsec(true)
+      setIsTakenByNsec(false)
+      return
+    }
+    // eslint-disable-next-line
+  }, [debouncedNsec])
+
+  useEffect(() => {
+    checkNsecUsername()
+  }, [checkNsecUsername])
+
  const cleanUpStates = useCallback(() => {
    hidePassword()
    reset()
    setIsLoading(false)
-    setIsAvailable(false)
+    setNameNpub('')
+    setIsTakenByNsec(false)
+    setIsBadNsec(false)
  }, [reset, hidePassword])

  const notify = useEnqueueSnackbar()
  const navigate = useNavigate()

  const submitHandler = async (values: FormInputType) => {
-    if (isLoading || !isAvailable) return undefined
+    if (isLoading) return undefined
    try {
      const { nsec, username } = values
+      if (!nsec || !username) throw new Error('Enter username and nsec')
+      if (nameNpub && !isTakenByNsec) throw new Error('Name taken')
      setIsLoading(true)
      const k: any = await swicCall('importKey', username, nsec)
      notify('Key imported!', 'success')
@ -88,9 +127,11 @@ export const ModalImportKeys = () => {
    }
  }, [isModalOpened, cleanUpStates])

-  const getInputHelperText = () => {
+  const getNameHelperText = () => {
    if (!enteredUsername) return "Don't worry, username can be changed later."
-    if (!isAvailable) return 'Already taken'
+    if (isTakenByNsec) return 'Name matches your key'
+    if (isBadNsec) return 'Invalid nsec'
+    if (nameNpub) return 'Already taken'
    return (
      <>
        <CheckmarkIcon /> Available
@ -98,16 +139,24 @@ export const ModalImportKeys = () => {
    )
  }

-  const inputHelperText = getInputHelperText()
+  const getNsecHelperText = () => {
+    if (isBadNsec) return 'Invalid nsec'
+    return 'Keys stay on your device.'
+  }
+
+  const nameHelperText = getNameHelperText()
+  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"
@ -116,14 +165,14 @@ export const ModalImportKeys = () => {
          endAdornment={<Typography color={'#FFFFFFA8'}>@{DOMAIN}</Typography>}
          {...register('username')}
          error={!!errors.username}
-          helperText={inputHelperText}
+          helperText={nameHelperText}
          helperTextProps={{
            sx: {
              '&.helper_text': {
                color:
-                  enteredUsername && isAvailable
+                  enteredUsername && (isTakenByNsec || !nameNpub)
                    ? theme.palette.success.main
-                    : enteredUsername && !isAvailable
+                    : enteredUsername && nameNpub
                      ? theme.palette.error.main
                      : theme.palette.textSecondaryDecorate.main,
              },
@ -137,18 +186,18 @@ export const ModalImportKeys = () => {
          {...register('nsec')}
          error={!!errors.nsec}
          {...inputProps}
-          helperText="Keys stay on your device."
+          helperText={nsecHelperText}
          helperTextProps={{
            sx: {
              '&.helper_text': {
-                color: theme.palette.textSecondaryDecorate.main,
+                color: isBadNsec ? theme.palette.error.main : theme.palette.textSecondaryDecorate.main,
              },
            },
          }}
        />

        <Button type="submit" disabled={isLoading}>
-          Import key {isLoading && <CircularProgress sx={{ marginLeft: '0.5rem' }} size={'1rem'} />}
+          Import key {isLoading && <LoadingSpinner />}
        </Button>
      </Stack>
    </Modal>
--- a/src/components/Modal/ModalInitial/ModalInitial.tsx
+++ b/src/components/Modal/ModalInitial/ModalInitial.tsx
@ -1,43 +1,36 @@
-import React, { useEffect, useState } from 'react'
+// 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 { Fade, Stack } from '@mui/material'
-import { AppLink } from '@/shared/AppLink/AppLink'
+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 [showAdvancedContent, setShowAdvancedContent] = useState(false)

-  const handleShowAdvanced = () => {
-    setShowAdvancedContent(true)
-  }
+  // const handleShowAdvanced = () => {
+  //   setShowAdvancedContent(true)
+  // }

-  useEffect(() => {
-    return () => {
-      if (isModalOpened) {
-        setShowAdvancedContent(false)
-      }
-    }
-  }, [isModalOpened])
+  // useEffect(() => {
+  //   return () => {
+  //     if (isModalOpened) {
+  //       setShowAdvancedContent(false)
+  //     }
+  //   }
+  // }, [isModalOpened])

  return (
    <Modal open={isModalOpened} onClose={handleCloseModal}>
      <Stack paddingTop={'0.5rem'} gap={'1rem'}>
        <Button onClick={() => handleOpen(MODAL_PARAMS_KEYS.SIGN_UP)}>Sign up</Button>
        <Button onClick={() => handleOpen(MODAL_PARAMS_KEYS.LOGIN)}>Login</Button>
-        <AppLink title="Advanced" alignSelf={'center'} onClick={handleShowAdvanced} />
-
-        {showAdvancedContent && (
-          <Fade in>
        <Button onClick={() => handleOpen(MODAL_PARAMS_KEYS.IMPORT_KEYS)}>Import key</Button>
-          </Fade>
-        )}
      </Stack>
    </Modal>
  )
--- a/src/components/Modal/ModalLogin/ModalLogin.tsx
+++ b/src/components/Modal/ModalLogin/ModalLogin.tsx
@ -4,18 +4,18 @@ import { useModalSearchParams } from '@/hooks/useModalSearchParams'
 import { swicCall } from '@/modules/swic'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
-import { CircularProgress, Stack, Typography } from '@mui/material'
-import { StyledAppLogo } from './styled'
+import { Stack, Typography } from '@mui/material'
 import { Input } from '@/shared/Input/Input'
 import { Button } from '@/shared/Button/Button'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useForm } from 'react-hook-form'
 import { FormInputType, schema } from './const'
 import { yupResolver } from '@hookform/resolvers/yup'
 import { DOMAIN } from '@/utils/consts'
-import { fetchNip05 } from '@/utils/helpers/helpers'
+import { fetchNip05, fetchNpubNames } from '@/utils/helpers/helpers'
 import { usePassword } from '@/hooks/usePassword'
 import { dbi } from '@/modules/db'
+import { LoadingSpinner } from '@/shared/LoadingSpinner/LoadingSpinner'

 const FORM_DEFAULT_VALUES = {
  username: '',
@ -31,11 +31,14 @@ export const ModalLogin = () => {
  const navigate = useNavigate()
  const { hidePassword, inputProps } = usePassword()
  const [isLoading, setIsLoading] = useState(false)
+  const [searchParams] = useSearchParams()
+  const isPopup = searchParams.get('popup') === 'true'

  const {
    handleSubmit,
    reset,
    register,
+    setValue,
    formState: { errors },
  } = useForm<FormInputType>({
    defaultValues: FORM_DEFAULT_VALUES,
@ -78,7 +81,10 @@ export const ModalLogin = () => {
      notify(`Fetched ${k.npub}`, 'success')
      dbi.addSynced(k.npub)
      cleanUpStates()
-      navigate(`/key/${k.npub}`)
+      setTimeout(() => {
+        // give frontend time to read the new key first
+        navigate(`/key/${k.npub}${isPopup ? '?popup=true' : ''}`)
+      }, 300)
    } catch (error: any) {
      console.log('error', error)
      notify(error?.message || 'Something went wrong!', 'error')
@ -86,6 +92,22 @@ export const ModalLogin = () => {
    }
  }

+  useEffect(() => {
+    if (isModalOpened) {
+      const npub = searchParams.get('npub') || ''
+      const appNpub = searchParams.get('appNpub') || ''
+      if (isPopup && isModalOpened) {
+        swicCall('fetchPendingRequests', npub, appNpub)
+
+        fetchNpubNames(npub).then((names) => {
+          if (names.length) {
+            setValue('username', `${names[0]}@${DOMAIN}`)
+          }
+        })
+      }
+    }
+  }, [searchParams, isModalOpened, isPopup, setValue])
+
  useEffect(() => {
    return () => {
      if (isModalOpened) {
@ -96,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"
@ -118,11 +142,15 @@ export const ModalLogin = () => {
          {...register('password')}
          {...inputProps}
          error={!!errors.password}
+          helperText={'Password you set in Cloud Sync settings'}
        />
+
+        <Stack gap={'0.5rem'}>
          <Button type="submit" fullWidth disabled={isLoading}>
-          Add account {isLoading && <CircularProgress sx={{ marginLeft: '0.5rem' }} size={'1rem'} />}
+            Add account {isLoading && <LoadingSpinner />}
          </Button>
        </Stack>
+      </Stack>
    </Modal>
  )
 }
--- a/src/components/Modal/ModalSettings/ModalSettings.tsx
+++ b/src/components/Modal/ModalSettings/ModalSettings.tsx
@ -1,8 +1,7 @@
 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 { Box, CircularProgress, Stack, Typography } from '@mui/material'
+import { Box, Stack, Typography } from '@mui/material'
 import { StyledButton, StyledSettingContainer, StyledSynchedText } from './styled'
 import { SectionTitle } from '@/shared/SectionTitle/SectionTitle'
 import { CheckmarkIcon } from '@/assets'
@ -16,6 +15,8 @@ import { dbi } from '@/modules/db'
 import { usePassword } from '@/hooks/usePassword'
 import { useAppSelector } from '@/store/hooks/redux'
 import { selectKeys } from '@/store'
+import { isValidPassphase, isWeakPassphase } from '@/modules/keys'
+import { LoadingSpinner } from '@/shared/LoadingSpinner/LoadingSpinner'

 type ModalSettingsProps = {
  isSynced: boolean
@ -58,8 +59,9 @@ export const ModalSettings: FC<ModalSettingsProps> = ({ isSynced }) => {
  }

  const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setIsPasswordInvalid(false)
-    setEnteredPassword(e.target.value)
+    const password = e.target.value
+    setIsPasswordInvalid(!!password && !isValidPassphase(password))
+    setEnteredPassword(password)
  }

  const onClose = () => {
@ -76,7 +78,7 @@ export const ModalSettings: FC<ModalSettingsProps> = ({ isSynced }) => {
    e.preventDefault()
    setIsPasswordInvalid(false)

-    if (enteredPassword.trim().length < 6) {
+    if (!isValidPassphase(enteredPassword)) {
      return setIsPasswordInvalid(true)
    }
    try {
@ -114,18 +116,22 @@ export const ModalSettings: FC<ModalSettingsProps> = ({ isSynced }) => {
            {...inputProps}
            onChange={handlePasswordChange}
            value={enteredPassword}
-            helperText={isPasswordInvalid ? 'Invalid password' : ''}
            placeholder="Enter a password"
-            helperTextProps={{
-              sx: {
-                '&.helper_text': {
-                  color: 'red',
-                },
-              },
-            }}
            disabled={!isChecked}
          />
-          {isSynced ? (
+          {isPasswordInvalid ? (
+            <Typography variant="body2" color={'red'}>
+              Password must include 6+ English letters, numbers or punctuation marks.
+            </Typography>
+          ) : !!enteredPassword && isWeakPassphase(enteredPassword) ? (
+            <Typography variant="body2" color={'orange'}>
+              Weak password
+            </Typography>
+          ) : !!enteredPassword && !isPasswordInvalid ? (
+            <Typography variant="body2" color={'green'}>
+              Good password
+            </Typography>
+          ) : isSynced ? (
            <Typography variant="body2" color={'GrayText'}>
              To change your password, type a new one and sync.
            </Typography>
@ -136,10 +142,9 @@ export const ModalSettings: FC<ModalSettingsProps> = ({ isSynced }) => {
            </Typography>
          )}
          <StyledButton type="submit" fullWidth disabled={!isChecked}>
-            Sync {isLoading && <CircularProgress sx={{ marginLeft: '0.5rem' }} size={'1rem'} />}
+            Sync {isLoading && <LoadingSpinner mode="secondary" />}
          </StyledButton>
        </StyledSettingContainer>
-        <Button onClick={onClose}>Done</Button>
      </Stack>
    </Modal>
  )
--- a/src/components/Modal/ModalSignUp/ModalSignUp.tsx
+++ b/src/components/Modal/ModalSignUp/ModalSignUp.tsx
@ -2,9 +2,8 @@ import { useEnqueueSnackbar } from '@/hooks/useEnqueueSnackbar'
 import { useModalSearchParams } from '@/hooks/useModalSearchParams'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
-import { CircularProgress, Stack, Typography, useTheme } from '@mui/material'
+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'
@ -12,6 +11,7 @@ import { swicCall } from '@/modules/swic'
 import { useNavigate } from 'react-router-dom'
 import { DOMAIN } from '@/utils/consts'
 import { fetchNip05 } from '@/utils/helpers/helpers'
+import { LoadingSpinner } from '@/shared/LoadingSpinner/LoadingSpinner'

 export const ModalSignUp = () => {
  const { getModalOpened, createHandleCloseReplace } = useModalSearchParams()
@ -60,9 +60,13 @@ export const ModalSignUp = () => {
    try {
      setIsLoading(true)
      const k: any = await swicCall('generateKey', name)
-      notify(`Account created for "${name}"`, 'success')
-      navigate(`/key/${k.npub}`)
+      if (k.name) notify(`Account created for "${k.name}"`, 'success')
+      else notify(`Failed to assign name "${name}", try again`, 'error')
      setIsLoading(false)
+      setTimeout(() => {
+        // give frontend time to read the new key first
+        navigate(`/key/${k.npub}`)
+      }, 300)
    } catch (error: any) {
      notify(error?.message || 'Something went wrong!', 'error')
      setIsLoading(false)
@ -80,13 +84,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"
@ -109,10 +115,12 @@ export const ModalSignUp = () => {
            },
          }}
        />
+        <Stack gap={'0.5rem'}>
          <Button fullWidth type="submit" disabled={isLoading}>
-          Create account {isLoading && <CircularProgress sx={{ marginLeft: '0.5rem' }} size={'1rem'} />}
+            Create account {isLoading && <LoadingSpinner />}
          </Button>
        </Stack>
+      </Stack>
    </Modal>
  )
 }
--- a/src/components/ReloadBadge/ReloadBadge.tsx
+++ b/src/components/ReloadBadge/ReloadBadge.tsx
@ -0,0 +1,33 @@
+import { FC } from 'react'
+import { Collapse, Stack, Typography } from '@mui/material'
+import { useSearchParams } from 'react-router-dom'
+import { StyledAlert, StyledReloadButton } from './styled'
+
+const ReloadBadgeContent: FC = () => {
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const handleReload = () => {
+    searchParams.delete('reload')
+    setSearchParams(searchParams)
+    window.location.reload()
+  }
+  return (
+    <Collapse in>
+      <StyledAlert>
+        <Stack direction={'row'} className="content">
+          <Typography flex={1} className="title">
+            New version available, please reload the page!
+          </Typography>
+          <StyledReloadButton onClick={handleReload}>Reload</StyledReloadButton>
+        </Stack>
+      </StyledAlert>
+    </Collapse>
+  )
+}
+
+export const ReloadBadge = () => {
+  const [searchParams] = useSearchParams()
+  const open = searchParams.get('reload') === 'true'
+
+  return <>{open && <ReloadBadgeContent />}</>
+}
--- a/src/components/ReloadBadge/styled.tsx
+++ b/src/components/ReloadBadge/styled.tsx
@ -0,0 +1,50 @@
+import { AppButtonProps, Button } from '@/shared/Button/Button'
+import { Alert, AlertProps, styled } from '@mui/material'
+import RefreshIcon from '@mui/icons-material/Refresh'
+
+export const StyledAlert = styled((props: AlertProps) => (
+  <Alert {...props} variant="outlined" severity="info" classes={{ message: 'message' }} />
+))(() => {
+  return {
+    height: 'auto',
+    marginTop: '0.5rem',
+    alignItems: 'center',
+    '& .message': {
+      flex: 1,
+      overflow: 'initial',
+    },
+    '& .content': {
+      width: '100%',
+      alignItems: 'center',
+      gap: '1rem',
+    },
+    '& .title': {
+      display: '-webkit-box',
+      WebkitLineClamp: 3,
+      WebkitBoxOrient: 'vertical',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+    '@media screen and (max-width: 320px)': {
+      '& .title': {
+        fontSize: '14px',
+        WebkitLineClamp: 2,
+      },
+    },
+  }
+})
+
+export const StyledReloadButton = styled((props: AppButtonProps) => <Button startIcon={<RefreshIcon />} {...props} />)(
+  ({ theme }) => {
+    const isDarkTheme = theme.palette.mode === 'dark'
+    return {
+      padding: '0.25rem 1rem',
+      '&.button:is(:hover, :active, &)': {
+        background: isDarkTheme ? '#b8e7fb' : '#014361',
+      },
+      '@media screen and (max-width: 320px)': {
+        padding: '0.25rem 0.5rem',
+      },
+    }
+  }
+)
--- a/src/components/Warning/Warning.tsx
+++ b/src/components/Warning/Warning.tsx
@ -13,14 +13,8 @@ export const Warning: FC<WarningProps> = ({ hint, message, icon, ...restProps })
    <StyledContainer {...restProps}>
      {icon && <IconContainer>{icon}</IconContainer>}
      <Stack flex={1} direction={'column'} gap={'0.2rem'}>
-        <Typography noWrap>
-          {message}
-        </Typography>
-        {hint && (
-          <Typography>
-            {hint}
-          </Typography>
-        )}
+        <Typography noWrap>{message}</Typography>
+        {hint && <Typography>{hint}</Typography>}
      </Stack>
    </StyledContainer>
  )
--- a/src/hooks/useModalSearchParams.ts
+++ b/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 })
  }

--- a/src/layout/Header/Header.tsx
+++ b/src/layout/Header/Header.tsx
@ -1,7 +1,7 @@
-import { Avatar, Stack, Toolbar, Typography } from '@mui/material'
+import { Avatar, Stack, Toolbar, Typography, Divider, DividerProps, styled } from '@mui/material'
 import { StyledAppBar, StyledAppLogo, StyledAppName, StyledProfileContainer, StyledThemeButton } from './styled'
 import { Menu } from './components/Menu'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import { ProfileMenu } from './components/ProfileMenu'
 import { useProfile } from '@/hooks/useProfile'
 import DarkModeIcon from '@mui/icons-material/DarkMode'
@ -13,6 +13,8 @@ export const Header = () => {
  const themeMode = useAppSelector((state) => state.ui.themeMode)
  const navigate = useNavigate()
  const dispatch = useAppDispatch()
+  const [searchParams] = useSearchParams()
+  const needReload = searchParams.get('reload') === 'true'

  const { npub = '' } = useParams<{ npub: string }>()
  const { userName, userAvatar, avatarTitle } = useProfile(npub)
@ -23,14 +25,14 @@ export const Header = () => {
  }

  const isDarkMode = themeMode === 'dark'
-  const themeIcon = isDarkMode ? <DarkModeIcon htmlColor="#fff" /> : <LightModeIcon htmlColor="#000" />
+  const themeIcon = isDarkMode ? <LightModeIcon htmlColor="#fff" /> : <DarkModeIcon htmlColor="#000" />

  const handleChangeMode = () => {
    dispatch(setThemeMode({ mode: isDarkMode ? 'light' : 'dark' }))
  }

  return (
-    <StyledAppBar position="fixed">
+    <StyledAppBar position={needReload ? 'relative' : 'fixed'}>
      <Toolbar sx={{ padding: '12px' }}>
        <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} width={'100%'}>
          {showProfile && (
@ -56,6 +58,15 @@ export const Header = () => {
          {showProfile ? <ProfileMenu /> : <Menu />}
        </Stack>
      </Toolbar>
+      <StyledDivider />
    </StyledAppBar>
  )
 }
+
+const StyledDivider = styled((props: DividerProps) => <Divider {...props} />)({
+  position: 'absolute',
+  bottom: 0,
+  width: '100%',
+  left: 0,
+  height: '2px',
+})
--- a/src/layout/Header/components/ListItemProfile.tsx
+++ b/src/layout/Header/components/ListItemProfile.tsx
@ -7,23 +7,16 @@ type ListItemProfileProps = {
  onClickItem: () => void
 } & DbKey

-export const ListItemProfile: FC<ListItemProfileProps> = ({
-	onClickItem,
-	npub,
-}) => {
+export const ListItemProfile: FC<ListItemProfileProps> = ({ onClickItem, npub }) => {
  const { userName, userAvatar, avatarTitle } = useProfile(npub)
  return (
    <MenuItem sx={{ gap: '0.5rem' }} onClick={onClickItem}>
      <ListItemIcon>
-				<Avatar
-					src={userAvatar}
-					alt={userName}
-					sx={{ width: 36, height: 36 }}
-				>
+        <Avatar src={userAvatar} alt={userName} sx={{ width: 36, height: 36 }}>
          {avatarTitle}
        </Avatar>
      </ListItemIcon>
-			<Typography variant='body2' noWrap>
+      <Typography variant="body2" noWrap>
        {userName}
      </Typography>
    </MenuItem>
--- a/src/layout/Layout.tsx
+++ b/src/layout/Layout.tsx
@ -1,13 +1,17 @@
 import { FC } from 'react'
-import { Outlet } from 'react-router-dom'
+import { Outlet, useSearchParams } from 'react-router-dom'
 import { Header } from './Header/Header'
-import { Container, ContainerProps, Divider, DividerProps, styled } from '@mui/material'
+import { Container, ContainerProps, styled } from '@mui/material'
+import { ReloadBadge } from '@/components/ReloadBadge/ReloadBadge'

 export const Layout: FC = () => {
+  const [searchParams] = useSearchParams()
+  const needReload = searchParams.get('reload') === 'true'
+
  return (
-    <StyledContainer maxWidth="md">
+    <StyledContainer maxWidth="md" className={needReload ? 'reload' : ''}>
+      <ReloadBadge />
      <Header />
-      <StyledDivider />
      <main>
        <Outlet />
      </main>
@ -21,17 +25,11 @@ const StyledContainer = styled((props: ContainerProps) => <Container maxWidth="s
  flexDirection: 'column',
  paddingBottom: '1rem',
  position: 'relative',
-  '& > main': {
+  '&': {
    flex: 1,
    maxHeight: '100%',
+  },
+  '&:not(.reload) > main': {
    paddingTop: 'calc(66px + 1rem)',
  },
 })
-
-const StyledDivider = styled((props: DividerProps) => <Divider {...props} />)({
-  position: 'absolute',
-  top: '66px',
-  width: '100%',
-  left: 0,
-  height: '2px',
-})
--- a/src/modules/backend.ts
+++ b/src/modules/backend.ts
@ -1,24 +1,34 @@
-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
+  name?: string
  locked: boolean
 }

@ -28,16 +38,17 @@ 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
 }

 interface IAllowCallbackParams {
-  backend: NDKNip46Backend
+  backend: Nip46Backend
  npub: string
  id: string
  method: string
@ -46,86 +57,171 @@ interface IAllowCallbackParams {
  params?: any
 }

-class Nip04KeyHandlingStrategy implements IEventHandlingStrategy {
-  private privkey: string
-  private nip04 = new Nip04()
+class Watcher {
+  private ndk: NDK
+  private signer: NDKSigner
+  private onReply: (id: string) => void
+  private sub?: NDKSubscription

-  constructor(privkey: string) {
-    this.privkey = privkey
+  constructor(ndk: NDK, signer: NDKSigner, onReply: (id: string) => void) {
+    this.ndk = ndk
+    this.signer = signer
+    this.onReply = onReply
  }

-  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
+  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,
      }
-
-    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,
+    )
+    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)
    })
-    const allow = await this.allowCb({
-      backend: this.backend,
+  }
+
+  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)
+  }
+
+  protected async handleIncomingEvent(event: NDKEvent) {
+    const { id, method, params } = (await this.rpc.parseEvent(event)) as any
+    const remotePubkey = event.pubkey
+    let response: string | undefined
+
+    this.debug('incoming event', { id, method, params })
+
+    // validate signature explicitly
+    if (!verifySignature(event.rawEvent() as Event)) {
+      this.debug('invalid signature', event.rawEvent())
+      return
+    }
+
+    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
@ -137,20 +233,21 @@ export class NoauthBackend {
  private confirmBuffer: Pending[] = []
  private accessBuffer: DbPending[] = []
  private notifCallback: (() => void) | null = null
+  private pendingNpubEvents = new Map<string, NDKEvent[]>()
+  private ndk = new NDK({
+    explicitRelayUrls: NIP46_RELAYS,
+    enableOutboxModel: false,
+  })

  public constructor(swg: ServiceWorkerGlobalScope) {
    this.swg = swg
    this.keysModule = new Keys(swg.crypto.subtle)
+    this.ndk.connect()

    const self = this
    swg.addEventListener('activate', (event) => {
-      console.log('activate')
-      //			swg.addEventListener('activate', event => event.waitUntil(swg.clients.claim()));
-    })
-
-    swg.addEventListener('install', (event) => {
-      console.log('install')
-      //			swg.addEventListener('install', event => event.waitUntil(swg.skipWaiting()));
+      console.log('activate new sw worker')
+      this.reloadUI()
    })

    swg.addEventListener('push', (event) => {
@ -265,7 +362,7 @@ export class NoauthBackend {
    if (r.status !== 200 && r.status !== 201) {
      console.log('Fetch error', url, method, r.status)
      const body = await r.json()
-      throw new Error('Failed to fetch ' + url, { cause: body })
+      throw new Error('Failed to fetch ' + url, { cause: { body, status: r.status } })
    }

    return await r.json()
@ -400,13 +497,48 @@ export class NoauthBackend {
        })
      } catch (e: any) {
        console.log('error', e.cause)
-        if (e.cause && e.cause.minPow > pow) pow = e.cause.minPow
+        if (e.cause && e.cause.body && e.cause.body.minPow > pow) pow = e.cause.body.minPow
        else throw e
      }
    }
    throw new Error('Too many requests, retry later')
  }

+  private async sendDeleteNameToServer(npub: string, name: string) {
+    const body = JSON.stringify({
+      npub,
+      name,
+    })
+
+    const method = 'DELETE'
+    const url = `${NOAUTHD_URL}/name`
+
+    return this.sendPostAuthd({
+      npub,
+      url,
+      method,
+      body,
+    })
+  }
+
+  private async sendTransferNameToServer(npub: string, name: string, newNpub: string) {
+    const body = JSON.stringify({
+      npub,
+      name,
+      newNpub,
+    })
+
+    const method = 'PUT'
+    const url = `${NOAUTHD_URL}/name`
+
+    return this.sendPostAuthd({
+      npub,
+      url,
+      method,
+      body,
+    })
+  }
+
  private async sendTokenToServer(npub: string, token: string) {
    const body = JSON.stringify({
      npub,
@ -501,6 +633,7 @@ export class NoauthBackend {
    return {
      npub: k.npub,
      nip05: k.nip05,
+      name: k.name,
      locked: this.isLocked(k.npub),
    }
  }
@ -541,11 +674,16 @@ export class NoauthBackend {
    await this.startKey({ npub, sk })

    // assign nip05 before adding the key
-    // FIXME set name to db and if this call to 'send' fails
-    // then retry later
    if (!existingName && name && !name.includes('@')) {
      console.log('adding key', npub, name)
+      try {
        await this.sendNameToServer(npub, name)
+      } catch (e) {
+        console.log('create name failed', e)
+        // clear it
+        await dbi.editName(npub, '')
+        dbKey.name = ''
+      }
    }

    const sub = await this.swg.registration.pushManager.getSubscription()
@ -554,7 +692,9 @@ export class NoauthBackend {
    return this.keyInfo(dbKey)
  }

-  private getPerm(req: DbPending): string {
+  private getDecision(backend: Nip46Backend, req: DbPending): DECISION {
+    if (!(req.method in backend.handlers)) return DECISION.IGNORE
+
    const reqPerm = getReqPerm(req)
    const appPerms = this.perms.filter((p) => p.npub === req.npub && p.appNpub === req.appNpub)

@ -563,8 +703,18 @@ export class NoauthBackend {
    // non-exact next
    if (!perm) perm = appPerms.find((p) => isPackagePerm(p.perm, reqPerm))

+    if (perm) {
      console.log('req', req, 'perm', reqPerm, 'value', perm, appPerms)
-    return perm?.value || ''
+      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({
@ -573,16 +723,15 @@ export class NoauthBackend {
    appUrl,
    perms,
    appName = '',
-		appIcon = ''
+    appIcon = '',
  }: {
-		npub: string, 
-		appNpub: string, 
-		appUrl: string,
-		appName?: string,
-		appIcon?: string, 
+    npub: string
+    appNpub: string
+    appUrl: string
+    appName?: string
+    appIcon?: string
    perms: string[]
  }) {
-
    await dbi.addApp({
      appNpub: appNpub,
      npub: npub,
@ -618,19 +767,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 = {
@ -645,9 +794,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)
@ -700,35 +861,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(backend, 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(backend, 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)
@ -739,13 +905,13 @@ 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
-        const confirmMethod = method === 'connect' ? 'confirm-connect' : 'confirm-event'
+        const isConnect = method === 'connect'
+        const confirmMethod = isConnect ? 'confirm-connect' : 'confirm-event'
        const authUrl = `${self.swg.location.origin}/key/${npub}?${confirmMethod}=true&appNpub=${appNpub}&reqId=${id}&popup=true`
-//        const authUrl = `${self.swg.location.origin}/key/${npub}?popup=true`
        console.log('sending authUrl', authUrl, 'for', req)
        // NOTE: if you set 'Update on reload' in the Chrome SW console
        // then this message will cause a new tab opened by the peer,
@ -772,25 +938,28 @@ export class NoauthBackend {
    ndk.connect()

    const signer = new NDKPrivateKeySigner(sk) // PrivateKeySigner
-    const backend = new NDKNip46Backend(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
@ -814,11 +983,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)
@ -829,6 +1000,27 @@ export class NoauthBackend {
      r.on('connect', onConnect)
      r.on('disconnect', onDisconnect)
    }
+
+    const pendingEvents = this.pendingNpubEvents.get(npub)
+    if (pendingEvents) {
+      this.pendingNpubEvents.delete(npub)
+      for (const e of pendingEvents) {
+        backend.processEvent(e)
+      }
+    }
+  }
+
+  private async fetchPendingRequests(npub: string, appNpub: string) {
+    const { data: pubkey } = nip19.decode(npub)
+    const { data: appPubkey } = nip19.decode(appNpub)
+
+    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()])
  }

  public async unlock(npub: string) {
@ -945,7 +1137,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)
    }
  }

@ -963,6 +1155,36 @@ export class NoauthBackend {
    this.updateUI()
  }

+  private async editName(npub: string, name: string) {
+    const key = this.enckeys.find((k) => k.npub == npub)
+    if (!key) throw new Error('Npub not found')
+    if (key.name) {
+      try {
+        await this.sendDeleteNameToServer(npub, key.name)
+      } catch (e: any) {
+        if (e.cause && e.cause.status !== 404) throw e
+        console.log("Deleted name didn't exist")
+      }
+    }
+    if (name) {
+      await this.sendNameToServer(npub, name)
+    }
+    await dbi.editName(npub, name)
+    key.name = name
+    this.updateUI()
+  }
+
+  private async transferName(npub: string, name: string, newNpub: string) {
+    const key = this.enckeys.find((k) => k.npub === npub)
+    if (!key) throw new Error('Npub not found')
+    if (!name) throw new Error('Empty name')
+    if (key.name !== name) throw new Error('Name changed, please reload')
+    await this.sendTransferNameToServer(npub, key.name, newNpub)
+    await dbi.editName(npub, '')
+    key.name = ''
+    this.updateUI()
+  }
+
  private async enablePush(): Promise<boolean> {
    const options = {
      userVisibleOnly: true,
@ -1009,8 +1231,14 @@ export class NoauthBackend {
        result = await this.deleteApp(args[0])
      } else if (method === 'deletePerm') {
        result = await this.deletePerm(args[0])
+      } else if (method === 'editName') {
+        result = await this.editName(args[0], args[1])
+      } else if (method === 'transferName') {
+        result = await this.transferName(args[0], args[1], args[2])
      } else if (method === 'enablePush') {
        result = await this.enablePush()
+      } else if (method === 'fetchPendingRequests') {
+        result = await this.fetchPendingRequests(args[0], args[1])
      } else {
        console.log('unknown method from UI ', method)
      }
@ -1037,10 +1265,20 @@ export class NoauthBackend {
    }
  }

+  private async reloadUI() {
+    const clients = await this.swg.clients.matchAll({
+      includeUncontrolled: true,
+    })
+    console.log('reloadUI clients', clients.length)
+    for (const client of clients) {
+      client.postMessage({ result: 'reload' })
+    }
+  }
+
  public async onPush(event: any) {
    console.log('push', { data: event.data })
    // noop - we just need browser to launch this worker
    // FIXME use event.waitUntil and and unblock after we
-    // show a notification
+    // show a notification to avoid annoying the browser
  }
 }
--- a/src/modules/db.ts
+++ b/src/modules/db.ts
@ -89,6 +89,16 @@ export const dbi = {
      return []
    }
  },
+  editName: async (npub: string, name: string): Promise<void> => {
+    try {
+      await db.keys.where({ npub }).modify({
+        name,
+      })
+    } catch (error) {
+      console.log(`db editName error: ${error}`)
+      return
+    }
+  },
  getApp: async (appNpub: string) => {
    try {
      return await db.apps.get(appNpub)
--- a/src/modules/keys.ts
+++ b/src/modules/keys.ts
@ -21,11 +21,31 @@ const ALGO = 'aes-256-cbc'
 const IV_SIZE = 16

 // valid passwords are a limited ASCII only, see notes below
-const ASCII_REGEX = /^[A-Za-z0-9!@#$%^&*()]{4,}$/
+const ASCII_REGEX = /^[A-Za-z0-9!@#$%^&*()\-_]{6,}$/

 const ALGO_LOCAL = 'AES-CBC'
 const KEY_SIZE_LOCAL = 256

+export function isValidPassphase(passphrase: string): boolean {
+  return ASCII_REGEX.test(passphrase)
+}
+
+export function isWeakPassphase(passphrase: string): boolean {
+  const BIG_LETTER_REGEX = /[A-Z]+/
+  const SMALL_LETTER_REGEX = /[a-z]+/
+  const NUMBER_REGEX = /[0-9]+/
+  const PUNCT_REGEX = /[!@#$%^&*()\-_]+/
+  const big = BIG_LETTER_REGEX.test(passphrase) ? 1 : 0
+  const small = SMALL_LETTER_REGEX.test(passphrase) ? 1 : 0
+  const number = NUMBER_REGEX.test(passphrase) ? 1 : 0
+  const punct = PUNCT_REGEX.test(passphrase) ? 1 : 0
+  const base = big * 26 + small * 26 + number * 10 + punct * 12
+  const compl = Math.pow(base, passphrase.length)
+  const thresh = Math.pow(11, 14)
+  // console.log({ big, small, number, punct, base, compl, thresh });
+  return compl < thresh
+}
+
 export class Keys {
  subtle: any

@ -33,10 +53,6 @@ export class Keys {
    this.subtle = cryptoSubtle
  }

-  public isValidPassphase(passphrase: string): boolean {
-    return ASCII_REGEX.test(passphrase)
-  }
-
  public async generatePassKey(pubkey: string, passphrase: string): Promise<{ passkey: Buffer; pwh: string }> {
    const salt = Buffer.from(pubkey, 'hex')

@ -45,7 +61,7 @@ export class Keys {
    // We could use string.normalize() to make sure all JS implementations
    // are compatible, but since we're looking to make this thing a standard
    // then the simplest way is to exclude unicode and only work with ASCII
-    if (!this.isValidPassphase(passphrase)) throw new Error('Password must be 4+ ASCII chars')
+    if (!isValidPassphase(passphrase)) throw new Error('Password must be 4+ ASCII chars')

    return new Promise((ok, fail) => {
      // NOTE: we should use Argon2 or scrypt later, for now
--- a/src/modules/swic.ts
+++ b/src/modules/swic.ts
@ -1,10 +1,13 @@
-// service-worker client interface
+// service-worker client interface,
+// works on the frontend, not sw
 import * as serviceWorkerRegistration from '../serviceWorkerRegistration'

 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
+let onReload: (() => void) | null = null
+const queue: (() => Promise<void> | void)[] = []

 export async function swicRegister() {
  serviceWorkerRegistration.register({
@ -13,18 +16,24 @@ export async function swicRegister() {
      swr = registration
    },
    onError(e) {
-      console.log(`error ${e}`)
+      console.log('sw error', e)
+    },
+    onUpdate() {
+      // tell new SW that it should activate immediately
+      swr?.waiting?.postMessage({ type: 'SKIP_WAITING' })
    },
  })

-  navigator.serviceWorker.ready.then((r) => {
-    console.log('sw ready')
+  navigator.serviceWorker.ready.then(async (r) => {
+    console.log('sw ready, queue', queue.length)
    swr = r
    if (navigator.serviceWorker.controller) {
      console.log(`This page is currently controlled by: ${navigator.serviceWorker.controller}`)
    } else {
      console.log('This page is not currently controlled by a service worker.')
    }
+
+    while (queue.length) await queue.shift()!()
  })

  navigator.serviceWorker.addEventListener('message', (event) => {
@ -32,12 +41,23 @@ 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)

  if (!id) {
+    if (result === 'reload') {
+      if (onReload) onReload()
+    } else {
      if (onRender) onRender()
+    }
    return
  }

@ -57,6 +77,7 @@ export async function swicCall(method: string, ...args: any[]) {
  nextReqId++

  return new Promise((ok, rej) => {
+    const call = async () => {
      if (!swr || !swr.active) {
        rej(new Error('No active service worker'))
        return
@ -70,9 +91,17 @@ export async function swicCall(method: string, ...args: any[]) {
      }
      console.log('sending to SW', msg)
      swr.active.postMessage(msg)
+    }
+
+    if (swr && swr.active) call()
+    else queue.push(call)
  })
 }

 export function swicOnRender(cb: () => void) {
  onRender = cb
 }
+
+export function swicOnReload(cb: () => void) {
+  onReload = cb
+}
--- a/src/pages/AppPage/App.Page.tsx
+++ b/src/pages/AppPage/App.Page.tsx
@ -43,8 +43,10 @@ const AppPage = () => {

  const { icon = '', name = '', url = '' } = currentApp || {}
  const appDomain = getDomain(url)
-  const appName = name || appDomain || getShortenNpub(appNpub)
+  const shortAppNpub = getShortenNpub(appNpub)
+  const appName = name || appDomain || shortAppNpub
  const appAvatarTitle = getAppIconTitle(name || appDomain, appNpub)
+  const isAppNameExists = !!name || !!appDomain

  const { timestamp } = connectPerm || {}
  const connectedOn = connectPerm && timestamp ? `Connected at ${formatTimestampDate(timestamp)}` : 'Not connected'
@ -65,13 +67,20 @@ const AppPage = () => {
    <>
      <Stack maxHeight={'100%'} overflow={'auto'} alignItems={'flex-start'} height={'100%'}>
        <IOSBackButton onNavigate={() => navigate(`key/${npub}`)} />
-        <Stack marginBottom={'1rem'} direction={'row'} gap={'1rem'} width={'100%'}>
+        <Stack marginBottom={'1rem'} direction={'row'} gap={'1rem'} width={'100%'} alignItems={'center'}>
          <StyledAppIcon src={icon}>{appAvatarTitle}</StyledAppIcon>
          <Box flex={'1'} overflow={'hidden'}>
-            <Stack direction={'row'} alignItems={'center'} gap={'0.5rem'}>
-              <Typography variant="h4" noWrap flex={1}>
+            <Stack direction={'row'} alignItems={'flex-start'} gap={'0.5rem'} marginBottom={'0.5rem'}>
+              <Box display={'flex'} flexDirection={'column'} flex={1}>
+                <Typography variant="h4" noWrap>
                  {appName}
                </Typography>
+                {isAppNameExists && (
+                  <Typography noWrap display={'block'} variant="body1" color={'GrayText'}>
+                    {shortAppNpub}
+                  </Typography>
+                )}
+              </Box>
              <IconButton onClick={handleShowAppDetailsModal}>
                <MoreIcon />
              </IconButton>
--- a/src/pages/AppPage/components/Activities/ItemActivity.tsx
+++ b/src/pages/AppPage/components/Activities/ItemActivity.tsx
@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 import { DbHistory } from '@/modules/db'
 import { Box, IconButton, Typography } from '@mui/material'
 import { StyledActivityItem } from './styled'
@ -6,16 +6,17 @@ 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

-export const ItemActivity: FC<ItemActivityProps> = ({ allowed, method, timestamp }) => {
+export const ItemActivity: FC<ItemActivityProps> = (req) => {
+  const { allowed, timestamp } = req
  return (
    <StyledActivityItem>
      <Box display={'flex'} flexDirection={'column'} gap={'0.5rem'} flex={1}>
        <Typography flex={1} fontWeight={700}>
-          {ACTIONS[method] || method}
+          {getReqActionName(req)}
        </Typography>
        <Typography variant="body2">{formatTimestampDate(timestamp)}</Typography>
      </Box>
--- a/src/pages/CreatePage/Create.Page.tsx
+++ b/src/pages/CreatePage/Create.Page.tsx
@ -9,6 +9,7 @@ import { useModalSearchParams } from '@/hooks/useModalSearchParams'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
 import { useState } from 'react'
 import { getReferrerAppUrl } from '@/utils/helpers/helpers'
+import { LoadingSpinner } from '@/shared/LoadingSpinner/LoadingSpinner'

 const CreatePage = () => {
  const notify = useEnqueueSnackbar()
@ -17,6 +18,8 @@ const CreatePage = () => {

  const [searchParams] = useSearchParams()

+  const [isLoading, setIsLoading] = useState(false)
+
  const name = searchParams.get('name') || ''
  const token = searchParams.get('token') || ''
  const appNpub = searchParams.get('appNpub') || ''
@ -31,12 +34,14 @@ const CreatePage = () => {

  const handleClickAddAccount = async () => {
    try {
+      setIsLoading(true)
      const key: any = await swicCall('generateKey', name)

-      const appUrl = getReferrerAppUrl();
+      const appUrl = getReferrerAppUrl()

      console.log('Created', key.npub, 'app', appUrl)
      setCreated(true)
+      setIsLoading(false)

      handleOpen(MODAL_PARAMS_KEYS.CONFIRM_CONNECT, {
        search: {
@ -53,6 +58,7 @@ const CreatePage = () => {
      })
    } catch (error: any) {
      notify(error.message || error.toString(), 'error')
+      setIsLoading(false)
    }
  }

@ -88,7 +94,9 @@ const CreatePage = () => {
              <Typography textAlign={'left'} variant="h6" paddingTop="0.5em">
                Chosen name: <b>{nip05}</b>
              </Typography>
-              <GetStartedButton onClick={handleClickAddAccount}>Create account</GetStartedButton>
+              <GetStartedButton onClick={handleClickAddAccount}>
+                Create account {isLoading && <LoadingSpinner />}
+              </GetStartedButton>

              <Typography textAlign={'left'} variant="h5" paddingTop="1em">
                What you need to know:
--- a/src/pages/KeyPage/Key.Page.tsx
+++ b/src/pages/KeyPage/Key.Page.tsx
@ -1,6 +1,7 @@
+import { useCallback, useState } from 'react'
 import { useAppSelector } from '../../store/hooks/redux'
-import { Navigate, useParams } from 'react-router-dom'
-import { Stack } from '@mui/material'
+import { Navigate, useParams, useSearchParams } from 'react-router-dom'
+import { Box, IconButton, Stack } from '@mui/material'
 import { StyledIconButton } from './styled'
 import { SettingsIcon, ShareIcon } from '@/assets'
 import { Apps } from './components/Apps'
@ -18,13 +19,20 @@ import { useTriggerConfirmModal } from './hooks/useTriggerConfirmModal'
 import { useLiveQuery } from 'dexie-react-hooks'
 import { checkNpubSyncQuerier } from './utils'
 import { DOMAIN } from '@/utils/consts'
-import { useCallback } from 'react'
+import { InputCopyButton } from '@/shared/InputCopyButton/InputCopyButton'
+import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded'
+import { ModalEditName } from '@/components/Modal/ModalEditName/ModalEditName'

 const KeyPage = () => {
  const { npub = '' } = useParams<{ npub: string }>()
  const { keys, apps, pending, perms } = useAppSelector((state) => state.content)
+  const [searchParams] = useSearchParams()
+
+  const [isCheckingSync, setIsChecking] = useState(true)
+  const handleStopChecking = () => setIsChecking(false)
+
+  const isSynced = useLiveQuery(checkNpubSyncQuerier(npub, handleStopChecking), [npub], false)

-  const isSynced = useLiveQuery(checkNpubSyncQuerier(npub), [npub], false)
  const { handleOpen } = useModalSearchParams()
  const { handleEnableBackground, showWarning, isEnabling } = useBackgroundSigning()

@ -41,10 +49,21 @@ const KeyPage = () => {
  const { prepareEventPendings } = useTriggerConfirmModal(npub, pending, perms)

  const isKeyExists = npub.trim().length && key
+  const isPopup = searchParams.get('popup') === 'true'
+  // console.log({ isKeyExists, isPopup })
+
+  if (isPopup && !isKeyExists) {
+    searchParams.set('login', 'true')
+    searchParams.set('npub', npub)
+    const url = `/home?${searchParams.toString()}`
+    return <Navigate to={url} />
+  }
+
  if (!isKeyExists) return <Navigate to={`/home`} />

  const handleOpenConnectAppModal = () => handleOpen(MODAL_PARAMS_KEYS.CONNECT_APP)
  const handleOpenSettingsModal = () => handleOpen(MODAL_PARAMS_KEYS.SETTINGS)
+  const handleOpenEditNameModal = () => handleOpen(MODAL_PARAMS_KEYS.EDIT_NAME)

  return (
    <>
@ -55,13 +74,20 @@ const KeyPage = () => {
        <UserValueSection
          title="Your login"
          value={username}
-          copyValue={username}
+          endAdornment={
+            <Box display={'flex'} alignItems={'center'} gap={'0.25rem'}>
+              <IconButton onClick={handleOpenEditNameModal} color={username ? 'default' : 'error'}>
+                <MoreHorizRoundedIcon />
+              </IconButton>
+              <InputCopyButton value={username} />
+            </Box>
+          }
          explanationType={EXPLANATION_MODAL_KEYS.LOGIN}
        />
        <UserValueSection
          title="Your NPUB"
          value={npub}
-          copyValue={npub}
+          endAdornment={<InputCopyButton value={npub} />}
          explanationType={EXPLANATION_MODAL_KEYS.NPUB}
        />

@ -71,7 +97,11 @@ const KeyPage = () => {
            Connect app
          </StyledIconButton>

-          <StyledIconButton bgcolor_variant="secondary" onClick={handleOpenSettingsModal} withBadge={!isSynced}>
+          <StyledIconButton
+            bgcolor_variant="secondary"
+            onClick={handleOpenSettingsModal}
+            withBadge={!isCheckingSync && !isSynced}
+          >
            <SettingsIcon />
            Settings
          </StyledIconButton>
@ -79,11 +109,13 @@ const KeyPage = () => {

        <Apps apps={filteredApps} npub={npub} />
      </Stack>
+
      <ModalConnectApp />
      <ModalSettings isSynced={isSynced} />
      <ModalExplanation />
      <ModalConfirmConnect />
      <ModalConfirmEvent confirmEventReqs={prepareEventPendings} />
+      <ModalEditName />
    </>
  )
 }
--- a/src/pages/KeyPage/components/BackgroundSigningWarning.tsx
+++ b/src/pages/KeyPage/components/BackgroundSigningWarning.tsx
@ -16,12 +16,7 @@ export const BackgroundSigningWarning: FC<BackgroundSigningWarningProps> = ({ is
          Enable background service {isEnabling ? <CircularProgress size={'1.5rem'} /> : null}
        </Stack>
      }
-      hint={
-        <Typography variant='body2'>
-          Please allow notifications
-          for background operation. 
-        </Typography>
-      }
+      hint={<Typography variant="body2">Please allow notifications for background operation.</Typography>}
      icon={<AutoModeOutlinedIcon htmlColor="white" />}
      onClick={isEnabling ? undefined : onEnableBackSigning}
    />
--- a/src/pages/KeyPage/components/ItemApp.tsx
+++ b/src/pages/KeyPage/components/ItemApp.tsx
@ -9,9 +9,12 @@ type ItemAppProps = DbApp

 export const ItemApp: FC<ItemAppProps> = ({ npub, appNpub, icon, name, url }) => {
  const appDomain = getDomain(url)
-  const appName = name || appDomain || getShortenNpub(appNpub)
+  const shortAppNpub = getShortenNpub(appNpub)
+  const appName = name || appDomain || shortAppNpub
  const appIcon = icon || `https://${appDomain}/favicon.ico`
  const appAvatarTitle = getAppIconTitle(name || appDomain, appNpub)
+  const isAppNameExists = !!name || !!appDomain
+
  return (
    <StyledItemAppContainer
      direction={'row'}
@ -21,18 +24,18 @@ export const ItemApp: FC<ItemAppProps> = ({ npub, appNpub, icon, name, url }) =>
      component={Link}
      to={`/key/${npub}/app/${appNpub}`}
    >
-      <Avatar 
-        variant="rounded" 
-        sx={{ width: 56, height: 56 }} 
-        src={appIcon} 
-        alt={appName}
-      >
+      <Avatar variant="rounded" sx={{ width: 56, height: 56 }} src={appIcon} alt={appName}>
        {appAvatarTitle}
      </Avatar>
      <Stack>
-        <Typography noWrap display={'block'} variant="body2">
+        <Typography noWrap display={'block'} variant="body1">
          {appName}
        </Typography>
+        {isAppNameExists && (
+          <Typography noWrap display={'block'} variant="body2" color={'GrayText'}>
+            {shortAppNpub}
+          </Typography>
+        )}
        <Typography noWrap display={'block'} variant="caption" color={'GrayText'}>
          Basic actions
        </Typography>
--- a/src/pages/KeyPage/components/UserValueSection.tsx
+++ b/src/pages/KeyPage/components/UserValueSection.tsx
@ -3,7 +3,6 @@ import { Box, Stack } from '@mui/material'
 import { EXPLANATION_MODAL_KEYS, MODAL_PARAMS_KEYS } from '@/types/modal'
 import { SectionTitle } from '@/shared/SectionTitle/SectionTitle'
 import { AppLink } from '@/shared/AppLink/AppLink'
-import { InputCopyButton } from '@/shared/InputCopyButton/InputCopyButton'
 import { StyledInput } from '../styled'
 import { useModalSearchParams } from '@/hooks/useModalSearchParams'

@ -11,10 +10,10 @@ type UserValueSectionProps = {
  title: string
  value: string
  explanationType: EXPLANATION_MODAL_KEYS
-  copyValue: string
+  endAdornment?: React.ReactNode
 }

-const UserValueSection: FC<UserValueSectionProps> = ({ title, value, explanationType, copyValue }) => {
+const UserValueSection: FC<UserValueSectionProps> = ({ title, value, explanationType, endAdornment }) => {
  const { handleOpen } = useModalSearchParams()

  const handleOpenExplanationModal = (type: EXPLANATION_MODAL_KEYS) => {
@ -30,7 +29,7 @@ const UserValueSection: FC<UserValueSectionProps> = ({ title, value, explanation
        <SectionTitle>{title}</SectionTitle>
        <AppLink title="What is this?" onClick={() => handleOpenExplanationModal(explanationType)} />
      </Stack>
-      <StyledInput value={value} readOnly endAdornment={<InputCopyButton value={copyValue} />} />
+      <StyledInput value={value} readOnly endAdornment={endAdornment} />
    </Box>
  )
 }
--- a/src/pages/KeyPage/hooks/useTriggerConfirmModal.ts
+++ b/src/pages/KeyPage/hooks/useTriggerConfirmModal.ts
@ -3,6 +3,7 @@ import { DbPending, DbPerm } from '@/modules/db'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
 import { ACTION_TYPE } from '@/utils/consts'
 import { useCallback, useEffect, useRef } from 'react'
+import { useSearchParams } from 'react-router-dom'

 export type IPendingsByAppNpub = {
  [appNpub: string]: {
@ -18,6 +19,9 @@ type IShownConfirmModals = {
 export const useTriggerConfirmModal = (npub: string, pending: DbPending[], perms: DbPerm[]) => {
  const { handleOpen, getModalOpened } = useModalSearchParams()

+  const [searchParams] = useSearchParams()
+  const isPopup = searchParams.get('popup') === 'true'
+
  const isConfirmConnectModalOpened = getModalOpened(MODAL_PARAMS_KEYS.CONFIRM_CONNECT)
  const isConfirmEventModalOpened = getModalOpened(MODAL_PARAMS_KEYS.CONFIRM_EVENT)

@ -66,11 +70,19 @@ export const useTriggerConfirmModal = (npub: string, pending: DbPending[], perms
        search: {
          appNpub: req.appNpub,
          reqId: req.id,
+          popup: isPopup ? 'true' : '',
        },
      })
      break
    }
-  }, [connectPendings, filteredPendingReqs.length, handleOpen, isConfirmEventModalOpened, isConfirmConnectModalOpened])
+  }, [
+    connectPendings,
+    filteredPendingReqs.length,
+    handleOpen,
+    isConfirmEventModalOpened,
+    isConfirmConnectModalOpened,
+    isPopup,
+  ])

  const handleOpenConfirmEventModal = useCallback(() => {
    if (!filteredPendingReqs.length || connectPendings.length) return undefined
@ -86,11 +98,12 @@ export const useTriggerConfirmModal = (npub: string, pending: DbPending[], perms
      handleOpen(MODAL_PARAMS_KEYS.CONFIRM_EVENT, {
        search: {
          appNpub,
+          popup: isPopup ? 'true' : '',
        },
      })
      break
    }
-  }, [connectPendings.length, filteredPendingReqs.length, handleOpen, prepareEventPendings])
+  }, [connectPendings.length, filteredPendingReqs.length, handleOpen, prepareEventPendings, isPopup])

  useEffect(() => {
    handleOpenConfirmEventModal()
--- a/src/pages/KeyPage/styled.tsx
+++ b/src/pages/KeyPage/styled.tsx
@ -48,6 +48,7 @@ export const StyledEmptyAppsBox = styled(Box)(({ theme }) => {
      placeItems: 'center',
      color: theme.palette.text.primary,
      opacity: '0.6',
+      maxHeight: '100%',
    },
  }
 })
--- a/src/pages/KeyPage/utils.ts
+++ b/src/pages/KeyPage/utils.ts
@ -1,6 +1,7 @@
 import { db } from '@/modules/db'

-export const checkNpubSyncQuerier = (npub: string) => async () => {
+export const checkNpubSyncQuerier = (npub: string, onResolve: () => void) => async () => {
  const count = await db.syncHistory.where('npub').equals(npub).count()
+  if (!count) onResolve()
  return count > 0
 }
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@ -21,7 +21,6 @@ const AppRoutes = () => {
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route path="/" element={<Navigate to={'/home'} />} />
-          {/* <Route path='/welcome' element={<WelcomePage />} /> */}
          <Route path="/home" element={<HomePage />} />
          <Route path="/key/:npub" element={<KeyPage />} />
          <Route path="/key/:npub/app/:appNpub" element={<AppPage />} />
--- a/src/shared/Button/Button.tsx
+++ b/src/shared/Button/Button.tsx
@ -28,20 +28,20 @@ const StyledButton = styled(
      },
      color: theme.palette.text.primary,
      '&.disabled': {
-        opacity: 0.5,
+        background: `${theme.palette.backgroundSecondary.default}50`,
        cursor: 'not-allowed',
      },
    }
  }
  return {
    ...commonStyles,
-    '&.button:is(:hover, :active, &, .disabled)': {
+    '&.button:is(:hover, :active, &)': {
      background: theme.palette.primary.main,
    },
    color: theme.palette.text.secondary,
-    '&.disabled': {
+    '&.button.disabled': {
      color: theme.palette.text.secondary,
-      opacity: 0.5,
+      background: `${theme.palette.primary.main}75`,
      cursor: 'not-allowed',
    },
  }
--- a/src/shared/Input/Input.tsx
+++ b/src/shared/Input/Input.tsx
@ -26,7 +26,12 @@ export const Input = forwardRef<HTMLInputElement, AppInputProps>(
            {label}
          </FormLabel>
        ) : null}
-        <InputBase autoComplete="off" className="input" {...props} classes={{ error: 'error' }} ref={ref} />
+        <InputBase
+          autoComplete="off"
+          {...props}
+          classes={{ error: 'error', root: 'input_root', input: 'input', disabled: 'disabled' }}
+          ref={ref}
+        />
        {helperText ? (
          <FormHelperText {...helperTextProps} className="helper_text">
            {helperText}
@ -41,22 +46,22 @@ const StyledInputContainer = styled((props: BoxProps) => <Box {...props} />)(({
  const isDark = theme.palette.mode === 'dark'
  return {
    width: '100%',
-    '& > .input': {
+    '& > .input_root': {
      background: isDark ? '#000000A8' : '#000',
      color: theme.palette.common.white,
      padding: '0.75rem 1rem',
      borderRadius: '1rem',
      border: '0.3px solid #FFFFFF54',
      fontSize: '0.875rem',
-      '& input::placeholder': {
-        color: '#fff',
-      },
      '&.error': {
        border: '0.3px solid ' + theme.palette.error.main,
      },
    },
+    '& .input:is(.disabled, &)': {
+      WebkitTextFillColor: '#ffffff80',
+    },
    '& > .helper_text': {
-      margin: '0.5rem 1rem 0',
+      margin: '0.5rem 0.5rem 0',
      color: theme.palette.text.primary,
    },
    '& > .label': {
--- a/src/shared/LoadingSpinner/LoadingSpinner.tsx
+++ b/src/shared/LoadingSpinner/LoadingSpinner.tsx
@ -0,0 +1,17 @@
+import { CircularProgress, CircularProgressProps, styled } from '@mui/material'
+import { FC } from 'react'
+
+type LoadingSpinnerProps = CircularProgressProps & {
+  mode?: 'default' | 'secondary'
+}
+
+export const LoadingSpinner: FC<LoadingSpinnerProps> = (props) => {
+  return <StyledCircularProgress {...props} />
+}
+
+export const StyledCircularProgress = styled((props: LoadingSpinnerProps) => (
+  <CircularProgress size={'1rem'} {...props} />
+))(({ theme, mode = 'default' }) => ({
+  marginLeft: '0.5rem',
+  color: mode === 'default' ? theme.palette.text.secondary : theme.palette.text.primary,
+}))
--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -2,16 +2,7 @@ import { combineReducers, configureStore } from '@reduxjs/toolkit'
 import { contentSlice } from './reducers/content.slice'
 import { uiSlice } from './reducers/ui.slice'

-import {
-  persistStore,
-  persistReducer,
-  // FLUSH,
-  // REGISTER,
-  // REHYDRATE,
-  // PAUSE,
-  // PERSIST,
-  // PURGE,
-} from 'redux-persist'
+import { persistStore, persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage' // defaults to localStorage for web
 import memoizeOne from 'memoize-one'
 import isDeepEqual from 'lodash.isequal'
--- a/src/types/modal.ts
+++ b/src/types/modal.ts
@ -10,6 +10,7 @@ export enum MODAL_PARAMS_KEYS {
  CONFIRM_EVENT = 'confirm-event',
  ACTIVITY = 'activity',
  APP_DETAILS = 'app-details',
+  EDIT_NAME = 'edit-name',
 }

 export enum EXPLANATION_MODAL_KEYS {
--- a/src/utils/helpers/date.ts
+++ b/src/utils/helpers/date.ts
@ -3,7 +3,7 @@ import { format } from 'date-fns'
 export const formatTimestampDate = (timestamp: number) => {
  try {
    const date = new Date(timestamp)
-    const formattedDate = format(date, "dd-MM-yyyy HH:mm")
+    const formattedDate = format(date, 'dd-MM-yyyy HH:mm')
    return formattedDate
  } catch (error) {
    return ''
--- a/src/utils/helpers/helpers.ts
+++ b/src/utils/helpers/helpers.ts
@ -1,6 +1,6 @@
 import { nip19 } from 'nostr-tools'
-import { ACTIONS, ACTION_TYPE, DOMAIN, NIP46_RELAYS } from '../consts'
-import { DbPending, DbPerm } from '@/modules/db'
+import { ACTIONS, ACTION_TYPE, DOMAIN, NIP46_RELAYS, NOAUTHD_URL } from '../consts'
+import { DbHistory, DbPending, DbPerm } from '@/modules/db'
 import { MetaEvent } from '@/types/meta-event'

 export async function call(cb: () => any) {
@ -97,6 +97,21 @@ export async function fetchNip05(value: string, origin?: string) {
  }
 }

+export async function fetchNpubNames(npub: string) {
+  try {
+    const url = `${NOAUTHD_URL}/name?npub=${npub}`
+    const response = await fetch(url)
+    const names: {
+      names: string[]
+    } = await response.json()
+
+    return names.names
+  } catch (e) {
+    console.log('Failed to fetch names for', npub, 'error: ' + e)
+    return []
+  }
+}
+
 export const getDomain = (url: string) => {
  try {
    return new URL(url).hostname
@ -106,12 +121,11 @@ 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())
-    if (u.hostname != DOMAIN && !u.hostname.endsWith("."+DOMAIN))
-      return u.origin
+    if (u.hostname !== DOMAIN && !u.hostname.endsWith('.' + DOMAIN)) return u.origin
  } catch {}
  return ''
 }
@ -120,7 +134,7 @@ export const getAppIconTitle = (name: string | undefined, appNpub: string) => {
  return name ? name[0].toLocaleUpperCase() : appNpub.substring(4, 7)
 }

-export function getReqActionName(req: DbPending) {
+export function getReqActionName(req: DbPending | DbHistory) {
  const action = ACTIONS[req.method]
  if (req.method === 'sign_event') {
    const kind = getSignReqKind(req)
--- a/tsconfig.json
+++ b/tsconfig.json
@ -13,6 +13,7 @@
 		"moduleResolution": "node",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
+		"downlevelIteration": true,
 		"noEmit": true,
 		"jsx": "react-jsx",
 		"baseUrl": ".",
Author	SHA1	Message	Date
Bekbolsun	59c03d16eb	add reload badge on sw update	2024-02-19 21:41:10 +06:00
Bekbolsun	adbc7d455d	format code	2024-02-19 19:35:12 +06:00
artur	13f9bb13fd	Fix ignore unknown methods	2024-02-19 14:54:00 +03:00
Nostr.Band	b1dd6a5424	Merge pull request #98 from nostrband/feature/sw-update Feature/sw update	2024-02-19 14:14:37 +03:00
artur	e3feb8b5a2	Merge w/ develop	2024-02-19 14:12:51 +03:00
artur	06fa8ffbd7	Leave name empty if failed to assign at addKey	2024-02-19 14:10:15 +03:00
Nostr.Band	22753a8d89	Merge pull request #90 from nostrband/feature/hints add hints	2024-02-19 11:03:22 +03:00
artur	6d4a8b4f64	Remove logos from signup modals, move signup hints to the top of modals, fix signup hints	2024-02-19 11:01:34 +03:00
Nostr.Band	425f7277fc	Merge pull request #89 from nostrband/feature/edit-name Feature/edit name	2024-02-19 10:38:45 +03:00
artur	ba3775e6c6	Make username settings button red if name empty, add sections to username settings, UI fixes to username settings, remove qs params from username settings	2024-02-19 10:37:06 +03:00
artur	8c77b10b60	Add sw activation logic	2024-02-19 09:56:46 +03:00
Bekbolsun	b98339e177	add hints	2024-02-16 20:09:33 +06:00
Bekbolsun	4ad66c8711	add transfer name field	2024-02-16 19:47:25 +06:00
artur	a60fcd65b5	Show app npub if app only has url	2024-02-16 15:29:06 +03:00
Bekbolsun	6a04c3ec4b	Merge branch 'develop' of https://github.com/nostrband/noauth into feature/edit-name	2024-02-16 18:14:59 +06:00
Nostr.Band	93f6135baf	Merge pull request #86 from nostrband/fix/enable-push-signup-error Don't stop signup if enable-push failed	2024-02-16 15:08:20 +03:00
Bekbolsun	6d72cf1f82	implement edit username logic in edit modal	2024-02-16 17:59:59 +06:00
artur	3813cef605	Don't stop signup if enable-push failed	2024-02-16 14:55:35 +03:00
Nostr.Band	2e522b79ad	Merge pull request #84 from nostrband/main Merge w/ main	2024-02-16 14:48:48 +03:00
Nostr.Band	453a16690f	Merge pull request #83 from nostrband/feature/ignore Add ignore logic to stop interfering with replies from other instances	2024-02-16 14:48:16 +03:00
artur	46336d817f	Add ignore logic to stop interfering with replies from other instances	2024-02-16 14:46:36 +03:00
Nostr.Band	8ef8157c38	Merge pull request #81 from nostrband/feature/watcher Feature/watcher	2024-02-16 13:34:29 +03:00
Nostr.Band	4f00a014d0	Merge pull request #80 from nostrband/feature/watcher Feature/watcher	2024-02-16 13:33:50 +03:00
artur	a500a2e2a5	Merge w/ develop	2024-02-16 13:33:04 +03:00
artur	1e6bf8679c	Fix isLoading reset in popup confirms	2024-02-16 13:30:04 +03:00
Nostr.Band	04373e7991	Merge pull request #79 from nostrband/develop Show app npubs	2024-02-16 12:02:24 +03:00
Nostr.Band	6acd00ca3b	Merge pull request #78 from nostrband/refactor/display-app-npub show appNpub in apps list & in app details page	2024-02-16 11:45:44 +03:00
artur	6186f3dd3d	Make url optional, move name to top on app detail modal	2024-02-16 11:44:50 +03:00
artur	87ec23c737	Added watcher, deletes pending if watcher has concurrent reply, fixing popup closing issues	2024-02-16 11:28:02 +03:00
Bekbolsun	d199dcf9f7	Merge branch 'feature/edit-name' of https://github.com/nostrband/noauth into feature/edit-name	2024-02-16 14:22:30 +06:00
Bekbolsun	04c425c32c	show appNpub in apps list & in app details page	2024-02-16 14:20:51 +06:00
artur	0f28c80a15	Add editName and transferName to backend	2024-02-16 09:47:46 +03:00
Nostr.Band	34b516a1e3	Merge pull request #71 from nostrband/develop Many minor fixes in UI, spinners etc.	2024-02-15 09:28:45 +03:00
Nostr.Band	aac537c7a2	Merge pull request #67 from nostrband/refactor/edit-app-info Refactor/edit app info	2024-02-15 09:19:19 +03:00
Nostr.Band	40f4a9922a	Merge pull request #69 from nostrband/develop Fix redirect to confirm connect w/ popup=true after login	2024-02-15 09:00:24 +03:00
artur	2058b900ac	Fix redirect to confirm connect w/ popup=true after login	2024-02-15 08:58:49 +03:00
Nostr.Band	4b1f7564e7	Merge pull request #68 from nostrband/develop Add logic to confirm after login	2024-02-15 08:42:14 +03:00
Bekbolsun	32c097c1ee	make app icon url not required, swap change theme button icons, fix loading spinners render, add loading state to submit button on create page	2024-02-14 19:26:50 +06:00
artur	43e375efe9	Add logic to confirm after login	2024-02-14 16:15:50 +03:00
Bekbolsun	8b349c0350	fix warnings	2024-02-14 14:45:36 +06:00
Nostr.Band	83d5c013cf	Merge pull request #65 from nostrband/develop Show kind in sign-event in activity history, show import key without …	2024-02-14 11:40:45 +03:00
artur	0be2159efb	Show kind in sign-event in activity history, show import key without advanced section	2024-02-14 11:39:37 +03:00
Nostr.Band	e96edf90fe	Merge pull request #64 from nostrband/develop Fix - close confirm event popup after confirmed	2024-02-14 10:51:12 +03:00
artur	1a9dc0da82	Fix - close confirm event popup after confirmed	2024-02-14 10:50:05 +03:00
Nostr.Band	56e71219a5	Merge pull request #63 from nostrband/develop Readme	2024-02-14 10:17:22 +03:00
artur	676eaf6191	Move readme to readme.md	2024-02-14 10:16:39 +03:00
artur	97c3bcc16d	Add proper readme	2024-02-14 10:15:24 +03:00
Nostr.Band	67b6a3bfcf	Merge pull request #62 from nostrband/develop Develop	2024-02-14 09:58:06 +03:00
Nostr.Band	a5f7bf2a58	Merge pull request #61 from nostrband/feature/password-level Feature/password level	2024-02-14 09:56:27 +03:00
artur	0b56813ece	Add hyphen and underscore as valid password symbols, increase valid password to 6 chars, add password validity and strength indicator	2024-02-14 09:55:11 +03:00
Nostr.Band	8d205d9d93	Merge pull request #53 from nostrband/develop Allow import w/ existing name	2024-02-13 11:48:24 +03:00
artur	9a18e79862	Allow importing nsec w/ existing name, improve import form	2024-02-13 11:47:35 +03:00
Nostr.Band	ab2df05d50	Merge pull request #33 from nostrband/main Merge w/ main	2024-02-13 08:21:17 +03:00
Nostr.Band	163de16a84	Merge pull request #32 from nostrband/fix/referrer Don't use referrer if it's our domain	2024-02-13 08:20:39 +03:00
Nostr.Band	544ac18b59	Merge pull request #31 from nostrband/develop New logo	2024-02-12 14:56:23 +03:00
Nostr.Band	2551022d5e	Merge pull request #30 from nostrband/feature/app-logo change app logo	2024-02-12 14:33:13 +03:00
Nostr.Band	041b84eb0b	Merge pull request #29 from nostrband/develop Remove redirect to initial=true	2024-02-12 14:14:28 +03:00
artur	69166ff501	Remove redirect to initial=true	2024-02-12 14:13:50 +03:00
Nostr.Band	043e159e53	Merge pull request #28 from nostrband/develop Fix bad validity checks on confirm modal	2024-02-12 12:43:07 +03:00
Nostr.Band	d11cccec35	Merge pull request #27 from nostrband/develop Fix connect modal without pending request id	2024-02-12 10:58:28 +03:00
Nostr.Band	f45300583c	Merge pull request #26 from nostrband/develop Lots of minor fixes	2024-02-12 10:29:57 +03:00
Nostr.Band	977a4b5c93	Merge pull request #25 from nostrband/develop Fix enablePush at connectModal	2024-02-09 15:58:52 +03:00
Nostr.Band	6589a98d52	Merge pull request #24 from nostrband/develop Save app url from referrer on connect request by bunker url	2024-02-09 15:23:14 +03:00
Nostr.Band	e7e3b871e4	Merge pull request #22 from nostrband/develop Add proper app name to app page	2024-02-08 21:18:17 +03:00
Nostr.Band	063213cb89	Merge pull request #21 from nostrband/develop Add referrer log	2024-02-08 21:01:47 +03:00
Nostr.Band	0bf6fafb3e	Merge pull request #20 from nostrband/develop Add referrer parsing to connect modal	2024-02-08 20:38:05 +03:00
Nostr.Band	14a83ec721	Merge pull request #19 from nostrband/develop Add text to enable notifications, add account created message	2024-02-08 19:52:46 +03:00
Nostr.Band	dfb8889b9d	Merge pull request #18 from nostrband/develop Implement connectApp logic, add app url and icon	2024-02-08 14:53:10 +03:00
Nostr.Band	b24e3d31b0	Merge pull request #17 from nostrband/develop Fix app avatars, fix perm names in App page, fix time format	2024-02-08 08:52:25 +03:00
Nostr.Band	b27fb5ec07	Merge pull request #16 from nostrband/develop Develop	2024-02-07 10:46:04 +03:00