added new properties

src/components/basicUIElements/index.js

@@ -1,4 +1,4 @@
-import Card from './view/card/cardView';
+import { Card } from './view/card/cardView';
 import Chip from './view/chip/chipView';
 import GrayWrapper from './view/grayWrapper/grayWrapperView';
 import LineBreak from './view/lineBreak/lineBreakView';

src/components/basicUIElements/view/card/cardView.js

@@ -2,6 +2,4 @@ import React from 'react';
 import { View } from 'react-native';
 import styles from './cardStyles';
 
-const Card = ({ children }) => <View style={styles.wrapper}>{children}</View>;
-
-export default Card;
+export const Card = ({ children }) => <View style={styles.wrapper}>{children}</View>;

src/components/basicUIElements/view/walletLineItem/walletLineItemView.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import { View, Text } from 'react-native';
-import GrayWrapper from '../grayWrapper/grayWrapperView';
 
+// Components
+import GrayWrapper from '../grayWrapper/grayWrapperView';
 import { Icon } from '../../../icon';
 
+// Styles
 import styles from './walletLineItemStyles';
 
 const WalletLineItem = ({
-  circleIconColor,
   description,
   fitContent,
   iconName,
@@ -31,7 +32,7 @@ const WalletLineItem = ({
             style={[
               styles.iconWrapper,
               isCircleIcon && styles.circleIcon,
-              circleIconColor && { backgroundColor: circleIconColor },
+              index && { backgroundColor: `${index && index % 2 !== 0 ? 'white' : '#f5f5f5'}` },
             ]}
           >
             <Icon style={styles.icon} name={iconName} iconType={iconType} />

src/components/points/container/pointsContainer.js

@@ -1,17 +1,19 @@
-import React, { Component } from 'react';
+import React, { Component, Alert } from 'react';
 import { connect } from 'react-redux';
 
 // Services and Actions
 import { getUser, getUserPoints } from '../../../providers/esteem/ePoint';
 
+// Constant
+import POINTS from '../../../constants/options/points';
 // Component
 import PointsView from '../view/pointsView';
 
 /*
-  *            Props Name        Description                                     Value
-  *@props -->  props name here   description here                                Value Type Here
-  *
-  */
+ *            Props Name        Description                                     Value
+ *@props -->  props name here   description here                                Value Type Here
+ *
+ */
 
 class PointsContainer extends Component {
   constructor(props) {
@@ -19,6 +21,7 @@ class PointsContainer extends Component {
     this.state = {
       userPoints: {},
       userActivities: {},
+      refreshing: false,
     };
   }
 
@@ -29,32 +32,59 @@ class PointsContainer extends Component {
 
   // Component Functions
 
+  _groomUserActivities = userActivities => userActivities.map(item => ({
+    ...item,
+    icon: POINTS[item.type].icon,
+    iconType: POINTS[item.type].iconType,
+    textKey: POINTS[item.type].textKey,
+  }));
+
   _fetchuserPointActivities = async () => {
     const { username } = this.props;
 
-    await getUser(username).then((userPoints) => {
-      this.setState({ userPoints });
-    }).catch((err) => {
-      alert(err);
-    });
+    this.setState({ refreshing: true });
 
-    await getUserPoints(username).then((userActivities) => {
-      // this.setState({ userPointActivities: res });
-      this.setState({ userActivities });
-    }).catch((err) => {
-      alert(err);
-    });
-  }
+    await getUser(username)
+      .then((userPoints) => {
+        this.setState({ userPoints });
+      })
+      .catch((err) => {
+        Alert.alert(err);
+      });
+
+    await getUserPoints(username)
+      .then((userActivities) => {
+        this.setState({
+          userActivities: this._groomUserActivities(userActivities),
+        });
+      })
+      .catch((err) => {
+        Alert.alert(err);
+      });
+
+    this.setState({ refreshing: false });
+  };
 
   render() {
-    const { userPoints, userActivities } = this.state;
+    const {
+      userPoints, userActivities, isDarkTheme, refreshing,
+    } = this.state;
 
-    return <PointsView userPoints={userPoints} userActivities={userActivities} />;
+    return (
+      <PointsView
+        userPoints={userPoints}
+        userActivities={userActivities}
+        isDarkTheme={isDarkTheme}
+        fetchUserActivity={this._fetchuserPointActivities}
+        refreshing={refreshing}
+      />
+    );
   }
 }
 
 const mapStateToProps = state => ({
   username: state.account.currentAccount.name,
+  isDarkTheme: state.application.isDarkTheme,
 });
 
 export default connect(mapStateToProps)(PointsContainer);

src/components/points/view/pointsStyles.js

@@ -63,4 +63,7 @@ export default EStyleSheet.create({
   activeBadge: {
     backgroundColor: '$black',
   },
+  listWrapper: {
+    marginHorizontal: 8,
+  },
 });

src/components/points/view/pointsView.js

@@ -1,11 +1,16 @@
 import React, { Component, Fragment } from 'react';
-import { Text, View, FlatList } from 'react-native';
+import {
+  Text, View, FlatList, ScrollView, RefreshControl,
+} from 'react-native';
 import { injectIntl } from 'react-intl';
 
 // Components
-import { LineBreak } from '../../basicUIElements';
+import { LineBreak, WalletLineItem } from '../../basicUIElements';
 import { IconButton } from '../../iconButton';
 
+// Utils
+import { getTimeFromNow } from '../../../utils/time';
+
 // Styles
 import styles from './pointsStyles';
 
@@ -24,67 +29,101 @@ class PointsView extends Component {
 
   // Component Functions
 
-  render() {
-    const { userActivities, userPoints, intl } = this.props;
-    const isActiveIcon = true;
+   refreshControl = () => {
+     const { fetchUserActivity, refreshing, isDarkTheme } = this.props;
 
-    return (
-      <Fragment>
-        <LineBreak height={12} />
-        <Text style={styles.pointText}>{userPoints.points}</Text>
-        <Text style={styles.subText}>eSteem Points</Text>
+     return (
+       <RefreshControl
+         refreshing={refreshing}
+         onRefresh={fetchUserActivity}
+         progressBackgroundColor="#357CE6"
+         tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'}
+         titleColor="#fff"
+         colors={['#fff']}
+       />
+     );
+   }
 
-        <View style={styles.iconsWrapper}>
-          <View styles={styles.iconWrapper}>
-            <View style={styles.iconWrapper}>
-              <IconButton
-                iconStyle={styles.icon}
-                iconType="MaterialCommunityIcons"
-                name="pencil"
-                badgeCount={50}
-                badgeStyle={styles.badge}
-                badgeTextStyle={styles.badgeText}
-              />
-            </View>
-            <Text style={styles.subText}>{intl.formatMessage({ id: 'points.post' })}</Text>
-          </View>
-          <View styles={styles.iconWrapper}>
-            <View style={styles.iconWrapper}>
-              <IconButton
-                iconStyle={styles.icon}
-                iconType="MaterialIcons"
-                name="comment"
-                badgeCount={15}
-                badgeStyle={styles.badge}
-                badgeTextStyle={styles.badgeText}
-              />
-            </View>
-            <Text style={styles.subText}>{intl.formatMessage({ id: 'points.comment' })}</Text>
-          </View>
-          <View styles={styles.iconWrapper}>
-            <View style={[styles.iconWrapper, isActiveIcon && styles.activeIconWrapper]}>
-              <IconButton
-                iconStyle={[styles.icon, isActiveIcon && styles.activeIcon]}
-                iconType="MaterialCommunityIcons"
-                name="clock-outline"
-                badgeCount={50}
-                badgeStyle={[styles.badge, isActiveIcon && styles.activeBadge]}
-                badgeTextStyle={styles.badgeText}
-              />
-            </View>
-            <Text style={styles.subText}>{intl.formatMessage({ id: 'points.checkin' })}</Text>
-          </View>
-        </View>
+   render() {
+     const {
+       userActivities, userPoints, intl,
+     } = this.props;
+     const isActiveIcon = true;
 
-        <FlatList
-          data={userActivities}
-          renderItem={({ item }) => (
-            <Text>{item.type}</Text>
-          )}
-        />
-      </Fragment>
-    );
-  }
+     return (
+       <Fragment>
+         <LineBreak height={12} />
+         <ScrollView
+           refreshControl={this.refreshControl()}
+         >
+           <Text style={styles.pointText}>{userPoints.points}</Text>
+           <Text style={styles.subText}>eSteem Points</Text>
+
+           <View style={styles.iconsWrapper}>
+             <View styles={styles.iconWrapper}>
+               <View style={styles.iconWrapper}>
+                 <IconButton
+                   iconStyle={styles.icon}
+                   iconType="MaterialCommunityIcons"
+                   name="pencil"
+                   badgeCount={50}
+                   badgeStyle={styles.badge}
+                   badgeTextStyle={styles.badgeText}
+                 />
+               </View>
+               <Text style={styles.subText}>{intl.formatMessage({ id: 'points.post' })}</Text>
+             </View>
+             <View styles={styles.iconWrapper}>
+               <View style={styles.iconWrapper}>
+                 <IconButton
+                   iconStyle={styles.icon}
+                   iconType="MaterialIcons"
+                   name="comment"
+                   badgeCount={15}
+                   badgeStyle={styles.badge}
+                   badgeTextStyle={styles.badgeText}
+                 />
+               </View>
+               <Text style={styles.subText}>{intl.formatMessage({ id: 'points.comment' })}</Text>
+             </View>
+             <View styles={styles.iconWrapper}>
+               <View style={[styles.iconWrapper, isActiveIcon && styles.activeIconWrapper]}>
+                 <IconButton
+                   iconStyle={[styles.icon, isActiveIcon && styles.activeIcon]}
+                   iconType="MaterialCommunityIcons"
+                   name="clock-outline"
+                   badgeCount={50}
+                   badgeStyle={[styles.badge, isActiveIcon && styles.activeBadge]}
+                   badgeTextStyle={styles.badgeText}
+                 />
+               </View>
+               <Text style={styles.subText}>{intl.formatMessage({ id: 'points.checkin' })}</Text>
+             </View>
+           </View>
+
+           <View style={styles.listWrapper}>
+             <FlatList
+               data={userActivities}
+               renderItem={({ item, index }) => (
+                 <WalletLineItem
+                   key={item.id.toString()}
+                   index={index + 1}
+                   text={intl.formatMessage({ id: item.textKey })}
+                   description={getTimeFromNow(item.created)}
+                   isCircleIcon
+                   isThin
+                   isBlackText
+                   iconName={item.icon}
+                   iconType={item.iconType}
+                   rightText={`${item.amount} ESTEEM`}
+                 />
+               )}
+             />
+           </View>
+         </ScrollView>
+       </Fragment>
+     );
+   }
 }
 
 export default injectIntl(PointsView);

src/components/transaction/view/transactionView.js

@@ -4,8 +4,6 @@ import { View } from 'react-native';
 
 // Utilities
 import { groomingTransactionData } from '../../../utils/wallet';
-
-// Utils
 import { getTimeFromNow } from '../../../utils/time';
 
 // Components
@@ -60,10 +58,10 @@ class TransactionView extends PureComponent {
                 <CollapsibleCard
                   noBorder
                   noContainer
-                  key={index.toString()}
+                  key={transactionData.transDate.toString()}
                   titleComponent={(
                     <WalletLineItem
-                      key={index.toString()}
+                      key={transactionData.transDate.toString()}
                       index={index}
                       text={intl.formatMessage({
                         id: `wallet.${transactionData.opName}`,

src/config/locales/en-US.json

@@ -34,7 +34,14 @@
   "points": {
     "post": "Post",
     "comment": "Comment",
-    "checkin": "Checki-in"
+    "checkin": "Checki-in",
+    "post_title": "Points for post",
+    "comment_title": "Points for comment",
+    "vote_title": "Points for vote",
+    "reblog_title": "Points for reblog",
+    "login_title": "Points for login",    
+    "checkin_title": "Points for usage",
+    "checkin_extra_title": "Usage bonus"
   },
   "messages": {
     "comingsoon": "Messages feature is coming soon!"

src/constants/options/points.js

@@ -0,0 +1,38 @@
+export default {
+  100: {
+    icon: 'post',
+    textKey: 'points.post_title',
+    iconType: 'MaterialIcons',
+  },
+  110: {
+    icon: 'comment',
+    textKey: 'points.comment_title',
+    iconType: 'MaterialIcons',
+  },
+  120: {
+    icon: 'upcircle',
+    textKey: 'points.vote_title',
+    iconType: 'AntDesign',
+  },
+  130: {
+    icon: 'repeat',
+    textKey: 'points.reblog_title',
+    iconType: 'MaterialIcons',
+  },
+  10: {
+    icon: 'check-circle',
+    textKey: 'points.checkin_title',
+    iconType: 'MaterialCommunityIcons',
+  },
+  20: {
+    icon: 'person',
+    textKey: 'points.login_title',
+    iconType: 'MaterialIcons',
+  },
+  30: {
+    icon: 'check-decagram',
+    textKey: 'points.checkin_extra_title',
+    iconType: 'MaterialCommunityIcons',
+
+  },
+};