feat(staking): [LW-8751] show pool rewards in activity (#624)

---------

Signed-off-by: Rafael Korbaš <rafael.korbas@gmail.com>

Author: refi93

apps/browser-extension-wallet/src/api/transformers.ts

@@ -4,8 +4,8 @@ import {
   CoinOverview,
   CardanoStakePool,
   CardanoTxOut,
-  TransactionDetail,
-  CurrencyInfo
+  CurrencyInfo,
+  TransactionActivityDetail
 } from '../types';
 import { Wallet } from '@lace/cardano';
 import { addEllipsis, getNumberWithUnit } from '@lace/common';
@@ -111,7 +111,7 @@ const isStakePool = (props: CardanoStakePool | Wallet.Cardano.SlotLeader): props
 /**
  * format block information
  */
-export const blockTransformer = (block: Wallet.BlockInfo): TransactionDetail['blocks'] => ({
+export const blockTransformer = (block: Wallet.BlockInfo): TransactionActivityDetail['blocks'] => ({
   blockId: block.header.hash.toString(),
   epoch: block.epoch.toString(),
   block: block.header.blockNo.toString(),

apps/browser-extension-wallet/src/features/activity/components/Activity.tsx

@@ -5,7 +5,7 @@ import { StateStatus, useWalletStore } from '@src/stores';
 import { useFetchCoinPrice, useRedirection } from '@hooks';
 import { Drawer, DrawerNavigation } from '@lace/common';
 import { GroupedAssetActivityList } from '@lace/core';
-import { TransactionDetail } from '@src/views/browser-view/features/activity';
+import { ActivityDetail } from '@src/views/browser-view/features/activity';
 import styles from './Activity.module.scss';
 import { FundWalletBanner } from '@src/views/browser-view/components';
 import { walletRoutePaths } from '@routes';
@@ -21,7 +21,7 @@ import { useWalletActivities } from '@hooks/useWalletActivities';
 export const Activity = (): React.ReactElement => {
   const { t } = useTranslation();
   const { priceResult } = useFetchCoinPrice();
-  const { walletInfo, transactionDetail, resetTransactionState } = useWalletStore();
+  const { walletInfo, activityDetail, resetActivityState } = useWalletStore();
   const layoutTitle = `${t('browserView.activity.title')}`;
   const redirectToAssets = useRedirection(walletRoutePaths.assets);
   const analytics = useAnalyticsContext();
@@ -43,21 +43,21 @@ export const Activity = (): React.ReactElement => {
   return (
     <ContentLayout title={layoutTitle} titleSideText={layoutSideText} isLoading={isLoading}>
       <Drawer
-        visible={!!transactionDetail}
-        onClose={resetTransactionState}
+        visible={!!activityDetail}
+        onClose={resetActivityState}
         navigation={
           <DrawerNavigation
-            onArrowIconClick={resetTransactionState}
+            onArrowIconClick={resetActivityState}
             onCloseIconClick={() => {
               analytics.sendEventToPostHog(PostHogAction.ActivityActivityDetailXClick);
-              resetTransactionState();
+              resetActivityState();
               redirectToAssets();
             }}
           />
         }
         popupView
       >
-        {transactionDetail && priceResult && <TransactionDetail price={priceResult} />}
+        {activityDetail && priceResult && <ActivityDetail price={priceResult} />}
       </Drawer>
       <div className={styles.activitiesContainer}>
         {hasActivities ? (

apps/browser-extension-wallet/src/lib/translations/en.json

@@ -27,7 +27,7 @@
         }
       }
     },
-    "transactionDetailBrowser": {
+    "activityDetails": {
       "address": "Address",
       "sent": "Sent",
       "sending": "Sending",
@@ -55,7 +55,8 @@
       "from": "From",
       "to": "To",
       "multipleAddresses": "Multiple addresses",
-      "pools": "Pool(s)"
+      "pools": "Pool(s)",
+      "epoch": "Epoch"
     },
     "walletNameAndPasswordSetupStep": {
       "title": "Let's set up your new wallet",

apps/browser-extension-wallet/src/stores/createWalletStore.ts

@@ -8,7 +8,7 @@ import {
   stakePoolSearchSlice,
   walletInfoSlice,
   lockSlice,
-  transactionDetailSlice,
+  activityDetailSlice,
   uiSlice,
   blockchainProviderSlice
 } from './slices';
@@ -34,7 +34,7 @@ export const createWalletStore = (
     ...networkSlice({ set, get }),
     ...stakePoolSearchSlice({ set, get }),
     ...lockSlice({ set, get }),
-    ...transactionDetailSlice({ set, get }),
+    ...activityDetailSlice({ set, get }),
     ...assetDetailsSlice({ set, get })
   }));
 };

apps/browser-extension-wallet/src/stores/slices/__tests__/transaction-detail-slice.test.ts

@@ -1,50 +1,57 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { renderHook, act } from '@testing-library/react-hooks';
-import { BlockchainProviderSlice, TransactionDetailSlice, WalletInfoSlice } from '../../types';
+import { BlockchainProviderSlice, ActivityDetailSlice, WalletInfoSlice } from '../../types';
 import { transactionMock } from '../../../utils/mocks/test-helpers';
-import { transactionDetailSlice } from '../transaction-detail-slice';
+import { activityDetailSlice } from '../activity-detail-slice';
 import '@testing-library/jest-dom';
 import create, { GetState, SetState } from 'zustand';
 import { mockBlockchainProviders } from '@src/utils/mocks/blockchain-providers';
+import { ActivityStatus } from '@lace/core';
 
-const mockTransactionDetailSlice = (
-  set: SetState<TransactionDetailSlice>,
-  get: GetState<BlockchainProviderSlice & TransactionDetailSlice & WalletInfoSlice>
-): TransactionDetailSlice => {
+const mockActivityDetailSlice = (
+  set: SetState<ActivityDetailSlice>,
+  get: GetState<BlockchainProviderSlice & ActivityDetailSlice & WalletInfoSlice>
+): ActivityDetailSlice => {
   get = () =>
     ({ blockchainProvider: mockBlockchainProviders() } as BlockchainProviderSlice &
-      TransactionDetailSlice &
+      ActivityDetailSlice &
       WalletInfoSlice);
-  return transactionDetailSlice({ set, get });
+  return activityDetailSlice({ set, get });
 };
 
 describe('Testing createStoreHook slice', () => {
   test('should create store hook with transaction slices slice', () => {
-    const useTransactionsStore = create(mockTransactionDetailSlice);
+    const useTransactionsStore = create(mockActivityDetailSlice);
     const { result } = renderHook(() => useTransactionsStore());
     expect(result).toBeDefined();
   });
 
   test('should return transaction state and state handlers', () => {
-    const useTransactionsStore = create(mockTransactionDetailSlice);
+    const useTransactionsStore = create(mockActivityDetailSlice);
     const { result } = renderHook(() => useTransactionsStore());
     expect(result.current).toBeDefined();
 
-    expect(result.current.transactionDetail).not.toBeDefined();
-    expect(result.current.fetchingTransactionInfo).toBeDefined();
-    expect(result.current.getTransactionDetails).toBeDefined();
-    expect(result.current.resetTransactionState).toBeDefined();
-    expect(result.current.setTransactionDetail).toBeDefined();
+    expect(result.current.activityDetail).not.toBeDefined();
+    expect(result.current.fetchingActivityInfo).toBeDefined();
+    expect(result.current.getActivityDetail).toBeDefined();
+    expect(result.current.resetActivityState).toBeDefined();
+    expect(result.current.setTransactionActivityDetail).toBeDefined();
+    expect(result.current.setRewardsActivityDetail).toBeDefined();
   });
 
   test('should set transaction detail', () => {
-    const useTransactionsStore = create(mockTransactionDetailSlice);
+    const useTransactionsStore = create(mockActivityDetailSlice);
     const { result, waitForValueToChange } = renderHook(() => useTransactionsStore());
 
     act(() => {
-      result.current.setTransactionDetail(transactionMock.tx, transactionMock.direction);
+      result.current.setTransactionActivityDetail({
+        type: 'incoming',
+        status: ActivityStatus.SUCCESS,
+        activity: transactionMock.tx,
+        direction: transactionMock.direction
+      });
     });
-    waitForValueToChange(() => result.current.transactionDetail);
-    expect(result.current.transactionDetail).toBeDefined();
+    waitForValueToChange(() => result.current.activityDetail);
+    expect(result.current.activityDetail).toBeDefined();
   });
 });

apps/browser-extension-wallet/src/stores/slices/__tests__/wallet-activities-slice.test.ts

@@ -5,7 +5,7 @@ import {
   StateStatus,
   AssetDetailsSlice,
   BlockchainProviderSlice,
-  TransactionDetailSlice,
+  ActivityDetailSlice,
   UISlice,
   WalletInfoSlice
 } from '@stores/types';
@@ -21,7 +21,7 @@ const mockActivitiesSlice = (
   get: GetState<
     WalletInfoSlice &
       WalletActivitiesSlice &
-      TransactionDetailSlice &
+      ActivityDetailSlice &
       AssetDetailsSlice &
       UISlice &
       BlockchainProviderSlice
@@ -35,7 +35,7 @@ const mockActivitiesSlice = (
       walletInfo: mockWalletInfoTestnet
     } as WalletInfoSlice &
       WalletActivitiesSlice &
-      TransactionDetailSlice &
+      ActivityDetailSlice &
       AssetDetailsSlice &
       UISlice &
       BlockchainProviderSlice);