[FEAT] : Manage instance with DeviceAction (#7472)

apps/ledger-live-desktop/src/newArch/features/WalletSync/hooks/useRemoveMember.ts

@@ -16,7 +16,7 @@ type Props = {
   member: TrustchainMember | null;
 };
 
-export function useRemoveMembers({ device, member }: Props) {
+export function useRemoveMember({ device, member }: Props) {
   const dispatch = useDispatch();
   const sdk = useTrustchainSdk();
   const trustchain = useSelector(trustchainSelector);

apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/ManageInstances/03-DeleteInstanceWithTrustchain.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { TrustchainMember } from "@ledgerhq/trustchain/types";
 import FollowStepsOnDevice from "../DeviceActions/FollowStepsOnDevice";
 import ErrorDisplay from "~/renderer/components/ErrorDisplay";
-import { useRemoveMembers } from "../../hooks/useRemoveMember";
+import { useRemoveMember } from "LLD/features/WalletSync/hooks/useRemoveMember";
 import { InfiniteLoader } from "@ledgerhq/react-ui";
 
 type Props = {
@@ -11,7 +11,7 @@ type Props = {
 };
 
 export default function DeleteInstanceWithTrustchain({ instance, device }: Props) {
-  const { error, userDeviceInteraction, onRetry } = useRemoveMembers({ device, member: instance });
+  const { error, userDeviceInteraction, onRetry } = useRemoveMember({ device, member: instance });
 
   if (error) {
     return <ErrorDisplay error={error} withExportLogs onRetry={onRetry} />;

apps/ledger-live-mobile/__tests__/test-renderer.tsx

@@ -26,6 +26,8 @@ import { INITIAL_STATE as WALLET_CONNECT_INITIAL_STATE } from "~/reducers/wallet
 import { INITIAL_STATE as PROTECT_INITIAL_STATE } from "~/reducers/protect";
 import { INITIAL_STATE as NFT_INITIAL_STATE } from "~/reducers/nft";
 import { INITIAL_STATE as MARKET_INITIAL_STATE } from "~/reducers/market";
+import { INITIAL_STATE as WALLETSYNC_INITIAL_STATE } from "~/reducers/walletSync";
+
 import { initialState as WALLET_INITIAL_STATE } from "@ledgerhq/live-wallet/store";
 import QueuedDrawersContextProvider from "~/newArch/components/QueuedDrawer/QueuedDrawersContextProvider";
 import { INITIAL_STATE as TRUSTCHAIN_INITIAL_STATE } from "@ledgerhq/trustchain/store";
@@ -47,6 +49,7 @@ const initialState = {
   market: MARKET_INITIAL_STATE,
   wallet: WALLET_INITIAL_STATE,
   trustchain: TRUSTCHAIN_INITIAL_STATE,
+  walletSync: WALLETSYNC_INITIAL_STATE,
 };
 
 type ExtraOptions = RenderOptions & {

apps/ledger-live-mobile/src/actions/types.ts

@@ -523,6 +523,14 @@ export type MarketPayload =
   | MarketSetCurrentPagePayload
   | MarketImportPayload;
 
+// === WALLETSYNC ACTIONS ===
+export enum WalletSyncActionTypes {
+  WALLET_SYNC_SET_MANAGE_KEY_DRAWER = "WALLET_SYNC_SET_MANAGE_KEY_DRAWER",
+}
+
+export type WalletSyncSetManageKeyDrawerPayload = boolean;
+export type WalletSyncPayload = WalletSyncSetManageKeyDrawerPayload;
+
 // === PAYLOADS ===
 
 export type ActionsPayload =

apps/ledger-live-mobile/src/actions/walletSync.ts

@@ -0,0 +1,7 @@
+import { createAction } from "redux-actions";
+import { WalletSyncActionTypes } from "./types";
+import type { WalletSyncSetManageKeyDrawerPayload } from "./types";
+
+export const setWallectSyncManageKeyDrawer = createAction<WalletSyncSetManageKeyDrawerPayload>(
+  WalletSyncActionTypes.WALLET_SYNC_SET_MANAGE_KEY_DRAWER,
+);

apps/ledger-live-mobile/src/components/RootNavigator/types/WalletSyncNavigator.ts

@@ -1,7 +1,8 @@
+import { TrustchainMember } from "@ledgerhq/trustchain/types";
 import { ScreenName } from "~/const";
 
 export type WalletSyncNavigatorStackParamList = {
-  [ScreenName.WalletSyncActivationSettings]: undefined;
+  [ScreenName.WalletSyncActivationInit]: undefined;
 
   [ScreenName.WalletSyncSuccess]: {
     created: boolean;
@@ -12,4 +13,12 @@ export type WalletSyncNavigatorStackParamList = {
 
   [ScreenName.WalletSyncManageKeyDeleteSuccess]: undefined;
   [ScreenName.WalletSyncUnSynchSuccess]: undefined;
+
+  [ScreenName.WalletSyncManageInstancesProcess]: {
+    member: TrustchainMember;
+  };
+
+  [ScreenName.WalletSyncManageInstancesSuccess]: {
+    member: TrustchainMember;
+  };
 };

apps/ledger-live-mobile/src/const/navigation.ts

@@ -511,12 +511,14 @@ export enum ScreenName {
   AnalyticsOptInPromptMain = "AnalyticsOptInPromptMain",
   AnalyticsOptInPromptDetails = "AnalyticsOptInPromptDetails",
 
-  WalletSyncActivationSettings = "WalletSyncActivationSettings",
+  WalletSyncActivationInit = "WalletSyncActivationInit",
   WalletSyncActivationProcess = "WalletSyncActivationProcess",
   WalletSyncSuccess = "WalletSyncSuccess",
   WalletSyncActivated = "WalletSyncActivated",
   WalletSyncManageKeyDeleteSuccess = "WalletSyncManageKeyDeleteSuccess",
   WalletSyncUnSynchSuccess = "WalletSyncUnSynchSuccess",
+  WalletSyncManageInstancesProcess = "WalletSyncManageInstancesProcess",
+  WalletSyncManageInstancesSuccess = "WalletSyncManageInstancesSuccess",
 
   MockedAddAssetButton = "MockedAddAssetButton",
   GenericLandingPage = "GenericLandingPage",
@@ -635,7 +637,7 @@ export enum NavigatorName {
   SyncOnboarding = "SyncOnboarding",
 
   AnalyticsOptInPrompt = "AnalyticsOptInPrompt",
-  WalletSyncActivationSettings = "WalletSyncActivationSettings",
+  WalletSyncActivationInit = "WalletSyncActivationInit",
   LandingPages = "LandingPages",
 
   // Web3Hub

apps/ledger-live-mobile/src/locales/en/common.json

@@ -6773,7 +6773,8 @@
           "info": "Deleting your encryption key will result in your devices becoming unsynchronized, and all synchronized data will be deleted. However, this will not affect your funds. You can resync your accounts at any time.",
           "cta": "I understand",
           "ctaDelete": "Delete my encryption key"
-        }
+        },
+        "success": "Your {{member}} is no longer synchronized"
       },
       "errors": {
         "fetching": "Something went wrong while fetching your synchronized instances.",

apps/ledger-live-mobile/src/newArch/features/WalletSync/WalletSyncNavigator.tsx

@@ -11,6 +11,8 @@ import { useInitMemberCredentials } from "./hooks/useInitMemberCredentials";
 import WalletSyncManage from "./screens/Manage";
 import { useTranslation } from "react-i18next";
 import { WalletSyncManageKeyDeletionSuccess } from "./screens/ManageKey/DeletionSuccess";
+import { ManageInstancesProcess } from "./screens/ManageInstances/ManageInstancesProcess";
+import { WalletSyncManageInstanceDeletionSuccess } from "./screens/ManageInstances/DeletionSuccess";
 
 const Stack = createStackNavigator<WalletSyncNavigatorStackParamList>();
 
@@ -23,7 +25,7 @@ export default function WalletSyncNavigator() {
   return (
     <Stack.Navigator screenOptions={stackNavConfig}>
       <Stack.Screen
-        name={ScreenName.WalletSyncActivationSettings}
+        name={ScreenName.WalletSyncActivationInit}
         component={WalletSyncActivation}
         options={{
           title: "",
@@ -67,6 +69,25 @@ export default function WalletSyncNavigator() {
           headerLeft: () => null,
         }}
       />
+
+      <Stack.Screen
+        name={ScreenName.WalletSyncManageInstancesProcess}
+        component={ManageInstancesProcess}
+        options={{
+          title: "",
+          headerRight: () => null,
+        }}
+      />
+
+      <Stack.Screen
+        name={ScreenName.WalletSyncManageInstancesSuccess}
+        component={WalletSyncManageInstanceDeletionSuccess}
+        options={{
+          title: "",
+          headerRight: () => null,
+          headerLeft: () => null,
+        }}
+      />
     </Stack.Navigator>
   );
 }

apps/ledger-live-mobile/src/newArch/features/WalletSync/__integrations__/shared.tsx

@@ -31,7 +31,7 @@ export function WalletSyncSettingsNavigator() {
 export function WalletSyncSharedNavigator() {
   return (
     <QueryClientProvider client={new QueryClient()}>
-      <Stack.Navigator initialRouteName={ScreenName.WalletSyncActivationSettings}>
+      <Stack.Navigator initialRouteName={ScreenName.WalletSyncActivationInit}>
         <Stack.Screen
           name={NavigatorName.WalletSync}
           component={WalletSyncNavigator}

apps/ledger-live-mobile/src/newArch/features/WalletSync/components/ManageInstances/ListInstances.tsx

@@ -8,20 +8,21 @@ import { TinyCard } from "../TinyCard";
 import { Scene } from "../../screens/ManageInstances/useManageInstanceDrawer";
 
 type Props = {
-  onClickDelete: (scene: Scene) => void;
+  onClickInstance: (member: TrustchainMember) => void;
   members?: TrustchainMember[];
   currentInstance?: string;
+  changeScene: (scene: Scene) => void;
 };
 
-export function ListInstances({ onClickDelete, members, currentInstance }: Props) {
+export function ListInstances({ onClickInstance, changeScene, members, currentInstance }: Props) {
   const { t } = useTranslation();
 
-  const handleAutoRemove = () => onClickDelete(Scene.AutoRemove);
+  const handleAutoRemove = () => changeScene(Scene.AutoRemove);
 
   const handleGoDeleteInstance = (instance: TrustchainMember) => {
     // eslint-disable-next-line no-console
     console.log("delete instance IMPLEMENTED IN NEXT PR", instance);
-    onClickDelete(Scene.DeviceAction);
+    onClickInstance(instance);
   };
 
   const renderItem = ({ item }: ListRenderItemInfo<TrustchainMember>) => {

apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/type.hooks.ts

@@ -2,3 +2,7 @@ export enum QueryKey {
   getMembers = "useGetMembers",
   destroyTrustchain = "useDestroyTrustchain",
 }
+
+export enum ErrorType {
+  NO_TRUSTCHAIN = "No such trustchain",
+}

apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useGetMembers.ts

@@ -5,6 +5,8 @@ import { useQuery } from "@tanstack/react-query";
 import { QueryKey } from "./type.hooks";
 import { useTranslation } from "react-i18next";
 import { createCustomErrorClass } from "@ledgerhq/errors";
+import { useLifeCycle } from "./walletSync.hooks";
+import { useEffect } from "react";
 
 export const TrustchainNotFound = createCustomErrorClass("TrustchainNotFound");
 export const MemberCredentialsNotFound = createCustomErrorClass("MemberCredentialsNotFound");
@@ -15,11 +17,11 @@ export function useGetMembers() {
   const memberCredentials = useSelector(memberCredentialsSelector);
   const { t } = useTranslation();
 
+  const errorHandler = useLifeCycle();
+
   function getMembers() {
     if (!memberCredentials) {
-      throw new MemberCredentialsNotFound(
-        t("walletSync.walletSyncActivated.errors.memberCredentials"),
-      );
+      return;
     }
 
     if (!trustchain) {
@@ -33,12 +35,20 @@ export function useGetMembers() {
     }
   }
 
-  return useQuery({
+  const memberHook = useQuery({
     queryKey: [QueryKey.getMembers, trustchain],
     queryFn: () => getMembers(),
     refetchOnMount: true,
     refetchOnReconnect: true,
     refetchOnWindowFocus: true,
     retry: false,
   });
+
+  useEffect(() => {
+    if (memberHook.isError) {
+      errorHandler.handleError(memberHook.error);
+    }
+  }, [errorHandler, memberHook.error, memberHook.isError]);
+
+  return memberHook;
 }

apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useRemoveMember.ts

@@ -0,0 +1,99 @@
+import {
+  memberCredentialsSelector,
+  setTrustchain,
+  trustchainSelector,
+} from "@ledgerhq/trustchain/store";
+import { useDispatch, useSelector } from "react-redux";
+import { useTrustchainSdk, runWithDevice } from "./useTrustchainSdk";
+import { TrustchainMember, Trustchain } from "@ledgerhq/trustchain/types";
+import { useCallback, useEffect, useState } from "react";
+import { Device } from "@ledgerhq/live-common/hw/actions/types";
+import { useNavigation } from "@react-navigation/native";
+import { ScreenName } from "~/const";
+import { StackNavigatorNavigation } from "~/components/RootNavigator/types/helpers";
+import { WalletSyncNavigatorStackParamList } from "~/components/RootNavigator/types/WalletSyncNavigator";
+
+type Props = {
+  device: Device | null;
+  member: TrustchainMember | null;
+};
+
+export function useRemoveMember({ device, member }: Props) {
+  const dispatch = useDispatch();
+  const sdk = useTrustchainSdk();
+  const trustchain = useSelector(trustchainSelector);
+  const memberCredentials = useSelector(memberCredentialsSelector);
+  const [error, setError] = useState<Error | null>(null);
+
+  const navigation = useNavigation<StackNavigatorNavigation<WalletSyncNavigatorStackParamList>>();
+  const [userDeviceInteraction, setUserDeviceInteraction] = useState(false);
+
+  // eslint-disable-next-line no-console
+  const onRetry = useCallback(() => console.log("onRetry"), []);
+  // () => dispatch(setFlow({ flow: Flow.ManageInstances, step: Step.DeviceActionInstance })),
+
+  const goToDelete = useCallback(
+    () => navigation.navigate(ScreenName.WalletSyncActivated),
+    [navigation],
+  );
+
+  // eslint-disable-next-line no-console
+  const onResetFlow = useCallback(() => console.log("onResetFlow"), []);
+  //  () => dispatch(setFlow({ flow: Flow.ManageInstances, step: Step.SynchronizedInstances })),
+
+  const transitionToNextScreen = useCallback(
+    (trustchainResult: Trustchain) => {
+      if (!member) return;
+      dispatch(setTrustchain(trustchainResult));
+      navigation.navigate(ScreenName.WalletSyncManageInstancesSuccess, {
+        member,
+      });
+    },
+    [dispatch, member, navigation],
+  );
+
+  const removeMember = useCallback(
+    async (member: TrustchainMember) => {
+      if (!device) return;
+      if (!trustchain || !memberCredentials) {
+        throw new Error("trustchain or memberCredentials is not set");
+      }
+      try {
+        await runWithDevice(device.deviceId, async transport => {
+          const newTrustchain = await sdk.removeMember(
+            transport,
+            trustchain,
+            memberCredentials,
+            member,
+            {
+              onStartRequestUserInteraction: () => setUserDeviceInteraction(true),
+              onEndRequestUserInteraction: () => setUserDeviceInteraction(false),
+            },
+          );
+
+          transitionToNextScreen(newTrustchain);
+        });
+      } catch (error) {
+        if (error instanceof Error) setError(error);
+      }
+    },
+    [device, memberCredentials, sdk, transitionToNextScreen, trustchain],
+  );
+
+  useEffect(() => {
+    if (device && device.deviceId) {
+      if (!member) {
+        onResetFlow();
+      } else {
+        removeMember(member);
+      }
+    }
+  }, [device, member, onResetFlow, onRetry, removeMember]);
+
+  return {
+    error,
+    onRetry,
+    userDeviceInteraction,
+    goToDelete,
+  };
+}

apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/walletSync.hooks.ts

@@ -0,0 +1,40 @@
+import { resetTrustchainStore } from "@ledgerhq/trustchain/store";
+import { useDispatch } from "react-redux";
+import { TrustchainEjected, TrustchainNotAllowed } from "@ledgerhq/trustchain/errors";
+import { ErrorType } from "./type.hooks";
+import { useNavigation } from "@react-navigation/native";
+import { StackNavigatorNavigation } from "~/components/RootNavigator/types/helpers";
+import { WalletSyncNavigatorStackParamList } from "~/components/RootNavigator/types/WalletSyncNavigator";
+import { ScreenName } from "~/const";
+
+export const useLifeCycle = () => {
+  const dispatch = useDispatch();
+
+  const navigation = useNavigation<StackNavigatorNavigation<WalletSyncNavigatorStackParamList>>();
+
+  function reset() {
+    dispatch(resetTrustchainStore());
+    navigation.navigate(ScreenName.WalletSyncActivationInit);
+  }
+
+  const includesErrorActions: { [key: string]: () => void } = {
+    [ErrorType.NO_TRUSTCHAIN]: () => reset(),
+  };
+
+  function handleError(error: Error) {
+    console.error("GetMember :" + error);
+
+    if (error instanceof TrustchainEjected) reset();
+    if (error instanceof TrustchainNotAllowed) reset();
+
+    const errorToHandle = Object.entries(includesErrorActions).find(([err, _action]) =>
+      error.message.includes(err),
+    );
+
+    if (errorToHandle) errorToHandle[1]();
+  }
+
+  return {
+    handleError,
+  };
+};