diff --git a/src/components/LoadAccountMenu.tsx b/src/components/LoadAccountMenu.tsx index 6b9f969d..5dfb8f4f 100644 --- a/src/components/LoadAccountMenu.tsx +++ b/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,6 +25,7 @@ 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(() => { @@ -31,6 +33,8 @@ export const LoadAccountMenu = (props: { ...props, setAccount, dispatchNotification, + + updateStore, }) }) // eslint-disable-line react-hooks/exhaustive-deps diff --git a/src/components/Navbar/LoadMyKeysComponent.tsx b/src/components/Navbar/LoadMyKeysComponent.tsx index b6828948..46bd2a31 100644 --- a/src/components/Navbar/LoadMyKeysComponent.tsx +++ b/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 (
diff --git a/src/hooks/useWallet.ts b/src/hooks/useWallet.ts new file mode 100644 index 00000000..de5e5967 --- /dev/null +++ b/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 diff --git a/src/redux/slices/app-config.ts b/src/redux/slices/app-config.ts index fa398f2d..b5443195 100644 --- a/src/redux/slices/app-config.ts +++ b/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 diff --git a/src/views/wallet/WalletApp.tsx b/src/views/wallet/WalletApp.tsx index 99ec63f8..4ea15d85 100644 --- a/src/views/wallet/WalletApp.tsx +++ b/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])