Enhancement/live txs

src/screens/activity/ActivityRow.tsx

@@ -68,7 +68,7 @@ const styles = StyleSheet.create({
     width: '100%',
     borderBottomWidth: 1,
     borderBottomColor: '#CCCCCC',
-    paddingVertical: 15,
+    paddingVertical: 30,
   },
   text: {
     paddingTop: 10,

src/screens/activity/ActivityScreen.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react'
-import { StyleSheet, View, ScrollView, Text } from 'react-native'
+import React, { useState } from 'react'
+import { FlatList, StyleSheet, View, Text } from 'react-native'
 
 import { useSocketsState } from '../../subscriptions/RIFSockets'
 import { useTranslation } from 'react-i18next'
@@ -18,9 +18,7 @@ import { ScreenWithWallet } from '../types'
 import { ScreenProps } from '../../RootNavigation'
 import { RIFWallet } from '../../lib/core'
 import ActivityRow from './ActivityRow'
-import { grid } from '../../styles/grid'
-import { SquareButton } from '../../components/button/SquareButton'
-import { Arrow, RefreshIcon } from '../../components/icons'
+import { IActivity } from '../../subscriptions/types'
 
 export interface IActivityTransaction {
   originTransaction: IApiTransaction
@@ -41,13 +39,16 @@ export const ActivityScreen: React.FC<
   ScreenProps<'Activity'> & ScreenWithWallet & ActivityScreenProps
 > = ({ wallet, fetcher, abiEnhancer, navigation }) => {
   const [info, setInfo] = useState('')
-  const { state, dispatch } = useSocketsState()
-  useState<TransactionsServerResponseWithActivityTransactions | null>(null)
+
+  const {
+    state: { transactions },
+    dispatch,
+  } = useSocketsState()
+
   const { t } = useTranslation()
 
-  useEffect(() => {
-    fetchTransactionsPage()
-  }, [])
+  const hasTransactions =
+    transactions && transactions.activityTransactions!.length > 0
 
   const fetchTransactionsPage = async ({
     prev,
@@ -59,7 +60,6 @@ export const ActivityScreen: React.FC<
     /*i18n.changeLanguage('es')*/
     try {
       setInfo(t('Loading transactions. Please wait...'))
-      dispatch({ type: 'newActivity', payload: null })
 
       const fetchedTransactions: TransactionsServerResponseWithActivityTransactions =
         await fetcher.fetchTransactionsByAddress(
@@ -82,76 +82,46 @@ export const ActivityScreen: React.FC<
         }),
       )
 
-      dispatch({ type: 'newActivity', payload: fetchedTransactions })
+      dispatch({
+        type: 'newTransactions',
+        payload: fetchedTransactions as IActivity,
+      })
+
       setInfo('')
     } catch (e: any) {
       setInfo(t('Error reaching API: ') + e.message)
     }
   }
 
   return (
-    <ScrollView style={styles.parent}>
+    <View>
       <Text style={styles.header}>Activity</Text>
-      <View style={{ ...grid.row, ...styles.refreshButtonView }}>
-        <View style={{ ...grid.column4, ...styles.column }}>
-          <SquareButton
-            onPress={() =>
-              fetchTransactionsPage({ prev: state.activities?.prev })
-            }
-            disabled={!state.activities?.prev}
-            title="prev"
-            icon={
-              <Arrow
-                rotate={270}
-                color={state.activities?.prev ? '#66777E' : '#f1f1f1'}
-              />
-            }
-          />
-        </View>
-        <View style={{ ...grid.column4, ...styles.column }}>
-          <SquareButton
-            onPress={() => fetchTransactionsPage()}
-            title="refresh"
-            icon={<RefreshIcon width={50} height={50} color="#66777E" />}
-          />
-        </View>
-        <View style={{ ...grid.column4, ...styles.column }}>
-          <SquareButton
-            onPress={() =>
-              fetchTransactionsPage({ next: state.activities?.next })
-            }
-            disabled={!state.activities?.next}
-            title="next"
-            icon={
-              <Arrow
-                rotate={90}
-                color={state.activities?.next ? '#66777E' : '#f1f1f1'}
-              />
-            }
-          />
-        </View>
-      </View>
-
-      {!!info && <Text testID="Info.Text">{info}</Text>}
-
-      {state.activities &&
-        state.activities.activityTransactions!.length > 0 &&
-        state.activities.activityTransactions!.map(
-          (activityTransaction: IActivityTransaction) => (
-            <ActivityRow
-              key={activityTransaction.originTransaction.hash}
-              activityTransaction={activityTransaction}
-              navigation={navigation}
-            />
-          ),
-        )}
-    </ScrollView>
+
+      {hasTransactions && (
+        <FlatList
+          data={transactions.activityTransactions}
+          initialNumToRender={10}
+          keyExtractor={item => item.originTransaction.hash}
+          onEndReached={() =>
+            fetchTransactionsPage({ next: transactions?.next })
+          }
+          onEndReachedThreshold={0.2}
+          onRefresh={fetchTransactionsPage}
+          refreshing={!!info}
+          renderItem={({ item }) => (
+            <ActivityRow activityTransaction={item} navigation={navigation} />
+          )}
+          style={styles.parent}
+        />
+      )}
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
   parent: {
     paddingHorizontal: 20,
+    marginBottom: 30,
     backgroundColor: '#ffffff',
   },
   refreshButtonView: {

src/screens/home/ActivityComponent.tsx

@@ -18,7 +18,7 @@ const ActivityComponent: React.FC<Interface> = ({
 }) => {
   const { state } = useSocketsState()
 
-  const recent = state.transactions.slice(0, 5)
+  const recent = state.transactions.activityTransactions.slice(0, 5)
 
   return (
     <ScrollView style={styles.portfolio}>

src/subscriptions/RIFSockets.test.tsx

@@ -58,48 +58,54 @@ describe('Live Subscriptions Context', () => {
 
     test('expect useSubscription to dispatch new transaction and update state', () => {
       const { result } = renderHook(() => useSocketsState(), { wrapper })
-      expect(result.current.state.transactions.length).toEqual(0)
+      expect(
+        result.current.state.transactions.activityTransactions.length,
+      ).toEqual(0)
       act(() => {
         result.current.dispatch({
           type: 'newTransaction',
           payload: {
-            _id: '',
-            hash: '0x09073e82ebe101dce197731e2270bbad56b4da279edeeb5ed2671eccf723eec0',
-            nonce: 2452059,
-            blockHash: '',
-            blockNumber: 2452060,
-            transactionIndex: 1,
-            from: '0x0000000000000000000000000000000000000000',
-            to: '0x0000000000000000000000000000000001000008',
-            gas: 0,
-            gasPrice: '0x3938700',
-            value: '0xb1a2bc2ec50000',
-            input: '0x',
-            v: '',
-            r: '',
-            s: '',
-            timestamp: 1640036267,
-            receipt: {
-              transactionHash: '',
-              transactionIndex: 1,
+            originTransaction: {
+              _id: '',
+              hash: '0x09073e82ebe101dce197731e2270bbad56b4da279edeeb5ed2671eccf723eec0',
+              nonce: 2452059,
               blockHash: '',
-              blockNumber: 2434238,
-              cumulativeGasUsed: 112668,
-              gasUsed: 21000,
-              contractAddress: null,
-              logs: [],
-              from: '',
-              to: '',
-              status: '0x1',
-              logsBloom: '',
+              blockNumber: 2452060,
+              transactionIndex: 1,
+              from: '0x0000000000000000000000000000000000000000',
+              to: '0x0000000000000000000000000000000001000008',
+              gas: 0,
+              gasPrice: '0x3938700',
+              value: '0xb1a2bc2ec50000',
+              input: '0x',
+              v: '',
+              r: '',
+              s: '',
+              timestamp: 1640036267,
+              receipt: {
+                transactionHash: '',
+                transactionIndex: 1,
+                blockHash: '',
+                blockNumber: 2434238,
+                cumulativeGasUsed: 112668,
+                gasUsed: 21000,
+                contractAddress: null,
+                logs: [],
+                from: '',
+                to: '',
+                status: '0x1',
+                logsBloom: '',
+              },
+              txType: 'normal',
+              txId: '',
             },
-            txType: 'normal',
-            txId: '',
+            enhancedTransaction: undefined,
           },
         })
       })
-
-      expect(result.current.state.transactions.length).toEqual(1)
+      expect(
+        result.current.state.transactions.activityTransactions.length,
+      ).toEqual(1)
     })
   })
 })

src/subscriptions/RIFSockets.tsx

@@ -1,20 +1,39 @@
 import React from 'react'
 import { useSelectedWallet } from '../Context'
 import { enhanceTransactionInput } from '../screens/activity/ActivityScreen'
+import { filterEnhancedTransactions, sortEnhancedTransactions } from './utils'
+
+import {
+  Action,
+  Dispatch,
+  IActivityTransaction,
+  State,
+  SubscriptionsProviderProps,
+} from './types'
 import { constants } from 'ethers'
 
-import { Action, Dispatch, State, SubscriptionsProviderProps } from './types'
 import { ITokenWithBalance } from '../lib/rifWalletServices/RIFWalletServicesTypes'
 import { RIFWallet } from '../lib/core'
 
 function liveSubscriptionsReducer(state: State, action: Action) {
   const { type } = action
 
   switch (action.type) {
-    case 'newActivity':
+    case 'newTransactions':
+      const sortedTxs: Array<IActivityTransaction> = [
+        ...action.payload!.activityTransactions,
+        ...state.transactions!.activityTransactions,
+      ]
+        .sort(sortEnhancedTransactions)
+        .filter(filterEnhancedTransactions)
+
       return {
         ...state,
-        activities: action.payload,
+        transactions: {
+          prev: action.payload.prev,
+          next: action.payload.next,
+          activityTransactions: sortedTxs,
+        },
       }
 
     case 'newBalance':
@@ -36,9 +55,19 @@ function liveSubscriptionsReducer(state: State, action: Action) {
       }
 
     case 'newTransaction':
+      const sortedTx: Array<IActivityTransaction> = [
+        action.payload,
+        ...state.transactions!.activityTransactions,
+      ]
+        .sort(sortEnhancedTransactions)
+        .filter(filterEnhancedTransactions)
+
       return {
         ...state,
-        transactions: [action.payload, ...state.transactions],
+        transactions: {
+          ...state.transactions,
+          activityTransactions: sortedTx,
+        },
       }
 
     case 'init':
@@ -54,8 +83,11 @@ function liveSubscriptionsReducer(state: State, action: Action) {
 
       return {
         ...state,
-        transactions: [...action.payload.transactions],
         balances: balancesInitial,
+        transactions: {
+          ...state.transactions,
+          activityTransactions: action.payload.transactions,
+        },
       }
 
     default:
@@ -64,15 +96,13 @@ function liveSubscriptionsReducer(state: State, action: Action) {
 }
 
 const initialState = {
-  activities: {
+  transactions: {
     activityTransactions: [],
-    data: [],
     next: null,
     prev: null,
   },
   prices: {},
   balances: {},
-  transactions: [],
 }
 //TODO: Move this to the backend
 const loadRBTCBalance = async (wallet: RIFWallet, dispatch: Dispatch) => {