feat: STAKE-822 build your balance component

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

@@ -26,6 +26,9 @@ import Text, {
 } from '../../../../component-library/components/Texts/Text';
 import { TokenI } from '../../Tokens/types';
 import { useNavigation } from '@react-navigation/native';
+import { isPooledStakingFeatureEnabled } from '../../Stake/constants';
+import StakingBalance from '../../Stake/components/StakingBalance/StakingBalance';
+
 interface BalanceProps {
   asset: TokenI;
   mainBalance: string;
@@ -86,6 +89,7 @@ const Balance = ({ asset, mainBalance, secondaryBalance }: BalanceProps) => {
           {asset.name || asset.symbol}
         </Text>
       </AssetElement>
+      {isPooledStakingFeatureEnabled() && asset?.isETH && <StakingBalance />}
     </View>
   );
 };

app/components/UI/Stake/components/StakingBalance/StakingBalance.styles.ts

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+
+const styleSheet = () =>
+  StyleSheet.create({
+    container: {
+      paddingHorizontal: 16,
+    },
+    badgeWrapper: {
+      alignSelf: 'center',
+    },
+    balances: {
+      flex: 1,
+      justifyContent: 'center',
+      marginLeft: 20,
+      alignSelf: 'center',
+    },
+    ethLogo: {
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+      overflow: 'hidden',
+    },
+    bannerStyles: {
+      marginVertical: 8,
+    },
+    buttonsContainer: {
+      paddingTop: 8,
+    },
+  });
+
+export default styleSheet;

