Merge pull request #118 from nostrband/develop

Change login button name to Login

config-overrides.js

@@ -3,37 +3,37 @@ const path = require('path')
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
 
 module.exports = function override(config) {
-	const fallback = config.resolve.fallback || {}
-	Object.assign(fallback, {
-		crypto: require.resolve('crypto-browserify'),
-		stream: require.resolve('stream-browserify'),
-		assert: require.resolve('assert'),
-		http: require.resolve('stream-http'),
-		https: require.resolve('https-browserify'),
-		os: require.resolve('os-browserify'),
-		url: require.resolve('url'),
-	})
-	config.resolve.fallback = fallback
-	config.plugins = (config.plugins || []).concat([
-		new webpack.ProvidePlugin({
-			process: 'process/browser',
-			Buffer: ['buffer', 'Buffer'],
-		}),
-	])
-	config.module.rules.unshift({
-		test: /\.m?js$/,
-		resolve: {
-			fullySpecified: false, // disable the behavior
-		},
-	})
-	// turns off the plugin that forbids importing from node_modules for the above-mentioned stuff
-	config.resolve.plugins = config.resolve.plugins.filter((plugin) => {
-		return !(plugin instanceof ModuleScopePlugin)
-	})
+  const fallback = config.resolve.fallback || {}
+  Object.assign(fallback, {
+    crypto: require.resolve('crypto-browserify'),
+    stream: require.resolve('stream-browserify'),
+    assert: require.resolve('assert'),
+    http: require.resolve('stream-http'),
+    https: require.resolve('https-browserify'),
+    os: require.resolve('os-browserify'),
+    url: require.resolve('url'),
+  })
+  config.resolve.fallback = fallback
+  config.plugins = (config.plugins || []).concat([
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+  ])
+  config.module.rules.unshift({
+    test: /\.m?js$/,
+    resolve: {
+      fullySpecified: false, // disable the behavior
+    },
+  })
+  // turns off the plugin that forbids importing from node_modules for the above-mentioned stuff
+  config.resolve.plugins = config.resolve.plugins.filter((plugin) => {
+    return !(plugin instanceof ModuleScopePlugin)
+  })
 
-	config.resolve.alias = {
-		'@': path.resolve(__dirname, 'src'),
-	}
+  config.resolve.alias = {
+    '@': path.resolve(__dirname, 'src'),
+  }
 
-	return config
+  return config
 }

package-lock.json

@@ -41,6 +41,7 @@
         "redux-persist": "^6.0.0",
         "typescript": "^5.3.2",
         "use-debounce": "^10.0.0",
+        "usehooks-ts": "^2.14.0",
         "web-vitals": "^2.1.4",
         "workbox-background-sync": "^6.6.0",
         "workbox-broadcast-update": "^6.6.0",
@@ -17214,6 +17215,20 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.14.0.tgz",
+      "integrity": "sha512-jnhrjTRJoJS7cFxz63tRYc5mzTKf/h+Ii8P0PDHymT9qDe4ZA2/gzDRmDR4WGausg5X8wMIdghwi3BBCN9JKow==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=16.15.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17 || ^18"
+      }
+    },
     "node_modules/utf-8-validate": {
       "version": "5.0.10",
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
@@ -30591,6 +30606,14 @@
       "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
       "requires": {}
     },
