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/screens/AddAccount/components/SelectAddAccountMethod/index.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import useSelectAddAccountMethodViewModel from "./useSelectAddAccountMethod";
+import { Flex, Icons, Text } from "@ledgerhq/native-ui";
+import ActionRow from "LLM/components/ActionRow";
+import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
+
+type ViewProps = {
+  isWalletSyncEnabled: boolean | undefined;
+  isReadOnlyModeEnabled: boolean;
+  doesNotHaveAccount?: boolean;
+  onClickAdd: () => void;
+  onClickImport: () => void;
+  setWalletSyncDrawerVisible?: () => void;
+};
+
+type AddAccountScreenProps = {
+  currency?: CryptoCurrency | TokenCurrency | null;
+  doesNotHaveAccount?: boolean;
+  onClose?: () => void;
+  setWalletSyncDrawerVisible?: () => void;
+};
+
+function View({
+  isWalletSyncEnabled,
+  isReadOnlyModeEnabled,
+  onClickAdd,
+  onClickImport,
+  setWalletSyncDrawerVisible,
+  doesNotHaveAccount,
+}: ViewProps) {
+  const { t } = useTranslation();
+  const rows = [];
+
+  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>
+    </>
+  );
+}
+
+const SelectAddAccountMethod = (props: AddAccountScreenProps) => {
+  return <View {...useSelectAddAccountMethodViewModel(props)} {...props} />;
+};
+
+export default SelectAddAccountMethod;

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

@@ -0,0 +1,74 @@
+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 { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
+
+type AddAccountScreenProps = {
+  currency?: CryptoCurrency | TokenCurrency | null;
+  onClose?: () => void;
+};
+
+const useSelectAddAccountMethodViewModel = ({ 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 useSelectAddAccountMethodViewModel;

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

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import useAddAccountViewModel from "./useAddAccountViewModel";
+import QueuedDrawer from "~/components/QueuedDrawer";
+import { TrackScreen } from "~/analytics";
+import SelectAddAccountMethod from "./components/SelectAddAccountMethod";
+import Drawer from "LLM/components/Dummy/Drawer";
+import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
+
+type ViewProps = {
+  isAddAccountDrawerVisible: boolean;
+  doesNotHaveAccount?: boolean;
+  currency?: CryptoCurrency | TokenCurrency | null;
+  onCloseAddAccountDrawer: () => void;
+  reopenDrawer: () => void;
+};
+
+type AddAccountProps = {
+  isOpened: boolean;
+  currency?: CryptoCurrency | TokenCurrency | null;
+  doesNotHaveAccount?: boolean;
+  onClose: () => void;
+  reopenDrawer: () => void;
+};
+
+function View({
+  isAddAccountDrawerVisible,
+  doesNotHaveAccount,
+  currency,
+  onCloseAddAccountDrawer,
+  reopenDrawer,
+}: ViewProps) {
+  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} />
+    </>
+  );
+}
+
+const AddAccount = (props: AddAccountProps) => {
+  return <View {...useAddAccountViewModel(props)} {...props} />;
+};
+
+export default AddAccount;

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

@@ -6,9 +6,16 @@ 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 { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
 
-const useAddAccountDrawer = ({
+type AddAccountDrawerProps = {
+  isOpened: boolean;
+  currency?: CryptoCurrency | TokenCurrency | null;
+  onClose: () => void;
+  reopenDrawer: () => void;
+};
+
+const useAddAccountViewModel = ({
   isOpened,
   currency,
   onClose,
@@ -79,4 +86,4 @@ const useAddAccountDrawer = ({
   };
 };
 
-export default useAddAccountDrawer;
+export default useAddAccountViewModel;