diff --git a/src-gui/src/renderer/components/pages/swap/swap/init/deposit_and_choose_offer/MakerDiscoveryStatus.tsx b/src-gui/src/renderer/components/pages/swap/swap/init/deposit_and_choose_offer/MakerDiscoveryStatus.tsx index 828da2501..9dc7fdcb8 100644 --- a/src-gui/src/renderer/components/pages/swap/swap/init/deposit_and_choose_offer/MakerDiscoveryStatus.tsx +++ b/src-gui/src/renderer/components/pages/swap/swap/init/deposit_and_choose_offer/MakerDiscoveryStatus.tsx @@ -27,7 +27,11 @@ import { import { useState, useMemo, useEffect } from "react"; import { useAppSelector } from "store/hooks"; import { QuoteStatus, ConnectionStatus } from "models/tauriModel"; -import { selectPeers } from "store/selectors"; +import { + selectConnectedPeerIds, + selectMakerDiscoveryActivity, + selectPeers, +} from "store/selectors"; import TorIcon from "renderer/components/icons/TorIcon"; import TruncatedText from "renderer/components/other/TruncatedText"; import ClickToCopy from "renderer/components/other/ClickToCopy"; @@ -42,11 +46,10 @@ export default function MakerDiscoveryStatus() { const [everConnectedPeers, setEverConnectedPeers] = useState>( new Set(), ); - const peers = useAppSelector(selectPeers); - - const connectedPeerIds = peers - .filter((p) => p.connection === ConnectionStatus.Connected) - .map((p) => p.peer_id); + const connectedPeerIds = useAppSelector(selectConnectedPeerIds); + const { quotesInflight, dialsInflight } = useAppSelector( + selectMakerDiscoveryActivity, + ); // Track peers that have ever been connected (accumulating historical state) useEffect(() => { @@ -58,15 +61,7 @@ export default function MakerDiscoveryStatus() { newIds.forEach((id) => updated.add(id)); return updated; }); - // eslint-disable-next-line react-hooks/exhaustive-deps -- peers is the stable source - }, [peers]); - - const quotesInflight = peers.filter( - (p) => p.quote === QuoteStatus.Inflight, - ).length; - const dialsInflight = peers.filter( - (p) => p.connection === ConnectionStatus.Dialing, - ).length; + }, [connectedPeerIds]); const isActive = quotesInflight > 0 || dialsInflight > 0; @@ -140,12 +135,13 @@ export default function MakerDiscoveryStatus() { - setDialogOpen(false)} - peers={peers} - everConnectedPeers={everConnectedPeers} - /> + {dialogOpen && ( + setDialogOpen(false)} + everConnectedPeers={everConnectedPeers} + /> + )} ); } @@ -338,16 +334,15 @@ function PeerTable({ peers, page, rowsPerPage }: PeerTableProps) { interface PeerDetailsDialogProps { open: boolean; onClose: () => void; - peers: Peer[]; everConnectedPeers: Set; } function PeerDetailsDialog({ open, onClose, - peers, everConnectedPeers, }: PeerDetailsDialogProps) { + const peers = useAppSelector(selectPeers); const [page, setPage] = useState(0); const rowsPerPage = 8; diff --git a/src-gui/src/store/selectors.ts b/src-gui/src/store/selectors.ts index 0a59efed0..d8a42be4a 100644 --- a/src-gui/src/store/selectors.ts +++ b/src-gui/src/store/selectors.ts @@ -9,6 +9,8 @@ import { const selectRpcState = (state: RootState) => state.rpc.state; const selectP2pState = (state: RootState) => state.p2p; +const selectConnectionStatus = (state: RootState) => state.p2p.connectionStatus; +const selectQuoteStatus = (state: RootState) => state.p2p.quoteStatus; export const selectSwapInfosRaw = createSelector( [selectRpcState], @@ -60,7 +62,26 @@ export const selectPendingApprovals = createSelector( ), ); -// TODO: This should be split into multiple selectors/hooks to avoid excessive re-rendering +export const selectConnectedPeerIds = createSelector( + [selectConnectionStatus], + (connectionStatus) => + Object.entries(connectionStatus) + .filter(([, status]) => status === ConnectionStatus.Connected) + .map(([peerId]) => peerId), +); + +export const selectMakerDiscoveryActivity = createSelector( + [selectConnectionStatus, selectQuoteStatus], + (connectionStatus, quoteStatus) => ({ + dialsInflight: Object.values(connectionStatus).filter( + (status) => status === ConnectionStatus.Dialing, + ).length, + quotesInflight: Object.values(quoteStatus).filter( + (status) => status === QuoteStatus.Inflight, + ).length, + }), +); + export const selectPeers = createSelector([selectP2pState], (p2p) => { const peerIds = new Set([ ...Object.keys(p2p.connectionStatus),