Repository: busyorg/busy (js)

Issue:
SP amount in "Claim Rewards" transactions is not SP
#### Expected behavior

The number in Claim Rewards transactions should be actually SP.

![image](https://user-images.githubusercontent.com/16621517/32141739-f5b2b95c-bc87-11e7-91f3-62c63778e33d.png)

#### Actual behavior

The number is much higher. It seems that it is VESTS (not confirmed).

![image](https://user-images.githubusercontent.com/16621517/32141741-fa3a4cc4-bc87-11e7-9cbe-84e51a7845a4.png)

#### How to reproduce

1. Go to wallet
2. Find "Claim Rewards" transaction
3. Compare with Steemit

* Browser: Chrome
* Operating system: Windows 10


Pull request:
Add Loading to Est Account & Steem Trending Charts
Fixes #929.
* Est. account value doesn't show up

Changes:
- Add loading to Est Account Value
- Add loading to steem trending charts


Patch:
diff --git a/src/components/Sidebar/SteemTrendingCharts.js b/src/components/Sidebar/SteemTrendingCharts.js
index 231f06ce..033aedb0 100644
--- a/src/components/Sidebar/SteemTrendingCharts.js
+++ b/src/components/Sidebar/SteemTrendingCharts.js
@@ -66,12 +66,13 @@ class SteemTrendingCharts extends Component {
         <div className="SteemTrendingCharts__divider" />
         <div className="SteemTrendingCharts__chart-header">
           <FormattedMessage id="steem" defaultMessage="Steem" />
-          <span className="SteemTrendingCharts__chart-value">
-            {`$${currentSteemPrice}`}
-            {steemPriceIncrease
-              ? <i className="iconfont icon-caret-up SteemTrendingCharts__chart-caret-up" />
-              : <i className="iconfont icon-caretbottom SteemTrendingCharts__chart-caret-down" />}
-          </span>
+          {!loading &&
+            <span className="SteemTrendingCharts__chart-value">
+              {`$${currentSteemPrice}`}
+              {steemPriceIncrease
+                ? <i className="iconfont icon-caret-up SteemTrendingCharts__chart-caret-up" />
+                : <i className="iconfont icon-caretbottom SteemTrendingCharts__chart-caret-down" />}
+            </span>}
         </div>
         {loading
           ? <Loading />
@@ -79,12 +80,13 @@ class SteemTrendingCharts extends Component {
         <div className="SteemTrendingCharts__divider" />
         <div className="SteemTrendingCharts__chart-header">
           <FormattedMessage id="steem_dollar" defaultMessage="Steem Dollar" />
-          <span className="SteemTrendingCharts__chart-value">
-            {`$${currentSteemDollarPrice} `}
-            {steemDollarPriceIncrease
-              ? <i className="iconfont icon-caret-up SteemTrendingCharts__chart-caret-up" />
-              : <i className="iconfont icon-caretbottom SteemTrendingCharts__chart-caret-down" />}
-          </span>
+          {!loading &&
+            <span className="SteemTrendingCharts__chart-value">
+              {`$${currentSteemDollarPrice} `}
+              {steemDollarPriceIncrease
+                ? <i className="iconfont icon-caret-up SteemTrendingCharts__chart-caret-up" />
+                : <i className="iconfont icon-caretbottom SteemTrendingCharts__chart-caret-down" />}
+            </span>}
         </div>
         {loading
           ? <Loading />
diff --git a/src/reducers.js b/src/reducers.js
index 7d687187..b40ee29d 100644
--- a/src/reducers.js
+++ b/src/reducers.js
@@ -100,3 +100,5 @@ export const getUsersTransactionsLoading = state =>
   fromWallet.getUsersTransactionsLoading(state.wallet);
 export const getUsersEstAccountsValues = state =>
   fromWallet.getUsersEstAccountsValues(state.wallet);
+export const getLoadingEstAccountValue = state =>
+  fromWallet.getLoadingEstAccountValue(state.wallet);
diff --git a/src/styles/modules/variables.less b/src/styles/modules/variables.less
index 86fcf7d7..edcabfe1 100644
--- a/src/styles/modules/variables.less
+++ b/src/styles/modules/variables.less
@@ -7,5 +7,6 @@
 // Responsive design
 @small: ~"only screen and (min-width: 768px)";
 @medium: ~"only screen and (min-width: 998px)";
+@very-small-max-width: ~"screen and (max-width: 400px)";
 @small-max-width: ~"screen and (max-width: 768px)";
 @medium-max-width: ~"screen and (max-width: 998px)";
diff --git a/src/user/UserWallet.js b/src/user/UserWallet.js
index 6af3b3fb..eb2f2e53 100644
--- a/src/user/UserWallet.js
+++ b/src/user/UserWallet.js
@@ -8,12 +8,14 @@ import UserWalletTransactions from '../wallet/UserWalletTransactions';
 import Loading from '../components/Icon/Loading';
 import {
   getUser,
+  getAuthenticatedUser,
   getAuthenticatedUserName,
   getTotalVestingShares,
   getTotalVestingFundSteem,
   getUsersTransactions,
   getUsersTransactionsLoading,
   getUsersEstAccountsValues,
+  getLoadingEstAccountValue,
 } from '../reducers';
 import {
   getGlobalProperties,
@@ -25,16 +27,16 @@ import { getAccountWithFollowingCount } from './usersActions';
 @withRouter
 @connect(
   (state, ownProps) => ({
-    user: getUser(
-      state,
-      ownProps.isCurrentUser ? state.auth.user.name : ownProps.match.params.name,
-    ),
+    user: ownProps.isCurrentUser
+      ? getAuthenticatedUser(state)
+      : getUser(state, ownProps.match.params.name),
     authenticatedUserName: getAuthenticatedUserName(state),
     totalVestingShares: getTotalVestingShares(state),
     totalVestingFundSteem: getTotalVestingFundSteem(state),
     usersTransactions: getUsersTransactions(state),
     usersTransactionsLoading: getUsersTransactionsLoading(state),
     usersEstAccountsValues: getUsersEstAccountsValues(state),
+    loadingEstAccountValue: getLoadingEstAccountValue(state),
   }),
   {
     getGlobalProperties,
@@ -56,6 +58,7 @@ class Wallet extends Component {
     usersTransactions: PropTypes.shape().isRequired,
     usersEstAccountsValues: PropTypes.shape().isRequired,
     usersTransactionsLoading: PropTypes.bool.isRequired,
+    loadingEstAccountValue: PropTypes.bool.isRequired,
     isCurrentUser: PropTypes.bool,
     authenticatedUserName: PropTypes.string,
   };
@@ -111,12 +114,13 @@ class Wallet extends Component {
       user,
       totalVestingShares,
       totalVestingFundSteem,
+      loadingEstAccountValue,
       usersTransactions,
       usersTransactionsLoading,
       usersEstAccountsValues,
     } = this.props;
     const transactions = usersTransactions[user.name] || [];
-    const estAccountValue = usersEstAccountsValues[user.name] || 0;
+    const estAccountValue = usersEstAccountsValues[user.name];
 
     return (
       <div>
@@ -124,6 +128,7 @@ class Wallet extends Component {
           user={user}
           estAccountValue={estAccountValue}
           loading={user.isFetching}
+          loadingEstAccountValue={loadingEstAccountValue}
           totalVestingShares={totalVestingShares}
           totalVestingFundSteem={totalVestingFundSteem}
         />
@@ -132,6 +137,8 @@ class Wallet extends Component {
           : <UserWalletTransactions
             transactions={usersTransactions[user.name]}
             currentUsername={user.name}
+            totalVestingShares={totalVestingShares}
+            totalVestingFundSteem={totalVestingFundSteem}
           />}
       </div>
     );
diff --git a/src/wallet/ClaimReward.js b/src/wallet/ClaimReward.js
index dbce6974..ba3e29c1 100644
--- a/src/wallet/ClaimReward.js
+++ b/src/wallet/ClaimReward.js
@@ -1,12 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import steem from 'steem';
 import { FormattedMessage, FormattedRelative, FormattedNumber } from 'react-intl';
 
-const getFormattedPayout = (rewardSteem, rewardSbd, rewardVests) => {
+const getFormattedPayout = (
+  rewardSteem,
+  rewardSbd,
+  rewardVests,
+  totalVestingShares,
+  totalVestingFundSteem,
+) => {
   const payouts = [];
   const parsedRewardSteem = parseFloat(rewardSteem);
   const parsedRewardSbd = parseFloat(rewardSbd);
-  const parsedRewardVests = parseFloat(rewardVests);
+  const parsedRewardVests = parseFloat(
+    steem.formatter.vestToSteem(rewardVests, totalVestingShares, totalVestingFundSteem),
+  );
 
   if (parsedRewardSteem > 0) {
     payouts.push(
@@ -50,7 +59,14 @@ const getFormattedPayout = (rewardSteem, rewardSbd, rewardVests) => {
   return payouts;
 };
 
-const ClaimReward = ({ timestamp, rewardSteem, rewardSbd, rewardVests }) => (
+const ClaimReward = ({
+  timestamp,
+  rewardSteem,
+  rewardSbd,
+  rewardVests,
+  totalVestingShares,
+  totalVestingFundSteem,
+}) => (
   <div className="UserWalletTransactions__transaction">
     <div className="UserWalletTransactions__icon-container">
       <i className="iconfont icon-success_fill UserWalletTransactions__icon" />
@@ -59,7 +75,13 @@ const ClaimReward = ({ timestamp, rewardSteem, rewardSbd, rewardVests }) => (
       <div className="UserWalletTransactions__content-recipient">
         <FormattedMessage id="claim_rewards" defaultMessage="Claim rewards" />
         <span className="UserWalletTransactions__payout">
-          {getFormattedPayout(rewardSteem, rewardSbd, rewardVests)}
+          {getFormattedPayout(
+            rewardSteem,
+            rewardSbd,
+            rewardVests,
+            totalVestingShares,
+            totalVestingFundSteem,
+          )}
         </span>
       </div>
       <span className="UserWalletTransactions__timestamp">
@@ -74,6 +96,8 @@ ClaimReward.propTypes = {
   rewardSteem: PropTypes.string.isRequired,
   rewardSbd: PropTypes.string.isRequired,
   rewardVests: PropTypes.string.isRequired,
+  totalVestingShares: PropTypes.string.isRequired,
+  totalVestingFundSteem: PropTypes.string.isRequired,
 };
 
 export default ClaimReward;
diff --git a/src/wallet/UserWalletSummary.js b/src/wallet/UserWalletSummary.js
index bfa48f93..2f91fdb8 100644
--- a/src/wallet/UserWalletSummary.js
+++ b/src/wallet/UserWalletSummary.js
@@ -12,6 +12,7 @@ const UserWalletSummary = ({
   loading,
   totalVestingShares,
   totalVestingFundSteem,
+  loadingEstAccountValue,
 }) => (
   <div className="UserWalletSummary">
     <div className="UserWalletSummary__item">
@@ -78,7 +79,9 @@ const UserWalletSummary = ({
         <FormattedMessage id="est_account_value" defaultMessage="Est. Account Value" />
       </div>
       <div className="UserWalletSummary__value">
-        <USDDisplay value={parseFloat(estAccountValue)} />
+        {loadingEstAccountValue || !estAccountValue
+          ? <Loading />
+          : <USDDisplay value={parseFloat(estAccountValue)} />}
       </div>
     </div>
   </div>
@@ -86,14 +89,17 @@ const UserWalletSummary = ({
 
 UserWalletSummary.propTypes = {
   user: PropTypes.shape().isRequired,
-  estAccountValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  estAccountValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   totalVestingShares: PropTypes.string.isRequired,
   totalVestingFundSteem: PropTypes.string.isRequired,
   loading: PropTypes.bool,
+  loadingEstAccountValue: PropTypes.bool,
 };
 
 UserWalletSummary.defaultProps = {
   loading: false,
+  loadingEstAccountValue: false,
+  estAccountValue: null,
 };
 
 export default UserWalletSummary;
diff --git a/src/wallet/UserWalletSummary.less b/src/wallet/UserWalletSummary.less
index 458f0c07..70444be4 100644
--- a/src/wallet/UserWalletSummary.less
+++ b/src/wallet/UserWalletSummary.less
@@ -1,4 +1,5 @@
 @import (reference) "../styles/custom.less";
+@import (reference) "../styles/modules/variables.less";
 
 .UserWalletSummary {
   border: 1px solid @white-gainsboro;
@@ -39,4 +40,10 @@
     margin-left: auto;
     text-align: right;
   }
+
+  @media @small-max-width {
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+  }
 }
diff --git a/src/wallet/UserWalletTransactions.js b/src/wallet/UserWalletTransactions.js
index 320c6cb7..cea15e01 100644
--- a/src/wallet/UserWalletTransactions.js
+++ b/src/wallet/UserWalletTransactions.js
@@ -24,7 +24,12 @@ const getFormattedTransactionAmount = (amount, currency) => {
   );
 };
 
-const UserWalletTransactions = ({ transactions, currentUsername }) => (
+const UserWalletTransactions = ({
+  transactions,
+  currentUsername,
+  totalVestingShares,
+  totalVestingFundSteem,
+}) => (
   <div className="UserWalletTransactions">
     {transactions
       .map((transaction, index) => {
@@ -70,6 +75,8 @@ const UserWalletTransactions = ({ transactions, currentUsername }) => (
                 rewardSteem={transactionDetails.reward_steem}
                 rewardSbd={transactionDetails.reward_sbd}
                 rewardVests={transactionDetails.reward_vests}
+                totalVestingShares={totalVestingShares}
+                totalVestingFundSteem={totalVestingFundSteem}
               />
             );
           case 'transfer_to_savings':
@@ -95,6 +102,8 @@ const UserWalletTransactions = ({ transactions, currentUsername }) => (
 UserWalletTransactions.propTypes = {
   transactions: PropTypes.arrayOf(PropTypes.shape()),
   currentUsername: PropTypes.string,
+  totalVestingShares: PropTypes.string.isRequired,
+  totalVestingFundSteem: PropTypes.string.isRequired,
 };
 
 UserWalletTransactions.defaultProps = {
diff --git a/src/wallet/UserWalletTransactions.less b/src/wallet/UserWalletTransactions.less
index 24b1e920..ff644133 100644
--- a/src/wallet/UserWalletTransactions.less
+++ b/src/wallet/UserWalletTransactions.less
@@ -1,4 +1,5 @@
 @import (reference) "../styles/custom.less";
+@import (reference) "../styles/modules/variables.less";
 
 .UserWalletTransactions {
   background-color: @white;
@@ -16,6 +17,10 @@
     padding: 10px 0;
     margin: 0 15px;
     border-bottom: 1px solid @white-gainsboro;
+
+    &:last-of-type {
+      border-bottom: 0;
+    }
   }
 
   &__memo {
@@ -88,4 +93,31 @@
       }
     }
   }
+
+  @media @small-max-width {
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+  }
+
+  @media @very-small-max-width {
+    &__content-recipient {
+      flex-wrap: wrap;
+    }
+
+    &__transfer {
+      width: 100%;
+      margin-left: 0;
+    }
+
+    &__received {
+      width: 100%;
+      margin-left: 0;
+    }
+
+    &__payout {
+      width: 100%;
+      margin-left: 0;
+    }
+  }
 }
diff --git a/src/wallet/walletReducer.js b/src/wallet/walletReducer.js
index d795c436..d95a37be 100644
--- a/src/wallet/walletReducer.js
+++ b/src/wallet/walletReducer.js
@@ -8,6 +8,7 @@ const initialState = {
   usersTransactions: {},
   usersEstAccountsValues: {},
   usersTransactionsLoading: true,
+  loadingEstAccountValue: true,
 };
 
 export default function walletReducer(state = initialState, action) {
@@ -44,6 +45,11 @@ export default function walletReducer(state = initialState, action) {
         },
         usersTransactionsLoading: false,
       };
+    case walletActions.GET_USER_EST_ACCOUNT_VALUE.START:
+      return {
+        ...state,
+        loadingEstAccountValue: true,
+      };
     case walletActions.GET_USER_EST_ACCOUNT_VALUE.SUCCESS:
       return {
         ...state,
@@ -51,6 +57,12 @@ export default function walletReducer(state = initialState, action) {
           ...state.usersEstAccountsValues,
           [action.payload.username]: action.payload.value,
         },
+        loadingEstAccountValue: false,
+      };
+    case walletActions.GET_USER_EST_ACCOUNT_VALUE.ERROR:
+      return {
+        ...state,
+        loadingEstAccountValue: false,
       };
     default:
       return state;
@@ -64,3 +76,4 @@ export const getTotalVestingFundSteem = state => state.totalVestingFundSteem;
 export const getUsersTransactions = state => state.usersTransactions;
 export const getUsersEstAccountsValues = state => state.usersEstAccountsValues;
 export const getUsersTransactionsLoading = state => state.usersTransactionsLoading;
+export const getLoadingEstAccountValue = state => state.loadingEstAccountValue;


Test patch:
diff --git a/src/wallet/__tests__/__snapshots__/UserWalletSummary.test.js.snap b/src/wallet/__tests__/__snapshots__/UserWalletSummary.test.js.snap
index 416870b3..3ef52184 100644
--- a/src/wallet/__tests__/__snapshots__/UserWalletSummary.test.js.snap
+++ b/src/wallet/__tests__/__snapshots__/UserWalletSummary.test.js.snap
@@ -289,6 +289,7 @@ ShallowWrapper {
       "_currentElement": <UserWalletSummary
         estAccountValue="100.00 STEEM"
         loading={false}
+        loadingEstAccountValue={false}
         totalVestingFundSteem="100 STEEM"
         totalVestingShares="100 STEEM"
         user={
@@ -309,6 +310,7 @@ ShallowWrapper {
         "props": Object {
           "estAccountValue": "100.00 STEEM",
           "loading": false,
+          "loadingEstAccountValue": false,
           "totalVestingFundSteem": "100 STEEM",
           "totalVestingShares": "100 STEEM",
           "user": Object {
@@ -623,6 +625,7 @@ ShallowWrapper {
   "unrendered": <UserWalletSummary
     estAccountValue="100.00 STEEM"
     loading={false}
+    loadingEstAccountValue={false}
     totalVestingFundSteem="100 STEEM"
     totalVestingShares="100 STEEM"
     user={
diff --git a/src/wallet/__tests__/walletReducer.js b/src/wallet/__tests__/walletReducer.js
index 63a7aa49..48c3029a 100644
--- a/src/wallet/__tests__/walletReducer.js
+++ b/src/wallet/__tests__/walletReducer.js
@@ -7,6 +7,7 @@ const reducerInitialState = {
   usersTransactions: {},
   usersEstAccountsValues: {},
   usersTransactionsLoading: true,
+  loadingEstAccountValue: true,
 };
 
 describe('walletReducer', () => {