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

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

@@ -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);

apps/browser-extension-wallet/src/stores/slices/transaction-detail-slice.ts → apps/browser-extension-wallet/src/stores/slices/activity-detail-slice.ts

@@ -1,22 +1,17 @@
 /* eslint-disable complexity */
 /* eslint-disable unicorn/no-array-reduce */
 import isEmpty from 'lodash/isEmpty';
-import {
-  TransactionDetailSlice,
-  ZustandHandlers,
-  BlockchainProviderSlice,
-  WalletInfoSlice,
-  SliceCreator
-} from '../types';
-import { CardanoTxOut, Transaction, TransactionDetail } from '../../types';
+import { ActivityDetailSlice, ZustandHandlers, BlockchainProviderSlice, WalletInfoSlice, SliceCreator } from '../types';
+import { CardanoTxOut, Transaction, ActivityDetail, TransactionActivityDetail } from '../../types';
 import { blockTransformer, inputOutputTransformer } from '../../api/transformers';
 import { Wallet } from '@lace/cardano';
 import { getTransactionTotalOutput } from '../../utils/get-transaction-total-output';
 import { inspectTxValues } from '@src/utils/tx-inspection';
 import { firstValueFrom } from 'rxjs';
 import { getAssetsInformation } from '@src/utils/get-assets-information';
 import { MAX_POOLS_COUNT } from '@lace/staking';
-import { TransactionType } from '@lace/core';
+import { ActivityStatus, ActivityType } from '@lace/core';
+import { formatDate, formatTime } from '@src/utils/format-date';
 
 /**
  * validates if the transaction is confirmed
@@ -40,11 +35,13 @@ const getTransactionAssetsId = (outputs: CardanoTxOut[]) => {
   return assetIds;
 };
 
-const transactionMetadataTransformer = (metadata: Wallet.Cardano.TxMetadata): TransactionDetail['tx']['metadata'] =>
+const transactionMetadataTransformer = (
+  metadata: Wallet.Cardano.TxMetadata
+): TransactionActivityDetail['activity']['metadata'] =>
   [...metadata.entries()].map(([key, value]) => ({ key: key.toString(), value: Wallet.cardanoMetadatumToObj(value) }));
 
 const shouldIncludeFee = (
-  type: TransactionType,
+  type: ActivityType,
   delegationInfo: Wallet.Cardano.StakeDelegationCertificate[] | undefined
 ) =>
   !(
@@ -55,28 +52,83 @@ const shouldIncludeFee = (
     (type === 'delegationDeregistration' && !!delegationInfo?.length)
   );
 
+const getPoolInfos = async (poolIds: Wallet.Cardano.PoolId[], stakePoolProvider: Wallet.StakePoolProvider) => {
+  const filters: Wallet.QueryStakePoolsArgs = {
+    filters: {
+      identifier: {
+        _condition: 'or',
+        values: poolIds.map((poolId) => ({ id: poolId }))
+      }
+    },
+    pagination: {
+      startAt: 0,
+      limit: MAX_POOLS_COUNT
+    }
+  };
+  const { pageResults: pools } = await stakePoolProvider.queryStakePools(filters);
+
+  return pools;
+};
+
 /**
- * fetchs asset information
+ * fetches asset information
  */
