create CamBadge component and add pending transaction badge to KeyRow component

src/components/CamBadge.tsx

@@ -0,0 +1,83 @@
+import { Box, SxProps, Typography } from '@mui/material'
+import { useTheme } from '@mui/system'
+import React from 'react'
+
+const getVariantStyles = (variant: string, theme: string) => {
+    const isDark = theme === 'dark'
+
+    const defaultStyles = {
+        primary: {
+            background: 'rgba(0, 133, 255, 0.2)',
+            color: 'var(--camino-brand-too-blue-to-be-true)',
+        },
+        positive: {
+            background: isDark ? 'rgba(9, 222, 107, 0.2)' : 'var(--camino-success-light)',
+            color: isDark ? 'var(--camino-success-light)' : '#ffff',
+        },
+        warning: {
+            background: isDark ? 'rgba(229, 162, 31, 0.2)' : 'var(--camino-warning-light)',
+            color: isDark ? 'var(--camino-warning-light)' : '#ffff',
+        },
+        negative: {
+            background: isDark ? 'rgba(229, 67, 31, 0.2)' : 'var(--camino-error-light)',
+            color: isDark ? 'var(--camino-error-light)' : '#ffff',
+        },
+        verified: {
+            background: 'var(--camino-aphrodite-aqua)',
+            color: 'var(--tailwind-slate-slate-800)',
+        },
+        default: {
+            background: 'var(--tailwind-slate-slate-800)',
+            color: 'var(--tailwind-slate-slate-300)',
+        },
+    }
+
+    return defaultStyles[variant] || defaultStyles.default
+}
+
+const getSizeStyles = (size: string) => {
+    switch (size) {
+        case 'small':
+            return {
+                fontSize: '10px',
+            }
+        default:
+            return {
+                fontSize: '12px',
+            }
+    }
+}
+
+const CamBadge = ({
+    variant = 'default',
+    label,
+    size = 'medium',
+    sx,
+}: {
+    variant?: 'default' | 'primary' | 'positive' | 'warning' | 'negative' | 'verified'
+    label: string
+    size?: 'small' | 'medium'
+    sx?: SxProps
+}) => {
+    const theme = useTheme()
+
+    return (
+        <Box
+            sx={{
+                display: 'flex',
+                alignItems: 'center',
+                paddingX: '8px',
+                paddingY: '1px',
+                borderRadius: '4px',
+                ...getVariantStyles(variant, theme.palette.mode),
+                ...sx,
+            }}
+        >
+            <Typography variant="badge" fontWeight={600} sx={getSizeStyles(size)}>
+                {label}
+            </Typography>
+        </Box>
+    )
+}
+
+export default CamBadge

src/components/LoadAccountMenu.tsx

