src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { useSelector } from 'react-redux'
+import { useAppSelector } from './hooks/store'
 import { Navigate, Route, Routes } from 'react-router-dom'
 import { AuthController } from './controllers'
 import { MainLayout } from './layouts/Main'
@@ -10,11 +10,10 @@ import {
   publicRoutes,
   recursiveRouteRenderer
 } from './routes'
-import { State } from './store/rootReducer'
 import './App.scss'
 
 const App = () => {
-  const authState = useSelector((state: State) => state.auth)
+  const authState = useAppSelector((state) => state.auth)
 
   useEffect(() => {
     if (window.location.hostname === '0.0.0.0') {

src/components/AppBar/AppBar.tsx

@@ -9,8 +9,7 @@ import {
 } from '@mui/material'
 
 import { useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
-import { State } from '../../store/rootReducer'
+import { useAppSelector } from '../../hooks/store'
 import Username from '../username'
 
 import { Link, useNavigate } from 'react-router-dom'
@@ -37,9 +36,9 @@ export const AppBar = () => {
   const [userAvatar, setUserAvatar] = useState('')
   const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null)
 
-  const authState = useSelector((state: State) => state.auth)
-  const metadataState = useSelector((state: State) => state.metadata)
-  const userRobotImage = useSelector((state: State) => state.userRobotImage)
+  const authState = useAppSelector((state) => state.auth)
+  const metadataState = useAppSelector((state) => state.metadata)
+  const userRobotImage = useAppSelector((state) => state.userRobotImage)
 
   useEffect(() => {
     if (metadataState) {

src/components/UsersDetails.tsx/index.tsx

@@ -20,8 +20,7 @@ import {
   faFileCircleExclamation
 } from '@fortawesome/free-solid-svg-icons'
 import { getExtensionIconLabel } from '../getExtensionIconLabel'
-import { useSelector } from 'react-redux'
-import { State } from '../../store/rootReducer'
+import { useAppSelector } from '../../hooks/store'
 import { DisplaySigner } from '../DisplaySigner'
 import { Meta } from '../../types'
 import { extractFileExtensions } from '../../utils/file'
@@ -45,7 +44,7 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
     signedStatus,
     isValid
   } = useSigitMeta(meta)
-  const { usersPubkey } = useSelector((state: State) => state.auth)
+  const { usersPubkey } = useAppSelector((state) => state.auth)
   const userCanSign =
     typeof usersPubkey !== 'undefined' &&
     signers.includes(hexToNpub(usersPubkey))

src/components/username.tsx

@@ -1,6 +1,5 @@
 import { Typography } from '@mui/material'
-import { useSelector } from 'react-redux'
-import { State } from '../store/rootReducer'
+import { useAppSelector } from '../hooks/store'
 
 import styles from './username.module.scss'
 import { AvatarIconButton } from './UserAvatarIconButton'
@@ -16,7 +15,7 @@ type Props = {
  *  Clicking will open the menu.
  */
 const Username = ({ username, avatarContent, handleClick }: Props) => {
-  const hexKey = useSelector((state: State) => state.auth.usersPubkey)
+  const hexKey = useAppSelector((state) => state.auth.usersPubkey)
 
   return (
     <div className={styles.container}>

src/pages/create/index.tsx

@@ -8,14 +8,13 @@ import { useEffect, useRef, useState } from 'react'
 import { DndProvider, useDrag, useDrop } from 'react-dnd'
 import { MultiBackend } from 'react-dnd-multi-backend'
 import { HTML5toTouch } from 'rdndmb-html5-to-touch'
-import { useSelector } from 'react-redux'
+import { useAppSelector } from '../../hooks/store'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { UserAvatar } from '../../components/UserAvatar'
 import { MetadataController, NostrController } from '../../controllers'
 import { appPrivateRoutes } from '../../routes'
-import { State } from '../../store/rootReducer'
 import {
   CreateSignatureEventContent,
   Meta,
@@ -98,7 +97,7 @@ export const CreatePage = () => {
   const signers = users.filter((u) => u.role === UserRole.signer)
   const viewers = users.filter((u) => u.role === UserRole.viewer)
 
-  const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
+  const usersPubkey = useAppSelector((state) => state.auth.usersPubkey)
 
   const nostrController = NostrController.getInstance()
 

src/pages/nostr/index.tsx

@@ -3,14 +3,13 @@ import { launch as launchNostrLoginDialog } from 'nostr-login'
 import { Button, Divider, TextField } from '@mui/material'
 import { getPublicKey, nip19 } from 'nostr-tools'
 import { useEffect, useState } from 'react'
-import { useDispatch } from 'react-redux'
+import { useAppDispatch } from '../../hooks/store'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { AuthController } from '../../controllers'
 import { updateKeyPair, updateLoginMethod } from '../../store/actions'
 import { LoginMethod } from '../../store/auth/types'
-import { Dispatch } from '../../store/store'
 import { hexToBytes } from '@noble/hashes/utils'
 
 import styles from './styles.module.scss'
@@ -18,7 +17,7 @@ import styles from './styles.module.scss'
 export const Nostr = () => {
   const [searchParams] = useSearchParams()
 
-  const dispatch: Dispatch = useDispatch()
+  const dispatch = useAppDispatch()
   const navigate = useNavigate()
 
   const authController = new AuthController()

src/pages/profile/index.tsx

@@ -3,13 +3,12 @@ import EditIcon from '@mui/icons-material/Edit'
 import { Box, IconButton, SxProps, Theme, Typography } from '@mui/material'
 import { Event, VerifiedEvent, kinds, nip19 } from 'nostr-tools'
 import { useEffect, useMemo, useState } from 'react'
-import { useSelector } from 'react-redux'
+import { useAppSelector } from '../../hooks/store'
 import { Link, useNavigate, useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { MetadataController } from '../../controllers'
 import { getProfileSettingsRoute } from '../../routes'
-import { State } from '../../store/rootReducer'
 import { NostrJoiningBlock, ProfileMetadata } from '../../types'
 import {
   getNostrJoiningBlockNumber,
@@ -33,9 +32,9 @@ export const ProfilePage = () => {
   const [nostrJoiningBlock, setNostrJoiningBlock] =
     useState<NostrJoiningBlock | null>(null)
   const [profileMetadata, setProfileMetadata] = useState<ProfileMetadata>()
-  const metadataState = useSelector((state: State) => state.metadata)
-  const { usersPubkey } = useSelector((state: State) => state.auth)
-  const userRobotImage = useSelector((state: State) => state.userRobotImage)
+  const metadataState = useAppSelector((state) => state.metadata)
+  const { usersPubkey } = useAppSelector((state) => state.auth)
+  const userRobotImage = useAppSelector((state) => state.userRobotImage)
 
   const [isUsersOwnProfile, setIsUsersOwnProfile] = useState(false)
 

src/pages/settings/Settings.tsx

@@ -7,10 +7,9 @@ import List from '@mui/material/List'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
 import ListSubheader from '@mui/material/ListSubheader'
-import { useSelector } from 'react-redux'
+import { useAppSelector } from '../../hooks/store'
 import { Link } from 'react-router-dom'
 import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
-import { State } from '../../store/rootReducer'
 import { Container } from '../../components/Container'
 import { Footer } from '../../components/Footer/Footer'
 import ExtensionIcon from '@mui/icons-material/Extension'
@@ -18,7 +17,7 @@ import { LoginMethod } from '../../store/auth/types'
 
 export const SettingsPage = () => {
   const theme = useTheme()
-  const { usersPubkey, loginMethod } = useSelector((state: State) => state.auth)
+  const { usersPubkey, loginMethod } = useAppSelector((state) => state.auth)
   const listItem = (label: string, disabled = false) => {
     return (
       <>

src/pages/settings/profile/index.tsx

@@ -18,8 +18,8 @@ import { toast } from 'react-toastify'
 import { MetadataController, NostrController } from '../../../controllers'
 import { NostrJoiningBlock, ProfileMetadata } from '../../../types'
 import styles from './style.module.scss'
-import { useDispatch, useSelector } from 'react-redux'
-import { State } from '../../../store/rootReducer'
+import { useAppDispatch, useAppSelector } from '../../../hooks/store'
+
 import { LoadingButton } from '@mui/lab'
 import { Dispatch } from '../../../store/store'
 import { setMetadataEvent } from '../../../store/actions'
@@ -41,7 +41,7 @@ export const ProfileSettingsPage = () => {
 
   const { npub } = useParams()
 
-  const dispatch: Dispatch = useDispatch()
+  const dispatch: Dispatch = useAppDispatch()
 
   const metadataController = MetadataController.getInstance()
   const nostrController = NostrController.getInstance()
@@ -51,12 +51,12 @@ export const ProfileSettingsPage = () => {
     useState<NostrJoiningBlock | null>(null)
   const [profileMetadata, setProfileMetadata] = useState<ProfileMetadata>()
   const [savingProfileMetadata, setSavingProfileMetadata] = useState(false)
-  const metadataState = useSelector((state: State) => state.metadata)
-  const keys = useSelector((state: State) => state.auth?.keyPair)
-  const { usersPubkey, loginMethod, nostrLoginAuthMethod } = useSelector(
-    (state: State) => state.auth
+  const metadataState = useAppSelector((state) => state.metadata)
+  const keys = useAppSelector((state) => state.auth?.keyPair)
+  const { usersPubkey, loginMethod, nostrLoginAuthMethod } = useAppSelector(
+    (state) => state.auth
   )
-  const userRobotImage = useSelector((state: State) => state.userRobotImage)
+  const userRobotImage = useAppSelector((state) => state.userRobotImage)
 
   const [isUsersOwnProfile, setIsUsersOwnProfile] = useState(false)
 

src/pages/sign/index.tsx

@@ -6,13 +6,12 @@ import _ from 'lodash'
 import { MuiFileInput } from 'mui-file-input'
 import { Event, verifyEvent } from 'nostr-tools'
 import { useCallback, useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
+import { useAppSelector } from '../../hooks/store'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { NostrController } from '../../controllers'
 import { appPublicRoutes } from '../../routes'
-import { State } from '../../store/rootReducer'
 import { CreateSignatureEventContent, Meta, SignedEvent } from '../../types'
 import {
   decryptArrayBuffer,
@@ -54,7 +53,7 @@ import {
   SigitFile
 } from '../../utils/file.ts'
 import { ARRAY_BUFFER, DEFLATE } from '../../utils/const.ts'
-import { useAppSelector } from '../../hooks/store.ts'
+
 enum SignedStatus {
   Fully_Signed,
   User_Is_Next_Signer,
@@ -129,7 +128,7 @@ export const SignPage = () => {
   // This state variable indicates whether the logged-in user is a signer, a creator, or neither.
   const [isSignerOrCreator, setIsSignerOrCreator] = useState(false)
 
-  const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
+  const usersPubkey = useAppSelector((state) => state.auth.usersPubkey)
 
   const nostrController = NostrController.getInstance()
   const [currentUserMarks, setCurrentUserMarks] = useState<CurrentUserMark[]>(

src/pages/verify/index.tsx

@@ -27,8 +27,7 @@ import {
   groupMarksByFileNamePage,
   inPx
 } from '../../utils/pdf.ts'
-import { State } from '../../store/rootReducer.ts'
-import { useSelector } from 'react-redux'
+import { useAppSelector } from '../../hooks/store'
 import { getLastSignersSig } from '../../utils/sign.ts'
 import { saveAs } from 'file-saver'
 import { Container } from '../../components/Container'
@@ -153,7 +152,7 @@ const SlimPdfView = ({
 
 export const VerifyPage = () => {
   const location = useLocation()
-  const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
+  const usersPubkey = useAppSelector((state) => state.auth.usersPubkey)
 
   const nostrController = NostrController.getInstance()