feat: add transaction history

.eslintrc.json

@@ -37,6 +37,7 @@
     "@typescript-eslint/no-unused-vars": [
       "error",
       { "ignoreRestSiblings": true }
-    ]
+    ],
+    "react/prop-types": ["warn"]
   }
 }

components/AppVersion.tsx

@@ -0,0 +1,33 @@
+import React, { useContext } from 'react';
+import { useSelector } from '@xstate/react';
+import { getVersion } from 'react-native-device-info';
+
+import { selectBackendInfo } from '../machines/app';
+import { GlobalContext } from '../shared/GlobalContext';
+import { Column, Text } from './ui';
+import { Colors } from './ui/styleUtils';
+
+export const AppVersion: React.FC = () => {
+  const { appService } = useContext(GlobalContext);
+  const backendInfo = useSelector(appService, selectBackendInfo);
+
+  return (
+    <Column>
+      <VersionText>Version: {getVersion()}</VersionText>
+      {backendInfo.application.name !== '' ? (
+        <React.Fragment>
+          <VersionText>
+            {backendInfo.application.name}: {backendInfo.application.version}
+          </VersionText>
+          <VersionText>MOSIP: {backendInfo.config['mosip.host']}</VersionText>
+        </React.Fragment>
+      ) : null}
+    </Column>
+  );
+};
+
+const VersionText: React.FC = (props) => (
+  <Text weight="semibold" align="center" size="smaller" color={Colors.Grey}>
+    {props.children}
+  </Text>
+);

components/TransactionHistoryItem.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import {
+  MOSIPServiceHistoryItem,
+  MOSIPServiceHistoryItemEventStatus,
+} from '../screens/Profile/TransactionHistoryScreenController';
+import { Column, Row, Text } from './ui';
+import { Colors } from './ui/styleUtils';
+
+export const TransactionHistoryItem: React.FC<TransactionHistoryItemProps> = (
+  props
+) => {
+  const { data } = props;
+
+  return (
+    <Column style={styles.container}>
+      <Row margin={[0, 0, 8, 0]}>
+        <Column fill margin={[0, 8, 0, 0]}>
+          <Text size="small" weight="semibold" numLines={1}>
+            {data.eventId}
+          </Text>
+          <Text size="smaller" color={Colors.Grey}>
+            {new Date(data.timeStamp).toLocaleString()}
+          </Text>
+        </Column>
+        <Column crossAlign="flex-end">
+          <Text
+            size="smaller"
+            weight="semibold"
+            style={[statusStyles.base, statusStyles[data.eventStatus]]}>
+            {data.eventStatus}
+          </Text>
+        </Column>
+      </Row>
+      <Text size="small">{data.description.trim()}</Text>
+    </Column>
+  );
+};
+
+interface TransactionHistoryItemProps {
+  data: MOSIPServiceHistoryItem;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: Colors.White,
+    marginBottom: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+});
+
+const statusStyles = StyleSheet.create({
+  base: {
+    borderRadius: 100,
+    color: Colors.White,
+    backgroundColor: Colors.Grey,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+  },
+
+  [MOSIPServiceHistoryItemEventStatus.Failed]: {
+    backgroundColor: Colors.Red,
+  },
+
+  [MOSIPServiceHistoryItemEventStatus.InProgress]: {
+    backgroundColor: Colors.Orange,
+  },
+
+  [MOSIPServiceHistoryItemEventStatus.Success]: {
+    backgroundColor: Colors.Green,
+  },
+});

ios/Podfile.lock

@@ -69,13 +69,13 @@ PODS:
     - GoogleNetworkingUtilities (~> 1.2)
     - GoogleSymbolUtilities (~> 1.1)
     - GoogleUtilitiesLegacy (~> 1.3)
-  - Permission-BluetoothPeripheral (3.6.0):
+  - Permission-BluetoothPeripheral (3.6.1):
     - RNPermissions
-  - Permission-Camera (3.6.0):
+  - Permission-Camera (3.6.1):
     - RNPermissions
-  - Permission-LocationAccuracy (3.6.0):
+  - Permission-LocationAccuracy (3.6.1):
     - RNPermissions