@@ -22,6 +22,7 @@ export const LoadAccountMenu = (props: {
     setOpen?: React.Dispatch<React.SetStateAction<boolean>>
     selectedAlias?: string
     updateAlias?: any
+    hasImportedPendingTx?: boolean
 }) => {
     const ref = useRef(null)
     const dispatch = useAppDispatch()

src/components/Navbar/Account.tsx

@@ -6,8 +6,10 @@
 import {
     changeActiveApp,
     getAccount,
+    getWalletStore,
     updateAccount,
     updatePchainAddress,
+    updatePendingTxState,
 } from '../../redux/slices/app-config'
 
 import Icon from '@mdi/react'
@@ -16,9 +18,12 @@
 import AliasPicker from './AliasPicker'
 import ThemeSwitcher from './ThemeSwitcher'
 // @ts-ignore
+import { useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 import store from 'wallet/store'
+import { getActiveNetwork } from '../../redux/slices/network'
 import { updateAuthStatus } from '../../redux/slices/utils'
+import CamBadge from '../CamBadge'
 
 interface LoginIconProps {
     handleCloseSidebar: () => void
@@ -30,6 +35,11 @@
     const navigate = useNavigate()
     const account = useAppSelector(getAccount)
     const theme = useTheme()
+    const walletStore = useAppSelector(getWalletStore)
+    const [open, setOpen] = useState(false)
+    const [hasPendingTx, setHasPendingTx] = useState<boolean>(false)
+    const pendingTxState = useSelector((state: any) => state.appConfig.pendingTxState)
+    const activeNetwork = useAppSelector(getActiveNetwork)
     const logout = async () => {
         handleCloseSidebar()
         await store.dispatch('logout')
@@ -48,11 +58,26 @@
         dispatch(
             updatePchainAddress({ address: getPchainAddress(), walletName: getNameOfWallet() }),
         )
     }, [auth])
     const handleKeyDown = e => {
         e.stopPropagation()
     }
-    const [open, setOpen] = useState(false)
+
+    // get pending transactions
+    useEffect(() => {
+        checkPendingTx()
+    }, [pendingTxState, activeNetwork])
+
+    const checkPendingTx = async () => {
+        if (walletStore?.Signavault?.importedTransactions?.length > 0) {
+            setHasPendingTx(walletStore?.Signavault?.importedTransactions?.length > 0)
+            dispatch(updatePendingTxState(false))
+        } else if (walletStore?.Signavault?.importedTransactions?.length === 0) {
+            setHasPendingTx(false)
+            dispatch(updatePendingTxState(false))
+        } else if (pendingTxState) dispatch(updatePendingTxState(false))
+    }
+
     return (
         <>
             <MHidden width="smUp">
@@ -122,6 +147,18 @@
                                         setOpen(v => !v)
                                     }}
                                 >
+                                    {hasPendingTx && (
+                                        <CamBadge
+                                            size="small"
+                                            variant="warning"
+                                            sx={{
+                                                position: 'absolute',
+                                                top: 0,
+                                                right: 0,
+                                            }}
+                                            label={'Pending Tx'}
+                                        />
+                                    )}
                                     {!account ? (
                                         <Typography>Account</Typography>
                                     ) : (

src/components/Navbar/LoadSaveKeysComponent.tsx

@@ -1,17 +1,19 @@
 import React, { useRef } from 'react'
 import { mountSaveKyesButton } from 'wallet/mountsaveKyesButton'
 import { useAppDispatch } from '../../hooks/reduxHooks'
-import { updateAccount, updateNotificationStatus } from '../../redux/slices/app-config'
 import { useEffectOnce } from '../../hooks/useEffectOnce'
+import useWallet from '../../hooks/useWallet'
+import { updateAccount, updateNotificationStatus } from '../../redux/slices/app-config'
 
 const LoadSaveKeysComponent = () => {
     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(() => {
-        mountSaveKyesButton(ref.current, { dispatchNotification, setAccount })
+        mountSaveKyesButton(ref.current, { dispatchNotification, setAccount, updateStore })
     }) // eslint-disable-line react-hooks/exhaustive-deps
 
     return (

src/components/Navbar/LoggedInAccount.tsx

@@ -1,5 +1,6 @@
 import { mdiWalletOutline } from '@mdi/js'
 import Icon from '@mdi/react'
+import { Box } from '@mui/material'
 import React, { useEffect } from 'react'
 import { getNameOfWallet, getPchainAddress } from '../../helpers/walletStore'
 import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
@@ -15,12 +16,14 @@
         dispatch(
             updatePchainAddress({ address: getPchainAddress(), walletName: getNameOfWallet() }),
         )
     }, [activeNetwork])
+
+
     return (
-        <>
+        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
             <Icon path={mdiWalletOutline} size={1} />
             <LongString value={walletName} />
-        </>
+        </Box>
     )
 }
 export default LoggedInAccount

src/components/Navbar/NetworkSwitcher.tsx

@@ -1,26 +1,25 @@
+import { mdiDeleteOutline, mdiPencilOutline, mdiPlus } from '@mdi/js'
 import {
     Box,
     Button,
     Chip,
-    CircularProgress,
     DialogTitle,
     MenuItem,
     MenuList,
     Select,
     Stack,
     Typography,
-    useTheme,
+    useTheme
 } from '@mui/material'
-import { mdiDeleteOutline, mdiPencilOutline, mdiPlus } from '@mdi/js'
 import { networkStatusColor, networkStatusName } from '../../utils/networkUtils'
 
-import AddNewNetwork from './AddNewNetwork'
-import DialogAnimate from '../Animate/DialogAnimate'
 import Icon from '@mdi/react'
-import MHidden from '../@material-extend/MHidden'
 import React from 'react'
-import SelectedNetwork from './SelectNetwork'
 import useNetwork from '../../hooks/useNetwork'
+import MHidden from '../@material-extend/MHidden'
+import DialogAnimate from '../Animate/DialogAnimate'
+import AddNewNetwork from './AddNewNetwork'
+import SelectedNetwork from './SelectNetwork'
 
 interface NetworkSwitcherProps {
     handleCloseSidebar?: () => void

src/components/Navbar/SelectNetwork.tsx

@@ -1,7 +1,8 @@
+import { Box, Chip, Typography } from '@mui/material'
 import React from 'react'
-import { Box, Typography, Chip } from '@mui/material'
 import { useAppSelector } from '../../hooks/reduxHooks'
 import { NetworkID, getActiveNetwork, selectNetworkStatus } from '../../redux/slices/network'
+import CamBadge from '../CamBadge'
 
 const networkStatusColor = (status: string) => {
     switch (status) {
@@ -47,14 +48,12 @@ export default function SelectedNetwork() {
             >
                 {activeNetwork?.name}
             </Typography>
-            <Chip
-                color="secondary"
+            <CamBadge
                 size="small"
+                variant="verified"
                 sx={{
                     position: 'absolute',
-                    fontSize: '12px',
-                    height: '16px',
-                    top: 0,
+                    top: -2,
                     right: 0,
                 }}
                 label={networkChip(activeNetwork?.networkId)}

src/components/Navbar/index.tsx

@@ -1,3 +1,4 @@
+import { mdiClose, mdiMenu, mdiWalletOutline } from '@mdi/js'
 import {
     AppBar,
     Box,
@@ -8,26 +9,25 @@ import {
     Typography,
     useTheme,
 } from '@mui/material'
-import { DRAWER_WIDTH, TIMEOUT_DURATION } from '../../constants/apps-consts'
 import React, { useState } from 'react'
-import { mdiClose, mdiMenu, mdiWalletOutline } from '@mdi/js'
+import { DRAWER_WIDTH, TIMEOUT_DURATION } from '../../constants/apps-consts'
 import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks'
 
-import Account from './Account'
 import Icon from '@mdi/react'
-import LoggedInAccount from './LoggedInAccount'
+import { getActiveNetwork } from '../../redux/slices/network'
 import MHidden from '../@material-extend/MHidden'
 import MIconButton from '../@material-extend/MIconButton'
-import NetworkSwitcher from './NetworkSwitcher'
 import PlatformSwitcher from '../PlatformSwitcher'
+import Account from './Account'
+import LoggedInAccount from './LoggedInAccount'
+import NetworkSwitcher from './NetworkSwitcher'
 import ThemeSwitcher from './ThemeSwitcher'
-import { getActiveNetwork } from '../../redux/slices/network'
 // @ts-ignore
+import { useIdleTimer } from 'react-idle-timer'
+import { useNavigate } from 'react-router-dom'
 import store from 'wallet/store'
 import { updateAccount } from '../../redux/slices/app-config'
 import { updateAuthStatus } from '../../redux/slices/utils'
-import { useIdleTimer } from 'react-idle-timer'
-import { useNavigate } from 'react-router-dom'
 
 export default function Navbar() {
     const theme = useTheme()

src/hooks/useNetwork.ts

@@ -61,6 +61,7 @@ const useNetwork = (): {
                 await store.dispatch('activateWallet', store.state.wallets[0])
             }
             await store.dispatch('Network/setNetwork', network)
+            await store.dispatch('Signavault/updateImportedMultiSigTransaction')
             dispatch(changeNetworkStatus(Status.SUCCEEDED))
             if (isAuth) {
                 await store.dispatch('fetchMultiSigAliases', { disable: false })

src/hooks/useWallet.ts

@@ -1,6 +1,6 @@
 import { ava as caminoClient } from 'wallet/caminoClient'
 import { getNameOfWallet, getPchainAddress } from '../helpers/walletStore'
-import { updatePchainAddress } from '../redux/slices/app-config'
+import { updatePchainAddress, updatePendingTxState } from '../redux/slices/app-config'
 import { useAppDispatch } from './reduxHooks'
 
 const useWallet = () => {
@@ -27,6 +27,9 @@ const useWallet = () => {
                         walletName: getNameOfWallet(),
                     }),
                 )
+            case 'updatePendingTxState': {
+                dispatch(updatePendingTxState(params))
+            }
         }
     }
     return { updateStore, getRegisteredNode, getAddress }

src/redux/slices/app-config.ts

@@ -21,6 +21,7 @@ interface InitialStateAppConfigType {
     showButton: boolean
     pChainAddress: string
     validators: Validator[]
+    pendingTxState: boolean
 }
 
 let initialState: InitialStateAppConfigType = {
@@ -37,6 +38,7 @@ let initialState: InitialStateAppConfigType = {
     account: null,
     showButton: false,
     validators: [],
+    pendingTxState: false,
 }
 
 const appConfigSlice = createSlice({
@@ -64,6 +66,9 @@ const appConfigSlice = createSlice({
                 state.notificationMessage = state.notificationStatus ? payload.message : ''
             }
         },
+        updatePendingTxState(state, { payload }) {
+            state.pendingTxState = payload
+        },
         updateShowButton(state) {
             state.showButton = !state.showButton
         },
@@ -136,6 +141,9 @@ export const getPChainAddress = (state: RootState) => state.appConfig.pChainAddr
 // getWalletName
 export const getWalletName = (state: RootState) => state.appConfig.walletName
 
+// get wallet store
+export const getWalletStore = (state: RootState) => state.appConfig.walletStore
+
 export const selectValidators = (state: RootState) => state.appConfig.validators
 
 export const {
@@ -146,5 +154,6 @@ export const {
     updateNotificationStatus,
     updateShowButton,
     updatePchainAddress,
+    updatePendingTxState,
 } = appConfigSlice.actions
 export default appConfigSlice.reducer