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
 }

public/index.html

@@ -10,6 +10,12 @@
     <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.

src/components/Modal/ModalAppDetails/styled.tsx

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

src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx

@@ -97,7 +97,8 @@ export const ModalConfirmConnect = () => {
     if (isModalOpened && (!isNpubExists /*|| !isAppNpubExists*/ || (pendingReqId && !isPendingReqIdExists))) {
       // if (isPopup) window.close()
       // else closeModalAfterRequest()
-      if (!isPopup) closeModalAfterRequest()
+      if (!isPopup)
+        closeModalAfterRequest()
       return null
     }
   }
@@ -197,11 +198,11 @@ export const ModalConfirmConnect = () => {
           >
             {appAvatarTitle}
           </Avatar>
-          <Box overflow={'auto'}>
-            <Typography variant="h5" fontWeight={600} noWrap>
+          <Box>
+            <Typography variant="h5" fontWeight={600}>
               {appName}
             </Typography>
-            <Typography variant="body2" color={'GrayText'} noWrap>
+            <Typography variant="body2" color={'GrayText'}>
               New app would like to connect
             </Typography>
           </Box>

src/components/Modal/ModalConfirmConnect/styled.tsx

@@ -21,8 +21,5 @@ 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,18 +4,22 @@ import { StyledToggleButton } from './styled'
 
 type ActionToggleButtonProps = ToggleButtonProps & {
   description?: string
+  hasinfo?: boolean
 }
 
-export const ActionToggleButton: FC<ActionToggleButtonProps> = (props) => {
+export const ActionToggleButton: FC<ActionToggleButtonProps> = ({ hasinfo = false, ...props }) => {
   const { title, description = '' } = props
   return (
     <StyledToggleButton {...props}>
-      <Typography variant="body2" noWrap className="title">
-        {title}
-      </Typography>
+      <Typography variant="body2">{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,17 +29,4 @@ 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/ModalImportKeys/ModalImportKeys.tsx

@@ -18,7 +18,6 @@ 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: '',
@@ -151,14 +150,14 @@ export const ModalImportKeys = () => {
   return (
     <Modal open={isModalOpened} onClose={handleCloseModal} withCloseButton={false}>
       <Stack paddingTop={'1rem'} gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
-        <HeadingContainer>
+        <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>
-        </HeadingContainer>
+        </Stack>
         <Input
           label="Choose a username"
           fullWidth

src/components/Modal/ModalImportKeys/styled.tsx

@@ -1,5 +1,5 @@
 import { AppLogo } from '@/assets'
-import { Box, Stack, StackProps, styled } from '@mui/material'
+import { Box, styled } from '@mui/material'
 
 export const StyledAppLogo = styled((props) => (
   <Box {...props}>
@@ -12,14 +12,3 @@ 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

@@ -147,7 +147,7 @@ export const ModalLogin = () => {
 
         <Stack gap={'0.5rem'}>
           <Button type="submit" fullWidth disabled={isLoading}>
-            Login {isLoading && <LoadingSpinner />}
+            Add account {isLoading && <LoadingSpinner />}
           </Button>
         </Stack>
       </Stack>

src/components/ReloadBadge/ReloadBadge.tsx

@@ -1,5 +1,5 @@
 import { FC, memo, useCallback } from 'react'
-import { Stack, Typography } from '@mui/material'
+import { Collapse, Stack, Typography } from '@mui/material'
 import { StyledAlert, StyledReloadButton } from './styled'
 import { useSessionStorage } from 'usehooks-ts'
 import { RELOAD_STORAGE_KEY } from '@/utils/consts'
@@ -10,14 +10,16 @@ type ReloadBadgeContentProps = {
 
 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>
+    <Collapse in>
+      <StyledAlert>
+        <Stack direction={'row'} className="content">
+          <Typography flex={1} className="title">
+            New version available!
+          </Typography>
+          <StyledReloadButton onClick={onReload}>Reload</StyledReloadButton>
+        </Stack>
+      </StyledAlert>
+    </Collapse>
   )
 })
 

src/components/Warning/Warning.tsx

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

src/components/Warning/styled.tsx

@@ -7,14 +7,13 @@ export const StyledContainer = styled((props: BoxProps) => <Box {...props} />)((
     padding: '0.5rem',
     display: 'flex',
     alignItems: 'center',
-    gap: '0.5rem',
+    gap: '1rem',
     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 = currentKey?.name || getProfileUsername(profile)
+  const userName = getProfileUsername(profile) || currentKey?.name
   const userAvatar = profile?.info?.picture || ''
   const avatarTitle = getFirstLetter(userName)
 

src/index.css

@@ -1,63 +1,17 @@
-@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;
-  font-family: 'Inter', sans-serif;
+}
+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;
 }
 
 html,

src/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import ThemeProvider from './modules/theme/ThemeProvider'
-import App from './App'
 import './index.css'
+import App from './App'
 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/Layout.tsx

@@ -27,17 +27,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)',
   },
-  '@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, REQ_TTL } from '../utils/consts'
+import { NOAUTHD_URL, WEB_PUSH_PUBKEY, NIP46_RELAYS, MIN_POW, MAX_POW, KIND_RPC, DOMAIN } from '../utils/consts'
 // import { Nip04 } from './nip04'
 import { fetchNip05, getReqPerm, getShortenNpub, isPackagePerm } from '@/utils/helpers/helpers'
 import { NostrPowEvent, minePow } from './pow'
@@ -310,13 +310,6 @@ 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) {

src/modules/theme/theme.ts

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

src/pages/AppPage/App.Page.tsx

@@ -9,6 +9,7 @@ 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'
@@ -19,8 +20,6 @@ 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)
@@ -68,13 +67,12 @@ const AppPage = () => {
     <>
       <Stack maxHeight={'100%'} overflow={'auto'} alignItems={'flex-start'} height={'100%'}>
         <IOSBackButton onNavigate={() => navigate(`key/${npub}`)} />
-
-        <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>
+        <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>
                   {appName}
                 </Typography>
                 {isAppNameExists && (
@@ -82,19 +80,16 @@ const AppPage = () => {
                     {shortAppNpub}
                   </Typography>
                 )}
-              </AppNameContainer>
-
+              </Box>
               <IconButton onClick={handleShowAppDetailsModal}>
                 <MoreIcon />
               </IconButton>
-            </AppInfoContainer>
-
+            </Stack>
             <Typography variant="body2" noWrap>
               {connectedOn}
             </Typography>
           </Box>
-        </HeadingContainer>
-
+        </Stack>
         <Box marginBottom={'1rem'}>
           <SectionTitle marginBottom={'0.5rem'}>Disconnect</SectionTitle>
           <Button fullWidth onClick={handleShow}>

src/pages/AppPage/styled.tsx

@@ -1,32 +1,6 @@
-import { Box, BoxProps, Stack, StackProps, styled } from '@mui/material'
+import { Avatar, AvatarProps, styled } from '@mui/material'
 
-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',
+export const StyledAppIcon = styled((props: AvatarProps) => <Avatar {...props} variant="rounded" />)(() => ({
+  width: 70,
+  height: 70,
 }))

src/pages/KeyPage/components/Apps.tsx

@@ -5,7 +5,9 @@ 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 = {
@@ -14,12 +16,22 @@ 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 marginBottom={'1rem'} display={'flex'} flexDirection={'column'}>
+    <Box flex={1} marginBottom={'1rem'} display={'flex'} flexDirection={'column'} overflow={'auto'}>
       <Stack direction={'row'} alignItems={'center'} justifyContent={'space-between'} marginBottom={'0.5rem'}>
         <SectionTitle>Connected apps</SectionTitle>
         <AppLink title="Discover Apps" onClick={openAppStore} />
@@ -33,7 +45,7 @@ export const Apps: FC<AppsProps> = ({ apps = [] }) => {
         </StyledEmptyAppsBox>
       )}
 
-      <Stack gap={'0.5rem'} overflow={'auto'} flex={1} paddingBottom={'0.75rem'}>
+      <Stack gap={'0.5rem'} overflow={'auto'} flex={1}>
         {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, TypographyProps, styled } from '@mui/material'
+import { CircularProgress, Stack, Typography } from '@mui/material'
 import AutoModeOutlinedIcon from '@mui/icons-material/AutoModeOutlined'
 
 type BackgroundSigningWarningProps = {
@@ -12,29 +12,13 @@ export const BackgroundSigningWarning: FC<BackgroundSigningWarningProps> = ({ is
   return (
     <Warning
       message={
-        <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 direction={'row'} alignItems={'center'} gap={'1rem'}>
+          Enable background service {isEnabling ? <CircularProgress size={'1.5rem'} /> : null}
         </Stack>
       }
-      icon={
-        isEnabling ? (
-          <CircularProgress size={'1.5rem'} sx={{ color: '#fff' }} />
-        ) : (
-          <AutoModeOutlinedIcon htmlColor="white" />
-        )
-      }
+      hint={<Typography variant="body2">Please allow notifications for background operation.</Typography>}
+      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/styled.tsx

@@ -1,5 +1,4 @@
-import { Input } from '@/shared/Input/Input'
-import { AppInputProps } from '@/shared/Input/types'
+import { Input, AppInputProps } from '@/shared/Input/Input'
 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, REQ_TTL } from '@/utils/consts'
+import { ACTION_TYPE } 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 && p.timestamp > Date.now() - REQ_TTL)
+  const filteredPendingReqs = pending.filter((p) => p.npub === npub)
   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,5 +1,4 @@
-import { Input } from '@/shared/Input/Input'
-import { AppInputProps } from '@/shared/Input/types'
+import { Input, AppInputProps } from '@/shared/Input/Input'
 import { Box, Button, ButtonProps, styled, Badge } from '@mui/material'
 import { forwardRef } from 'react'
 

src/routes/AppRoutes.tsx

@@ -1,15 +1,13 @@
 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'
-
-// 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 KeyPage = lazy(() => import('../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'}>

src/shared/Button/Button.tsx

@@ -19,9 +19,6 @@ 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,6 +1,5 @@
 import { useRef } from 'react'
-import { Input } from '../Input/Input'
-import { AppInputProps } from '../Input/types'
+import { Input, AppInputProps } from '../Input/Input'
 
 export type DebounceProps = {
   handleDebounce: (value: string) => void

src/shared/IOSBackButton/styled.tsx

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

src/shared/IconApp/IconApp.tsx

@@ -1,11 +1,8 @@
-import { FC, useEffect, useState } from 'react'
-import { StyledAppIcon, StyledAppImg } from './styled'
-import ImageOutlinedIcon from '@mui/icons-material/ImageOutlined'
-import { IIconApp } from './types'
+import React, { FC, useEffect, useState } from 'react'
 
 const failedCache = new Map<string, boolean>()
 
-export const IconApp: FC<IIconApp> = ({ picture = '', alt, isRounded, isSmall, onClick, size, ...rest }) => {
+export const IconApp: FC<{ picture: string }> = ({ picture }) => {
   const c = failedCache.get(picture)
   const [isFailed, setIsFailed] = useState(c !== undefined ? c : true)
 
@@ -29,21 +26,5 @@ export const IconApp: FC<IIconApp> = ({ picture = '', alt, isRounded, isSmall, o
     }
   }, [picture])
 
-  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>
-  )
+  return <div>IconApp</div>
 }

src/shared/IconApp/const.ts

@@ -1,53 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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,34 +1,74 @@
 import { ReactNode, forwardRef } from 'react'
-import { FormHelperText, FormLabel, InputBase } from '@mui/material'
-import { StyledInputContainer } from './styled'
-import { AppInputProps } from './types'
+import {
+  Box,
+  BoxProps,
+  FormHelperText,
+  FormHelperTextProps,
+  FormLabel,
+  InputBase,
+  InputBaseProps,
+  styled,
+} from '@mui/material'
 
-const renderItem = <T,>(item: T, value: ReactNode) => (item ? value : null)
+export type AppInputProps = InputBaseProps & {
+  helperText?: string | ReactNode
+  helperTextProps?: FormHelperTextProps
+  containerProps?: BoxProps
+  label?: string
+}
 
 export const Input = forwardRef<HTMLInputElement, AppInputProps>(
   ({ helperText, containerProps, helperTextProps, label, ...props }, ref) => {
     return (
       <StyledInputContainer {...containerProps}>
-        {renderItem(
-          label,
+        {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}
         />
-        {renderItem(
-          helperText,
+        {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 0.5rem 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

@@ -1,45 +0,0 @@
-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

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

src/shared/InputCopyButton/styled.tsx

@@ -1,17 +1,7 @@
-import { IconButton, Stack, StackProps, styled } from '@mui/material'
-import { CopyIcon } from '@/assets'
+import { Stack, StackProps, styled } from '@mui/material'
 
 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/types/app-nsec.ts

@@ -1,6 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -11,8 +11,6 @@ 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',
@@ -27,11 +25,3 @@ export const ACTIONS: { [type: string]: string } = {
   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/helpers.ts

@@ -16,7 +16,7 @@ export const getShortenNpub = (npub = '') => {
 }
 
 export const getProfileUsername = (profile: MetaEvent | null) => {
-  if (!profile) return undefined
+  if (!profile) return null
   return profile?.info?.name || profile?.info?.display_name
 }
 
@@ -72,7 +72,6 @@ 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
     }
   }