feat(llm): change components archi

apps/ledger-live-mobile/src/newArch/features/WalletSync/drawers/components/ActionRow.tsx → apps/ledger-live-mobile/src/newArch/components/ActionRow/index.tsx

@@ -2,8 +2,14 @@ import { Flex, Text } from "@ledgerhq/native-ui";
 import React from "react";
 import Touchable from "~/components/Touchable";
 import styled from "styled-components/native";
-import { AddAccountDrawerRowProps } from "LLM/features/WalletSync/types/addAccountDrawer";
 
+type ActionRowProps = {
+  title: string;
+  description?: string;
+  icon: React.ReactNode;
+  testID?: string;
+  onPress?: () => void;
+};
 const TouchableCard = styled(Touchable)`
   background-color: ${p => p.theme.colors.opacityDefault.c05};
   border-radius: 8px;
@@ -25,13 +31,13 @@ const CardDescription = styled(Text)`
   line-height: 18.2px;
 `;
 
-const ActionRow: React.FC<AddAccountDrawerRowProps> = ({
+const ActionRow: React.FC<ActionRowProps> = ({
   title,
   description,
   icon,
   testID,
   onPress,
-}: AddAccountDrawerRowProps) => {
+}: ActionRowProps) => {
   return (
     <TouchableCard onPress={onPress} testID={testID}>
       {icon}

apps/ledger-live-mobile/src/newArch/features/WalletSync/drawers/DummyDrawer.tsx → apps/ledger-live-mobile/src/newArch/components/Dummy/Drawer.tsx

@@ -7,12 +7,12 @@ type Props = {
   handleClose: () => void;
 };
 
-const DummyDrawer = ({ isOpen, handleClose }: Props) => {
+const Drawer = ({ isOpen, handleClose }: Props) => {
   return (
     <QueuedDrawer isRequestingToBeOpened={isOpen} onClose={handleClose}>
       <Text>{"Dummy Drawer"}</Text>
     </QueuedDrawer>
   );
 };
 
-export default DummyDrawer;
+export default Drawer;

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

@@ -0,0 +1,69 @@
+import { useSelector } from "react-redux";
+import { BaseNavigation } from "~/components/RootNavigator/types/helpers";
+import { readOnlyModeEnabledSelector } from "~/reducers/settings";
+import { useNavigation } from "@react-navigation/native";
+import { NavigatorName } from "~/const";
+import { useCallback, useMemo, useState } from "react";
+import { track } from "~/analytics";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import { AddAccountScreenProps } from "LLM/features/Accounts/types/addAccount";
+
+const useAddAccount = ({ currency, onClose }: AddAccountScreenProps) => {
+  const navigation = useNavigation<BaseNavigation>();
+  const walletSyncFeatureFlag = useFeature("llmWalletSync");
+
+  const isReadOnlyModeEnabled = useSelector(readOnlyModeEnabledSelector);
+  const isWalletSyncEnabled = walletSyncFeatureFlag?.enabled;
+  const hasCurrency = !!currency;
+
+  const [isWalletSyncDrawerVisible, setWalletSyncDrawerVisible] = useState(false);
+
+  const navigationParams = useMemo(() => {
+    return hasCurrency
+      ? currency.type === "TokenCurrency"
+        ? { token: currency }
+        : { currency }
+      : {};
+  }, [hasCurrency, currency]);
+
+  const trackButtonClick = useCallback((button: string) => {
+    track("button_clicked", {
+      button,
+      drawer: "AddAccountsModal",
+    });
+  }, []);
+
+  const onClickImport = useCallback(() => {
+    trackButtonClick("Import from Desktop");
+    onClose?.();
+    navigation.navigate(NavigatorName.ImportAccounts);
+  }, [navigation, trackButtonClick, onClose]);
+
+  const onClickAdd = useCallback(() => {
+    trackButtonClick("With your Ledger");
+    onClose?.();
+    navigation.navigate(NavigatorName.AddAccounts, navigationParams);
+  }, [navigation, navigationParams, trackButtonClick, onClose]);
+
+  const onClickWalletSync = useCallback(() => {
+    trackButtonClick("With Wallet Sync");
+    onClose?.();
+    setWalletSyncDrawerVisible(true);
+  }, [trackButtonClick, setWalletSyncDrawerVisible, onClose]);
+
+  const onCloseWalletSyncDrawer = useCallback(() => {
+    setWalletSyncDrawerVisible(false);
+  }, [setWalletSyncDrawerVisible]);
+
+  return {
+    isWalletSyncEnabled,
+    isReadOnlyModeEnabled,
+    isWalletSyncDrawerVisible,
+    onClickAdd,
+    onClickImport,
+    onClickWalletSync,
+    onCloseWalletSyncDrawer,
+  };
+};
+
+export default useAddAccount;

apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useAddAccountDrawer.tsx → apps/ledger-live-mobile/src/newArch/features/Accounts/hooks/useAddAccountDrawer.tsx

@@ -6,7 +6,7 @@ import { NavigatorName } from "~/const";
 import { useCallback, useMemo, useState } from "react";
 import { track } from "~/analytics";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
-import { AddAccountDrawerProps } from "LLM/features/WalletSync/types/addAccountDrawer";
+import { AddAccountDrawerProps } from "LLM/features/Accounts/types/addAccountDrawer";
 
 const useAddAccountDrawer = ({
   isOpened,

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/components/SelectAddAccountMethod/index.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import useAddAccount from "LLM/features/Accounts/hooks/useAddAccount";
+import { Flex, Icons, Text } from "@ledgerhq/native-ui";
+import ActionRow from "LLM/components/ActionRow";
+import { AddAccountScreenProps } from "LLM/features/Accounts/types/addAccount";
+
+const SelectAddAccountMethod = ({
+  currency,
+  doesNotHaveAccount,
+  onClose,
+  setWalletSyncDrawerVisible,
+}: AddAccountScreenProps) => {
+  const { t } = useTranslation();
+  const rows = [];
+
+  const { isWalletSyncEnabled, isReadOnlyModeEnabled, onClickAdd, onClickImport } = useAddAccount({
+    currency,
+    doesNotHaveAccount,
+    onClose,
+  });
+
+  if (!isReadOnlyModeEnabled) {
+    rows.push({
+      titleKey: "addAccountsModal.drawer.add.title",
+      descriptionKey: "addAccountsModal.drawer.add.description",
+      onPress: onClickAdd,
+      icon: <Icons.LedgerDevices color={"primary.c80"} />,
+      testID: "add-accounts-modal-add-button",
+    });
+  }
+  if (isWalletSyncEnabled) {
+    rows.push({
+      titleKey: "addAccountsModal.drawer.walletSync.title",
+      descriptionKey: "addAccountsModal.drawer.walletSync.description",
+      onPress: setWalletSyncDrawerVisible,
+      icon: <Icons.QrCode color={"primary.c80"} />,
+    });
+  } else {
+    rows.push({
+      titleKey: "addAccountsModal.drawer.import.title",
+      descriptionKey: "addAccountsModal.drawer.import.description",
+      onPress: onClickImport,
+      icon: <Icons.QrCode color={"primary.c80"} />,
+    });
+  }
+
+  return (
+    <>
+      <Text variant="h4" fontWeight="semiBold" fontSize="24px" mb={16}>
+        {doesNotHaveAccount
+          ? t("addAccountsModal.title")
+          : t("addAccountsModal.drawer.drawerTitleHasAccount")}
+      </Text>
+      <Text variant="large" fontWeight="medium" fontSize="14px" color="neutral.c70" mb="32px">
+        {t("addAccountsModal.drawer.drawerSubTitle")}
+      </Text>
+      <Flex flexDirection="column" rowGap={16}>
+        {rows.map((row, index) => (
+          <ActionRow
+            key={index}
+            title={t(row.titleKey)}
+            description={t(row.descriptionKey)}
+            onPress={row.onPress}
+            icon={row.icon}
+            testID={row.testID}
+          />
+        ))}
+      </Flex>
+    </>
+  );
+};
+
+export default SelectAddAccountMethod;

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

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import useAddAccountDrawer from "~/newArch/features/Accounts/hooks/useAddAccountDrawer";
+import QueuedDrawer from "~/components/QueuedDrawer";
+import { TrackScreen } from "~/analytics";
+import SelectAddAccountMethod from "./components/SelectAddAccountMethod";
+import { AddAccountDrawerProps } from "LLM/features/Accounts/types/addAccountDrawer";
+import Drawer from "LLM/components/Dummy/Drawer";
+
+const AddAccountDrawer = ({
+  isOpened,
+  currency,
+  doesNotHaveAccount,
+  onClose,
+  reopenDrawer,
+}: AddAccountDrawerProps) => {
+  const { isAddAccountDrawerVisible, onCloseAddAccountDrawer } = useAddAccountDrawer({
+    isOpened,
+    currency,
+    onClose,
+    reopenDrawer,
+  });
+
+  const [isWalletSyncDrawerVisible, setWalletSyncDrawerVisible] = useState(false);
+
+  const onWalletSyncOpen = () => {
+    onCloseAddAccountDrawer();
+    setWalletSyncDrawerVisible(true);
+  };
+
+  const onCloseWalletSyncDrawer = () => {
+    setWalletSyncDrawerVisible(false);
+    reopenDrawer();
+  };
+
+  return (
+    <>
+      <QueuedDrawer
+        isRequestingToBeOpened={isAddAccountDrawerVisible}
+        onClose={onCloseAddAccountDrawer}
+      >
+        <TrackScreen category="Add/Import accounts" type="drawer" />
+        <SelectAddAccountMethod
+          doesNotHaveAccount={doesNotHaveAccount}
+          currency={currency}
+          onClose={onCloseAddAccountDrawer}
+          setWalletSyncDrawerVisible={onWalletSyncOpen}
+        />
+      </QueuedDrawer>
+      <Drawer isOpen={isWalletSyncDrawerVisible} handleClose={onCloseWalletSyncDrawer} />
+    </>
+  );
+};
+
+export default AddAccountDrawer;

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

@@ -0,0 +1,8 @@
+import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
+
+export type AddAccountScreenProps = {
+  currency?: CryptoCurrency | TokenCurrency | null;
+  doesNotHaveAccount?: boolean;
+  onClose?: () => void;
+  setWalletSyncDrawerVisible?: () => void;
+};

apps/ledger-live-mobile/src/newArch/features/WalletSync/types/addAccountDrawer.ts → apps/ledger-live-mobile/src/newArch/features/Accounts/types/addAccountDrawer.ts

@@ -1,5 +1,4 @@
 import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
-import Touchable from "~/components/Touchable";
 
 export type AddAccountDrawerProps = {
   isOpened: boolean;
@@ -8,11 +7,3 @@ export type AddAccountDrawerProps = {
   onClose: () => void;
   reopenDrawer: () => void;
 };
-
-export type AddAccountDrawerRowProps = {
-  title: string;
-  description?: string;
-  icon: React.ReactNode;
-  testID?: string;
-  onPress: React.ComponentProps<typeof Touchable>["onPress"];
-};

apps/ledger-live-mobile/src/screens/Accounts/AddAccount.tsx

@@ -4,7 +4,7 @@ import { PlusMedium } from "@ledgerhq/native-ui/assets/icons";
 import { findCryptoCurrencyById, findTokenById } from "@ledgerhq/live-common/currencies/index";
 import Touchable from "~/components/Touchable";
 import { track } from "~/analytics";
-import AddAccountDrawer from "LLM/features/WalletSync/drawers/addAccount";
+import AddAccountDrawer from "LLM/features/Accounts/screens/AddAccount";
 
 function AddAccount({ currencyId }: { currencyId?: string }) {
   const currency = currencyId

apps/ledger-live-mobile/src/screens/Assets/index.tsx

@@ -21,7 +21,7 @@ import globalSyncRefreshControl from "~/components/globalSyncRefreshControl";
 import { Asset } from "~/types/asset";
 import { ScreenName } from "~/const";
 import { blacklistedTokenIdsSelector } from "~/reducers/settings";
-import AddAccountDrawer from "LLM/features/WalletSync/drawers/addAccount";
+import AddAccountDrawer from "LLM/features/Accounts/screens/AddAccount";
 
 const List = globalSyncRefreshControl<FlatListProps<Asset>>(FlatList);