fix(mobile): wrong graph after device switch and then refetch (#12469)

trezor · May 17, 2024 · 3e14473 · 3e14473
1 parent e7a5554
commit 3e14473
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 23 deletions.
diff --git a/suite-native/module-home/src/screens/HomeScreen/HomeScreen.tsx b/suite-native/module-home/src/screens/HomeScreen/HomeScreen.tsx
@@ -13,9 +13,10 @@ import { Box } from '@suite-native/atoms';
 
 import { BiometricsBottomSheet } from './components/BiometricsBottomSheet';
 import { EmptyHomeRenderer } from './components/EmptyHomeRenderer';
-import { PortfolioContent, PortfolioContentRef } from './components/PortfolioContent';
+import { PortfolioContent } from './components/PortfolioContent';
 import { useHomeRefreshControl } from './useHomeRefreshControl';
 import { EnableViewOnlyBottomSheet } from './components/EnableViewOnlyBottomSheet';
+import { PortfolioGraphRef } from './components/PortfolioGraph';
 
 export const HomeScreen = () => {
     const isDeviceDiscoveryEmpty = useSelector(selectIsDeviceDiscoveryEmpty);
@@ -28,7 +29,7 @@ export const HomeScreen = () => {
             isDeviceAuthFailed || // When user click cancel on PIN entry or it fails from other reason.
             !isDeviceUnlocked); // When user click cancel, it takes some time before isDeviceAuthFailed is set.
 
-    const portfolioContentRef = useRef<PortfolioContentRef>(null);
+    const portfolioContentRef = useRef<PortfolioGraphRef>(null);
     const refreshControl = useHomeRefreshControl({
         isPortfolioEmpty: isDeviceDiscoveryEmpty,
         portfolioContentRef,

diff --git a/suite-native/module-home/src/screens/HomeScreen/components/PortfolioContent.tsx b/suite-native/module-home/src/screens/HomeScreen/components/PortfolioContent.tsx
@@ -1,5 +1,5 @@
 import { useSelector } from 'react-redux';
-import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { forwardRef } from 'react';
 
 import { useNavigation } from '@react-navigation/native';
 
@@ -23,13 +23,7 @@ import { Translation } from '@suite-native/intl';
 
 import { PortfolioGraph, PortfolioGraphRef } from './PortfolioGraph';
 
-export type PortfolioContentRef = {
-    refetchGraph?: () => Promise<void>;
-};
-
-export const PortfolioContent = forwardRef<PortfolioContentRef>((_props, ref) => {
-    const graphRef = useRef<PortfolioGraphRef>(null);
-
+export const PortfolioContent = forwardRef<PortfolioGraphRef>((_props, ref) => {
     const navigation = useNavigation<StackNavigationProps<RootStackParamList, RootStackRoutes>>();
 
     const isPortfolioTrackerDevice = useSelector(selectIsPortfolioTrackerDevice);
@@ -55,17 +49,9 @@ export const PortfolioContent = forwardRef<PortfolioContentRef>((_props, ref) =>
         navigation.navigate(RootStackRoutes.SendStack, { screen: SendStackRoutes.SendAccounts });
     };
 
-    useImperativeHandle(
-        ref,
-        () => ({
-            refetchGraph: graphRef.current?.refetch,
-        }),
-        [],
-    );
-
     return (
         <VStack spacing="large" marginTop="small">
-            <PortfolioGraph ref={graphRef} />
+            <PortfolioGraph ref={ref} />
             <VStack spacing="large" marginHorizontal="small">
                 <Box>
                     <Assets />

diff --git a/suite-native/module-home/src/screens/HomeScreen/components/PortfolioGraph.tsx b/suite-native/module-home/src/screens/HomeScreen/components/PortfolioGraph.tsx
@@ -15,7 +15,7 @@ import {
 } from './PortfolioGraphHeader';
 
 export type PortfolioGraphRef = {
-    refetch: () => Promise<void>;
+    refetchGraph: () => Promise<void>;
 };
 
 export const PortfolioGraph = forwardRef<PortfolioGraphRef>((_props, ref) => {
@@ -45,7 +45,7 @@ export const PortfolioGraph = forwardRef<PortfolioGraphRef>((_props, ref) => {
     useImperativeHandle(
         ref,
         () => ({
-            refetch,
+            refetchGraph: refetch,
         }),
         [refetch],
     );

diff --git a/suite-native/module-home/src/screens/HomeScreen/useHomeRefreshControl.tsx b/suite-native/module-home/src/screens/HomeScreen/useHomeRefreshControl.tsx
@@ -5,14 +5,14 @@ import { useDispatch } from 'react-redux';
 import { syncAllAccountsWithBlockchainThunk } from '@suite-native/blockchain';
 import { useNativeStyles } from '@trezor/styles';
 
-import { PortfolioContentRef } from './components/PortfolioContent';
+import { PortfolioGraphRef } from './components/PortfolioGraph';
 
 export const useHomeRefreshControl = ({
     isPortfolioEmpty,
     portfolioContentRef,
 }: {
     isPortfolioEmpty: boolean;
-    portfolioContentRef: React.MutableRefObject<PortfolioContentRef | null>;
+    portfolioContentRef: React.MutableRefObject<PortfolioGraphRef | null>;
 }) => {
     const [isRefreshing, setIsRefreshing] = useState(false);
     const dispatch = useDispatch();