add new custom hook for handling actions in wallet

src/components/LoadAccountMenu.tsx

@@ -1,10 +1,11 @@
+import { Box } from '@mui/material'
+import { styled } from '@mui/material/styles'
 import React, { useRef } from 'react'
-import { useAppDispatch } from '../hooks/reduxHooks'
-import { updateAccount, updateNotificationStatus } from '../redux/slices/app-config'
 import { mountAccountMenu } from 'wallet/mountAccountMenu'
-import { styled } from '@mui/material/styles'
-import { Box } from '@mui/material'
+import { useAppDispatch } from '../hooks/reduxHooks'
 import { useEffectOnce } from '../hooks/useEffectOnce'
+import useWallet from '../hooks/useWallet'
+import { updateAccount, updateNotificationStatus } from '../redux/slices/app-config'
 
 const StyledBox = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -24,13 +25,16 @@ export const LoadAccountMenu = (props: {
     const ref = useRef(null)
     const dispatch = useAppDispatch()
     const setAccount = account => dispatch(updateAccount(account))
+    const { updateStore } = useWallet()
     const dispatchNotification = ({ message, type }) =>
         dispatch(updateNotificationStatus({ message, severity: type }))
     useEffectOnce(() => {
         mountAccountMenu(ref.current, {
             ...props,
             setAccount,
             dispatchNotification,
+
+            updateStore,
         })
     }) // eslint-disable-line react-hooks/exhaustive-deps
 

src/components/Navbar/LoadMyKeysComponent.tsx

@@ -1,10 +1,11 @@
 import { Box } from '@mui/material'
 import { styled } from '@mui/system'
-import React, { useEffect, useRef } from 'react'
+import React, { useRef } from 'react'
 import { mountKyesComponent } from 'wallet/mountKyesComponent'
 import { useAppDispatch } from '../../hooks/reduxHooks'
 import { useEffectOnce } from '../../hooks/useEffectOnce'
-import { updateNotificationStatus, updatePchainAddress } from '../../redux/slices/app-config'
+import useWallet from '../../hooks/useWallet'
+import { updateNotificationStatus } from '../../redux/slices/app-config'
 
 const StyledBox = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -40,16 +41,16 @@ const StyledBox = styled(Box)(({ theme }) => ({
 const LoadMyKeysComponent = () => {
     const ref = useRef(null)
     const dispatch = useAppDispatch()
-    const [walletSwitched, setWalletSwitched] = React.useState('')
     const dispatchNotification = ({ message, type }) =>
         dispatch(updateNotificationStatus({ message, severity: type }))
+    const { updateStore } = useWallet()
     useEffectOnce(() => {
-        mountKyesComponent(ref.current, { dispatchNotification, setWalletSwitched })
+        mountKyesComponent(ref.current, {
+            dispatchNotification,
+            updateStore,
+        })
     }) // eslint-disable-line react-hooks/exhaustive-deps
 
-    useEffect(() => {
-        dispatch(updatePchainAddress(walletSwitched))
-    }, [walletSwitched])
     return (
         <StyledBox>
             <div ref={ref} />

src/hooks/useWallet.ts

@@ -0,0 +1,22 @@
+import { getNameOfWallet, getPchainAddress } from '../helpers/walletStore'
+import { updatePchainAddress } from '../redux/slices/app-config'
+import { useAppDispatch } from './reduxHooks'
+
+const useWallet = () => {
+    const dispatch = useAppDispatch()
+
+    const updateStore = (type, params) => {
+        switch (type) {
+            case 'updateName':
+                dispatch(
+                    updatePchainAddress({
+                        address: getPchainAddress(),
+                        walletName: getNameOfWallet(),
+                    }),
+                )
+        }
+    }
+    return { updateStore }
+}
+
+export default useWallet

src/redux/slices/app-config.ts

@@ -47,8 +47,9 @@ const appConfigSlice = createSlice({
             state.walletStore = payload
         },
         updatePchainAddress(state, { payload }) {
-            state.pChainAddress = payload.address
-            state.walletName = payload.walletName
+            state.pChainAddress = payload.address[0]
+            state.walletName =
+                payload.walletName !== 'Singleton Wallet' ? payload.walletName : payload.address[0]
         },
         updateAccount(state, { payload }) {
             state.account = payload

src/views/wallet/WalletApp.tsx

@@ -1,56 +1,51 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { Navigate, useNavigate } from 'react-router-dom'
 import { mount } from 'wallet/mountApp'
-import { getNameOfWallet, getPchainAddress, updateAssets } from '../../helpers/walletStore'
+import { updateAssets } from '../../helpers/walletStore'
 import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
 import { useEffectOnce } from '../../hooks/useEffectOnce'
+import useWallet from '../../hooks/useWallet'
 import {
     updateAccount,
     updateNotificationStatus,
-    updatePchainAddress,
     updateShowButton,
     updateValues,
 } from '../../redux/slices/app-config'
 import { updateAuthStatus } from '../../redux/slices/utils'
 const LoadWallet = () => {
-    const [updateStore, setUpdateStore] = useState(null)
+    const [walletStore, setUpdateStore] = useState(null)
     const [fetch, setFetch] = useState(false)
     const [logOut, setLogOut] = useState(false)
     const dispatch = useAppDispatch()
     const ref = useRef(null)
-    const [walletSwitched, setWalletSwitched] = React.useState('')
     const navigate = useNavigate()
-    useEffect(() => {
-        dispatch(
-            updatePchainAddress({ address: getPchainAddress(), walletName: getNameOfWallet() }),
-        )
-    }, [walletSwitched]) // eslint-disable-line react-hooks/exhaustive-deps
     const dispatchNotification = ({ message, type }) =>
         dispatch(updateNotificationStatus({ message, severity: type }))
     const setAccount = account => dispatch(updateAccount(account))
     useEffect(() => {
-        dispatch(updateValues(updateStore))
-        if (updateStore) dispatch(updateAuthStatus(true))
-    }, [updateStore]) // eslint-disable-line react-hooks/exhaustive-deps
+        dispatch(updateValues(walletStore))
+        if (walletStore) dispatch(updateAuthStatus(true))
+    }, [walletStore]) // eslint-disable-line react-hooks/exhaustive-deps
 
     useEffect(() => {
-        dispatch(updateValues(updateStore))
+        dispatch(updateValues(walletStore))
     }, [logOut]) // eslint-disable-line react-hooks/exhaustive-deps
     const updateShowAlias = () => dispatch(updateShowButton())
     const fetchUTXOs = async () => {
         await updateAssets()
         setFetch(true)
     }
+    const { updateStore } = useWallet()
     useEffect(() => {
         if (fetch)
             mount(ref.current, {
+                updateStore,
                 setUpdateStore,
                 setLogOut,
                 setAccount,
                 dispatchNotification,
                 updateShowAlias,
                 navigate: location => navigate(location),
-                setWalletSwitched,
             })
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [fetch])