-  - Permission-LocationWhenInUse (3.6.0):
+  - Permission-LocationWhenInUse (3.6.1):
     - RNPermissions
   - RCT-Folly (2020.01.13.00):
     - boost-for-react-native
@@ -340,24 +340,24 @@ PODS:
     - React-cxxreact (= 0.64.4)
     - React-jsi (= 0.64.4)
     - React-perflogger (= 0.64.4)
-  - RNBluetoothStateManager (1.3.3):
+  - RNBluetoothStateManager (1.3.4):
     - React-Core
   - RNCAsyncStorage (1.15.17):
     - React-Core
   - RNCPicker (2.2.1):
     - React-Core
-  - RNDeviceInfo (8.7.0):
+  - RNDeviceInfo (8.7.1):
     - React-Core
   - RNGestureHandler (2.1.3):
     - React-Core
   - RNKeychain (8.0.0):
     - React-Core
-  - RNPermissions (3.6.0):
+  - RNPermissions (3.6.1):
     - React-Core
   - RNScreens (3.10.2):
     - React-Core
     - React-RCTImage
-  - RNSecureRandom (1.0.0):
+  - RNSecureRandom (1.0.1):
     - React
   - RNSVG (12.1.1):
     - React
@@ -613,18 +613,18 @@ SPEC CHECKSUMS:
   EXUpdates: a83e036243b0f6ece53a8c1cb883b6751c88a5f8
   EXUpdatesInterface: a9814f422d3cd6e7cfd260d13c27786148ece20e
   FBLazyVector: fa8275d5086566e22a26ddc385ab5772e7f9b1bd
-  FBReactNativeSpec: 7ead992e0bbaf608b93d456361caa6ccf6745df5
+  FBReactNativeSpec: c3dafd68550f3c95f009beee5c20ab07949ec4e4
   glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   GoogleInterchangeUtilities: d5bc4d88d5b661ab72f9d70c58d02ca8c27ad1f7
   GoogleNetworkingUtilities: 3edd3a8161347494f2da60ea0deddc8a472d94cb
   GoogleSymbolUtilities: 631ee17048aa5e9ab133470d768ea997a5ef9b96
   GoogleUtilitiesLegacy: 5501bedec1646bd284286eb5fc9453f7e23a12f4
   mosip-inji-face-sdk: f0e765373b50324243d904e45eb3ce899db951ac
   NearbyMessages: bd9e88f2df7fbab78be58fed58580d5d5bd62cbf
-  Permission-BluetoothPeripheral: 2a5154a9dfdb1cfcf1d546650ced9671904a02af
-  Permission-Camera: 0a0fb4341f50ab242f496fb2f73380e0ec454fe7
-  Permission-LocationAccuracy: 13cbce13607e0738f1339447b4c5f51aa2c2b597
-  Permission-LocationWhenInUse: 51aa065819cd582517e98e89b564e2465a4a83c6
+  Permission-BluetoothPeripheral: 67708853584bb9208c76d36d0e0ea4eafb97ea5b
+  Permission-Camera: bf6791b17c7f614b6826019fcfdcc286d3a107f6
+  Permission-LocationAccuracy: 76df17de5c6b8bc2eee34e61ee92cdd7a864c73d
+  Permission-LocationWhenInUse: 3ba99e45c852763f730eabecec2870c2382b7bd4
   RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c
   RCTRequired: f85fa00af016059cf88b90b8f8ff9a6af9e4b6c3
   RCTTypeSafety: 5279aaf0fb1ad715cbbbbee32d5c98c72598bc9c
@@ -651,15 +651,15 @@ SPEC CHECKSUMS:
   React-RCTVibration: 761849eea2a1abc99d5e4171bae17ab3da3143ac
   React-runtimeexecutor: 5b441857030bb6c3abaa7517f333cb01875ae499
   ReactCommon: b4a65d2d6e9eeffd4b32dde1245962b3f43907d0
