src/pages/settings/Settings.tsx

@@ -1,5 +1,6 @@
 import AccountCircleIcon from '@mui/icons-material/AccountCircle'
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
+import CachedIcon from '@mui/icons-material/Cached'
 import RouterIcon from '@mui/icons-material/Router'
 import { useTheme } from '@mui/material'
 import List from '@mui/material/List'
@@ -80,6 +81,16 @@ export const SettingsPage = () => {
         </ListItemIcon>
         {listItem('Relays')}
       </ListItemButton>
+      <ListItemButton
+        onClick={() => {
+          navigate(appPrivateRoutes.cacheSettings)
+        }}
+      >
+        <ListItemIcon>
+          <CachedIcon />
+        </ListItemIcon>
+        {listItem('Local Cache')}
+      </ListItemButton>
     </List>
   )
 }

src/pages/settings/cache/index.tsx

@@ -0,0 +1,96 @@
+import ClearIcon from '@mui/icons-material/Clear'
+import InputIcon from '@mui/icons-material/Input'
+import IosShareIcon from '@mui/icons-material/IosShare'
+import {
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ListSubheader,
+  useTheme
+} from '@mui/material'
+import { useState } from 'react'
+import { toast } from 'react-toastify'
+import { localCache } from '../../../services'
+import { LoadingSpinner } from '../../../components/LoadingSpinner'
+
+export const CacheSettingsPage = () => {
+  const theme = useTheme()
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
+
+  const handleClearData = async () => {
+    setIsLoading(true)
+    setLoadingSpinnerDesc('Clearing cache data')
+    localCache
+      .clearCacheData()
+      .then(() => {
+        toast.success('cleared cached data')
+      })
+      .catch((err) => {
+        console.log('An error occurred in clearing cache data', err)
+        toast.error(err.message || 'An error occurred in clearing cache data')
+      })
+      .finally(() => {
+        setIsLoading(false)
+      })
+  }
+
+  const listItem = (label: string) => {
+    return (
+      <ListItemText
+        primary={label}
+        sx={{
+          color: theme.palette.text.primary
+        }}
+      />
+    )
+  }
+
+  return (
+    <>
+      {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
+      <List
+        sx={{
+          width: '100%',
+          bgcolor: 'background.paper',
+          marginTop: 2
+        }}
+        subheader={
+          <ListSubheader
+            sx={{
+              fontSize: '1.5rem',
+              borderBottom: '0.5px solid',
+              paddingBottom: 2,
+              paddingTop: 2
+            }}
+          >
+            Cache Setting
+          </ListSubheader>
+        }
+      >
+        <ListItemButton disabled>
+          <ListItemIcon>
+            <IosShareIcon />
+          </ListItemIcon>
+          {listItem('Export (coming soon)')}
+        </ListItemButton>
+
+        <ListItemButton disabled>
+          <ListItemIcon>
+            <InputIcon />
+          </ListItemIcon>
+          {listItem('Import (coming soon)')}
+        </ListItemButton>
+
+        <ListItemButton onClick={handleClearData}>
+          <ListItemIcon>
+            <ClearIcon sx={{ color: theme.palette.error.main }} />
+          </ListItemIcon>
+          {listItem('Clear Cache')}
+        </ListItemButton>
+      </List>
+    </>
+  )
+}

src/routes/index.tsx

@@ -4,6 +4,7 @@ import { LandingPage } from '../pages/landing/LandingPage'
 import { Login } from '../pages/login'
 import { ProfilePage } from '../pages/profile'
 import { SettingsPage } from '../pages/settings/Settings'
+import { CacheSettingsPage } from '../pages/settings/cache'
 import { ProfileSettingsPage } from '../pages/settings/profile'
 import { RelaysPage } from '../pages/settings/relays'
 import { SignPage } from '../pages/sign'
@@ -17,6 +18,7 @@ export const appPrivateRoutes = {
   verify: '/verify',
   settings: '/settings',
   profileSettings: '/settings/profile/:npub',
+  cacheSettings: '/settings/cache',
   relays: '/settings/relays'
 }
 
@@ -75,6 +77,10 @@ export const privateRoutes = [
     path: appPrivateRoutes.profileSettings,
     element: <ProfileSettingsPage />
   },
+  {
+    path: appPrivateRoutes.cacheSettings,
+    element: <CacheSettingsPage />
+  },
   {
     path: appPrivateRoutes.relays,
     element: <RelaysPage />

src/services/cache/index.ts

@@ -48,6 +48,15 @@ class LocalCache {
   public async deleteUserMetadata(key: string) {
     await this.db.delete('userMetadata', key)
   }
+
+  // Method to clear cache data
+  public async clearCacheData() {
+    // Clear the 'userMetadata' store in the IndexedDB database
+    await this.db.clear('userMetadata')
+
+    // Reload the current page to ensure any cached data is reset
+    window.location.reload()
+  }
 }
 
 // Export the single instance of LocalCache