feat: ✨ (llm)add new accounts list to wallet centric screen

.changeset/fifty-toes-sit.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+Implementation of the new accounts list inside wallet centric screen.

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

@@ -1,5 +1,5 @@
 import { CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
-import { AccountLike, ProtoNFT } from "@ledgerhq/types-live";
+import { Account, AccountLike, ProtoNFT, TokenAccount } from "@ledgerhq/types-live";
 import { ScreenName } from "~/const";
 
 export type AccountsNavigatorParamList = {
@@ -39,5 +39,6 @@ export type AccountsNavigatorParamList = {
     showHeader?: boolean;
     canAddAccount?: boolean;
     isSyncEnabled?: boolean;
+    specificAccounts?: Account[] | TokenAccount[];
   };
 };

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

@@ -3973,6 +3973,7 @@
   },
   "addAccounts": {
     "addNew": "Add new",
+    "seeAllAccounts": "See all accounts",
     "addNewOrExisting": "Add new or existing account",
     "supportLinks": {
       "segwit_or_native_segwit": "Segwit or Native segwit?"

apps/ledger-live-mobile/src/newArch/features/Accounts/__integrations__/accountsListScreen.integration.test.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+import { render } from "@tests/test-renderer";
+import { State } from "~/reducers/types";
+import { MockedAccounts } from "./mockedAccounts";
+import AccountsList from "../screens/AccountsList";
+import { AccountsListNavigator } from "../screens/AccountsList/types";
+import { ScreenName } from "~/const";
+import { createStackNavigator } from "@react-navigation/stack";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const INITIAL_STATE = {
+  overrideInitialState: (state: State) => ({
+    ...state,
+    accounts: MockedAccounts,
+    settings: {
+      ...state.settings,
+      readOnlyModeEnabled: false,
+      overriddenFeatureFlags: {
+        llmAccountListUI: {
+          enabled: true,
+        },
+        llmWalletSync: {
+          enabled: true,
+          params: {
+            environment: "STAGING",
+            watchConfig: {
+              pollingInterval: 10000,
+              initialTimeout: 5000,
+              userIntentDebounce: 1000,
+            },
+          },
+        },
+      },
+    },
+  }),
+};
+
+describe("AccountsList Screen", () => {
+  const queryClient = new QueryClient();
+  const renderComponent = (params: AccountsListNavigator[ScreenName.AccountsList]) => {
+    const Stack = createStackNavigator<AccountsListNavigator>();
+
+    return render(
+      <QueryClientProvider client={queryClient}>
+        <Stack.Navigator screenOptions={{ headerShown: false }}>
+          <Stack.Screen
+            name={ScreenName.AccountsList}
+            component={AccountsList}
+            initialParams={params}
+          />
+        </Stack.Navigator>
+      </QueryClientProvider>,
+      {
+        ...INITIAL_STATE,
+      },
+    );
+  };
+
+  it("should render with canAddAccount true", () => {
+    const { getByText } = renderComponent({
+      sourceScreenName: ScreenName.AccountsList,
+      canAddAccount: true,
+    });
+    expect(getByText(/add new or existing account/i)).toBeVisible();
+  });
+
+  it("should render with showHeader true", () => {
+    const { getByText } = renderComponent({
+      sourceScreenName: ScreenName.AccountsList,
+      showHeader: true,
+    });
+    expect(getByText(/accounts/i)).toBeVisible();
+  });
+
+  it("should render with showHeader and canAddAccount true", () => {
+    const { getByText } = renderComponent({
+      sourceScreenName: ScreenName.AccountsList,
+      showHeader: true,
+      canAddAccount: true,
+    });
+    expect(getByText(/accounts/i)).toBeVisible();
+    expect(getByText(/add new or existing account/i)).toBeVisible();
+  });
+
+  it("should render the accounts list", () => {
+    const { getByText } = renderComponent({
+      sourceScreenName: ScreenName.AccountsList,
+      showHeader: true,
+      canAddAccount: true,
+    });
+    const lineaAccount = getByText(/linea 2/i);
+    const ethClassicAccount = getByText(/ethereum classic 2/i);
+    const energyWebAccount = getByText(/energy web 2/i);
+    const dogecoinAccount = getByText(/dogecoin 2/i);
+    const dashAccount = getByText(/dash 2/i);
+    const cronosAccount = getByText(/cronos 2/i);
+
+    [
+      lineaAccount,
+      ethClassicAccount,
+      energyWebAccount,
+      dogecoinAccount,
+      dashAccount,
+      cronosAccount,
+    ].forEach(account => {
+      expect(account).toBeVisible();
+    });
+  });
+
+  it("should render only the Linea account", () => {
+    const { getByText } = renderComponent({
+      sourceScreenName: ScreenName.AccountsList,
+      showHeader: true,
+      specificAccounts: [MockedAccounts.active[0]],
+    });
+
+    expect(getByText(/cronos 2/i)).toBeVisible();
+    expect(getByText(/cro accounts/i)).toBeVisible();
+  });
+
+  it("should open the add accounts drawer when there is no account specified", async () => {
+    const { getByText, user } = renderComponent({
+      sourceScreenName: ScreenName.AccountsList,
+      showHeader: true,
+      canAddAccount: true,
+    });
+
+    await user.press(getByText(/add new or existing account/i));
+    expect(getByText(/add another account/i)).toBeVisible();
+    expect(getByText(/use your ledger device/i)).toBeVisible();
+    expect(getByText(/use ledger sync/i)).toBeVisible();
+  });
+});