diff --git a/src-gui/src/renderer/components/pages/help/MoneroPoolHealthBox.tsx b/src-gui/src/renderer/components/pages/help/MoneroPoolHealthBox.tsx index 45765bb122..a897570075 100644 --- a/src-gui/src/renderer/components/pages/help/MoneroPoolHealthBox.tsx +++ b/src-gui/src/renderer/components/pages/help/MoneroPoolHealthBox.tsx @@ -17,10 +17,8 @@ import NetworkWifiIcon from "@mui/icons-material/NetworkWifi"; import { useAppSelector } from "store/hooks"; export default function MoneroPoolHealthBox() { - const { poolStatus, isLoading } = useAppSelector((state) => ({ - poolStatus: state.pool.status, - isLoading: state.pool.isLoading, - })); + const poolStatus = useAppSelector((state) => state.pool.status); + const isLoading = useAppSelector((state) => state.pool.isLoading); const theme = useTheme(); const formatLatency = (latencyMs?: number) => { diff --git a/src-gui/src/store/hooks.ts b/src-gui/src/store/hooks.ts index 910bad3a2d..a0f1366083 100644 --- a/src-gui/src/store/hooks.ts +++ b/src-gui/src/store/hooks.ts @@ -32,12 +32,12 @@ import { TauriBitcoinSyncProgress, } from "models/tauriModel"; import { Alert } from "models/apiModel"; -import { fnv1a } from "utils/hash"; import { selectAllSwapInfos, selectPendingApprovals, selectSwapInfoWithTimelock, selectSwapInfosRaw, + selectUnacknowledgedAlerts, } from "./selectors"; export const useAppDispatch = () => useDispatch(); @@ -339,16 +339,7 @@ export function useTotalUnreadMessagesCount(): number { /// Returns all the alerts that have not been acknowledged export function useAlerts(): Alert[] { - return useAppSelector((state) => - state.alerts.alerts.filter( - (alert) => - // Check if there is an acknowledgement with - // the same id and the same title hash - !state.alerts.acknowledgedAlerts.some( - (ack) => ack.id === alert.id && ack.titleHash === fnv1a(alert.title), - ), - ), - ); + return useAppSelector(selectUnacknowledgedAlerts); } /// Returns true if the we heuristically determine that the user has used the app at least a little bit diff --git a/src-gui/src/store/selectors.ts b/src-gui/src/store/selectors.ts index 0a59efed08..033073a92c 100644 --- a/src-gui/src/store/selectors.ts +++ b/src-gui/src/store/selectors.ts @@ -6,9 +6,13 @@ import { ExpiredTimelocks, QuoteStatus, } from "models/tauriModel"; +import { fnv1a } from "utils/hash"; const selectRpcState = (state: RootState) => state.rpc.state; const selectP2pState = (state: RootState) => state.p2p; +const selectAlerts = (state: RootState) => state.alerts.alerts; +const selectAcknowledgedAlerts = (state: RootState) => + state.alerts.acknowledgedAlerts; export const selectSwapInfosRaw = createSelector( [selectRpcState], @@ -60,6 +64,17 @@ export const selectPendingApprovals = createSelector( ), ); +export const selectUnacknowledgedAlerts = createSelector( + [selectAlerts, selectAcknowledgedAlerts], + (alerts, acknowledgedAlerts) => + alerts.filter( + (alert) => + !acknowledgedAlerts.some( + (ack) => ack.id === alert.id && ack.titleHash === fnv1a(alert.title), + ), + ), +); + // TODO: This should be split into multiple selectors/hooks to avoid excessive re-rendering export const selectPeers = createSelector([selectP2pState], (p2p) => { const peerIds = new Set([