feat(llm): new add account drawer on assets screen with WS entrypoint

.changeset/cool-dingos-explode.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Create a new drawer component on add account on assets screen. This new drawer has new UI and an entry point to walletSync. This entrypoint is hidden under a feature flag

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

@@ -2288,6 +2288,18 @@
     "import": {
       "title": "Import from desktop",
       "description": "Import asset from Ledger Live Desktop"
+    },
+    "assetsScreen": {
+      "drawerTitle": "Add another account",
+      "drawerSubTitle": "Add your assets using your Ledger, or import them directly from your Ledger Live Desktop app.",
+      "add": {
+        "title": "Add with your Ledger",
+        "description": "Create or import your assets using your Ledger device"
+      },
+      "walletSync": {
+        "title": "Import via another Ledger Live app",
+        "description": "Activate Ledger Sync"
+      }
     }
   },
   "byteSize": {

apps/ledger-live-mobile/src/newArch/features/WalletSync/drawers/addAccount/AddAccountDrawerRow.tsx

@@ -0,0 +1,47 @@
+import { Flex, Text } from "@ledgerhq/native-ui";
+import React from "react";
+import Touchable from "~/components/Touchable";
+import styled from "styled-components/native";
+
+const Card = styled(Flex)`
+  background-color: ${p => p.theme.colors.opacityDefault.c05};
+  border-radius: 8px;
+  padding: 16px;
+  align-items: center;
+  gap: 12px;
+  flex-direction: row;
+  align-self: stretch;
+`;
+
+const CardTitle = styled(Text)`
+  font-size: 16px;
+  color: ${p => p.theme.colors.neutral.c100};
+`;
+
+const CardDescription = styled(Text)`
+  font-size: 14px;
+  color: ${p => p.theme.colors.neutral.c70};
+  line-height: 18.2px;
+`;
+
+type AddAccountDrawerRowProps = {
+  title: string;
+  description: string;
+  icon?: React.ReactNode;
+  onPress?: React.ComponentProps<typeof Touchable>["onPress"];
+};
+
+const AddAccountDrawerRow = ({ title, description, icon, onPress }: AddAccountDrawerRowProps) => {
+  return (
+    <Touchable onPress={onPress}>
+      <Card>
+        {icon}
+        <Flex flexDirection={"column"} rowGap={4} flex={1}>
+          <CardTitle>{title}</CardTitle>
+          <CardDescription>{description}</CardDescription>
+        </Flex>
+      </Card>
+    </Touchable>
+  );
+};
+export default AddAccountDrawerRow;

apps/ledger-live-mobile/src/newArch/features/WalletSync/drawers/addAccount/index.tsx

@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from "react";
+import useAddAccountDrawer from "LLM/features/WalletSync/hooks/useAddAccountDrawer";
+import DummyDrawer from "../DummyDrawer";
+import AddAccountDrawerRow from "./AddAccountDrawerRow";
+import QueuedDrawer from "~/components/QueuedDrawer";
+import { useTranslation } from "react-i18next";
+import { TrackScreen } from "~/analytics";
+import { Flex, Icons, Text } from "@ledgerhq/native-ui";
+
+/** This drawer component should be only used in assets screen */
+
+type AddAccountDrawerProps = {
+  isOpened: boolean;
+  onClose: () => void;
+  reopenDrawer: () => void;
+};
+
+const AddAccountDrawer = ({ isOpened, onClose, reopenDrawer }: AddAccountDrawerProps) => {
+  const { t } = useTranslation();
+  const rows = [];
+
+  const {
+    isWalletSyncEnabled,
+    isReadOnlyModeEnabled,
+    isAddAccountDrawerVisible,
+    isWalletSyncDrawerVisible,
+    onClickAdd,
+    onClickImport,
+    onClickWalletSync,
+    onCloseAddAccountDrawer,
+    onCloseWalletSyncDrawer,
+  } = useAddAccountDrawer({ isOpened, onClose, reopenDrawer });
+
+  if (!isReadOnlyModeEnabled) {
+    rows.push({
+      titleKey: "addAccountsModal.assetsScreen.add.title",
+      descriptionKey: "addAccountsModal.assetsScreen.add.description",
+      onPress: onClickAdd,
+      icon: <Icons.LedgerDevices color={"primary.c80"} />,
+    });
+  }
+
+  if (isWalletSyncEnabled) {
+    rows.push({
+      titleKey: "addAccountsModal.assetsScreen.walletSync.title",
+      descriptionKey: "addAccountsModal.assetsScreen.walletSync.description",
+      onPress: onClickWalletSync,
+      icon: <Icons.QrCode color={"primary.c80"} />,
+    });
+  } else {
+    rows.push({
+      titleKey: "addAccountsModal.import.title",
+      descriptionKey: "addAccountsModal.import.description",
+      onPress: onClickImport,
+      icon: <Icons.QrCode color={"primary.c80"} />,
+    });
+  }
+
+  return (
+    <>
+      <QueuedDrawer
+        isRequestingToBeOpened={isAddAccountDrawerVisible}
+        onClose={onCloseAddAccountDrawer}
+      >
+        <TrackScreen category="Add/Import accounts" type="drawer" />
+        <Text variant="h4" fontWeight="semiBold" fontSize="24px" mb={16}>
+          {t("addAccountsModal.assetsScreen.drawerTitle")}
+        </Text>
+        <Text variant="large" fontWeight="medium" fontSize="14px" color="neutral.c70" mb="32px">
+          {t("addAccountsModal.assetsScreen.drawerSubTitle")}
+        </Text>
+        <Flex flexDirection="column" rowGap={16}>
+          {rows.map((row, index) => (
+            <AddAccountDrawerRow
+              key={index}
+              title={t(row.titleKey)}
+              description={t(row.descriptionKey)}
+              onPress={row.onPress}
+              icon={row.icon}
+            />
+          ))}
+        </Flex>
+      </QueuedDrawer>
+      <DummyDrawer isOpen={isWalletSyncDrawerVisible} handleClose={onCloseWalletSyncDrawer} />
+    </>
+  );
+};
+
+export default AddAccountDrawer;

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

@@ -0,0 +1,73 @@
+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, useState } from "react";
+import { track } from "~/analytics";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+
+type AddAccountDrawerProps = {
+  isOpened: boolean;
+  onClose: () => void;
+  reopenDrawer: () => void;
+};
+
+const useAddAccountDrawer = ({ isOpened, onClose, reopenDrawer }: AddAccountDrawerProps) => {
+  const navigation = useNavigation<BaseNavigation>();
+  const walletSyncFeatureFlag = useFeature("llmWalletSync");
+
+  const isReadOnlyModeEnabled = useSelector(readOnlyModeEnabledSelector);
+  const isWalletSyncEnabled = walletSyncFeatureFlag?.enabled;
+
+  const [isWalletSyncDrawerVisible, setWalletSyncDrawerVisible] = useState(false);
+
+  const trackButtonClick = useCallback((button: string) => {
+    track("button_clicked", {
+      button,
+      drawer: "AddAccountsModal",
+    });
+  }, []);
+
+  const onClickImport = useCallback(() => {
+    trackButtonClick("Import from Desktop");
+    onClose();
+    navigation.navigate(NavigatorName.ImportAccounts);
+  }, [trackButtonClick, navigation, onClose]);
+
+  const onClickAdd = useCallback(() => {
+    trackButtonClick("With your Ledger");
+    onClose();
+    navigation.navigate(NavigatorName.AddAccounts);
+  }, [trackButtonClick, navigation, onClose]);
+
+  const onClickWalletSync = useCallback(() => {
+    trackButtonClick("With Wallet Sync");
+    onClose();
+    setWalletSyncDrawerVisible(true);
+  }, [trackButtonClick, onClose]);
+
+  const onCloseAddAccountDrawer = useCallback(() => {
+    trackButtonClick("Close 'x'");
+    onClose();
+  }, [trackButtonClick, onClose]);
+
+  const onCloseWalletSyncDrawer = useCallback(() => {
+    setWalletSyncDrawerVisible(false);
+    reopenDrawer();
+  }, [setWalletSyncDrawerVisible, reopenDrawer]);
+
+  return {
+    isWalletSyncEnabled,
+    isReadOnlyModeEnabled,
+    isAddAccountDrawerVisible: isOpened,
+    isWalletSyncDrawerVisible,
+    onClickAdd,
+    onClickImport,
+    onClickWalletSync,
+    onCloseAddAccountDrawer,
+    onCloseWalletSyncDrawer,
+  };
+};
+
+export default useAddAccountDrawer;

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