-const getTransactionDetail =
+const buildGetActivityDetail =
   ({
     set,
     get
   }: ZustandHandlers<
-    TransactionDetailSlice & BlockchainProviderSlice & WalletInfoSlice
-  >): TransactionDetailSlice['getTransactionDetails'] =>
+    ActivityDetailSlice & BlockchainProviderSlice & WalletInfoSlice
+  >): ActivityDetailSlice['getActivityDetail'] =>
   // eslint-disable-next-line max-statements, sonarjs/cognitive-complexity
   async ({ coinPrices, fiatCurrency }) => {
     const {
       blockchainProvider: { chainHistoryProvider, stakePoolProvider, assetProvider },
       inMemoryWallet: wallet,
-      transactionDetail: { tx, status, direction, type },
+      activityDetail,
       walletInfo
     } = get();
 
+    if (activityDetail.type === 'rewards') {
+      const { activity, status, type } = activityDetail;
+      const poolInfos = await getPoolInfos(
+        activity.rewards.map(({ poolId }) => poolId),
+        stakePoolProvider
+      );
+
+      return {
+        activity: {
+          includedUtcDate: formatDate({ date: activity.spendableDate, format: 'MM/DD/YYYY', type: 'utc' }),
+          includedUtcTime: `${formatTime({ date: activity.spendableDate, type: 'utc' })} UTC`,
+          rewards: {
+            totalAmount: Wallet.util.lovelacesToAdaString(
+              Wallet.BigIntMath.sum(activity.rewards?.map(({ rewards }) => rewards) || []).toString()
+            ),
+            spendableEpoch: activity.spendableEpoch,
+            rewards: activity.rewards.map((r) => {
+              const poolInfo = poolInfos.find((p) => p.id === r.poolId);
+              return {
+                amount: Wallet.util.lovelacesToAdaString(r.rewards.toString()),
+                pool: r.poolId
+                  ? {
+                      id: r.poolId,
+                      name: poolInfo?.metadata?.name || '-',
+                      ticker: poolInfo?.metadata?.ticker || '-'
+                    }
+                  : undefined
+              };
+            })
+          }
+        },
+        status,
+        type
+      };
+    }
+
+    const { activity: tx, status, type, direction } = activityDetail;
     const walletAssets = await firstValueFrom(wallet.assetInfo$);
     const protocolParameters = await firstValueFrom(wallet.protocolParameters$);
-    set({ fetchingTransactionInfo: true });
+    set({ fetchingActivityInfo: true });
 
     // Assets
     const assetIds = getTransactionAssetsId(tx.body.outputs);
@@ -134,7 +186,7 @@ const getTransactionDetail =
       (certificate) => certificate.__typename === 'StakeDelegationCertificate'
     ) as Wallet.Cardano.StakeDelegationCertificate[];
 
-    let transaction: TransactionDetail['tx'] = {
+    let transaction: ActivityDetail['activity'] = {
       hash: tx.id.toString(),
       totalOutput: totalOutputInAda,
       fee: shouldIncludeFee(type, delegationInfo) ? feeInAda : undefined,
@@ -148,19 +200,10 @@ const getTransactionDetail =
     };
 
     if (type === 'delegation' && delegationInfo) {
-      const filters: Wallet.QueryStakePoolsArgs = {
-        filters: {
-          identifier: {
-            _condition: 'or',
-            values: delegationInfo.map((certificate) => ({ id: certificate.poolId }))
-          }
-        },
-        pagination: {
-          startAt: 0,
-          limit: MAX_POOLS_COUNT
-        }
-      };
-      const { pageResults: pools } = await stakePoolProvider.queryStakePools(filters);
+      const pools = await getPoolInfos(
+        delegationInfo.map(({ poolId }) => poolId),
+        stakePoolProvider
+      );
 
       if (pools.length === 0) {
         console.error('Stake pool was not found for delegation tx');
@@ -176,20 +219,23 @@ const getTransactionDetail =
       }
     }
 
-    set({ fetchingTransactionInfo: false });
-    return { tx: transaction, blocks, status, assetAmount, type };
+    set({ fetchingActivityInfo: false });
+    return { activity: transaction, blocks, status, assetAmount, type };
   };
 
 /**
  * has all transactions search related actions and states
  */
-export const transactionDetailSlice: SliceCreator<
-  TransactionDetailSlice & BlockchainProviderSlice & WalletInfoSlice,
-  TransactionDetailSlice
+export const activityDetailSlice: SliceCreator<
+  ActivityDetailSlice & BlockchainProviderSlice & WalletInfoSlice,
+  ActivityDetailSlice
 > = ({ set, get }) => ({
-  transactionDetail: undefined,
-  fetchingTransactionInfo: true,
-  getTransactionDetails: getTransactionDetail({ set, get }),
-  setTransactionDetail: (tx, direction, status, type) => set({ transactionDetail: { tx, direction, status, type } }),
-  resetTransactionState: () => set({ transactionDetail: undefined, fetchingTransactionInfo: false })
+  activityDetail: undefined,
+  fetchingActivityInfo: true,
+  getActivityDetail: buildGetActivityDetail({ set, get }),
+  setTransactionActivityDetail: ({ activity, direction, status, type }) =>
+    set({ activityDetail: { activity, direction, status, type } }),
+  setRewardsActivityDetail: ({ activity }) =>
+    set({ activityDetail: { activity, status: ActivityStatus.SPENDABLE, type: 'rewards' } }),
+  resetActivityState: () => set({ activityDetail: undefined, fetchingActivityInfo: false })
 });