estimated value estm, move horizontal list out of walletheader

src/components/walletHeader/view/walletHeaderView.js

@@ -121,7 +121,6 @@ const WalletHeaderView = ({
               isThin
             />
           ))}
-        {showIconList && <HorizontalIconList options={POINTS} optionsKeys={POINTS_KEYS} />}
       </View>
     </Fragment>
   );

src/containers/pointsContainer.js

@@ -19,7 +19,7 @@ import POINTS from '../constants/options/points';
 import ROUTES from '../constants/routeNames';
 
 // Utils
-import { groomingPointsTransactionData } from '../utils/wallet';
+import { groomingPointsTransactionData, getPointsEstimate } from '../utils/wallet';
 
 /*
  *            Props Name        Description                                     Value
@@ -39,12 +39,14 @@ const PointsContainer = ({
   isPinCodeOpen,
   globalProps,
   pinCode,
+  currency,
 }) => {
   const [userPoints, setUserPoints] = useState({});
   const [userActivities, setUserActivities] = useState(null);
   const [refreshing, setRefreshing] = useState(false);
   const [isClaiming, setIsClaiming] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
+  const [estimatedEstm, setEstimatedEstm] = useState(0);
   const [navigationParams, setNavigationParams] = useState({});
   const [balance, setBalance] = useState(0);
   const intl = useIntl();
@@ -129,10 +131,11 @@ const PointsContainer = ({
     setRefreshing(true);
 
     await getUser(_username)
-      .then(userPointsP => {
+      .then(async userPointsP => {
         const _balance = Math.round(get(userPointsP, 'points') * 1000) / 1000;
         setUserPoints(userPointsP);
         setBalance(_balance);
+        setEstimatedEstm(await getPointsEstimate(_balance, currency));
       })
       .catch(err => {
         Alert.alert(get(err, 'message', 'Error'));
@@ -232,6 +235,7 @@ const PointsContainer = ({
       refreshing,
       userActivities,
       userPoints,
+      estimatedEstm,
       redeemType: get(navigationParams, 'redeemType'),
       user,
       dropdownOptions: ['dropdown_transfer', 'dropdown_promote', 'dropdown_boost'],
@@ -249,6 +253,7 @@ const mapStateToProps = state => ({
   pinCode: state.application.pin,
   isPinCodeOpen: state.application.isPinCodeOpen,
   globalProps: state.account.globalProps,
+  currency: state.application.currency.currency,
 });
 
 export default withNavigation(connect(mapStateToProps)(PointsContainer));

src/screens/wallet/screen/estmView.js

@@ -2,7 +2,7 @@ import React from 'react';
 import get from 'lodash/get';
 import { View } from 'react-native';
 
-import { WalletHeader } from '../../../components';
+import { WalletHeader, FormattedCurrency } from '../../../components';
 import { PointsContainer } from '../../../containers';
 
 import globalStyles from '../../../globalStyles';
@@ -19,13 +19,13 @@ const EstmView = ({ handleOnSelected, index, currentIndex, refreshing: reload })
         refreshing,
         userActivities,
         userPoints,
+        estimatedEstm,
         dropdownOptions,
       }) => (
         <WalletHeader
           componentDidUpdate={() => handleOnSelected(userActivities, isLoading, fetchUserActivity)}
           index={index}
           reload={reload}
-          showIconList
           claim={claim}
           fetchUserActivity={fetchUserActivity}
           isClaiming={isClaiming}
@@ -42,6 +42,14 @@ const EstmView = ({ handleOnSelected, index, currentIndex, refreshing: reload })
           type="estm"
           currentIndex={currentIndex}
           showBuyButton
+          showIconList={false}
+          valueDescriptions={[
+            {
+              textKey: 'estimated_value',
+              value: <FormattedCurrency isApproximate isToken value={estimatedEstm} />,
+              subTextKey: 'estimated_value_desc',
+            },
+          ]}
         />
       )}
     </PointsContainer>

src/screens/wallet/screen/walletScreen.js

@@ -7,7 +7,7 @@ import { SafeAreaView, Animated, ScrollView, RefreshControl } from 'react-native
 import { LoggedInContainer } from '../../../containers';
 
 // Components
-import { Header, Transaction } from '../../../components';
+import { Header, Transaction, HorizontalIconList } from '../../../components';
 import EstmView from './estmView';
 import SteemView from './steemView';
 import SpView from './spView';
@@ -17,6 +17,8 @@ import SbdView from './sbdView';
 import globalStyles from '../../../globalStyles';
 import styles from './walletScreenStyles';
 
+import POINTS, { POINTS_KEYS } from '../../../constants/options/points';
+
 const HEADER_EXPANDED_HEIGHT = 260;
 const HEADER_COLLAPSED_HEIGHT = 20;
 
@@ -99,6 +101,11 @@ const WalletScreen = () => {
                 ])}
                 scrollEventThrottle={16}
               >
+                <SafeAreaView style={styles.header}>
+                  {currentIndex === 0 && (
+                    <HorizontalIconList options={POINTS} optionsKeys={POINTS_KEYS} />
+                  )}
+                </SafeAreaView>
                 <Transaction
                   type={currentIndex}
                   transactions={selectedUserActivities}

src/utils/wallet.js

@@ -257,3 +257,12 @@ export const groomingPointsTransactionData = transaction => {
 
   return result;
 };
+
+export const getPointsEstimate = async (amount, userCurrency) => {
+  if (!amount) {
+    return 0;
+  }
+  const ppEstm = await getCurrencyTokenRate(userCurrency, 'estm');
+
+  return ppEstm * amount;
+};