add sync npub logic & change perms and activity history design & add delete app/perm requests

src/components/Modal/ModalSettings/ModalSettings.tsx

@@ -2,7 +2,13 @@ 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, IconButton, Stack, Typography } from '@mui/material'
+import {
+	Box,
+	CircularProgress,
+	IconButton,
+	Stack,
+	Typography,
+} from '@mui/material'
 import {
 	StyledButton,
 	StyledSettingContainer,
@@ -13,13 +19,18 @@ import { CheckmarkIcon } from '@/assets'
 import { Input } from '@/shared/Input/Input'
 import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined'
 import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'
-import { ChangeEvent, useState } from 'react'
+import { ChangeEvent, FC, useState } from 'react'
 import { Checkbox } from '@/shared/Checkbox/Checkbox'
 import { useEnqueueSnackbar } from '@/hooks/useEnqueueSnackbar'
 import { swicCall } from '@/modules/swic'
 import { useParams } from 'react-router-dom'
+import { dbi } from '@/modules/db'
 
-export const ModalSettings = () => {
+type ModalSettingsProps = {
+	isSynced: boolean
+}
+
+export const ModalSettings: FC<ModalSettingsProps> = ({ isSynced }) => {
 	const { getModalOpened, handleClose } = useModalSearchParams()
 	const { npub = '' } = useParams<{ npub: string }>()
 
@@ -31,10 +42,11 @@ export const ModalSettings = () => {
 	const [enteredPassword, setEnteredPassword] = useState('')
 	const [isPasswordShown, setIsPasswordShown] = useState(false)
 	const [isPasswordInvalid, setIsPasswordInvalid] = useState(false)
-	const [isPasswordSynched, setIsPasswordSynched] = useState(false)
 
 	const [isChecked, setIsChecked] = useState(false)
 
+	const [isLoading, setIsLoading] = useState(false)
+
 	const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
 		setIsPasswordInvalid(false)
 		setEnteredPassword(e.target.value)
@@ -47,7 +59,6 @@ export const ModalSettings = () => {
 		handleCloseModal()
 		setEnteredPassword('')
 		setIsPasswordInvalid(false)
-		setIsPasswordSynched(false)
 	}
 
 	const handleChangeCheckbox = (e: unknown, checked: boolean) => {
@@ -57,19 +68,21 @@ export const ModalSettings = () => {
 	const handleSubmit = async (e: React.FormEvent) => {
 		e.preventDefault()
 		setIsPasswordInvalid(false)
-		setIsPasswordSynched(false)
 
 		if (enteredPassword.trim().length < 6) {
 			return setIsPasswordInvalid(true)
 		}
 		try {
+			setIsLoading(true)
 			await swicCall('saveKey', npub, enteredPassword)
 			notify('Key saved', 'success')
+			dbi.addSynced(npub) // Sync npub
+			setEnteredPassword('')
 			setIsPasswordInvalid(false)
-			setIsPasswordSynched(true)
+			setIsLoading(false)
 		} catch (error) {
 			setIsPasswordInvalid(false)
-			setIsPasswordSynched(false)
+			setIsLoading(false)
 		}
 	}
 
@@ -79,7 +92,7 @@ export const ModalSettings = () => {
 				<StyledSettingContainer onSubmit={handleSubmit}>
 					<Stack direction={'row'} justifyContent={'space-between'}>
 						<SectionTitle>Cloud sync</SectionTitle>
-						{isPasswordSynched && (
+						{isSynced && (
 							<StyledSynchedText>
 								<CheckmarkIcon /> Synched
 							</StyledSynchedText>
@@ -94,37 +107,58 @@ export const ModalSettings = () => {
 							Use this login on multiple devices
 						</Typography>
 					</Box>
-					<Input
-						fullWidth
-						endAdornment={
-							<IconButton
-								size='small'
-								onClick={handlePasswordTypeChange}
+					{isSynced ? (
+						<Typography variant='body2' color={'GrayText'}>
+							This uploads your <u>private key</u>, encrypted by
+							your password, to Nsec App's server.
+						</Typography>
+					) : (
+						<>
+							<Input
+								fullWidth
+								endAdornment={
+									<IconButton
+										size='small'
+										onClick={handlePasswordTypeChange}
+									>
+										{isPasswordShown ? (
+											<VisibilityOffOutlinedIcon htmlColor='#6b6b6b' />
+										) : (
+											<VisibilityOutlinedIcon htmlColor='#6b6b6b' />
+										)}
+									</IconButton>
+								}
+								type={isPasswordShown ? 'text' : 'password'}
+								onChange={handlePasswordChange}
+								value={enteredPassword}
+								helperText={
+									isPasswordInvalid ? 'Invalid password' : ''
+								}
+								placeholder='Enter a password'
+								helperTextProps={{
+									sx: {
+										'&.helper_text': {
+											color: 'red',
+										},
+									},
+								}}
+								disabled={!isChecked}
+							/>
+							<StyledButton
+								type='submit'
+								fullWidth
+								disabled={!isChecked}
 							>
-								{isPasswordShown ? (
-									<VisibilityOffOutlinedIcon htmlColor='#6b6b6b' />
-								) : (
-									<VisibilityOutlinedIcon htmlColor='#6b6b6b' />
+								Sync{' '}
+								{isLoading && (
+									<CircularProgress
+										sx={{ marginLeft: '0.5rem' }}
+										size={'1rem'}
+									/>
 								)}
-							</IconButton>
-						}
-						type={isPasswordShown ? 'text' : 'password'}
-						onChange={handlePasswordChange}
-						value={enteredPassword}
-						helperText={isPasswordInvalid ? 'Invalid password' : ''}
-						placeholder='Enter a password'
-						helperTextProps={{
-							sx: {
-								'&.helper_text': {
-									color: 'red',
-								},
-							},
-						}}
-						disabled={!isChecked}
-					/>
-					<StyledButton type='submit' fullWidth disabled={!isChecked}>
-						Sync
-					</StyledButton>
+							</StyledButton>
+						</>
+					)}
 				</StyledSettingContainer>
 				<Button onClick={onClose}>Done</Button>
 			</Stack>