feat: transaction history screen

.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,
+  },
+});