fix(earn): Compute total deposit amount correctly for EarnPoolInfoScr…

…een (#6104)

### Description

`totalDepositBalanceInCrypto` was being computed incorrectly if there
were earningsItems where `includedInPoolBalance` is true and they are in
a different token than the deposit token. Fixed this and added a test,
also compute `totalDepositBalanceInLocalCurrency` using
`totalDepositBalanceInCrypto` rather than doing another filter/reduce.

### Test plan

Updated unit tests and added new ones to prevent same bug in the future

### Related issues

- N/A

### Backwards compatibility

Current pools don't have any earningItems where `includedInPoolBalance`
is true so no issue, there will be a bug for older versions for Beefy
pools though if we separate out compound interest (will show incorrect
value).

### Network scalability

If a new NetworkId and/or Network are added in the future, the changes
in this PR will:

- [X] Continue to work without code changes, OR trigger a compilation
error (guaranteeing we find it when a new network is added)

src/earn/EarnPoolInfoScreen.test.tsx

@@ -224,7 +224,7 @@ describe('EarnPoolInfoScreen', () => {
     ).toBeTruthy()
     expect(
       within(getByTestId('DepositAndEarningsCard')).getByText(
-        'earnFlow.poolInfoScreen.lineItemAmountDisplay, {"localCurrencySymbol":"₱","localCurrencyAmount":"132.00","cryptoAmount":"99.00","cryptoSymbol":"USDC"}'
+        'earnFlow.poolInfoScreen.lineItemAmountDisplay, {"localCurrencySymbol":"₱","localCurrencyAmount":"131.67","cryptoAmount":"99.00","cryptoSymbol":"USDC"}'
       )
     ).toBeTruthy()
     expect(getAllByTestId('EarningItemLineItem')).toHaveLength(2)
@@ -235,6 +235,58 @@ describe('EarnPoolInfoScreen', () => {
     ).toBeTruthy()
   })
 
+  it('renders correctly when includedInPoolBalance is true for an earning item and earning item is a different token', () => {
+    const mockPool = {
+      ...mockEarnPositions[0],
+      balance: '100',
+      dataProps: {
+        ...mockEarnPositions[0].dataProps,
+        earningItems: [
+          { amount: '15', label: 'Earnings', tokenId: mockArbUsdcTokenId },
+          {
+            amount: '0.001',
+            label: 'Reward',
+            tokenId: mockArbEthTokenId,
+            includedInPoolBalance: true,
+          },
+        ],
+      },
+    }
+
+    const { getByTestId, getAllByTestId } = render(
+      <Provider store={getStore({ includeSameChainToken: true })}>
+        <MockedNavigator component={EarnPoolInfoScreen} params={{ pool: mockPool }} />
+      </Provider>
+    )
+
+    expect(
+      within(getByTestId('DepositAndEarningsCard')).getByText(
+        'earnFlow.poolInfoScreen.totalDepositAndEarnings'
+      )
+    ).toBeTruthy()
+    expect(
+      within(getByTestId('DepositAndEarningsCard')).getByText(
+        'earnFlow.poolInfoScreen.titleLocalAmountDisplay, {"localCurrencySymbol":"₱","localCurrencyAmount":"152.95"}'
+      )
+    ).toBeTruthy()
+    expect(
+      within(getByTestId('DepositAndEarningsCard')).getByText(
+        'earnFlow.poolInfoScreen.lineItemAmountDisplay, {"localCurrencySymbol":"₱","localCurrencyAmount":"131.01","cryptoAmount":"98.50","cryptoSymbol":"USDC"}'
+      )
+    ).toBeTruthy()
+    expect(getAllByTestId('EarningItemLineItem')).toHaveLength(2)
+    expect(
+      within(getAllByTestId('EarningItemLineItem')[0]).getByText(
+        'earnFlow.poolInfoScreen.lineItemAmountDisplay, {"localCurrencySymbol":"₱","localCurrencyAmount":"19.95","cryptoAmount":"15.00","cryptoSymbol":"USDC"}'
+      )
+    ).toBeTruthy()
+    expect(
+      within(getAllByTestId('EarningItemLineItem')[1]).getByText(
+        'earnFlow.poolInfoScreen.lineItemAmountDisplay, {"localCurrencySymbol":"₱","localCurrencyAmount":"2.00","cryptoAmount":"0.001","cryptoSymbol":"ETH"}'
+      )
+    ).toBeTruthy()
+  })
+
   it('navigates to external URI when "View Pool on Provider" is tapped', () => {
     const { getByText } = renderEarnPoolInfoScreen(mockEarnPositions[0])
 

src/earn/EarnPoolInfoScreen.tsx

@@ -155,12 +155,12 @@ function DepositAndEarningsCard({
   const { t } = useTranslation()
   const { balance } = earnPosition
   const { earningItems, depositTokenId, cantSeparateCompoundedInterest } = earnPosition.dataProps
-  const tokenInfo = useTokenInfo(depositTokenId)
+  const depositTokenInfo = useTokenInfo(depositTokenId)
   const localCurrencySymbol = useSelector(getLocalCurrencySymbol)
   const localCurrencyExchangeRate = useSelector(usdToLocalCurrencyRateSelector)
 
   // Deposit items used to calculate the total balance and total deposited
-  const depositBalanceInUsd = tokenInfo?.priceUsd?.multipliedBy(balance)
+  const depositBalanceInUsd = depositTokenInfo?.priceUsd?.multipliedBy(balance)
   const depositBalanceInLocalCurrency = new BigNumber(localCurrencyExchangeRate ?? 0).multipliedBy(
     depositBalanceInUsd ?? 0
   )
@@ -189,21 +189,6 @@ function DepositAndEarningsCard({
     localCurrencyExchangeRate,
   ])
 
-  const totalDepositBalanceInLocalCurrency = useMemo(() => {
-    return depositBalanceInLocalCurrency.minus(
-      earningItems
-        .filter((item) => item.includedInPoolBalance)
-        .reduce((acc, item) => {
-          const tokenInfo = earningItemsTokenInfo.find((token) => token?.tokenId === item.tokenId)
-          return acc.plus(
-            new BigNumber(item.amount)
-              .multipliedBy(tokenInfo?.priceUsd ?? 0)
-              .dividedBy(tokenInfo?.priceUsd ?? 1)
-          )
-        }, new BigNumber(0))
-    )
-  }, [depositBalanceInLocalCurrency, earningItems, earningItemsTokenInfo])
-
   const totalDepositBalanceInCrypto = useMemo(() => {
     return new BigNumber(balance).minus(
       earningItems
@@ -213,11 +198,16 @@ function DepositAndEarningsCard({
           return acc.plus(
             new BigNumber(item.amount)
               .multipliedBy(tokenInfo?.priceUsd ?? 0)
-              .dividedBy(tokenInfo?.priceUsd ?? 1)
+              .dividedBy(depositTokenInfo?.priceUsd ?? 1)
           )
         }, new BigNumber(0))
     )
-  }, [balance, earningItems, earningItemsTokenInfo])
+  }, [balance, earningItems, earningItemsTokenInfo, depositTokenInfo])
+
+  const totalDepositBalanceInLocalCurrency =
+    useDollarsToLocalAmount(
+      totalDepositBalanceInCrypto.multipliedBy(depositTokenInfo?.priceUsd ?? 0)
+    ) ?? new BigNumber(0)
 
   return (
     <View testID="DepositAndEarningsCard" style={[styles.card, styles.depositAndEarningCard]}>
@@ -257,7 +247,7 @@ function DepositAndEarningsCard({
                 localCurrencySymbol,
                 localCurrencyAmount: formatValueToDisplay(totalDepositBalanceInLocalCurrency),
                 cryptoAmount: formatValueToDisplay(totalDepositBalanceInCrypto),
-                cryptoSymbol: tokenInfo?.symbol,
+                cryptoSymbol: depositTokenInfo?.symbol,
               })}
             </Text>
           </View>