reusing transaction component in place on coin activities

src/screens/coinDetails/children/activityItem.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { View, Text } from 'react-native'
-
-export const ActivityItem = () => {
-    return (
-        <View>
-            <Text>Activity Item</Text>
-        </View>
-    )
-}

src/screens/coinDetails/children/children.styles.ts

@@ -4,7 +4,6 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 export const CHART_NEGATIVE_MARGIN = 12
 export default EStyleSheet.create({
   card: {
-    marginHorizontal:16,
     marginVertical:8,
     borderRadius:12,
     overflow: 'hidden',
@@ -16,10 +15,10 @@ export default EStyleSheet.create({
   } as ViewStyle,
   coinTitleContainer:{
     flexDirection:'row',
-    marginTop:16
+    marginTop:8
   } as ViewStyle,
   textCoinTitle:{
-      color: '$black',
+      color: '$primaryBlack',
     fontSize: 34,
     fontWeight:'600',
   } as TextStyle,
@@ -36,9 +35,9 @@ export default EStyleSheet.create({
 
   } as TextStyle,
   textBasicValue:{
-    color: '$black',
+    color: '$primaryBlack',
     fontWeight:'600',
-    fontSize: 34,
+    fontSize: 28,
 
   } as TextStyle,
   textBasicLabel:{
@@ -53,14 +52,17 @@ export default EStyleSheet.create({
     justifyContent:'space-between',
     borderRadius:32,
   } as ViewStyle,
+
   rangeOptionWrapper:{
     borderRadius:32,
     paddingVertical:16,
     paddingHorizontal:24
   } as ViewStyle,
+
   textRange:{
-    fontSize:18,
+    fontSize:16,
   } as TextStyle,
+
   chartContainer:{
     height: 168,
     marginTop: 16,

src/screens/coinDetails/children/index.ts

@@ -1,4 +1,3 @@
-export * from './activityItem';
 export * from './coinBasics';
 export * from './coinChart';
 export * from './rangeSelector'; 

src/screens/coinDetails/screen/coinDetailsScreen.tsx

@@ -1,28 +1,84 @@
-import { View } from 'react-native'
+import { View, Text } from 'react-native'
 import React from 'react'
-import { BasicHeader } from '../../../components'
+import { BasicHeader, Transaction } from '../../../components'
 import { FlatList } from 'react-native-gesture-handler'
-import { ActivityItem, CoinSummary } from '../children'
+import { CoinSummary } from '../children'
 import styles from './screen.styles';
 
 const CoinDetailsScreen = () => {
 
   const _renderActivityItem = ({item, index}) => {
-    return <ActivityItem />
+    return <Transaction item={item} index={index} />
   }
 
+  const _renderHeaderComponent = (
+    <>
+      <CoinSummary/>
+      <Text style={styles.textActivities}>Activities</Text>
+    </>
+  )
+
   return (
     <View style={styles.container}>
       <BasicHeader title="Coin Details" />
       <FlatList 
         style={styles.list}
-        data={["data"]}
+        contentContainerStyle={styles.listContent}
+        data={DUMMY_DATA}
         renderItem={_renderActivityItem}
         keyExtractor={(item, index)=>`activity_item_${index}`}
-        ListHeaderComponent={<CoinSummary/>}
+        ListHeaderComponent={_renderHeaderComponent}
       />
     </View>
   )
 }
 
 export default CoinDetailsScreen
+
+
+const DUMMY_DATA = [
+  {
+      "iconType": "MaterialIcons",
+      "textKey": "transfer",
+      "created": "2022-02-14T23:59:03",
+      "icon": "compare-arrows",
+      "value": "0.026 HIVE",
+      "details": "@ecency to @demo.com",
+      "memo": "Daily 100% curation reward share. Thank you for delegating to @ecency!"
+  },
+  {
+      "iconType": "MaterialIcons",
+      "textKey": "curation_reward",
+      "created": "2022-02-14T16:05:18",
+      "icon": "local-activity",
+      "value": "0.002 HP",
+      "details": "@abh12345/the-hive-engagement-league-psmzc"
+  },
+  {
+      "iconType": "MaterialIcons",
+      "textKey": "transfer",
+      "created": "2022-02-13T23:58:33",
+      "icon": "compare-arrows",
+      "value": "0.017 HIVE",
+      "details": "@ecency to @demo.com",
+      "memo": "Daily 100% curation reward share. Thank you for delegating to @ecency!"
+  },
+  {
+      "iconType": "MaterialIcons",
+      "textKey": "transfer",
+      "created": "2022-02-12T23:59:03",
+      "icon": "compare-arrows",
+      "value": "0.028 HIVE",
+      "details": "@ecency to @demo.com",
+      "memo": "Daily 100% curation reward share. Thank you for delegating to @ecency!"
+  },
+  {
+      "iconType": "MaterialIcons",
+      "textKey": "transfer",
+      "created": "2022-02-11T23:58:30",
+      "icon": "compare-arrows",
+      "value": "0.019 HIVE",
+      "details": "@ecency to @demo.com",
+      "memo": "Daily 100% curation reward share. Thank you for delegating to @ecency!"
+  }
+]

src/screens/coinDetails/screen/screen.styles.ts

@@ -7,5 +7,15 @@ export default EStyleSheet.create({
   },
   list:{
     flex:1,
+  },
+  listContent:{
+    paddingBottom:56,
+    marginHorizontal:16
+  },
+  textActivities:{
+    color:'$primaryBlack',
+    fontWeight:'600',
+    fontSize:18,
+    paddingVertical:16 
   }
 });