+    "usehooks-ts": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.14.0.tgz",
+      "integrity": "sha512-jnhrjTRJoJS7cFxz63tRYc5mzTKf/h+Ii8P0PDHymT9qDe4ZA2/gzDRmDR4WGausg5X8wMIdghwi3BBCN9JKow==",
+      "requires": {
+        "lodash.debounce": "^4.0.8"
+      }
+    },
     "utf-8-validate": {
       "version": "5.0.10",
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",

package.json

@@ -36,6 +36,7 @@
     "redux-persist": "^6.0.0",
     "typescript": "^5.3.2",
     "use-debounce": "^10.0.0",
+    "usehooks-ts": "^2.14.0",
     "web-vitals": "^2.1.4",
     "workbox-background-sync": "^6.6.0",
     "workbox-broadcast-update": "^6.6.0",

public/index.html

@@ -10,12 +10,6 @@
     <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

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": [
     {

src/App.tsx

@@ -1,6 +1,6 @@
 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'
@@ -9,16 +9,20 @@ 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 { useSessionStorage } from 'usehooks-ts'
+import { RELOAD_STORAGE_KEY } from './utils/consts'
 
 function App() {
   const [render, setRender] = useState(0)
   const dispatch = useAppDispatch()
 
+  // eslint-disable-next-line
+  const [_, setNeedReload] = useSessionStorage(RELOAD_STORAGE_KEY, false)
+
   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 () => {
@@ -55,7 +59,6 @@ function App() {
     // rerender
     //		setRender((r) => r + 1)
 
-    // if (!keys.length) handleOpen(MODAL_PARAMS_KEYS.INITIAL)
     // eslint-disable-next-line
   }, [dispatch])
 
@@ -77,6 +80,24 @@ function App() {
     setRender((r) => r + 1)
   })
 
+  // subscribe to service worker updates
+  swicOnReload(() => {
+    console.log('reload')
+    setNeedReload(true)
+  })
+
+  useEffect(() => {
+    const handleBeforeUnload = () => {
+      setNeedReload(false)
+    }
+
+    window.addEventListener('beforeunload', handleBeforeUnload)
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload)
+    }
+    // eslint-disable-next-line
+  }, [])
+
   return (
     <>
       <AppRoutes />

src/components/Modal/ModalAppDetails/ModalAppDetails.tsx

@@ -68,7 +68,6 @@ export const ModalAppDetails = () => {
     if (isEmptyString(url)) return
 
     try {
-
       const u = new URL(url)
 
       if (isEmptyString(name)) setDetails((prev) => ({ ...prev, name: u.hostname }))

src/components/Modal/ModalAppDetails/styled.tsx

@@ -1,4 +1,5 @@
-import { AppInputProps, Input } from '@/shared/Input/Input'
+import { Input } from '@/shared/Input/Input'
+import { AppInputProps } from '@/shared/Input/types'
 import { styled } from '@mui/material'
 import { forwardRef } from 'react'
 

src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx

@@ -73,11 +73,11 @@ export const ModalConfirmConnect = () => {
   useEffect(() => {
     if (isModalOpened) {
       if (isPopup) {
-        console.log("waiting for sw")
+        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")
+          console.log('waiting for sw done')
           setTimeout(() => setIsLoaded(true), 500)
         })
       } else {
@@ -95,8 +95,9 @@ export const ModalConfirmConnect = () => {
     const isPendingReqIdExists = pendingReqId.trim().length && pending.some((p) => p.id === pendingReqId)
     // console.log("pending", {isModalOpened, isPendingReqIdExists, isNpubExists, /*isAppNpubExists,*/ pendingReqId, pending});
     if (isModalOpened && (!isNpubExists /*|| !isAppNpubExists*/ || (pendingReqId && !isPendingReqIdExists))) {
-      if (isPopup) window.close()
-      else closeModalAfterRequest()
+      // if (isPopup) window.close()
+      // else closeModalAfterRequest()
+      if (!isPopup) closeModalAfterRequest()
       return null
     }
   }
@@ -131,7 +132,7 @@ export const ModalConfirmConnect = () => {
       } catch (e: any) {
         console.log('error', e)
         notify('Please enable Notifications in website settings!', 'error')
-        return
+        // keep going
       }
 
       try {
@@ -169,7 +170,9 @@ export const ModalConfirmConnect = () => {
   if (isPopup) {
     document.addEventListener('visibilitychange', () => {
       if (document.visibilityState === 'hidden') {
-        disallow()
+        // FIXME it should be 'ignore once',
+        // not 'disallow & remember' - this is too strict
+        // disallow()
       }
     })
   }
@@ -194,11 +197,11 @@ export const ModalConfirmConnect = () => {
           >
             {appAvatarTitle}
           </Avatar>
-          <Box>
-            <Typography variant="h5" fontWeight={600}>
+          <Box overflow={'auto'}>
+            <Typography variant="h5" fontWeight={600} noWrap>
               {appName}
             </Typography>
-            <Typography variant="body2" color={'GrayText'}>
+            <Typography variant="body2" color={'GrayText'} noWrap>
               New app would like to connect
             </Typography>
           </Box>

src/components/Modal/ModalConfirmConnect/styled.tsx

@@ -21,5 +21,8 @@ export const StyledToggleButtonsGroup = styled((props: ToggleButtonGroupProps) =
       border: 'initial',
       borderRadius: '1rem',
     },
+    '@media screen and (max-width: 320px)': {
+      marginBottom: '0.25rem',
+    },
   })
 )

src/components/Modal/ModalConfirmConnect/сomponents/ActionToggleButton.tsx

@@ -4,22 +4,18 @@ import { StyledToggleButton } from './styled'
 
 type ActionToggleButtonProps = ToggleButtonProps & {
   description?: string
-  hasinfo?: boolean
 }
 
-export const ActionToggleButton: FC<ActionToggleButtonProps> = ({ hasinfo = false, ...props }) => {
+export const ActionToggleButton: FC<ActionToggleButtonProps> = (props) => {
   const { title, description = '' } = props
   return (
     <StyledToggleButton {...props}>
-      <Typography variant="body2">{title}</Typography>
+      <Typography variant="body2" noWrap className="title">
+        {title}
+      </Typography>
       <Typography className="description" variant="caption" color={'GrayText'}>
         {description}
       </Typography>
-      {hasinfo && (
-        <Typography className="info" color={'GrayText'}>
-          Info
-        </Typography>
-      )}
     </StyledToggleButton>
   )
 }

src/components/Modal/ModalConfirmConnect/сomponents/styled.tsx

@@ -29,4 +29,17 @@ export const StyledToggleButton = styled((props: ToggleButtonProps) => (
     fontSize: '10px',
     fontWeight: 500,
   },
+  '@media screen and (max-width: 320px)': {
+    '& .title': {
+      fontSize: '14px',
+    },
+    '& .description': {
+      margin: '0.25rem 0',
+      display: '-webkit-box',
+      WebkitLineClamp: 3,
+      WebkitBoxOrient: 'vertical',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+  },
 }))

src/components/Modal/ModalConfirmEvent/ModalConfirmEvent.tsx

@@ -83,8 +83,10 @@ export const ModalConfirmEvent: FC<ModalConfirmEventProps> = ({ confirmEventReqs
     const isAppNpubExists = appNpub.trim().length && apps.some((app) => app.appNpub === appNpub)
     // console.log("confirm event", { confirmEventReqs, isModalOpened, isNpubExists, isAppNpubExists });
     if (isModalOpened && (!currentAppPendingReqs.length || !isNpubExists || !isAppNpubExists)) {
-      if (isPopup) window.close()
-      else closeModalAfterRequest()
+      // if (isPopup) window.close()
+      // else closeModalAfterRequest()
+      if (!isPopup)
+        closeModalAfterRequest()
       return null
     }
   }

src/components/Modal/ModalEditName/ModalEditName.tsx

@@ -13,7 +13,7 @@ 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, useSearchParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 import { useDebounce } from 'use-debounce'
 import { StyledSettingContainer } from './styled'
 import { SectionTitle } from '@/shared/SectionTitle/SectionTitle'
@@ -55,7 +55,7 @@ export const ModalEditName = () => {
       setIsAvailable(true)
       setIsChecking(false)
     }
-  }, [debouncedName])
+  }, [debouncedName, npub])
 
   useEffect(() => {
     checkIsUsernameAvailable()

src/components/Modal/ModalEditName/styled.tsx

@@ -1,4 +1,4 @@
-import { Stack, StackProps, styled } from "@mui/material";
+import { Stack, StackProps, styled } from '@mui/material'
 
 export const StyledSettingContainer = styled((props: StackProps) => (
   <Stack gap={'0.75rem'} component={'form'} {...props} />
@@ -7,4 +7,4 @@ export const StyledSettingContainer = styled((props: StackProps) => (
   borderRadius: '1rem',
   background: theme.palette.background.default,
   color: theme.palette.text.primary,
-}))
+}))

src/components/Modal/ModalImportKeys/ModalImportKeys.tsx

@@ -6,7 +6,6 @@ import { Input } from '@/shared/Input/Input'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
 import { Stack, Typography, useTheme } from '@mui/material'
-import { StyledAppLogo } from './styled'
 import { useNavigate } from 'react-router-dom'
 import { useForm } from 'react-hook-form'
 import { FormInputType, schema } from './const'
@@ -19,6 +18,7 @@ import { DOMAIN } from '@/utils/consts'
 import { CheckmarkIcon } from '@/assets'
 import { getPublicKey, nip19 } from 'nostr-tools'
 import { LoadingSpinner } from '@/shared/LoadingSpinner/LoadingSpinner'
+import { HeadingContainer } from './styled'
 
 const FORM_DEFAULT_VALUES = {
   username: '',
@@ -149,14 +149,16 @@ export const ModalImportKeys = () => {
   const nsecHelperText = getNsecHelperText()
 
   return (
-    <Modal open={isModalOpened} onClose={handleCloseModal}>
-      <Stack gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
-        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
-          <StyledAppLogo />
+    <Modal open={isModalOpened} onClose={handleCloseModal} withCloseButton={false}>
+      <Stack paddingTop={'1rem'} gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
+        <HeadingContainer>
           <Typography fontWeight={600} variant="h5">
             Import key
           </Typography>
-        </Stack>
+          <Typography noWrap variant="body2" color={'GrayText'}>
+            Bring your existing Nostr keys to Nsec.app
+          </Typography>
+        </HeadingContainer>
         <Input
           label="Choose a username"
           fullWidth

src/components/Modal/ModalImportKeys/styled.tsx

@@ -1,5 +1,5 @@
 import { AppLogo } from '@/assets'
-import { Box, styled } from '@mui/material'
+import { Box, Stack, StackProps, styled } from '@mui/material'
 
 export const StyledAppLogo = styled((props) => (
   <Box {...props}>
@@ -12,3 +12,14 @@ export const StyledAppLogo = styled((props) => (
   display: 'grid',
   placeItems: 'center',
 }))
+
+export const HeadingContainer = styled((props: StackProps) => <Stack {...props} />)(() => ({
+  gap: '0.2rem',
+  padding: '0 1rem',
+  alignSelf: 'flex-start',
+  overflow: 'auto',
+  width: '100%',
+  '@media screen and (max-width: 320px)': {
+    padding: '0 0.75rem',
+  },
+}))

src/components/Modal/ModalLogin/ModalLogin.tsx

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

src/components/Modal/ModalSignUp/ModalSignUp.tsx

@@ -4,7 +4,6 @@ import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
 import { Stack, Typography, useTheme } from '@mui/material'
 import React, { ChangeEvent, useEffect, useState } from 'react'
-import { StyledAppLogo } from './styled'
 import { Input } from '@/shared/Input/Input'
 import { Button } from '@/shared/Button/Button'
 import { CheckmarkIcon } from '@/assets'
@@ -61,7 +60,8 @@ export const ModalSignUp = () => {
     try {
       setIsLoading(true)
       const k: any = await swicCall('generateKey', name)
-      notify(`Account created for "${name}"`, 'success')
+      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
@@ -84,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"
@@ -113,9 +115,11 @@ export const ModalSignUp = () => {
             },
           }}
         />
-        <Button fullWidth type="submit" disabled={isLoading}>
-          Create account {isLoading && <LoadingSpinner />}
-        </Button>
+        <Stack gap={'0.5rem'}>
+          <Button fullWidth type="submit" disabled={isLoading}>
+            Create account {isLoading && <LoadingSpinner />}
+          </Button>
+        </Stack>
       </Stack>
     </Modal>
   )

src/components/ReloadBadge/ReloadBadge.tsx

@@ -0,0 +1,33 @@
+import { FC, memo, useCallback } from 'react'
+import { Stack, Typography } from '@mui/material'
+import { StyledAlert, StyledReloadButton } from './styled'
+import { useSessionStorage } from 'usehooks-ts'
+import { RELOAD_STORAGE_KEY } from '@/utils/consts'
+
+type ReloadBadgeContentProps = {
+  onReload: () => void
+}
+
+const ReloadBadgeContent: FC<ReloadBadgeContentProps> = memo(({ onReload }) => {
+  return (
+    <StyledAlert>
+      <Stack direction={'row'} className="content">
+        <Typography flex={1} className="title">
+          New version available!
+        </Typography>
+        <StyledReloadButton onClick={onReload}>Reload</StyledReloadButton>
+      </Stack>
+    </StyledAlert>
+  )
+})
+
+export const ReloadBadge = () => {
+  const [needReload, setNeedReload] = useSessionStorage(RELOAD_STORAGE_KEY, false)
+
+  const handleReload = useCallback(() => {
+    setNeedReload(false)
+    window.location.reload()
+  }, [setNeedReload])
+
+  return <>{needReload && <ReloadBadgeContent onReload={handleReload} />}</>
+}

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',
+      },
+    }
+  }
+)

src/components/Warning/Warning.tsx

@@ -1,27 +1,27 @@
 import { FC, ReactNode } from 'react'
 import { IconContainer, StyledContainer } from './styled'
-import { BoxProps, Stack, Typography } from '@mui/material'
+import { BoxProps, Typography } from '@mui/material'
 
 type WarningProps = {
   message?: string | ReactNode
-  hint?: string | ReactNode
   icon?: ReactNode
 } & BoxProps
 
-export const Warning: FC<WarningProps> = ({ hint, message, icon, ...restProps }) => {
+export const Warning: FC<WarningProps> = ({ message, icon, ...restProps }) => {
+  const renderMessage = () => {
+    if (typeof message === 'string') {
+      return (
+        <Typography noWrap width={'100%'}>
+          {message}
+        </Typography>
+      )
+    }
+    return message
+  }
   return (
     <StyledContainer {...restProps}>
       {icon && <IconContainer>{icon}</IconContainer>}
-      <Stack flex={1} direction={'column'} gap={'0.2rem'}>
-        <Typography noWrap>
-          {message}
-        </Typography>
-        {hint && (
-          <Typography>
-            {hint}
-          </Typography>
-        )}
-      </Stack>
+      {renderMessage()}
     </StyledContainer>
   )
 }

src/components/Warning/styled.tsx

@@ -7,13 +7,14 @@ export const StyledContainer = styled((props: BoxProps) => <Box {...props} />)((
     padding: '0.5rem',
     display: 'flex',
     alignItems: 'center',
-    gap: '1rem',
+    gap: '0.5rem',
     cursor: 'pointer',
   }
 })
 
 export const IconContainer = styled((props: BoxProps) => <Box {...props} />)(() => ({
   width: '40px',
+  minWidth: '40px',
   height: '40px',
   borderRadius: '50%',
   background: 'grey',

src/hooks/useProfile.ts

@@ -14,7 +14,7 @@ export const useProfile = (npub: string) => {
   const [profile, setProfile] = useState<MetaEvent | null>(null)
   const currentKey = useAppSelector((state) => selectKeyByNpub(state, npub))
 
-  const userName = getProfileUsername(profile) || currentKey?.name
+  const userName = currentKey?.name || getProfileUsername(profile)
   const userAvatar = profile?.info?.picture || ''
   const avatarTitle = getFirstLetter(userName)
 

src/index.css

@@ -1,17 +1,63 @@
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter ExtraLight'),
+    local('Inter-ExtraLight'),
+    url('./assets/fonts/Inter/Inter-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter Light'),
+    local('Inter-Light'),
+    url('./assets/fonts/Inter/Inter-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter Regular'),
+    local('Inter-Regular'),
+    url('./assets/fonts/Inter/Inter-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter Medium'),
+    local('Inter-Medium'),
+    url('./assets/fonts/Inter/Inter-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter SemiBold'),
+    local('Inter-SemiBold'),
+    url('./assets/fonts/Inter/Inter-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter Bold'),
+    local('Inter-Bold'),
+    url('./assets/fonts/Inter/Inter-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-display: swap;
+}
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-}
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-    'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: 'Inter', sans-serif;
 }
 
 html,

src/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import './index.css'
+import ThemeProvider from './modules/theme/ThemeProvider'
 import App from './App'
+import './index.css'
 import reportWebVitals from './reportWebVitals'
 import { swicRegister } from './modules/swic'
 import { BrowserRouter } from 'react-router-dom'
 import { Provider } from 'react-redux'
 import { persistor, store } from './store'
-import ThemeProvider from './modules/theme/ThemeProvider'
 import { PersistGate } from 'redux-persist/integration/react'
 import { SnackbarProvider } from 'notistack'
 

src/layout/Header/Header.tsx

@@ -1,4 +1,4 @@
-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'
@@ -8,11 +8,14 @@ import DarkModeIcon from '@mui/icons-material/DarkMode'
 import LightModeIcon from '@mui/icons-material/LightMode'
 import { useAppDispatch, useAppSelector } from '@/store/hooks/redux'
 import { setThemeMode } from '@/store/reducers/ui.slice'
+import { useSessionStorage } from 'usehooks-ts'
+import { RELOAD_STORAGE_KEY } from '@/utils/consts'
 
 export const Header = () => {
   const themeMode = useAppSelector((state) => state.ui.themeMode)
   const navigate = useNavigate()
   const dispatch = useAppDispatch()
+  const [needReload] = useSessionStorage(RELOAD_STORAGE_KEY, false)
 
   const { npub = '' } = useParams<{ npub: string }>()
   const { userName, userAvatar, avatarTitle } = useProfile(npub)
@@ -30,7 +33,7 @@ export const Header = () => {
   }
 
   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 +59,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',
+})

src/layout/Header/components/ListItemProfile.tsx

@@ -4,28 +4,21 @@ import { Avatar, ListItemIcon, MenuItem, Typography } from '@mui/material'
 import React, { FC } from 'react'
 
 type ListItemProfileProps = {
-	onClickItem: () => void
+  onClickItem: () => void
 } & DbKey
 
-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 }}
-				>
-					{avatarTitle}
-				</Avatar>
-			</ListItemIcon>
-			<Typography variant='body2' noWrap>
-				{userName}
-			</Typography>
-		</MenuItem>
-	)
+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 }}>
+          {avatarTitle}
+        </Avatar>
+      </ListItemIcon>
+      <Typography variant="body2" noWrap>
+        {userName}
+      </Typography>
+    </MenuItem>
+  )
 }

