feat: close add account v2 multiple navigator via a confirmation draw…

…er (#8959)

.changeset/hungry-bobcats-sneeze.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+Add account v2 close process management

apps/ledger-live-mobile/src/components/ConfirmationModal.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from "react";
 import { Trans } from "react-i18next";
-import { View, StyleSheet, Image } from "react-native";
+import { View, StyleSheet, Image, StyleProp, ViewStyle } from "react-native";
 import { rgba, Theme, withTheme } from "../colors";
 import QueuedDrawer from "./QueuedDrawer";
 import LText from "./LText";
@@ -25,6 +25,8 @@ type Props = {
   preventBackdropClick?: boolean;
   iconMarginBottom?: number;
   testID?: string;
+  customTitleStyle?: StyleProp<ViewStyle>;
+  customDescriptionStyle?: StyleProp<ViewStyle>;
 };
 
 class ConfirmationModal extends PureComponent<Props> {
@@ -48,6 +50,8 @@ class ConfirmationModal extends PureComponent<Props> {
       hideRejectButton,
       colors,
       iconMarginBottom,
+      customTitleStyle,
+      customDescriptionStyle,
       ...rest
     } = this.props;
     const iColor = iconColor || colors.live;
@@ -77,12 +81,12 @@ class ConfirmationModal extends PureComponent<Props> {
           </View>
         )}
         {confirmationTitle && (
-          <LText secondary semiBold style={styles.confirmationTitle}>
+          <LText secondary semiBold style={[styles.confirmationTitle, customTitleStyle]}>
             {confirmationTitle}
           </LText>
         )}
         {confirmationDesc && (
-          <LText style={styles.confirmationDesc} color="smoke">
+          <LText style={[styles.confirmationDesc, customDescriptionStyle]} color="smoke">
             {confirmationDesc}
           </LText>
         )}

apps/ledger-live-mobile/src/components/NavigationHeaderCloseButton.tsx

@@ -1,4 +1,4 @@
-import { Flex, IconsLegacy } from "@ledgerhq/native-ui";
+import { Button, Flex, IconsLegacy } from "@ledgerhq/native-ui";
 import { ParamListBase, useNavigation } from "@react-navigation/native";
 import { StackNavigationProp } from "@react-navigation/stack";
 import React, { useCallback, useState } from "react";
@@ -78,6 +78,9 @@ type AdvancedProps = {
   confirmationDesc?: React.ReactNode;
   onClose?: () => void;
   rounded?: boolean;
+  showButton?: boolean;
+  buttonText?: string;
+  customDrawerStyle?: Record<string, unknown>;
 };
 
 /**
@@ -96,6 +99,9 @@ export const NavigationHeaderCloseButtonAdvanced: React.FC<AdvancedProps> = Reac
     confirmationDesc,
     onClose = emptyFunction,
     rounded = false,
+    showButton = false,
+    buttonText,
+    customDrawerStyle,
   }) => {
     const navigation = useNavigation();
     const [isConfirmationModalOpened, setIsConfirmationModalOpened] = useState(false);
@@ -157,13 +163,21 @@ export const NavigationHeaderCloseButtonAdvanced: React.FC<AdvancedProps> = Reac
       setIsConfirmationModalOpened(false);
     }, [close]);
 
+    const renderCloseElement = useCallback(() => {
+      if (showButton && buttonText)
+        return (
+          <Button size="large" testID="button-create-account" onPress={onPress}>
+            {buttonText}
+          </Button>
+        );
+
+      if (rounded) return <NavigationHeaderCloseButtonRounded onPress={onPress} color={color} />;
+      else return <NavigationHeaderCloseButton onPress={onPress} color={color} />;
+    }, [buttonText, showButton, onPress, rounded, color]);
+
     return (
       <>
-        {rounded ? (
-          <NavigationHeaderCloseButtonRounded onPress={onPress} color={color} />
-        ) : (
-          <NavigationHeaderCloseButton onPress={onPress} color={color} />
-        )}
+        {renderCloseElement()}
 
         {withConfirmation && (
           <ConfirmationModal
@@ -173,6 +187,8 @@ export const NavigationHeaderCloseButtonAdvanced: React.FC<AdvancedProps> = Reac
             confirmationTitle={confirmationTitle}
             confirmationDesc={confirmationDesc}
             onModalHide={onModalHide}
+            customTitleStyle={customDrawerStyle?.title ?? {}}
+            customDescriptionStyle={customDrawerStyle?.description ?? {}}
           />
         )}
       </>

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

@@ -3991,7 +3991,11 @@
     },
     "quitConfirmation": {
       "title": "Cancel add account",
-      "desc": "Are you sure you want to cancel adding accounts?"
+      "desc": "Are you sure you want to cancel adding accounts?",
+      "v2": {
+        "title": "Cancel adding account?",
+        "desc": "No account wll be added to Ledger Live."
+      }
     },
     "imported": "Asset added successfully",
     "added": "Account added to your portfolio",

apps/ledger-live-mobile/src/newArch/components/CloseWithConfirmation/index.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Trans } from "react-i18next";
+import { useRoute } from "@react-navigation/native";
+import { NavigationHeaderCloseButtonAdvanced } from "~/components/NavigationHeaderCloseButton";
+import { ScreenName } from "~/const";
+
+const routesWithConfirmation: string[] = [
+  ScreenName.SelectDevice,
+  ScreenName.SelectNetwork,
+  ScreenName.AddAccountsSelectCrypto,
+  ScreenName.ScanDeviceAccounts,
+  ScreenName.NoAssociatedAccounts,
+];
+export default function CloseWithConfirmation({
+  onClose,
+  showButton,
+  buttonText,
+}: {
+  onClose?: () => void;
+  showButton?: boolean;
+  buttonText?: string;
+}) {
+  const route = useRoute();
+  return (
+    <NavigationHeaderCloseButtonAdvanced
+      withConfirmation={routesWithConfirmation.includes(route.name)}
+      confirmationTitle={<Trans i18nKey="addAccounts.quitConfirmation.v2.title" />}
+      confirmationDesc={<Trans i18nKey="addAccounts.quitConfirmation.v2.desc" />}
+      {...(onClose && { onClose })}
+      {...(showButton && { showButton })}
+      {...(buttonText && { buttonText })}
+      customDrawerStyle={{
+        title: {
+          textAlign: "left",
+          fontSize: 24,
+          fontWeight: 600,
+          lineHeight: 32.4,
+          letterSpacing: -0.72,
+        },
+        description: {
+          textAlign: "left",
+          paddingHorizontal: 0,
+          fontSize: 14,
+          fontWeight: 500,
+          lineHeight: 21,
+        },
+      }}
+    />
+  );
+}

apps/ledger-live-mobile/src/newArch/features/Accounts/Navigator.tsx

@@ -7,7 +7,6 @@ import { ScreenName } from "~/const";
 import { getStackNavigatorConfig } from "~/navigation/navigatorConfig";
 import { track } from "~/analytics";
 import type { NetworkBasedAddAccountNavigator } from "LLM/features/Accounts/screens/AddAccount/types";
-import { NavigationHeaderCloseButtonAdvanced } from "~/components/NavigationHeaderCloseButton";
 import ScanDeviceAccounts from "LLM/features/Accounts/screens/ScanDeviceAccounts";
 import { AccountsListNavigator } from "./screens/AccountsList/types";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
@@ -17,24 +16,30 @@ import AddAccountsSuccess from "./screens/AddAccountSuccess";
 import SelectAccounts from "./screens/SelectAccounts";
 import AddAccountsWarning from "./screens/AddAccountWarning";
 import NoAssociatedAccountsView from "./screens/NoAssociatedAccountsView";
+import CloseWithConfirmation from "LLM/components/CloseWithConfirmation";
+import { StackNavigatorNavigation } from "~/components/RootNavigator/types/helpers";
+import { BaseNavigatorStackParamList } from "~/components/RootNavigator/types/BaseNavigator";
 
 export default function Navigator() {
   const { colors } = useTheme();
   const route = useRoute();
   const accountListUIFF = useFeature("llmAccountListUI");
-  const navigation = useNavigation();
+  const navigation = useNavigation<StackNavigatorNavigation<BaseNavigatorStackParamList>>();
 
   const onClose = useCallback(() => {
     track("button_clicked", {
       button: "Close",
       screen: route.name,
     });
-  }, [route]);
+    const rootParent = navigation.getParent();
+    // this is the only way to go back to the root navigator
+    navigation.replace(rootParent?.getState().routeNames[0] as keyof BaseNavigatorStackParamList);
+  }, [route, navigation]);
 
   const stackNavigationConfig = useMemo(
     () => ({
       ...getStackNavigatorConfig(colors, true),
-      headerRight: () => <NavigationHeaderCloseButtonAdvanced onClose={onClose} />,
+      headerRight: () => <CloseWithConfirmation onClose={onClose} />,
     }),
     [colors, onClose],
   );
@@ -90,6 +95,9 @@ export default function Navigator() {
           headerLeft: () => null,
           headerTransparent: true,
         }}
+        initialParams={{
+          onCloseNavigation: onClose,
+        }}
       />
       <Stack.Screen
         name={ScreenName.AddAccountsWarning}
@@ -99,15 +107,21 @@ export default function Navigator() {
           headerLeft: () => null,
           headerTransparent: true,
         }}
+        initialParams={{
+          onCloseNavigation: onClose,
+        }}
       />
       <Stack.Screen
         name={ScreenName.NoAssociatedAccounts}
         component={NoAssociatedAccountsView}
         options={{
           headerTitle: "",
-          headerLeft: () => null,
+          headerLeft: () => <NavigationHeaderBackButton onPress={onPressBack} />,
           headerTransparent: true,
         }}
+        initialParams={{
+          onCloseNavigation: onClose,
+        }}
       />
     </Stack.Navigator>
   );

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/types.ts

@@ -7,6 +7,7 @@ import { Props as TouchableProps } from "~/components/Touchable";
 type CommonParams = {
   context?: "addAccounts" | "receiveFunds";
   onSuccess?: () => void;
+  onCloseNavigation?: () => void;
   currency: CryptoOrTokenCurrency;
 };
 export type NetworkBasedAddAccountNavigator = {
@@ -27,7 +28,7 @@ export type NetworkBasedAddAccountNavigator = {
     emptyAccount?: Account;
     emptyAccountName?: string;
   };
-  [ScreenName.NoAssociatedAccounts]: {
+  [ScreenName.NoAssociatedAccounts]: Pick<CommonParams, "onCloseNavigation"> & {
     CustomNoAssociatedAccounts: ({
       style,
     }: {

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccountSuccess/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, Icons, rgba, Text } from "@ledgerhq/native-ui";
+import { Flex, Icons, rgba, Text } from "@ledgerhq/native-ui";
 import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -25,6 +25,7 @@ import { getCurrencyColor } from "@ledgerhq/live-common/currencies/index";
 import { useNavigation } from "@react-navigation/core";
 import useAnimatedStyle from "../ScanDeviceAccounts/components/ScanDeviceAccountsFooter/useAnimatedStyle";
 import AddFundsButton from "../../components/AddFundsButton";
+import CloseWithConfirmation from "LLM/components/CloseWithConfirmation";
 
 type Props = BaseComposite<
   StackNavigatorProps<NetworkBasedAddAccountNavigator, ScreenName.AddAccountsSuccess>
@@ -46,7 +47,7 @@ export default function AddAccountsSuccess({ route }: Props) {
     [navigation],
   );
 
-  const { currency, accountsToAdd } = route.params || {};
+  const { currency, accountsToAdd, onCloseNavigation } = route.params || {};
 
   const renderItem = useCallback(
     ({ item }: ListRenderItemInfo<AccountLikeEnhanced>) => (
@@ -98,9 +99,11 @@ export default function AddAccountsSuccess({ route }: Props) {
       </Flex>
       <Flex mb={insets.bottom + 2} px={6} rowGap={6}>
         <AddFundsButton accounts={accountsToAdd} currency={currency} />
-        <Button size="large" testID="button-create-account">
-          {t("addAccounts.addAccountsSuccess.ctaClose")}
-        </Button>
+        <CloseWithConfirmation
+          showButton
+          buttonText={t("addAccounts.addAccountsSuccess.ctaClose")}
+          onClose={onCloseNavigation}
+        />
       </Flex>
     </SafeAreaView>
   );

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccountWarning/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { Button, Flex, Icons, rgba, Text } from "@ledgerhq/native-ui";
+import { Flex, Icons, rgba, Text } from "@ledgerhq/native-ui";
 import { useTranslation } from "react-i18next";
 import { Animated, StyleSheet, TouchableOpacity, View } from "react-native";
 import { useTheme } from "styled-components/native";
@@ -16,6 +16,7 @@ import BigNumber from "bignumber.js";
 import { useNavigation } from "@react-navigation/core";
 import useAnimatedStyle from "../ScanDeviceAccounts/components/ScanDeviceAccountsFooter/useAnimatedStyle";
 import AddFundsButton from "../../components/AddFundsButton";
+import CloseWithConfirmation from "LLM/components/CloseWithConfirmation";
 type Props = BaseComposite<
   StackNavigatorProps<NetworkBasedAddAccountNavigator, ScreenName.AddAccountsWarning>
 >;
@@ -36,7 +37,7 @@ export default function AddAccountsWarning({ route }: Props) {
     },
     [navigation],
   );
-  const { emptyAccount, emptyAccountName, currency } = route.params || {};
+  const { emptyAccount, emptyAccountName, currency, onCloseNavigation } = route.params || {};
 
   const statusColor = colors.warning.c70;
 
@@ -85,9 +86,11 @@ export default function AddAccountsWarning({ route }: Props) {
       </Flex>
       <Flex mb={insets.bottom + 2} px={6} rowGap={6}>
         <AddFundsButton accounts={[emptyAccount as Account]} currency={currency} />
-        <Button size="large" testID="button-create-account">
-          {t("addAccounts.addAccountsSuccess.ctaClose")}
-        </Button>
+        <CloseWithConfirmation
+          showButton
+          buttonText={t("addAccounts.addAccountsSuccess.ctaClose")}
+          onClose={onCloseNavigation}
+        />
       </Flex>
     </SafeAreaView>
   );

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/NoAssociatedAccountsView/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Icons, rgba, Button } from "@ledgerhq/native-ui";
+import { Flex, Icons, rgba } from "@ledgerhq/native-ui";
 import { StyleSheet, View } from "react-native";
 import { useTheme } from "styled-components/native";
 import SafeAreaView from "~/components/SafeAreaView";
@@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next";
 import { BaseComposite, StackNavigatorProps } from "~/components/RootNavigator/types/helpers";
 import { NetworkBasedAddAccountNavigator } from "../AddAccount/types";
 import { ScreenName } from "~/const";
+import CloseWithConfirmation from "LLM/components/CloseWithConfirmation";
 
 type Props = BaseComposite<
   StackNavigatorProps<NetworkBasedAddAccountNavigator, ScreenName.NoAssociatedAccounts>
@@ -18,7 +19,7 @@ export default function NoAssociatedAccountsView({ route }: Props) {
   const { colors } = useTheme();
   const insets = useSafeAreaInsets();
   const { t } = useTranslation();
-  const { CustomNoAssociatedAccounts } = route.params || {};
+  const { CustomNoAssociatedAccounts, onCloseNavigation } = route.params || {};
 
   const statusColor = colors.primary.c70;
   return (
@@ -48,9 +49,11 @@ export default function NoAssociatedAccountsView({ route }: Props) {
         {<CustomNoAssociatedAccounts />}
       </Flex>
       <Flex mb={insets.bottom + 2} px={6} rowGap={6}>
-        <Button size="large" testID="button-create-account">
-          {t("addAccounts.addAccountsSuccess.ctaClose")}
-        </Button>
+        <CloseWithConfirmation
+          showButton
+          buttonText={t("addAccounts.addAccountsSuccess.ctaClose")}
+          onClose={onCloseNavigation}
+        />
       </Flex>
     </SafeAreaView>
   );

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/ScanDeviceAccounts/useScanDeviceAccountsViewModel.ts

@@ -43,6 +43,7 @@ export default function useScanDeviceAccountsViewModel({
     device: { deviceId },
     inline,
     returnToSwap,
+    onCloseNavigation,
   } = route.params || {};
 
   const newAccountSchemes = useMemo(() => {
@@ -292,5 +293,6 @@ export default function useScanDeviceAccountsViewModel({
     viewAllCreatedAccounts,
     returnToSwap,
     currency,
+    onCloseNavigation,
   };
 }