@@ -7,6 +7,7 @@ import Touchable from "~/components/Touchable";
 import AddAccountsModal from "../AddAccounts/AddAccountsModal";
 import { track } from "~/analytics";
 import { BaseNavigation } from "~/components/RootNavigator/types/helpers";
+import AddAccountDrawer from "LLM/features/WalletSync/drawers/addAccount";
 
 function AddAccount({ currencyId }: { currencyId?: string }) {
   const navigation = useNavigation<BaseNavigation>();
@@ -26,6 +27,10 @@ function AddAccount({ currencyId }: { currencyId?: string }) {
     setIsAddModalOpened(false);
   }
 
+  function reoponAddModal() {
+    setIsAddModalOpened(true);
+  }
+
   return (
     <Touchable event="OpenAddAccountModal" onPress={openAddModal} testID="OpenAddAccountModal">
       <Flex
@@ -39,12 +44,20 @@ function AddAccount({ currencyId }: { currencyId?: string }) {
       >
         <PlusMedium size={20} color={"neutral.c00"} />
       </Flex>
-      <AddAccountsModal
-        navigation={navigation}
-        isOpened={isAddModalOpened}
-        onClose={closeAddModal}
-        currency={currency}
-      />
+      {currency && isAddModalOpened ? (
+        <AddAccountsModal
+          navigation={navigation}
+          isOpened={isAddModalOpened}
+          onClose={closeAddModal}
+          currency={currency}
+        />
+      ) : (
+        <AddAccountDrawer
+          isOpened={isAddModalOpened}
+          onClose={closeAddModal}
+          reopenDrawer={reoponAddModal}
+        />
+      )}
     </Touchable>
   );
 }

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

@@ -18,11 +18,10 @@ import AssetRow, { NavigationProp } from "../WalletCentricAsset/AssetRow";
 import Spinning from "~/components/Spinning";
 import AssetsNavigationHeader from "./AssetsNavigationHeader";
 import globalSyncRefreshControl from "~/components/globalSyncRefreshControl";
-import AddAccountsModal from "../AddAccounts/AddAccountsModal";
-import { BaseNavigation } from "~/components/RootNavigator/types/helpers";
 import { Asset } from "~/types/asset";
 import { ScreenName } from "~/const";
 import { blacklistedTokenIdsSelector } from "~/reducers/settings";
+import AddAccountDrawer from "LLM/features/WalletSync/drawers/addAccount";
 
 const List = globalSyncRefreshControl<FlatListProps<Asset>>(FlatList);
 
@@ -66,6 +65,8 @@ function Assets() {
 
   const closeAddModal = useCallback(() => setAddModalOpened(false), [setAddModalOpened]);
 
+  const reoponAddModal = useCallback(() => setAddModalOpened(true), [setAddModalOpened]);
+
   const renderItem = useCallback(
     ({ item }: { item: Asset }) => (
       <AssetRow asset={item} navigation={navigation} sourceScreenName={ScreenName.Assets} />
@@ -117,10 +118,10 @@ function Assets() {
             />
           </Flex>
         </Flex>
-        <AddAccountsModal
-          navigation={navigation as unknown as BaseNavigation}
+        <AddAccountDrawer
           isOpened={isAddModalOpened}
           onClose={closeAddModal}
+          reopenDrawer={reoponAddModal}
         />
       </SafeAreaView>
     </ReactNavigationPerformanceView>