[FIX]: Throw error to avoid Error: qrcode websocket prematurely close…

…d on QRCode host (#7556)
LedgerHQ · Aug 8, 2024 · ebbbe52 · ebbbe52
1 parent 0407529
commit ebbbe52
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 25 deletions.
diff --git a/.changeset/loud-bikes-rest.md b/.changeset/loud-bikes-rest.md
@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": patch
+"live-mobile": patch
+---
+
+Throw errors to avoid rejection on QRCode
diff --git a/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useQRCode.ts b/apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useQRCode.ts
@@ -8,8 +8,11 @@ import { trustchainSelector, memberCredentialsSelector } from "@ledgerhq/trustch
 import { useTrustchainSdk } from "./useTrustchainSdk";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import getWalletSyncEnvironmentParams from "@ledgerhq/live-common/walletSync/getEnvironmentParams";
+import { useQueryClient } from "@tanstack/react-query";
+import { QueryKey } from "./type.hooks";
 
 export function useQRCode() {
+  const queryClient = useQueryClient();
   const dispatch = useDispatch();
   const trustchain = useSelector(trustchainSelector);
   const memberCredentials = useSelector(memberCredentialsSelector);
@@ -29,8 +32,6 @@ export function useQRCode() {
   const startQRCodeProcessing = useCallback(() => {
     if (!trustchain || !memberCredentials) return;
 
-    let hasCompleted = false;
-
     setError(null);
     setIsLoading(true);
     createQRCodeHostInstance({
@@ -44,7 +45,6 @@ export function useQRCode() {
       },
       addMember: async member => {
         await sdk.addMember(trustchain, memberCredentials, member);
-        hasCompleted = true;
         return trustchain;
       },
     })
@@ -53,17 +53,17 @@ export function useQRCode() {
           dispatch(setFlow({ flow: Flow.Synchronize, step: Step.PinCodeError }));
         }
         setError(e);
+        throw e;
       })
       .then(() => {
-        if (hasCompleted) dispatch(setFlow({ flow: Flow.Synchronize, step: Step.Synchronized }));
-      })
-      .finally(() => {
+        dispatch(setFlow({ flow: Flow.Synchronize, step: Step.Synchronized }));
+        queryClient.invalidateQueries({ queryKey: [QueryKey.getMembers] });
         setUrl(null);
         dispatch(setQrCodePinCode(null));
         setIsLoading(false);
         setError(null);
       });
-  }, [trustchain, memberCredentials, trustchainApiBaseUrl, dispatch, sdk]);
+  }, [trustchain, memberCredentials, trustchainApiBaseUrl, dispatch, sdk, queryClient]);
 
   return {
     url,

diff --git a/apps/ledger-live-mobile/src/newArch/features/Accounts/__integrations__/shared.tsx b/apps/ledger-live-mobile/src/newArch/features/Accounts/__integrations__/shared.tsx
@@ -7,6 +7,7 @@ import AddAccountDrawer from "LLM/features/Accounts/screens/AddAccount";
 import { BaseNavigatorStackParamList } from "~/components/RootNavigator/types/BaseNavigator";
 import AddAccountsNavigator from "~/components/RootNavigator/AddAccountsNavigator";
 import ImportAccountsNavigator from "~/components/RootNavigator/ImportAccountsNavigator";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 const MockComponent = () => {
   const { t } = useTranslation();
@@ -38,10 +39,12 @@ const Stack = createStackNavigator<BaseNavigatorStackParamList>();
 
 export function TestButtonPage() {
   return (
-    <Stack.Navigator initialRouteName={ScreenName.MockedAddAssetButton}>
-      <Stack.Screen name={ScreenName.MockedAddAssetButton} component={MockComponent} />
-      <Stack.Screen name={NavigatorName.AddAccounts} component={AddAccountsNavigator} />
-      <Stack.Screen name={NavigatorName.ImportAccounts} component={ImportAccountsNavigator} />
-    </Stack.Navigator>
+    <QueryClientProvider client={new QueryClient()}>
+      <Stack.Navigator initialRouteName={ScreenName.MockedAddAssetButton}>
+        <Stack.Screen name={ScreenName.MockedAddAssetButton} component={MockComponent} />
+        <Stack.Screen name={NavigatorName.AddAccounts} component={AddAccountsNavigator} />
+        <Stack.Screen name={NavigatorName.ImportAccounts} component={ImportAccountsNavigator} />
+      </Stack.Navigator>
+    </QueryClientProvider>
   );
 }
diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useQRCodeHost.ts b/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useQRCodeHost.ts
@@ -9,6 +9,8 @@ import { useNavigation } from "@react-navigation/native";
 import { NavigatorName, ScreenName } from "~/const";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import getWalletSyncEnvironmentParams from "@ledgerhq/live-common/walletSync/getEnvironmentParams";
+import { useQueryClient } from "@tanstack/react-query";
+import { QueryKey } from "./type.hooks";
 
 interface Props {
   setCurrentStep: (step: Steps) => void;
@@ -17,6 +19,7 @@ interface Props {
 }
 
 export function useQRCodeHost({ setCurrentStep, currentStep, currentOption }: Props) {
+  const queryClient = useQueryClient();
   const trustchain = useSelector(trustchainSelector);
   const memberCredentials = useSelector(memberCredentialsSelector);
   const sdk = useTrustchainSdk();
@@ -36,8 +39,6 @@ export function useQRCodeHost({ setCurrentStep, currentStep, currentOption }: Pr
   const startQRCodeProcessing = useCallback(() => {
     if (!trustchain || !memberCredentials || isLoading) return;
 
-    let hasCompleted = false;
-
     setError(null);
     setIsLoading(true);
     createQRCodeHostInstance({
@@ -55,7 +56,6 @@ export function useQRCodeHost({ setCurrentStep, currentStep, currentOption }: Pr
       },
       addMember: async member => {
         await sdk.addMember(trustchain, memberCredentials, member);
-        hasCompleted = true;
         return trustchain;
       },
     })
@@ -65,17 +65,17 @@ export function useQRCodeHost({ setCurrentStep, currentStep, currentOption }: Pr
           return;
         }
         setError(e);
+        throw e;
       })
       .then(() => {
-        if (!error && hasCompleted)
-          navigation.navigate(NavigatorName.WalletSync, {
-            screen: ScreenName.WalletSyncSuccess,
-            params: {
-              created: false,
-            },
-          });
-      })
-      .finally(() => {
+        queryClient.invalidateQueries({ queryKey: [QueryKey.getMembers] });
+        navigation.navigate(NavigatorName.WalletSync, {
+          screen: ScreenName.WalletSyncSuccess,
+          params: {
+            created: false,
+          },
+        });
+
         setUrl(null);
         setPinCode(null);
         setIsLoading(false);
@@ -87,7 +87,7 @@ export function useQRCodeHost({ setCurrentStep, currentStep, currentOption }: Pr
     trustchainApiBaseUrl,
     setCurrentStep,
     sdk,
-    error,
+    queryClient,
     navigation,
   ]);