fix(suite): update graphs

trezor · Dec 28, 2024 · a128a78 · a128a78
1 parent a692870
commit a128a78
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 44 deletions.
diff --git a/packages/suite/src/actions/wallet/graphActions.ts b/packages/suite/src/actions/wallet/graphActions.ts
@@ -14,6 +14,7 @@ import {
     deviceGraphDataFilterFn,
 } from 'src/utils/wallet/graph';
 import { selectLocalCurrency } from 'src/reducers/wallet/settingsReducer';
+import { State } from 'src/reducers/wallet/graphReducer';
 
 import {
     ACCOUNT_GRAPH_SUCCESS,
@@ -176,38 +177,42 @@ export const updateGraphData =
         });
     };
 
-export const getGraphDataForInterval =
-    (options: { account?: Account; deviceState?: StaticSessionId }) =>
-    (_dispatch: Dispatch, getState: GetState) => {
-        const { graph } = getState().wallet;
-        const { selectedRange } = graph;
-
-        const data: GraphData[] = [];
-        graph.data.forEach(accountGraph => {
-            const accountFilter = options.account
-                ? accountGraphDataFilterFn(accountGraph, options.account)
-                : true;
-            const deviceFilter = options.deviceState
-                ? deviceGraphDataFilterFn(accountGraph, options.deviceState)
-                : true;
-
-            if (accountFilter && deviceFilter) {
-                if (selectedRange.startDate && selectedRange.endDate) {
-                    data.push({
-                        ...accountGraph,
-                        data:
-                            accountGraph.data?.filter(d =>
-                                isWithinInterval(fromUnixTime(d.time), {
-                                    start: selectedRange.startDate,
-                                    end: selectedRange.endDate,
-                                }),
-                            ) ?? [],
-                    });
-                } else {
-                    data.push(accountGraph);
-                }
+// TODO: should be in graphUtils
+export const getGraphDataForInterval = ({
+    account,
+    deviceState,
+    graph,
+}: {
+    account?: Account;
+    deviceState?: StaticSessionId;
+    graph: State;
+}) => {
+    const { selectedRange } = graph;
+
+    const data: GraphData[] = [];
+    graph.data.forEach(accountGraph => {
+        const accountFilter = account ? accountGraphDataFilterFn(accountGraph, account) : true;
+        const deviceFilter = deviceState
+            ? deviceGraphDataFilterFn(accountGraph, deviceState)
+            : true;
+
+        if (accountFilter && deviceFilter) {
+            if (selectedRange.startDate && selectedRange.endDate) {
+                data.push({
+                    ...accountGraph,
+                    data:
+                        accountGraph.data?.filter(d =>
+                            isWithinInterval(fromUnixTime(d.time), {
+                                start: selectedRange.startDate,
+                                end: selectedRange.endDate,
+                            }),
+                        ) ?? [],
+                });
+            } else {
+                data.push(accountGraph);
             }
-        });
+        }
+    });
 
-        return data;
-    };
+    return data;
+};
diff --git a/packages/suite/src/views/dashboard/PortfolioCard/DashboardGraph.tsx b/packages/suite/src/views/dashboard/PortfolioCard/DashboardGraph.tsx
@@ -46,7 +46,7 @@ type DashboardGraphProps = {
 };
 
 export const DashboardGraph = memo(({ accounts }: DashboardGraphProps) => {
-    const { error, isLoading, selectedRange } = useSelector(state => state.wallet.graph);
+    const graph = useSelector(state => state.wallet.graph);
     const selectedDevice = useSelector(selectSelectedDevice);
     const localCurrency = useSelector(selectLocalCurrency);
     const dispatch = useDispatch();
@@ -56,7 +56,7 @@ export const DashboardGraph = memo(({ accounts }: DashboardGraphProps) => {
     const [xTicks, setXticks] = useState<number[]>([]);
 
     const selectedDeviceState = selectedDevice?.state?.staticSessionId;
-    const failedAccounts = error?.filter(a => a.deviceState === selectedDeviceState);
+    const failedAccounts = graph.error?.filter(a => a.deviceState === selectedDeviceState);
     const allFailed =
         failedAccounts &&
         failedAccounts.every(fa => accounts.some(a => a.descriptor === fa.descriptor));
@@ -89,23 +89,23 @@ export const DashboardGraph = memo(({ accounts }: DashboardGraphProps) => {
     );
 
     useEffect(() => {
-        if (!isLoading) {
+        if (!graph.isLoading) {
             const worker = new GraphWorker();
             setIsProcessing(true);
-            const rawData = dispatch(getGraphDataForInterval({ deviceState: selectedDeviceState }));
+            const rawData = getGraphDataForInterval({ deviceState: selectedDeviceState, graph });
 
             worker.postMessage({
                 history: rawData,
-                groupBy: selectedRange.groupBy,
+                groupBy: graph.selectedRange.groupBy,
                 type: 'dashboard',
             });
 
             const handleMessage = (event: MessageEvent) => {
                 const aggregatedData = event.data;
                 const graphTicks =
-                    selectedRange.label === 'all'
+                    graph.selectedRange.label === 'all'
                         ? calcTicksFromData(aggregatedData).map(getUnixTime)
-                        : calcTicks(selectedRange.startDate, selectedRange.endDate).map(
+                        : calcTicks(graph.selectedRange.startDate, graph.selectedRange.endDate).map(
                               getUnixTime,
                           );
 
@@ -121,7 +121,7 @@ export const DashboardGraph = memo(({ accounts }: DashboardGraphProps) => {
                 worker.terminate();
             };
         }
-    }, [dispatch, isLoading, selectedDeviceState, selectedRange]);
+    }, [graph, selectedDeviceState]);
 
     return (
         <Wrapper data-testid="@dashboard/graph">
@@ -138,12 +138,12 @@ export const DashboardGraph = memo(({ accounts }: DashboardGraphProps) => {
                         hideToolbar
                         variant="all-assets"
                         onRefresh={onRefresh}
-                        isLoading={isLoading || isProcessing}
+                        isLoading={graph.isLoading || isProcessing}
                         localCurrency={localCurrency}
                         xTicks={xTicks}
                         minMaxValues={minMaxValues}
                         data={data}
-                        selectedRange={selectedRange}
+                        selectedRange={graph.selectedRange}
                         receivedValueFn={receivedValueFn}
                         sentValueFn={sentValueFn}
                         balanceValueFn={balanceValueFn}

diff --git a/packages/suite/src/views/wallet/transactions/components/TransactionSummary.tsx b/packages/suite/src/views/wallet/transactions/components/TransactionSummary.tsx
@@ -63,10 +63,12 @@ interface TransactionSummaryProps {
 
 export const TransactionSummary = ({ account }: TransactionSummaryProps) => {
     const selectedRange = useSelector(state => state.wallet.graph.selectedRange);
+    const graph = useSelector(state => state.wallet.graph);
+
     const localCurrency = useSelector(selectLocalCurrency);
     const dispatch = useDispatch();
 
-    const intervalGraphData = dispatch(getGraphDataForInterval({ account }));
+    const intervalGraphData = getGraphDataForInterval({ account, graph });
     const data = intervalGraphData[0]?.data
         ? aggregateBalanceHistory(intervalGraphData, selectedRange.groupBy, 'account')
         : [];