feat: add user earning history graph and list on history button click (…

…#12746)

## **Description**

This PR adds a pooled staking user rewards history button to the asset
detail page for ETH. This button leads to a bar chart graph of the user
rewards over a 2 year period. A user can switch to 7D, M or Y to get 7
days, monthly or yearly data in the graph and can select different bars
to see the amount of that bar's time period in the chart header. Default
view with no selected bars shows the total amount of rewards earned.


1. What is the reason for the change?

To add a chart view for the user to look at their historical rewards in
detail

2. What is the improvement/solution?

A chart view has been added that will allow the user to look at their
historical rewards in detail

## **Related issues**

[Fixes:](https://consensyssoftware.atlassian.net/browse/STAKE-705)

## **Manual testing steps**

- Go to the asset view for eth by clicking on eth or staked eth in the
token list on the home page
- Note the total rewards on the asset detail page, it should be the same
as in the chart
- Click the button for earnings history where staking details are to see
the chart, it should load
- If there is any delay, there should be placeholders for the loading
state
- If there is an error and there is no data for some reason, the loading
state is currently the default
- The chart should show the total rewards and when you click on a bar
that bar should become highlighted and stay highlighted until clicked
again or until another bar is clicked. When highlighted the graph should
show that bars info and that info should match the history list
- In the chart, we do not skip zero amount time periods
- In the list we do skip tailing zero amount time period but not any
that are in between time periods with amounts
- Clicking each time period in the top of the chart should switch the
data to that time period and unselect any selected bar
- The chart should be fairly quick to load and use and there should be
no lagging actions

## **Screenshots/Recordings**

### **Before**

No chart or button n/a

### **After**


https://github.com/user-attachments/assets/750e6dc3-7055-48a2-a579-d76242e10c3e

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: Matthew Grainger <46547583+Matt561@users.noreply.github.com>

app/components/UI/AssetOverview/Balance/Balance.tsx

@@ -6,8 +6,10 @@ import { useStyles } from '../../../../component-library/hooks';
 import styleSheet from './Balance.styles';
 import AssetElement from '../../AssetElement';
 import { useSelector } from 'react-redux';
-import { selectNetworkName } from '../../../../selectors/networkInfos';
-import { selectChainId } from '../../../../selectors/networkController';
+import {
+  selectChainId,
+  selectNetworkConfigurationByChainId,
+} from '../../../../selectors/networkController';
 import {
   getTestNetImageByChainId,
   getDefaultNetworkByChainId,
@@ -35,6 +37,7 @@ import {
   UnpopularNetworkList,
   CustomNetworkImgMapping,
 } from '../../../../util/networks/customNetworks';
+import { RootState } from '../../../../reducers';
 
 interface BalanceProps {
   asset: TokenI;
@@ -91,7 +94,9 @@ export const NetworkBadgeSource = (chainId: Hex, ticker: string) => {
 const Balance = ({ asset, mainBalance, secondaryBalance }: BalanceProps) => {
   const { styles } = useStyles(styleSheet, {});
   const navigation = useNavigation();
-  const networkName = useSelector(selectNetworkName);
+  const networkConfigurationByChainId = useSelector((state: RootState) =>
+    selectNetworkConfigurationByChainId(state, asset.chainId as Hex),
+  );
   const chainId = useSelector(selectChainId);
 
   const tokenChainId = isPortfolioViewEnabled() ? asset.chainId : chainId;
@@ -156,7 +161,7 @@ const Balance = ({ asset, mainBalance, secondaryBalance }: BalanceProps) => {
             <Badge
               variant={BadgeVariant.Network}
               imageSource={NetworkBadgeSource(tokenChainId as Hex, ticker)}
-              name={networkName || ''}
+              name={networkConfigurationByChainId?.name}
             />
           }
         >

app/components/UI/Stake/Views/StakeEarningsHistoryView/StakeEarningsHistoryView.styles.ts

@@ -0,0 +1,19 @@
+import type { Theme } from '../../../../../util/theme/models';
+import { StyleSheet } from 'react-native';
+
+const stylesSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+  const { colors } = theme;
+
+  return StyleSheet.create({
+    mainContainer: {
+      flexGrow: 1,
+      paddingTop: 8,
+      paddingHorizontal: 16,
+      backgroundColor: colors.background.default,
+      justifyContent: 'space-between',
+    },
+  });
+};
+
+export default stylesSheet;

app/components/UI/Stake/Views/StakeEarningsHistoryView/StakeEarningsHistoryView.test.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import StakeEarningsHistoryView from './StakeEarningsHistoryView';
+import useStakingEarningsHistory from '../../hooks/useStakingEarningsHistory';
+import { MOCK_STAKED_ETH_ASSET } from '../../__mocks__/mockData';
+import { fireLayoutEvent } from '../../../../../util/testUtils/react-native-svg-charts';
+import { getStakingNavbar } from '../../../Navbar';
+import renderWithProvider from '../../../../../util/test/renderWithProvider';
+import { backgroundState } from '../../../../../util/test/initial-root-state';
+import { Hex } from '@metamask/utils';
+
+jest.mock('../../../Navbar');
+jest.mock('../../hooks/useStakingEarningsHistory');
+
+const mockNavigation = {
+  navigate: jest.fn(),
+  setOptions: jest.fn(),
+};
+
+jest.mock('@react-navigation/native', () => {
+  const actualNav = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualNav,
+    useNavigation: () => mockNavigation,
+    useRoute: () => ({
+      key: '1',
+      name: 'params',
+      params: { asset: MOCK_STAKED_ETH_ASSET },
+    }),
+  };
+});
+jest.mock('react-native-svg-charts', () => {
+  const reactNativeSvgCharts = jest.requireActual('react-native-svg-charts'); // Get the actual Grid component
+  return {
+    ...reactNativeSvgCharts,
+    Grid: () => <></>,
+  };
+});
+
+(useStakingEarningsHistory as jest.Mock).mockReturnValue({
+  earningsHistory: [
+    {
+      dateStr: '2023-01-01',
+      dailyRewards: '1000000000000000000',
+      sumRewards: '1000000000000000000',
+    },
+    {
+      dateStr: '2023-01-02',
+      dailyRewards: '1000000000000000000',
+      sumRewards: '2000000000000000000',
+    },
+  ],
+  isLoading: false,
+  error: null,
+});
+
+const mockInitialState = {
+  settings: {},
+  engine: {
+    backgroundState: {
+      ...backgroundState,
+      CurrencyRateController: {
+        currentCurrency: 'usd',
+        currencyRates: {
+          ETH: {
+            conversionRate: 3363.79,
+          },
+        },
+      },
+      NetworkController: {
+        selectedNetworkClientId: 'selectedNetworkClientId',
+        networkConfigurationsByChainId: {
+          '0x1': {
+            nativeCurrency: 'ETH',
+            chainId: '0x1' as Hex,
+            rpcEndpoints: [
+              {
+                networkClientId: 'selectedNetworkClientId',
+              },
+            ],
+            defaultRpcEndpointIndex: 0,
+          },
+        },
+      },
+    },
+  },
+};
+
+const earningsHistoryView = <StakeEarningsHistoryView />;
+
+describe('StakeEarningsHistoryView', () => {
+  it('renders correctly and matches snapshot', () => {
+    const renderedView = renderWithProvider(earningsHistoryView, {
+      state: mockInitialState,
+    });
+    fireLayoutEvent(renderedView.root);
+    expect(renderedView.toJSON()).toMatchSnapshot();
+  });
+
+  it('calls navigation setOptions to get staking navigation bar', () => {
+    const renderedView = renderWithProvider(earningsHistoryView, {
+      state: mockInitialState,
+    });
+    fireLayoutEvent(renderedView.root);
+    expect(mockNavigation.setOptions).toHaveBeenCalled();
+    expect(getStakingNavbar).toHaveBeenCalled();
+  });
+});

app/components/UI/Stake/Views/StakeEarningsHistoryView/StakeEarningsHistoryView.tsx

@@ -0,0 +1,44 @@
+import { useNavigation, useRoute } from '@react-navigation/native';
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+import { strings } from '../../../../../../locales/i18n';
+import { useStyles } from '../../../../hooks/useStyles';
+import { getStakingNavbar } from '../../../Navbar';
+import StakingEarningsHistory from '../../components/StakingEarnings/StakingEarningsHistory/StakingEarningsHistory';
+import styleSheet from './StakeEarningsHistoryView.styles';
+import { StakeEarningsHistoryViewRouteParams } from './StakeEarningsHistoryView.types';
+
+const StakeEarningsHistoryView = () => {
+  const navigation = useNavigation();
+  const route = useRoute<StakeEarningsHistoryViewRouteParams>();
+  const { styles, theme } = useStyles(styleSheet, {});
+  const { asset } = route.params;
+
+  useEffect(() => {
+    navigation.setOptions(
+      getStakingNavbar(
+        strings('stake.earnings_history_title', {
+          ticker: asset.ticker,
+        }),
+        navigation,
+        theme.colors,
+        {
+          backgroundColor: theme.colors.background.default,
+          hasCancelButton: false,
+          hasBackButton: true,
+        },
+      ),
+    );
+  }, [navigation, theme.colors, asset.ticker]);
+
+  return (
+    <ScrollView contentContainerStyle={styles.mainContainer}>
+      <View>
+        <StakingEarningsHistory asset={asset} />
+      </View>
+    </ScrollView>
+  );
+};
+
+export default StakeEarningsHistoryView;

app/components/UI/Stake/Views/StakeEarningsHistoryView/StakeEarningsHistoryView.types.ts

@@ -0,0 +1,9 @@
+import { TokenI } from '../../../Tokens/types';
+
+export interface StakeEarningsHistoryViewRouteParams {
+  key: string;
+  name: string;
+  params: {
+    asset: TokenI;
+  };
+}