transactions - display medianTime for transactions

app/screens/AppNavigator/screens/Transactions/TransactionsScreen.tsx

@@ -1,5 +1,6 @@
 import { MaterialIcons } from '@expo/vector-icons'
 import { NavigationProp, useNavigation } from '@react-navigation/native'
+import dayjs from 'dayjs'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { FlatList, RefreshControl, TouchableOpacity, View } from 'react-native'
@@ -14,6 +15,10 @@ import { EmptyTransaction } from './EmptyTransaction'
 import { activitiesToViewModel, VMTransaction } from './screens/stateProcessor'
 import { TransactionsParamList } from './TransactionsNavigator'
 
+export function formatBlockTime (date: number): string {
+  return dayjs(date * 1000).format('MMM D, h:mm a')
+}
+
 export function TransactionsScreen (): JSX.Element {
   const client = useWhaleApiClient()
   const wallet = useWallet()
@@ -63,7 +68,7 @@ function TransactionRow (navigation: NavigationProp<TransactionsParamList>): (ro
       iconName,
       amount,
       desc,
-      block,
+      medianTime,
       token
     } = row.item
 
@@ -85,7 +90,7 @@ function TransactionRow (navigation: NavigationProp<TransactionsParamList>): (ro
             <Text style={tailwind('font-medium')}>{translate('screens/TransactionsScreen', desc)}</Text>
             <Text
               style={tailwind('text-xs text-gray-600')}
-            >{translate('screens/TransactionsScreen', 'Block')}: {block}
+            >{formatBlockTime(medianTime)}
             </Text>
           </View>
           <View style={tailwind('flex-row ml-3 w-32 justify-end items-center')}>

app/screens/AppNavigator/screens/Transactions/screens/TransactionDetailScreen.tsx

@@ -7,6 +7,7 @@ import { useDeFiScanContext } from '../../../../../contexts/DeFiScanContext'
 import { tailwind } from '../../../../../tailwind'
 import { translate } from '../../../../../translations'
 import { TransactionsParamList } from '../TransactionsNavigator'
+import { formatBlockTime } from '../TransactionsScreen'
 
 type Props = StackScreenProps<TransactionsParamList, 'TransactionDetailScreen'>
 
@@ -43,6 +44,7 @@ export function TransactionDetailScreen (props: Props): JSX.Element {
       {/* TODO(@ivan-zynesis): handle different transaction type other than sent/receive */}
       {RenderRow('Amount', translate('screens/TransactionDetailScreen', tx.amount))}
       {RenderRow('Block', translate('screens/TransactionDetailScreen', `${tx.block}`))}
+      {RenderRow('Date', translate('screens/TransactionDetailScreen', `${formatBlockTime(tx.medianTime)}`))}
       {grayDivider}
       <View
         testID='transaction-detail-explorer-url'

app/screens/AppNavigator/screens/Transactions/screens/stateProcessor.ts

@@ -10,6 +10,7 @@ export interface VMTransaction {
   color: string
   amount: string
   block: number
+  medianTime: number
   token: string
   txid: string
 }
@@ -57,6 +58,7 @@ export function activityToViewModel (activity: AddressActivity): VMTransaction {
     color,
     amount: amount.toFixed(),
     block: activity.block.height,
+    medianTime: activity.block.medianTime,
     token: tokenId,
     txid: activity.txid
   }

package.json

@@ -39,6 +39,7 @@
     "@reduxjs/toolkit": "^1.6.1",
     "bignumber.js": "^9.0.1",
     "buffer": "^6.0.3",
+    "dayjs": "^1.10.6",
     "expo": "^42.0.0",
     "expo-asset": "~8.3.3",
     "expo-barcode-scanner": "~10.2.2",