Celo: Epoch rewards tab on Address view

lib/api/resources.ts

@@ -37,6 +37,7 @@ import type {
   AddressMudRecordsFilter,
   AddressMudRecordsSorting,
   AddressMudRecord,
+  AddressEpochRewardsResponse,
 } from 'types/api/address';
 import type { AddressesResponse, AddressesMetadataSearchResult, AddressesMetadataSearchFilters } from 'types/api/addresses';
 import type { AddressMetadataInfo, PublicTagTypesResponse } from 'types/api/addressMetadata';
@@ -505,6 +506,11 @@ export const RESOURCES = {
     pathParams: [ 'hash' as const ],
     filterFields: [],
   },
+  address_epoch_rewards: {
+    path: '/api/v2/addresses/:hash/election-rewards',
+    pathParams: [ 'hash' as const ],
+    filterFields: [],
+  },
 
   // CONTRACT
   contract: {
@@ -1002,7 +1008,7 @@ export type PaginatedResources = 'blocks' | 'block_txs' | 'block_election_reward
 'addresses' | 'addresses_metadata_search' |
 'address_txs' | 'address_internal_txs' | 'address_token_transfers' | 'address_blocks_validated' | 'address_coin_balance' |
 'search' |
-'address_logs' | 'address_tokens' | 'address_nfts' | 'address_collections' |
+'address_logs' | 'address_tokens' | 'address_nfts' | 'address_collections' | 'address_epoch_rewards' |
 'token_transfers' | 'token_holders' | 'token_inventory' | 'tokens' | 'tokens_bridged' |
 'token_instance_transfers' | 'token_instance_holders' |
 'verified_contracts' |
@@ -1182,6 +1188,7 @@ Q extends 'address_mud_tables' ? AddressMudTables :
 Q extends 'address_mud_tables_count' ? number :
 Q extends 'address_mud_records' ? AddressMudRecords :
 Q extends 'address_mud_record' ? AddressMudRecord :
+Q extends 'address_epoch_rewards' ? AddressEpochRewardsResponse :
 Q extends 'withdrawals' ? WithdrawalsResponse :
 Q extends 'withdrawals_counters' ? WithdrawalsCounters :
 never;

mocks/address/epochRewards.ts

@@ -0,0 +1,41 @@
+import type { AddressEpochRewardsResponse } from 'types/api/address';
+
+import { tokenInfo } from 'mocks/tokens/tokenInfo';
+
+import { withEns, withName, withoutName } from './address';
+
+export const epochRewards: AddressEpochRewardsResponse = {
+  items: [
+    {
+      type: 'delegated_payment',
+      amount: '136609473658452408568',
+      account: withName,
+      associated_account: withName,
+      block_hash: '0x',
+      block_number: 26369280,
+      epoch_number: 1526,
+      token: tokenInfo,
+    },
+    {
+      type: 'group',
+      amount: '117205842355246195095',
+      account: withoutName,
+      associated_account: withoutName,
+      block_hash: '0x',
+      block_number: 26352000,
+      epoch_number: 1525,
+      token: tokenInfo,
+    },
+    {
+      type: 'validator',
+      amount: '125659647325556554060',
+      account: withEns,
+      associated_account: withEns,
+      block_hash: '0x',
+      block_number: 26300160,
+      epoch_number: 1524,
+      token: tokenInfo,
+    },
+  ],
+  next_page_params: null,
+};

stubs/address.ts

@@ -3,14 +3,15 @@ import type {
   AddressCoinBalanceHistoryItem,
   AddressCollection,
   AddressCounters,
+  AddressEpochRewardsItem,
   AddressMudTableItem,
   AddressNFT,
   AddressTabsCounters,
   AddressTokenBalance,
 } from 'types/api/address';
 import type { AddressesItem } from 'types/api/addresses';
 
-import { ADDRESS_HASH } from './addressParams';
+import { ADDRESS_HASH, ADDRESS_PARAMS } from './addressParams';
 import { MUD_SCHEMA, MUD_TABLE } from './mud';
 import { TOKEN_INFO_ERC_1155, TOKEN_INFO_ERC_20, TOKEN_INFO_ERC_721, TOKEN_INFO_ERC_404, TOKEN_INSTANCE } from './token';
 import { TX_HASH } from './tx';
@@ -116,3 +117,14 @@ export const ADDRESS_MUD_TABLE_ITEM: AddressMudTableItem = {
   schema: MUD_SCHEMA,
   table: MUD_TABLE,
 };
+
+export const EPOCH_REWARD_ITEM: AddressEpochRewardsItem = {
+  amount: '136609473658452408568',
+  block_number: 10355938,
+  type: 'voter',
+  token: TOKEN_INFO_ERC_20,
+  block_hash: '0x5956a847d8089e254e02e5111cad6992b99ceb9e5c2dc4343fd53002834c4dc6',
+  account: ADDRESS_PARAMS,
+  epoch_number: 1526,
+  associated_account: ADDRESS_PARAMS,
+};

types/api/address.ts

@@ -1,7 +1,7 @@
 import type { Transaction } from 'types/api/transaction';
 
-import type { UserTags, AddressImplementation } from './addressParams';
-import type { Block } from './block';
+import type { UserTags, AddressImplementation, AddressParam } from './addressParams';
+import type { Block, EpochRewardsType } from './block';
 import type { InternalTransaction } from './internalTransaction';
 import type { MudWorldSchema, MudWorldTable } from './mudWorlds';
 import type { NFTTokenType, TokenInfo, TokenInstance, TokenType } from './token';
@@ -191,6 +191,7 @@ export type AddressTabsCounters = {
   transactions_count: number | null;
   validations_count: number | null;
   withdrawals_count: number | null;
+  celo_election_rewards_count?: number | null;
 }
 
 // MUD framework
@@ -245,3 +246,25 @@ export type AddressMudRecord = {
   schema: MudWorldSchema;
   table: MudWorldTable;
 }
+
+export type AddressEpochRewardsResponse = {
+  items: Array<AddressEpochRewardsItem>;
+  next_page_params: {
+    amount: string;
+    associated_account_address_hash: string;
+    block_number: number;
+    items_count: number;
+    type: EpochRewardsType;
+  } | null;
+}
+
+export type AddressEpochRewardsItem = {
+  type: EpochRewardsType;
+  token: TokenInfo;
+  amount: string;
+  block_number: number;
+  block_hash: string;
+  account: AddressParam;
+  epoch_number: number;
+  associated_account: AddressParam;
+}

types/api/block.ts

@@ -144,19 +144,16 @@ export interface BlockEpochElectionReward {
   total: string;
 }
 
+export type EpochRewardsType = 'group' | 'validator' | 'delegated_payment' | 'voter';
+
 export interface BlockEpoch {
   number: number;
   distribution: {
     carbon_offsetting_transfer: TokenTransfer | null;
     community_transfer: TokenTransfer | null;
     reserve_bolster_transfer: TokenTransfer | null;
   };
-  aggregated_election_rewards: {
-    delegated_payment: BlockEpochElectionReward | null;
-    group: BlockEpochElectionReward | null;
-    validator: BlockEpochElectionReward | null;
-    voter: BlockEpochElectionReward | null;
-  };
+  aggregated_election_rewards: Record<EpochRewardsType, BlockEpochElectionReward | null>;
 }
 
 export interface BlockEpochElectionRewardDetails {

ui/address/AddressEpochRewards.pw.tsx

@@ -0,0 +1,25 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+import { epochRewards } from 'mocks/address/epochRewards';
+import { test, expect } from 'playwright/lib';
+
+import AddressEpochRewards from './AddressEpochRewards';
+
+const ADDRESS_HASH = '0x1234';
+const hooksConfig = {
+  router: {
+    query: { hash: ADDRESS_HASH },
+  },
+};
+
+test('base view +@mobile', async({ render, mockApiResponse }) => {
+  await mockApiResponse('address_epoch_rewards', epochRewards, { pathParams: { hash: ADDRESS_HASH } });
+  const component = await render(
+    <Box pt={{ base: '134px', lg: 6 }}>
+      <AddressEpochRewards/>
+    </Box>,
+    { hooksConfig },
+  );
+  await expect(component).toHaveScreenshot();
+});

ui/address/AddressEpochRewards.tsx

@@ -0,0 +1,89 @@
+import { Hide, Show } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useIsMounted from 'lib/hooks/useIsMounted';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import { EPOCH_REWARD_ITEM } from 'stubs/address';
+import { generateListStub } from 'stubs/utils';
+import AddressEpochRewardsTable from 'ui/address/epochRewards/AddressEpochRewardsTable';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+
+import AddressEpochRewardsListItem from './epochRewards/AddressEpochRewardsListItem';
+
+type Props = {
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  shouldRender?: boolean;
+  isQueryEnabled?: boolean;
+}
+
+const AddressEpochRewards = ({ scrollRef, shouldRender = true, isQueryEnabled = true }: Props) => {
+  const router = useRouter();
+  const isMounted = useIsMounted();
+
+  const hash = getQueryParamString(router.query.hash);
+
+  const rewardsQuery = useQueryWithPages({
+    resourceName: 'address_epoch_rewards',
+    pathParams: {
+      hash,
+    },
+    scrollRef,
+    options: {
+      enabled: isQueryEnabled && Boolean(hash),
+      placeholderData: generateListStub<'address_epoch_rewards'>(EPOCH_REWARD_ITEM, 50, { next_page_params: {
+        amount: '1',
+        items_count: 50,
+        type: 'voter',
+        associated_account_address_hash: '1',
+        block_number: 10355938,
+      } }),
+    },
+  });
+
+  if (!isMounted || !shouldRender) {
+    return null;
+  }
+
+  const content = rewardsQuery.data?.items ? (
+    <>
+      <Hide below="lg" ssr={ false }>
+        <AddressEpochRewardsTable
+          items={ rewardsQuery.data.items }
+          top={ rewardsQuery.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }
+          isLoading={ rewardsQuery.isPlaceholderData }
+        />
+      </Hide>
+      <Show below="lg" ssr={ false }>
+        { rewardsQuery.data.items.map((item, index) => (
+          <AddressEpochRewardsListItem
+            key={ item.block_hash + item.type + item.account.hash + item.associated_account.hash + (rewardsQuery.isPlaceholderData ? String(index) : '') }
+            item={ item }
+            isLoading={ rewardsQuery.isPlaceholderData }
+          />
+        )) }
+      </Show>
+    </>
+  ) : null;
+
+  const actionBar = rewardsQuery.pagination.isVisible ? (
+    <ActionBar mt={ -6 }>
+      <Pagination ml="auto" { ...rewardsQuery.pagination }/>
+    </ActionBar>
+  ) : null;
+
+  return (
+    <DataListDisplay
+      isError={ rewardsQuery.isError }
+      items={ rewardsQuery.data?.items }
+      emptyText="There are no epoch rewards for this address."
+      content={ content }
+      actionBar={ actionBar }
+    />
+  );
+};
+
+export default AddressEpochRewards;

ui/address/epochRewards/AddressEpochRewardsListItem.tsx

@@ -0,0 +1,72 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressEpochRewardsItem } from 'types/api/address';
+
+import getCurrencyValue from 'lib/getCurrencyValue';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
+import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+
+type Props = {
+  item: AddressEpochRewardsItem;
+  isLoading?: boolean;
+};
+
+const UserOpsListItem = ({ item, isLoading }: Props) => {
+  const { valueStr } = getCurrencyValue({ value: item.amount, accuracy: 2, decimals: item.token.decimals });
+  return (
+    <ListItemMobileGrid.Container gridTemplateColumns="100px auto">
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntity
+          number={ Number(item.block_number) }
+          isLoading={ isLoading }
+          noIcon
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Epoch #</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        { item.epoch_number }
+      </ListItemMobileGrid.Value>
+
+      { /* <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <TimeAgoWithTooltip
+          timestamp={ item.timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
+      </ListItemMobileGrid.Value> */ }
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Reward type</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <EpochRewardTypeTag type={ item.type } isLoading={ isLoading }/>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Associated address</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <AddressEntity
+          address={ item.associated_account }
+          isLoading={ isLoading }
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Value</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="flex" alignItems="center" gap={ 2 }>
+          { valueStr }
+          <TokenEntity token={ item.token } isLoading={ isLoading } onlySymbol width="auto" noCopy/>
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default UserOpsListItem;