app/components/UI/Stake/components/StakingBalance/StakingBalance.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { fireEvent, screen } from '@testing-library/react-native';
+import { renderScreen } from '../../../../../util/test/renderWithProvider';
+import { backgroundState } from '../../../../../util/test/initial-root-state';
+import StakingBalance from './StakingBalance';
+import { strings } from '../../../../../../locales/i18n';
+import Routes from '../../../../../constants/navigation/Routes';
+
+function render(Component: React.ComponentType) {
+  return renderScreen(
+    Component,
+    {
+      name: 'Asset',
+    },
+    {
+      state: {
+        engine: {
+          backgroundState,
+        },
+      },
+    },
+  );
+}
+
+const mockNavigate = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  const actualReactNavigation = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualReactNavigation,
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+  };
+});
+describe('StakingBalance', () => {
+  it('render matches snapshot', () => {
+    render(StakingBalance);
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+
+  it('redirects to StakeInputView on stake button click', () => {
+    render(StakingBalance);
+
+    fireEvent.press(screen.getByText(strings('stake.stake_more')));
+
+    expect(mockNavigate).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.STAKE.STAKE);
+  });
+});

app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx

@@ -0,0 +1,189 @@
+import React, { useMemo, useState } from 'react';
+import Badge, {
+  BadgeVariant,
+} from '../../../../../component-library/components/Badges/Badge';
+import BadgeWrapper from '../../../../../component-library/components/Badges/BadgeWrapper';
+import Text, {
+  TextVariant,
+} from '../../../../../component-library/components/Texts/Text';
+import { useStyles } from '../../../../../component-library/hooks';
+import AssetElement from '../../../AssetElement';
+import NetworkMainAssetLogo from '../../../NetworkMainAssetLogo';
+import { selectNetworkName } from '../../../../../selectors/networkInfos';
+import { useSelector } from 'react-redux';
+import images from '../../../../../images/image-icons';
+import styleSheet from './StakingBalance.styles';
+import { View } from 'react-native';
+import StakingButtons from './StakingButtons/StakingButtons';
+import ClaimBanner from './StakingBanners/ClaimBanner/ClaimBanner';
+import UnstakingBanner from './StakingBanners/UnstakeBanner/UnstakeBanner';
+import Banner, {
+  BannerAlertSeverity,
+  BannerVariant,
+} from '../../../../../component-library/components/Banners/Banner';
+import { strings } from '../../../../../../locales/i18n';
+import { renderFromWei } from '../../../../../util/number';
+import { GetStakesApiResponse } from './StakingBalance.types';
+import { TokenI } from '../../../../UI/Tokens/types';
+import { getTimeDifferenceFromNow } from '../../../../../util/date';
+import { filterExitRequests } from './utils';
+import { BN } from 'ethereumjs-util';
+import bn from 'bignumber.js';
+import { fixDisplayAmount } from '../../utils/value';
+import { multiplyValueByPowerOfTen } from '../../utils/bignumber';
+
+// TODO: Replace mock data when connecting to backend.
+const MOCK_STAKED_ETH_ASSET = {
+  balance: '4.9999 ETH',
+  balanceFiat: '$13,292.20',
+  name: 'Staked Ethereum',
+  symbol: 'ETH',
+} as TokenI;
+
+// TODO: Replace mock data when connecting to backend.
+const MOCK_UNSTAKING_REQUESTS: GetStakesApiResponse = {
+  accounts: [
+    {
+      account: '0x0123456789abcdef0123456789abcdef01234567',
+      lifetimeRewards: '43927049303048',
+      assets: '17913326707142320',
+      exitRequests: [
+        {
+          // Unstaking
+          positionTicket: '2153260738145148336740',
+          timestamp: '1727110415000',
+          totalShares: '989278156820374',
+          withdrawalTimestamp: null,
+          exitQueueIndex: '-1',
+          claimedAssets: null,
+          leftShares: null,
+        },
+        // Requests below are claimable.
+        {
+          positionTicket: '515964521392314631201',
+          timestamp: '1720539311000',
+          totalShares: '99473618267007',
+          withdrawalTimestamp: '0',
+          exitQueueIndex: '57',
+          claimedAssets: '100006626507361',
+          leftShares: '0',
+        },
+        {
+          positionTicket: '515964620865932898208',
+          timestamp: '1720541495000',
+          totalShares: '99473618267007',
+          withdrawalTimestamp: '0',
+          exitQueueIndex: '57',
+          claimedAssets: '100006626507361',
+          leftShares: '0',
+        },
+        {
+          positionTicket: '516604671289934191921',
+          timestamp: '1720607327000',
+          totalShares: '1929478758729790',
+          withdrawalTimestamp: '0',
+          exitQueueIndex: '58',
+          claimedAssets: '1939870510970987',
+          leftShares: '0',
+        },
+      ],
+    },
+  ],
+  exchangeRate: '1.010906701603882254',
+};
+
+const StakingBalance = () => {
+  const { styles } = useStyles(styleSheet, {});
+
+  const networkName = useSelector(selectNetworkName);
+
+  const [isGeoBlocked] = useState(true);
+
+  const { unstakingRequests, claimableRequests } = useMemo(
+    () =>
+      filterExitRequests(
+        MOCK_UNSTAKING_REQUESTS.accounts[0].exitRequests,
+        MOCK_UNSTAKING_REQUESTS.exchangeRate,
+      ),
+    [],
+  );
+
+  const claimableEth = useMemo(
+    () =>
+      renderFromWei(
+        claimableRequests.reduce(
+          (acc, { claimedAssets }) =>
+            claimedAssets ? acc.add(new BN(claimedAssets)) : acc,
+          new BN(0),
+        ),
+      ),
+    [claimableRequests],
+  );
+
+  const hasClaimableEth = !!Number(claimableEth);
+
+  return (
+    <View>
+      <AssetElement
+        asset={MOCK_STAKED_ETH_ASSET}
+        mainBalance={MOCK_STAKED_ETH_ASSET.balance}
+        balance={MOCK_STAKED_ETH_ASSET.balanceFiat}
+      >
+        <BadgeWrapper
+          style={styles.badgeWrapper}
+          badgeElement={
+            <Badge
+              variant={BadgeVariant.Network}
+              imageSource={images.ETHEREUM}
+              name={networkName}
+            />
+          }
+        >
+          <NetworkMainAssetLogo style={styles.ethLogo} />
+        </BadgeWrapper>
+        <Text style={styles.balances} variant={TextVariant.BodyLGMedium}>
+          {MOCK_STAKED_ETH_ASSET.name || MOCK_STAKED_ETH_ASSET.symbol}
+        </Text>
+      </AssetElement>
+      <View style={styles.container}>
+        {unstakingRequests.map(
+          ({ positionTicket, withdrawalTimestamp, assetsToDisplay }) =>
+            assetsToDisplay && (
+              <UnstakingBanner
+                key={positionTicket}
+                amountEth={fixDisplayAmount(
+                  multiplyValueByPowerOfTen(new bn(assetsToDisplay), -18),
+                  4,
+                )}
+                timeRemaining={
+                  !Number(withdrawalTimestamp)
+                    ? { days: 11, hours: 0, minutes: 0 } // default to 11 days.
+                    : getTimeDifferenceFromNow(Number(withdrawalTimestamp))
+                }
+                style={styles.bannerStyles}
+              />
+            ),
+        )}
+        {hasClaimableEth && (
+          <ClaimBanner
+            claimableAmount={claimableEth}
+            style={styles.bannerStyles}
+          />
+        )}
+        {isGeoBlocked && (
+          <Banner
+            variant={BannerVariant.Alert}
+            severity={BannerAlertSeverity.Warning}
+            description={strings('stake.banner_text.geo_blocked')}
+            style={styles.bannerStyles}
+          />
+        )}
+        <View style={styles.buttonsContainer}>
+          <StakingButtons />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default StakingBalance;

app/components/UI/Stake/components/StakingBalance/StakingBalance.types.ts

@@ -0,0 +1,38 @@
+export interface ExitRequest {
+  positionTicket: string; // BigInt!
+  timestamp: string; // BigInt!
+  totalShares: string; // BigInt!
+  receiver: string; // Bytes!
+  /**
+   * If `withdrawalTimestamp` is null, it means the request hasn't been processed yet.
+   * If `withdrawalTimestamp` is "0", funds are withdrawable.
+   * Else, `withdrawalTimestamp` shows an approximate UTC timestamp of when funds will be withdrawable.
+   * `withdrawalTimestamp` is updated every 6 hours.
+   */
+  withdrawalTimestamp: string | null; // BigInt
+}
+
+export type ExitRequestWithClaimedAssetInfo = Pick<
+  ExitRequest,
+  'positionTicket' | 'timestamp' | 'totalShares' | 'withdrawalTimestamp'
+> & {
+  exitQueueIndex: string;
+  claimedAssets: string | null;
+  leftShares: string | null;
+};
+
+interface StakeByAccount {
+  account: string;
+  lifetimeRewards: string;
+  assets: string;
+  exitRequests: ExitRequestWithClaimedAssetInfo[];
+}
+
+export interface GetStakesApiResponse {
+  accounts: StakeByAccount[];
+  exchangeRate: string;
+}
+
+export interface UnstakingRequest extends ExitRequestWithClaimedAssetInfo {
+  assetsToDisplay: string;
+}

app/components/UI/Stake/components/StakingBalance/StakingBanners/ClaimBanner/ClaimBanner.styles.ts

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+const styleSheet = () =>
+  StyleSheet.create({
+    claimButton: {
+      alignSelf: 'flex-start',
+    },
+  });
+
+export default styleSheet;