add timestamp to celo rewards view (#2361)

mocks/address/epochRewards.ts

@@ -13,6 +13,7 @@ export const epochRewards: AddressEpochRewardsResponse = {
       associated_account: withName,
       block_hash: '0x',
       block_number: 26369280,
+      block_timestamp: '2022-05-15T13:16:24Z',
       epoch_number: 1526,
       token: tokenInfo,
     },
@@ -23,6 +24,7 @@ export const epochRewards: AddressEpochRewardsResponse = {
       associated_account: withoutName,
       block_hash: '0x',
       block_number: 26352000,
+      block_timestamp: '2022-05-15T13:16:24Z',
       epoch_number: 1525,
       token: tokenInfo,
     },
@@ -33,6 +35,7 @@ export const epochRewards: AddressEpochRewardsResponse = {
       associated_account: withEns,
       block_hash: '0x',
       block_number: 26300160,
+      block_timestamp: '2022-05-15T13:16:24Z',
       epoch_number: 1524,
       token: tokenInfo,
     },

stubs/address.ts

@@ -121,10 +121,11 @@ export const ADDRESS_MUD_TABLE_ITEM: AddressMudTableItem = {
 export const EPOCH_REWARD_ITEM: AddressEpochRewardsItem = {
   amount: '136609473658452408568',
   block_number: 10355938,
+  block_timestamp: '2022-05-15T13:16:24Z',
   type: 'voter',
   token: TOKEN_INFO_ERC_20,
   block_hash: '0x5956a847d8089e254e02e5111cad6992b99ceb9e5c2dc4343fd53002834c4dc6',
   account: ADDRESS_PARAMS,
-  epoch_number: 1526,
+  epoch_number: 1234,
   associated_account: ADDRESS_PARAMS,
 };

types/api/address.ts

@@ -266,6 +266,7 @@ export type AddressEpochRewardsItem = {
   amount: string;
   block_number: number;
   block_hash: string;
+  block_timestamp: string;
   account: AddressParam;
   epoch_number: number;
   associated_account: AddressParam;

ui/address/epochRewards/AddressEpochRewardsListItem.tsx

@@ -9,6 +9,7 @@ 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';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = {
   item: AddressEpochRewardsItem;
@@ -31,18 +32,20 @@ const AddressEpochRewardsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Epoch #</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        { item.epoch_number }
+        <Skeleton isLoaded={ !isLoading }>
+          { item.epoch_number }
+        </Skeleton>
       </ListItemMobileGrid.Value>
 
-      { /* <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <TimeAgoWithTooltip
-          timestamp={ item.timestamp }
+          timestamp={ item.block_timestamp }
           isLoading={ isLoading }
           color="text_secondary"
           display="inline-block"
         />
-      </ListItemMobileGrid.Value> */ }
+      </ListItemMobileGrid.Value>
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Reward type</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>

ui/address/epochRewards/AddressEpochRewardsTableItem.tsx

@@ -8,6 +8,7 @@ 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 TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
  type Props = {
    item: AddressEpochRewardsItem;
@@ -20,10 +21,11 @@ const AddressEpochRewardsTableItem = ({ item, isLoading }: Props) => {
     <Tr>
       <Td verticalAlign="middle">
         <Flex alignItems="center" gap={ 3 }>
-          <BlockEntity number={ item.block_number } isLoading={ isLoading } noIcon/>
-          <Text color="text_secondary" fontWeight={ 600 }>{ `Epoch # ${ item.epoch_number }` }</Text>
-          { /* no timestamp from API, will be added later */ }
-          { /* <TimeAgoWithTooltip timestamp={ item } isLoading={ isLoading }/> */ }
+          <BlockEntity number={ item.block_number } isLoading={ isLoading } noIcon fontWeight={ 600 }/>
+          <Skeleton isLoaded={ !isLoading }>
+            <Text color="text_secondary" fontWeight={ 600 }>{ `Epoch # ${ item.epoch_number }` }</Text>
+          </Skeleton>
+          <TimeAgoWithTooltip timestamp={ item.block_timestamp } isLoading={ isLoading } textColor="text_secondary" fontWeight={ 400 }/>
         </Flex>
       </Td>
       <Td verticalAlign="middle">