src/layout/Layout.tsx

@@ -1,13 +1,19 @@
 import { FC } from 'react'
 import { Outlet } 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'
+import { useSessionStorage } from 'usehooks-ts'
+import { RELOAD_STORAGE_KEY } from '@/utils/consts'
 
 export const Layout: FC = () => {
+  const [needReload] = useSessionStorage(RELOAD_STORAGE_KEY, false)
+  const containerClassName = needReload ? 'reload' : ''
+
   return (
-    <StyledContainer maxWidth="md">
+    <StyledContainer maxWidth="md" className={containerClassName}>
+      <ReloadBadge />
       <Header />
-      <StyledDivider />
       <main>
         <Outlet />
       </main>
@@ -24,14 +30,14 @@ const StyledContainer = styled((props: ContainerProps) => <Container maxWidth="s
   '& > 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',
+  '@media screen and (max-width: 320px)': {
+    marginBottom: '0.25rem',
+    paddingLeft: '0.75rem',
+    paddingBottom: '0.75rem',
+    paddingRight: '0.75rem',
+  },
 })

src/modules/backend.ts

@@ -10,7 +10,7 @@ import NDK, {
   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 { NOAUTHD_URL, WEB_PUSH_PUBKEY, NIP46_RELAYS, MIN_POW, MAX_POW, KIND_RPC, DOMAIN, REQ_TTL } from '../utils/consts'
 // import { Nip04 } from './nip04'
 import { fetchNip05, getReqPerm, getShortenNpub, isPackagePerm } from '@/utils/helpers/helpers'
 import { NostrPowEvent, minePow } from './pow'
@@ -28,6 +28,7 @@ enum DECISION {
 export interface KeyInfo {
   npub: string
   nip05?: string
+  name?: string
   locked: boolean
 }
 
@@ -47,7 +48,7 @@ interface Pending {
 }
 
 interface IAllowCallbackParams {
-  backend: NDKNip46Backend
+  backend: Nip46Backend
   npub: string
   id: string
   method: string
@@ -245,13 +246,8 @@ export class NoauthBackend {
 
     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) => {
@@ -314,6 +310,13 @@ export class NoauthBackend {
     this.apps = await dbi.listApps()
     console.log('started apps', this.apps)
 
+    // drop old pending reqs
+    const pending = await dbi.listPending()
+    for (const p of pending) {
+      if (p.timestamp < Date.now() - REQ_TTL)
+        await dbi.removePending(p.id)
+    }
+
     const sub = await this.swg.registration.pushManager.getSubscription()
 
     for (const k of this.enckeys) {
@@ -366,7 +369,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()
@@ -501,7 +504,7 @@ 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
       }
     }
@@ -637,6 +640,7 @@ export class NoauthBackend {
     return {
       npub: k.npub,
       nip05: k.nip05,
+      name: k.name,
       locked: this.isLocked(k.npub),
     }
   }
@@ -677,11 +681,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)
-      await this.sendNameToServer(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()
@@ -690,7 +699,9 @@ export class NoauthBackend {
     return this.keyInfo(dbKey)
   }
 
-  private getDecision(req: DbPending): DECISION {
+  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)
 
@@ -875,7 +886,7 @@ export class NoauthBackend {
           const otherReqs = self.confirmBuffer.filter((r) => r.req.appNpub === req.appNpub)
           console.log('updated perms', this.perms, 'otherReqs', otherReqs, 'connected', connected)
           for (const r of otherReqs) {
-            const dec = this.getDecision(r.req)
+            const dec = this.getDecision(backend, r.req)
             if (dec !== DECISION.ASK) {
               r.cb(dec, false)
             }
@@ -884,7 +895,7 @@ export class NoauthBackend {
       }
 
       // check perms
-      const dec = this.getDecision(req)
+      const dec = this.getDecision(backend, req)
       console.log(Date.now(), 'decision', req.id, dec)
 
       // have perm?
@@ -909,12 +920,22 @@ export class NoauthBackend {
         const confirmMethod = isConnect ? 'confirm-connect' : 'confirm-event'
         const authUrl = `${self.swg.location.origin}/key/${npub}?${confirmMethod}=true&appNpub=${appNpub}&reqId=${id}&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,
-        // which will cause SW (this code) to reload, to fetch
-        // the pending requests and to re-send this event,
-        // looping for 10 seconds (our request age threshold)
-        backend.rpc.sendResponse(id, remotePubkey, 'auth_url', KIND_RPC, authUrl)
+
+        // NOTE: don't send auth_url immediately, wait some time
+        // to make sure other bunkers aren't replying
+        setTimeout(() => {
+          // request still there? (not dropped by the watcher)
+          if (self.confirmBuffer.find((r) => r.req.id === id)) {
+            // NOTE: if you set 'Update on reload' in the Chrome SW console
+            // then this message will cause a new tab opened by the peer,
+            // which will cause SW (this code) to reload, to fetch
+            // the pending requests and to re-send this event,
+            // looping for 10 seconds (our request age threshold)
+            backend.rpc.sendResponse(id, remotePubkey, 'auth_url', KIND_RPC, authUrl)
+          } else {
+            console.log("skip sending auth_url")
+          }
+        }, 500)
 
         // show notifs
         // this.notify()
@@ -937,6 +958,8 @@ export class NoauthBackend {
     const backend = new Nip46Backend(ndk, signer, this.allowPermitCallback.bind(this)) // , () => Promise.resolve(true)
     const watcher = new Watcher(ndk, signer, (id) => {
       // drop pending request
+      const index = self.confirmBuffer.findIndex((r) => r.req.id === id)
+      if (index >= 0) self.confirmBuffer.splice(index, 1)
       dbi.removePending(id).then(() => this.updateUI())
     })
     this.keys.push({ npub, backend, signer, ndk, backoff, watcher })
@@ -1152,10 +1175,15 @@ export class NoauthBackend {
   }
 
   private async editName(npub: string, name: string) {
-    const key = this.enckeys.find((k) => k.npub == npub)
+    const key = this.enckeys.find((k) => k.npub === npub)
     if (!key) throw new Error('Npub not found')
     if (key.name) {
-      await this.sendDeleteNameToServer(npub, 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)
@@ -1166,7 +1194,7 @@ export class NoauthBackend {
   }
 
   private async transferName(npub: string, name: string, newNpub: string) {
-    const key = this.enckeys.find((k) => k.npub == npub)
+    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')
@@ -1256,10 +1284,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
   }
 }

src/modules/keys.ts

@@ -43,7 +43,7 @@ export function isWeakPassphase(passphrase: string): boolean {
   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; 
+  return compl < thresh
 }
 
 export class Keys {

src/modules/swic.ts

@@ -1,10 +1,12 @@
-// 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() {
@@ -14,7 +16,11 @@ 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' })
     },
   })
 
@@ -27,8 +33,7 @@ export async function swicRegister() {
       console.log('This page is not currently controlled by a service worker.')
     }
 
-    while (queue.length)
-      await (queue.shift()!)()
+    while (queue.length) await queue.shift()!()
   })
 
   navigator.serviceWorker.addEventListener('message', (event) => {
@@ -37,18 +42,22 @@ export async function swicRegister() {
 }
 
 export function swicWaitStarted() {
-  return new Promise<void>(ok => {
+  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 (onRender) onRender()
+    if (result === 'reload') {
+      if (onReload) onReload()
+    } else {
+      if (onRender) onRender()
+    }
     return
   }
 
@@ -68,7 +77,6 @@ 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'))
@@ -93,3 +101,7 @@ export async function swicCall(method: string, ...args: any[]) {
 export function swicOnRender(cb: () => void) {
   onRender = cb
 }
+
+export function swicOnReload(cb: () => void) {
+  onReload = cb
+}

src/modules/theme/theme.ts

@@ -21,6 +21,7 @@ const commonTheme: Theme = createTheme({
       styleOverrides: {
         root: {
           textTransform: 'initial',
+          color: 'red',
         },
       },
     },
@@ -96,4 +97,6 @@ const darkTheme: Theme = createTheme({
   },
 })
 
+console.log(darkTheme)
+
 export { lightTheme, darkTheme }

src/pages/AppPage/App.Page.tsx

@@ -9,7 +9,6 @@ import { getAppIconTitle, getDomain, getShortenNpub } from '@/utils/helpers/help
 import { Button } from '@/shared/Button/Button'
 import { ACTION_TYPE } from '@/utils/consts'
 import { Permissions } from './components/Permissions/Permissions'
-import { StyledAppIcon } from './styled'
 import { useToggleConfirm } from '@/hooks/useToggleConfirm'
 import { ConfirmModal } from '@/shared/ConfirmModal/ConfirmModal'
 import { swicCall } from '@/modules/swic'
@@ -20,6 +19,8 @@ import { useModalSearchParams } from '@/hooks/useModalSearchParams'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
 import MoreIcon from '@mui/icons-material/MoreVertRounded'
 import { ModalAppDetails } from '@/components/Modal/ModalAppDetails/ModalAppDetails'
+import { IconApp } from '@/shared/IconApp/IconApp'
+import { HeadingContainer, AppInfoContainer, AppNameContainer } from './styled'
 
 const AppPage = () => {
   const keys = useAppSelector(selectKeys)
@@ -46,7 +47,7 @@ const AppPage = () => {
   const shortAppNpub = getShortenNpub(appNpub)
   const appName = name || appDomain || shortAppNpub
   const appAvatarTitle = getAppIconTitle(name || appDomain, appNpub)
-  const isAppNameExists = !!name
+  const isAppNameExists = !!name || !!appDomain
 
   const { timestamp } = connectPerm || {}
   const connectedOn = connectPerm && timestamp ? `Connected at ${formatTimestampDate(timestamp)}` : 'Not connected'
@@ -67,12 +68,13 @@ 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%'} alignItems={'center'}>
-          <StyledAppIcon src={icon}>{appAvatarTitle}</StyledAppIcon>
-          <Box flex={'1'} overflow={'hidden'}>
-            <Stack direction={'row'} alignItems={'flex-start'} gap={'0.5rem'} marginBottom={'0.5rem'}>
-              <Box display={'flex'} flexDirection={'column'} flex={1}>
-                <Typography variant="h4" noWrap>
+
+        <HeadingContainer>
+          <IconApp size="big" picture={icon} alt={appAvatarTitle} />
+          <Box flex={'1'} overflow={'auto'} alignSelf={'flex-start'} width={'100%'}>
+            <AppInfoContainer>
+              <AppNameContainer>
+                <Typography className="app_name" variant="h4" noWrap>
                   {appName}
                 </Typography>
                 {isAppNameExists && (
@@ -80,16 +82,19 @@ const AppPage = () => {
                     {shortAppNpub}
                   </Typography>
                 )}
-              </Box>
+              </AppNameContainer>
+
               <IconButton onClick={handleShowAppDetailsModal}>
                 <MoreIcon />
               </IconButton>
-            </Stack>
+            </AppInfoContainer>
+
             <Typography variant="body2" noWrap>
               {connectedOn}
             </Typography>
           </Box>
-        </Stack>
+        </HeadingContainer>
+
         <Box marginBottom={'1rem'}>
           <SectionTitle marginBottom={'0.5rem'}>Disconnect</SectionTitle>
           <Button fullWidth onClick={handleShow}>

src/pages/AppPage/styled.tsx

@@ -1,6 +1,32 @@
-import { Avatar, AvatarProps, styled } from '@mui/material'
+import { Box, BoxProps, Stack, StackProps, styled } from '@mui/material'
 
-export const StyledAppIcon = styled((props: AvatarProps) => <Avatar {...props} variant="rounded" />)(() => ({
-  width: 70,
-  height: 70,
+export const HeadingContainer = styled((props: StackProps) => <Stack {...props} />)(() => ({
+  width: '100%',
+  marginBottom: '1rem',
+  flexDirection: 'row',
+  gap: '1rem',
+  alignItems: 'center',
+  '@media screen and (max-width: 320px)': {
+    flexDirection: 'column',
+    gap: '0.5rem',
+  },
+}))
+
+export const AppInfoContainer = styled((props: StackProps) => <Stack {...props} direction={'row'} />)(() => ({
+  width: '100%',
+  flex: 1,
+  alignItems: 'flex-start',
+  gap: '0.5rem',
+  marginBottom: '0.5rem',
+  overflow: 'hidden',
+  '@media screen and (max-width: 320px)': {
+    alignSelf: 'flex-start',
+  },
+}))
+
+export const AppNameContainer = styled((props: BoxProps) => <Box {...props} />)(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  overflow: 'auto',
 }))

src/pages/KeyPage/components/Apps.tsx

@@ -5,9 +5,7 @@ import { Box, Stack, Typography } from '@mui/material'
 import { FC } from 'react'
 import { StyledEmptyAppsBox } from '../styled'
 import { Button } from '@/shared/Button/Button'
-import { call } from '@/utils/helpers/helpers'
-import { swicCall } from '@/modules/swic'
-import { useEnqueueSnackbar } from '@/hooks/useEnqueueSnackbar'
+
 import { ItemApp } from './ItemApp'
 
 type AppsProps = {
@@ -16,22 +14,12 @@ type AppsProps = {
 }
 
 export const Apps: FC<AppsProps> = ({ apps = [] }) => {
-  const notify = useEnqueueSnackbar()
-
-  // eslint-disable-next-line
-  async function deletePerm(id: string) {
-    call(async () => {
-      await swicCall('deletePerm', id)
-      notify('Perm deleted!', 'success')
-    })
-  }
-
   const openAppStore = () => {
     window.open('https://nostrapp.link', '_blank')
   }
 
   return (
-    <Box flex={1} marginBottom={'1rem'} display={'flex'} flexDirection={'column'} overflow={'auto'}>
+    <Box marginBottom={'1rem'} display={'flex'} flexDirection={'column'}>
       <Stack direction={'row'} alignItems={'center'} justifyContent={'space-between'} marginBottom={'0.5rem'}>
         <SectionTitle>Connected apps</SectionTitle>
         <AppLink title="Discover Apps" onClick={openAppStore} />
@@ -45,7 +33,7 @@ export const Apps: FC<AppsProps> = ({ apps = [] }) => {
         </StyledEmptyAppsBox>
       )}
 
-      <Stack gap={'0.5rem'} overflow={'auto'} flex={1}>
+      <Stack gap={'0.5rem'} overflow={'auto'} flex={1} paddingBottom={'0.75rem'}>
         {apps.map((a) => (
           <ItemApp {...a} key={a.appNpub} />
         ))}

src/pages/KeyPage/components/BackgroundSigningWarning.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { Warning } from '@/components/Warning/Warning'
-import { CircularProgress, Stack, Typography } from '@mui/material'
+import { CircularProgress, Stack, Typography, TypographyProps, styled } from '@mui/material'
 import AutoModeOutlinedIcon from '@mui/icons-material/AutoModeOutlined'
 
 type BackgroundSigningWarningProps = {
@@ -12,18 +12,29 @@ export const BackgroundSigningWarning: FC<BackgroundSigningWarningProps> = ({ is
   return (
     <Warning
       message={
-        <Stack direction={'row'} alignItems={'center'} gap={'1rem'}>
-          Enable background service {isEnabling ? <CircularProgress size={'1.5rem'} /> : null}
+        <Stack gap={'0.25rem'} overflow={'auto'} width={'100%'}>
+          <Typography variant="body1" noWrap fontWeight={'500'}>
+            Enable background service
+          </Typography>
+          <StyledHint>Please allow notifications for background operation.</StyledHint>
         </Stack>
       }
-      hint={
-        <Typography variant='body2'>
-          Please allow notifications
-          for background operation. 
-        </Typography>
+      icon={
+        isEnabling ? (
+          <CircularProgress size={'1.5rem'} sx={{ color: '#fff' }} />
+        ) : (
+          <AutoModeOutlinedIcon htmlColor="white" />
+        )
       }
-      icon={<AutoModeOutlinedIcon htmlColor="white" />}
       onClick={isEnabling ? undefined : onEnableBackSigning}
     />
   )
 }
+
+const StyledHint = styled((props: TypographyProps) => <Typography variant="body2" {...props} />)(() => ({
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+}))

src/pages/KeyPage/components/ItemApp.tsx

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

src/pages/KeyPage/components/styled.tsx

@@ -1,4 +1,5 @@
-import { Input, AppInputProps } from '@/shared/Input/Input'
+import { Input } from '@/shared/Input/Input'
+import { AppInputProps } from '@/shared/Input/types'
 import { Stack, StackProps, styled } from '@mui/material'
 import { forwardRef } from 'react'
 

src/pages/KeyPage/hooks/useTriggerConfirmModal.ts

@@ -1,7 +1,7 @@
 import { useModalSearchParams } from '@/hooks/useModalSearchParams'
 import { DbPending, DbPerm } from '@/modules/db'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
-import { ACTION_TYPE } from '@/utils/consts'
+import { ACTION_TYPE, REQ_TTL } from '@/utils/consts'
 import { useCallback, useEffect, useRef } from 'react'
 import { useSearchParams } from 'react-router-dom'
 
@@ -25,7 +25,7 @@ export const useTriggerConfirmModal = (npub: string, pending: DbPending[], perms
   const isConfirmConnectModalOpened = getModalOpened(MODAL_PARAMS_KEYS.CONFIRM_CONNECT)
   const isConfirmEventModalOpened = getModalOpened(MODAL_PARAMS_KEYS.CONFIRM_EVENT)
 
-  const filteredPendingReqs = pending.filter((p) => p.npub === npub)
+  const filteredPendingReqs = pending.filter((p) => p.npub === npub && p.timestamp > Date.now() - REQ_TTL)
   const filteredPerms = perms.filter((p) => p.npub === npub)
 
   const npubConnectPerms = filteredPerms.filter((perm) => perm.perm === 'connect' || perm.perm === ACTION_TYPE.BASIC)

src/pages/KeyPage/styled.tsx

@@ -1,4 +1,5 @@
-import { Input, AppInputProps } from '@/shared/Input/Input'
+import { Input } from '@/shared/Input/Input'
+import { AppInputProps } from '@/shared/Input/types'
 import { Box, Button, ButtonProps, styled, Badge } from '@mui/material'
 import { forwardRef } from 'react'
 

src/routes/AppRoutes.tsx

@@ -1,13 +1,15 @@
 import { Suspense, lazy } from 'react'
 import { Route, Routes, Navigate } from 'react-router-dom'
-import HomePage from '../pages/HomePage/Home.Page'
 import { Layout } from '../layout/Layout'
 import { CircularProgress, Stack } from '@mui/material'
-import CreatePage from '@/pages/CreatePage/Create.Page'
 
-const KeyPage = lazy(() => import('../pages/KeyPage/Key.Page'))
-const ConfirmPage = lazy(() => import('../pages/Confirm.Page'))
-const AppPage = lazy(() => import('../pages/AppPage/App.Page'))
+// Pages
+import CreatePage from '@/pages/CreatePage/Create.Page'
+import HomePage from '../pages/HomePage/Home.Page'
+import KeyPage from '../pages/KeyPage/Key.Page'
+
+const ConfirmPage = lazy(() => import('@/pages/Confirm.Page'))
+const AppPage = lazy(() => import('@/pages/AppPage/App.Page'))
 
 const LoadingSpinner = () => (
   <Stack height={'100%'} justifyContent={'center'} alignItems={'center'}>
@@ -21,7 +23,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 />} />

src/shared/Button/Button.tsx

@@ -19,6 +19,9 @@ const StyledButton = styled(
   const commonStyles = {
     fontWeight: 500,
     borderRadius: '1rem',
+    '@media screen and (max-width: 320px)': {
+      padding: '0.25rem 0.75rem',
+    },
   }
   if (varianttype === 'secondary') {
     return {

src/shared/DebounceInput/DebounceInput.tsx

@@ -1,5 +1,6 @@
 import { useRef } from 'react'
-import { Input, AppInputProps } from '../Input/Input'
+import { Input } from '../Input/Input'
+import { AppInputProps } from '../Input/types'
 
 export type DebounceProps = {
   handleDebounce: (value: string) => void

src/shared/IOSBackButton/styled.tsx

@@ -9,7 +9,8 @@ export const StyledButton = styled((props: ButtonProps) => (
       startIcon: 'icon',
     }}
   />
-))(() => ({
+))(({ theme }) => ({
+  color: theme.palette.primary.main,
   marginBottom: '0.5rem',
   borderRadius: '8px',
   '&:is(:hover,:active)': {
@@ -18,4 +19,7 @@ export const StyledButton = styled((props: ButtonProps) => (
   '& .icon': {
     marginRight: '5px',
   },
+  '@media screen and (max-width: 320px)': {
+    marginBottom: '0.25rem',
+  },
 }))

src/shared/IconApp/IconApp.tsx

@@ -1,8 +1,11 @@
-import React, { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
+import { StyledAppIcon, StyledAppImg } from './styled'
+import ImageOutlinedIcon from '@mui/icons-material/ImageOutlined'
+import { IIconApp } from './types'
 
 const failedCache = new Map<string, boolean>()
 
-export const IconApp: FC<{ picture: string }> = ({ picture }) => {
+export const IconApp: FC<IIconApp> = ({ picture = '', alt, isRounded, isSmall, onClick, size, ...rest }) => {
   const c = failedCache.get(picture)
   const [isFailed, setIsFailed] = useState(c !== undefined ? c : true)
 
@@ -26,5 +29,21 @@ export const IconApp: FC<{ picture: string }> = ({ picture }) => {
     }
   }, [picture])
 
-  return <div>IconApp</div>
+  return (
+    <StyledAppIcon isNotLoaded={isFailed} size={size} onClick={onClick} {...rest}>
+      {alt ? (
+        <StyledAppImg size={size} alt={alt} isSmall={isSmall} src={isFailed ? '' : picture}>
+          {isFailed && (
+            <div className="MuiAvatar-root MuiAvatar-square MuiAvatar-colorDefault">
+              {alt.substring(0, 1).toUpperCase()}
+            </div>
+          )}
+        </StyledAppImg>
+      ) : (
+        <StyledAppImg size={size} alt={alt} isSmall={isSmall} src={isFailed ? '/' : picture}>
+          <ImageOutlinedIcon fontSize="inherit" />
+        </StyledAppImg>
+      )}
+    </StyledAppIcon>
+  )
 }

src/shared/IconApp/const.ts

@@ -0,0 +1,53 @@
+import { APP_NSEC_SIZE } from '@/utils/consts'
+
+const SIZE_VALUE = {
+  [APP_NSEC_SIZE.BIG]: 70,
+  [APP_NSEC_SIZE.LARGE]: 56,
+  [APP_NSEC_SIZE.MEDIUM]: 40,
+  [APP_NSEC_SIZE.SMALL]: 36,
+  [APP_NSEC_SIZE.EXTRA_SMALL]: 30,
+}
+
+export const APP_SIZE_VALUE = {
+  [APP_NSEC_SIZE.BIG]: {
+    height: SIZE_VALUE[APP_NSEC_SIZE.BIG],
+    minWidth: SIZE_VALUE[APP_NSEC_SIZE.BIG],
+    maxWidth: SIZE_VALUE[APP_NSEC_SIZE.BIG],
+  },
+  [APP_NSEC_SIZE.LARGE]: {
+    height: SIZE_VALUE[APP_NSEC_SIZE.LARGE],
+    minWidth: SIZE_VALUE[APP_NSEC_SIZE.LARGE],
+    maxWidth: SIZE_VALUE[APP_NSEC_SIZE.LARGE],
+  },
+  [APP_NSEC_SIZE.MEDIUM]: {
+    height: SIZE_VALUE[APP_NSEC_SIZE.MEDIUM],
+    minWidth: SIZE_VALUE[APP_NSEC_SIZE.MEDIUM],
+    maxWidth: SIZE_VALUE[APP_NSEC_SIZE.MEDIUM],
+  },
+  [APP_NSEC_SIZE.SMALL]: {
+    height: SIZE_VALUE[APP_NSEC_SIZE.SMALL],
+    minWidth: SIZE_VALUE[APP_NSEC_SIZE.SMALL],
+    maxWidth: SIZE_VALUE[APP_NSEC_SIZE.SMALL],
+  },
+  [APP_NSEC_SIZE.EXTRA_SMALL]: {
+    height: SIZE_VALUE[APP_NSEC_SIZE.EXTRA_SMALL],
+    minWidth: SIZE_VALUE[APP_NSEC_SIZE.EXTRA_SMALL],
+    maxWidth: SIZE_VALUE[APP_NSEC_SIZE.EXTRA_SMALL],
+  },
+}
+
+const FONT_SIZE_VALUE = {
+  [APP_NSEC_SIZE.BIG]: 24,
+  [APP_NSEC_SIZE.LARGE]: 20,
+  [APP_NSEC_SIZE.MEDIUM]: 16,
+  [APP_NSEC_SIZE.SMALL]: 12,
+  [APP_NSEC_SIZE.EXTRA_SMALL]: 10,
+}
+
+export const APP_NAME_FONT_SIZE_VALUE = {
+  [APP_NSEC_SIZE.LARGE]: FONT_SIZE_VALUE[APP_NSEC_SIZE.LARGE],
+  [APP_NSEC_SIZE.BIG]: FONT_SIZE_VALUE[APP_NSEC_SIZE.BIG],
+  [APP_NSEC_SIZE.MEDIUM]: FONT_SIZE_VALUE[APP_NSEC_SIZE.MEDIUM],
+  [APP_NSEC_SIZE.SMALL]: FONT_SIZE_VALUE[APP_NSEC_SIZE.SMALL],
+  [APP_NSEC_SIZE.EXTRA_SMALL]: FONT_SIZE_VALUE[APP_NSEC_SIZE.EXTRA_SMALL],
+}

src/shared/IconApp/styled.tsx

@@ -0,0 +1,54 @@
+import { Avatar, Box, styled } from '@mui/material'
+import { forwardRef } from 'react'
+import { IAvatarStyled, IBoxStyled } from './types'
+import { grey } from '@mui/material/colors'
+import { AppNostrSize } from '@/types/app-nsec'
+import { APP_NAME_FONT_SIZE_VALUE, APP_SIZE_VALUE } from './const'
+import { APP_NSEC_SIZE } from '@/utils/consts'
+
+const color = grey[500]
+
+const getVariantApp = (isRounded: boolean, size: AppNostrSize) => {
+  if (isRounded) {
+    return {
+      height: 34,
+      minWidth: 34,
+      maxWidth: 34,
+      borderRadius: '7px',
+    }
+  }
+
+  return APP_SIZE_VALUE[size]
+}
+
+export const StyledAppIcon = styled(
+  forwardRef<HTMLAnchorElement, IBoxStyled>(function BoxDisplayName(props, ref) {
+    return <Box ref={ref} {...props} />
+  })
+)(({ theme, isNotLoaded, isRounded = false, size = APP_NSEC_SIZE.MEDIUM }) => ({
+  position: 'relative',
+  borderRadius: theme.shape.borderRadius,
+  overflow: 'hidden',
+  ...getVariantApp(isRounded, size),
+  transition: theme.transitions.create(['border-color', 'transition']),
+  backgroundColor: isNotLoaded ? color : theme.palette.background.default,
+  boxSizing: 'border-box',
+  ':active': {
+    borderColor: 'rgba(255, 255, 255, 0.3)',
+  },
+}))
+
+export const StyledAppImg = styled(function BoxDisplayName(props: IAvatarStyled) {
+  return <Avatar variant="square" {...props} />
+})(({ isSmall = false, size = APP_NSEC_SIZE.MEDIUM }) => ({
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  height: '100%',
+  width: '100%',
+  fontWeight: '500',
+  fontSize: APP_NAME_FONT_SIZE_VALUE[size],
+  '.MuiAvatar-img': {
+    objectFit: isSmall ? 'scale-down' : 'cover',
+  },
+}))

src/shared/IconApp/types.ts

@@ -0,0 +1,24 @@
+import { AppNostrSize } from '@/types/app-nsec'
+import { AvatarProps, BoxProps } from '@mui/material'
+
+export type IconAppProps = {
+  size?: AppNostrSize
+  isRounded?: boolean
+  isSmall?: boolean
+  onClick?: () => void
+  isNotLoaded?: boolean
+}
+
+export type IconAppBase = {
+  picture: string
+  alt?: string
+}
+
+export type IIconApp = Omit<IconAppProps, 'isNotLoaded'> & IconAppBase
+
+export type IBoxStyled = IconAppProps & BoxProps
+
+export type IAvatarStyled = {
+  size?: AppNostrSize
+  isSmall?: boolean
+} & AvatarProps

src/shared/Input/Input.tsx

@@ -1,74 +1,34 @@
 import { ReactNode, forwardRef } from 'react'
-import {
-  Box,
-  BoxProps,
-  FormHelperText,
-  FormHelperTextProps,
-  FormLabel,
-  InputBase,
-  InputBaseProps,
-  styled,
-} from '@mui/material'
+import { FormHelperText, FormLabel, InputBase } from '@mui/material'
+import { StyledInputContainer } from './styled'
+import { AppInputProps } from './types'
 
-export type AppInputProps = InputBaseProps & {
-  helperText?: string | ReactNode
-  helperTextProps?: FormHelperTextProps
-  containerProps?: BoxProps
-  label?: string
-}
+const renderItem = <T,>(item: T, value: ReactNode) => (item ? value : null)
 
 export const Input = forwardRef<HTMLInputElement, AppInputProps>(
   ({ helperText, containerProps, helperTextProps, label, ...props }, ref) => {
     return (
       <StyledInputContainer {...containerProps}>
-        {label ? (
+        {renderItem(
+          label,
           <FormLabel className="label" htmlFor={props.id}>
             {label}
           </FormLabel>
-        ) : null}
+        )}
+
         <InputBase
           autoComplete="off"
           {...props}
           classes={{ error: 'error', root: 'input_root', input: 'input', disabled: 'disabled' }}
           ref={ref}
         />
-        {helperText ? (
+        {renderItem(
+          helperText,
           <FormHelperText {...helperTextProps} className="helper_text">
             {helperText}
           </FormHelperText>
-        ) : null}
+        )}
       </StyledInputContainer>
     )
   }
 )
-
-const StyledInputContainer = styled((props: BoxProps) => <Box {...props} />)(({ theme }) => {
-  const isDark = theme.palette.mode === 'dark'
-  return {
-    width: '100%',
-    '& > .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',
-      '&.error': {
-        border: '0.3px solid ' + theme.palette.error.main,
-      },
-    },
-    '& .input:is(.disabled, &)': {
-      WebkitTextFillColor: '#ffffff80',
-    },
-    '& > .helper_text': {
-      margin: '0.5rem 1rem 0',
-      color: theme.palette.text.primary,
-    },
-    '& > .label': {
-      margin: '0 1rem 0.5rem',
-      display: 'block',
-      color: theme.palette.primary.main,
-      fontSize: '0.875rem',
-    },
-  }
-})

src/shared/Input/styled.tsx

@@ -0,0 +1,45 @@
+import { Box, BoxProps, styled } from '@mui/material'
+
+export const StyledInputContainer = styled((props: BoxProps) => <Box {...props} />)(({ theme }) => {
+  const isDark = theme.palette.mode === 'dark'
+  return {
+    width: '100%',
+    '& > .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',
+      '&.error': {
+        border: '0.3px solid ' + theme.palette.error.main,
+      },
+    },
+    '& .input:is(.disabled, &)': {
+      WebkitTextFillColor: '#ffffff80',
+    },
+    '& > .helper_text': {
+      margin: '0.5rem 0.5rem 0',
+      color: theme.palette.text.primary,
+    },
+    '& > .label': {
+      margin: '0 1rem 0.5rem',
+      display: 'block',
+      color: theme.palette.primary.main,
+      fontSize: '0.875rem',
+    },
+    '@media screen and (max-width: 320px)': {
+      '& > .input_root': {
+        padding: '0.5rem 0.75rem',
+        borderRadius: '0.75rem',
+      },
+      '& > .label': {
+        margin: '0 0.25rem 0.25rem',
+        fontSize: '0.75rem',
+      },
+      '& > .helper_text': {
+        fontSize: '0.75rem',
+      },
+    },
+  }
+})

src/shared/Input/types.ts

@@ -0,0 +1,9 @@
+import { BoxProps, FormHelperTextProps, InputBaseProps } from '@mui/material'
+import { ReactNode } from 'react'
+
+export type AppInputProps = InputBaseProps & {
+  helperText?: string | ReactNode
+  helperTextProps?: FormHelperTextProps
+  containerProps?: BoxProps
+  label?: string
+}

src/shared/InputCopyButton/InputCopyButton.tsx

@@ -1,8 +1,7 @@
 import { FC, useEffect, useState } from 'react'
-import { Fade, IconButton, Typography } from '@mui/material'
+import { Fade, Typography } from '@mui/material'
 import CopyToClipboard from 'react-copy-to-clipboard'
-import { CopyIcon } from '@/assets'
-import { StyledContainer } from './styled'
+import { StyledContainer, StyledCopyButton } from './styled'
 
 type InputCopyButtonProps = {
   value: string
@@ -40,9 +39,7 @@ export const InputCopyButton: FC<InputCopyButtonProps> = ({ value, onCopy = () =
         </Fade>
       )}
       <CopyToClipboard text={value} onCopy={handleCopy}>
-        <IconButton color="inherit">
-          <CopyIcon />
-        </IconButton>
+        <StyledCopyButton />
       </CopyToClipboard>
     </StyledContainer>
   )

src/shared/InputCopyButton/styled.tsx

@@ -1,7 +1,17 @@
-import { Stack, StackProps, styled } from '@mui/material'
+import { IconButton, Stack, StackProps, styled } from '@mui/material'
+import { CopyIcon } from '@/assets'
 
 export const StyledContainer = styled((props: StackProps & { copied: number }) => (
   <Stack {...props} direction={'row'} alignItems={'center'} />
 ))(({ theme, copied }) => ({
   color: copied ? theme.palette.success.main : theme.palette.textSecondaryDecorate.main,
 }))
+
+export const StyledCopyButton = styled((props) => (
+  <IconButton color="inherit" {...props}>
+    <CopyIcon />
+  </IconButton>
+))(() => ({
+  width: 40,
+  height: 40,
+}))

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'

src/types/app-nsec.ts

@@ -0,0 +1,6 @@
+import { APP_NSEC_SIZE } from '@/utils/consts'
+import { OverridableStringUnion } from './utils'
+
+export type AppNostrSizeUnion = (typeof APP_NSEC_SIZE)[keyof typeof APP_NSEC_SIZE]
+
+export type AppNostrSize = OverridableStringUnion<AppNostrSizeUnion>

src/types/utils.ts

@@ -0,0 +1,10 @@
+export type OverridableStringUnion<T extends string> = GenerateStringUnion<DistributiveOmit<Record<T, true>>>
+
+type GenerateStringUnion<T> = Extract<
+  {
+    [Key in keyof T]: true extends T[Key] ? Key : never
+  }[keyof T],
+  string
+>
+
+type DistributiveOmit<T> = T extends T ? T : never

src/utils/consts.ts

@@ -9,6 +9,10 @@ export const MAX_POW = 19
 
 export const KIND_RPC = 24133
 
+export const RELOAD_STORAGE_KEY = 'reload'
+
+export const REQ_TTL = 60000 // 1 min
+
 export enum ACTION_TYPE {
   BASIC = 'basic',
   ADVANCED = 'advanced',
@@ -16,10 +20,18 @@ export enum ACTION_TYPE {
 }
 
 export const ACTIONS: { [type: string]: string } = {
-	basic: 'Basic permissions',
+  basic: 'Basic permissions',
   get_public_key: 'Get public key',
   sign_event: 'Sign event',
   connect: 'Connect',
   nip04_encrypt: 'Encrypt message',
   nip04_decrypt: 'Decrypt message',
 }
+
+export const APP_NSEC_SIZE = {
+  BIG: 'big',
+  LARGE: 'large',
+  MEDIUM: 'medium',
+  SMALL: 'small',
+  EXTRA_SMALL: 'extra-small',
+} as const

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 ''

src/utils/helpers/helpers.ts

@@ -16,7 +16,7 @@ export const getShortenNpub = (npub = '') => {
 }
 
 export const getProfileUsername = (profile: MetaEvent | null) => {
-  if (!profile) return null
+  if (!profile) return undefined
   return profile?.info?.name || profile?.info?.display_name
 }
 
@@ -72,6 +72,7 @@ export function isPackagePerm(perm: string, reqPerm: string) {
       case 'sign_event:10002':
       case 'sign_event:30023':
       case 'sign_event:10000':
+      case 'sign_event:27235':
         return true
     }
   }