linked up activities and basic coin data with coin details screen

src/constants/walletTokens.ts

@@ -1,4 +1,4 @@
-interface WalletTokenBase {
+export interface WalletTokenBase {
     id:string,
     coingeckoId:string,
     tokenName:string,
@@ -12,11 +12,17 @@ const WALLET_TOKENS = [{
     tokenName:'Ecency Points', 
     tokenSymbol:'Points',
     notCryptoToken:true
+},{
+    id:'HP', 
+    coingeckoId:'hive_power',
+    tokenName:'Hive Power', 
+    tokenSymbol:'HP',
+    notCryptoToken:true
 },{
     id:'Hive',
     coingeckoId:'hive',
     tokenName:'Hive Token',
-    tokenSymbol:'Hive',
+    tokenSymbol:'HIVE',
     notCryptoToken:false
 },{ 
     id:'HBD',

src/containers/walletContainer.js

@@ -36,6 +36,7 @@ const HIVE_POWER_DROPDOWN = ['delegate', 'power_down'];
 const WalletContainer = ({
   children,
   currentAccount,
+  coinSymbol,
   globalProps,
   handleOnScroll,
   pinCode,

src/screens/coinDetails/children/activitiesList.tsx

@@ -0,0 +1,50 @@
+import React, { ComponentType, JSXElementConstructor, ReactElement, useEffect, useState } from 'react'
+import { FlatList } from 'react-native-gesture-handler';
+import { Transaction } from '../../../components';
+import styles from './children.styles';
+
+interface ActivitiesListProps {
+    header:ComponentType<any> | ReactElement<any, string | JSXElementConstructor<any>>
+    activities:any[];
+    filter:'Points'| 'HIVE'| 'HBD'| 'HP';
+}
+
+const ActivitiesList = ({header, activities, filter}:ActivitiesListProps) => {
+    const [filteredActivities, setFilteredActivites] = useState([])
+
+    //filter activities based on selection coin
+    useEffect(() => {
+        if (activities) {
+            const _activities = activities
+              ? activities.filter((item) => {
+                  return (
+                    item &&
+                    item.value &&
+                    item.value.includes(filter)
+                  );
+                })
+              : [];
+            setFilteredActivites(_activities);
+        }else {
+            setFilteredActivites([]);
+        }
+    }, [activities])
+
+
+  const _renderActivityItem = ({item, index}) => {
+    return <Transaction item={item} index={index} />
+  }
+
+    return (
+        <FlatList 
+            style={styles.list}
+            contentContainerStyle={styles.listContent}
+            data={filteredActivities}
+            renderItem={_renderActivityItem}
+            keyExtractor={(item, index)=>`activity_item_${index}_${item.created}`}
+            ListHeaderComponent={header}
+        />
+    )
+}
+
+export default ActivitiesList

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

@@ -3,6 +3,7 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 
 export const CHART_NEGATIVE_MARGIN = 12
 export default EStyleSheet.create({
+  
   card: {
     marginVertical:8,
     borderRadius:12,
@@ -68,6 +69,13 @@ export default EStyleSheet.create({
     marginTop: 16,
     marginLeft:-CHART_NEGATIVE_MARGIN,
     overflow: 'hidden',
-  } as ViewStyle
+  } as ViewStyle,
+  list:{
+    flex:1,
+  } as ViewStyle,
+  listContent:{
+    paddingBottom:56,
+    marginHorizontal:16
+  } as ViewStyle ,
 });
 

src/screens/coinDetails/children/coinBasics.tsx

@@ -2,23 +2,33 @@ import React from 'react'
 import { View, Text } from 'react-native'
 import styles from './children.styles'
 
-export const CoinBasics = () => {
+export interface ValuePair {
+    value:string|number;
+    label:string;
+}
+
+interface CoinBasicsProps {
+    valuePairs:ValuePair[];
+    coinSymbol:string;
+}
+
+export const CoinBasics = ({valuePairs, coinSymbol}:CoinBasicsProps) => {
 
     const _renderCoinHeader = (
         <>
             <View style={styles.coinTitleContainer}>
-             <Text style={styles.textCoinTitle}>HIVE</Text>
+             <Text style={styles.textCoinTitle}>{coinSymbol}</Text>
             </View>
          
             <Text style={styles.textHeaderChange}>Change <Text style={styles.textPositive}>+10.13%</Text></Text>
         </>
     )
 
-    const _renderValuePair = (label:string, value:string) => {
+    const _renderValuePair = (args:ValuePair) => {
         return (
             <>
-                <Text style={styles.textBasicValue}>{value}</Text>
-                <Text style={styles.textBasicLabel}>{label}</Text>
+                <Text style={styles.textBasicValue}>{args.value}</Text>
+                <Text style={styles.textBasicLabel}>{args.label}</Text>
             </>
         )
 
@@ -27,9 +37,7 @@ export const CoinBasics = () => {
     return (
         <View style={[styles.card, styles.basicsContainer]}>
             {_renderCoinHeader}
-            {_renderValuePair('Balance', '234.423897')}
-            {_renderValuePair('Value', '$23423.34')}
-            {_renderValuePair('Savings', '434.3')}
+            {valuePairs.map((valPair)=>_renderValuePair(valPair))}
         </View>
     )
 }

src/screens/coinDetails/children/coinSummary.tsx

@@ -1,11 +1,31 @@
 import React from 'react'
-import { View, Text } from 'react-native'
-import { CoinBasics, CoinChart, RangeSelector } from '.'
+import { View } from 'react-native'
+import { CoinBasics, CoinChart, RangeSelector, ValuePair } from '.'
+import { FormattedCurrency } from '../../../components'
 
-export const CoinSummary = () => {
+export interface CoinSummaryProps {
+    balance:number;
+    estimateValue:number;
+    savings:number;
+    coinSymbol:string;
+}
+
+export const CoinSummary = ({balance, estimateValue, savings, coinSymbol}:CoinSummaryProps) => {
+    const valuePairs = [
+        {
+            label:'Balance',
+            value:balance
+        },{
+            label:'Estimated Value',
+            value:<FormattedCurrency isApproximate isToken value={estimateValue} />,
+        },{
+            label:'Savings',
+            value:savings
+        }
+    ] as ValuePair[]
     return (
         <View>
-            <CoinBasics />
+            <CoinBasics valuePairs={valuePairs} coinSymbol={coinSymbol}  />
             <CoinChart />
             <RangeSelector />
         </View>

src/screens/coinDetails/children/index.ts

@@ -1,4 +1,5 @@
 export * from './coinBasics';
 export * from './coinChart';
 export * from './rangeSelector'; 
-export * from './coinSummary'
+export * from './coinSummary';
+export * from './activitiesList';

src/screens/coinDetails/screen/coinDetailsScreen.tsx

@@ -2,18 +2,30 @@ import { View, Text } from 'react-native'
 import React from 'react'
 import { BasicHeader, Transaction } from '../../../components'
 import { FlatList } from 'react-native-gesture-handler'
-import { CoinSummary } from '../children'
+import { CoinSummary, CoinSummaryProps } from '../children'
 import styles from './screen.styles';
+import { AccountContainer, WalletContainer } from '../../../containers'
+import ActivitiesList from '../children/activitiesList'
+import { NavigationStackRouterConfig, withNavigation } from 'react-navigation'
+import { NavigationStackConfig } from 'react-navigation-stack'
 
-const CoinDetailsScreen = () => {
+export interface CoinDetailsScreenParams {
+  coinSymbol:string;
+}
 
-  const _renderActivityItem = ({item, index}) => {
-    return <Transaction item={item} index={index} />
+interface CoinDetailsScreenProps {
+  navigation:any
+}
+
+const CoinDetailsScreen = ({navigation}:CoinDetailsScreenProps) => {
+  const coinSymbol = navigation.getParam('coinSymbol');
+  if(!coinSymbol){
+    throw new Error("Coin symbol must be passed")
   }
 
-  const _renderHeaderComponent = (
+  const _renderHeaderComponent = (headerProps:CoinSummaryProps) => (
     <>
-      <CoinSummary/>
+      <CoinSummary {...headerProps} />
       <Text style={styles.textActivities}>Activities</Text>
     </>
   )
@@ -21,19 +33,43 @@ const CoinDetailsScreen = () => {
   return (
     <View style={styles.container}>
       <BasicHeader title="Coin Details" />
-      <FlatList 
-        style={styles.list}
-        contentContainerStyle={styles.listContent}
-        data={DUMMY_DATA}
-        renderItem={_renderActivityItem}
-        keyExtractor={(item, index)=>`activity_item_${index}`}
-        ListHeaderComponent={_renderHeaderComponent}
-      />
+          <AccountContainer>
+          {({ currentAccount }) => (
+            <WalletContainer selectedUser={currentAccount} coinSymbol={coinSymbol}>
+              {({
+                isClaiming,
+                claimRewardBalance,
+                handleOnWalletRefresh,
+                refreshing,
+                transferHistory,
+                hiveBalance,
+                isLoading,
+                hiveSavingBalance,
+                estimatedHiveValue,
+                hiveDropdown,
+                savingHiveDropdown,
+                navigate,
+              }) => (
+                <ActivitiesList 
+                  header={_renderHeaderComponent({
+                    balance:hiveBalance,
+                    savings:hiveSavingBalance,
+                    estimateValue:estimatedHiveValue,
+                    coinSymbol
+                  })}
+                  activities={transferHistory}
+                  filter={coinSymbol}
+                />
+                 
+              )}
+              </WalletContainer>
+          )}
+          </AccountContainer>
     </View>
   )
 }
 
-export default CoinDetailsScreen
+export default withNavigation(CoinDetailsScreen)
 
 
 const DUMMY_DATA = [

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

@@ -5,13 +5,7 @@ export default EStyleSheet.create({
     flex:1,
     backgroundColor: '$primaryBackgroundColor',
   },
-  list:{
-    flex:1,
-  },
-  listContent:{
-    paddingBottom:56,
-    marginHorizontal:16
-  },
+
   textActivities:{
     color:'$primaryBlack',
     fontWeight:'600',

src/screens/wallet/screen/walletScreen.tsx

@@ -28,10 +28,11 @@ import styles from './walletScreenStyles';
 
 import { useAppSelector } from '../../../hooks';
 import {CoinCard} from '../children';
-import WALLET_TOKENS from '../../../constants/walletTokens';
+import WALLET_TOKENS, { WalletTokenBase } from '../../../constants/walletTokens';
 import { fetchMarketChart } from '../../../providers/coingecko/coingecko';
 import { withNavigation } from 'react-navigation';
 import ROUTES from '../../../constants/routeNames';
+import { CoinDetailsScreenParams } from '../../coinDetails/screen/coinDetailsScreen';
 
 
 const WalletScreen = ({navigation}) => {
@@ -148,10 +149,12 @@ const WalletScreen = ({navigation}) => {
   //   );
   // };
 
-  const _renderItem = ({ item, index }) => {
+  const _renderItem = ({ item, index }:{item:WalletTokenBase, index:number}) => {
 
     const _onPress = () => {
-      navigation.navigate(ROUTES.SCREENS.COIN_DETAILS)
+      navigation.navigate(ROUTES.SCREENS.COIN_DETAILS, {
+        coinSymbol:item.tokenSymbol
+      } as CoinDetailsScreenParams)
     }
 
     const _tokenMarketData = marketData[index] || [];