feat: ✨ (llm): new accounts and assets lists portfolio

.changeset/curvy-ladybugs-collect.md

@@ -0,0 +1,6 @@
+---
+"live-mobile": minor
+"@ledgerhq/native-ui": minor
+---
+
+Create a new tabSelector component inside native ui. Rename the existing one in DrawerTabSelector since it's used only in a drawer. Integration of the new assets/accounts lists in wallet screen

apps/ledger-live-mobile/__tests__/jest-setup.js

@@ -117,6 +117,11 @@ jest.mock("react-native-reanimated", () => {
 // Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
 jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
 
+jest.mock("~/analytics", () => ({
+  ...jest.requireActual("~/analytics"),
+  track: jest.fn(),
+}));
+
 jest.mock("@react-native-firebase/messaging", () => ({
   messaging: jest.fn(() => ({
     hasPermission: jest.fn(() => Promise.resolve(true)),

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

@@ -304,6 +304,7 @@ export type BaseNavigatorStackParamList = {
 
   [NavigatorName.AnalyticsOptInPrompt]: NavigatorScreenParams<AnalyticsOptInPromptNavigatorParamList>;
   [ScreenName.MockedAddAssetButton]: undefined;
+  [ScreenName.MockedWalletScreen]: undefined;
 
   // WALLET SYNC
   [NavigatorName.WalletSync]: NavigatorScreenParams<WalletSyncNavigatorStackParamList>;

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

@@ -529,6 +529,7 @@ export enum ScreenName {
   LedgerSyncDeepLinkHandler = "LedgerSyncDeepLinkHandler",
 
   MockedAddAssetButton = "MockedAddAssetButton",
+  MockedWalletScreen = "MockedWalletScreen",
   GenericLandingPage = "GenericLandingPage",
 
   // Web3Hub

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

@@ -2342,7 +2342,8 @@
       "seeMarket": "See all"
     },
     "walletBalance": "Wallet balance",
-    "seelAllAssets": "See All Assets",
+    "seeAllAssets": "See all assets",
+    "seeAllAccounts": "See all accounts",
     "marketPriceSection": {
       "title": "{{currencyTicker}} market price",
       "currencyPrice": "1 {{currencyTicker}} price",

apps/ledger-live-mobile/src/newArch/features/Accounts/components/AccountsListView/index.tsx

@@ -6,6 +6,8 @@ import { Flex } from "@ledgerhq/native-ui";
 import { Pressable } from "react-native";
 import AccountItem from "./components/AccountItem";
 import globalSyncRefreshControl from "~/components/globalSyncRefreshControl";
+import { withDiscreetMode } from "~/context/DiscreetModeContext";
+import isEqual from "lodash/isEqual";
 
 const ESTIMED_ITEM_SIZE = 150;
 
@@ -50,4 +52,4 @@ const AccountsListView: React.FC<Props> = props => {
   return <View {...viewModel} />;
 };
 
-export default AccountsListView;
+export default React.memo(withDiscreetMode(AccountsListView), isEqual);

apps/ledger-live-mobile/src/newArch/features/Accounts/components/AddAccountButton/index.tsx

@@ -20,12 +20,16 @@ const StyledPressable = styled(Pressable)`
   column-gap: 12px;
 `;
 
-const AddAccountButton: React.FC = () => {
+type Props = {
+  sourceScreenName: string;
+};
+
+const AddAccountButton: React.FC<Props> = ({ sourceScreenName }) => {
   const { t } = useTranslation();
   const [isAddModalOpened, setAddModalOpened] = useState<boolean>(false);
 
   const openAddModal = () => {
-    track("button_clicked", { button: "add a new account", page: "Accounts" });
+    track("button_clicked", { button: "Add a new account", page: sourceScreenName });
     setAddModalOpened(true);
   };
   const closeAddModal = () => setAddModalOpened(false);

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

@@ -49,7 +49,7 @@ export default function AccountsList({ route }: Props) {
               </Text>
             </Flex>
           )}
-          {canAddAccount && <AddAccountButton />}
+          {canAddAccount && <AddAccountButton sourceScreenName="Accounts" />}
           <AccounstListView sourceScreenName={sourceScreenName} isSyncEnabled={isSyncEnabled} />
         </SafeAreaView>
       </ReactNavigationPerformanceView>

apps/ledger-live-mobile/src/newArch/features/Assets/components/AssetsListView/index.tsx

@@ -7,6 +7,8 @@ import AssetItem from "./components/AssetItem";
 import { Asset } from "~/types/asset";
 import BigNumber from "bignumber.js";
 import globalSyncRefreshControl from "~/components/globalSyncRefreshControl";
+import { withDiscreetMode } from "~/context/DiscreetModeContext";
+import isEqual from "lodash/isEqual";
 
 const ESTIMED_ITEM_SIZE = 150;
 
@@ -53,4 +55,4 @@ const AssetsListView: React.FC<Props> = props => {
   return <View {...viewModel} />;
 };
 
-export default AssetsListView;
+export default React.memo(withDiscreetMode(AssetsListView), isEqual);

apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/Synchronize/QrCodeMethod.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, TabSelector } from "@ledgerhq/native-ui";
+import { DrawerTabSelector, Flex } from "@ledgerhq/native-ui";
 import QrCode from "LLM/features/WalletSync/components/Synchronize/QrCode";
 import ScanQrCode from "../../components/Synchronize/ScanQrCode";
 import { Options, OptionsType } from "LLM/features/WalletSync/types/Activation";
@@ -59,7 +59,7 @@ const QrCodeMethod = ({
 
   return (
     <Flex flexDirection={"column"} alignItems={"center"} rowGap={24} width={"100%"} height={"100%"}>
-      <TabSelector
+      <DrawerTabSelector
         options={[Options.SCAN, Options.SHOW_QR]}
         selectedOption={currentOption}
         handleSelectOption={handleSelectOption}

apps/ledger-live-mobile/src/screens/Portfolio/PortfolioAssets.tsx

@@ -1,24 +1,33 @@
-import { Button, IconsLegacy } from "@ledgerhq/native-ui";
-import { useNavigation } from "@react-navigation/native";
 import React, { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import { useStartProfiler } from "@shopify/react-native-performance";
 import { GestureResponderEvent } from "react-native";
+import Animated from "react-native-reanimated";
+import { useNavigation } from "@react-navigation/native";
+import { Button, IconsLegacy, Box, Flex, TabSelector } from "@ledgerhq/native-ui";
 import { useDistribution } from "~/actions/general";
-import { TrackScreen } from "~/analytics";
+import { track, TrackScreen } from "~/analytics";
 import { NavigatorName, ScreenName } from "~/const";
-import { Box } from "@ledgerhq/native-ui";
 import { blacklistedTokenIdsSelector, discreetModeSelector } from "~/reducers/settings";
 import Assets from "./Assets";
 import PortfolioQuickActionsBar from "./PortfolioQuickActionsBar";
 import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import AccountsListView from "LLM/features/Accounts/components/AccountsListView";
+import AssetsListView from "LLM/features/Assets/components/AssetsListView";
+import AddAccountButton from "LLM/features/Accounts/components/AddAccountButton";
+import useListsAnimation from "./useListsAnimation";
 
 type Props = {
   hideEmptyTokenAccount: boolean;
   openAddModal: () => void;
 };
 
+export const TAB_OPTIONS = {
+  Assets: "Assets",
+  Accounts: "Accounts",
+} as const;
+
 const maxAssetsToDisplay = 5;
 
 const PortfolioAssets = ({ hideEmptyTokenAccount, openAddModal }: Props) => {
@@ -49,9 +58,31 @@ const PortfolioAssets = ({ hideEmptyTokenAccount, openAddModal }: Props) => {
     [distribution, blacklistedTokenIdsSet],
   );
 
-  const goToAssets = useCallback(
+  const { selectedTab, handleToggle, handleLayout, assetsAnimatedStyle, accountsAnimatedStyle } =
+    useListsAnimation(TAB_OPTIONS.Assets);
+
+  const showAssets = selectedTab === TAB_OPTIONS.Assets;
+  const showAccounts = selectedTab === TAB_OPTIONS.Accounts;
+
+  const onPressButton = useCallback(
     (uiEvent: GestureResponderEvent) => {
       startNavigationTTITimer({ source: ScreenName.Portfolio, uiEvent });
+      track("button_clicked", {
+        button: showAssets ? "See all assets" : "See all accounts",
+        page: "Wallet",
+      });
+      if (!showAssets && isAccountListUIEnabled) {
+        navigation.navigate(NavigatorName.Accounts, {
+          screen: ScreenName.AccountsList,
+          params: {
+            sourceScreenName: ScreenName.Portfolio,
+            showHeader: true,
+            canAddAccount: true,
+            isSyncEnabled: true,
+          },
+        });
+        return;
+      }
       if (isAccountListUIEnabled) {
         navigation.navigate(NavigatorName.Assets, {
           screen: ScreenName.AssetsList,
@@ -67,20 +98,49 @@ const PortfolioAssets = ({ hideEmptyTokenAccount, openAddModal }: Props) => {
         });
       }
     },
-    [startNavigationTTITimer, isAccountListUIEnabled, navigation],
+    [startNavigationTTITimer, showAssets, isAccountListUIEnabled, navigation],
   );
 
+  const showAddAccountButton =
+    isAccountListUIEnabled && showAccounts && distribution.list.length >= maxAssetsToDisplay;
+
   return (
     <>
       <TrackScreen
         category="Wallet"
         accountsLength={distribution.list && distribution.list.length}
         discreet={discreetMode}
       />
-      <Box mb={24} mt={18}>
+      <Box my={24}>
         <PortfolioQuickActionsBar />
       </Box>
-      <Assets assets={assetsToDisplay} />
+      {isAccountListUIEnabled ? (
+        <>
+          <Box height={40} mb={16}>
+            <TabSelector
+              labels={[t("assets.title"), t("accounts.title")]}
+              onToggle={handleToggle}
+            />
+          </Box>
+          <Flex flexDirection="row" overflow="hidden" onLayout={handleLayout} width="200%">
+            <Animated.View style={[{ flex: 1 }, assetsAnimatedStyle]}>
+              <AssetsListView
+                sourceScreenName={ScreenName.Portfolio}
+                limitNumberOfAssets={maxAssetsToDisplay}
+              />
+            </Animated.View>
+            <Animated.View style={[{ flex: 1 }, accountsAnimatedStyle]}>
+              <AccountsListView
+                sourceScreenName={ScreenName.Portfolio}
+                limitNumberOfAccounts={maxAssetsToDisplay}
+              />
+            </Animated.View>
+          </Flex>
+        </>
+      ) : (
+        <Assets assets={assetsToDisplay} />
+      )}
+      {showAddAccountButton ? <AddAccountButton sourceScreenName="Wallet" /> : null}
       {distribution.list.length < maxAssetsToDisplay ? (
         <Button
           type="shade"
@@ -94,8 +154,8 @@ const PortfolioAssets = ({ hideEmptyTokenAccount, openAddModal }: Props) => {
           {t("account.emptyState.addAccountCta")}
         </Button>
       ) : (
-        <Button type="shade" size="large" outline mt={6} onPress={goToAssets}>
-          {t("portfolio.seelAllAssets")}
+        <Button type="shade" size="large" outline onPress={onPressButton}>
+          {showAssets ? t("portfolio.seeAllAssets") : t("portfolio.seeAllAccounts")}
         </Button>
       )}
     </>

apps/ledger-live-mobile/src/screens/Portfolio/ReadOnly/index.tsx

@@ -118,7 +118,7 @@ function ReadOnlyPortfolio({ navigation }: NavigationProps) {
       <Box background={colors.background.main} px={6} mt={6} key="Assets">
         <Assets assets={assetsToDisplay} />
         <Button type="shade" size="large" outline mt={6} onPress={goToAssets}>
-          {t("portfolio.seelAllAssets")}
+          {t("portfolio.seeAllAssets")}
         </Button>
       </Box>,
       ...(!hasOrderedNano