From 0121973c6e3e7878028d26a144fddb501d165455 Mon Sep 17 00:00:00 2001 From: Ysrbolles Date: Thu, 19 Sep 2024 22:17:24 +0100 Subject: [PATCH 1/6] refactor(Navbar): optimize network switcher and logged in account components --- src/components/CamBadge.tsx | 86 +++++++++++++++++++++++ src/components/Navbar/LoggedInAccount.tsx | 41 +++++++++-- src/components/Navbar/NetworkSwitcher.tsx | 13 ++-- src/components/Navbar/SelectNetwork.tsx | 9 ++- src/components/Navbar/index.tsx | 16 ++--- src/redux/slices/app-config.ts | 3 + 6 files changed, 143 insertions(+), 25 deletions(-) create mode 100644 src/components/CamBadge.tsx diff --git a/src/components/CamBadge.tsx b/src/components/CamBadge.tsx new file mode 100644 index 00000000..5270c7ce --- /dev/null +++ b/src/components/CamBadge.tsx @@ -0,0 +1,86 @@ +import { Box, SxProps, Typography } from '@mui/material' +import React from 'react' + +const getVariantStyles = (variant: string) => { + switch (variant) { + case 'primary': + return { + background: '#0085FF33', + color: '#0085FF', + } + case 'positive': + return { + background: '#09DE6B33', + color: '#18B728', + } + case 'warning': + return { + background: '#E5A21F33', + color: '#E5A21F', + } + case 'negative': + return { + background: '#E5431F33', + color: '#E5431F', + } + case 'verified': + return { + background: '#B5E3FD', + color: '#1E293B', + } + default: + return { + background: '#1E293B', + color: '#CBD4E2', + } + } +} + +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 +}) => { + + + + return ( + + + {label} + + + ) +} + +export default CamBadge diff --git a/src/components/Navbar/LoggedInAccount.tsx b/src/components/Navbar/LoggedInAccount.tsx index f3f06246..625b6776 100644 --- a/src/components/Navbar/LoggedInAccount.tsx +++ b/src/components/Navbar/LoggedInAccount.tsx @@ -1,26 +1,57 @@ import { mdiWalletOutline } from '@mdi/js' import Icon from '@mdi/react' -import React, { useEffect } from 'react' +import { Box } from '@mui/material' +import React, { useEffect, useState } from 'react' import { getNameOfWallet, getPchainAddress } from '../../helpers/walletStore' import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks' -import { getWalletName, updatePchainAddress } from '../../redux/slices/app-config' +import { getWalletName, getWalletStore, updatePchainAddress } from '../../redux/slices/app-config' import { getActiveNetwork } from '../../redux/slices/network' +import CamBadge from '../CamBadge' import LongString from '../LongString' const LoggedInAccount = () => { const walletName = useAppSelector(getWalletName) const activeNetwork = useAppSelector(getActiveNetwork) + const walletStore = useAppSelector(getWalletStore) + const [hasPendingTx, setHasPendingTx] = useState(false) + const [test, setTest] = useState() + const adr = getPchainAddress() const dispatch = useAppDispatch() useEffect(() => { dispatch( updatePchainAddress({ address: getPchainAddress(), walletName: getNameOfWallet() }), ) - }, [activeNetwork]) + + console.log('Wallet store: ', walletStore) + + setTest(walletStore?.Signavault) + }, [activeNetwork, walletStore, walletName]) + + useEffect(() => { + console.log('Test: ', test) + console.log('Test transactions: ', test?.transactions) + if (test && test.transactions.length > 0) { + setHasPendingTx(true) + } else setHasPendingTx(false) + }, [test, walletName, adr]) + return ( - <> + + {hasPendingTx && ( + + )} - + ) } export default LoggedInAccount diff --git a/src/components/Navbar/NetworkSwitcher.tsx b/src/components/Navbar/NetworkSwitcher.tsx index ef2c575f..71c9b375 100644 --- a/src/components/Navbar/NetworkSwitcher.tsx +++ b/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 diff --git a/src/components/Navbar/SelectNetwork.tsx b/src/components/Navbar/SelectNetwork.tsx index 3a1daa13..822e2bff 100644 --- a/src/components/Navbar/SelectNetwork.tsx +++ b/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,13 +48,11 @@ export default function SelectedNetwork() { > {activeNetwork?.name} - 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 { From 699c17e0ac2f19952d02ff0f04f95eeaf50cfe68 Mon Sep 17 00:00:00 2001 From: Ysrbolles Date: Sun, 22 Sep 2024 22:27:06 +0100 Subject: [PATCH 2/6] refactor(CamBadge): optimize variant styles and add theme support - Refactored the getVariantStyles function in the CamBadge component to optimize the styling for different variants. - Added theme support to the getVariantStyles function to dynamically apply the appropriate styles based on the current theme. fix(LoggedInAccount): update transaction status and handle pending transactions - Updated the useEffect hook in the LoggedInAccount component to dispatch the 'Signavault/updateTransaction' action when the active network changes. - Cloned the walletStore.Signavault data using lodash to prevent mutation. - Updated the useEffect hook to check for pending transactions in the walletStore.Signavault data and set the hasPendingTx state accordingly. fix(SelectNetwork): adjust position of variant badge - Adjusted the position of the variant badge in the SelectNetwork component to align it properly with the network chip. --- src/components/CamBadge.tsx | 71 +++++++++++------------ src/components/Navbar/LoggedInAccount.tsx | 23 ++++---- src/components/Navbar/SelectNetwork.tsx | 2 +- 3 files changed, 47 insertions(+), 49 deletions(-) diff --git a/src/components/CamBadge.tsx b/src/components/CamBadge.tsx index 5270c7ce..c340649d 100644 --- a/src/components/CamBadge.tsx +++ b/src/components/CamBadge.tsx @@ -1,39 +1,38 @@ import { Box, SxProps, Typography } from '@mui/material' +import { useTheme } from '@mui/system' import React from 'react' -const getVariantStyles = (variant: string) => { - switch (variant) { - case 'primary': - return { - background: '#0085FF33', - color: '#0085FF', - } - case 'positive': - return { - background: '#09DE6B33', - color: '#18B728', - } - case 'warning': - return { - background: '#E5A21F33', - color: '#E5A21F', - } - case 'negative': - return { - background: '#E5431F33', - color: '#E5431F', - } - case 'verified': - return { - background: '#B5E3FD', - color: '#1E293B', - } - default: - return { - background: '#1E293B', - color: '#CBD4E2', - } +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) => { @@ -60,9 +59,8 @@ const CamBadge = ({ size?: 'small' | 'medium' sx?: SxProps }) => { + const theme = useTheme() - - return ( - + {label} diff --git a/src/components/Navbar/LoggedInAccount.tsx b/src/components/Navbar/LoggedInAccount.tsx index 625b6776..c4dfd778 100644 --- a/src/components/Navbar/LoggedInAccount.tsx +++ b/src/components/Navbar/LoggedInAccount.tsx @@ -1,7 +1,9 @@ import { mdiWalletOutline } from '@mdi/js' import Icon from '@mdi/react' import { Box } from '@mui/material' +import _ from 'lodash' import React, { useEffect, useState } from 'react' +import store from 'wallet/store' import { getNameOfWallet, getPchainAddress } from '../../helpers/walletStore' import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks' import { getWalletName, getWalletStore, updatePchainAddress } from '../../redux/slices/app-config' @@ -14,26 +16,25 @@ const LoggedInAccount = () => { const activeNetwork = useAppSelector(getActiveNetwork) const walletStore = useAppSelector(getWalletStore) const [hasPendingTx, setHasPendingTx] = useState(false) - const [test, setTest] = useState() const adr = getPchainAddress() const dispatch = useAppDispatch() useEffect(() => { dispatch( updatePchainAddress({ address: getPchainAddress(), walletName: getNameOfWallet() }), ) + }, [activeNetwork]) - console.log('Wallet store: ', walletStore) + useEffect(() => { + store.dispatch('Signavault/updateTransaction') - setTest(walletStore?.Signavault) - }, [activeNetwork, walletStore, walletName]) + const data = _.cloneDeep(walletStore?.Signavault) + console.log("walletStore?.Signavault", walletStore?.Signavault) + console.log('data', data) - useEffect(() => { - console.log('Test: ', test) - console.log('Test transactions: ', test?.transactions) - if (test && test.transactions.length > 0) { - setHasPendingTx(true) - } else setHasPendingTx(false) - }, [test, walletName, adr]) + if (walletStore?.Signavault?.transactions) { + setHasPendingTx(walletStore.Signavault.transactions.length > 0) + } + }, [adr]) return ( diff --git a/src/components/Navbar/SelectNetwork.tsx b/src/components/Navbar/SelectNetwork.tsx index 822e2bff..4bd7a91c 100644 --- a/src/components/Navbar/SelectNetwork.tsx +++ b/src/components/Navbar/SelectNetwork.tsx @@ -53,7 +53,7 @@ export default function SelectedNetwork() { variant="verified" sx={{ position: 'absolute', - top: 0, + top: -2, right: 0, }} label={networkChip(activeNetwork?.networkId)} From 924422c94eb8823f92fff2673a4bc851f6c33c62 Mon Sep 17 00:00:00 2001 From: Ysrbolles Date: Sun, 22 Sep 2024 22:40:14 +0100 Subject: [PATCH 3/6] refactor(LoggedInAccount): remove unused lodash import and optimize useEffect hook --- src/components/Navbar/LoggedInAccount.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/Navbar/LoggedInAccount.tsx b/src/components/Navbar/LoggedInAccount.tsx index c4dfd778..f197dbe3 100644 --- a/src/components/Navbar/LoggedInAccount.tsx +++ b/src/components/Navbar/LoggedInAccount.tsx @@ -1,7 +1,6 @@ import { mdiWalletOutline } from '@mdi/js' import Icon from '@mdi/react' import { Box } from '@mui/material' -import _ from 'lodash' import React, { useEffect, useState } from 'react' import store from 'wallet/store' import { getNameOfWallet, getPchainAddress } from '../../helpers/walletStore' @@ -24,17 +23,16 @@ const LoggedInAccount = () => { ) }, [activeNetwork]) - useEffect(() => { - store.dispatch('Signavault/updateTransaction') - - const data = _.cloneDeep(walletStore?.Signavault) - console.log("walletStore?.Signavault", walletStore?.Signavault) - console.log('data', data) + useEffect(() => { + checkPendingTx() + }, [adr]) + const checkPendingTx = async () => { + await store.dispatch('Signavault/updateTransaction') if (walletStore?.Signavault?.transactions) { setHasPendingTx(walletStore.Signavault.transactions.length > 0) } - }, [adr]) + } return ( From a1555d2728588ff0dff1b5fefb2807aa5fc0c2ac Mon Sep 17 00:00:00 2001 From: Ysrbolles Date: Wed, 25 Sep 2024 00:53:32 +0100 Subject: [PATCH 4/6] refactor(CamBadge): update variant style and label in Navbar/Account --- src/components/CamBadge.tsx | 2 +- src/components/LoadAccountMenu.tsx | 1 + src/components/Navbar/Account.tsx | 39 ++++++++++++++++++- .../Navbar/LoadSaveKeysComponent.tsx | 6 ++- src/components/Navbar/LoggedInAccount.tsx | 33 ++-------------- src/hooks/useWallet.ts | 5 ++- src/redux/slices/app-config.ts | 6 +++ src/theme/typography.ts | 9 +++++ src/views/settings/MultisigWallet.tsx | 8 ++-- 9 files changed, 71 insertions(+), 38 deletions(-) diff --git a/src/components/CamBadge.tsx b/src/components/CamBadge.tsx index c340649d..a4b2c1ba 100644 --- a/src/components/CamBadge.tsx +++ b/src/components/CamBadge.tsx @@ -73,7 +73,7 @@ const CamBadge = ({ ...sx, }} > - + {label} diff --git a/src/components/LoadAccountMenu.tsx b/src/components/LoadAccountMenu.tsx index f85bf1da..77f77984 100644 --- a/src/components/LoadAccountMenu.tsx +++ b/src/components/LoadAccountMenu.tsx @@ -22,6 +22,7 @@ export const LoadAccountMenu = (props: { setOpen?: React.Dispatch> selectedAlias?: string updateAlias?: any + hasImportedPendingTx?: boolean }) => { const ref = useRef(null) const dispatch = useAppDispatch() diff --git a/src/components/Navbar/Account.tsx b/src/components/Navbar/Account.tsx index ad640cf7..2f610444 100644 --- a/src/components/Navbar/Account.tsx +++ b/src/components/Navbar/Account.tsx @@ -6,8 +6,10 @@ import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks' import { changeActiveApp, getAccount, + getWalletStore, updateAccount, updatePchainAddress, + updatePendingTxState, } from '../../redux/slices/app-config' import Icon from '@mdi/react' @@ -16,9 +18,12 @@ import { LoadAccountMenu } from '../LoadAccountMenu' 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 @@ export default function Account({ handleCloseSidebar }: LoginIconProps) { const navigate = useNavigate() const account = useAppSelector(getAccount) const theme = useTheme() + const walletStore = useAppSelector(getWalletStore) + const [open, setOpen] = useState(false) + const [hasPendingTx, setHasPendingTx] = useState(false) + const pendingTxState = useSelector((state: any) => state.appConfig.pendingTxState) + const activeNetwork = useAppSelector(getActiveNetwork) const logout = async () => { handleCloseSidebar() await store.dispatch('logout') @@ -52,7 +62,22 @@ export default function Account({ handleCloseSidebar }: LoginIconProps) { 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 ( <> @@ -122,6 +147,18 @@ export default function Account({ handleCloseSidebar }: LoginIconProps) { setOpen(v => !v) }} > + {hasPendingTx && ( + + )} {!account ? ( Account ) : ( diff --git a/src/components/Navbar/LoadSaveKeysComponent.tsx b/src/components/Navbar/LoadSaveKeysComponent.tsx index 31eec0c7..076b35fb 100644 --- a/src/components/Navbar/LoadSaveKeysComponent.tsx +++ b/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 ( diff --git a/src/components/Navbar/LoggedInAccount.tsx b/src/components/Navbar/LoggedInAccount.tsx index f197dbe3..a993f5b6 100644 --- a/src/components/Navbar/LoggedInAccount.tsx +++ b/src/components/Navbar/LoggedInAccount.tsx @@ -1,21 +1,16 @@ import { mdiWalletOutline } from '@mdi/js' import Icon from '@mdi/react' import { Box } from '@mui/material' -import React, { useEffect, useState } from 'react' -import store from 'wallet/store' +import React, { useEffect } from 'react' import { getNameOfWallet, getPchainAddress } from '../../helpers/walletStore' import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks' -import { getWalletName, getWalletStore, updatePchainAddress } from '../../redux/slices/app-config' +import { getWalletName, updatePchainAddress } from '../../redux/slices/app-config' import { getActiveNetwork } from '../../redux/slices/network' -import CamBadge from '../CamBadge' import LongString from '../LongString' const LoggedInAccount = () => { const walletName = useAppSelector(getWalletName) const activeNetwork = useAppSelector(getActiveNetwork) - const walletStore = useAppSelector(getWalletStore) - const [hasPendingTx, setHasPendingTx] = useState(false) - const adr = getPchainAddress() const dispatch = useAppDispatch() useEffect(() => { dispatch( @@ -23,31 +18,9 @@ const LoggedInAccount = () => { ) }, [activeNetwork]) - useEffect(() => { - checkPendingTx() - }, [adr]) - - const checkPendingTx = async () => { - await store.dispatch('Signavault/updateTransaction') - if (walletStore?.Signavault?.transactions) { - setHasPendingTx(walletStore.Signavault.transactions.length > 0) - } - } return ( - - {hasPendingTx && ( - - )} + diff --git a/src/hooks/useWallet.ts b/src/hooks/useWallet.ts index 6ff9779e..52e650a5 100644 --- a/src/hooks/useWallet.ts +++ b/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 } diff --git a/src/redux/slices/app-config.ts b/src/redux/slices/app-config.ts index b7e507aa..a761b67e 100644 --- a/src/redux/slices/app-config.ts +++ b/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 }, @@ -149,5 +154,6 @@ export const { updateNotificationStatus, updateShowButton, updatePchainAddress, + updatePendingTxState, } = appConfigSlice.actions export default appConfigSlice.reducer diff --git a/src/theme/typography.ts b/src/theme/typography.ts index d83f4804..d96484f9 100644 --- a/src/theme/typography.ts +++ b/src/theme/typography.ts @@ -148,6 +148,15 @@ const typography = { fontVariantNumeric: 'lining-nums tabular-nums slashed-zero', fontFeatureSettings: '"ss01" on', }, + badge: { + fontFamily: FONT, + fontWeight: 600, + lineHeight: '16px', + letterSpacing: '1.6px', + textTransform: 'uppercase', + fontVariantNumeric: 'lining-nums tabular-nums slashed-zero', + fontFeatureSettings: '"ss01" on', + }, button: { fontFamily: FONT, fontWeight: 700, diff --git a/src/views/settings/MultisigWallet.tsx b/src/views/settings/MultisigWallet.tsx index 2856a3b1..bac22d15 100644 --- a/src/views/settings/MultisigWallet.tsx +++ b/src/views/settings/MultisigWallet.tsx @@ -1,10 +1,11 @@ import React, { useEffect, useRef } from 'react' // @ts-ignore +import { Box } from '@mui/material' +import { styled } from '@mui/material/styles' import { mountMultisigWalletSetting } from 'wallet/mountMultisigWalletSetting' import { useAppDispatch } from '../../hooks/reduxHooks' +import useWallet from '../../hooks/useWallet' import { updateNotificationStatus, updateShowButton } from '../../redux/slices/app-config' -import { styled } from '@mui/material/styles' -import { Box } from '@mui/material' const StyledBox = styled(Box)(({ theme }) => ({ display: 'flex', @@ -20,11 +21,12 @@ const StyledBox = styled(Box)(({ theme }) => ({ const LoadMultisigWalletSetting = () => { const ref = useRef(null) const dispatch = useAppDispatch() + const { updateStore } = useWallet() const dispatchNotification = ({ message, type }) => dispatch(updateNotificationStatus({ message, severity: type })) const updateShowAlias = () => dispatch(updateShowButton()) useEffect(() => { - mountMultisigWalletSetting(ref.current, { dispatchNotification, updateShowAlias }) + mountMultisigWalletSetting(ref.current, { dispatchNotification, updateShowAlias, updateStore }) }, []) // eslint-disable-line react-hooks/exhaustive-deps return ( From 90ba5f32ccde391f22704dc226ac191dfa3e1a1f Mon Sep 17 00:00:00 2001 From: Ysrbolles Date: Wed, 25 Sep 2024 01:04:19 +0100 Subject: [PATCH 5/6] refactor(theme): optimize badge typography --- src/theme/typography.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/theme/typography.ts b/src/theme/typography.ts index d96484f9..cc1ff11a 100644 --- a/src/theme/typography.ts +++ b/src/theme/typography.ts @@ -148,15 +148,6 @@ const typography = { fontVariantNumeric: 'lining-nums tabular-nums slashed-zero', fontFeatureSettings: '"ss01" on', }, - badge: { - fontFamily: FONT, - fontWeight: 600, - lineHeight: '16px', - letterSpacing: '1.6px', - textTransform: 'uppercase', - fontVariantNumeric: 'lining-nums tabular-nums slashed-zero', - fontFeatureSettings: '"ss01" on', - }, button: { fontFamily: FONT, fontWeight: 700, @@ -166,6 +157,15 @@ const typography = { fontVariantNumeric: 'lining-nums tabular-nums slashed-zero', fontFeatureSettings: '"ss01" on', }, + badge: { + fontFamily: FONT, + fontWeight: 600, + lineHeight: '16px', + letterSpacing: '1.6px', + textTransform: 'uppercase', + fontVariantNumeric: 'lining-nums tabular-nums slashed-zero', + fontFeatureSettings: '"ss01" on', + }, } as const export default typography From ade7ae0c1d0c1a3c5812fcec7751772247ef6cf8 Mon Sep 17 00:00:00 2001 From: Ysrbolles Date: Thu, 26 Sep 2024 12:46:45 +0100 Subject: [PATCH 6/6] refactor(useNetwork): update imported multi-signature transaction on network change --- src/hooks/useNetwork.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/hooks/useNetwork.ts b/src/hooks/useNetwork.ts index c42fe65a..f858723c 100644 --- a/src/hooks/useNetwork.ts +++ b/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 })