add prettier

.prettierignore

@@ -0,0 +1 @@
+node_modules/

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120,
+  "bracketSpacing": true,
+  "endOfLine": "lf"
+}

package-lock.json

@@ -64,6 +64,7 @@
         "customize-cra": "^1.0.0",
         "https-browserify": "^1.0.0",
         "os-browserify": "^0.3.0",
+        "prettier": "^3.2.5",
         "process": "^0.11.10",
         "react-app-rewired": "^2.2.1",
         "serve": "^14.2.1",
@@ -14204,6 +14205,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -28324,6 +28340,12 @@
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
     },
+    "prettier": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

package.json

@@ -61,7 +61,8 @@
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-app-rewired eject",
-		"serve": "npm run build && serve -s build"
+    "serve": "npm run build && serve -s build",
+    "format": "npx prettier --write src"
   },
   "eslintConfig": {
     "extends": [
@@ -89,6 +90,7 @@
     "customize-cra": "^1.0.0",
     "https-browserify": "^1.0.0",
     "os-browserify": "^0.3.0",
+    "prettier": "^3.2.5",
     "process": "^0.11.10",
     "react-app-rewired": "^2.2.1",
     "serve": "^14.2.1",

src/App.test.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import App from './App'
 
 test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+  render(<App />)
+  const linkElement = screen.getByText(/learn react/i)
+  expect(linkElement).toBeInTheDocument()
+})

src/App.tsx

@@ -2,12 +2,7 @@ import { DbKey, dbi } from './modules/db'
 import { useCallback, useEffect, useState } from 'react'
 import { swicOnRender } from './modules/swic'
 import { useAppDispatch } from './store/hooks/redux'
-import {
-	setApps,
-	setKeys,
-	setPending,
-	setPerms,
-} from './store/reducers/content.slice'
+import { setApps, setKeys, setPending, setPerms } from './store/reducers/content.slice'
 import AppRoutes from './routes/AppRoutes'
 import { fetchProfile, ndk } from './modules/nostr'
 import { useModalSearchParams } from './hooks/useModalSearchParams'
@@ -55,7 +50,7 @@ function App() {
           // MOCK IMAGE
           icon: 'https://nostr.band/android-chrome-192x192.png',
         })),
-			}),
+      })
     )
 
     const perms = await dbi.listPerms()

src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx

@@ -12,7 +12,6 @@ import { useState } from 'react'
 import { swicCall } from '@/modules/swic'
 import { ACTION_TYPE } from '@/utils/consts'
 
