🐛 fix(llm) account item wrong balance

Author: LucasWerey

.changeset/witty-camels-juggle.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+Fix accountItem that was using spendableBalance instead of balance

apps/ledger-live-mobile/src/components/SelectableAccountsList.tsx

@@ -319,7 +319,10 @@ const SelectableAccount = ({
             padding="8px"
             columnGap={8}
           >
-            <AccountItem account={account as Account} balance={account.spendableBalance} />
+            <AccountItem
+              account={account as Account}
+              balance={useFullBalance ? account.balance : account.spendableBalance}
+            />
           </Flex>
         ) : (
           <Flex flex={1}>

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

@@ -6,6 +6,7 @@ import AccountsList from "../screens/AccountsList";
 import { AccountsListNavigator } from "../screens/AccountsList/types";
 import { ScreenName } from "~/const";
 import { createStackNavigator } from "@react-navigation/stack";
+
 const INITIAL_STATE = {
   overrideInitialState: (state: State) => ({
     ...state,
@@ -33,6 +34,11 @@ const INITIAL_STATE = {
   }),
 };
 
+jest.mock("@ledgerhq/live-countervalues-react", () => ({
+  ...jest.requireActual("@ledgerhq/live-countervalues-react"),
+  useCalculate: ({ value }: { value: number }) => value,
+}));
+
 describe("AccountsList Screen", () => {
   const renderComponent = (params: AccountsListNavigator[ScreenName.AccountsList]) => {
     const Stack = createStackNavigator<AccountsListNavigator>();
@@ -78,7 +84,7 @@ describe("AccountsList Screen", () => {
   });
 
   it("should render the accounts list", () => {
-    const { getByText } = renderComponent({
+    const { getByText, getAllByTestId, getAllByText, queryByText } = renderComponent({
       sourceScreenName: ScreenName.AccountsList,
       showHeader: true,
       canAddAccount: true,
@@ -100,6 +106,14 @@ describe("AccountsList Screen", () => {
     ].forEach(account => {
       expect(account).toBeVisible();
     });
+
+    // check the rendered balance
+    // for a proprer check we should find a way to setup live-countervalues-react for jest
+    expect(getAllByTestId("account-balance").length).toBe(6);
+    // check that we well display the full balance
+    expect(getAllByText(/\$8,331,578.60/i).length).toBe(6);
+    // check that we don't display the spendable balance
+    expect(queryByText(/\$3.20/i)).toBeNull();
   });
 
   it("should render only the Linea account", () => {

apps/ledger-live-mobile/src/newArch/features/Accounts/__integrations__/mockedAccounts.ts

@@ -15,7 +15,7 @@ export const MockedAccounts: AccountsState = {
       blockHeight: 157668,
       creationDate: new Date("2024-11-13T12:20:06.444Z"),
       balance: BigNumber("83315786").multipliedBy(10),
-      spendableBalance: BigNumber("83315786").multipliedBy(10),
+      spendableBalance: BigNumber("32").multipliedBy(10),
       operations: [],
       operationsCount: 117,
       pendingOperations: [],
@@ -99,7 +99,7 @@ export const MockedAccounts: AccountsState = {
       blockHeight: 109869,
       creationDate: new Date("2024-11-13T12:20:06.444Z"),
       balance: BigNumber("83315786").multipliedBy(10),
-      spendableBalance: BigNumber("83315786").multipliedBy(10),
+      spendableBalance: BigNumber("123").multipliedBy(10),
       operations: [],
       operationsCount: 74,
       pendingOperations: [],
@@ -191,7 +191,7 @@ export const MockedAccounts: AccountsState = {
       blockHeight: 128411,
       creationDate: new Date("2024-11-13T12:20:06.444Z"),
       balance: BigNumber("83315786").multipliedBy(10),
-      spendableBalance: BigNumber("83315786").multipliedBy(10),
+      spendableBalance: BigNumber("329").multipliedBy(10),
       operations: [],
       operationsCount: 62,
       pendingOperations: [],
@@ -298,7 +298,7 @@ export const MockedAccounts: AccountsState = {
       blockHeight: 120593,
       creationDate: new Date("2024-11-13T12:20:06.444Z"),
       balance: BigNumber("83315786").multipliedBy(10),
-      spendableBalance: BigNumber("83315786").multipliedBy(10),
+      spendableBalance: BigNumber("3932").multipliedBy(10),
       operations: [],
       operationsCount: 95,
       pendingOperations: [],
@@ -387,7 +387,7 @@ export const MockedAccounts: AccountsState = {
       blockHeight: 132056,
       creationDate: new Date("2024-11-13T12:20:06.444Z"),
       balance: BigNumber("83315786").multipliedBy(10),
-      spendableBalance: BigNumber("83315786").multipliedBy(10),
+      spendableBalance: BigNumber("3223").multipliedBy(10),
       operations: [],
       operationsCount: 184,
       pendingOperations: [],
@@ -528,7 +528,7 @@ export const MockedAccounts: AccountsState = {
       blockHeight: 175413,
       creationDate: new Date("2024-11-13T12:20:06.444Z"),
       balance: BigNumber("83315786").multipliedBy(10),
-      spendableBalance: BigNumber("83315786").multipliedBy(10),
+      spendableBalance: BigNumber("877").multipliedBy(10),
       operations: [],
       operationsCount: 180,
       pendingOperations: [],

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

@@ -30,7 +30,7 @@ const AccountListDrawer = ({ isOpen, onClose, data, onPressAccount }: AccountLis
       return (
         <TouchableOpacity key={account.id} onPress={() => onPressAccount(account)}>
           <Flex flexDirection="row" alignItems="center" padding={3} width={343}>
-            <AccountItem account={account} balance={account.spendableBalance} showUnit />
+            <AccountItem account={account} balance={account.balance} showUnit />
           </Flex>
         </TouchableOpacity>
       );

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

@@ -20,7 +20,7 @@ const CustomHeader = ({ account, onClose, backgroundColor, iconColor }: Props) =
       borderBottom={5}
       borderBottomColor={"neutral.c30"}
     >
-      <AccountItem account={account} balance={account.spendableBalance} hideBalanceInfo />
+      <AccountItem account={account} balance={account.balance} hideBalanceInfo />
       <Flex alignItems="flex-end">
         <TouchableOpacity onPress={onClose}>
           <Flex

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

@@ -17,6 +17,7 @@ const View: React.FC<ViewProps> = ({
   unit,
   showUnit,
   hideBalanceInfo,
+  withPlaceholder,
 }) => (
   <>
     <Flex flex={1} rowGap={2} flexShrink={1} testID={`accountItem-${accountName}`}>
@@ -45,8 +46,13 @@ const View: React.FC<ViewProps> = ({
     </Flex>
     {!hideBalanceInfo && (
       <Flex justifyContent="center" alignItems="flex-end">
-        <Text variant="large" fontWeight="semiBold" color="neutral.c100" testID="asset-balance">
-          <CounterValue currency={currency} value={balance} joinFragmentsSeparator="" />
+        <Text variant="large" fontWeight="semiBold" color="neutral.c100" testID="account-balance">
+          <CounterValue
+            currency={currency}
+            value={balance}
+            joinFragmentsSeparator=""
+            withPlaceholder={withPlaceholder}
+          />
         </Text>
         {showUnit && (
           <Text variant="body" fontWeight="medium" color="neutral.c70">

apps/ledger-live-mobile/src/newArch/features/Accounts/components/AccountsListView/components/AccountItem/useAccountItemModel.ts

@@ -17,9 +17,16 @@ export interface AccountItemProps {
   balance: BigNumber;
   showUnit?: boolean;
   hideBalanceInfo?: boolean;
+  withPlaceholder?: boolean;
 }
 
-const useAccountItemModel = ({ account, balance, showUnit, hideBalanceInfo }: AccountItemProps) => {
+const useAccountItemModel = ({
+  account,
+  balance,
+  showUnit,
+  hideBalanceInfo,
+  withPlaceholder,
+}: AccountItemProps) => {
   const allAccount = useSelector(accountsSelector);
   const isTokenAccount = isTokenAccountChecker(account);
   const currency = getAccountCurrency(account);
@@ -46,6 +53,7 @@ const useAccountItemModel = ({ account, balance, showUnit, hideBalanceInfo }: Ac
     unit,
     showUnit,
     hideBalanceInfo,
+    withPlaceholder,
   };
 };
 

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

@@ -35,7 +35,7 @@ const View: React.FC<ViewProps> = ({
         onPress={onAccountPress.bind(null, item)}
       >
         <Flex height={40} flexDirection="row" columnGap={12}>
-          <AccountItem account={item} balance={item.spendableBalance} />
+          <AccountItem account={item} balance={item.balance} withPlaceholder />
         </Flex>
       </Pressable>
     ),

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

@@ -70,7 +70,7 @@ export default function AddAccountsSuccess({ route }: Props) {
             padding="12px"
             width={343}
           >
-            <AccountItem account={item as Account} balance={item.spendableBalance} />
+            <AccountItem account={item as Account} balance={item.balance} />
             <Icons.ChevronRight size="M" color={colors.primary.c100} />
           </Flex>
         </TouchableOpacity>

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

@@ -93,7 +93,7 @@ export default function AddAccountsWarning({ route }: Props) {
             >
               <AccountItem
                 account={emptyAccount as Account}
-                balance={emptyAccount?.spendableBalance as BigNumber}
+                balance={emptyAccount?.balance || BigNumber(0)}
               />
               <Icons.ChevronRight size="M" color={colors.primary.c100} />
             </Flex>