-  RNBluetoothStateManager: 4f2d73aecf081b97024116cba628e36c5b283791
+  RNBluetoothStateManager: ae6a26260cbdf1827b58bd3bcc563527d61e6488
   RNCAsyncStorage: 6bd5a7ba3dde1c3facba418aa273f449bdc5437a
   RNCPicker: cb57c823d5ce8d2d0b5dfb45ad97b737260dc59e
-  RNDeviceInfo: 36286df381fcaf1933ff9d2d3c34ba2abeb2d8d8
+  RNDeviceInfo: aad3c663b25752a52bf8fce93f2354001dd185aa
   RNGestureHandler: e1099204721a17a89c81fcd1cc2e92143dc040fb
   RNKeychain: 4f63aada75ebafd26f4bc2c670199461eab85d94
-  RNPermissions: de7b7c3fe1680d974ac7a85e3e97aa539c0e68ea
+  RNPermissions: dcdb7b99796bbeda6975a6e79ad519c41b251b1c
   RNScreens: d6da2b9e29cf523832c2542f47bf1287318b1868
-  RNSecureRandom: 0dcee021fdb3d50cd5cee5db0ebf583c42f5af0e
+  RNSecureRandom: 07efbdf2cd99efe13497433668e54acd7df49fef
   RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   smartshare-react-native: 133dca4c48dea0908649c680701f0948317378c5

locales/en.json

@@ -132,24 +132,30 @@
     "confirmPasscode": "Confirm your passcode",
     "enterPasscode": "Enter your passcode"
   },
-  "Credits": {
-    "header": "Credits and legal notices",
-    "back": "Back"
-  },
-  "ProfileScreen": {
+  "ProfileLayout": {
+    "profile": "Profile",
+    "creditsScreen": {
+      "title": "Credits and legal notices"
+    },
+    "revokeScreen": {
+      "title": "Revoke VID",
+      "revokingVids": "You are about to revoke ({{count}}) VIDs.",
+      "revokingVidsAfter": "This means you will no longer be able to use or view any of the IDs linked to those VID(s). \nAre you sure you want to proceed?",
+      "empty": "Empty",
+      "revokeSuccessful": "VID successfully revoked"
+    },
+    "transactionHistoryScreen": {
+      "title": "Transaction History",
+      "showingRecords": "Showing last {{numRecords}} records",
+      "noRecords": "No records found",
+      "fetchingRecords": "Fetching records..."
+    },
     "name": "Name",
     "vcLabel": "VC Label",
     "language": "Language",
     "bioUnlock": "Biometric unlock",
     "authFactorUnlock": "Unlock auth factor",
-    "credits": "Credits and legal notices",
-    "logout": "Log-out",
-    "revokeLabel": "Revoke VID",
-    "revokeHeader": "REVOKE VID",
-    "revokingVids": "You are about to revoke ({{count}}) VIDs.",
-    "revokingVidsAfter": "This means you will no longer be able to use or view any of the IDs linked to those VID(s). \nAre you sure you want to proceed?",
-    "empty": "Empty",
-    "revokeSuccessful": "VID successfully revoked"
+    "logout": "Log-out"
   },
   "ReceiveVcScreen": {
     "header": "{{vcLabel}} details",

package.json

@@ -100,4 +100,4 @@
     "react": "17.0.1",
     "react-native": "0.64.4"
   }
-}
+}

routes/main.ts

@@ -3,11 +3,12 @@ import {
   BottomTabNavigationOptions,
   BottomTabScreenProps,
 } from '@react-navigation/bottom-tabs';
+
 import { HomeScreen } from '../screens/Home/HomeScreen';
-import { ProfileScreen } from '../screens/Profile/ProfileScreen';
 import { RootStackParamList } from './index';
 import { RequestLayout } from '../screens/Request/RequestLayout';
 import { ScanLayout } from '../screens/Scan/ScanLayout';
+import { ProfileLayout } from '../screens/Profile/ProfileLayout';
 
 export const mainRoutes: TabScreen[] = [
   {
@@ -33,8 +34,11 @@ export const mainRoutes: TabScreen[] = [
   },
   {
     name: 'Profile',
-    component: ProfileScreen,
+    component: ProfileLayout,
     icon: 'person',
+    options: {
+      headerShown: false,
+    },
   },
 ];