-
 export const ModalConfirmConnect = () => {
   const { getModalOpened, createHandleCloseReplace } = useModalSearchParams()
   const isModalOpened = getModalOpened(MODAL_PARAMS_KEYS.CONFIRM_CONNECT)
@@ -20,9 +19,7 @@ export const ModalConfirmConnect = () => {
   const { npub = '' } = useParams<{ npub: string }>()
   const apps = useAppSelector((state) => selectAppsByNpub(state, npub))
 
-	const [selectedActionType, setSelectedActionType] = useState<ACTION_TYPE>(
-		ACTION_TYPE.BASIC,
-	)
+  const [selectedActionType, setSelectedActionType] = useState<ACTION_TYPE>(ACTION_TYPE.BASIC)
 
   const [searchParams] = useSearchParams()
   const appNpub = searchParams.get('appNpub') || ''
@@ -38,44 +35,32 @@ export const ModalConfirmConnect = () => {
     return setSelectedActionType(value)
   }
 
-	const handleCloseModal = createHandleCloseReplace(
-		MODAL_PARAMS_KEYS.CONFIRM_CONNECT,
-		{
+  const handleCloseModal = createHandleCloseReplace(MODAL_PARAMS_KEYS.CONFIRM_CONNECT, {
     onClose: async (sp) => {
       sp.delete('appNpub')
       sp.delete('reqId')
       await swicCall('confirm', pendingReqId, false, false)
-			}
     },
-	)
-	const closeModalAfterRequest = createHandleCloseReplace(
-		MODAL_PARAMS_KEYS.CONFIRM_CONNECT,
-		{
+  })
+  const closeModalAfterRequest = createHandleCloseReplace(MODAL_PARAMS_KEYS.CONFIRM_CONNECT, {
     onClose: (sp) => {
       sp.delete('appNpub')
       sp.delete('reqId')
     },
-		}
-	)
+  })
 
-	async function confirmPending(
-		id: string,
-		allow: boolean,
-		remember: boolean,
-		options?: any
-	) {
+  async function confirmPending(id: string, allow: boolean, remember: boolean, options?: any) {
     call(async () => {
       await swicCall('confirm', id, allow, remember, options)
       console.log('confirmed', id, allow, remember, options)
       closeModalAfterRequest()
     })
-		if (isPopup) window.close();
+    if (isPopup) window.close()
   }
 
   const allow = () => {
-		const options: any = {};
-		if (selectedActionType === ACTION_TYPE.BASIC)
-			options.perms = [ACTION_TYPE.BASIC];
+    const options: any = {}
+    if (selectedActionType === ACTION_TYPE.BASIC) options.perms = [ACTION_TYPE.BASIC]
     // else
     // 	options.perms = ['connect','get_public_key'];
     confirmPending(pendingReqId, true, true, options)
@@ -86,28 +71,19 @@ export const ModalConfirmConnect = () => {
   }
 
   if (isPopup) {
-		document.addEventListener('visibilitychange', function() {
+    document.addEventListener('visibilitychange', function () {
       if (document.visibilityState == 'hidden') {
-				disallow();
+        disallow()
       }
     })
   }
 
   return (
-		<Modal 
-			open={isModalOpened} 
-			withCloseButton={!isPopup}
-			onClose={!isPopup ? handleCloseModal : undefined}
-		>
+    <Modal open={isModalOpened} withCloseButton={!isPopup} onClose={!isPopup ? handleCloseModal : undefined}>
       <Stack gap={'1rem'} paddingTop={'1rem'}>
-				<Stack
-					direction={'row'}
-					gap={'1rem'}
-					alignItems={'center'}
-					marginBottom={'1rem'}
-				>
+        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} marginBottom={'1rem'}>
           <Avatar
-						variant='square'
+            variant="square"
             sx={{
               width: 56,
               height: 56,
@@ -115,23 +91,19 @@ export const ModalConfirmConnect = () => {
             src={icon}
           />
           <Box>
-						<Typography variant='h5' fontWeight={600}>
+            <Typography variant="h5" fontWeight={600}>
               {appName}
             </Typography>
-						<Typography variant='body2' color={'GrayText'}>
+            <Typography variant="body2" color={'GrayText'}>
               Would like to connect to your account
             </Typography>
           </Box>
         </Stack>
-				<StyledToggleButtonsGroup
-					value={selectedActionType}
-					onChange={handleActionTypeChange}
-					exclusive
-				>
+        <StyledToggleButtonsGroup value={selectedActionType} onChange={handleActionTypeChange} exclusive>
           <ActionToggleButton
             value={ACTION_TYPE.BASIC}
-						title='Basic permissions'
-						description='Read your public key, sign notes and reactions'
+            title="Basic permissions"
+            description="Read your public key, sign notes and reactions"
             // hasinfo
           />
           {/* <ActionToggleButton
@@ -142,21 +114,15 @@ export const ModalConfirmConnect = () => {
 					/> */}
           <ActionToggleButton
             value={ACTION_TYPE.CUSTOM}
-						title='On demand'
-						description='Assign permissions when the app asks for them'
+            title="On demand"
+            description="Assign permissions when the app asks for them"
           />
         </StyledToggleButtonsGroup>
         <Stack direction={'row'} gap={'1rem'}>
-					<StyledButton
-						onClick={disallow}
-						varianttype='secondary'
-					>
+          <StyledButton onClick={disallow} varianttype="secondary">
             Disallow
           </StyledButton>
-					<StyledButton
-						fullWidth
-						onClick={allow}
-					>
+          <StyledButton fullWidth onClick={allow}>
             {/* Allow {selectedActionType} actions */}
             Connect
           </StyledButton>

src/components/Modal/ModalConfirmConnect/styled.tsx

@@ -1,27 +1,19 @@
 import { AppButtonProps, Button } from '@/shared/Button/Button'
-import {
-	ToggleButtonGroup,
-	ToggleButtonGroupProps,
-	styled,
-} from '@mui/material'
+import { ToggleButtonGroup, ToggleButtonGroupProps, styled } from '@mui/material'
 
-export const StyledButton = styled((props: AppButtonProps) => (
-	<Button {...props} />
-))(() => ({
+export const StyledButton = styled((props: AppButtonProps) => <Button {...props} />)(() => ({
   borderRadius: '19px',
   fontWeight: 600,
   padding: '0.75rem 1rem',
   maxHeight: '41px',
 }))
 
-export const StyledToggleButtonsGroup = styled(
-	(props: ToggleButtonGroupProps) => <ToggleButtonGroup {...props} />,
-)(() => ({
+export const StyledToggleButtonsGroup = styled((props: ToggleButtonGroupProps) => <ToggleButtonGroup {...props} />)(
+  () => ({
     gap: '0.75rem',
     marginBottom: '1rem',
     justifyContent: 'space-between',
-	'&.MuiToggleButtonGroup-root .MuiToggleButtonGroup-grouped:not(:first-of-type)':
-		{
+    '&.MuiToggleButtonGroup-root .MuiToggleButtonGroup-grouped:not(:first-of-type)': {
       margin: '0',
       border: 'initial',
     },
@@ -29,4 +21,5 @@ export const StyledToggleButtonsGroup = styled(
       border: 'initial',
       borderRadius: '1rem',
     },
-}))
+  })
+)

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

@@ -7,23 +7,16 @@ type ActionToggleButtonProps = ToggleButtonProps & {
   hasinfo?: boolean
 }
 
-export const ActionToggleButton: FC<ActionToggleButtonProps> = ({
-	hasinfo = false,
-	...props
-}) => {
+export const ActionToggleButton: FC<ActionToggleButtonProps> = ({ hasinfo = false, ...props }) => {
   const { title, description = '' } = props
   return (
     <StyledToggleButton {...props}>
-			<Typography variant='body2'>{title}</Typography>
-			<Typography
-				className='description'
-				variant='caption'
-				color={'GrayText'}
-			>
+      <Typography variant="body2">{title}</Typography>
+      <Typography className="description" variant="caption" color={'GrayText'}>
         {description}
       </Typography>
       {hasinfo && (
-				<Typography className='info' color={'GrayText'}>
+        <Typography className="info" color={'GrayText'}>
           Info
         </Typography>
       )}

src/components/Modal/ModalConfirmEvent/ModalConfirmEvent.tsx

@@ -2,26 +2,13 @@ import { useModalSearchParams } from '@/hooks/useModalSearchParams'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
 import { call, getShortenNpub, getSignReqKind } from '@/utils/helpers/helpers'
-import {
-	Avatar,
-	Box,
-	List,
-	ListItem,
-	ListItemIcon,
-	ListItemText,
-	Stack,
-	Typography,
-} from '@mui/material'
+import { Avatar, Box, List, ListItem, ListItemIcon, ListItemText, Stack, Typography } from '@mui/material'
 import { useParams, useSearchParams } from 'react-router-dom'
 import { useAppSelector } from '@/store/hooks/redux'
 import { selectAppsByNpub } from '@/store'
 import { ActionToggleButton } from './сomponents/ActionToggleButton'
 import { FC, useEffect, useMemo, useState } from 'react'
-import {
-	StyledActionsListContainer,
-	StyledButton,
-	StyledToggleButtonsGroup,
-} from './styled'
+import { StyledActionsListContainer, StyledButton, StyledToggleButtonsGroup } from './styled'
 import { SectionTitle } from '@/shared/SectionTitle/SectionTitle'
 import { swicCall } from '@/modules/swic'
 import { Checkbox } from '@/shared/Checkbox/Checkbox'
@@ -47,9 +34,7 @@ type ModalConfirmEventProps = {
 
 type PendingRequest = DbPending & { checked: boolean }
 
-export const ModalConfirmEvent: FC<ModalConfirmEventProps> = ({
-	confirmEventReqs,
-}) => {
+export const ModalConfirmEvent: FC<ModalConfirmEventProps> = ({ confirmEventReqs }) => {
   const { getModalOpened, createHandleCloseReplace } = useModalSearchParams()
   const isModalOpened = getModalOpened(MODAL_PARAMS_KEYS.CONFIRM_EVENT)
   const [searchParams] = useSearchParams()
@@ -60,20 +45,13 @@ export const ModalConfirmEvent: FC<ModalConfirmEventProps> = ({
   const { npub = '' } = useParams<{ npub: string }>()
   const apps = useAppSelector((state) => selectAppsByNpub(state, npub))
 
-	const [selectedActionType, setSelectedActionType] = useState<ACTION_TYPE>(
-		ACTION_TYPE.ALWAYS,
-	)
+  const [selectedActionType, setSelectedActionType] = useState<ACTION_TYPE>(ACTION_TYPE.ALWAYS)
   const [pendingRequests, setPendingRequests] = useState<PendingRequest[]>([])
 
-	const currentAppPendingReqs = useMemo(
-		() => confirmEventReqs[appNpub]?.pending || [],
-		[confirmEventReqs, appNpub],
-	)
+  const currentAppPendingReqs = useMemo(() => confirmEventReqs[appNpub]?.pending || [], [confirmEventReqs, appNpub])
 
   useEffect(() => {
-		setPendingRequests(
-			currentAppPendingReqs.map((pr) => ({ ...pr, checked: true })),
-		)
+    setPendingRequests(currentAppPendingReqs.map((pr) => ({ ...pr, checked: true })))
   }, [currentAppPendingReqs])
 
   const triggerApp = apps.find((app) => app.appNpub === appNpub)
@@ -87,28 +65,20 @@ export const ModalConfirmEvent: FC<ModalConfirmEventProps> = ({
 
   const selectedPendingRequests = pendingRequests.filter((pr) => pr.checked)
 
-	const handleCloseModal = createHandleCloseReplace(
-		MODAL_PARAMS_KEYS.CONFIRM_EVENT,
-		{
+  const handleCloseModal = createHandleCloseReplace(MODAL_PARAMS_KEYS.CONFIRM_EVENT, {
     onClose: (sp) => {
       sp.delete('appNpub')
       sp.delete('reqId')
-				selectedPendingRequests.forEach(
-					async (req) => await swicCall('confirm', req.id, false, false),
-				)
-			}
-		}
-	)
+      selectedPendingRequests.forEach(async (req) => await swicCall('confirm', req.id, false, false))
+    },
+  })
 
-	const closeModalAfterRequest = createHandleCloseReplace(
-		MODAL_PARAMS_KEYS.CONFIRM_EVENT,
-		{
+  const closeModalAfterRequest = createHandleCloseReplace(MODAL_PARAMS_KEYS.CONFIRM_EVENT, {
     onClose: (sp) => {
       sp.delete('appNpub')
       sp.delete('reqId')
-			}
-		}
-	)
+    },
+  })
 
   async function confirmPending(allow: boolean) {
     selectedPendingRequests.forEach((req) => {
@@ -119,7 +89,7 @@ export const ModalConfirmEvent: FC<ModalConfirmEventProps> = ({
       })
     })
     closeModalAfterRequest()
-		if (isPopup) window.close();
+    if (isPopup) window.close()
   }
 
   const handleChangeCheckbox = (reqId: string) => () => {
@@ -142,26 +112,17 @@ export const ModalConfirmEvent: FC<ModalConfirmEventProps> = ({
   if (isPopup) {
     document.addEventListener('visibilitychange', () => {
       if (document.visibilityState == 'hidden') {
-				confirmPending(false);
+        confirmPending(false)
       }
     })
   }
 
   return (
-		<Modal
-			open={isModalOpened}
-			withCloseButton={!isPopup}
-			onClose={!isPopup ? handleCloseModal : undefined}
-		>
+    <Modal open={isModalOpened} withCloseButton={!isPopup} onClose={!isPopup ? handleCloseModal : undefined}>
       <Stack gap={'1rem'} paddingTop={'1rem'}>
-				<Stack
-					direction={'row'}
-					gap={'1rem'}
-					alignItems={'center'}
-					marginBottom={'1rem'}
-				>
+        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} marginBottom={'1rem'}>
           <Avatar
-						variant='square'
+            variant="square"
             sx={{
               width: 56,
               height: 56,
@@ -170,10 +131,10 @@ export const ModalConfirmEvent: FC<ModalConfirmEventProps> = ({
             src={icon}
           />
           <Box>
-						<Typography variant='h5' fontWeight={600}>
+            <Typography variant="h5" fontWeight={600}>
               {appName}
             </Typography>
-						<Typography variant='body2' color={'GrayText'}>
+            <Typography variant="body2" color={'GrayText'}>
               Would like your permission to
             </Typography>
           </Box>
@@ -186,34 +147,17 @@ export const ModalConfirmEvent: FC<ModalConfirmEventProps> = ({
               return (
                 <ListItem key={req.id}>
                   <ListItemIcon>
-										<Checkbox
-											checked={req.checked}
-											onChange={handleChangeCheckbox(
-												req.id,
-											)}
-										/>
+                    <Checkbox checked={req.checked} onChange={handleChangeCheckbox(req.id)} />
                   </ListItemIcon>
-									<ListItemText>
-										{getAction(req)}
-									</ListItemText>
+                  <ListItemText>{getAction(req)}</ListItemText>
                 </ListItem>
               )
             })}
           </List>
         </StyledActionsListContainer>
-				<StyledToggleButtonsGroup
-					value={selectedActionType}
-					onChange={handleActionTypeChange}
-					exclusive
-				>
-					<ActionToggleButton
-						value={ACTION_TYPE.ALWAYS}
-						title='Always'
-					/>
-					<ActionToggleButton
-						value={ACTION_TYPE.ONCE}
-						title='Just once'
-					/>
+        <StyledToggleButtonsGroup value={selectedActionType} onChange={handleActionTypeChange} exclusive>
+          <ActionToggleButton value={ACTION_TYPE.ALWAYS} title="Always" />
+          <ActionToggleButton value={ACTION_TYPE.ONCE} title="Just once" />
           {/* <ActionToggleButton
 						value={ACTION_TYPE.ALLOW_ALL}
 						title='Allow All Advanced Actions'
@@ -222,15 +166,10 @@ export const ModalConfirmEvent: FC<ModalConfirmEventProps> = ({
         </StyledToggleButtonsGroup>
 
         <Stack direction={'row'} gap={'1rem'}>
-					<StyledButton
-						onClick={() => confirmPending(false)}
-						varianttype='secondary'
-					>
+          <StyledButton onClick={() => confirmPending(false)} varianttype="secondary">
             Disallow {ACTION_LABELS[selectedActionType]}
           </StyledButton>
-					<StyledButton onClick={() => confirmPending(true)}>
-						Allow {ACTION_LABELS[selectedActionType]}
-					</StyledButton>
+          <StyledButton onClick={() => confirmPending(true)}>Allow {ACTION_LABELS[selectedActionType]}</StyledButton>
         </Stack>
       </Stack>
     </Modal>

src/components/Modal/ModalConfirmEvent/styled.tsx

@@ -1,29 +1,19 @@
 import { AppButtonProps, Button } from '@/shared/Button/Button'
-import {
-	Stack,
-	StackProps,
-	ToggleButtonGroup,
-	ToggleButtonGroupProps,
-	styled,
-} from '@mui/material'
+import { Stack, StackProps, ToggleButtonGroup, ToggleButtonGroupProps, styled } from '@mui/material'
 
-export const StyledButton = styled((props: AppButtonProps) => (
-	<Button {...props} />
-))(() => ({
+export const StyledButton = styled((props: AppButtonProps) => <Button {...props} />)(() => ({
   borderRadius: '19px',
   fontWeight: 600,
   padding: '0.75rem 1rem',
   maxHeight: '41px',
 }))
 
-export const StyledToggleButtonsGroup = styled(
-	(props: ToggleButtonGroupProps) => <ToggleButtonGroup {...props} />,
-)(() => ({
+export const StyledToggleButtonsGroup = styled((props: ToggleButtonGroupProps) => <ToggleButtonGroup {...props} />)(
+  () => ({
     gap: '0.75rem',
     marginBottom: '1rem',
     justifyContent: 'space-between',
-	'&.MuiToggleButtonGroup-root .MuiToggleButtonGroup-grouped:not(:first-of-type)':
-		{
+    '&.MuiToggleButtonGroup-root .MuiToggleButtonGroup-grouped:not(:first-of-type)': {
       margin: '0',
       border: 'initial',
     },
@@ -31,11 +21,10 @@ export const StyledToggleButtonsGroup = styled(
       border: 'initial',
       borderRadius: '1rem',
     },
-}))
+  })
+)
 
-export const StyledActionsListContainer = styled((props: StackProps) => (
-	<Stack {...props} />
-))(({ theme }) => ({
+export const StyledActionsListContainer = styled((props: StackProps) => <Stack {...props} />)(({ theme }) => ({
   padding: '0.75rem',
   background: theme.palette.backgroundSecondary.default,
   borderRadius: '1rem',

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

@@ -6,16 +6,13 @@ type ActionToggleButtonProps = ToggleButtonProps & {
   hasinfo?: boolean
 }
 
-export const ActionToggleButton: FC<ActionToggleButtonProps> = ({
-	hasinfo = false,
-	...props
-}) => {
+export const ActionToggleButton: FC<ActionToggleButtonProps> = ({ hasinfo = false, ...props }) => {
   const { title } = props
   return (
     <StyledToggleButton {...props}>
-			<Typography variant='body2'>{title}</Typography>
+      <Typography variant="body2">{title}</Typography>
       {hasinfo && (
-				<Typography className='info' color={'GrayText'}>
+        <Typography className="info" color={'GrayText'}>
           Info
         </Typography>
       )}

src/components/Modal/ModalConnectApp/ModalConnectApp.tsx

@@ -16,14 +16,11 @@ export const ModalConnectApp = () => {
   const timerRef = useRef<NodeJS.Timeout>()
 
   const isModalOpened = getModalOpened(MODAL_PARAMS_KEYS.CONNECT_APP)
-	const handleCloseModal = createHandleCloseReplace(
-		MODAL_PARAMS_KEYS.CONNECT_APP, 
-		{
+  const handleCloseModal = createHandleCloseReplace(MODAL_PARAMS_KEYS.CONNECT_APP, {
     onClose: () => {
       clearTimeout(timerRef.current)
-			}
-		}
-	)
+    },
+  })
 
   const notify = useEnqueueSnackbar()
 
@@ -54,32 +51,18 @@ export const ModalConnectApp = () => {
   }
 
   return (
-		<Modal
-			open={isModalOpened}
-			title='Share your profile'
-			onClose={handleCloseModal}
-		>
+    <Modal open={isModalOpened} title="Share your profile" onClose={handleCloseModal}>
       <Stack gap={'1rem'} alignItems={'center'}>
-				<Typography variant='caption'>
-					Please, copy this code and paste it into the app to log in
-				</Typography>
+        <Typography variant="caption">Please, copy this code and paste it into the app to log in</Typography>
         <Input
           sx={{
             gap: '0.5rem',
           }}
           fullWidth
           value={bunkerStr}
-					endAdornment={
-						<InputCopyButton
-							value={bunkerStr}
-							onCopy={handleCopy}
-						/>
-					}
-				/>
-				<AppLink
-					title='What is this?'
-					onClick={() => handleOpen(MODAL_PARAMS_KEYS.EXPLANATION)}
+          endAdornment={<InputCopyButton value={bunkerStr} onCopy={handleCopy} />}
         />
+        <AppLink title="What is this?" onClick={() => handleOpen(MODAL_PARAMS_KEYS.EXPLANATION)} />
         <Button fullWidth onClick={handleShareBunker}>
           Share it
         </Button>

src/components/Modal/ModalExplanation/ModalExplanation.tsx

@@ -10,9 +10,7 @@ type ModalExplanationProps = {
   explanationText?: string
 }
 
-export const ModalExplanation: FC<ModalExplanationProps> = ({
-	explanationText = '',
-}) => {
+export const ModalExplanation: FC<ModalExplanationProps> = ({ explanationText = '' }) => {
   const { getModalOpened } = useModalSearchParams()
   const isModalOpened = getModalOpened(MODAL_PARAMS_KEYS.EXPLANATION)
   const [searchParams, setSearchParams] = useSearchParams()
@@ -25,7 +23,7 @@ export const ModalExplanation: FC<ModalExplanationProps> = ({
 
   return (
     <Modal
-			title='What is this?'
+      title="What is this?"
       open={isModalOpened}
       onClose={handleCloseModal}
       PaperProps={{

src/components/Modal/ModalImportKeys/ModalImportKeys.tsx

@@ -40,26 +40,21 @@ export const ModalImportKeys = () => {
   return (
     <Modal open={isModalOpened} onClose={handleCloseModal}>
       <Stack gap={'1rem'} component={'form'} onSubmit={handleSubmit}>
-				<Stack
-					direction={'row'}
-					gap={'1rem'}
-					alignItems={'center'}
-					alignSelf={'flex-start'}
-				>
+        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
           <StyledAppLogo />
-					<Typography fontWeight={600} variant='h5'>
+          <Typography fontWeight={600} variant="h5">
             Import keys
           </Typography>
         </Stack>
         <Input
-					label='Enter a NSEC'
-					placeholder='Your NSEC'
+          label="Enter a NSEC"
+          placeholder="Your NSEC"
           value={enteredNsec}
           onChange={handleNsecChange}
           fullWidth
-					type='password'
+          type="password"
         />
-				<Button type='submit'>Import nsec</Button>
+        <Button type="submit">Import nsec</Button>
       </Stack>
     </Modal>
   )

src/components/Modal/ModalInitial/ModalInitial.tsx

@@ -29,27 +29,13 @@ export const ModalInitial = () => {
   return (
     <Modal open={isModalOpened} onClose={handleCloseModal}>
       <Stack paddingTop={'0.5rem'} gap={'1rem'}>
-				<Button onClick={() => handleOpen(MODAL_PARAMS_KEYS.SIGN_UP)}>
-					Sign up
-				</Button>
-				<Button onClick={() => handleOpen(MODAL_PARAMS_KEYS.LOGIN)}>
-					Login
-				</Button>
-				<AppLink
-					title='Advanced'
-					alignSelf={'center'}
-					onClick={handleShowAdvanced}
-				/>
+        <Button onClick={() => handleOpen(MODAL_PARAMS_KEYS.SIGN_UP)}>Sign up</Button>
+        <Button onClick={() => handleOpen(MODAL_PARAMS_KEYS.LOGIN)}>Login</Button>
+        <AppLink title="Advanced" alignSelf={'center'} onClick={handleShowAdvanced} />
 
         {showAdvancedContent && (
           <Fade in>
-						<Button
-							onClick={() =>
-								handleOpen(MODAL_PARAMS_KEYS.IMPORT_KEYS)
-							}
-						>
-							Import keys
-						</Button>
+            <Button onClick={() => handleOpen(MODAL_PARAMS_KEYS.IMPORT_KEYS)}>Import keys</Button>
           </Fade>
         )}
       </Stack>

src/components/Modal/ModalLogin/ModalLogin.tsx

@@ -42,8 +42,7 @@ export const ModalLogin = () => {
 
   const [isPasswordShown, setIsPasswordShown] = useState(false)
 
-	const handlePasswordTypeChange = () =>
-		setIsPasswordShown((prevState) => !prevState)
+  const handlePasswordTypeChange = () => setIsPasswordShown((prevState) => !prevState)
 
   const cleanUpStates = useCallback(() => {
     setIsPasswordShown(false)
@@ -60,8 +59,7 @@ export const ModalLogin = () => {
           npub += '@' + DOMAIN
         } else {
           const nameDomain = npub.split('@')
-					if (nameDomain[1] === DOMAIN)
-						name = nameDomain[0];
+          if (nameDomain[1] === DOMAIN) name = nameDomain[0]
         }
       }
       if (npub.includes('@')) {
@@ -77,7 +75,7 @@ export const ModalLogin = () => {
       cleanUpStates()
       navigate(`/key/${k.npub}`)
     } catch (error: any) {
-			console.log("error", error);
+      console.log('error', error)
       notify(error?.message || 'Something went wrong!', 'error')
     }
   }
@@ -93,50 +91,34 @@ export const ModalLogin = () => {
 
   return (
     <Modal open={isModalOpened} onClose={handleCloseModal}>
-			<Stack
-				gap={'1rem'}
-				component={'form'}
-				onSubmit={handleSubmit(submitHandler)}
-			>
-				<Stack
-					direction={'row'}
-					gap={'1rem'}
-					alignItems={'center'}
-					alignSelf={'flex-start'}
-				>
+      <Stack gap={'1rem'} component={'form'} onSubmit={handleSubmit(submitHandler)}>
+        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
           <StyledAppLogo />
-					<Typography fontWeight={600} variant='h5'>
+          <Typography fontWeight={600} variant="h5">
             Login
           </Typography>
         </Stack>
         <Input
-					label='Username or nip05 or npub'
+          label="Username or nip05 or npub"
           fullWidth
-					placeholder='name or name@domain.com or npub1...'
+          placeholder="name or name@domain.com or npub1..."
           {...register('username')}
           error={!!errors.username}
         />
         <Input
-					label='Password'
+          label="Password"
           fullWidth
-					placeholder='Your password'
+          placeholder="Your password"
           {...register('password')}
           endAdornment={
-						<IconButton
-							size='small'
-							onClick={handlePasswordTypeChange}
-						>
-							{isPasswordShown ? (
-								<VisibilityOffOutlinedIcon />
-							) : (
-								<VisibilityOutlinedIcon />
-							)}
+            <IconButton size="small" onClick={handlePasswordTypeChange}>
+              {isPasswordShown ? <VisibilityOffOutlinedIcon /> : <VisibilityOutlinedIcon />}
             </IconButton>
           }
           type={isPasswordShown ? 'text' : 'password'}
           error={!!errors.password}
         />
-				<Button type='submit' fullWidth>
+        <Button type="submit" fullWidth>
           Add account
         </Button>
       </Stack>

src/components/Modal/ModalLogin/const.ts

@@ -6,9 +6,7 @@ export const schema = yup.object().shape({
     .test('Domain validation', 'The domain is required!', function (value) {
       if (!value || !value.trim().length) return false
 
-			const USERNAME_WITH_DOMAIN_REGEXP = new RegExp(
-				/^[\w-.]+@([\w-]+\.)+[\w-]{2,8}$/g,
-			)
+      const USERNAME_WITH_DOMAIN_REGEXP = new RegExp(/^[\w-.]+@([\w-]+\.)+[\w-]{2,8}$/g)
       return USERNAME_WITH_DOMAIN_REGEXP.test(value)
     })
     .required(),

src/components/Modal/ModalSettings/ModalSettings.tsx

@@ -2,18 +2,8 @@ import { useModalSearchParams } from '@/hooks/useModalSearchParams'
 import { Button } from '@/shared/Button/Button'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
-import {
-	Box,
-	CircularProgress,
-	IconButton,
-	Stack,
-	Typography,
-} from '@mui/material'
-import {
-	StyledButton,
-	StyledSettingContainer,
-	StyledSynchedText,
-} from './styled'
+import { Box, CircularProgress, IconButton, Stack, Typography } from '@mui/material'
+import { StyledButton, StyledSettingContainer, StyledSynchedText } from './styled'
 import { SectionTitle } from '@/shared/SectionTitle/SectionTitle'
 import { CheckmarkIcon } from '@/assets'
 import { Input } from '@/shared/Input/Input'
@@ -47,7 +37,6 @@ export const ModalSettings: FC<ModalSettingsProps> = ({ isSynced }) => {
 
   const [isLoading, setIsLoading] = useState(false)
 
-
   useEffect(() => setIsChecked(isSynced), [isModalOpened, isSynced])
 
   const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -55,8 +44,7 @@ export const ModalSettings: FC<ModalSettingsProps> = ({ isSynced }) => {
     setEnteredPassword(e.target.value)
   }
 
-	const handlePasswordTypeChange = () =>
-		setIsPasswordShown((prevState) => !prevState)
+  const handlePasswordTypeChange = () => setIsPasswordShown((prevState) => !prevState)
 
   const onClose = () => {
     handleCloseModal()
@@ -90,7 +78,7 @@ export const ModalSettings: FC<ModalSettingsProps> = ({ isSynced }) => {
   }
 
   return (
-		<Modal open={isModalOpened} onClose={onClose} title='Settings'>
+    <Modal open={isModalOpened} onClose={onClose} title="Settings">
       <Stack gap={'1rem'}>
         <StyledSettingContainer onSubmit={handleSubmit}>
           <Stack direction={'row'} justifyContent={'space-between'}>
@@ -102,35 +90,25 @@ export const ModalSettings: FC<ModalSettingsProps> = ({ isSynced }) => {
             )}
           </Stack>
           <Box>
-						<Checkbox
-							onChange={handleChangeCheckbox}
-							checked={isChecked}
-						/>
-						<Typography variant='caption'>
-							Use this key on multiple devices
-						</Typography>
+            <Checkbox onChange={handleChangeCheckbox} checked={isChecked} />
+            <Typography variant="caption">Use this key on multiple devices</Typography>
           </Box>
           <Input
             fullWidth
             endAdornment={
-							<IconButton
-								size='small'
-								onClick={handlePasswordTypeChange}
-							>
+              <IconButton size="small" onClick={handlePasswordTypeChange}>
                 {isPasswordShown ? (
-									<VisibilityOffOutlinedIcon htmlColor='#6b6b6b' />
+                  <VisibilityOffOutlinedIcon htmlColor="#6b6b6b" />
                 ) : (
-									<VisibilityOutlinedIcon htmlColor='#6b6b6b' />
+                  <VisibilityOutlinedIcon htmlColor="#6b6b6b" />
                 )}
               </IconButton>
             }
             type={isPasswordShown ? 'text' : 'password'}
             onChange={handlePasswordChange}
             value={enteredPassword}
-						helperText={
-							isPasswordInvalid ? 'Invalid password' : ''
-						}
-						placeholder='Enter a password'
+            helperText={isPasswordInvalid ? 'Invalid password' : ''}
+            placeholder="Enter a password"
             helperTextProps={{
               sx: {
                 '&.helper_text': {
@@ -141,26 +119,17 @@ export const ModalSettings: FC<ModalSettingsProps> = ({ isSynced }) => {
             disabled={!isChecked}
           />
           {isSynced ? (
-						<Typography variant='body2' color={'GrayText'}>
+            <Typography variant="body2" color={'GrayText'}>
               To change your password, type a new one and sync.
             </Typography>
           ) : (
-						<Typography variant='body2' color={'GrayText'}>
-							This key will be encrypted and stored on our server. You can use the password to download this key onto another device.
+            <Typography variant="body2" color={'GrayText'}>
+              This key will be encrypted and stored on our server. You can use the password to download this key onto
+              another device.
             </Typography>
           )}
-					<StyledButton
-						type='submit'
-						fullWidth
-						disabled={!isChecked}
-					>
-						Sync{' '}
-						{isLoading && (
-							<CircularProgress
-								sx={{ marginLeft: '0.5rem' }}
-								size={'1rem'}
-							/>
-						)}
+          <StyledButton type="submit" fullWidth disabled={!isChecked}>
+            Sync {isLoading && <CircularProgress sx={{ marginLeft: '0.5rem' }} size={'1rem'} />}
           </StyledButton>
         </StyledSettingContainer>
         <Button onClick={onClose}>Done</Button>

src/components/Modal/ModalSettings/styled.tsx

@@ -1,11 +1,5 @@
 import { Button } from '@/shared/Button/Button'
-import {
-	Stack,
-	StackProps,
-	Typography,
-	TypographyProps,
-	styled,
-} from '@mui/material'
+import { Stack, StackProps, Typography, TypographyProps, styled } from '@mui/material'
 
 export const StyledSettingContainer = styled((props: StackProps) => (
   <Stack gap={'0.75rem'} component={'form'} {...props} />
@@ -28,9 +22,9 @@ export const StyledButton = styled(Button)(({ theme }) => {
   }
 })
 
-export const StyledSynchedText = styled((props: TypographyProps) => (
-	<Typography variant='caption' {...props} />
-))(({ theme }) => {
+export const StyledSynchedText = styled((props: TypographyProps) => <Typography variant="caption" {...props} />)(({
+  theme,
+}) => {
   return {
     color: theme.palette.success.main,
   }

src/components/Modal/ModalSignUp/ModalSignUp.tsx

@@ -36,20 +36,17 @@ export const ModalSignUp = () => {
     }
   }
 
-	const inputHelperText = enteredValue 
-	? (
+  const inputHelperText = enteredValue ? (
     isAvailable ? (
       <>
         <CheckmarkIcon /> Available
       </>
     ) : (
-			<>
-				Already taken
-			</>
+      <>Already taken</>
     )
   ) : (
     "Don't worry, username can be changed later."
-	);
+  )
 
   const handleSubmit = async (e: React.FormEvent) => {
     const name = enteredValue.trim()
@@ -66,48 +63,35 @@ export const ModalSignUp = () => {
 
   return (
     <Modal open={isModalOpened} onClose={handleCloseModal}>
-			<Stack
-				paddingTop={'1rem'}
-				gap={'1rem'}
-				component={'form'}
-				onSubmit={handleSubmit}
-			>
-				<Stack
-					direction={'row'}
-					gap={'1rem'}
-					alignItems={'center'}
-					alignSelf={'flex-start'}
-				>
+      <Stack paddingTop={'1rem'} gap={'1rem'} component={'form'} onSubmit={handleSubmit}>
+        <Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
           <StyledAppLogo />
-					<Typography fontWeight={600} variant='h5'>
+          <Typography fontWeight={600} variant="h5">
             Sign up
           </Typography>
         </Stack>
         <Input
-					label='Enter a Username'
+          label="Enter a Username"
           fullWidth
-					placeholder='Username'
+          placeholder="Username"
           helperText={inputHelperText}
-					endAdornment={
-						<Typography color={'#FFFFFFA8'}>@{DOMAIN}</Typography>
-					}
+          endAdornment={<Typography color={'#FFFFFFA8'}>@{DOMAIN}</Typography>}
           onChange={handleInputChange}
           value={enteredValue}
           helperTextProps={{
             sx: {
               '&.helper_text': {
-								color: enteredValue && isAvailable
+                color:
+                  enteredValue && isAvailable
                     ? theme.palette.success.main
-									: (enteredValue && !isAvailable
+                    : enteredValue && !isAvailable
                       ? theme.palette.error.main
-										 : theme.palette.textSecondaryDecorate.main
-										)
-								,
+                      : theme.palette.textSecondaryDecorate.main,
               },
             },
           }}
         />
-				<Button fullWidth type='submit'>
+        <Button fullWidth type="submit">
           Create account
         </Button>
       </Stack>

src/components/Notification/Notification.tsx

@@ -5,8 +5,7 @@ import CloseIcon from '@mui/icons-material/Close'
 import { NotificationProps } from './types'
 import { StyledAlert, StyledContainer } from './styled'
 
-export const Notification = forwardRef<HTMLDivElement, NotificationProps>(
-	({ message, alertvariant, id }, ref) => {
+export const Notification = forwardRef<HTMLDivElement, NotificationProps>(({ message, alertvariant, id }, ref) => {
   const { closeSnackbar } = useSnackbar()
 
   const closeSnackBarHandler = () => closeSnackbar(id)
@@ -14,12 +13,11 @@ export const Notification = forwardRef<HTMLDivElement, NotificationProps>(
   return (
     <StyledAlert alertvariant={alertvariant} ref={ref}>
       <StyledContainer>
-					<Typography variant='body1'>{message}</Typography>
-					<IconButton onClick={closeSnackBarHandler} color='inherit'>
-						<CloseIcon color='inherit' />
+        <Typography variant="body1">{message}</Typography>
+        <IconButton onClick={closeSnackBarHandler} color="inherit">
+          <CloseIcon color="inherit" />
         </IconButton>
       </StyledContainer>
     </StyledAlert>
   )
-	},
-)
+})

src/components/Notification/styled.tsx

@@ -4,9 +4,7 @@ import { BORDER_STYLES } from './const'
 import { forwardRef } from 'react'
 
 export const StyledAlert = styled(
-	forwardRef<HTMLDivElement, StyledAlertProps>((props, ref) => (
-		<Alert {...props} ref={ref} icon={false} />
-	)),
+  forwardRef<HTMLDivElement, StyledAlertProps>((props, ref) => <Alert {...props} ref={ref} icon={false} />)
 )(({ alertvariant }) => ({
   width: '100%',
   maxHeight: 56,

src/components/Warning/styled.tsx

@@ -1,7 +1,6 @@
 import { Box, BoxProps, styled } from '@mui/material'
 
-export const StyledContainer = styled((props: BoxProps) => <Box {...props} />)(
-	() => {
+export const StyledContainer = styled((props: BoxProps) => <Box {...props} />)(() => {
   return {
     borderRadius: '4px',
     border: '1px solid grey',
@@ -11,16 +10,13 @@ export const StyledContainer = styled((props: BoxProps) => <Box {...props} />)(
     gap: '1rem',
     cursor: 'pointer',
   }
-	},
-)
+})
 
-export const IconContainer = styled((props: BoxProps) => <Box {...props} />)(
-	() => ({
+export const IconContainer = styled((props: BoxProps) => <Box {...props} />)(() => ({
   width: '40px',
   height: '40px',
   borderRadius: '50%',
   background: 'blue',
   display: 'grid',
   placeItems: 'center',
-	}),
-)
+}))

src/hooks/useEnqueueSnackbar.tsx

@@ -1,30 +1,17 @@
-import {
-	useSnackbar as useDefaultSnackbar,
-	OptionsObject,
-	VariantType,
-} from 'notistack'
+import { useSnackbar as useDefaultSnackbar, OptionsObject, VariantType } from 'notistack'
 import { Notification } from '../components/Notification/Notification'
 
 export const useEnqueueSnackbar = () => {
   const { enqueueSnackbar } = useDefaultSnackbar()
 
-	const showSnackbar = (
-		message: string,
-		variant: Exclude<VariantType, 'default' | 'info'> = 'success',
-	) => {
+  const showSnackbar = (message: string, variant: Exclude<VariantType, 'default' | 'info'> = 'success') => {
     enqueueSnackbar(message, {
       anchorOrigin: {
         vertical: 'top',
         horizontal: 'right',
       },
       content: (id) => {
-				return (
-					<Notification
-						id={id}
-						message={message}
-						alertvariant={variant}
-					/>
-				)
+        return <Notification id={id} message={message} alertvariant={variant} />
       },
     } as OptionsObject)
   }

src/hooks/useIsIOS.ts

@@ -12,8 +12,7 @@ function useIsIOS() {
 
   useEffect(() => {
     const isIOSUserAgent =
-			iOSRegex.test(navigator.userAgent) ||
-			(navigator.userAgent.includes('Mac') && 'ontouchend' in document)
+      iOSRegex.test(navigator.userAgent) || (navigator.userAgent.includes('Mac') && 'ontouchend' in document)
     setIsIOS(isIOSUserAgent)
   }, [])
 

src/hooks/useModalSearchParams.ts

@@ -1,11 +1,6 @@
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
 import { useCallback } from 'react'
-import {
-	createSearchParams,
-	useLocation,
-	useNavigate,
-	useSearchParams,
-} from 'react-router-dom'
+import { createSearchParams, useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 
 type SearchParamsType = {
   [key: string]: string
@@ -29,14 +24,10 @@ export const useModalSearchParams = () => {
   const navigate = useNavigate()
 
   const getEnumParam = useCallback((modal: MODAL_PARAMS_KEYS) => {
-		return Object.values(MODAL_PARAMS_KEYS)[
-			Object.values(MODAL_PARAMS_KEYS).indexOf(modal)
-		]
+    return Object.values(MODAL_PARAMS_KEYS)[Object.values(MODAL_PARAMS_KEYS).indexOf(modal)]
   }, [])
 
-	const createHandleClose =
-		(modal: MODAL_PARAMS_KEYS, extraOptions?: IExtraCloseOptions) =>
-		() => {
+  const createHandleClose = (modal: MODAL_PARAMS_KEYS, extraOptions?: IExtraCloseOptions) => () => {
     const enumKey = getEnumParam(modal)
     searchParams.delete(enumKey)
     extraOptions?.onClose && extraOptions?.onClose(searchParams)
@@ -44,8 +35,7 @@ export const useModalSearchParams = () => {
     setSearchParams(searchParams, { replace: !!extraOptions?.replace })
   }
 
-	const createHandleCloseReplace =
-		(modal: MODAL_PARAMS_KEYS, extraOptions: IExtraCloseOptions = {}) => {
+  const createHandleCloseReplace = (modal: MODAL_PARAMS_KEYS, extraOptions: IExtraCloseOptions = {}) => {
     return createHandleClose(modal, { ...extraOptions, replace: true })
   }
 
@@ -63,19 +53,17 @@ export const useModalSearchParams = () => {
 
       const searchString = !extraOptions?.append
         ? createSearchParams(searchParamsData).toString()
-				: `${location.search}&${createSearchParams(
-						searchParamsData,
-				  ).toString()}`
+        : `${location.search}&${createSearchParams(searchParamsData).toString()}`
 
       navigate(
         {
           pathname: location.pathname,
           search: searchString,
         },
-				{ replace: !!extraOptions?.replace },
+        { replace: !!extraOptions?.replace }
       )
     },
-		[location, navigate, getEnumParam],
+    [location, navigate, getEnumParam]
   )
 
   const getModalOpened = useCallback(
@@ -84,7 +72,7 @@ export const useModalSearchParams = () => {
       const modalOpened = searchParams.get(enumKey) === 'true'
       return modalOpened
     },
-		[getEnumParam, searchParams],
+    [getEnumParam, searchParams]
   )
 
   return {

src/index.css

@@ -4,16 +4,14 @@
   box-sizing: border-box;
 }
 body {
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-		'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-		'Helvetica Neue', sans-serif;
+  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: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
 html,

src/index.tsx

@@ -25,7 +25,7 @@ root.render(
         </PersistGate>
       </Provider>
     </BrowserRouter>
-	</React.StrictMode>,
+  </React.StrictMode>
 )
 
 // If you want your app to work offline and load faster, you can change

src/layout/Header/Header.tsx

@@ -33,21 +33,11 @@ export const Header = () => {
   const userAvatar = profile?.info?.picture || ''
 
   return (
-		<StyledAppBar position='fixed'>
+    <StyledAppBar position="fixed">
       <Toolbar sx={{ padding: '12px' }}>
-				<Stack
-					direction={'row'}
-					justifyContent={'space-between'}
-					alignItems={'center'}
-					width={'100%'}
-				>
+        <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} width={'100%'}>
           {showProfile ? (
-						<Stack
-							gap={'1rem'}
-							direction={'row'}
-							alignItems={'center'}
-							flex={1}
-						>
+            <Stack gap={'1rem'} direction={'row'} alignItems={'center'} flex={1}>
               <Avatar src={userAvatar} alt={userName} />
               <Typography fontWeight={600}>{userName}</Typography>
             </Stack>

src/layout/Header/components/ListProfiles.tsx

@@ -1,12 +1,6 @@
 import { DbKey } from '@/modules/db'
 import { getShortenNpub } from '@/utils/helpers/helpers'
-import {
-	Avatar,
-	ListItemIcon,
-	MenuItem,
-	Stack,
-	Typography,
-} from '@mui/material'
+import { Avatar, ListItemIcon, MenuItem, Stack, Typography } from '@mui/material'
 import React, { FC } from 'react'
 
 type ListProfilesProps = {
@@ -14,30 +8,18 @@ type ListProfilesProps = {
   onClickItem: (key: DbKey) => void
 }
 
-export const ListProfiles: FC<ListProfilesProps> = ({
-	keys = [],
-	onClickItem,
-}) => {
+export const ListProfiles: FC<ListProfilesProps> = ({ keys = [], onClickItem }) => {
   return (
     <Stack maxHeight={'10rem'} overflow={'auto'}>
       {keys.map((key) => {
-				const userName =
-					key?.profile?.info?.name || getShortenNpub(key.npub)
+        const userName = key?.profile?.info?.name || getShortenNpub(key.npub)
         const userAvatar = key?.profile?.info?.picture || ''
         return (
-					<MenuItem
-						sx={{ gap: '0.5rem' }}
-						onClick={() => onClickItem(key)}
-						key={key.npub}
-					>
+          <MenuItem sx={{ gap: '0.5rem' }} onClick={() => onClickItem(key)} key={key.npub}>
             <ListItemIcon>
-							<Avatar
-								src={userAvatar}
-								alt={userName}
-								sx={{ width: 36, height: 36 }}
-							/>
+              <Avatar src={userAvatar} alt={userName} sx={{ width: 36, height: 36 }} />
             </ListItemIcon>
-						<Typography variant='body2' noWrap>
+            <Typography variant="body2" noWrap>
               {userName}
             </Typography>
           </MenuItem>

src/layout/Header/components/Menu.tsx

@@ -22,12 +22,7 @@ export const Menu = () => {
   const isDarkMode = themeMode === 'dark'
   const isNoKeys = !keys || keys.length === 0
 
-	const {
-		anchorEl,
-		handleClose,
-		handleOpen: handleOpenMenu,
-		open,
-	} = useOpenMenu()
+  const { anchorEl, handleClose, handleOpen: handleOpenMenu, open } = useOpenMenu()
 
   const handleChangeMode = () => {
     dispatch(setThemeMode({ mode: isDarkMode ? 'light' : 'dark' }))
@@ -37,16 +32,12 @@ export const Menu = () => {
     handleClose()
   }
 
-	const themeIcon = isDarkMode ? (
-		<DarkModeIcon htmlColor='#fff' />
-	) : (
-		<LightModeIcon htmlColor='#feb94a' />
-	)
+  const themeIcon = isDarkMode ? <DarkModeIcon htmlColor="#fff" /> : <LightModeIcon htmlColor="#feb94a" />
 
   return (
     <>
       <MenuButton onClick={handleOpenMenu}>
-				<MenuRoundedIcon color='inherit' />
+        <MenuRoundedIcon color="inherit" />
       </MenuButton>
       <MuiMenu
         anchorEl={anchorEl}
@@ -57,17 +48,11 @@ export const Menu = () => {
         }}
       >
         <MenuItem
-					Icon={
-						isNoKeys ? <LoginIcon /> : <PersonAddAltRoundedIcon />
-					}
+          Icon={isNoKeys ? <LoginIcon /> : <PersonAddAltRoundedIcon />}
           onClick={handleNavigateToAuth}
           title={isNoKeys ? 'Sign up' : 'Add account'}
         />
-				<MenuItem
-					Icon={themeIcon}
-					onClick={handleChangeMode}
-					title='Change theme'
-				/>
+        <MenuItem Icon={themeIcon} onClick={handleChangeMode} title="Change theme" />
       </MuiMenu>
     </>
   )

src/layout/Header/components/MenuItem.tsx

@@ -1,10 +1,6 @@
 import React, { FC, ReactNode } from 'react'
 import { StyledMenuItem } from './styled'
-import {
-	ListItemIcon,
-	MenuItemProps as MuiMenuItemProps,
-	Typography,
-} from '@mui/material'
+import { ListItemIcon, MenuItemProps as MuiMenuItemProps, Typography } from '@mui/material'
 
 type MenuItemProps = {
   onClick: () => void
@@ -16,7 +12,7 @@ export const MenuItem: FC<MenuItemProps> = ({ onClick, Icon, title }) => {
   return (
     <StyledMenuItem onClick={onClick}>
       <ListItemIcon>{Icon}</ListItemIcon>
-			<Typography fontWeight={500} variant='body2' noWrap>
+      <Typography fontWeight={500} variant="body2" noWrap>
         {title}
       </Typography>
     </StyledMenuItem>

src/layout/Header/components/ProfileMenu.tsx

@@ -18,12 +18,7 @@ import { ListProfiles } from './ListProfiles'
 import { DbKey } from '@/modules/db'
 
 export const ProfileMenu = () => {
-	const {
-		anchorEl,
-		handleOpen: handleOpenMenu,
-		open,
-		handleClose,
-	} = useOpenMenu()
+  const { anchorEl, handleOpen: handleOpenMenu, open, handleClose } = useOpenMenu()
   const { handleOpen } = useModalSearchParams()
 
   const keys = useAppSelector(selectKeys)
@@ -53,19 +48,12 @@ export const ProfileMenu = () => {
     handleClose()
   }
 
-	const themeIcon = isDarkMode ? (
-		<DarkModeIcon htmlColor='#fff' />
-	) : (
-		<LightModeIcon htmlColor='#feb94a' />
-	)
+  const themeIcon = isDarkMode ? <DarkModeIcon htmlColor="#fff" /> : <LightModeIcon htmlColor="#feb94a" />
 
   return (
     <>
       <MenuButton onClick={handleOpenMenu}>
-				<KeyboardArrowDownRoundedIcon
-					color='inherit'
-					fontSize='large'
-				/>
+        <KeyboardArrowDownRoundedIcon color="inherit" fontSize="large" />
       </MenuButton>
       <Menu
         open={open}
@@ -75,28 +63,15 @@ export const ProfileMenu = () => {
           zIndex: 1302,
         }}
       >
-				<ListProfiles
-					keys={keys}
-					onClickItem={handleNavigateToKeyInnerPage}
-				/>
+        <ListProfiles keys={keys} onClickItem={handleNavigateToKeyInnerPage} />
         <Divider />
+        <MenuItem Icon={<HomeRoundedIcon />} onClick={handleNavigateHome} title="Home" />
         <MenuItem
-					Icon={<HomeRoundedIcon />}
-					onClick={handleNavigateHome}
-					title='Home'
-				/>
-				<MenuItem
-					Icon={
-						isNoKeys ? <LoginIcon /> : <PersonAddAltRoundedIcon />
-					}
+          Icon={isNoKeys ? <LoginIcon /> : <PersonAddAltRoundedIcon />}
           onClick={handleNavigateToAuth}
           title={isNoKeys ? 'Sign up' : 'Add account'}
         />
-				<MenuItem
-					Icon={themeIcon}
-					onClick={handleChangeMode}
-					title='Change theme'
-				/>
+        <MenuItem Icon={themeIcon} onClick={handleChangeMode} title="Change theme" />
       </Menu>
     </>
   )

src/layout/Header/components/styled.tsx

@@ -1,14 +1,6 @@
-import {
-	IconButton,
-	IconButtonProps,
-	MenuItem,
-	MenuItemProps,
-	styled,
-} from '@mui/material'
+import { IconButton, IconButtonProps, MenuItem, MenuItemProps, styled } from '@mui/material'
 
-export const MenuButton = styled((props: IconButtonProps) => (
-	<IconButton {...props} />
-))(({ theme }) => {
+export const MenuButton = styled((props: IconButtonProps) => <IconButton {...props} />)(({ theme }) => {
   const isDark = theme.palette.mode === 'dark'
   return {
     borderRadius: '1rem',
@@ -19,8 +11,6 @@ export const MenuButton = styled((props: IconButtonProps) => (
   }
 })
 
-export const StyledMenuItem = styled((props: MenuItemProps) => (
-	<MenuItem {...props} />
-))(() => ({
+export const StyledMenuItem = styled((props: MenuItemProps) => <MenuItem {...props} />)(() => ({
   padding: '0.5rem 1rem',
 }))

src/layout/Layout.tsx

@@ -1,17 +1,11 @@
 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, Divider, DividerProps, styled } from '@mui/material'
 
 export const Layout: FC = () => {
   return (
-		<StyledContainer maxWidth='md'>
+    <StyledContainer maxWidth="md">
       <Header />
       <StyledDivider />
       <main>
@@ -21,9 +15,7 @@ export const Layout: FC = () => {
   )
 }
 
-const StyledContainer = styled((props: ContainerProps) => (
-	<Container maxWidth='sm' {...props} />
-))({
+const StyledContainer = styled((props: ContainerProps) => <Container maxWidth="sm" {...props} />)({
   height: '100%',
   display: 'flex',
   flexDirection: 'column',

src/modules/backend.ts

@@ -54,12 +54,7 @@ class Nip04KeyHandlingStrategy implements IEventHandlingStrategy {
     this.privkey = privkey
   }
 
-	private async getKey(
-		backend: NDKNip46Backend,
-		id: string,
-		remotePubkey: string,
-		recipientPubkey: string,
-	) {
+  private async getKey(backend: NDKNip46Backend, id: string, remotePubkey: string, recipientPubkey: string) {
     if (
       !(await backend.pubkeyAllowed({
         id,
@@ -73,17 +68,10 @@ class Nip04KeyHandlingStrategy implements IEventHandlingStrategy {
       return undefined
     }
 
-		return Buffer.from(
-			this.nip04.createKey(this.privkey, recipientPubkey),
-		).toString('hex')
+    return Buffer.from(this.nip04.createKey(this.privkey, recipientPubkey)).toString('hex')
   }
 
-	async handle(
-		backend: NDKNip46Backend,
-		id: string,
-		remotePubkey: string,
-		params: string[],
-	) {
+  async handle(backend: NDKNip46Backend, id: string, remotePubkey: string, params: string[]) {
     const [recipientPubkey] = params
     return await this.getKey(backend, id, remotePubkey, recipientPubkey)
   }
@@ -101,7 +89,7 @@ class EventHandlingStrategyWrapper implements IEventHandlingStrategy {
     npub: string,
     method: string,
     body: IEventHandlingStrategy,
-		allowCb: (params: IAllowCallbackParams) => Promise<boolean>,
+    allowCb: (params: IAllowCallbackParams) => Promise<boolean>
   ) {
     this.backend = backend
     this.npub = npub
@@ -114,7 +102,7 @@ class EventHandlingStrategyWrapper implements IEventHandlingStrategy {
     backend: NDKNip46Backend,
     id: string,
     remotePubkey: string,
-		params: string[],
+    params: string[]
   ): Promise<string | undefined> {
     console.log(Date.now(), 'handle', {
       method: this.method,
@@ -132,15 +120,7 @@ class EventHandlingStrategyWrapper implements IEventHandlingStrategy {
     })
     if (!allow) return undefined
     return this.body.handle(backend, id, remotePubkey, params).then((r) => {
-			console.log(
-				Date.now(),
-				'req',
-				id,
-				'method',
-				this.method,
-				'result',
-				r,
-			)
+      console.log(Date.now(), 'req', id, 'method', this.method, 'result', r)
       return r
     })
   }
@@ -165,12 +145,12 @@ export class NoauthBackend {
     const self = this
     swg.addEventListener('activate', (event) => {
       console.log('activate')
-//			swg.addEventListener('activate', event => event.waitUntil(swg.clients.claim()));
+      //			swg.addEventListener('activate', event => event.waitUntil(swg.clients.claim()));
     })
 
     swg.addEventListener('install', (event) => {
       console.log('install')
-//			swg.addEventListener('install', event => event.waitUntil(swg.skipWaiting()));
+      //			swg.addEventListener('install', event => event.waitUntil(swg.skipWaiting()));
     })
 
     swg.addEventListener('push', (event) => {
@@ -179,7 +159,7 @@ export class NoauthBackend {
       event.waitUntil(
         new Promise((ok: any) => {
           self.setNotifCallback(ok)
-				}),
+        })
       )
     })
 
@@ -199,18 +179,13 @@ export class NoauthBackend {
           self.confirm(event.action.split(':')[1], false, false)
         } else {
           event.waitUntil(
-						self.swg.clients
-							.matchAll({ type: 'window' })
-							.then((clientList) => {
+            self.swg.clients.matchAll({ type: 'window' }).then((clientList) => {
               console.log('clients', clientList.length)
               // FIXME find a client that has our
               // key page
               for (const client of clientList) {
                 console.log('client', client.url)
-									if (
-										new URL(client.url).pathname === '/' &&
-										'focus' in client
-									) {
+                if (new URL(client.url).pathname === '/' && 'focus' in client) {
                   client.focus()
                   return
                 }
@@ -218,15 +193,15 @@ export class NoauthBackend {
 
               // confirm screen url
               const req = event.notification.data.req
-								console.log("req", req)
+              console.log('req', req)
               // const url = `${self.swg.location.origin}/key/${req.npub}?confirm-connect=true&appNpub=${req.appNpub}&reqId=${req.id}`
               const url = `${self.swg.location.origin}/key/${req.npub}`
               self.swg.clients.openWindow(url)
-							}),
+            })
           )
         }
       },
-			false, // ???
+      false // ???
     )
   }
 
@@ -268,22 +243,10 @@ export class NoauthBackend {
   }
 
   private async sha256(s: string) {
-		return Buffer.from(
-			await this.swg.crypto.subtle.digest('SHA-256', Buffer.from(s)),
-		).toString('hex')
+    return Buffer.from(await this.swg.crypto.subtle.digest('SHA-256', Buffer.from(s))).toString('hex')
   }
 
-	private async sendPost({
-		url,
-		method,
-		headers,
-		body,
-	}: {
-		url: string
-		method: string
-		headers: any
-		body: string
-	}) {
+  private async sendPost({ url, method, headers, body }: { url: string; method: string; headers: any; body: string }) {
     const r = await fetch(url, {
       method,
       headers: {
@@ -306,7 +269,7 @@ export class NoauthBackend {
     url,
     method = 'GET',
     body = '',
-		pow = 0
+    pow = 0,
   }: {
     npub: string
     url: string
@@ -336,7 +299,7 @@ export class NoauthBackend {
       const start = Date.now()
       const powEvent: NostrPowEvent = authEvent.rawEvent()
       const minedEvent = minePow(powEvent, pow)
-			console.log("mined pow of", pow, "in", Date.now() - start, "ms", minedEvent)
+      console.log('mined pow of', pow, 'in', Date.now() - start, 'ms', minedEvent)
       authEvent.tags = minedEvent.tags
     }
 
@@ -354,10 +317,7 @@ export class NoauthBackend {
     })
   }
 
-	private async sendSubscriptionToServer(
-		npub: string,
-		pushSubscription: PushSubscription,
-	) {
+  private async sendSubscriptionToServer(npub: string, pushSubscription: PushSubscription) {
     const body = JSON.stringify({
       npub,
       relays: NIP46_RELAYS,
@@ -413,33 +373,31 @@ export class NoauthBackend {
   private async sendNameToServer(npub: string, name: string) {
     const body = JSON.stringify({
       npub,
-			name
+      name,
     })
 
     const method = 'POST'
     const url = `${NOAUTHD_URL}/name`
 
     // mas pow should be 21 or something like that
-		let pow = MIN_POW;
-		while(pow <= MAX_POW) {
-			console.log("Try name", name, "pow", pow);
+    let pow = MIN_POW
+    while (pow <= MAX_POW) {
+      console.log('Try name', name, 'pow', pow)
       try {
         return await this.sendPostAuthd({
           npub,
           url,
           method,
           body,
-					pow
+          pow,
         })
       } catch (e: any) {
-				console.log("error", e.cause);
-				if (e.cause && e.cause.minPow > pow)
-					pow = e.cause.minPow
-				else
-					throw e;
+        console.log('error', e.cause)
+        if (e.cause && e.cause.minPow > pow) pow = e.cause.minPow
+        else throw e
       }
     }
-		throw new Error("Too many requests, retry later")
+    throw new Error('Too many requests, retry later')
   }
 
   private notify() {
@@ -447,13 +405,12 @@ export class NoauthBackend {
     // and update the notifications
 
     for (const r of this.confirmBuffer) {
-
       if (r.notified) continue
 
-			const key = this.keys.find(k => k.npub === r.req.npub)
+      const key = this.keys.find((k) => k.npub === r.req.npub)
       if (!key) continue
 
-			const app = this.apps.find(a => a.appNpub === r.req.appNpub)
+      const app = this.apps.find((a) => a.appNpub === r.req.appNpub)
       if (r.req.method !== 'connect' && !app) continue
 
       // FIXME use Nsec.app icon!
@@ -528,10 +485,15 @@ export class NoauthBackend {
     return generatePrivateKey()
   }
 
-	public async addKey({ name, nsec, existingName } 
-		: { name: string, nsec?: string, existingName?: boolean }
-	): Promise<KeyInfo> {
-
+  public async addKey({
+    name,
+    nsec,
+    existingName,
+  }: {
+    name: string
+    nsec?: string
+    existingName?: boolean
+  }): Promise<KeyInfo> {
     // lowercase
     name = name.trim().toLocaleLowerCase()
 
@@ -558,7 +520,7 @@ export class NoauthBackend {
     // 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)
+      console.log('adding key', npub, name)
       await this.sendNameToServer(npub, name)
     }
 
@@ -570,9 +532,7 @@ export class NoauthBackend {
 
   private getPerm(req: DbPending): string {
     const reqPerm = getReqPerm(req)
-		const appPerms = this.perms.filter(
-			(p) => p.npub === req.npub && p.appNpub === req.appNpub,
-		)
+    const appPerms = this.perms.filter((p) => p.npub === req.npub && p.appNpub === req.appNpub)
 
     // exact match first
     let perm = appPerms.find((p) => p.perm === reqPerm)
@@ -611,21 +571,9 @@ export class NoauthBackend {
     const self = this
     return new Promise(async (ok) => {
       // called when it's decided whether to allow this or not
-			const onAllow = async (
-				manual: boolean,
-				allow: boolean,
-				remember: boolean,
-				options?: any,
-			) => {
+      const onAllow = async (manual: boolean, allow: boolean, remember: boolean, options?: any) => {
         // confirm
-				console.log(
-					Date.now(),
-					allow ? 'allowed' : 'disallowed',
-					npub,
-					method,
-					options,
-					params,
-				)
+        console.log(Date.now(), allow ? 'allowed' : 'disallowed', npub, method, options, params)
         if (manual) {
           await dbi.confirmPending(id, allow)
 
@@ -657,9 +605,7 @@ export class NoauthBackend {
         self.accessBuffer.push(req)
 
         // clear from pending
-				const index = self.confirmBuffer.findIndex(
-					(r) => r.req.id === id,
-				)
+        const index = self.confirmBuffer.findIndex((r) => r.req.id === id)
         if (index >= 0) self.confirmBuffer.splice(index, 1)
 
         if (remember) {
@@ -678,15 +624,8 @@ export class NoauthBackend {
 
           this.perms = await dbi.listPerms()
 
-					const otherReqs = self.confirmBuffer.filter(
-						(r) => r.req.appNpub === req.appNpub,
-					)
-					console.log(
-						'updated perms',
-						this.perms,
-						'otherReqs',
-						otherReqs,
-					)
+          const otherReqs = self.confirmBuffer.filter((r) => r.req.appNpub === req.appNpub)
+          console.log('updated perms', this.perms, 'otherReqs', otherReqs)
           for (const r of otherReqs) {
             const perm = this.getPerm(r.req)
             if (perm) {
@@ -721,8 +660,7 @@ export class NoauthBackend {
         // put to a list of pending requests
         this.confirmBuffer.push({
           req,
-					cb: (allow, remember, options) =>
-						onAllow(true, allow, remember, options),
+          cb: (allow, remember, options) => onAllow(true, allow, remember, options),
         })
 
         // OAuth flow
@@ -740,15 +678,7 @@ export class NoauthBackend {
     })
   }
 
-	private async startKey({
-		npub,
-		sk,
-		backoff = 1000,
-	}: {
-		npub: string
-		sk: string
-		backoff?: number
-	}) {
+  private async startKey({ npub, sk, backoff = 1000 }: { npub: string; sk: string; backoff?: number }) {
     const ndk = new NDK({
       explicitRelayUrls: NIP46_RELAYS,
     })
@@ -757,9 +687,7 @@ export class NoauthBackend {
     ndk.connect()
 
     const signer = new NDKPrivateKeySigner(sk) // PrivateKeySigner
-		const backend = new NDKNip46Backend(ndk, sk, () =>
-			Promise.resolve(true),
-		)
+    const backend = new NDKNip46Backend(ndk, sk, () => Promise.resolve(true))
     this.keys.push({ npub, backend, signer, ndk, backoff })
 
     // new method
@@ -772,7 +700,7 @@ export class NoauthBackend {
         npub,
         method,
         backend.handlers[method],
-				this.allowPermitCallback.bind(this),
+        this.allowPermitCallback.bind(this)
       )
     }
 
@@ -800,13 +728,7 @@ export class NoauthBackend {
       // run full restart after a pause
       const bo = self.keys.find((k) => k.npub === npub)?.backoff || 1000
       setTimeout(() => {
-				console.log(
-					new Date(),
-					'reconnect relays for key',
-					npub,
-					'backoff',
-					bo,
-				)
+        console.log(new Date(), 'reconnect relays for key', npub, 'backoff', bo)
         // @ts-ignore
         for (const r of ndk.pool.relays.values()) r.disconnect()
         // make sure it no longer activates
@@ -826,8 +748,7 @@ export class NoauthBackend {
 
   public async unlock(npub: string) {
     console.log('unlocking', npub)
-		if (!this.isLocked(npub))
-			throw new Error(`Key ${npub} already unlocked`)
+    if (!this.isLocked(npub)) throw new Error(`Key ${npub} already unlocked`)
     const info = this.enckeys.find((k) => k.npub === npub)
     if (!info) throw new Error(`Key ${npub} not found`)
     const { type } = nip19.decode(npub)
@@ -870,10 +791,7 @@ export class NoauthBackend {
   private async fetchKey(npub: string, passphrase: string, name: string) {
     const { type, data: pubkey } = nip19.decode(npub)
     if (type !== 'npub') throw new Error(`Invalid npub ${npub}`)
-		const { pwh } = await this.keysModule.generatePassKey(
-			pubkey,
-			passphrase,
-		)
+    const { pwh } = await this.keysModule.generatePassKey(pubkey, passphrase)
     const { data: enckey } = await this.fetchKeyFromServer(npub, pwh)
 
     // key already exists?
@@ -891,12 +809,7 @@ export class NoauthBackend {
     return k
   }
 
-	private async confirm(
-		id: string,
-		allow: boolean,
-		remember: boolean,
-		options?: any,
-	) {
+  private async confirm(id: string, allow: boolean, remember: boolean, options?: any) {
     const req = this.confirmBuffer.find((r) => r.req.id === id)
     if (!req) {
       console.log('req ', id, 'not found')
@@ -929,8 +842,7 @@ export class NoauthBackend {
       applicationServerKey: WEB_PUSH_PUBKEY,
     }
 
-		const pushSubscription =
-			await this.swg.registration.pushManager.subscribe(options)
+    const pushSubscription = await this.swg.registration.pushManager.subscribe(options)
     console.log('push endpoint', JSON.stringify(pushSubscription))
 
     if (!pushSubscription) {
@@ -976,7 +888,7 @@ export class NoauthBackend {
         result,
       })
     } catch (e: any) {
-			console.log("backend error", e)
+      console.log('backend error', e)
       event.source.postMessage({
         id,
         error: e.toString(),
@@ -986,7 +898,7 @@ export class NoauthBackend {
 
   private async updateUI() {
     const clients = await this.swg.clients.matchAll({
-			includeUncontrolled: true
+      includeUncontrolled: true,
     })
     console.log('updateUI clients', clients.length)
     for (const client of clients) {

src/modules/db.ts

@@ -151,10 +151,8 @@ export const dbi = {
     try {
       return db.transaction('rw', db.pending, db.history, async () => {
         const exists =
-					(await db.pending.where('id').equals(r.id).toArray())
-						.length > 0 ||
-					(await db.history.where('id').equals(r.id).toArray())
-						.length > 0
+          (await db.pending.where('id').equals(r.id).toArray()).length > 0 ||
+          (await db.history.where('id').equals(r.id).toArray()).length > 0
         if (exists) return false
 
         await db.pending.add(r)
@@ -183,10 +181,7 @@ export const dbi = {
   confirmPending: async (id: string, allowed: boolean) => {
     try {
       db.transaction('rw', db.pending, db.history, async () => {
-				const r: DbPending | undefined = await db.pending
-					.where('id')
-					.equals(id)
-					.first()
+        const r: DbPending | undefined = await db.pending.where('id').equals(id).first()
         if (!r) throw new Error('Pending not found ' + id)
         const h: DbHistory = {
           ...r,

src/modules/ende.ts

@@ -4,123 +4,92 @@ ende stands for encryption decryption
 import { secp256k1 as secp } from '@noble/curves/secp256k1'
 //import * as secp from "./vendor/secp256k1.js";
 
-export async function encrypt(
-    publicKey: string,
-    message: string,
-    privateKey: string,
-): Promise<string> {
-    const key = secp.getSharedSecret(privateKey, "02" + publicKey);
-    const normalizedKey = getNormalizedX(key);
-    const encoder = new TextEncoder();
-    const iv = Uint8Array.from(randomBytes(16));
-    const plaintext = encoder.encode(message);
-    const cryptoKey = await crypto.subtle.importKey(
-        "raw",
-        normalizedKey,
-        { name: "AES-CBC" },
-        false,
-        ["encrypt"],
-    );
-    const ciphertext = await crypto.subtle.encrypt(
-        { name: "AES-CBC", iv },
-        cryptoKey,
-        plaintext,
-    );
+export async function encrypt(publicKey: string, message: string, privateKey: string): Promise<string> {
+  const key = secp.getSharedSecret(privateKey, '02' + publicKey)
+  const normalizedKey = getNormalizedX(key)
+  const encoder = new TextEncoder()
+  const iv = Uint8Array.from(randomBytes(16))
+  const plaintext = encoder.encode(message)
+  const cryptoKey = await crypto.subtle.importKey('raw', normalizedKey, { name: 'AES-CBC' }, false, ['encrypt'])
+  const ciphertext = await crypto.subtle.encrypt({ name: 'AES-CBC', iv }, cryptoKey, plaintext)
 
-    const ctb64 = toBase64(new Uint8Array(ciphertext));
-    const ivb64 = toBase64(new Uint8Array(iv.buffer));
-    return `${ctb64}?iv=${ivb64}`;
+  const ctb64 = toBase64(new Uint8Array(ciphertext))
+  const ivb64 = toBase64(new Uint8Array(iv.buffer))
+  return `${ctb64}?iv=${ivb64}`
 }
 
-export async function decrypt(
-    privateKey: string,
-    publicKey: string,
-    data: string,
-): Promise<string | Error> {
-    const key = secp.getSharedSecret(privateKey, "02" + publicKey); // this line is very slow
-    return decrypt_with_shared_secret(data, key);
+export async function decrypt(privateKey: string, publicKey: string, data: string): Promise<string | Error> {
+  const key = secp.getSharedSecret(privateKey, '02' + publicKey) // this line is very slow
+  return decrypt_with_shared_secret(data, key)
 }
 
-export async function decrypt_with_shared_secret(
-    data: string,
-    sharedSecret: Uint8Array,
-): Promise<string | Error> {
-    const [ctb64, ivb64] = data.split("?iv=");
-    const normalizedKey = getNormalizedX(sharedSecret);
+export async function decrypt_with_shared_secret(data: string, sharedSecret: Uint8Array): Promise<string | Error> {
+  const [ctb64, ivb64] = data.split('?iv=')
+  const normalizedKey = getNormalizedX(sharedSecret)
 
-    const cryptoKey = await crypto.subtle.importKey(
-        "raw",
-        normalizedKey,
-        { name: "AES-CBC" },
-        false,
-        ["decrypt"],
-    );
-    let ciphertext: BufferSource;
-    let iv: BufferSource;
+  const cryptoKey = await crypto.subtle.importKey('raw', normalizedKey, { name: 'AES-CBC' }, false, ['decrypt'])
+  let ciphertext: BufferSource
+  let iv: BufferSource
   try {
-        ciphertext = decodeBase64(ctb64);
-        iv = decodeBase64(ivb64);
+    ciphertext = decodeBase64(ctb64)
+    iv = decodeBase64(ivb64)
   } catch (e) {
-        return new Error(`failed to decode, ${e}`);
+    return new Error(`failed to decode, ${e}`)
   }
 
   try {
-        const plaintext = await crypto.subtle.decrypt(
-            { name: "AES-CBC", iv },
-            cryptoKey,
-            ciphertext,
-        );
-        const text = utf8Decode(plaintext);
-        return text;
+    const plaintext = await crypto.subtle.decrypt({ name: 'AES-CBC', iv }, cryptoKey, ciphertext)
+    const text = utf8Decode(plaintext)
+    return text
   } catch (e) {
-        return new Error(`failed to decrypt, ${e}`);
+    return new Error(`failed to decrypt, ${e}`)
   }
 }
 
 export function utf8Encode(str: string) {
-    let encoder = new TextEncoder();
-    return encoder.encode(str);
+  let encoder = new TextEncoder()
+  return encoder.encode(str)
 }
 
 export function utf8Decode(bin: Uint8Array | ArrayBuffer): string {
-    let decoder = new TextDecoder();
-    return decoder.decode(bin);
+  let decoder = new TextDecoder()
+  return decoder.decode(bin)
 }
 
 function toBase64(uInt8Array: Uint8Array) {
-    let strChunks = new Array(uInt8Array.length);
-    let i = 0;
+  let strChunks = new Array(uInt8Array.length)
+  let i = 0
   // @ts-ignore
   for (let byte of uInt8Array) {
-        strChunks[i] = String.fromCharCode(byte); // bytes to utf16 string
-        i++;
+    strChunks[i] = String.fromCharCode(byte) // bytes to utf16 string
+    i++
   }
-    return btoa(strChunks.join(""));
+  return btoa(strChunks.join(''))
 }
 
 function decodeBase64(base64String: string) {
-    const binaryString = atob(base64String);
-    const length = binaryString.length;
-    const bytes = new Uint8Array(length);
+  const binaryString = atob(base64String)
+  const length = binaryString.length
+  const bytes = new Uint8Array(length)
 
   for (let i = 0; i < length; i++) {
-        bytes[i] = binaryString.charCodeAt(i);
+    bytes[i] = binaryString.charCodeAt(i)
   }
-    return bytes;
+  return bytes
 }
 
 function getNormalizedX(key: Uint8Array): Uint8Array {
-    return key.slice(1, 33);
+  return key.slice(1, 33)
 }
 
 function randomBytes(bytesLength: number = 32) {
-    return crypto.getRandomValues(new Uint8Array(bytesLength));
+  return crypto.getRandomValues(new Uint8Array(bytesLength))
 }
 
 export function utf16Encode(str: string): number[] {
-    let array = new Array(str.length);
+  let array = new Array(str.length)
   for (let i = 0; i < str.length; i++) {
-        array[i] = str.charCodeAt(i);
+    array[i] = str.charCodeAt(i)
   }
-    return array;
+  return array
 }

src/modules/keys.ts

@@ -1,5 +1,5 @@
-import crypto, { pbkdf2 } from 'crypto';
-import { getPublicKey, nip19 } from 'nostr-tools';
+import crypto, { pbkdf2 } from 'crypto'
+import { getPublicKey, nip19 } from 'nostr-tools'
 
 // encrypted keys have a prefix and version
 // so that we'd be able to switch to a better
@@ -17,14 +17,14 @@ const ITERATIONS_PWH = 100000
 const HASH_SIZE = 32
 const HASH_ALGO = 'sha256'
 // encryption
-const ALGO = 'aes-256-cbc';
+const ALGO = 'aes-256-cbc'
 const IV_SIZE = 16
 
 // valid passwords are a limited ASCII only, see notes below
 const ASCII_REGEX = /^[A-Za-z0-9!@#$%^&*()]{4,}$/
 
-const ALGO_LOCAL = 'AES-CBC';
-const KEY_SIZE_LOCAL = 256;
+const ALGO_LOCAL = 'AES-CBC'
+const KEY_SIZE_LOCAL = 256
 
 export class Keys {
   subtle: any
@@ -37,9 +37,7 @@ export class Keys {
     return ASCII_REGEX.test(passphrase)
   }
 
-  public async generatePassKey(pubkey: string, passphrase: string)
-  : Promise<{ passkey: Buffer, pwh: string }> {
-
+  public async generatePassKey(pubkey: string, passphrase: string): Promise<{ passkey: Buffer; pwh: string }> {
     const salt = Buffer.from(pubkey, 'hex')
 
     // https://nodejs.org/api/crypto.html#using-strings-as-inputs-to-cryptographic-apis
@@ -47,7 +45,7 @@ export class Keys {
     // We could use string.normalize() to make sure all JS implementations
     // are compatible, but since we're looking to make this thing a standard
     // then the simplest way is to exclude unicode and only work with ASCII
-    if (!this.isValidPassphase(passphrase)) throw new Error("Password must be 4+ ASCII chars")
+    if (!this.isValidPassphase(passphrase)) throw new Error('Password must be 4+ ASCII chars')
 
     return new Promise((ok, fail) => {
       // NOTE: we should use Argon2 or scrypt later, for now
@@ -57,7 +55,11 @@ export class Keys {
         else {
           pbkdf2(key, passphrase, ITERATIONS_PWH, HASH_SIZE, HASH_ALGO, (err, hash) => {
             if (err) fail(err)
-            else ok({ passkey: key, pwh: hash.toString('hex') })
+            else
+              ok({
+                passkey: key,
+                pwh: hash.toString('hex'),
+              })
           })
         }
       })
@@ -65,8 +67,8 @@ export class Keys {
   }
 
   private isSafari() {
-    const chrome = navigator.userAgent.indexOf("Chrome") > -1; 
-    const safari = navigator.userAgent.indexOf("Safari") > -1; 
+    const chrome = navigator.userAgent.indexOf('Chrome') > -1
+    const safari = navigator.userAgent.indexOf('Safari') > -1
     return safari && !chrome
   }
 
@@ -81,8 +83,8 @@ export class Keys {
       { name: ALGO_LOCAL, length: KEY_SIZE_LOCAL },
       // NOTE: important to make sure it's not visible in
       // dev console in IndexedDB
-      /*extractable*/false,
-      ["encrypt", "decrypt"]
+      /*extractable*/ false,
+      ['encrypt', 'decrypt']
     )
   }
 
@@ -94,25 +96,30 @@ export class Keys {
     return `${PREFIX_LOCAL}:${VERSION_LOCAL}:${iv.toString('hex')}:${Buffer.from(encrypted).toString('hex')}}`
   }
 
-  public async decryptKeyLocal({ enckey, localKey }: { enckey: string, localKey: CryptoKey | {} }): Promise<string> {
+  public async decryptKeyLocal({ enckey, localKey }: { enckey: string; localKey: CryptoKey | {} }): Promise<string> {
     if (this.isSafari()) return enckey
     const parts = enckey.split(':')
-    if (parts.length !== 4) throw new Error("Bad encrypted key")
-    if (parts[0] !== PREFIX_LOCAL) throw new Error("Bad encrypted key prefix")
-    if (parts[1] !== VERSION_LOCAL) throw new Error("Bad encrypted key version")
-    if (parts[2].length !== IV_SIZE * 2) throw new Error("Bad encrypted key iv")
-    if (parts[3].length < 30) throw new Error("Bad encrypted key data")
-    const iv = Buffer.from(parts[2], 'hex');
-    const data = Buffer.from(parts[3], 'hex');
+    if (parts.length !== 4) throw new Error('Bad encrypted key')
+    if (parts[0] !== PREFIX_LOCAL) throw new Error('Bad encrypted key prefix')
+    if (parts[1] !== VERSION_LOCAL) throw new Error('Bad encrypted key version')
+    if (parts[2].length !== IV_SIZE * 2) throw new Error('Bad encrypted key iv')
+    if (parts[3].length < 30) throw new Error('Bad encrypted key data')
+    const iv = Buffer.from(parts[2], 'hex')
+    const data = Buffer.from(parts[3], 'hex')
     const decrypted = await this.subtle.decrypt({ name: ALGO_LOCAL, iv }, localKey, data)
     const { type, data: value } = nip19.decode(Buffer.from(decrypted).toString())
-    if (type !== "nsec") throw new Error("Bad encrypted key payload type")
-    if ((value as string).length !== 64) throw new Error("Bad encrypted key payload length")
-    return (value as string)
+    if (type !== 'nsec') throw new Error('Bad encrypted key payload type')
+    if ((value as string).length !== 64) throw new Error('Bad encrypted key payload length')
+    return value as string
   }
 
-  public async encryptKeyPass({ key, passphrase }: { key: string, passphrase: string })
-  : Promise<{ enckey: string, pwh: string }> {
+  public async encryptKeyPass({
+    key,
+    passphrase,
+  }: {
+    key: string
+    passphrase: string
+  }): Promise<{ enckey: string; pwh: string }> {
     const start = Date.now()
     const nsec = nip19.nsecEncode(key)
     const pubkey = getPublicKey(key)
@@ -120,21 +127,29 @@ export class Keys {
     const iv = crypto.randomBytes(IV_SIZE)
     const cipher = crypto.createCipheriv(ALGO, passkey, iv)
     const encrypted = Buffer.concat([cipher.update(nsec), cipher.final()])
-    console.log("encrypted key in ", Date.now() - start)
+    console.log('encrypted key in ', Date.now() - start)
     return {
       enckey: `${PREFIX}:${VERSION}:${iv.toString('hex')}:${encrypted.toString('hex')}`,
-      pwh
+      pwh,
     }
   }
 
-  public async decryptKeyPass({ pubkey, enckey, passphrase }: { pubkey: string, enckey: string, passphrase: string }): Promise<string> {
+  public async decryptKeyPass({
+    pubkey,
+    enckey,
+    passphrase,
+  }: {
+    pubkey: string
+    enckey: string
+    passphrase: string
+  }): Promise<string> {
     const start = Date.now()
     const parts = enckey.split(':')
-    if (parts.length !== 4) throw new Error("Bad encrypted key")
-    if (parts[0] !== PREFIX) throw new Error("Bad encrypted key prefix")
-    if (parts[1] !== VERSION) throw new Error("Bad encrypted key version")
-    if (parts[2].length !== IV_SIZE * 2) throw new Error("Bad encrypted key iv")
-    if (parts[3].length < 30) throw new Error("Bad encrypted key data")
+    if (parts.length !== 4) throw new Error('Bad encrypted key')
+    if (parts[0] !== PREFIX) throw new Error('Bad encrypted key prefix')
+    if (parts[1] !== VERSION) throw new Error('Bad encrypted key version')
+    if (parts[2].length !== IV_SIZE * 2) throw new Error('Bad encrypted key iv')
+    if (parts[3].length < 30) throw new Error('Bad encrypted key data')
     const { passkey } = await this.generatePassKey(pubkey, passphrase)
     const iv = Buffer.from(parts[2], 'hex')
     const data = Buffer.from(parts[3], 'hex')
@@ -142,9 +157,9 @@ export class Keys {
     const decrypted = Buffer.concat([decipher.update(data), decipher.final()])
     const nsec = decrypted.toString()
     const { type, data: value } = nip19.decode(nsec)
-    if (type !== "nsec") throw new Error("Bad encrypted key payload type")
-    if (value.length !== 64) throw new Error("Bad encrypted key payload length")
-    console.log("decrypted key in ", Date.now() - start)
-    return nsec;
+    if (type !== 'nsec') throw new Error('Bad encrypted key payload type')
+    if (value.length !== 64) throw new Error('Bad encrypted key payload length')
+    console.log('decrypted key in ', Date.now() - start)
+    return nsec
   }
 }

src/modules/nip04.ts

@@ -7,25 +7,25 @@ export const utf8Decoder = new TextDecoder('utf-8')
 export const utf8Encoder = new TextEncoder()
 
 function toBase64(uInt8Array: Uint8Array) {
-  let strChunks = new Array(uInt8Array.length);
-  let i = 0;
+  let strChunks = new Array(uInt8Array.length)
+  let i = 0
   // @ts-ignore
   for (let byte of uInt8Array) {
-    strChunks[i] = String.fromCharCode(byte); // bytes to utf16 string
-    i++;
+    strChunks[i] = String.fromCharCode(byte) // bytes to utf16 string
+    i++
   }
-  return btoa(strChunks.join(""));
+  return btoa(strChunks.join(''))
 }
 
 function fromBase64(base64String: string) {
-  const binaryString = atob(base64String);
-  const length = binaryString.length;
-  const bytes = new Uint8Array(length);
+  const binaryString = atob(base64String)
+  const length = binaryString.length
+  const bytes = new Uint8Array(length)
 
   for (let i = 0; i < length; i++) {
-    bytes[i] = binaryString.charCodeAt(i);
+    bytes[i] = binaryString.charCodeAt(i)
   }
-  return bytes;
+  return bytes
 }
 
 function getNormalizedX(key: Uint8Array): Uint8Array {
@@ -65,7 +65,7 @@ export class Nip04 {
     // let ctb64 = toBase64(new Uint8Array(ciphertext))
     // let ivb64 = toBase64(new Uint8Array(iv.buffer))
 
-    console.log("nip04_encrypt", text, "t1", t2 - t1, "t2", t3 - t2, "t3", Date.now() - t3)
+    console.log('nip04_encrypt', text, 't1', t2 - t1, 't2', t3 - t2, 't3', Date.now() - t3)
 
     return `${ctb64}?iv=${ivb64}`
   }
@@ -85,7 +85,4 @@ export class Nip04 {
     let text = utf8Decoder.decode(plaintext)
     return text
   }
-
 }
-
-

src/modules/nostr.ts

@@ -5,12 +5,7 @@ import NDK, { NDKEvent, NostrEvent } from '@nostr-dev-kit/ndk'
 import { nip19 } from 'nostr-tools'
 
 export const ndk = new NDK({
-	explicitRelayUrls: [
-		'wss://relay.nostr.band/all',
-		'wss://relay.nostr.band',
-		'wss://relay.damus.io',
-		'wss://nos.lol',
-	],
+  explicitRelayUrls: ['wss://relay.nostr.band/all', 'wss://relay.nostr.band', 'wss://relay.damus.io', 'wss://nos.lol'],
 })
 
 export function nostrEvent(e: Required<NDKEvent>) {
@@ -41,17 +36,11 @@ function parseContentJson(c: string): object {
   }
 }
 
-export function getTags(
-	e: AugmentedEvent | NDKEvent | MetaEvent,
-	name: string,
-): string[][] {
+export function getTags(e: AugmentedEvent | NDKEvent | MetaEvent, name: string): string[][] {
   return e.tags.filter((t: string[]) => t.length > 0 && t[0] === name)
 }
 
-export function getTag(
-	e: AugmentedEvent | NDKEvent | MetaEvent,
-	name: string,
-): string[] | null {
+export function getTag(e: AugmentedEvent | NDKEvent | MetaEvent, name: string): string[] | null {
   const tags = getTags(e, name)
   if (tags.length === 0) return null
   return tags[0]
@@ -61,11 +50,10 @@ export function getTagValue(
   e: AugmentedEvent | NDKEvent | MetaEvent,
   name: string,
   index: number = 0,
-	def: string = '',
+  def: string = ''
 ): string {
   const tag = getTag(e, name)
-	if (tag === null || !tag.length || (index && index >= tag.length))
-		return def
+  if (tag === null || !tag.length || (index && index >= tag.length)) return def
   return tag[1 + index]
 }
 

src/modules/pow.ts

@@ -1,51 +1,51 @@
 // based on https://git.v0l.io/Kieran/snort/src/branch/main/packages/system/src/pow-util.ts
 
-import { sha256 } from "@noble/hashes/sha256";
-import { bytesToHex } from "@noble/hashes/utils";
+import { sha256 } from '@noble/hashes/sha256'
+import { bytesToHex } from '@noble/hashes/utils'
 
 export interface NostrPowEvent {
-  id?: string;
-  pubkey: string;
-  created_at: number;
-  kind?: number;
-  tags: Array<Array<string>>;
-  content: string;
-  sig?: string;
+  id?: string
+  pubkey: string
+  created_at: number
+  kind?: number
+  tags: Array<Array<string>>
+  content: string
+  sig?: string
 }
 
 export function minePow(e: NostrPowEvent, target: number) {
-  let ctr = 0;
+  let ctr = 0
 
-  let nonceTagIdx = e.tags.findIndex(a => a[0] === "nonce");
+  let nonceTagIdx = e.tags.findIndex((a) => a[0] === 'nonce')
   if (nonceTagIdx === -1) {
-    nonceTagIdx = e.tags.length;
-    e.tags.push(["nonce", ctr.toString(), target.toString()]);
+    nonceTagIdx = e.tags.length
+    e.tags.push(['nonce', ctr.toString(), target.toString()])
   }
   do {
-    e.tags[nonceTagIdx][1] = (++ctr).toString();
-    e.id = createId(e);
-  } while (countLeadingZeros(e.id) < target);
+    e.tags[nonceTagIdx][1] = (++ctr).toString()
+    e.id = createId(e)
+  } while (countLeadingZeros(e.id) < target)
 
-  return e;
+  return e
 }
 
 function createId(e: NostrPowEvent) {
-  const payload = [0, e.pubkey, e.created_at, e.kind, e.tags, e.content];
-  return bytesToHex(sha256(JSON.stringify(payload)));
+  const payload = [0, e.pubkey, e.created_at, e.kind, e.tags, e.content]
+  return bytesToHex(sha256(JSON.stringify(payload)))
 }
 
 export function countLeadingZeros(hex: string) {
-  let count = 0;
+  let count = 0
 
   for (let i = 0; i < hex.length; i++) {
-    const nibble = parseInt(hex[i], 16);
+    const nibble = parseInt(hex[i], 16)
     if (nibble === 0) {
-      count += 4;
+      count += 4
     } else {
-      count += Math.clz32(nibble) - 28;
-      break;
+      count += Math.clz32(nibble) - 28
+      break
     }
   }
 
-  return count;
+  return count
 }

src/modules/signer.ts

@@ -53,11 +53,7 @@ export class PrivateKeySigner implements NDKSigner {
     }
 
     const recipientHexPubKey = recipient.hexpubkey
-		return await this.nip04.encrypt(
-			this.privateKey,
-			recipientHexPubKey,
-			value,
-		)
+    return await this.nip04.encrypt(this.privateKey, recipientHexPubKey, value)
     //        return await encrypt(recipientHexPubKey, value, this.privateKey);
   }
 

src/modules/swic.ts

@@ -18,14 +18,12 @@ export async function swicRegister() {
   })
 
   navigator.serviceWorker.ready.then((r) => {
-		console.log("sw ready")
+    console.log('sw ready')
     swr = r
     if (navigator.serviceWorker.controller) {
-			console.log(
-				`This page is currently controlled by: ${navigator.serviceWorker.controller}`,
-			);
+      console.log(`This page is currently controlled by: ${navigator.serviceWorker.controller}`)
     } else {
-			console.log("This page is not currently controlled by a service worker.");
+      console.log('This page is not currently controlled by a service worker.')
     }
   })
 

src/pages/AppPage/App.Page.tsx

@@ -24,19 +24,13 @@ const AppPage = () => {
   const navigate = useNavigate()
   const notify = useEnqueueSnackbar()
 
-	const perms = useAppSelector((state) =>
-		selectPermsByNpubAndAppNpub(state, npub, appNpub),
-	)
-	const currentApp = useAppSelector((state) =>
-		selectAppByAppNpub(state, appNpub),
-	)
+  const perms = useAppSelector((state) => selectPermsByNpubAndAppNpub(state, npub, appNpub))
+  const currentApp = useAppSelector((state) => selectAppByAppNpub(state, appNpub))
 
   const { open, handleClose, handleShow } = useToggleConfirm()
   const { handleOpen: handleOpenModal } = useModalSearchParams()
 
-	const connectPerm = perms.find(
-		(perm) => perm.perm === 'connect' || perm.perm === ACTION_TYPE.BASIC,
-	)
+  const connectPerm = perms.find((perm) => perm.perm === 'connect' || perm.perm === ACTION_TYPE.BASIC)
 
   if (!currentApp) {
     return <Navigate to={`/key/${npub}`} />
@@ -46,10 +40,7 @@ const AppPage = () => {
   const appName = name || getShortenNpub(appNpub)
   const { timestamp } = connectPerm || {}
 
-	const connectedOn =
-		connectPerm && timestamp
-			? `Connected at ${formatTimestampDate(timestamp)}`
-			: 'Not connected'
+  const connectedOn = connectPerm && timestamp ? `Connected at ${formatTimestampDate(timestamp)}` : 'Not connected'
 
   const handleDeleteApp = async () => {
     try {
@@ -63,53 +54,36 @@ const AppPage = () => {
 
   return (
     <>
-			<Stack
-				maxHeight={'100%'}
-				overflow={'auto'}
-				alignItems={'flex-start'}
-				height={'100%'}
-			>
+      <Stack maxHeight={'100%'} overflow={'auto'} alignItems={'flex-start'} height={'100%'}>
         <IOSBackButton onNavigate={() => navigate(`key/${npub}`)} />
-				<Stack
-					marginBottom={'1rem'}
-					direction={'row'}
-					gap={'1rem'}
-					width={'100%'}
-				>
+        <Stack marginBottom={'1rem'} direction={'row'} gap={'1rem'} width={'100%'}>
           <StyledAppIcon src={icon} />
           <Box flex={'1'} overflow={'hidden'}>
-						<Typography variant='h4' noWrap>
+            <Typography variant="h4" noWrap>
               {appName}
             </Typography>
-						<Typography variant='body2' noWrap>
+            <Typography variant="body2" noWrap>
               {connectedOn}
             </Typography>
           </Box>
         </Stack>
         <Box marginBottom={'1rem'}>
-					<SectionTitle marginBottom={'0.5rem'}>
-						Disconnect
-					</SectionTitle>
+          <SectionTitle marginBottom={'0.5rem'}>Disconnect</SectionTitle>
           <Button fullWidth onClick={handleShow}>
             Delete app
           </Button>
         </Box>
         <Permissions perms={perms} />
 
-				<Button
-					fullWidth
-					onClick={() =>
-						handleOpenModal(MODAL_PARAMS_KEYS.ACTIVITY)
-					}
-				>
+        <Button fullWidth onClick={() => handleOpenModal(MODAL_PARAMS_KEYS.ACTIVITY)}>
           Activity
         </Button>
       </Stack>
 
       <ConfirmModal
         open={open}
-				headingText='Delete app'
-				description='Are you sure you want to delete this app?'
+        headingText="Delete app"
+        description="Are you sure you want to delete this app?"
         onCancel={handleClose}
         onConfirm={handleDeleteApp}
         onClose={handleClose}

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

@@ -10,33 +10,16 @@ import { ACTIONS } from '@/utils/consts'
 
 type ItemActivityProps = DbHistory
 
-export const ItemActivity: FC<ItemActivityProps> = ({
-	allowed,
-	method,
-	timestamp,
-}) => {
+export const ItemActivity: FC<ItemActivityProps> = ({ allowed, method, timestamp }) => {
   return (
     <StyledActivityItem>
-			<Box
-				display={'flex'}
-				flexDirection={'column'}
-				gap={'0.5rem'}
-				flex={1}
-			>
+      <Box display={'flex'} flexDirection={'column'} gap={'0.5rem'} flex={1}>
         <Typography flex={1} fontWeight={700}>
           {ACTIONS[method] || method}
         </Typography>
-				<Typography variant='body2'>
-					{formatTimestampDate(timestamp)}
-				</Typography>
-			</Box>
-			<Box>
-				{allowed ? (
-					<DoneRoundedIcon htmlColor='green' />
-				) : (
-					<ClearRoundedIcon htmlColor='red' />
-				)}
+        <Typography variant="body2">{formatTimestampDate(timestamp)}</Typography>
       </Box>
+      <Box>{allowed ? <DoneRoundedIcon htmlColor="green" /> : <ClearRoundedIcon htmlColor="red" />}</Box>
       <IconButton>
         <MoreVertRoundedIcon />
       </IconButton>

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

@@ -16,19 +16,10 @@ export const ModalActivities: FC<ModalActivitiesProps> = ({ appNpub }) => {
   const isModalOpened = getModalOpened(MODAL_PARAMS_KEYS.ACTIVITY)
   const handleCloseModal = createHandleCloseReplace(MODAL_PARAMS_KEYS.ACTIVITY)
 
-	const history = useLiveQuery(
-		getActivityHistoryQuerier(appNpub),
-		[],
-		HistoryDefaultValue,
-	)
+  const history = useLiveQuery(getActivityHistoryQuerier(appNpub), [], HistoryDefaultValue)
 
   return (
-		<Modal
-			open={isModalOpened}
-			onClose={handleCloseModal}
-			fixedHeight='calc(100% - 5rem)'
-			title='Activity history'
-		>
+    <Modal open={isModalOpened} onClose={handleCloseModal} fixedHeight="calc(100% - 5rem)" title="Activity history">
       <Box overflow={'auto'}>
         {history.map((item) => {
           return <ItemActivity {...item} key={item.id} />

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

@@ -1,9 +1,7 @@
 import styled from '@emotion/styled'
 import { Box, BoxProps } from '@mui/material'
 
-export const StyledActivityItem = styled((props: BoxProps) => (
-	<Box {...props} />
-))(() => ({
+export const StyledActivityItem = styled((props: BoxProps) => <Box {...props} />)(() => ({
   display: 'flex',
   gap: '0.5rem',
   justifyContent: 'space-between',

src/pages/AppPage/components/Permissions/ItemPermission.tsx

@@ -24,36 +24,18 @@ export const ItemPermission: FC<ItemPermissionProps> = ({ permission }) => {
   return (
     <>
       <StyledPermissionItem>
-				<Box
-					display={'flex'}
-					flexDirection={'column'}
-					gap={'0.5rem'}
-					flex={1}
-				>
+        <Box display={'flex'} flexDirection={'column'} gap={'0.5rem'} flex={1}>
           <Typography flex={1} fontWeight={700}>
             {ACTIONS[perm] || perm}
           </Typography>
-					<Typography variant='body2'>
-						{formatTimestampDate(timestamp)}
-					</Typography>
-				</Box>
-				<Box>
-					{isAllowed ? (
-						<DoneRoundedIcon htmlColor='green' />
-					) : (
-						<ClearRoundedIcon htmlColor='red' />
-					)}
+          <Typography variant="body2">{formatTimestampDate(timestamp)}</Typography>
         </Box>
+        <Box>{isAllowed ? <DoneRoundedIcon htmlColor="green" /> : <ClearRoundedIcon htmlColor="red" />}</Box>
         <IconButton onClick={handleOpen}>
           <MoreVertRoundedIcon />
         </IconButton>
       </StyledPermissionItem>
-			<ItemPermissionMenu
-				anchorEl={anchorEl}
-				open={open}
-				handleClose={handleClose}
-				permId={id}
-			/>
+      <ItemPermissionMenu anchorEl={anchorEl} open={open} handleClose={handleClose} permId={id} />
     </>
   )
 }

src/pages/AppPage/components/Permissions/ItemPermissionMenu.tsx

@@ -9,12 +9,7 @@ type ItemPermissionMenuProps = {
   handleClose: () => void
 } & MenuProps
 
-export const ItemPermissionMenu: FC<ItemPermissionMenuProps> = ({
-	open,
-	anchorEl,
-	handleClose,
-	permId,
-}) => {
+export const ItemPermissionMenu: FC<ItemPermissionMenuProps> = ({ open, anchorEl, handleClose, permId }) => {
   const [showConfirm, setShowConfirm] = useState(false)
   const notify = useEnqueueSnackbar()
 
@@ -45,16 +40,14 @@ export const ItemPermissionMenu: FC<ItemPermissionMenuProps> = ({
           vertical: 'bottom',
         }}
       >
-				<MenuItem onClick={handleShowConfirm}>
-					Delete permission
-				</MenuItem>
+        <MenuItem onClick={handleShowConfirm}>Delete permission</MenuItem>
       </Menu>
       <ConfirmModal
         open={showConfirm}
         onClose={handleCloseConfirm}
         onCancel={handleCloseConfirm}
-				headingText='Delete permission'
-				description='Are you sure you want to delete this permission?'
+        headingText="Delete permission"
+        description="Are you sure you want to delete this permission?"
         onConfirm={handleDeletePerm}
       />
     </>

src/pages/AppPage/components/Permissions/Permissions.tsx

@@ -12,13 +12,7 @@ export const Permissions: FC<PermissionsProps> = ({ perms }) => {
   return (
     <Box width={'100%'} marginBottom={'1rem'} flex={1} overflow={'auto'}>
       <SectionTitle marginBottom={'0.5rem'}>Permissions</SectionTitle>
-			<Box
-				flex={1}
-				overflow={'auto'}
-				display={'flex'}
-				flexDirection={'column'}
-				gap={'0.5rem'}
-			>
+      <Box flex={1} overflow={'auto'} display={'flex'} flexDirection={'column'} gap={'0.5rem'}>
         {perms.map((perm) => {
           return <ItemPermission key={perm.id} permission={perm} />
         })}

src/pages/AppPage/components/Permissions/styled.tsx

@@ -1,8 +1,6 @@
 import { Box, BoxProps, styled } from '@mui/material'
 
-export const StyledPermissionItem = styled((props: BoxProps) => (
-	<Box {...props} />
-))(() => ({
+export const StyledPermissionItem = styled((props: BoxProps) => <Box {...props} />)(() => ({
   display: 'flex',
   gap: '0.5rem',
   justifyContent: 'space-between',

src/pages/AppPage/styled.tsx

@@ -1,8 +1,6 @@
 import { Avatar, AvatarProps, styled } from '@mui/material'
 
-export const StyledAppIcon = styled((props: AvatarProps) => (
-	<Avatar {...props} variant='rounded' />
-))(() => ({
+export const StyledAppIcon = styled((props: AvatarProps) => <Avatar {...props} variant="rounded" />)(() => ({
   width: 70,
   height: 70,
 }))

src/pages/AppPage/utils.ts

@@ -8,7 +8,7 @@ export const getActivityHistoryQuerier = (appNpub: string) => () => {
     .equals(appNpub)
     .reverse()
     .sortBy('timestamp')
-		.then(a => a.slice(0, 30))
+    .then((a) => a.slice(0, 30))
   // .limit(30)
   // .toArray()
 

src/pages/AuthPage/Auth.Page.tsx

@@ -30,21 +30,17 @@ const AuthPage = () => {
   const mainContent = (
     <>
       <Input
-				label='Enter a Username'
+        label="Enter a Username"
         fullWidth
-				placeholder='Username'
+        placeholder="Username"
         helperText={inputHelperText}
-				endAdornment={
-					<Typography color={'#FFFFFFA8'}>@{DOMAIN}</Typography>
-				}
+        endAdornment={<Typography color={'#FFFFFFA8'}>@{DOMAIN}</Typography>}
         onChange={handleInputChange}
         value={enteredValue}
         helperTextProps={{
           sx: {
             '&.helper_text': {
-							color: isAvailable
-								? theme.palette.success.main
-								: theme.palette.textSecondaryDecorate.main,
+              color: isAvailable ? theme.palette.success.main : theme.palette.textSecondaryDecorate.main,
             },
           },
         }}
@@ -57,14 +53,9 @@ const AuthPage = () => {
     <Stack height={'100%'} position={'relative'}>
       {isMobile ? (
         <StyledContent>
-					<Stack
-						direction={'row'}
-						gap={'1rem'}
-						alignItems={'center'}
-						alignSelf={'flex-start'}
-					>
+          <Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
             <StyledAppLogo />
-						<Typography fontWeight={600} variant='h5'>
+            <Typography fontWeight={600} variant="h5">
               Sign up
             </Typography>
           </Stack>

src/pages/AuthPage/styled.tsx

@@ -1,9 +1,9 @@
 import { AppLogo } from '@/assets'
 import { Stack, styled, StackProps, Box } from '@mui/material'
 
-export const StyledContent = styled((props: StackProps) => (
-	<Stack {...props} gap={'1rem'} alignItems={'center'} />
-))(({ theme }) => {
+export const StyledContent = styled((props: StackProps) => <Stack {...props} gap={'1rem'} alignItems={'center'} />)(({
+  theme,
+}) => {
   return {
     background: theme.palette.secondary.main,
     position: 'absolute',

src/pages/HomePage/Home.Page.tsx

@@ -18,48 +18,34 @@ const HomePage = () => {
 
   const handleLearnMore = () => {
     // @ts-ignore
-		window.open(`https://info.${DOMAIN}`, '_blank').focus();
+    window.open(`https://info.${DOMAIN}`, '_blank').focus()
   }
 
   return (
     <Stack maxHeight={'100%'} overflow={'auto'}>
-			<SectionTitle marginBottom={'0.5rem'}>
-				{isNoKeys ? 'Welcome' : 'Accounts:'}
-			</SectionTitle>
+      <SectionTitle marginBottom={'0.5rem'}>{isNoKeys ? 'Welcome' : 'Accounts:'}</SectionTitle>
       <Stack gap={'0.5rem'} overflow={'auto'}>
         {isNoKeys && (
           <>
-						<Typography textAlign={'left'} variant='h6' paddingTop='1em'>
+            <Typography textAlign={'left'} variant="h6" paddingTop="1em">
               Nsec.app is a novel key storage app for Nostr.
             </Typography>
-						<GetStartedButton onClick={handleClickAddAccount}>
-							Get started
-						</GetStartedButton>
-						<Typography textAlign={'left'} variant='h6' paddingTop='2em'>
-							Your keys are stored in your browser and
-							can be used in many Nostr apps without the 
-							need for a browser extension. 
+            <GetStartedButton onClick={handleClickAddAccount}>Get started</GetStartedButton>
+            <Typography textAlign={'left'} variant="h6" paddingTop="2em">
+              Your keys are stored in your browser and can be used in many Nostr apps without the need for a browser
+              extension.
             </Typography>
-						<LearnMoreButton onClick={handleLearnMore}>
-							Learn more
-						</LearnMoreButton>
+            <LearnMoreButton onClick={handleLearnMore}>Learn more</LearnMoreButton>
           </>
         )}
         {!isNoKeys && (
           <Fragment>
-						<Box
-							flex={1}
-							overflow={'auto'}
-							borderRadius={'8px'}
-							padding={'0.25rem'}
-						>
+            <Box flex={1} overflow={'auto'} borderRadius={'8px'} padding={'0.25rem'}>
               {keys.map((key) => (
                 <ItemKey {...key} key={key.npub} />
               ))}
             </Box>
-						<AddAccountButton onClick={handleClickAddAccount}>
-							Add account
-						</AddAccountButton>
+            <AddAccountButton onClick={handleClickAddAccount}>Add account</AddAccountButton>
           </Fragment>
         )}
       </Stack>

src/pages/HomePage/components/ItemKey.tsx

@@ -1,13 +1,6 @@
 import { FC } from 'react'
 import { DbKey } from '../../../modules/db'
-import {
-	Avatar,
-	Stack,
-	StackProps,
-	Typography,
-	TypographyProps,
-	styled,
-} from '@mui/material'
+import { Avatar, Stack, StackProps, Typography, TypographyProps, styled } from '@mui/material'
 import { getShortenNpub } from '../../../utils/helpers/helpers'
 import { useNavigate } from 'react-router-dom'
 
@@ -26,22 +19,19 @@ export const ItemKey: FC<ItemKeyProps> = (props) => {
 
   return (
     <StyledKeyContainer onClick={handleNavigate}>
-			<Stack direction={'row'} alignItems={'center'} gap='1rem'>
+      <Stack direction={'row'} alignItems={'center'} gap="1rem">
         <Avatar src={userAvatar} alt={userName} />
-				<StyledText variant='body1'>{userName}</StyledText>
+        <StyledText variant="body1">{userName}</StyledText>
       </Stack>
     </StyledKeyContainer>
   )
 }
 
-const StyledKeyContainer = styled((props: StackProps) => (
-	<Stack marginBottom={'0.5rem'} gap={'0.25rem'} {...props} />
-))(({ theme }) => {
+const StyledKeyContainer = styled((props: StackProps) => <Stack marginBottom={'0.5rem'} gap={'0.25rem'} {...props} />)(
+  ({ theme }) => {
     return {
       boxShadow:
-			theme.palette.mode === 'dark'
-				? '0px 1px 6px 0px rgba(92, 92, 92, 0.2)'
-				: '0px 1px 6px 0px rgba(0, 0, 0, 0.2)',
+        theme.palette.mode === 'dark' ? '0px 1px 6px 0px rgba(92, 92, 92, 0.2)' : '0px 1px 6px 0px rgba(0, 0, 0, 0.2)',
       borderRadius: '12px',
       padding: '0.5rem 1rem',
       background: theme.palette.background.paper,
@@ -50,11 +40,10 @@ const StyledKeyContainer = styled((props: StackProps) => (
       },
       cursor: 'pointer',
     }
-})
+  }
+)
 
-export const StyledText = styled((props: TypographyProps) => (
-	<Typography {...props} />
-))({
+export const StyledText = styled((props: TypographyProps) => <Typography {...props} />)({
   fontWeight: 500,
   width: '100%',
   wordBreak: 'break-all',

src/pages/KeyPage/Key.Page.tsx

@@ -28,27 +28,19 @@ const KeyPage = () => {
   const { handleOpen } = useModalSearchParams()
 
   // const { userNameWithPrefix } = useProfile(npub)
-	const { handleEnableBackground, showWarning, isEnabling } =
-		useBackgroundSigning()
+  const { handleEnableBackground, showWarning, isEnabling } = useBackgroundSigning()
 
-	const key = keys.find(k => k.npub === npub)
+  const key = keys.find((k) => k.npub === npub)
   let username = ''
   if (key?.name) {
-		if (key.name.includes('@'))
-			username = key.name
-		else
-			username = `${key?.name}@${DOMAIN}`
+    if (key.name.includes('@')) username = key.name
+    else username = `${key?.name}@${DOMAIN}`
   }
 
   const filteredApps = apps.filter((a) => a.npub === npub)
-	const { prepareEventPendings } = useTriggerConfirmModal(
-		npub,
-		pending,
-		perms,
-	)
+  const { prepareEventPendings } = useTriggerConfirmModal(npub, pending, perms)
 
-	const handleOpenConnectAppModal = () =>
-		handleOpen(MODAL_PARAMS_KEYS.CONNECT_APP)
+  const handleOpenConnectAppModal = () => handleOpen(MODAL_PARAMS_KEYS.CONNECT_APP)
 
   const handleOpenSettingsModal = () => handleOpen(MODAL_PARAMS_KEYS.SETTINGS)
 
@@ -56,19 +48,16 @@ const KeyPage = () => {
     <>
       <Stack gap={'1rem'} height={'100%'}>
         {showWarning && (
-					<BackgroundSigningWarning
-						isEnabling={isEnabling}
-						onEnableBackSigning={handleEnableBackground}
-					/>
+          <BackgroundSigningWarning isEnabling={isEnabling} onEnableBackSigning={handleEnableBackground} />
         )}
         <UserValueSection
-					title='Your login'
+          title="Your login"
           value={username}
           copyValue={username}
           explanationType={EXPLANATION_MODAL_KEYS.NPUB}
         />
         <UserValueSection
-					title='Your NPUB'
+          title="Your NPUB"
           value={npub}
           copyValue={npub}
           explanationType={EXPLANATION_MODAL_KEYS.NPUB}
@@ -80,11 +69,7 @@ const KeyPage = () => {
             Connect app
           </StyledIconButton>
 
-					<StyledIconButton
-						bgcolor_variant='secondary'
-						onClick={handleOpenSettingsModal}
-						withBadge={!isSynced}
-					>
+          <StyledIconButton bgcolor_variant="secondary" onClick={handleOpenSettingsModal} withBadge={!isSynced}>
             <SettingsIcon />
             Settings
           </StyledIconButton>

src/pages/KeyPage/components/Apps.tsx

@@ -27,30 +27,14 @@ export const Apps: FC<AppsProps> = ({ apps = [], npub = '' }) => {
   }
 
   return (
-		<Box
-			flex={1}
-			marginBottom={'1rem'}
-			display={'flex'}
-			flexDirection={'column'}
-			overflow={'auto'}
-		>
-			<Stack
-				direction={'row'}
-				alignItems={'center'}
-				justifyContent={'space-between'}
-				marginBottom={'0.5rem'}
-			>
+    <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' />
+        <AppLink title="Discover Apps" />
       </Stack>
       {!apps.length && (
         <StyledEmptyAppsBox>
-					<Typography
-						className='message'
-						variant='h5'
-						fontWeight={600}
-						textAlign={'center'}
-					>
+          <Typography className="message" variant="h5" fontWeight={600} textAlign={'center'}>
             No connected apps
           </Typography>
           <Button>Discover Nostr Apps</Button>

src/pages/KeyPage/components/BackgroundSigningWarning.tsx

@@ -8,19 +8,15 @@ type BackgroundSigningWarningProps = {
   onEnableBackSigning: () => void
 }
 
-export const BackgroundSigningWarning: FC<BackgroundSigningWarningProps> = ({
-	isEnabling,
-	onEnableBackSigning,
-}) => {
+export const BackgroundSigningWarning: FC<BackgroundSigningWarningProps> = ({ isEnabling, onEnableBackSigning }) => {
   return (
     <Warning
       message={
         <Stack direction={'row'} alignItems={'center'} gap={'1rem'}>
-					Please enable push notifications{' '}
-					{isEnabling ? <CircularProgress size={'1.5rem'} /> : null}
+          Please enable push notifications {isEnabling ? <CircularProgress size={'1.5rem'} /> : null}
         </Stack>
       }
-			Icon={<GppMaybeIcon htmlColor='white' />}
+      Icon={<GppMaybeIcon htmlColor="white" />}
       onClick={isEnabling ? undefined : onEnableBackSigning}
     />
   )

src/pages/KeyPage/components/ItemApp.tsx

@@ -19,22 +19,12 @@ export const ItemApp: FC<ItemAppProps> = ({ npub, appNpub, icon, name }) => {
       component={Link}
       to={`/key/${npub}/app/${appNpub}`}
     >
-			<Avatar
-				variant='square'
-				sx={{ width: 56, height: 56 }}
-				src={icon}
-				alt={name}
-			/>
+      <Avatar variant="square" sx={{ width: 56, height: 56 }} src={icon} alt={name} />
       <Stack>
-				<Typography noWrap display={'block'} variant='body2'>
+        <Typography noWrap display={'block'} variant="body2">
           {appName}
         </Typography>
-				<Typography
-					noWrap
-					display={'block'}
-					variant='caption'
-					color={'GrayText'}
-				>
+        <Typography noWrap display={'block'} variant="caption" color={'GrayText'}>
           Basic actions
         </Typography>
       </Stack>

src/pages/KeyPage/components/UserValueSection.tsx

@@ -14,12 +14,7 @@ type UserValueSectionProps = {
   copyValue: string
 }
 
-const UserValueSection: FC<UserValueSectionProps> = ({
-	title,
-	value,
-	explanationType,
-	copyValue,
-}) => {
+const UserValueSection: FC<UserValueSectionProps> = ({ title, value, explanationType, copyValue }) => {
   const { handleOpen } = useModalSearchParams()
 
   const handleOpenExplanationModal = (type: EXPLANATION_MODAL_KEYS) => {
@@ -31,23 +26,11 @@ const UserValueSection: FC<UserValueSectionProps> = ({
   }
   return (
     <Box>
-			<Stack
-				direction={'row'}
-				alignItems={'center'}
-				justifyContent={'space-between'}
-				marginBottom={'0.5rem'}
-			>
+      <Stack direction={'row'} alignItems={'center'} justifyContent={'space-between'} marginBottom={'0.5rem'}>
         <SectionTitle>{title}</SectionTitle>
-				<AppLink
-					title='What is this?'
-					onClick={() => handleOpenExplanationModal(explanationType)}
-				/>
+        <AppLink title="What is this?" onClick={() => handleOpenExplanationModal(explanationType)} />
       </Stack>
-			<StyledInput
-				value={value}
-				readOnly
-				endAdornment={<InputCopyButton value={copyValue} />}
-			/>
+      <StyledInput value={value} readOnly endAdornment={<InputCopyButton value={copyValue} />} />
     </Box>
   )
 }

src/pages/KeyPage/components/styled.tsx

@@ -8,14 +8,14 @@ export const StyledInput = styled(
       <Input
         {...props}
         ref={ref}
-				className='input'
+        className="input"
         containerProps={{
           className,
         }}
         fullWidth
       />
     )
-	}),
+  })
 )(({ theme }) => ({
   '& > .input': {
     border: 'none',
@@ -27,11 +27,9 @@ export const StyledInput = styled(
   },
 }))
 
-export const StyledItemAppContainer = styled(
-	<C extends React.ElementType>(props: StackProps<C, { component?: C }>) => (
+export const StyledItemAppContainer = styled(<C extends React.ElementType>(props: StackProps<C, { component?: C }>) => (
   <Stack {...props} />
-	),
-)(({ theme }) => ({
+))(({ theme }) => ({
   textDecoration: 'none',
   boxShadow: 'none',
   color: theme.palette.text.primary,

src/pages/KeyPage/hooks/useBackgroundSigning.ts

@@ -23,10 +23,7 @@ export const useBackgroundSigning = () => {
       notify('Push notifications enabled!', 'success')
       setShowWarning(false)
     } catch (error: any) {
-			notify(
-				`Failed to enable push subscription: ${error}`,
-				'error',
-			)
+      notify(`Failed to enable push subscription: ${error}`, 'error')
     }
     setIsLoading(false)
     checkBackgroundSigning()

src/pages/KeyPage/hooks/useTriggerConfirmModal.ts

@@ -15,38 +15,21 @@ type IShownConfirmModals = {
   [reqId: string]: boolean
 }
 
-export const useTriggerConfirmModal = (
-	npub: string,
-	pending: DbPending[],
-	perms: DbPerm[],
-) => {
+export const useTriggerConfirmModal = (npub: string, pending: DbPending[], perms: DbPerm[]) => {
   const { handleOpen, getModalOpened } = useModalSearchParams()
 
-	const isConfirmConnectModalOpened = getModalOpened(
-		MODAL_PARAMS_KEYS.CONFIRM_CONNECT,
-	)
-	const isConfirmEventModalOpened = getModalOpened(
-		MODAL_PARAMS_KEYS.CONFIRM_EVENT,
-	)
+  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 filteredPerms = perms.filter((p) => p.npub === npub)
 
-	const npubConnectPerms = filteredPerms.filter(
-		(perm) => perm.perm === 'connect' || perm.perm === ACTION_TYPE.BASIC,
-	)
-	const excludeConnectPendings = filteredPendingReqs.filter(
-		(pr) => pr.method !== 'connect',
-	)
-	const connectPendings = filteredPendingReqs.filter(
-		(pr) => pr.method === 'connect',
-	)
+  const npubConnectPerms = filteredPerms.filter((perm) => perm.perm === 'connect' || perm.perm === ACTION_TYPE.BASIC)
+  const excludeConnectPendings = filteredPendingReqs.filter((pr) => pr.method !== 'connect')
+  const connectPendings = filteredPendingReqs.filter((pr) => pr.method === 'connect')
 
-	const prepareEventPendings =
-		excludeConnectPendings.reduce<IPendingsByAppNpub>((acc, current) => {
-			const isConnected = npubConnectPerms.some(
-				(cp) => cp.appNpub === current.appNpub,
-			)
+  const prepareEventPendings = excludeConnectPendings.reduce<IPendingsByAppNpub>((acc, current) => {
+    const isConnected = npubConnectPerms.some((cp) => cp.appNpub === current.appNpub)
     if (!acc[current.appNpub]) {
       acc[current.appNpub] = {
         pending: [current],
@@ -70,12 +53,7 @@ export const useTriggerConfirmModal = (
   }, [npub, pending.length])
 
   const handleOpenConfirmConnectModal = useCallback(() => {
-		if (
-			!filteredPendingReqs.length ||
-			isConfirmEventModalOpened ||
-			isConfirmConnectModalOpened
-		)
-			return undefined
+    if (!filteredPendingReqs.length || isConfirmEventModalOpened || isConfirmConnectModalOpened) return undefined
 
     for (let i = 0; i < connectPendings.length; i++) {
       const req = connectPendings[i]
@@ -92,25 +70,15 @@ export const useTriggerConfirmModal = (
       })
       break
     }
-	}, [
-		connectPendings,
-		filteredPendingReqs.length,
-		handleOpen,
-		isConfirmEventModalOpened,
-		isConfirmConnectModalOpened,
-	])
+  }, [connectPendings, filteredPendingReqs.length, handleOpen, isConfirmEventModalOpened, isConfirmConnectModalOpened])
 
   const handleOpenConfirmEventModal = useCallback(() => {
-		if (!filteredPendingReqs.length || connectPendings.length)
-			return undefined
+    if (!filteredPendingReqs.length || connectPendings.length) return undefined
 
     for (let i = 0; i < Object.keys(prepareEventPendings).length; i++) {
       const appNpub = Object.keys(prepareEventPendings)[i]
 
-			if (
-				shownConfirmEventModals.current[appNpub] ||
-				!prepareEventPendings[appNpub].isConnected
-			) {
+      if (shownConfirmEventModals.current[appNpub] || !prepareEventPendings[appNpub].isConnected) {
         continue
       }
 
@@ -122,12 +90,7 @@ export const useTriggerConfirmModal = (
       })
       break
     }
-	}, [
-		connectPendings.length,
-		filteredPendingReqs.length,
-		handleOpen,
-		prepareEventPendings,
-	])
+  }, [connectPendings.length, filteredPendingReqs.length, handleOpen, prepareEventPendings])
 
   useEffect(() => {
     handleOpenConfirmEventModal()

src/pages/KeyPage/styled.tsx

@@ -7,18 +7,16 @@ type StyledIconButtonProps = ButtonProps & {
   withBadge?: boolean
 }
 
-export const StyledIconButton = styled(
-	({ withBadge, ...props }: StyledIconButtonProps) => {
+export const StyledIconButton = styled(({ withBadge, ...props }: StyledIconButtonProps) => {
   if (withBadge) {
     return (
-				<Badge sx={{ flex: 1 }} badgeContent={''} color='error'>
+      <Badge sx={{ flex: 1 }} badgeContent={''} color="error">
         <Button {...props} />
       </Badge>
     )
   }
   return <Button {...props} />
-	},
-)(({ bgcolor_variant = 'primary', theme }) => {
+})(({ bgcolor_variant = 'primary', theme }) => {
   const isPrimary = bgcolor_variant === 'primary'
   return {
     flex: '1',
@@ -30,13 +28,9 @@ export const StyledIconButton = styled(
     borderRadius: '1rem',
     fontSize: '0.875rem',
     '&:is(:hover, :active, &)': {
-			background: isPrimary
-				? theme.palette.primary.main
-				: theme.palette.secondary.main,
+      background: isPrimary ? theme.palette.primary.main : theme.palette.secondary.main,
     },
-		color: isPrimary
-			? theme.palette.text.secondary
-			: theme.palette.text.primary,
+    color: isPrimary ? theme.palette.text.secondary : theme.palette.text.primary,
   }
 })
 
@@ -64,14 +58,14 @@ export const StyledInput = styled(
       <Input
         {...props}
         ref={ref}
-				className='input'
+        className="input"
         containerProps={{
           className,
         }}
         fullWidth
       />
     )
-	}),
+  })
 )(({ theme }) => ({
   '& > .input': {
     border: 'none',

src/pages/Welcome.Page.tsx

@@ -50,42 +50,24 @@ const WelcomePage = () => {
   return (
     <Stack gap={'1.5rem'}>
       <Box alignSelf={'center'}>
-				<Button size='small' variant='contained' onClick={generateKey}>
+        <Button size="small" variant="contained" onClick={generateKey}>
           generate key
         </Button>
       </Box>
 
-			<Stack alignItems={'center'} gap='0.5rem'>
-				<TextField
-					variant='outlined'
-					ref={nsecInputRef}
-					placeholder='Enter nsec...'
-					fullWidth
-					size='small'
-				/>
-				<Button size='small' variant='contained' onClick={importKey}>
+      <Stack alignItems={'center'} gap="0.5rem">
+        <TextField variant="outlined" ref={nsecInputRef} placeholder="Enter nsec..." fullWidth size="small" />
+        <Button size="small" variant="contained" onClick={importKey}>
           import key (DANGER!)
         </Button>
       </Stack>
 
-			<Stack alignItems={'center'} gap='0.5rem'>
-				<Stack width={'100%'} gap='0.5rem'>
-					<TextField
-						variant='outlined'
-						ref={npubInputRef}
-						placeholder='Enter npub...'
-						fullWidth
-						size='small'
-					/>
-					<TextField
-						variant='outlined'
-						ref={passwordInputRef}
-						placeholder='Enter password'
-						fullWidth
-						size='small'
-					/>
+      <Stack alignItems={'center'} gap="0.5rem">
+        <Stack width={'100%'} gap="0.5rem">
+          <TextField variant="outlined" ref={npubInputRef} placeholder="Enter npub..." fullWidth size="small" />
+          <TextField variant="outlined" ref={passwordInputRef} placeholder="Enter password" fullWidth size="small" />
         </Stack>
-				<Button size='small' variant='contained' onClick={fetchNewKey}>
+        <Button size="small" variant="contained" onClick={fetchNewKey}>
           fetch key
         </Button>
       </Stack>

src/reportWebVitals.ts

@@ -1,15 +1,15 @@
-import { ReportHandler } from 'web-vitals';
+import { ReportHandler } from 'web-vitals'
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
+      getCLS(onPerfEntry)
+      getFID(onPerfEntry)
+      getFCP(onPerfEntry)
+      getLCP(onPerfEntry)
+      getTTFB(onPerfEntry)
+    })
   }
-};
+}
 
-export default reportWebVitals;
+export default reportWebVitals

src/routes/AppRoutes.tsx

@@ -19,21 +19,15 @@ const AppRoutes = () => {
   return (
     <Suspense fallback={<LoadingSpinner />}>
       <Routes>
-				<Route path='/' element={<Layout />}>
-					<Route path='/' element={<Navigate to={'/home'} />} />
+        <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 />}
-					/>
-					<Route
-						path='/key/:npub/:req_id'
-						element={<ConfirmPage />}
-					/>
+          <Route path="/home" element={<HomePage />} />
+          <Route path="/key/:npub" element={<KeyPage />} />
+          <Route path="/key/:npub/app/:appNpub" element={<AppPage />} />
+          <Route path="/key/:npub/:req_id" element={<ConfirmPage />} />
         </Route>
-				<Route path='*' element={<Navigate to={'/home'} />} />
+        <Route path="*" element={<Navigate to={'/home'} />} />
       </Routes>
     </Suspense>
   )

src/service-worker.ts

@@ -51,15 +51,14 @@ registerRoute(
     // Return true to signal that we want to use the handler.
     return true
   },
-	createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html'),
+  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
 )
 
 // An example runtime caching route for requests that aren't handled by the
 // precache, in this case same-origin .png requests like those from in public/
 registerRoute(
   // Add in any other file extensions or routing criteria as needed.
-	({ url }) =>
-		url.origin === self.location.origin && url.pathname.endsWith('.png'),
+  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
   // Customize this strategy as needed, e.g., by changing to CacheFirst.
   new StaleWhileRevalidate({
     cacheName: 'images',
@@ -68,7 +67,7 @@ registerRoute(
       // least-recently used images are removed.
       new ExpirationPlugin({ maxEntries: 50 }),
     ],
-	}),
+  })
 )
 
 // This allows the web app to trigger skipWaiting via

src/serviceWorkerRegistration.ts

@@ -16,34 +16,34 @@ const isLocalhost = Boolean(
     window.location.hostname === '[::1]' ||
     // 127.0.0.0/8 are considered localhost for IPv4.
     window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
-);
+)
 
 type Config = {
-  onSuccess?: (registration: ServiceWorkerRegistration) => void;
-  onUpdate?: (registration: ServiceWorkerRegistration) => void;
-  onError?: (e: any) => void;
-};
+  onSuccess?: (registration: ServiceWorkerRegistration) => void
+  onUpdate?: (registration: ServiceWorkerRegistration) => void
+  onError?: (e: any) => void
+}
 
 export function register(config?: Config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href)
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
       // from what our page is served on. This might happen if a CDN is used to
       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
       if (config && config.onError) {
-        config.onError(new Error("Wrong origin"));
+        config.onError(new Error('Wrong origin'))
       }
-      return;
+      return
     }
 
     window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
 
       if (isLocalhost) {
         // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
+        checkValidServiceWorker(swUrl, config)
 
         // Add some additional logging to localhost, pointing developers to the
         // service worker/PWA documentation.
@@ -51,16 +51,16 @@ export function register(config?: Config) {
           console.log(
             'This web app is being served cache-first by a service ' +
               'worker. To learn more, visit https://cra.link/PWA'
-          );
-        });
+          )
+        })
       } else {
         // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
+        registerValidSW(swUrl, config)
       }
-    });
+    })
   } else {
     if (config && config.onError) {
-      config.onError(new Error("No service worker"));
+      config.onError(new Error('No service worker'))
     }
   }
 }
@@ -70,9 +70,9 @@ function registerValidSW(swUrl: string, config?: Config) {
     .register(swUrl)
     .then((registration) => {
       registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
+        const installingWorker = registration.installing
         if (installingWorker == null) {
-          return;
+          return
         }
         installingWorker.onstatechange = () => {
           if (installingWorker.state === 'installed') {
@@ -83,33 +83,33 @@ function registerValidSW(swUrl: string, config?: Config) {
               console.log(
                 'New content is available and will be used when all ' +
                   'tabs for this page are closed. See https://cra.link/PWA.'
-              );
+              )
 
               // Execute callback
               if (config && config.onUpdate) {
-                config.onUpdate(registration);
+                config.onUpdate(registration)
               }
             } else {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
+              console.log('Content is cached for offline use.')
 
               // Execute callback
               if (config && config.onSuccess) {
-                config.onSuccess(registration);
+                config.onSuccess(registration)
+              }
+            }
           }
         }
       }
-        };
-      };
     })
     .catch((error) => {
-      console.error('Error during service worker registration:', error);
+      console.error('Error during service worker registration:', error)
       if (config && config.onError) {
-        config.onError(new Error(`Install error: ${error}`));
+        config.onError(new Error(`Install error: ${error}`))
       }
-    });
+    })
 }
 
 function checkValidServiceWorker(swUrl: string, config?: Config) {
@@ -119,35 +119,32 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
   })
     .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
+      const contentType = response.headers.get('content-type')
+      if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
         // No service worker found. Probably a different app. Reload the page.
         navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
+            window.location.reload()
+          })
+        })
       } else {
         // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
+        registerValidSW(swUrl, config)
       }
     })
     .catch(() => {
-      console.log('No internet connection found. App is running in offline mode.');
-    });
+      console.log('No internet connection found. App is running in offline mode.')
+    })
 }
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready
       .then((registration) => {
-        registration.unregister();
+        registration.unregister()
       })
       .catch((error) => {
-        console.error(error.message);
-      });
+        console.error(error.message)
+      })
   }
 }

src/setupTests.ts

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom'

src/shared/AppLink/AppLink.tsx

@@ -9,9 +9,9 @@ export const AppLink: FC<AppLinkProps> = ({ title = '', ...rest }) => {
   return <StyledTypography {...rest}>{title}</StyledTypography>
 }
 
-const StyledTypography = styled((props: TypographyProps) => (
-	<Typography {...props} variant='caption' />
-))(({ theme }) => {
+const StyledTypography = styled((props: TypographyProps) => <Typography {...props} variant="caption" />)(({
+  theme,
+}) => {
   return {
     color: theme.palette.textSecondaryDecorate.main,
     cursor: 'pointer',

src/shared/Button/Button.tsx

@@ -1,28 +1,20 @@
-import {
-	styled,
-	Button as MuiButton,
-	ButtonProps as MuiButtonProps,
-} from '@mui/material'
+import { styled, Button as MuiButton, ButtonProps as MuiButtonProps } from '@mui/material'
 import { forwardRef } from 'react'
 
 export type AppButtonProps = MuiButtonProps & {
   varianttype?: 'light' | 'default' | 'dark' | 'secondary'
 }
 
-export const Button = forwardRef<HTMLButtonElement, AppButtonProps>(
-	({ children, ...restProps }, ref) => {
+export const Button = forwardRef<HTMLButtonElement, AppButtonProps>(({ children, ...restProps }, ref) => {
   return (
     <StyledButton classes={{ root: 'button' }} {...restProps} ref={ref}>
       {children}
     </StyledButton>
   )
-	},
-)
+})
 
 const StyledButton = styled(
-	forwardRef<HTMLButtonElement, AppButtonProps>((props, ref) => (
-		<MuiButton ref={ref} {...props} />
-	)),
+  forwardRef<HTMLButtonElement, AppButtonProps>((props, ref) => <MuiButton ref={ref} {...props} />)
 )(({ theme, varianttype = 'default' }) => {
   const commonStyles = {
     fontWeight: 500,

src/shared/Checkbox/Checkbox.tsx

@@ -1,37 +1,26 @@
 import { forwardRef } from 'react'
 import { Checkbox as MuiCheckbox, CheckboxProps, styled } from '@mui/material'
-import {
-	CheckedIcon,
-	CheckedLightIcon,
-	UnchekedIcon,
-	UnchekedLightIcon,
-} from '@/assets'
+import { CheckedIcon, CheckedLightIcon, UnchekedIcon, UnchekedLightIcon } from '@/assets'
 import { useAppSelector } from '@/store/hooks/redux'
 
-export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
-	(props, ref) => {
+export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>((props, ref) => {
   const { themeMode } = useAppSelector((state) => state.ui)
 
   return <StyledCheckbox ref={ref} {...props} mode={themeMode} />
-	},
-)
+})
 
 const StyledCheckbox = styled(
-	forwardRef<HTMLButtonElement, CheckboxProps & { mode: 'dark' | 'light' }>(
-		({ mode, ...restProps }, ref) => {
+  forwardRef<HTMLButtonElement, CheckboxProps & { mode: 'dark' | 'light' }>(({ mode, ...restProps }, ref) => {
     const isDarkMode = mode === 'dark'
     return (
       <MuiCheckbox
         {...restProps}
         ref={ref}
         icon={isDarkMode ? <UnchekedLightIcon /> : <UnchekedIcon />}
-					checkedIcon={
-						isDarkMode ? <CheckedLightIcon /> : <CheckedIcon />
-					}
+        checkedIcon={isDarkMode ? <CheckedLightIcon /> : <CheckedIcon />}
       />
     )
-		},
-	),
+  })
 )(() => ({
   '& .MuiSvgIcon-root': { fontSize: '1.5rem' },
   marginLeft: '-10px',

src/shared/ConfirmModal/ConfirmModal.tsx

@@ -1,12 +1,5 @@
 import React, { FC } from 'react'
-import {
-	Dialog,
-	DialogActions,
-	DialogContent,
-	DialogProps,
-	DialogTitle,
-	Slide,
-} from '@mui/material'
+import { Dialog, DialogActions, DialogContent, DialogProps, DialogTitle, Slide } from '@mui/material'
 import { Button } from '../Button/Button'
 import { TransitionProps } from '@mui/material/transitions'
 import { StyledDialogContentText } from './styled'
@@ -15,9 +8,9 @@ const Transition = React.forwardRef(function Transition(
   props: TransitionProps & {
     children: React.ReactElement<any, any>
   },
-	ref: React.Ref<unknown>,
+  ref: React.Ref<unknown>
 ) {
-	return <Slide direction='up' ref={ref} {...props} />
+  return <Slide direction="up" ref={ref} {...props} />
 })
 
 type ConfirmModalProps = {
@@ -55,7 +48,7 @@ export const ConfirmModal: FC<ConfirmModalProps> = ({
         <StyledDialogContentText>{description}</StyledDialogContentText>
       </DialogContent>
       <DialogActions>
-				<Button varianttype='secondary' onClick={onCancel}>
+        <Button varianttype="secondary" onClick={onCancel}>
           Cancel
         </Button>
         <Button onClick={onConfirm}>Confirm</Button>

src/shared/ConfirmModal/styled.tsx

@@ -1,11 +1,7 @@
-import {
-	DialogContentText,
-	DialogContentTextProps,
-	styled,
-} from '@mui/material'
+import { DialogContentText, DialogContentTextProps, styled } from '@mui/material'
 
-export const StyledDialogContentText = styled(
-	(props: DialogContentTextProps) => <DialogContentText {...props} />,
-)(({ theme }) => ({
+export const StyledDialogContentText = styled((props: DialogContentTextProps) => <DialogContentText {...props} />)(
+  ({ theme }) => ({
     color: theme.palette.primary.main,
-}))
+  })
+)

src/shared/DebounceInput/DebounceInput.tsx

@@ -1,27 +1,26 @@
-import { forwardRef, useRef } from "react";
-import { Input, InputProps } from "../Input/Input";
+import { forwardRef, useRef } from 'react'
+import { Input, InputProps } from '../Input/Input'
 
 export type DebounceProps = {
-  handleDebounce: (value: string) => void;
-  debounceTimeout: number;
-};
+  handleDebounce: (value: string) => void
+  debounceTimeout: number
+}
 
 export const DebounceInput = (props: InputProps & DebounceProps) => {
-  const { handleDebounce, debounceTimeout, ...rest } = props;
+  const { handleDebounce, debounceTimeout, ...rest } = props
 
-  const timerRef = useRef<number>();
+  const timerRef = useRef<number>()
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (timerRef.current) {
-      clearTimeout(timerRef.current);
+      clearTimeout(timerRef.current)
     }
 
     timerRef.current = window.setTimeout(() => {
-      handleDebounce(event.target.value);
-    }, debounceTimeout);
-  };
+      handleDebounce(event.target.value)
+    }, debounceTimeout)
+  }
 
   // @ts-ignore
-  return  <Input {...rest} onChange={handleChange} />;
+  return <Input {...rest} onChange={handleChange} />
 }
-

src/shared/Input/Input.tsx

@@ -22,31 +22,22 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     return (
       <StyledInputContainer {...containerProps}>
         {label ? (
-					<FormLabel className='label' htmlFor={props.id}>
+          <FormLabel className="label" htmlFor={props.id}>
             {label}
           </FormLabel>
         ) : null}
-				<InputBase
-					className='input'
-					{...props}
-					classes={{ error: 'error' }}
-					inputRef={ref}
-				/>
+        <InputBase className="input" {...props} classes={{ error: 'error' }} inputRef={ref} />
         {helperText ? (
-					<FormHelperText
-						{...helperTextProps}
-						className='helper_text'
-					>
+          <FormHelperText {...helperTextProps} className="helper_text">
             {helperText}
           </FormHelperText>
         ) : null}
       </StyledInputContainer>
     )
-	},
+  }
 )
 
-const StyledInputContainer = styled((props: BoxProps) => <Box {...props} />)(
-	({ theme }) => {
+const StyledInputContainer = styled((props: BoxProps) => <Box {...props} />)(({ theme }) => {
   const isDark = theme.palette.mode === 'dark'
   return {
     width: '100%',
@@ -75,5 +66,4 @@ const StyledInputContainer = styled((props: BoxProps) => <Box {...props} />)(
       fontSize: '0.875rem',
     },
   }
-	},
-)
+})

src/shared/InputCopyButton/InputCopyButton.tsx

@@ -9,10 +9,7 @@ type InputCopyButtonProps = {
   onCopy?: () => void
 }
 
-export const InputCopyButton: FC<InputCopyButtonProps> = ({
-	value,
-	onCopy = () => undefined,
-}) => {
+export const InputCopyButton: FC<InputCopyButtonProps> = ({ value, onCopy = () => undefined }) => {
   const [isCopied, setIsCopied] = useState(false)
 
   const handleCopy = () => {
@@ -37,17 +34,13 @@ export const InputCopyButton: FC<InputCopyButtonProps> = ({
     <StyledContainer copied={isCopied ? 1 : 0}>
       {isCopied && (
         <Fade in exit>
-					<Typography
-						marginLeft={'0.5rem'}
-						variant='body2'
-						color={'inherit'}
-					>
+          <Typography marginLeft={'0.5rem'} variant="body2" color={'inherit'}>
             Copied
           </Typography>
         </Fade>
       )}
       <CopyToClipboard text={value} onCopy={handleCopy}>
-				<IconButton color='inherit'>
+        <IconButton color="inherit">
           <CopyIcon />
         </IconButton>
       </CopyToClipboard>

src/shared/InputCopyButton/styled.tsx

@@ -1,11 +1,7 @@
 import { Stack, StackProps, styled } from '@mui/material'
 
-export const StyledContainer = styled(
-	(props: StackProps & { copied: number }) => (
+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,
+))(({ theme, copied }) => ({
+  color: copied ? theme.palette.success.main : theme.palette.textSecondaryDecorate.main,
 }))

src/shared/Modal/Modal.tsx

@@ -1,12 +1,7 @@
 import { DialogProps, IconButton, Slide } from '@mui/material'
 import { TransitionProps } from '@mui/material/transitions'
 import { FC, forwardRef } from 'react'
-import {
-	StyledCloseButtonWrapper,
-	StyledDialog,
-	StyledDialogContent,
-	StyledDialogTitle,
-} from './styled'
+import { StyledCloseButtonWrapper, StyledDialog, StyledDialogContent, StyledDialogTitle } from './styled'
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded'
 
 type ModalProps = DialogProps & {
@@ -18,32 +13,17 @@ const Transition = forwardRef(function Transition(
   props: TransitionProps & {
     children: React.ReactElement
   },
-	ref: React.Ref<unknown>,
+  ref: React.Ref<unknown>
 ) {
-	return <Slide direction='up' ref={ref} {...props} />
+  return <Slide direction="up" ref={ref} {...props} />
 })
 
-export const Modal: FC<ModalProps> = ({
-	children,
-	title,
-	onClose,
-	withCloseButton = true,
-	fixedHeight,
-	...props
-}) => {
+export const Modal: FC<ModalProps> = ({ children, title, onClose, withCloseButton = true, fixedHeight, ...props }) => {
   return (
-		<StyledDialog
-			fixedHeight={fixedHeight}
-			{...props}
-			onClose={onClose}
-			TransitionComponent={Transition}
-		>
+    <StyledDialog fixedHeight={fixedHeight} {...props} onClose={onClose} TransitionComponent={Transition}>
       {withCloseButton && (
         <StyledCloseButtonWrapper>
-					<IconButton
-						onClick={() => onClose && onClose({}, 'backdropClick')}
-						className='close_btn'
-					>
+          <IconButton onClick={() => onClose && onClose({}, 'backdropClick')} className="close_btn">
             <CloseRoundedIcon />
           </IconButton>
         </StyledCloseButtonWrapper>

src/shared/Modal/styled.tsx

@@ -10,8 +10,7 @@ import {
   styled,
 } from '@mui/material'
 
-export const StyledDialog = styled(
-	(props: DialogProps & { fixedHeight?: string }) => (
+export const StyledDialog = styled((props: DialogProps & { fixedHeight?: string }) => (
   <Dialog
     {...props}
     classes={{
@@ -27,8 +26,7 @@ export const StyledDialog = styled(
     }}
     fullWidth
   />
-	),
-)(({ theme, fixedHeight = '' }) => {
+))(({ theme, fixedHeight = '' }) => {
   const fixedHeightStyles = fixedHeight ? { height: fixedHeight } : {}
   return {
     '& .container': {
@@ -39,27 +37,20 @@ export const StyledDialog = styled(
       width: '100%',
       borderTopLeftRadius: '2rem',
       borderTopRightRadius: '2rem',
-			background:
-				theme.palette.mode === 'light'
-					? '#fff'
-					: theme.palette.secondary.main,
+      background: theme.palette.mode === 'light' ? '#fff' : theme.palette.secondary.main,
       ...fixedHeightStyles,
     },
   }
 })
 
-export const StyledDialogTitle = styled((props: DialogTitleProps) => (
-	<DialogTitle {...props} variant='h5' />
-))(() => {
+export const StyledDialogTitle = styled((props: DialogTitleProps) => <DialogTitle {...props} variant="h5" />)(() => {
   return {
     textAlign: 'center',
     fontWeight: 600,
   }
 })
 
-export const StyledDialogContent = styled((props: DialogContentProps) => (
-	<DialogContent {...props} />
-))(() => {
+export const StyledDialogContent = styled((props: DialogContentProps) => <DialogContent {...props} />)(() => {
   return {
     padding: '0 1rem 1rem',
     display: 'flex',
@@ -67,9 +58,7 @@ export const StyledDialogContent = styled((props: DialogContentProps) => (
   }
 })
 
-export const StyledCloseButtonWrapper = styled((props: BoxProps) => (
-	<Box {...props} />
-))(() => ({
+export const StyledCloseButtonWrapper = styled((props: BoxProps) => <Box {...props} />)(() => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'flex-end',

src/shared/SectionTitle/SectionTitle.tsx

@@ -7,9 +7,9 @@ export const SectionTitle: FC<SectionTitleProps> = ({ children, ...rest }) => {
   return <StyledTypography {...rest}>{children}</StyledTypography>
 }
 
-const StyledTypography = styled((props: TypographyProps) => (
-	<Typography {...props} variant='caption' />
-))(({ theme }) => {
+const StyledTypography = styled((props: TypographyProps) => <Typography {...props} variant="caption" />)(({
+  theme,
+}) => {
   const isDark = theme.palette.mode === 'dark'
   return {
     textTransform: 'uppercase',

src/store/index.ts

@@ -48,32 +48,18 @@ export const selectAppsByNpub = memoizeOne((state: RootState, npub: string) => {
   return state.content.apps.filter((app) => app.npub === npub)
 }, isDeepEqual)
 
-export const selectPermsByNpub = memoizeOne(
-	(state: RootState, npub: string) => {
+export const selectPermsByNpub = memoizeOne((state: RootState, npub: string) => {
   return state.content.perms.filter((perm) => perm.npub === npub)
-	},
-	isDeepEqual,
-)
+}, isDeepEqual)
 
-export const selectPermsByNpubAndAppNpub = memoizeOne(
-	(state: RootState, npub: string, appNpub: string) => {
-		return state.content.perms.filter(
-			(perm) => perm.npub === npub && perm.appNpub === appNpub,
-		)
-	},
-	isDeepEqual,
-)
+export const selectPermsByNpubAndAppNpub = memoizeOne((state: RootState, npub: string, appNpub: string) => {
+  return state.content.perms.filter((perm) => perm.npub === npub && perm.appNpub === appNpub)
+}, isDeepEqual)
 
-export const selectPendingsByNpub = memoizeOne(
-	(state: RootState, npub: string) => {
+export const selectPendingsByNpub = memoizeOne((state: RootState, npub: string) => {
   return state.content.pending.filter((pending) => pending.npub === npub)
-	},
-	isDeepEqual,
-)
+}, isDeepEqual)
 
-export const selectAppByAppNpub = memoizeOne(
-	(state: RootState, appNpub: string) => {
+export const selectAppByAppNpub = memoizeOne((state: RootState, appNpub: string) => {
   return state.content.apps.find((app) => app.appNpub === appNpub)
-	},
-	isDeepEqual,
-)
+}, isDeepEqual)

src/utils/helpers/helpers.ts

@@ -1,101 +1,97 @@
-import { nip19 } from "nostr-tools";
-import { ACTION_TYPE, NIP46_RELAYS } from "../consts";
-import { DbPending } from "@/modules/db";
-import { MetaEvent } from "@/types/meta-event";
+import { nip19 } from 'nostr-tools'
+import { ACTION_TYPE, NIP46_RELAYS } from '../consts'
+import { DbPending } from '@/modules/db'
+import { MetaEvent } from '@/types/meta-event'
 
 export async function call(cb: () => any) {
   try {
-    return await cb();
+    return await cb()
   } catch (e) {
-    console.log(`Error: ${e}`);
+    console.log(`Error: ${e}`)
   }
 }
 
-export const getShortenNpub = (npub = "") => {
-  return npub.substring(0, 10) + "..." + npub.slice(-4);
-};
+export const getShortenNpub = (npub = '') => {
+  return npub.substring(0, 10) + '...' + npub.slice(-4)
+}
 
 export const getProfileUsername = (profile: MetaEvent | null, npub: string) => {
-  return (
-    profile?.info?.name || profile?.info?.display_name || getShortenNpub(npub)
-  );
-};
+  return profile?.info?.name || profile?.info?.display_name || getShortenNpub(npub)
+}
 
-export const getBunkerLink = (npub = "") => {
-  if (!npub) return "";
-  const { data: pubkey } = nip19.decode(npub);
-  return `bunker://${pubkey}?relay=${NIP46_RELAYS[0]}`;
-};
+export const getBunkerLink = (npub = '') => {
+  if (!npub) return ''
+  const { data: pubkey } = nip19.decode(npub)
+  return `bunker://${pubkey}?relay=${NIP46_RELAYS[0]}`
+}
 
 export async function askNotificationPermission() {
   return new Promise<void>((ok, rej) => {
     // Let's check if the browser supports notifications
-    if (!("Notification" in window)) {
-      rej("This browser does not support notifications.");
+    if (!('Notification' in window)) {
+      rej('This browser does not support notifications.')
     } else {
       Notification.requestPermission().then(() => {
-        if (Notification.permission === "granted") ok();
-        else rej();
-      });
+        if (Notification.permission === 'granted') ok()
+        else rej()
+      })
     }
-  });
+  })
 }
 
 export function getSignReqKind(req: DbPending): number | undefined {
   try {
-    const data = JSON.parse(JSON.parse(req.params)[0]);
-    return data.kind;
+    const data = JSON.parse(JSON.parse(req.params)[0])
+    return data.kind
   } catch {}
-  return undefined;
+  return undefined
 }
 
 export function getReqPerm(req: DbPending): string {
-  if (req.method === "sign_event") {
-    const kind = getSignReqKind(req);
-    if (kind !== undefined) return `${req.method}:${kind}`;
+  if (req.method === 'sign_event') {
+    const kind = getSignReqKind(req)
+    if (kind !== undefined) return `${req.method}:${kind}`
   }
-  return req.method;
+  return req.method
 }
 
 export function isPackagePerm(perm: string, reqPerm: string) {
   if (perm === ACTION_TYPE.BASIC) {
     switch (reqPerm) {
-      case "connect":
-      case "get_public_key":
-      case "nip04_decrypt":
-      case "nip04_encrypt":
-      case "sign_event:0":
-      case "sign_event:1":
-      case "sign_event:3":
-      case "sign_event:6":
-      case "sign_event:7":
-      case "sign_event:9734":
-      case "sign_event:10002":
-      case "sign_event:30023":
-      case "sign_event:10000":
-        return true;
+      case 'connect':
+      case 'get_public_key':
+      case 'nip04_decrypt':
+      case 'nip04_encrypt':
+      case 'sign_event:0':
+      case 'sign_event:1':
+      case 'sign_event:3':
+      case 'sign_event:6':
+      case 'sign_event:7':
+      case 'sign_event:9734':
+      case 'sign_event:10002':
+      case 'sign_event:30023':
+      case 'sign_event:10000':
+        return true
     }
   }
-  return false;
+  return false
 }
 
 export async function fetchNip05(value: string, origin?: string) {
   try {
-    const [username, domain] = value.split("@");
+    const [username, domain] = value.split('@')
     if (!origin) origin = `https://${domain}`
-    const response = await fetch(
-      `${origin}/.well-known/nostr.json?name=${username}`
-    );
+    const response = await fetch(`${origin}/.well-known/nostr.json?name=${username}`)
     const getNpub: {
       names: {
-        [name: string]: string;
-      };
-    } = await response.json();
+        [name: string]: string
+      }
+    } = await response.json()
 
-    const pubkey = getNpub.names[username];
-    return nip19.npubEncode(pubkey);
+    const pubkey = getNpub.names[username]
+    return nip19.npubEncode(pubkey)
   } catch (e) {
-    console.log("Failed to fetch nip05", value, "error: " + e);
+    console.log('Failed to fetch nip05', value, 'error: ' + e)
     return ''
   }
 }