Fixed all wallet data

package-lock.json

@@ -5355,6 +5355,32 @@
         }
       }
     },
+    "intl-format-cache": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/intl-format-cache/-/intl-format-cache-2.1.0.tgz",
+      "integrity": "sha1-BKNp/sv61tpgBbrh8UMzMy3PkxY="
+    },
+    "intl-messageformat": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-2.2.0.tgz",
+      "integrity": "sha1-NFvNRt5jC3aDMwwuUhd/9eq0hPw=",
+      "requires": {
+        "intl-messageformat-parser": "1.4.0"
+      }
+    },
+    "intl-messageformat-parser": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz",
+      "integrity": "sha1-tD1FqXRoytvkQzHXS7Ho3qRPwHU="
+    },
+    "intl-relativeformat": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/intl-relativeformat/-/intl-relativeformat-2.1.0.tgz",
+      "integrity": "sha1-AQ8RBYAiUfQKxH0OPhogE0iiVd8=",
+      "requires": {
+        "intl-messageformat": "^2.0.0"
+      }
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -9719,6 +9745,25 @@
         }
       }
     },
+    "react-intl": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-2.7.2.tgz",
+      "integrity": "sha512-3dcNGLqEw2FKkX+1L2WYLgjP0MVJkvWuVd1uLcnwifIQe8JQvnd9Bss4hb4Gvg/YhBIRcs4LM6C2bAgyklucjw==",
+      "requires": {
+        "hoist-non-react-statics": "^2.5.5",
+        "intl-format-cache": "^2.0.5",
+        "intl-messageformat": "^2.1.0",
+        "intl-relativeformat": "^2.1.0",
+        "invariant": "^2.1.1"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+        }
+      }
+    },
     "react-is": {
       "version": "16.6.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.6.0.tgz",

package.json

@@ -30,6 +30,7 @@
     "moment": "^2.22.2",
     "native-base": "^2.8.1",
     "react": "^16.6.0-alpha.8af6728",
+    "react-intl": "^2.7.2",
     "react-native": "^0.57.3",
     "react-native-extended-stylesheet": "^0.10.0",
     "react-native-fast-image": "^4.0.14",

src/components/basicUIElements/view/walletLineItemView.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import { View, Text } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
+
+import IconComp from '../../icon';
+
 import styles from './walletLineItemStyles';
 
 const WalletLineItem = ({
   text,
   textColor,
   iconName,
+  iconType,
   rightText,
   rightTextColor,
   isBoldText,
@@ -26,7 +29,7 @@ const WalletLineItem = ({
             circleIconColor && { backgroundColor: circleIconColor },
           ]}
         >
-          <Ionicons style={styles.icon} name={iconName} />
+          <IconComp style={styles.icon} name={iconName} iconType={iconType} />
         </View>
       )}
       <View>

src/components/icon/view/iconView.js

@@ -7,6 +7,7 @@ import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import Feather from 'react-native-vector-icons/Feather';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 class IconView extends Component {
   constructor(props) {
@@ -34,6 +35,7 @@ class IconView extends Component {
   _getIcon = () => {
     const { iconType, children } = this.props;
     const name = this._getIconName();
+    console.log('this.props :', this.props);
 
     switch (iconType) {
       case 'Feather':
@@ -44,6 +46,8 @@ class IconView extends Component {
         return <SimpleLineIcons {...this.props}>{children}</SimpleLineIcons>;
       case 'AntDesign':
         return <AntDesign {...this.props}>{children}</AntDesign>;
+      case 'MaterialIcons':
+        return <MaterialIcons {...this.props}>{children}</MaterialIcons>;
       case 'MaterialCommunityIcons':
         return (
           <MaterialCommunityIcons name={name} {...this.props}>
@@ -51,7 +55,7 @@ class IconView extends Component {
           </MaterialCommunityIcons>
         );
       default:
-        return <Ionicons {...this.props} />;
+        return <Ionicons name {...this.props} />;
     }
   };
 

src/components/transaction/view/transactionView.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
 import { View } from 'react-native';
-
-// Constants
-import { strings } from '../../../config/locales/i18n';
+import { injectIntl } from 'react-intl';
 
 // Utilities
 import parseToken from '../../../utils/parseToken';
@@ -30,7 +28,7 @@ class TransactionView extends Component {
   _handleOnDropdownSelect = () => {};
 
   _getTransactionData = (transaction) => {
-    const { walletData } = this.props;
+    const { walletData, intl: { formatNumber } } = this.props;
     const result = {};
 
     // eslint-disable-next-line
@@ -39,14 +37,14 @@ class TransactionView extends Component {
     const { timestamp } = transaction[1];
 
     result.transDate = parseDate(timestamp);
-    result.icon = 'local_activity';
+    result.icon = 'local-activity';
 
     switch (result.opName) {
       case 'curation_reward':
         const { reward } = opData;
         const { comment_author: commentAuthor, comment_permlink: commentPermlink } = opData;
 
-        result.value = `${vestsToSp(parseToken(reward), walletData.steemPerMVests)} SP`;
+        result.value = `${formatNumber(vestsToSp(parseToken(reward), walletData.steemPerMVests), { minimumFractionDigits: 3 })} SP`;
         result.details = `@${commentAuthor}/${commentPermlink}`;
         break;
       case 'author_reward':
@@ -59,13 +57,13 @@ class TransactionView extends Component {
 
         const { author, permlink } = opData;
 
-        sbdPayout = parseToken(sbdPayout);
-        steemPayout = parseToken(steemPayout);
-        vestingPayout = parseToken(vestingPayout);
+        sbdPayout = formatNumber(parseToken(sbdPayout), { minimumFractionDigits: 3 });
+        steemPayout = formatNumber(parseToken(steemPayout), { minimumFractionDigits: 3 });
+        vestingPayout = formatNumber(vestsToSp(parseToken(vestingPayout), walletData.steemPerMVests), { minimumFractionDigits: 3 });
 
         result.value = `${sbdPayout > 0 ? `${sbdPayout} SBD` : ''} ${
           steemPayout > 0 ? `${steemPayout} steemPayout` : ''
-        } ${vestingPayout > 0 ? `${vestsToSp(vestingPayout, walletData.steemPerMVests)} SP` : ''}`;
+        } ${vestingPayout > 0 ? `${vestingPayout} SP` : ''}`;
 
         result.details = `@${author}/${permlink}`;
         if (result.opName === 'comment_benefactor_reward') {
@@ -79,13 +77,13 @@ class TransactionView extends Component {
           reward_vests: rewardVests,
         } = opData;
 
-        rewardSdb = parseToken(rewardSdb);
-        rewardSteem = parseToken(rewardSteem);
-        rewardVests = parseToken(rewardVests);
+        rewardSdb = formatNumber(parseToken(rewardSdb), { minimumFractionDigits: 3 });
+        rewardSteem = formatNumber(parseToken(rewardSteem), { minimumFractionDigits: 3 });
+        rewardVests = formatNumber(vestsToSp(parseToken(rewardVests), walletData.steemPerMVests), { minimumFractionDigits: 3 });
 
         result.value = `${rewardSdb > 0 ? `${rewardSdb} SBD` : ''} ${
           rewardSteem > 0 ? `${rewardSteem} STEEM` : ''
-        } ${rewardVests > 0 ? `${vestsToSp(rewardVests, walletData.steemPerMVests)} SP` : ''}`;
+        } ${rewardVests > 0 ? `${rewardVests} SP` : ''}`;
         break;
       case 'transfer':
       case 'transfer_to_vesting':
@@ -94,7 +92,7 @@ class TransactionView extends Component {
         } = opData;
 
         result.value = `${amount}`;
-        result.icon = 'compare_arrows';
+        result.icon = 'compare-arrows';
         // details = <span>{memo} <br/><br/> <strong>@{from}</strong> -&gt; <strong>@{to}</strong></span>;
         break;
       case 'withdraw_vesting':
@@ -102,7 +100,7 @@ class TransactionView extends Component {
         let { vesting_shares: opVestingShares } = opData;
 
         opVestingShares = parseToken(opVestingShares);
-        result.value = `${vestsToSp(opVestingShares, walletData.steemPerMVests)} SP`;
+        result.value = `${formatNumber(vestsToSp(opVestingShares, walletData.steemPerMVests), { minimumFractionDigits: 3 })} SP`;
         result.icon = 'money';
         // details = <span><strong>@{acc}</strong></span>;
         break;
@@ -115,13 +113,13 @@ class TransactionView extends Component {
       default:
         break;
     }
+    console.log('result :', result);
     return result;
   };
 
   render() {
-    const { walletData: { transactions } } = this.props;
+    const { walletData: { transactions }, intl } = this.props;
 
-    console.log('transactions :', transactions);
     return (
       <View>
         <FilterBar
@@ -139,12 +137,16 @@ class TransactionView extends Component {
               if (index % 2 === 0) {
                 return (
                   <WalletLineItem
-                    text={strings(`wallet.${transactionData.opName}`)}
+                    text={intl.formatMessage({
+                      id: `wallet.${transactionData.opName}`,
+                    })}
+                    description={intl.formatRelative(transactionData.transDate)}
                     isCircleIcon
                     isThin
                     circleIconColor="white"
                     textColor="#3c4449"
-                    iconName="ios-chatboxes"
+                    iconName={transactionData.icon}
+                    iconType="MaterialIcons"
                     rightText={transactionData.value}
                     tightTextColor="red"
                   />
@@ -153,12 +155,16 @@ class TransactionView extends Component {
               return (
                 <GrayWrapper>
                   <WalletLineItem
-                    text={strings(`wallet.${transactionData.opName}`)}
+                    text={intl.formatMessage({
+                      id: `wallet.${transactionData.opName}`,
+                    })}
+                    description={intl.formatRelative(transactionData.transDate)}
                     isCircleIcon
                     isThin
                     circleIconColor="white"
                     textColor="#3c4449"
-                    iconName="ios-chatboxes"
+                    iconName={transactionData.icon}
+                    iconType="MaterialIcons"
                     rightText={transactionData.value}
                     tightTextColor="red"
                   />
@@ -171,4 +177,4 @@ class TransactionView extends Component {
   }
 }
 
-export default TransactionView;
+export default injectIntl(TransactionView);

src/components/wallet/container/walletContainer.js

@@ -33,7 +33,6 @@ class WalletContainer extends Component {
 
   async componentWillMount() {
     const { user } = this.props;
-    console.log('user :', user);
 
     const walletData = {};
 
@@ -72,7 +71,9 @@ class WalletContainer extends Component {
     const state = await getState(`/@${user.name}/transfers`);
     const { accounts } = state;
     const { transfer_history: transferHistory } = accounts[user.name];
-    walletData.transactions = transferHistory.slice(Math.max(transferHistory.length - 20, 0));
+    walletData.transactions = transferHistory
+      .slice(Math.max(transferHistory.length - 20, 0))
+      .reverse();
 
     this.setState({ walletData });
   }

src/components/wallet/view/walletStyles.js

@@ -1,7 +1,9 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
-  container: {},
+  container: {
+    paddingBottom: 20,
+  },
 
   // First collabsible component
   mainButton: {
@@ -28,9 +30,4 @@ export default EStyleSheet.create({
     width: 24,
     height: 24,
   },
-  scrollView: {
-    height: '$deviceHeight / 1.36',
-  },
-
-  // Second collabsible component
 });

src/config/locales/en-US.json

@@ -0,0 +1,12 @@
+{
+  "wallet": {
+    "curation_reward": "Curation Reward",
+    "author_reward": "Author Reward",
+    "comment_benefactor_reward": "Comment Benefactor Reward",
+    "claim_reward_balance": "Claim Reward Balance",
+    "transfer": "Transfer",
+    "transfer_to_vesting": "Transfer To Vesting",
+    "withdraw_vesting": "withdraw_vesting",
+    "fill_order": "Fill Order"
+  }
+}

src/config/locales/index.js

@@ -0,0 +1,6 @@
+export default {
+  'en-US': require('./en-US.json'),
+  'tr-TR': require('./tr-TR.json'),
+};
+
+export const locales = [{ id: 'en-US', name: 'English' }, { id: 'tr-TR', name: 'Türkçe' }];

src/config/locales/tr-TR.json

@@ -0,0 +1,12 @@
+{
+  "wallet": {
+    "curation_reward": "Curation Reward",
+    "author_reward": "Author Reward",
+    "comment_benefactor_reward": "Comment Benefactor Reward",
+    "claim_reward_balance": "Claim Reward Balance",
+    "transfer": "Transfer",
+    "transfer_to_vesting": "Transfer To Vesting",
+    "withdraw_vesting": "withdraw_vesting",
+    "fill_order": "Fill Order"
+  }
+}

src/index.js

@@ -1,10 +1,17 @@
 import React from 'react';
 import { Dimensions } from 'react-native';
 import { Provider } from 'react-redux';
+import { IntlProvider, addLocaleData } from 'react-intl';
+import en from 'react-intl/locale-data/en';
+import tr from 'react-intl/locale-data/tr';
 
 import EStyleSheet from 'react-native-extended-stylesheet';
 import store from './redux/store/store';
 import { ReduxNavigation } from './config/reduxNavigation';
+import { flattenMessages } from './utils/flattenMessages';
+import messages from './config/locales';
+
+addLocaleData([...en, ...tr]);
 
 // STYLE
 
@@ -41,8 +48,12 @@ EStyleSheet.build({
   $primaryLatterSpacing: 0,
 });
 
+const locale = 'en-US';
+
 export default () => (
   <Provider store={store}>
-    <ReduxNavigation />
+    <IntlProvider locale={locale} messages={flattenMessages(messages[locale])}>
+      <ReduxNavigation />
+    </IntlProvider>
   </Provider>
 );

src/utils/flattenMessages.js

@@ -0,0 +1,12 @@
+export const flattenMessages = (nestedMessages, prefix = '') => Object.keys(nestedMessages).reduce((messages, key) => {
+  const value = nestedMessages[key];
+  const prefixedKey = prefix ? `${prefix}.${key}` : key;
+
+  if (typeof value === 'string') {
+    messages[prefixedKey] = value;
+  } else {
+    Object.assign(messages, flattenMessages(value, prefixedKey));
+  }
+
+  return messages;
+}, {});