Repository: busyorg/busy
Pull request #891 (2017-10-23 19:10:55)

Create Wallet page
* WIP - create wallet page (https://github.com/busyorg/busy/projects/6#card-5213698)
![screen shot 2017-10-23 at 3 09 31 pm](https://user-images.githubusercontent.com/5067716/31908248-3ea117a4-b804-11e7-8a0b-ecbc57f5f9ae.png)


bonustrack: - Can you put white background on these frames?
![image](https://user-images.githubusercontent.com/16245250/31955830-c6d1ffe8-b913-11e7-834d-b25c9a3b1f34.png)
- Looks like the icons Steem Power and Steem Dollar are reversed
- Can we have the values in Saving on the same line like this:
![image](https://user-images.githubusercontent.com/16245250/31956130-ab8a74d0-b914-11e7-8406-c07586352757.png)

bonustrack: 1: Can you change the icon and background with the same color than Paresh design?
2: Can you put any amount aligned on the right? (include claim reward amounts)
3: For claim reward, can you hide the 0 amounts? And change VESTS to SP
![image](https://user-images.githubusercontent.com/16245250/32023368-431529d2-ba03-11e7-9409-b04e4c826ecf.png)

bonustrack: - Numbers should be a formatted number like `1,300.000 STEEM` similar than others number in the interface
![image](https://user-images.githubusercontent.com/16245250/32044024-9839812a-ba66-11e7-8b45-d644c5a0a3e2.png)
- Also can you use 22px size for icons? Include balance icons, and change the icon for claim operation to `success_fill` icon?

jm90m: @Sekhmet can you review when you have time? Thanks!
jm90m: @Sekhmet Made updates based on your suggestions, whenever you got time could I get another review? Thanks!
bonustrack: @jm90m can you change the url for the wallet to `/wallet` instead of `/@fabien/wallet`?
bonustrack: Everything else looking good for me to merge, well done!
jm90m: @bonustrack just updated it to use`/wallet`

Patch:
diff --git a/package.json b/package.json
index 9d450766..74903f4f 100644
--- a/package.json
+++ b/package.json
@@ -100,6 +100,7 @@
     "react-router": "^4.1.1",
     "react-router-dom": "^4.1.1",
     "react-router-redux": "^5.0.0-alpha.6",
+    "react-trend": "^1.2.4",
     "react-visibility-sensor": "^3.10.1",
     "redux": "^3.5.2",
     "redux-actions": "^0.12.0",
diff --git a/src/app/Sidebar/LeftSidebar.js b/src/app/Sidebar/LeftSidebar.js
index e06a7263..549b158a 100644
--- a/src/app/Sidebar/LeftSidebar.js
+++ b/src/app/Sidebar/LeftSidebar.js
@@ -7,6 +7,7 @@ import NavigationUser from './NavigationUser';
 
 const LeftSidebar = () => (
   <Switch>
+    <Route path="/@:name/wallet" component={Navigation} />
     <Route path="/@:name" component={UserInfo} />
     <Route path="/activity" component={NavigationUser} />
     <Route path="/replies" component={NavigationUser} />
diff --git a/src/components/Icon/Loading.js b/src/components/Icon/Loading.js
index f5eb3808..f856f1ce 100644
--- a/src/components/Icon/Loading.js
+++ b/src/components/Icon/Loading.js
@@ -4,17 +4,19 @@ import classNames from 'classnames';
 import { Icon } from 'antd';
 import './Loading.less';
 
-const Loading = ({ center }) =>
-  (<div className={classNames('Loading', { 'Loading--center': center })}>
+const Loading = ({ center, style }) =>
+  (<div className={classNames('Loading', { 'Loading--center': center })} style={style}>
     <Icon className="Loading__icon" type="loading" />
   </div>);
 
 Loading.propTypes = {
   center: PropTypes.bool,
+  style: PropTypes.shape(),
 };
 
 Loading.defaultProps = {
   center: true,
+  style: {},
 };
 
 export default Loading;
diff --git a/src/components/Navigation/Sidenav.js b/src/components/Navigation/Sidenav.js
index ceec9a0b..c18e049b 100644
--- a/src/components/Navigation/Sidenav.js
+++ b/src/components/Navigation/Sidenav.js
@@ -4,14 +4,15 @@ import { FormattedMessage } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 import './Sidenav.less';
 
-const isNews = (match, location) => location.pathname !== '/';
+const isNews = (match, location) => location.pathname.match(/trending/);
+const isWallet = (match, location) => location.pathname.match(/wallet/);
 
-const Sidenav = ({ username }) =>
-  (<div>
+const Sidenav = ({ username }) => (
+  <div>
     {username &&
       <ul className="Sidenav">
         <li>
-          <NavLink to={`/@${username}`} activeClassName="Sidenav__item--active">
+          <NavLink to={`/@${username}`}>
             <i className="iconfont icon-mine" />
             <FormattedMessage id="my_profile" defaultMessage="My profile" />
           </NavLink>
@@ -29,13 +30,14 @@ const Sidenav = ({ username }) =>
           </NavLink>
         </li>
         <li>
-          <a target="_blank" rel="noopener noreferrer" href={`https://steemit.com/@${username}/transfers`}>
+          <NavLink to="/wallet" activeClassName="Sidenav__item--active" isActive={isWallet}>
             <i className="iconfont icon-wallet" />
             <FormattedMessage id="wallet" defaultMessage="Wallet" />
-          </a>
+          </NavLink>
         </li>
       </ul>}
-  </div>);
+  </div>
+);
 
 Sidenav.propTypes = {
   username: PropTypes.string,
diff --git a/src/components/Sidebar/SteemTrendingCharts.js b/src/components/Sidebar/SteemTrendingCharts.js
new file mode 100644
index 00000000..231f06ce
--- /dev/null
+++ b/src/components/Sidebar/SteemTrendingCharts.js
@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import Trend from 'react-trend';
+import fetch from 'isomorphic-fetch';
+import _ from 'lodash';
+import Promise from 'bluebird';
+import { FormattedMessage } from 'react-intl';
+import Loading from '../Icon/Loading';
+import './SteemTrendingCharts.less';
+
+const getSteemPriceHistory = () =>
+  fetch('https://min-api.cryptocompare.com/data/histoday?fsym=USD&tsym=STEEM&limit=7').then(res =>
+    res.json(),
+  );
+
+const getSteemDollarPriceHistory = () =>
+  fetch('https://min-api.cryptocompare.com/data/histoday?fsym=USD&tsym=SBD&limit=7').then(res =>
+    res.json(),
+  );
+
+class SteemTrendingCharts extends Component {
+  state = {
+    steemPriceHistory: [],
+    steemDollarPriceHistory: [],
+    loading: false,
+  };
+
+  componentDidMount() {
+    this.getSteemPriceHistories();
+  }
+
+  getSteemPriceHistories = () => {
+    this.setState({
+      loading: true,
+    });
+    Promise.all([getSteemPriceHistory(), getSteemDollarPriceHistory()]).then((response) => {
+      const steemPriceHistory = _.map(response[0].Data, data => data.close);
+      const steemDollarPriceHistory = _.map(response[1].Data, data => data.close);
+      this.setState({
+        steemPriceHistory,
+        steemDollarPriceHistory,
+        loading: false,
+      });
+    });
+  };
+
+  render() {
+    const { steemPriceHistory, steemDollarPriceHistory, loading } = this.state;
+    const currentSteemPrice = _.last(steemPriceHistory);
+    const currentSteemDollarPrice = _.last(steemDollarPriceHistory);
+    const previousSteemPrice = _.nth(steemPriceHistory, -2);
+    const previousSteemDollarPrice = _.nth(steemDollarPriceHistory, -2);
+    const steemPriceIncrease = currentSteemPrice > previousSteemPrice;
+    const steemDollarPriceIncrease = currentSteemDollarPrice > previousSteemDollarPrice;
+
+    return (
+      <div className="SteemTrendingCharts">
+        <h4 className="SteemTrendingCharts__title">
+          <i className="iconfont icon-chart SteemTrendingCharts__icon" />
+          <FormattedMessage id="market" defaultMessage="Market" />
+          <i
+            role="presentation"
+            onClick={this.getSteemPriceHistories}
+            className="iconfont icon-refresh SteemTrendingCharts__icon-refresh"
+          />
+        </h4>
+        <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>
+        </div>
+        {loading
+          ? <Loading />
+          : <Trend data={steemPriceHistory} stroke={'#4757b2'} strokeWidth={5} />}
+        <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>
+        </div>
+        {loading
+          ? <Loading />
+          : <Trend data={steemDollarPriceHistory} stroke={'#4757b2'} strokeWidth={5} />}
+      </div>
+    );
+  }
+}
+
+export default SteemTrendingCharts;
diff --git a/src/components/Sidebar/SteemTrendingCharts.less b/src/components/Sidebar/SteemTrendingCharts.less
new file mode 100644
index 00000000..65aed002
--- /dev/null
+++ b/src/components/Sidebar/SteemTrendingCharts.less
@@ -0,0 +1,57 @@
+@import (reference) "../../styles/custom.less";
+
+.SteemTrendingCharts {
+  background: @white;
+  border-radius: 4px;
+  border: 1px solid @white-gainsboro;
+  padding: 8px 16px 16px 16px;
+
+  &__title {
+    color: @blue-botticelli;
+    font-size: 18px;
+    font-weight: 500;
+  }
+
+  &__divider {
+    width: 100%;
+    height: 1px;
+    margin: 12px 0;
+    background-color: @white-gainsboro;
+  }
+
+  &__icon {
+    color: @purple;
+    margin-right: 5px;
+    vertical-align: -2px;
+  }
+
+  &__icon-refresh {
+    font-size: 22px !important;
+    float: right;
+    margin-top: 5px;
+    cursor: pointer;
+  }
+
+  &__chart-header {
+    display: flex;
+    padding: 10px 0;
+    font-size: 18px;
+    color: @black;
+  }
+
+  &__chart-value {
+    margin-left: auto;
+  }
+
+  &__chart-caret-up {
+    font-size: 12px !important;
+    margin-left: 5px;
+    color: @green;
+  }
+
+  &__chart-caret-down {
+    font-size: 12px !important;
+    margin-left: 5px;
+    color: @red;
+  }
+}
diff --git a/src/components/UserMenu.js b/src/components/UserMenu.js
index ff4aa010..f85add02 100644
--- a/src/components/UserMenu.js
+++ b/src/components/UserMenu.js
@@ -27,6 +27,12 @@ class UserMenu extends React.Component {
     };
   }
 
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      current: nextProps.defaultKey ? nextProps.defaultKey : 'discussions',
+    });
+  }
+
   getItemClasses = key => classNames('UserMenu__item', { 'UserMenu__item--active': this.state.current === key });
 
   handleClick = (e) => {
@@ -59,6 +65,9 @@ class UserMenu extends React.Component {
                   <FormattedNumber value={this.props.following} />
                 </span>
               </li>
+              <li className={this.getItemClasses('transfers')} onClick={this.handleClick} role="presentation" data-key="transfers">
+                <FormattedMessage id="wallet" defaultMessage="Wallet" />
+              </li>
             </ul>
           </Scrollbars>
         </div>
diff --git a/src/helpers/apiHelpers.js b/src/helpers/apiHelpers.js
index 902e12dc..f6db0c58 100644
--- a/src/helpers/apiHelpers.js
+++ b/src/helpers/apiHelpers.js
@@ -1,4 +1,5 @@
 import Promise from 'bluebird';
+import _ from 'lodash';
 import SteemAPI from '../steemAPI';
 import { jsonParse } from '../helpers/formatter';
 
@@ -46,10 +47,10 @@ export const getAccount = username =>
 export const getFollowingCount = username => SteemAPI.getFollowCountAsync(username);
 
 export const getAccountWithFollowingCount = username =>
-  Promise.all([
-    getAccount(username),
-    getFollowingCount(username),
-  ]).then(([account, { following_count, follower_count }]) => ({
+  Promise.all([getAccount(username), getFollowingCount(username)]).then(([
+    account,
+    { following_count, follower_count },
+  ]) => ({
     ...account,
     following_count,
     follower_count,
@@ -66,40 +67,36 @@ export const getFollowers = (username, startForm = '', type = 'blog', limit = 10
   );
 
 export const getAllFollowing = username =>
-  getFollowingCount(username)
-    .get('following_count')
-    .then((followingCount) => {
-      const chunkSize = 100;
-      const limitArray = Array.fill(Array(Math.ceil(followingCount / chunkSize)), chunkSize);
-      return Promise.reduce(
-        limitArray,
-        (currentList, limit) => {
-          const startForm = currentList[currentList.length - 1] || '';
-          return getFollowing(username, startForm, 'blog', limit).then(following =>
-            currentList.slice(0, currentList.length - 1).concat(following),
-          );
-        },
-        [],
-      );
-    });
+  getFollowingCount(username).get('following_count').then((followingCount) => {
+    const chunkSize = 100;
+    const limitArray = Array.fill(Array(Math.ceil(followingCount / chunkSize)), chunkSize);
+    return Promise.reduce(
+      limitArray,
+      (currentList, limit) => {
+        const startForm = currentList[currentList.length - 1] || '';
+        return getFollowing(username, startForm, 'blog', limit).then(following =>
+          currentList.slice(0, currentList.length - 1).concat(following),
+        );
+      },
+      [],
+    );
+  });
 
 export const getAllFollowers = username =>
-  getFollowingCount(username)
-    .get('follower_count')
-    .then((followerCount) => {
-      const chunkSize = 100;
-      const limitArray = Array.fill(Array(Math.ceil(followerCount / chunkSize)), chunkSize);
-      return Promise.reduce(
-        limitArray,
-        (currentList, limit) => {
-          const startForm = currentList[currentList.length - 1] || '';
-          return getFollowers(username, startForm, 'blog', limit).then(following =>
-            currentList.slice(0, currentList.length - 1).concat(following),
-          );
-        },
-        [],
-      );
-    });
+  getFollowingCount(username).get('follower_count').then((followerCount) => {
+    const chunkSize = 100;
+    const limitArray = Array.fill(Array(Math.ceil(followerCount / chunkSize)), chunkSize);
+    return Promise.reduce(
+      limitArray,
+      (currentList, limit) => {
+        const startForm = currentList[currentList.length - 1] || '';
+        return getFollowers(username, startForm, 'blog', limit).then(following =>
+          currentList.slice(0, currentList.length - 1).concat(following),
+        );
+      },
+      [],
+    );
+  });
 
 export const mapToId = (content) => {
   const listById = {};
@@ -110,3 +107,30 @@ export const mapToId = (content) => {
 };
 
 export const mapAPIContentToId = apiRes => mapToId(apiRes.content);
+
+const isWalletTransaction = actionType =>
+  actionType === 'transfer' ||
+  actionType === 'transfer_to_vesting' ||
+  actionType === 'cancel_transfer_from_savings' ||
+  actionType === 'transfer_from_savings' ||
+  actionType === 'transfer_to_savings' ||
+  actionType === 'delegate_vesting_shares' ||
+  actionType === 'claim_reward_balance';
+
+export const getTransactionHistory = account =>
+  SteemAPI.getAccountHistoryAsync(account, -1, 2500).then(results =>
+    _.compact(
+      results.map((action) => {
+        const actionDetails = action[1] || { op: [] };
+        const actionType = actionDetails.op[0];
+
+        if (isWalletTransaction(actionType)) {
+          return actionDetails;
+        }
+
+        return null;
+      }),
+    ),
+  );
+
+export const getDynamicGlobalProperties = () => SteemAPI.getDynamicGlobalPropertiesAsync();
diff --git a/src/helpers/stateHelpers.js b/src/helpers/stateHelpers.js
index a1aa8016..4663c688 100644
--- a/src/helpers/stateHelpers.js
+++ b/src/helpers/stateHelpers.js
@@ -102,3 +102,10 @@ export const sortCommentsFromSteem = (list, commentsState, sortBy = 'trending')
     )
     .reverse();
 };
+
+export const createAsyncActionType = type => ({
+  ACTION: type,
+  START: `${type}_START`,
+  SUCCESS: `${type}_SUCCESS`,
+  ERROR: `${type}_ERROR`,
+});
diff --git a/src/locales/en.json b/src/locales/en.json
index 331d2685..fd69c519 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -174,5 +174,18 @@
   "rank_minnow":"Minnow",
   "rank_dolphin":"Dolphin",
   "rank_orca":"Orca",
-  "rank_whale":"Whale"
-}
\ No newline at end of file
+  "rank_whale":"Whale",
+  "steem":"Steem",
+  "steem_dollar":"Steem Dollar",
+  "steem_power": "Steem Power",
+  "savings":"Savings",
+  "est_account_value": "Est. Account Value",
+  "transferred_to": "Transferred to {username}",
+  "transfer_to_savings": "Transfer to savings {amount} to {username}",
+  "transfer_from_savings": "Transfer from savings {amount} to {username}",
+  "cancel_transfer_from_savings": "Cancel transfer from savings (request {requestId})",
+  "received_from": "Received from {username}",
+  "claim_rewards": "Claim rewards ",
+  "powered_up": "Powered up ",
+  "market": "Market"
+}
diff --git a/src/reducers.js b/src/reducers.js
index f5509e24..da4c31ce 100644
--- a/src/reducers.js
+++ b/src/reducers.js
@@ -86,3 +86,10 @@ export const getFavoriteCategories = state => fromFavorites.getFavoriteCategorie
 
 export const getIsTransferVisible = state => fromWallet.getIsTransferVisible(state.wallet);
 export const getTransferTo = state => fromWallet.getTransferTo(state.wallet);
+export const getTotalVestingShares = state => fromWallet.getTotalVestingShares(state.wallet);
+export const getTotalVestingFundSteem = state => fromWallet.getTotalVestingFundSteem(state.wallet);
+export const getUsersTransactions = state => fromWallet.getUsersTransactions(state.wallet);
+export const getUsersTransactionsLoading = state =>
+  fromWallet.getUsersTransactionsLoading(state.wallet);
+export const getUsersEstAccountsValues = state =>
+  fromWallet.getUsersEstAccountsValues(state.wallet);
diff --git a/src/routes.js b/src/routes.js
index 94659d9b..2685e26e 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -21,6 +21,7 @@ import Team from './statics/Team';
 import Write from './post/Write/Write';
 import Drafts from './post/Write/Drafts';
 import RequireLogin from './auth/RequireLogin';
+import Wallet from './wallet/Wallet';
 
 export default (
   <Wrapper>
@@ -87,6 +88,14 @@ export default (
           </RequireLogin>
         )}
       />
+      <Route
+        path="/wallet"
+        render={() => (
+          <RequireLogin>
+            <Wallet />
+          </RequireLogin>
+        )}
+      />
       <Route path="/@:name" component={User} />
       <Route path="/:category/@:author/:permlink" component={Post} />
       <Route path="/" component={Page} />
diff --git a/src/styles/custom.less b/src/styles/custom.less
index 3ea9af4d..4f77653d 100644
--- a/src/styles/custom.less
+++ b/src/styles/custom.less
@@ -10,11 +10,16 @@
 @yellow: #ffd500;
 @green:  #54d2a0;
 @blue:   #0275d8;
+@blue-baliHai: #8798a4;
+@blue-botticelli: #99aab5;
+@blue-heather: #A1AFBA;
+@blue-solitude: #F5F6F9;
 @teal:   #5bc0de;
 @pink:   #ff5b77;
 @purple: #4757b2;
 @normal-grey: #4f545c;
 @grey-mortar: #595959;
+@grey-nightRider: #303030;
 
 @primary-color: @purple;
 
diff --git a/src/styles/fonts.less b/src/styles/fonts.less
index 00366ecb..591d46a7 100644
--- a/src/styles/fonts.less
+++ b/src/styles/fonts.less
@@ -1,4 +1,4 @@
-@import '//at.alicdn.com/t/font_317125_w38304xqpt6pf1or.css';
+@import '//at.alicdn.com/t/font_317125_jub4xaf1rf3whfr.css';
 
 @font-face {
   font-family: Whitney;
diff --git a/src/user/User.js b/src/user/User.js
index a4840e08..4916caae 100644
--- a/src/user/User.js
+++ b/src/user/User.js
@@ -24,6 +24,7 @@ import UserFollowers from './UserFollowers';
 import UserFollowing from './UserFollowing';
 import UserReblogs from './UserReblogs';
 import UserFeed from './UserFeed';
+import UserWallet from './UserWallet';
 
 export const needs = [getAccountWithFollowingCount];
 
@@ -142,6 +143,7 @@ export default class User extends React.Component {
               <Route path={`${match.path}/followed`} component={UserFollowing} />
               <Route path={`${match.path}/reblogs`} component={UserReblogs} />
               <Route path={`${match.path}/feed`} component={UserFeed} />
+              <Route path={`${match.path}/transfers`} component={UserWallet} />
             </div>
           </div>
         </div>
diff --git a/src/user/UserWallet.js b/src/user/UserWallet.js
new file mode 100644
index 00000000..6af3b3fb
--- /dev/null
+++ b/src/user/UserWallet.js
@@ -0,0 +1,141 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router-dom';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import UserWalletSummary from '../wallet/UserWalletSummary';
+import UserWalletTransactions from '../wallet/UserWalletTransactions';
+import Loading from '../components/Icon/Loading';
+import {
+  getUser,
+  getAuthenticatedUserName,
+  getTotalVestingShares,
+  getTotalVestingFundSteem,
+  getUsersTransactions,
+  getUsersTransactionsLoading,
+  getUsersEstAccountsValues,
+} from '../reducers';
+import {
+  getGlobalProperties,
+  getUserTransactions,
+  getUserEstAccountValue,
+} from '../wallet/walletActions';
+import { getAccountWithFollowingCount } from './usersActions';
+
+@withRouter
+@connect(
+  (state, ownProps) => ({
+    user: getUser(
+      state,
+      ownProps.isCurrentUser ? state.auth.user.name : ownProps.match.params.name,
+    ),
+    authenticatedUserName: getAuthenticatedUserName(state),
+    totalVestingShares: getTotalVestingShares(state),
+    totalVestingFundSteem: getTotalVestingFundSteem(state),
+    usersTransactions: getUsersTransactions(state),
+    usersTransactionsLoading: getUsersTransactionsLoading(state),
+    usersEstAccountsValues: getUsersEstAccountsValues(state),
+  }),
+  {
+    getGlobalProperties,
+    getUserTransactions,
+    getAccountWithFollowingCount,
+    getUserEstAccountValue,
+  },
+)
+class Wallet extends Component {
+  static propTypes = {
+    location: PropTypes.shape().isRequired,
+    totalVestingShares: PropTypes.string.isRequired,
+    totalVestingFundSteem: PropTypes.string.isRequired,
+    user: PropTypes.shape().isRequired,
+    getGlobalProperties: PropTypes.func.isRequired,
+    getUserTransactions: PropTypes.func.isRequired,
+    getUserEstAccountValue: PropTypes.func.isRequired,
+    getAccountWithFollowingCount: PropTypes.func.isRequired,
+    usersTransactions: PropTypes.shape().isRequired,
+    usersEstAccountsValues: PropTypes.shape().isRequired,
+    usersTransactionsLoading: PropTypes.bool.isRequired,
+    isCurrentUser: PropTypes.bool,
+    authenticatedUserName: PropTypes.string,
+  };
+
+  static defaultProps = {
+    isCurrentUser: false,
+    authenticatedUserName: '',
+  };
+
+  componentWillMount() {
+    const {
+      totalVestingShares,
+      totalVestingFundSteem,
+      usersEstAccountsValues,
+      usersTransactions,
+      user,
+      isCurrentUser,
+      authenticatedUserName,
+    } = this.props;
+    const username = isCurrentUser
+      ? authenticatedUserName
+      : this.props.location.pathname.match(/@(.*)(.*?)\//)[1];
+
+    if (_.isEmpty(totalVestingFundSteem) || _.isEmpty(totalVestingShares)) {
+      this.props.getGlobalProperties();
+    }
+
+    if (_.isEmpty(usersTransactions[username])) {
+      this.props.getUserTransactions(username);
+    }
+
+    if (_.isEmpty(user)) {
+      this.props.getAccountWithFollowingCount({ name: username });
+    }
+
+    if (_.isEmpty(usersEstAccountsValues[username]) && !_.isEmpty(user.name)) {
+      this.props.getUserEstAccountValue(user);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { user, isCurrentUser } = this.props;
+    const username = isCurrentUser
+      ? user.name
+      : this.props.location.pathname.match(/@(.*)(.*?)\//)[1];
+    if (_.isEmpty(nextProps.usersEstAccountsValues[username]) && !_.isEmpty(user.name)) {
+      this.props.getUserEstAccountValue(user);
+    }
+  }
+
+  render() {
+    const {
+      user,
+      totalVestingShares,
+      totalVestingFundSteem,
+      usersTransactions,
+      usersTransactionsLoading,
+      usersEstAccountsValues,
+    } = this.props;
+    const transactions = usersTransactions[user.name] || [];
+    const estAccountValue = usersEstAccountsValues[user.name] || 0;
+
+    return (
+      <div>
+        <UserWalletSummary
+          user={user}
+          estAccountValue={estAccountValue}
+          loading={user.isFetching}
+          totalVestingShares={totalVestingShares}
+          totalVestingFundSteem={totalVestingFundSteem}
+        />
+        {transactions.length === 0 && usersTransactionsLoading
+          ? <Loading style={{ marginTop: '20px' }} />
+          : <UserWalletTransactions
+            transactions={usersTransactions[user.name]}
+            currentUsername={user.name}
+          />}
+      </div>
+    );
+  }
+}
+
+export default Wallet;
diff --git a/src/wallet/ClaimReward.js b/src/wallet/ClaimReward.js
new file mode 100644
index 00000000..dbce6974
--- /dev/null
+++ b/src/wallet/ClaimReward.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, FormattedRelative, FormattedNumber } from 'react-intl';
+
+const getFormattedPayout = (rewardSteem, rewardSbd, rewardVests) => {
+  const payouts = [];
+  const parsedRewardSteem = parseFloat(rewardSteem);
+  const parsedRewardSbd = parseFloat(rewardSbd);
+  const parsedRewardVests = parseFloat(rewardVests);
+
+  if (parsedRewardSteem > 0) {
+    payouts.push(
+      <span key="STEEM" className="UserWalletTransactions__payout-rewards">
+        <FormattedNumber
+          value={parsedRewardSteem}
+          minimumFractionDigits={3}
+          maximumFractionDigits={3}
+        />
+        {' STEEM'}
+      </span>,
+    );
+  }
+
+  if (parsedRewardSbd > 0) {
+    payouts.push(
+      <span key="SBD" className="UserWalletTransactions__payout-rewards">
+        <FormattedNumber
+          value={parsedRewardSbd}
+          minimumFractionDigits={3}
+          maximumFractionDigits={3}
+        />
+        {' SBD'}
+      </span>,
+    );
+  }
+
+  if (parsedRewardVests > 0) {
+    payouts.push(
+      <span key="SP" className="UserWalletTransactions__payout-rewards">
+        <FormattedNumber
+          value={parsedRewardVests}
+          minimumFractionDigits={3}
+          maximumFractionDigits={3}
+        />
+        {' SP'}
+      </span>,
+    );
+  }
+
+  return payouts;
+};
+
+const ClaimReward = ({ timestamp, rewardSteem, rewardSbd, rewardVests }) => (
+  <div className="UserWalletTransactions__transaction">
+    <div className="UserWalletTransactions__icon-container">
+      <i className="iconfont icon-success_fill UserWalletTransactions__icon" />
+    </div>
+    <div className="UserWalletTransactions__content">
+      <div className="UserWalletTransactions__content-recipient">
+        <FormattedMessage id="claim_rewards" defaultMessage="Claim rewards" />
+        <span className="UserWalletTransactions__payout">
+          {getFormattedPayout(rewardSteem, rewardSbd, rewardVests)}
+        </span>
+      </div>
+      <span className="UserWalletTransactions__timestamp">
+        <FormattedRelative value={`${timestamp}Z`} />
+      </span>
+    </div>
+  </div>
+);
+
+ClaimReward.propTypes = {
+  timestamp: PropTypes.string.isRequired,
+  rewardSteem: PropTypes.string.isRequired,
+  rewardSbd: PropTypes.string.isRequired,
+  rewardVests: PropTypes.string.isRequired,
+};
+
+export default ClaimReward;
diff --git a/src/wallet/PowerUpTransaction.js b/src/wallet/PowerUpTransaction.js
new file mode 100644
index 00000000..41c22d8a
--- /dev/null
+++ b/src/wallet/PowerUpTransaction.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, FormattedRelative } from 'react-intl';
+
+const PowerUpTransaction = ({ timestamp, amount }) => (
+  <div className="UserWalletTransactions__transaction">
+    <div className="UserWalletTransactions__icon-container">
+      <i className="iconfont icon-flashlight UserWalletTransactions__icon" />
+    </div>
+    <div className="UserWalletTransactions__content">
+      <div className="UserWalletTransactions__content-recipient">
+        <FormattedMessage id="powered_up" defaultMessage="Powered up " />
+        <span className="UserWalletTransactions__payout">
+          {amount}
+        </span>
+      </div>
+      <span className="UserWalletTransactions__timestamp">
+        <FormattedRelative value={`${timestamp}Z`} />
+      </span>
+    </div>
+  </div>
+);
+
+PowerUpTransaction.propTypes = {
+  timestamp: PropTypes.string.isRequired,
+  amount: PropTypes.element.isRequired,
+};
+
+export default PowerUpTransaction;
diff --git a/src/wallet/ReceiveTransaction.js b/src/wallet/ReceiveTransaction.js
new file mode 100644
index 00000000..9691c2cf
--- /dev/null
+++ b/src/wallet/ReceiveTransaction.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { FormattedMessage, FormattedRelative } from 'react-intl';
+import Avatar from '../components/Avatar';
+
+
+const ReceiveTransaction = ({ from, memo, amount, timestamp }) => (
+  <div className="UserWalletTransactions__transaction">
+    <div className="UserWalletTransactions__avatar">
+      <Avatar username={from} size={40} />
+    </div>
+    <div className="UserWalletTransactions__content">
+      <div className="UserWalletTransactions__content-recipient">
+        <FormattedMessage
+          id="received_from"
+          defaultMessage="Received from {username}"
+          values={{
+            username: <Link to={`/@${from}`}>{from}</Link>,
+          }}
+        />
+        <span className="UserWalletTransactions__received">
+          {'+ '}{amount}
+        </span>
+      </div>
+      <span className="UserWalletTransactions__timestamp">
+        <FormattedRelative value={`${timestamp}Z`} />
+      </span>
+      <span className="UserWalletTransactions__memo">
+        {memo}
+      </span>
+    </div>
+  </div>
+);
+
+ReceiveTransaction.propTypes = {
+  from: PropTypes.string,
+  memo: PropTypes.string,
+  amount: PropTypes.element,
+  timestamp: PropTypes.string,
+};
+
+ReceiveTransaction.defaultProps = {
+  from: '',
+  memo: '',
+  amount: <span />,
+  timestamp: '',
+};
+
+export default ReceiveTransaction;
diff --git a/src/wallet/SavingsTransaction.js b/src/wallet/SavingsTransaction.js
new file mode 100644
index 00000000..f46f6f47
--- /dev/null
+++ b/src/wallet/SavingsTransaction.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { FormattedMessage, FormattedRelative } from 'react-intl';
+import Avatar from '../components/Avatar';
+
+const getSavingsTransactionMessage = (transactionType, transactionDetails, amount) => {
+  switch (transactionType) {
+    case 'cancel_transfer_from_savings':
+      return (
+        <FormattedMessage
+          id="cancel_transfer_from_savings"
+          defaultMessage="Cancel transfer from savings (request {requestId})"
+          values={{
+            requestId: transactionDetails.request_id,
+          }}
+        />
+      );
+    case 'transfer_to_savings':
+      return (
+        <FormattedMessage
+          id="transfer_to_savings"
+          defaultMessage="Transfer to savings {amount} to {username}"
+          values={{
+            amount,
+            username: <Link to={`/@${transactionDetails.to}`}>{transactionDetails.to}</Link>,
+          }}
+        />
+      );
+    case 'transfer_from_savings':
+      return (
+        <FormattedMessage
+          id="transfer_from_savings"
+          defaultMessage="Transfer from savings {amount} to {username}"
+          values={{
+            amount,
+            username: <Link to={`/@${transactionDetails.from}`}>{transactionDetails.from}</Link>,
+          }}
+        />
+      );
+    default:
+      return null;
+  }
+};
+
+const SavingsTransaction = ({ timestamp, transactionType, transactionDetails, amount }) => (
+  <div className="UserWalletTransactions__transaction">
+    <div className="UserWalletTransactions__avatar">
+      <Avatar
+        username={
+          transactionType === 'transfer_to_savings'
+            ? transactionDetails.to
+            : transactionDetails.from
+        }
+        size={40}
+      />
+    </div>
+    <div className="UserWalletTransactions__content">
+      <div className="UserWalletTransactions__content-recipient">
+        {getSavingsTransactionMessage(transactionType, transactionDetails, amount)}
+      </div>
+      <span className="UserWalletTransactions__timestamp">
+        <FormattedRelative value={`${timestamp}Z`} />
+      </span>
+      <span className="UserWalletTransactions__memo">
+        {transactionDetails.memo}
+      </span>
+    </div>
+  </div>
+);
+
+SavingsTransaction.propTypes = {
+  timestamp: PropTypes.string,
+  transactionDetails: PropTypes.shape(),
+  transactionType: PropTypes.string,
+  amount: PropTypes.element,
+};
+
+SavingsTransaction.defaultProps = {
+  timestamp: '',
+  transactionDetails: {},
+  transactionType: PropTypes.string,
+  amount: <span />,
+};
+
+export default SavingsTransaction;
diff --git a/src/wallet/TransferTransaction.js b/src/wallet/TransferTransaction.js
new file mode 100644
index 00000000..5ee81ef8
--- /dev/null
+++ b/src/wallet/TransferTransaction.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, FormattedRelative } from 'react-intl';
+import { Link } from 'react-router-dom';
+import Avatar from '../components/Avatar';
+
+const TransferTransaction = ({ to, memo, amount, timestamp }) => (
+  <div className="UserWalletTransactions__transaction">
+    <div className="UserWalletTransactions__avatar">
+      <Avatar username={to} size={40} />
+    </div>
+    <div className="UserWalletTransactions__content">
+      <div className="UserWalletTransactions__content-recipient">
+        <FormattedMessage
+          id="transferred_to"
+          defaultMessage="Transferred to {username}"
+          values={{
+            username: <Link to={`/@${to}`}>{to}</Link>,
+          }}
+        />
+        <span className="UserWalletTransactions__transfer">
+          {'- '}{amount}
+        </span>
+      </div>
+      <span className="UserWalletTransactions__timestamp">
+        <FormattedRelative value={`${timestamp}Z`} />
+      </span>
+      <span className="UserWalletTransactions__memo">
+        {memo}
+      </span>
+    </div>
+  </div>
+);
+
+TransferTransaction.propTypes = {
+  to: PropTypes.string,
+  memo: PropTypes.string,
+  amount: PropTypes.element,
+  timestamp: PropTypes.string,
+};
+
+TransferTransaction.defaultProps = {
+  to: '',
+  memo: '',
+  amount: <span />,
+  timestamp: '',
+};
+
+export default TransferTransaction;
diff --git a/src/wallet/UserWalletSummary.js b/src/wallet/UserWalletSummary.js
new file mode 100644
index 00000000..bfa48f93
--- /dev/null
+++ b/src/wallet/UserWalletSummary.js
@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, FormattedNumber } from 'react-intl';
+import steem from 'steem';
+import Loading from '../components/Icon/Loading';
+import USDDisplay from '../components/Utils/USDDisplay';
+import './UserWalletSummary.less';
+
+const UserWalletSummary = ({
+  user,
+  estAccountValue,
+  loading,
+  totalVestingShares,
+  totalVestingFundSteem,
+}) => (
+  <div className="UserWalletSummary">
+    <div className="UserWalletSummary__item">
+      <i className="iconfont icon-steem UserWalletSummary__icon" />
+      <div className="UserWalletSummary__label">
+        <FormattedMessage id="steem" defaultMessage="Steem" />
+      </div>
+      <div className="UserWalletSummary__value">
+        {loading
+          ? <Loading />
+          : <span><FormattedNumber value={parseFloat(user.balance)} />{' STEEM'}</span>}
+      </div>
+    </div>
+    <div className="UserWalletSummary__item">
+      <i className="iconfont icon-Dollar UserWalletSummary__icon" />
+      <div className="UserWalletSummary__label">
+        <FormattedMessage id="steem_dollar" defaultMessage="Steem Dollar" />
+      </div>
+      <div className="UserWalletSummary__value">
+        {loading
+          ? <Loading />
+          : <span><FormattedNumber value={parseFloat(user.sbd_balance)} />{' SBD'}</span>}
+      </div>
+    </div>
+    <div className="UserWalletSummary__item">
+      <i className="iconfont icon-flashlight_fill UserWalletSummary__icon" />
+      <div className="UserWalletSummary__label">
+        <FormattedMessage id="steem_power" defaultMessage="Steem Power" />
+      </div>
+      <div className="UserWalletSummary__value">
+        {loading
+          ? <Loading />
+          : <span>
+            <FormattedNumber
+              value={parseFloat(
+                steem.formatter.vestToSteem(
+                  user.vesting_shares,
+                  totalVestingShares,
+                  totalVestingFundSteem,
+                ),
+              )}
+            />
+            {' SP'}
+          </span>}
+      </div>
+    </div>
+    <div className="UserWalletSummary__item">
+      <i className="iconfont icon-savings UserWalletSummary__icon" />
+      <div className="UserWalletSummary__label">
+        <FormattedMessage id="savings" defaultMessage="Savings" />
+      </div>
+      <div className="UserWalletSummary__value">
+        {loading
+          ? <Loading />
+          : <span>
+            <FormattedNumber value={parseFloat(user.savings_balance)} />{' STEEM, '}
+            <FormattedNumber value={parseFloat(user.savings_sbd_balance)} />{' SBD'}
+          </span>}
+      </div>
+    </div>
+    <div className="UserWalletSummary__item">
+      <i className="iconfont icon-people_fill UserWalletSummary__icon" />
+      <div className="UserWalletSummary__label">
+        <FormattedMessage id="est_account_value" defaultMessage="Est. Account Value" />
+      </div>
+      <div className="UserWalletSummary__value">
+        <USDDisplay value={parseFloat(estAccountValue)} />
+      </div>
+    </div>
+  </div>
+);
+
+UserWalletSummary.propTypes = {
+  user: PropTypes.shape().isRequired,
+  estAccountValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  totalVestingShares: PropTypes.string.isRequired,
+  totalVestingFundSteem: PropTypes.string.isRequired,
+  loading: PropTypes.bool,
+};
+
+UserWalletSummary.defaultProps = {
+  loading: false,
+};
+
+export default UserWalletSummary;
diff --git a/src/wallet/UserWalletSummary.less b/src/wallet/UserWalletSummary.less
new file mode 100644
index 00000000..458f0c07
--- /dev/null
+++ b/src/wallet/UserWalletSummary.less
@@ -0,0 +1,42 @@
+@import (reference) "../styles/custom.less";
+
+.UserWalletSummary {
+  border: 1px solid @white-gainsboro;
+  border-radius: @border-radius-base;
+  background-color: @white;
+
+  &__item {
+    display: flex;
+    border-bottom: 1px solid @white-gainsboro;
+    align-items: center;
+    margin: 0 15px;
+    flex-direction: row;
+    padding: 10px 0;
+
+    &:last-of-type {
+      border-bottom: 0;
+    }
+  }
+
+  &__icon {
+    color: @blue-baliHai;
+    margin-right: 10px;
+  }
+
+  &__label {
+    align-items: center;
+    color: @black;
+    display: flex;
+    font-size: 18px;
+  }
+
+  &__value {
+    align-items: center;
+    color: @purple;
+    display: flex;
+    font-size: 18px;
+    font-weight: bold;
+    margin-left: auto;
+    text-align: right;
+  }
+}
diff --git a/src/wallet/UserWalletTransactions.js b/src/wallet/UserWalletTransactions.js
new file mode 100644
index 00000000..320c6cb7
--- /dev/null
+++ b/src/wallet/UserWalletTransactions.js
@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedNumber } from 'react-intl';
+import ReceiveTransaction from './ReceiveTransaction';
+import TransferTransaction from './TransferTransaction';
+import SavingsTransaction from './SavingsTransaction';
+import PowerUpTransaction from './PowerUpTransaction';
+import ClaimReward from './ClaimReward';
+import './UserWalletTransactions.less';
+
+const getFormattedTransactionAmount = (amount, currency) => {
+  const transaction = amount.split(' ');
+  const transactionAmount = parseFloat(transaction[0]).toFixed(3);
+  const transactionCurrency = currency || transaction[1];
+  return (
+    <span>
+      <FormattedNumber
+        value={transactionAmount}
+        minimumFractionDigits={3}
+        maximumFractionDigits={3}
+      />
+      {` ${transactionCurrency}`}
+    </span>
+  );
+};
+
+const UserWalletTransactions = ({ transactions, currentUsername }) => (
+  <div className="UserWalletTransactions">
+    {transactions
+      .map((transaction, index) => {
+        const key = `${transaction.trx_id}${index}`;
+        const transactionType = transaction.op[0];
+        const transactionDetails = transaction.op[1];
+
+        switch (transactionType) {
+          case 'transfer_to_vesting':
+            return (
+              <PowerUpTransaction
+                key={key}
+                amount={getFormattedTransactionAmount(transactionDetails.amount, 'SP')}
+                timestamp={transaction.timestamp}
+              />
+            );
+          case 'transfer':
+            if (transactionDetails.to === currentUsername) {
+              return (
+                <ReceiveTransaction
+                  key={key}
+                  from={transactionDetails.from}
+                  memo={transactionDetails.memo}
+                  amount={getFormattedTransactionAmount(transactionDetails.amount)}
+                  timestamp={transaction.timestamp}
+                />
+              );
+            }
+            return (
+              <TransferTransaction
+                key={key}
+                to={transactionDetails.to}
+                memo={transactionDetails.memo}
+                amount={getFormattedTransactionAmount(transactionDetails.amount)}
+                timestamp={transaction.timestamp}
+              />
+            );
+          case 'claim_reward_balance':
+            return (
+              <ClaimReward
+                key={key}
+                timestamp={transaction.timestamp}
+                rewardSteem={transactionDetails.reward_steem}
+                rewardSbd={transactionDetails.reward_sbd}
+                rewardVests={transactionDetails.reward_vests}
+              />
+            );
+          case 'transfer_to_savings':
+          case 'transfer_from_savings':
+          case 'cancel_transfer_from_savings':
+            return (
+              <SavingsTransaction
+                key={key}
+                transactionDetails={transactionDetails}
+                transactionType={transactionType}
+                amount={getFormattedTransactionAmount(transactionDetails.amount)}
+                timestamp={transaction.timestamp}
+              />
+            );
+          default:
+            return null;
+        }
+      })
+      .reverse()}
+  </div>
+);
+
+UserWalletTransactions.propTypes = {
+  transactions: PropTypes.arrayOf(PropTypes.shape()),
+  currentUsername: PropTypes.string,
+};
+
+UserWalletTransactions.defaultProps = {
+  transactions: [],
+  currentUsername: '',
+};
+
+export default UserWalletTransactions;
diff --git a/src/wallet/UserWalletTransactions.less b/src/wallet/UserWalletTransactions.less
new file mode 100644
index 00000000..24b1e920
--- /dev/null
+++ b/src/wallet/UserWalletTransactions.less
@@ -0,0 +1,91 @@
+@import (reference) "../styles/custom.less";
+
+.UserWalletTransactions {
+  background-color: @white;
+  border: 1px solid @white-gainsboro;
+  border-radius: @border-radius-base;
+  margin: 20px 0;
+
+  &:empty {
+    display: none;
+  }
+
+  &__transaction {
+    color: @grey-nightRider;
+    display: flex;
+    padding: 10px 0;
+    margin: 0 15px;
+    border-bottom: 1px solid @white-gainsboro;
+  }
+
+  &__memo {
+    word-wrap: break-word;
+  }
+
+  &__avatar {
+    margin-top: 5px;
+  }
+
+  &__icon-container {
+    align-items: center;
+    color: @blue-heather;
+    background-color: @blue-solitude;
+    border-radius: 4px;
+    display: flex;
+    height: 40px;
+    justify-content: center;
+    margin-top: 4px;
+    width: 44px;
+  }
+
+  &__icon {
+    font-size: 22px !important;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    padding-left: 10px;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  &__content-recipient {
+    display: flex;
+    flex-direction: row;
+    font-weight: bold;
+    white-space: nowrap;
+  }
+
+  &__timestamp {
+    color: @blue-botticelli;
+    font-size: 14px;
+  }
+
+  &__transfer {
+    color: @red;
+    margin-left: auto;
+  }
+
+  &__received {
+    color: @green;
+    margin-left: auto;
+  }
+
+  &__payout {
+    margin-left: auto;
+  }
+
+  &__payout-rewards {
+    &:after {
+      content: ' - ';
+      color: @blue-botticelli;
+    }
+
+    &:last-of-type {
+      &:after {
+        content: '';
+      }
+    }
+  }
+}
diff --git a/src/wallet/Wallet.js b/src/wallet/Wallet.js
new file mode 100644
index 00000000..1a414bf9
--- /dev/null
+++ b/src/wallet/Wallet.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import Affix from '../components/Utils/Affix';
+import LeftSidebar from '../app/Sidebar/LeftSidebar';
+import SteemTrendingCharts from '../components/Sidebar/SteemTrendingCharts';
+import UserWallet from '../user/UserWallet';
+
+const Wallet = () => (
+  <div className="shifted">
+    <div className="feed-layout container">
+      <Affix className="leftContainer" stickPosition={77}>
+        <div className="left">
+          <LeftSidebar />
+        </div>
+      </Affix>
+      <Affix className="rightContainer" stickPosition={77}>
+        <div className="right">
+          <SteemTrendingCharts />
+        </div>
+      </Affix>
+      <div className="center">
+        <UserWallet isCurrentUser />
+      </div>
+    </div>
+  </div>
+);
+export default Wallet;
diff --git a/src/wallet/walletActions.js b/src/wallet/walletActions.js
index 227c56be..8327d954 100644
--- a/src/wallet/walletActions.js
+++ b/src/wallet/walletActions.js
@@ -1,7 +1,48 @@
+import steem from 'steem';
 import { createAction } from 'redux-actions';
+import { createAsyncActionType } from '../helpers/stateHelpers';
+import { getTransactionHistory, getDynamicGlobalProperties } from '../helpers/apiHelpers';
 
 export const OPEN_TRANSFER = '@wallet/OPEN_TRANSFER';
 export const CLOSE_TRANSFER = '@wallet/CLOSE_TRANSFER';
+export const GET_GLOBAL_PROPERTIES = createAsyncActionType('@wallet/GET_GLOBAL_PROPERTIES');
+export const GET_USER_TRANSACTIONS = createAsyncActionType('@users/GET_USER_TRANSACTIONS');
+export const GET_USER_EST_ACCOUNT_VALUE = createAsyncActionType(
+  '@users/GET_USER_EST_ACCOUNT_VALUE',
+);
 
 export const openTransfer = createAction(OPEN_TRANSFER);
 export const closeTransfer = createAction(CLOSE_TRANSFER);
+
+export const getGlobalProperties = () => (dispatch) => {
+  dispatch({
+    type: GET_GLOBAL_PROPERTIES.ACTION,
+    payload: {
+      promise: getDynamicGlobalProperties(),
+    },
+  });
+};
+
+export const getUserTransactions = username => (dispatch) => {
+  dispatch({
+    type: GET_USER_TRANSACTIONS.ACTION,
+    payload: {
+      promise: getTransactionHistory(username).then(transactions => ({
+        username,
+        transactions,
+      })),
+    },
+  });
+};
+
+export const getUserEstAccountValue = user => (dispatch) => {
+  dispatch({
+    type: GET_USER_EST_ACCOUNT_VALUE.ACTION,
+    payload: {
+      promise: steem.formatter.estimateAccountValue(user).then(value => ({
+        username: user.name,
+        value,
+      })),
+    },
+  });
+};
diff --git a/src/wallet/walletReducer.js b/src/wallet/walletReducer.js
index f100882f..d795c436 100644
--- a/src/wallet/walletReducer.js
+++ b/src/wallet/walletReducer.js
@@ -1,23 +1,57 @@
-import { OPEN_TRANSFER, CLOSE_TRANSFER } from './walletActions';
+import * as walletActions from './walletActions';
 
 const initialState = {
   transferVisible: false,
   transferTo: '',
+  totalVestingShares: '',
+  totalVestingFundSteem: '',
+  usersTransactions: {},
+  usersEstAccountsValues: {},
+  usersTransactionsLoading: true,
 };
 
 export default function walletReducer(state = initialState, action) {
   switch (action.type) {
-    case OPEN_TRANSFER:
+    case walletActions.OPEN_TRANSFER:
       return {
         ...state,
         transferVisible: true,
         transferTo: action.payload,
       };
-    case CLOSE_TRANSFER:
+    case walletActions.CLOSE_TRANSFER:
       return {
         ...state,
         transferVisible: false,
       };
+    case walletActions.GET_GLOBAL_PROPERTIES.SUCCESS: {
+      return {
+        ...state,
+        totalVestingFundSteem: action.payload.total_vesting_fund_steem,
+        totalVestingShares: action.payload.total_vesting_shares,
+      };
+    }
+    case walletActions.GET_USER_TRANSACTIONS.START:
+      return {
+        ...state,
+        usersTransactionsLoading: true,
+      };
+    case walletActions.GET_USER_TRANSACTIONS.SUCCESS:
+      return {
+        ...state,
+        usersTransactions: {
+          ...state.usersTransactions,
+          [action.payload.username]: action.payload.transactions,
+        },
+        usersTransactionsLoading: false,
+      };
+    case walletActions.GET_USER_EST_ACCOUNT_VALUE.SUCCESS:
+      return {
+        ...state,
+        usersEstAccountsValues: {
+          ...state.usersEstAccountsValues,
+          [action.payload.username]: action.payload.value,
+        },
+      };
     default:
       return state;
   }
@@ -25,3 +59,8 @@ export default function walletReducer(state = initialState, action) {
 
 export const getIsTransferVisible = state => state.transferVisible;
 export const getTransferTo = state => state.transferTo;
+export const getTotalVestingShares = state => state.totalVestingShares;
+export const getTotalVestingFundSteem = state => state.totalVestingFundSteem;
+export const getUsersTransactions = state => state.usersTransactions;
+export const getUsersEstAccountsValues = state => state.usersEstAccountsValues;
+export const getUsersTransactionsLoading = state => state.usersTransactionsLoading;


Test patch:
diff --git a/src/stories/__snapshots__/stories.test.js.snap b/src/stories/__snapshots__/stories.test.js.snap
index 7925135f..3c546893 100644
--- a/src/stories/__snapshots__/stories.test.js.snap
+++ b/src/stories/__snapshots__/stories.test.js.snap
@@ -657,9 +657,11 @@ exports[`Storyshots Navigation Sidenav logged 1`] = `
       </li>
       <li>
         <a
-          href="https://steemit.com/@guest123/transfers"
-          rel="noopener noreferrer"
-          target="_blank"
+          aria-current={false}
+          className={undefined}
+          href="/wallet"
+          onClick={[Function]}
+          style={undefined}
         >
           <i
             className="iconfont icon-wallet"
diff --git a/src/wallet/__tests__/ClaimReward.test.js b/src/wallet/__tests__/ClaimReward.test.js
new file mode 100644
index 00000000..5f2436be
--- /dev/null
+++ b/src/wallet/__tests__/ClaimReward.test.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import ClaimReward from '../ClaimReward';
+
+describe('(Component) ClaimReward', () => {
+  describe('with default prop values', () => {
+    it('renders and matches snapshot', () => {
+      const props = {
+        timestamp: '0',
+        rewardSteem: '0 STEEM',
+        rewardSbd: '0 SBD',
+        rewardVests: '0 SP',
+      };
+      const wrapper = shallow(<ClaimReward {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/wallet/__tests__/PowerUpTransaction.test.js b/src/wallet/__tests__/PowerUpTransaction.test.js
new file mode 100644
index 00000000..ec6011ce
--- /dev/null
+++ b/src/wallet/__tests__/PowerUpTransaction.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import PowerUpTransaction from '../PowerUpTransaction';
+
+describe('(Component) PowerUpTransaction', () => {
+  describe('with default prop values', () => {
+    it('renders and matches snapshot', () => {
+      const props = {
+        timestamp: '0',
+        amount: '0 STEEM',
+      };
+      const wrapper = shallow(<PowerUpTransaction {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/wallet/__tests__/ReceiveTransaction.test.js b/src/wallet/__tests__/ReceiveTransaction.test.js
new file mode 100644
index 00000000..1c8a0def
--- /dev/null
+++ b/src/wallet/__tests__/ReceiveTransaction.test.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import ReceiveTransaction from '../ReceiveTransaction';
+
+describe('(Component) ReceiveTransaction', () => {
+  describe('with default prop values', () => {
+    it('renders and matches snapshot', () => {
+      const props = {
+        from: 'hellosteem',
+        memo: 'Test Memo',
+        amount: '100 STEEM',
+        timestamp: '0',
+      };
+      const wrapper = shallow(<ReceiveTransaction {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/wallet/__tests__/TransferTransaction.test.js b/src/wallet/__tests__/TransferTransaction.test.js
new file mode 100644
index 00000000..caf52678
--- /dev/null
+++ b/src/wallet/__tests__/TransferTransaction.test.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import TransferTransaction from '../TransferTransaction';
+
+describe('(Component) TransferTransaction', () => {
+  describe('with default prop values', () => {
+    it('renders and matches snapshot', () => {
+      const props = {
+        to: 'hellosteem',
+        memo: 'Test Transfer Transaction',
+        amount: '100 STEEM',
+        timestamp: '0',
+      };
+      const wrapper = shallow(<TransferTransaction {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/wallet/__tests__/UserWalletSummary.test.js b/src/wallet/__tests__/UserWalletSummary.test.js
new file mode 100644
index 00000000..548ac23e
--- /dev/null
+++ b/src/wallet/__tests__/UserWalletSummary.test.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import UserWalletSummary from '../UserWalletSummary';
+
+describe('(Component) UserWalletSummary', () => {
+  describe('with default prop values', () => {
+    it('renders and matches snapshot', () => {
+      const props = {
+        user: {
+          balance: '100',
+          vesting_shares: '0',
+          savings_balance: '100 STEEM',
+          savings_sbd_balance: '1000 STEEM',
+        },
+        estAccountValue: '100.00 STEEM',
+        totalVestingShares: '100 STEEM',
+        totalVestingFundSteem: '100 STEEM',
+        loading: false,
+      };
+      const wrapper = shallow(<UserWalletSummary {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/wallet/__tests__/UserWalletTransactions.test.js b/src/wallet/__tests__/UserWalletTransactions.test.js
new file mode 100644
index 00000000..bf88d7fd
--- /dev/null
+++ b/src/wallet/__tests__/UserWalletTransactions.test.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import UserWalletTransactions from '../UserWalletTransactions';
+
+describe('(Component) UserWalletTransactions', () => {
+  describe('with default prop values', () => {
+    it('renders and matches snapshot', () => {
+      const props = {
+        transactions: [
+          {
+            timestamp: '0',
+            op: [
+              'transfer_to_vesting',
+              {
+                amount: '100 STEEM',
+              },
+            ],
+          },
+          {
+            timestamp: '0',
+            op: [
+              'transfer',
+              {
+                from: 'hellosteem1',
+                memo: 'transfer memo',
+                amount: '100 STEEM',
+              },
+            ],
+          },
+        ],
+        currentUsername: 'hellosteem',
+      };
+      const wrapper = shallow(<UserWalletTransactions {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/wallet/__tests__/__snapshots__/ClaimReward.test.js.snap b/src/wallet/__tests__/__snapshots__/ClaimReward.test.js.snap
new file mode 100644
index 00000000..766a1fc8
--- /dev/null
+++ b/src/wallet/__tests__/__snapshots__/ClaimReward.test.js.snap
@@ -0,0 +1,216 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`(Component) ClaimReward with default prop values renders and matches snapshot 1`] = `
+ShallowWrapper {
+  "complexSelector": ComplexSelector {
+    "buildPredicate": [Function],
+    "childrenOfNode": [Function],
+    "findWhereUnwrapped": [Function],
+  },
+  "length": 1,
+  "node": <div
+    className="UserWalletTransactions__transaction"
+  >
+    <div
+      className="UserWalletTransactions__icon-container"
+    >
+      <i
+        className="iconfont icon-success_fill UserWalletTransactions__icon"
+      />
+    </div>
+    <div
+      className="UserWalletTransactions__content"
+    >
+      <div
+        className="UserWalletTransactions__content-recipient"
+      >
+        <FormattedMessage
+          defaultMessage="Claim rewards"
+          id="claim_rewards"
+          values={Object {}}
+        />
+        <span
+          className="UserWalletTransactions__payout"
+        />
+      </div>
+      <span
+        className="UserWalletTransactions__timestamp"
+      >
+        <FormattedRelative
+          updateInterval={10000}
+          value="0Z"
+        />
+      </span>
+    </div>
+  </div>,
+  "nodes": Array [
+    <div
+      className="UserWalletTransactions__transaction"
+    >
+      <div
+        className="UserWalletTransactions__icon-container"
+      >
+        <i
+          className="iconfont icon-success_fill UserWalletTransactions__icon"
+        />
+      </div>
+      <div
+        className="UserWalletTransactions__content"
+      >
+        <div
+          className="UserWalletTransactions__content-recipient"
+        >
+          <FormattedMessage
+            defaultMessage="Claim rewards"
+            id="claim_rewards"
+            values={Object {}}
+          />
+          <span
+            className="UserWalletTransactions__payout"
+          />
+        </div>
+        <span
+          className="UserWalletTransactions__timestamp"
+        >
+          <FormattedRelative
+            updateInterval={10000}
+            value="0Z"
+          />
+        </span>
+      </div>
+    </div>,
+  ],
+  "options": Object {},
+  "renderer": ReactShallowRenderer {
+    "_instance": ShallowComponentWrapper {
+      "_calledComponentWillUnmount": false,
+      "_compositeType": 2,
+      "_context": Object {},
+      "_currentElement": <ClaimReward
+        rewardSbd="0 SBD"
+        rewardSteem="0 STEEM"
+        rewardVests="0 SP"
+        timestamp="0"
+      />,
+      "_debugID": 1,
+      "_hostContainerInfo": null,
+      "_hostParent": null,
+      "_instance": StatelessComponent {
+        "_reactInternalInstance": [Circular],
+        "context": Object {},
+        "props": Object {
+          "rewardSbd": "0 SBD",
+          "rewardSteem": "0 STEEM",
+          "rewardVests": "0 SP",
+          "timestamp": "0",
+        },
+        "refs": Object {},
+        "state": null,
+        "updater": Object {
+          "enqueueCallback": [Function],
+          "enqueueCallbackInternal": [Function],
+          "enqueueElementInternal": [Function],
+          "enqueueForceUpdate": [Function],
+          "enqueueReplaceState": [Function],
+          "enqueueSetState": [Function],
+          "isMounted": [Function],
+          "validateCallback": [Function],
+        },
+      },
+      "_mountOrder": 1,
+      "_pendingCallbacks": null,
+      "_pendingElement": null,
+      "_pendingForceUpdate": false,
+      "_pendingReplaceState": false,
+      "_pendingStateQueue": null,
+      "_renderedComponent": NoopInternalComponent {
+        "_currentElement": <div
+          className="UserWalletTransactions__transaction"
+        >
+          <div
+            className="UserWalletTransactions__icon-container"
+          >
+            <i
+              className="iconfont icon-success_fill UserWalletTransactions__icon"
+            />
+          </div>
+          <div
+            className="UserWalletTransactions__content"
+          >
+            <div
+              className="UserWalletTransactions__content-recipient"
+            >
+              <FormattedMessage
+                defaultMessage="Claim rewards"
+                id="claim_rewards"
+                values={Object {}}
+              />
+              <span
+                className="UserWalletTransactions__payout"
+              />
+            </div>
+            <span
+              className="UserWalletTransactions__timestamp"
+            >
+              <FormattedRelative
+                updateInterval={10000}
+                value="0Z"
+              />
+            </span>
+          </div>
+        </div>,
+        "_debugID": 2,
+        "_renderedOutput": <div
+          className="UserWalletTransactions__transaction"
+        >
+          <div
+            className="UserWalletTransactions__icon-container"
+          >
+            <i
+              className="iconfont icon-success_fill UserWalletTransactions__icon"
+            />
+          </div>
+          <div
+            className="UserWalletTransactions__content"
+          >
+            <div
+              className="UserWalletTransactions__content-recipient"
+            >
+              <FormattedMessage
+                defaultMessage="Claim rewards"
+                id="claim_rewards"
+                values={Object {}}
+              />
+              <span
+                className="UserWalletTransactions__payout"
+              />
+            </div>
+            <span
+              className="UserWalletTransactions__timestamp"
+            >
+              <FormattedRelative
+                updateInterval={10000}
+                value="0Z"
+              />
+            </span>
+          </div>
+        </div>,
+      },
+      "_renderedNodeType": 0,
+      "_rootNodeID": 0,
+      "_topLevelWrapper": null,
+      "_updateBatchNumber": null,
+      "_warnedAboutRefsInRender": false,
+    },
+    "getRenderOutput": [Function],
+    "render": [Function],
+  },
+  "root": [Circular],
+  "unrendered": <ClaimReward
+    rewardSbd="0 SBD"
+    rewardSteem="0 STEEM"
+    rewardVests="0 SP"
+    timestamp="0"
+  />,
+}
+`;
diff --git a/src/wallet/__tests__/__snapshots__/PowerUpTransaction.test.js.snap b/src/wallet/__tests__/__snapshots__/PowerUpTransaction.test.js.snap
new file mode 100644
index 00000000..5d05f9a5
--- /dev/null
+++ b/src/wallet/__tests__/__snapshots__/PowerUpTransaction.test.js.snap
@@ -0,0 +1,218 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`(Component) PowerUpTransaction with default prop values renders and matches snapshot 1`] = `
+ShallowWrapper {
+  "complexSelector": ComplexSelector {
+    "buildPredicate": [Function],
+    "childrenOfNode": [Function],
+    "findWhereUnwrapped": [Function],
+  },
+  "length": 1,
+  "node": <div
+    className="UserWalletTransactions__transaction"
+  >
+    <div
+      className="UserWalletTransactions__icon-container"
+    >
+      <i
+        className="iconfont icon-flashlight UserWalletTransactions__icon"
+      />
+    </div>
+    <div
+      className="UserWalletTransactions__content"
+    >
+      <div
+        className="UserWalletTransactions__content-recipient"
+      >
+        <FormattedMessage
+          defaultMessage="Powered up "
+          id="powered_up"
+          values={Object {}}
+        />
+        <span
+          className="UserWalletTransactions__payout"
+        >
+          0 STEEM
+        </span>
+      </div>
+      <span
+        className="UserWalletTransactions__timestamp"
+      >
+        <FormattedRelative
+          updateInterval={10000}
+          value="0Z"
+        />
+      </span>
+    </div>
+  </div>,
+  "nodes": Array [
+    <div
+      className="UserWalletTransactions__transaction"
+    >
+      <div
+        className="UserWalletTransactions__icon-container"
+      >
+        <i
+          className="iconfont icon-flashlight UserWalletTransactions__icon"
+        />
+      </div>
+      <div
+        className="UserWalletTransactions__content"
+      >
+        <div
+          className="UserWalletTransactions__content-recipient"
+        >
+          <FormattedMessage
+            defaultMessage="Powered up "
+            id="powered_up"
+            values={Object {}}
+          />
+          <span
+            className="UserWalletTransactions__payout"
+          >
+            0 STEEM
+          </span>
+        </div>
+        <span
+          className="UserWalletTransactions__timestamp"
+        >
+          <FormattedRelative
+            updateInterval={10000}
+            value="0Z"
+          />
+        </span>
+      </div>
+    </div>,
+  ],
+  "options": Object {},
+  "renderer": ReactShallowRenderer {
+    "_instance": ShallowComponentWrapper {
+      "_calledComponentWillUnmount": false,
+      "_compositeType": 2,
+      "_context": Object {},
+      "_currentElement": <PowerUpTransaction
+        amount="0 STEEM"
+        timestamp="0"
+      />,
+      "_debugID": 1,
+      "_hostContainerInfo": null,
+      "_hostParent": null,
+      "_instance": StatelessComponent {
+        "_reactInternalInstance": [Circular],
+        "context": Object {},
+        "props": Object {
+          "amount": "0 STEEM",
+          "timestamp": "0",
+        },
+        "refs": Object {},
+        "state": null,
+        "updater": Object {
+          "enqueueCallback": [Function],
+          "enqueueCallbackInternal": [Function],
+          "enqueueElementInternal": [Function],
+          "enqueueForceUpdate": [Function],
+          "enqueueReplaceState": [Function],
+          "enqueueSetState": [Function],
+          "isMounted": [Function],
+          "validateCallback": [Function],
+        },
+      },
+      "_mountOrder": 1,
+      "_pendingCallbacks": null,
+      "_pendingElement": null,
+      "_pendingForceUpdate": false,
+      "_pendingReplaceState": false,
+      "_pendingStateQueue": null,
+      "_renderedComponent": NoopInternalComponent {
+        "_currentElement": <div
+          className="UserWalletTransactions__transaction"
+        >
+          <div
+            className="UserWalletTransactions__icon-container"
+          >
+            <i
+              className="iconfont icon-flashlight UserWalletTransactions__icon"
+            />
+          </div>
+          <div
+            className="UserWalletTransactions__content"
+          >
+            <div
+              className="UserWalletTransactions__content-recipient"
+            >
+              <FormattedMessage
+                defaultMessage="Powered up "
+                id="powered_up"
+                values={Object {}}
+              />
+              <span
+                className="UserWalletTransactions__payout"
+              >
+                0 STEEM
+              </span>
+            </div>
+            <span
+              className="UserWalletTransactions__timestamp"
+            >
+              <FormattedRelative
+                updateInterval={10000}
+                value="0Z"
+              />
+            </span>
+          </div>
+        </div>,
+        "_debugID": 2,
+        "_renderedOutput": <div
+          className="UserWalletTransactions__transaction"
+        >
+          <div
+            className="UserWalletTransactions__icon-container"
+          >
+            <i
+              className="iconfont icon-flashlight UserWalletTransactions__icon"
+            />
+          </div>
+          <div
+            className="UserWalletTransactions__content"
+          >
+            <div
+              className="UserWalletTransactions__content-recipient"
+            >
+              <FormattedMessage
+                defaultMessage="Powered up "
+                id="powered_up"
+                values={Object {}}
+              />
+              <span
+                className="UserWalletTransactions__payout"
+              >
+                0 STEEM
+              </span>
+            </div>
+            <span
+              className="UserWalletTransactions__timestamp"
+            >
+              <FormattedRelative
+                updateInterval={10000}
+                value="0Z"
+              />
+            </span>
+          </div>
+        </div>,
+      },
+      "_renderedNodeType": 0,
+      "_rootNodeID": 0,
+      "_topLevelWrapper": null,
+      "_updateBatchNumber": null,
+      "_warnedAboutRefsInRender": false,
+    },
+    "getRenderOutput": [Function],
+    "render": [Function],
+  },
+  "root": [Circular],
+  "unrendered": <PowerUpTransaction
+    amount="0 STEEM"
+    timestamp="0"
+  />,
+}
+`;
diff --git a/src/wallet/__tests__/__snapshots__/ReceiveTransaction.test.js.snap b/src/wallet/__tests__/__snapshots__/ReceiveTransaction.test.js.snap
new file mode 100644
index 00000000..ebf2107d
--- /dev/null
+++ b/src/wallet/__tests__/__snapshots__/ReceiveTransaction.test.js.snap
@@ -0,0 +1,288 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`(Component) ReceiveTransaction with default prop values renders and matches snapshot 1`] = `
+ShallowWrapper {
+  "complexSelector": ComplexSelector {
+    "buildPredicate": [Function],
+    "childrenOfNode": [Function],
+    "findWhereUnwrapped": [Function],
+  },
+  "length": 1,
+  "node": <div
+    className="UserWalletTransactions__transaction"
+  >
+    <div
+      className="UserWalletTransactions__avatar"
+    >
+      <Avatar
+        size={40}
+        username="hellosteem"
+      />
+    </div>
+    <div
+      className="UserWalletTransactions__content"
+    >
+      <div
+        className="UserWalletTransactions__content-recipient"
+      >
+        <FormattedMessage
+          defaultMessage="Received from {username}"
+          id="received_from"
+          values={
+            Object {
+              "username": <Link
+                replace={false}
+                to="/@hellosteem"
+              >
+                hellosteem
+              </Link>,
+            }
+          }
+        />
+        <span
+          className="UserWalletTransactions__received"
+        >
+          + 
+          100 STEEM
+        </span>
+      </div>
+      <span
+        className="UserWalletTransactions__timestamp"
+      >
+        <FormattedRelative
+          updateInterval={10000}
+          value="0Z"
+        />
+      </span>
+      <span
+        className="UserWalletTransactions__memo"
+      >
+        Test Memo
+      </span>
+    </div>
+  </div>,
+  "nodes": Array [
+    <div
+      className="UserWalletTransactions__transaction"
+    >
+      <div
+        className="UserWalletTransactions__avatar"
+      >
+        <Avatar
+          size={40}
+          username="hellosteem"
+        />
+      </div>
+      <div
+        className="UserWalletTransactions__content"
+      >
+        <div
+          className="UserWalletTransactions__content-recipient"
+        >
+          <FormattedMessage
+            defaultMessage="Received from {username}"
+            id="received_from"
+            values={
+              Object {
+                "username": <Link
+                  replace={false}
+                  to="/@hellosteem"
+                >
+                  hellosteem
+                </Link>,
+              }
+            }
+          />
+          <span
+            className="UserWalletTransactions__received"
+          >
+            + 
+            100 STEEM
+          </span>
+        </div>
+        <span
+          className="UserWalletTransactions__timestamp"
+        >
+          <FormattedRelative
+            updateInterval={10000}
+            value="0Z"
+          />
+        </span>
+        <span
+          className="UserWalletTransactions__memo"
+        >
+          Test Memo
+        </span>
+      </div>
+    </div>,
+  ],
+  "options": Object {},
+  "renderer": ReactShallowRenderer {
+    "_instance": ShallowComponentWrapper {
+      "_calledComponentWillUnmount": false,
+      "_compositeType": 2,
+      "_context": Object {},
+      "_currentElement": <ReceiveTransaction
+        amount="100 STEEM"
+        from="hellosteem"
+        memo="Test Memo"
+        timestamp="0"
+      />,
+      "_debugID": 1,
+      "_hostContainerInfo": null,
+      "_hostParent": null,
+      "_instance": StatelessComponent {
+        "_reactInternalInstance": [Circular],
+        "context": Object {},
+        "props": Object {
+          "amount": "100 STEEM",
+          "from": "hellosteem",
+          "memo": "Test Memo",
+          "timestamp": "0",
+        },
+        "refs": Object {},
+        "state": null,
+        "updater": Object {
+          "enqueueCallback": [Function],
+          "enqueueCallbackInternal": [Function],
+          "enqueueElementInternal": [Function],
+          "enqueueForceUpdate": [Function],
+          "enqueueReplaceState": [Function],
+          "enqueueSetState": [Function],
+          "isMounted": [Function],
+          "validateCallback": [Function],
+        },
+      },
+      "_mountOrder": 1,
+      "_pendingCallbacks": null,
+      "_pendingElement": null,
+      "_pendingForceUpdate": false,
+      "_pendingReplaceState": false,
+      "_pendingStateQueue": null,
+      "_renderedComponent": NoopInternalComponent {
+        "_currentElement": <div
+          className="UserWalletTransactions__transaction"
+        >
+          <div
+            className="UserWalletTransactions__avatar"
+          >
+            <Avatar
+              size={40}
+              username="hellosteem"
+            />
+          </div>
+          <div
+            className="UserWalletTransactions__content"
+          >
+            <div
+              className="UserWalletTransactions__content-recipient"
+            >
+              <FormattedMessage
+                defaultMessage="Received from {username}"
+                id="received_from"
+                values={
+                  Object {
+                    "username": <Link
+                      replace={false}
+                      to="/@hellosteem"
+                    >
+                      hellosteem
+                    </Link>,
+                  }
+                }
+              />
+              <span
+                className="UserWalletTransactions__received"
+              >
+                + 
+                100 STEEM
+              </span>
+            </div>
+            <span
+              className="UserWalletTransactions__timestamp"
+            >
+              <FormattedRelative
+                updateInterval={10000}
+                value="0Z"
+              />
+            </span>
+            <span
+              className="UserWalletTransactions__memo"
+            >
+              Test Memo
+            </span>
+          </div>
+        </div>,
+        "_debugID": 2,
+        "_renderedOutput": <div
+          className="UserWalletTransactions__transaction"
+        >
+          <div
+            className="UserWalletTransactions__avatar"
+          >
+            <Avatar
+              size={40}
+              username="hellosteem"
+            />
+          </div>
+          <div
+            className="UserWalletTransactions__content"
+          >
+            <div
+              className="UserWalletTransactions__content-recipient"
+            >
+              <FormattedMessage
+                defaultMessage="Received from {username}"
+                id="received_from"
+                values={
+                  Object {
+                    "username": <Link
+                      replace={false}
+                      to="/@hellosteem"
+                    >
+                      hellosteem
+                    </Link>,
+                  }
+                }
+              />
+              <span
+                className="UserWalletTransactions__received"
+              >
+                + 
+                100 STEEM
+              </span>
+            </div>
+            <span
+              className="UserWalletTransactions__timestamp"
+            >
+              <FormattedRelative
+                updateInterval={10000}
+                value="0Z"
+              />
+            </span>
+            <span
+              className="UserWalletTransactions__memo"
+            >
+              Test Memo
+            </span>
+          </div>
+        </div>,
+      },
+      "_renderedNodeType": 0,
+      "_rootNodeID": 0,
+      "_topLevelWrapper": null,
+      "_updateBatchNumber": null,
+      "_warnedAboutRefsInRender": false,
+    },
+    "getRenderOutput": [Function],
+    "render": [Function],
+  },
+  "root": [Circular],
+  "unrendered": <ReceiveTransaction
+    amount="100 STEEM"
+    from="hellosteem"
+    memo="Test Memo"
+    timestamp="0"
+  />,
+}
+`;
diff --git a/src/wallet/__tests__/__snapshots__/TransferTransaction.test.js.snap b/src/wallet/__tests__/__snapshots__/TransferTransaction.test.js.snap
new file mode 100644
index 00000000..f3341040
--- /dev/null
+++ b/src/wallet/__tests__/__snapshots__/TransferTransaction.test.js.snap
@@ -0,0 +1,288 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`(Component) TransferTransaction with default prop values renders and matches snapshot 1`] = `
+ShallowWrapper {
+  "complexSelector": ComplexSelector {
+    "buildPredicate": [Function],
+    "childrenOfNode": [Function],
+    "findWhereUnwrapped": [Function],
+  },
+  "length": 1,
+  "node": <div
+    className="UserWalletTransactions__transaction"
+  >
+    <div
+      className="UserWalletTransactions__avatar"
+    >
+      <Avatar
+        size={40}
+        username="hellosteem"
+      />
+    </div>
+    <div
+      className="UserWalletTransactions__content"
+    >
+      <div
+        className="UserWalletTransactions__content-recipient"
+      >
+        <FormattedMessage
+          defaultMessage="Transferred to {username}"
+          id="transferred_to"
+          values={
+            Object {
+              "username": <Link
+                replace={false}
+                to="/@hellosteem"
+              >
+                hellosteem
+              </Link>,
+            }
+          }
+        />
+        <span
+          className="UserWalletTransactions__transfer"
+        >
+          - 
+          100 STEEM
+        </span>
+      </div>
+      <span
+        className="UserWalletTransactions__timestamp"
+      >
+        <FormattedRelative
+          updateInterval={10000}
+          value="0Z"
+        />
+      </span>
+      <span
+        className="UserWalletTransactions__memo"
+      >
+        Test Transfer Transaction
+      </span>
+    </div>
+  </div>,
+  "nodes": Array [
+    <div
+      className="UserWalletTransactions__transaction"
+    >
+      <div
+        className="UserWalletTransactions__avatar"
+      >
+        <Avatar
+          size={40}
+          username="hellosteem"
+        />
+      </div>
+      <div
+        className="UserWalletTransactions__content"
+      >
+        <div
+          className="UserWalletTransactions__content-recipient"
+        >
+          <FormattedMessage
+            defaultMessage="Transferred to {username}"
+            id="transferred_to"
+            values={
+              Object {
+                "username": <Link
+                  replace={false}
+                  to="/@hellosteem"
+                >
+                  hellosteem
+                </Link>,
+              }
+            }
+          />
+          <span
+            className="UserWalletTransactions__transfer"
+          >
+            - 
+            100 STEEM
+          </span>
+        </div>
+        <span
+          className="UserWalletTransactions__timestamp"
+        >
+          <FormattedRelative
+            updateInterval={10000}
+            value="0Z"
+          />
+        </span>
+        <span
+          className="UserWalletTransactions__memo"
+        >
+          Test Transfer Transaction
+        </span>
+      </div>
+    </div>,
+  ],
+  "options": Object {},
+  "renderer": ReactShallowRenderer {
+    "_instance": ShallowComponentWrapper {
+      "_calledComponentWillUnmount": false,
+      "_compositeType": 2,
+      "_context": Object {},
+      "_currentElement": <TransferTransaction
+        amount="100 STEEM"
+        memo="Test Transfer Transaction"
+        timestamp="0"
+        to="hellosteem"
+      />,
+      "_debugID": 1,
+      "_hostContainerInfo": null,
+      "_hostParent": null,
+      "_instance": StatelessComponent {
+        "_reactInternalInstance": [Circular],
+        "context": Object {},
+        "props": Object {
+          "amount": "100 STEEM",
+          "memo": "Test Transfer Transaction",
+          "timestamp": "0",
+          "to": "hellosteem",
+        },
+        "refs": Object {},
+        "state": null,
+        "updater": Object {
+          "enqueueCallback": [Function],
+          "enqueueCallbackInternal": [Function],
+          "enqueueElementInternal": [Function],
+          "enqueueForceUpdate": [Function],
+          "enqueueReplaceState": [Function],
+          "enqueueSetState": [Function],
+          "isMounted": [Function],
+          "validateCallback": [Function],
+        },
+      },
+      "_mountOrder": 1,
+      "_pendingCallbacks": null,
+      "_pendingElement": null,
+      "_pendingForceUpdate": false,
+      "_pendingReplaceState": false,
+      "_pendingStateQueue": null,
+      "_renderedComponent": NoopInternalComponent {
+        "_currentElement": <div
+          className="UserWalletTransactions__transaction"
+        >
+          <div
+            className="UserWalletTransactions__avatar"
+          >
+            <Avatar
+              size={40}
+              username="hellosteem"
+            />
+          </div>
+          <div
+            className="UserWalletTransactions__content"
+          >
+            <div
+              className="UserWalletTransactions__content-recipient"
+            >
+              <FormattedMessage
+                defaultMessage="Transferred to {username}"
+                id="transferred_to"
+                values={
+                  Object {
+                    "username": <Link
+                      replace={false}
+                      to="/@hellosteem"
+                    >
+                      hellosteem
+                    </Link>,
+                  }
+                }
+              />
+              <span
+                className="UserWalletTransactions__transfer"
+              >
+                - 
+                100 STEEM
+              </span>
+            </div>
+            <span
+              className="UserWalletTransactions__timestamp"
+            >
+              <FormattedRelative
+                updateInterval={10000}
+                value="0Z"
+              />
+            </span>
+            <span
+              className="UserWalletTransactions__memo"
+            >
+              Test Transfer Transaction
+            </span>
+          </div>
+        </div>,
+        "_debugID": 2,
+        "_renderedOutput": <div
+          className="UserWalletTransactions__transaction"
+        >
+          <div
+            className="UserWalletTransactions__avatar"
+          >
+            <Avatar
+              size={40}
+              username="hellosteem"
+            />
+          </div>
+          <div
+            className="UserWalletTransactions__content"
+          >
+            <div
+              className="UserWalletTransactions__content-recipient"
+            >
+              <FormattedMessage
+                defaultMessage="Transferred to {username}"
+                id="transferred_to"
+                values={
+                  Object {
+                    "username": <Link
+                      replace={false}
+                      to="/@hellosteem"
+                    >
+                      hellosteem
+                    </Link>,
+                  }
+                }
+              />
+              <span
+                className="UserWalletTransactions__transfer"
+              >
+                - 
+                100 STEEM
+              </span>
+            </div>
+            <span
+              className="UserWalletTransactions__timestamp"
+            >
+              <FormattedRelative
+                updateInterval={10000}
+                value="0Z"
+              />
+            </span>
+            <span
+              className="UserWalletTransactions__memo"
+            >
+              Test Transfer Transaction
+            </span>
+          </div>
+        </div>,
+      },
+      "_renderedNodeType": 0,
+      "_rootNodeID": 0,
+      "_topLevelWrapper": null,
+      "_updateBatchNumber": null,
+      "_warnedAboutRefsInRender": false,
+    },
+    "getRenderOutput": [Function],
+    "render": [Function],
+  },
+  "root": [Circular],
+  "unrendered": <TransferTransaction
+    amount="100 STEEM"
+    memo="Test Transfer Transaction"
+    timestamp="0"
+    to="hellosteem"
+  />,
+}
+`;
diff --git a/src/wallet/__tests__/__snapshots__/UserWalletSummary.test.js.snap b/src/wallet/__tests__/__snapshots__/UserWalletSummary.test.js.snap
new file mode 100644
index 00000000..416870b3
--- /dev/null
+++ b/src/wallet/__tests__/__snapshots__/UserWalletSummary.test.js.snap
@@ -0,0 +1,638 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`(Component) UserWalletSummary with default prop values renders and matches snapshot 1`] = `
+ShallowWrapper {
+  "complexSelector": ComplexSelector {
+    "buildPredicate": [Function],
+    "childrenOfNode": [Function],
+    "findWhereUnwrapped": [Function],
+  },
+  "length": 1,
+  "node": <div
+    className="UserWalletSummary"
+  >
+    <div
+      className="UserWalletSummary__item"
+    >
+      <i
+        className="iconfont icon-steem UserWalletSummary__icon"
+      />
+      <div
+        className="UserWalletSummary__label"
+      >
+        <FormattedMessage
+          defaultMessage="Steem"
+          id="steem"
+          values={Object {}}
+        />
+      </div>
+      <div
+        className="UserWalletSummary__value"
+      >
+        <span>
+          <FormattedNumber
+            value={100}
+          />
+           STEEM
+        </span>
+      </div>
+    </div>
+    <div
+      className="UserWalletSummary__item"
+    >
+      <i
+        className="iconfont icon-Dollar UserWalletSummary__icon"
+      />
+      <div
+        className="UserWalletSummary__label"
+      >
+        <FormattedMessage
+          defaultMessage="Steem Dollar"
+          id="steem_dollar"
+          values={Object {}}
+        />
+      </div>
+      <div
+        className="UserWalletSummary__value"
+      >
+        <span>
+          <FormattedNumber
+            value={NaN}
+          />
+           SBD
+        </span>
+      </div>
+    </div>
+    <div
+      className="UserWalletSummary__item"
+    >
+      <i
+        className="iconfont icon-flashlight_fill UserWalletSummary__icon"
+      />
+      <div
+        className="UserWalletSummary__label"
+      >
+        <FormattedMessage
+          defaultMessage="Steem Power"
+          id="steem_power"
+          values={Object {}}
+        />
+      </div>
+      <div
+        className="UserWalletSummary__value"
+      >
+        <span>
+          <FormattedNumber
+            value={0}
+          />
+           SP
+        </span>
+      </div>
+    </div>
+    <div
+      className="UserWalletSummary__item"
+    >
+      <i
+        className="iconfont icon-savings UserWalletSummary__icon"
+      />
+      <div
+        className="UserWalletSummary__label"
+      >
+        <FormattedMessage
+          defaultMessage="Savings"
+          id="savings"
+          values={Object {}}
+        />
+      </div>
+      <div
+        className="UserWalletSummary__value"
+      >
+        <span>
+          <FormattedNumber
+            value={100}
+          />
+           STEEM, 
+          <FormattedNumber
+            value={1000}
+          />
+           SBD
+        </span>
+      </div>
+    </div>
+    <div
+      className="UserWalletSummary__item"
+    >
+      <i
+        className="iconfont icon-people_fill UserWalletSummary__icon"
+      />
+      <div
+        className="UserWalletSummary__label"
+      >
+        <FormattedMessage
+          defaultMessage="Est. Account Value"
+          id="est_account_value"
+          values={Object {}}
+        />
+      </div>
+      <div
+        className="UserWalletSummary__value"
+      >
+        <USDDisplay
+          value={100}
+        />
+      </div>
+    </div>
+  </div>,
+  "nodes": Array [
+    <div
+      className="UserWalletSummary"
+    >
+      <div
+        className="UserWalletSummary__item"
+      >
+        <i
+          className="iconfont icon-steem UserWalletSummary__icon"
+        />
+        <div
+          className="UserWalletSummary__label"
+        >
+          <FormattedMessage
+            defaultMessage="Steem"
+            id="steem"
+            values={Object {}}
+          />
+        </div>
+        <div
+          className="UserWalletSummary__value"
+        >
+          <span>
+            <FormattedNumber
+              value={100}
+            />
+             STEEM
+          </span>
+        </div>
+      </div>
+      <div
+        className="UserWalletSummary__item"
+      >
+        <i
+          className="iconfont icon-Dollar UserWalletSummary__icon"
+        />
+        <div
+          className="UserWalletSummary__label"
+        >
+          <FormattedMessage
+            defaultMessage="Steem Dollar"
+            id="steem_dollar"
+            values={Object {}}
+          />
+        </div>
+        <div
+          className="UserWalletSummary__value"
+        >
+          <span>
+            <FormattedNumber
+              value={NaN}
+            />
+             SBD
+          </span>
+        </div>
+      </div>
+      <div
+        className="UserWalletSummary__item"
+      >
+        <i
+          className="iconfont icon-flashlight_fill UserWalletSummary__icon"
+        />
+        <div
+          className="UserWalletSummary__label"
+        >
+          <FormattedMessage
+            defaultMessage="Steem Power"
+            id="steem_power"
+            values={Object {}}
+          />
+        </div>
+        <div
+          className="UserWalletSummary__value"
+        >
+          <span>
+            <FormattedNumber
+              value={0}
+            />
+             SP
+          </span>
+        </div>
+      </div>
+      <div
+        className="UserWalletSummary__item"
+      >
+        <i
+          className="iconfont icon-savings UserWalletSummary__icon"
+        />
+        <div
+          className="UserWalletSummary__label"
+        >
+          <FormattedMessage
+            defaultMessage="Savings"
+            id="savings"
+            values={Object {}}
+          />
+        </div>
+        <div
+          className="UserWalletSummary__value"
+        >
+          <span>
+            <FormattedNumber
+              value={100}
+            />
+             STEEM, 
+            <FormattedNumber
+              value={1000}
+            />
+             SBD
+          </span>
+        </div>
+      </div>
+      <div
+        className="UserWalletSummary__item"
+      >
+        <i
+          className="iconfont icon-people_fill UserWalletSummary__icon"
+        />
+        <div
+          className="UserWalletSummary__label"
+        >
+          <FormattedMessage
+            defaultMessage="Est. Account Value"
+            id="est_account_value"
+            values={Object {}}
+          />
+        </div>
+        <div
+          className="UserWalletSummary__value"
+        >
+          <USDDisplay
+            value={100}
+          />
+        </div>
+      </div>
+    </div>,
+  ],
+  "options": Object {},
+  "renderer": ReactShallowRenderer {
+    "_instance": ShallowComponentWrapper {
+      "_calledComponentWillUnmount": false,
+      "_compositeType": 2,
+      "_context": Object {},
+      "_currentElement": <UserWalletSummary
+        estAccountValue="100.00 STEEM"
+        loading={false}
+        totalVestingFundSteem="100 STEEM"
+        totalVestingShares="100 STEEM"
+        user={
+          Object {
+            "balance": "100",
+            "savings_balance": "100 STEEM",
+            "savings_sbd_balance": "1000 STEEM",
+            "vesting_shares": "0",
+          }
+        }
+      />,
+      "_debugID": 1,
+      "_hostContainerInfo": null,
+      "_hostParent": null,
+      "_instance": StatelessComponent {
+        "_reactInternalInstance": [Circular],
+        "context": Object {},
+        "props": Object {
+          "estAccountValue": "100.00 STEEM",
+          "loading": false,
+          "totalVestingFundSteem": "100 STEEM",
+          "totalVestingShares": "100 STEEM",
+          "user": Object {
+            "balance": "100",
+            "savings_balance": "100 STEEM",
+            "savings_sbd_balance": "1000 STEEM",
+            "vesting_shares": "0",
+          },
+        },
+        "refs": Object {},
+        "state": null,
+        "updater": Object {
+          "enqueueCallback": [Function],
+          "enqueueCallbackInternal": [Function],
+          "enqueueElementInternal": [Function],
+          "enqueueForceUpdate": [Function],
+          "enqueueReplaceState": [Function],
+          "enqueueSetState": [Function],
+          "isMounted": [Function],
+          "validateCallback": [Function],
+        },
+      },
+      "_mountOrder": 1,
+      "_pendingCallbacks": null,
+      "_pendingElement": null,
+      "_pendingForceUpdate": false,
+      "_pendingReplaceState": false,
+      "_pendingStateQueue": null,
+      "_renderedComponent": NoopInternalComponent {
+        "_currentElement": <div
+          className="UserWalletSummary"
+        >
+          <div
+            className="UserWalletSummary__item"
+          >
+            <i
+              className="iconfont icon-steem UserWalletSummary__icon"
+            />
+            <div
+              className="UserWalletSummary__label"
+            >
+              <FormattedMessage
+                defaultMessage="Steem"
+                id="steem"
+                values={Object {}}
+              />
+            </div>
+            <div
+              className="UserWalletSummary__value"
+            >
+              <span>
+                <FormattedNumber
+                  value={100}
+                />
+                 STEEM
+              </span>
+            </div>
+          </div>
+          <div
+            className="UserWalletSummary__item"
+          >
+            <i
+              className="iconfont icon-Dollar UserWalletSummary__icon"
+            />
+            <div
+              className="UserWalletSummary__label"
+            >
+              <FormattedMessage
+                defaultMessage="Steem Dollar"
+                id="steem_dollar"
+                values={Object {}}
+              />
+            </div>
+            <div
+              className="UserWalletSummary__value"
+            >
+              <span>
+                <FormattedNumber
+                  value={NaN}
+                />
+                 SBD
+              </span>
+            </div>
+          </div>
+          <div
+            className="UserWalletSummary__item"
+          >
+            <i
+              className="iconfont icon-flashlight_fill UserWalletSummary__icon"
+            />
+            <div
+              className="UserWalletSummary__label"
+            >
+              <FormattedMessage
+                defaultMessage="Steem Power"
+                id="steem_power"
+                values={Object {}}
+              />
+            </div>
+            <div
+              className="UserWalletSummary__value"
+            >
+              <span>
+                <FormattedNumber
+                  value={0}
+                />
+                 SP
+              </span>
+            </div>
+          </div>
+          <div
+            className="UserWalletSummary__item"
+          >
+            <i
+              className="iconfont icon-savings UserWalletSummary__icon"
+            />
+            <div
+              className="UserWalletSummary__label"
+            >
+              <FormattedMessage
+                defaultMessage="Savings"
+                id="savings"
+                values={Object {}}
+              />
+            </div>
+            <div
+              className="UserWalletSummary__value"
+            >
+              <span>
+                <FormattedNumber
+                  value={100}
+                />
+                 STEEM, 
+                <FormattedNumber
+                  value={1000}
+                />
+                 SBD
+              </span>
+            </div>
+          </div>
+          <div
+            className="UserWalletSummary__item"
+          >
+            <i
+              className="iconfont icon-people_fill UserWalletSummary__icon"
+            />
+            <div
+              className="UserWalletSummary__label"
+            >
+              <FormattedMessage
+                defaultMessage="Est. Account Value"
+                id="est_account_value"
+                values={Object {}}
+              />
+            </div>
+            <div
+              className="UserWalletSummary__value"
+            >
+              <USDDisplay
+                value={100}
+              />
+            </div>
+          </div>
+        </div>,
+        "_debugID": 2,
+        "_renderedOutput": <div
+          className="UserWalletSummary"
+        >
+          <div
+            className="UserWalletSummary__item"
+          >
+            <i
+              className="iconfont icon-steem UserWalletSummary__icon"
+            />
+            <div
+              className="UserWalletSummary__label"
+            >
+              <FormattedMessage
+                defaultMessage="Steem"
+                id="steem"
+                values={Object {}}
+              />
+            </div>
+            <div
+              className="UserWalletSummary__value"
+            >
+              <span>
+                <FormattedNumber
+                  value={100}
+                />
+                 STEEM
+              </span>
+            </div>
+          </div>
+          <div
+            className="UserWalletSummary__item"
+          >
+            <i
+              className="iconfont icon-Dollar UserWalletSummary__icon"
+            />
+            <div
+              className="UserWalletSummary__label"
+            >
+              <FormattedMessage
+                defaultMessage="Steem Dollar"
+                id="steem_dollar"
+                values={Object {}}
+              />
+            </div>
+            <div
+              className="UserWalletSummary__value"
+            >
+              <span>
+                <FormattedNumber
+                  value={NaN}
+                />
+                 SBD
+              </span>
+            </div>
+          </div>
+          <div
+            className="UserWalletSummary__item"
+          >
+            <i
+              className="iconfont icon-flashlight_fill UserWalletSummary__icon"
+            />
+            <div
+              className="UserWalletSummary__label"
+            >
+              <FormattedMessage
+                defaultMessage="Steem Power"
+                id="steem_power"
+                values={Object {}}
+              />
+            </div>
+            <div
+              className="UserWalletSummary__value"
+            >
+              <span>
+                <FormattedNumber
+                  value={0}
+                />
+                 SP
+              </span>
+            </div>
+          </div>
+          <div
+            className="UserWalletSummary__item"
+          >
+            <i
+              className="iconfont icon-savings UserWalletSummary__icon"
+            />
+            <div
+              className="UserWalletSummary__label"
+            >
+              <FormattedMessage
+                defaultMessage="Savings"
+                id="savings"
+                values={Object {}}
+              />
+            </div>
+            <div
+              className="UserWalletSummary__value"
+            >
+              <span>
+                <FormattedNumber
+                  value={100}
+                />
+                 STEEM, 
+                <FormattedNumber
+                  value={1000}
+                />
+                 SBD
+              </span>
+            </div>
+          </div>
+          <div
+            className="UserWalletSummary__item"
+          >
+            <i
+              className="iconfont icon-people_fill UserWalletSummary__icon"
+            />
+            <div
+              className="UserWalletSummary__label"
+            >
+              <FormattedMessage
+                defaultMessage="Est. Account Value"
+                id="est_account_value"
+                values={Object {}}
+              />
+            </div>
+            <div
+              className="UserWalletSummary__value"
+            >
+              <USDDisplay
+                value={100}
+              />
+            </div>
+          </div>
+        </div>,
+      },
+      "_renderedNodeType": 0,
+      "_rootNodeID": 0,
+      "_topLevelWrapper": null,
+      "_updateBatchNumber": null,
+      "_warnedAboutRefsInRender": false,
+    },
+    "getRenderOutput": [Function],
+    "render": [Function],
+  },
+  "root": [Circular],
+  "unrendered": <UserWalletSummary
+    estAccountValue="100.00 STEEM"
+    loading={false}
+    totalVestingFundSteem="100 STEEM"
+    totalVestingShares="100 STEEM"
+    user={
+      Object {
+        "balance": "100",
+        "savings_balance": "100 STEEM",
+        "savings_sbd_balance": "1000 STEEM",
+        "vesting_shares": "0",
+      }
+    }
+  />,
+}
+`;
diff --git a/src/wallet/__tests__/__snapshots__/UserWalletTransactions.test.js.snap b/src/wallet/__tests__/__snapshots__/UserWalletTransactions.test.js.snap
new file mode 100644
index 00000000..44a58de4
--- /dev/null
+++ b/src/wallet/__tests__/__snapshots__/UserWalletTransactions.test.js.snap
@@ -0,0 +1,265 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`(Component) UserWalletTransactions with default prop values renders and matches snapshot 1`] = `
+ShallowWrapper {
+  "complexSelector": ComplexSelector {
+    "buildPredicate": [Function],
+    "childrenOfNode": [Function],
+    "findWhereUnwrapped": [Function],
+  },
+  "length": 1,
+  "node": <div
+    className="UserWalletTransactions"
+  >
+    <TransferTransaction
+      amount={
+        <span>
+          <FormattedNumber
+            maximumFractionDigits={3}
+            minimumFractionDigits={3}
+            value="100.000"
+          />
+           STEEM
+        </span>
+      }
+      memo="transfer memo"
+      timestamp="0"
+      to=""
+    />
+    <PowerUpTransaction
+      amount={
+        <span>
+          <FormattedNumber
+            maximumFractionDigits={3}
+            minimumFractionDigits={3}
+            value="100.000"
+          />
+           SP
+        </span>
+      }
+      timestamp="0"
+    />
+  </div>,
+  "nodes": Array [
+    <div
+      className="UserWalletTransactions"
+    >
+      <TransferTransaction
+        amount={
+          <span>
+            <FormattedNumber
+              maximumFractionDigits={3}
+              minimumFractionDigits={3}
+              value="100.000"
+            />
+             STEEM
+          </span>
+        }
+        memo="transfer memo"
+        timestamp="0"
+        to=""
+      />
+      <PowerUpTransaction
+        amount={
+          <span>
+            <FormattedNumber
+              maximumFractionDigits={3}
+              minimumFractionDigits={3}
+              value="100.000"
+            />
+             SP
+          </span>
+        }
+        timestamp="0"
+      />
+    </div>,
+  ],
+  "options": Object {},
+  "renderer": ReactShallowRenderer {
+    "_instance": ShallowComponentWrapper {
+      "_calledComponentWillUnmount": false,
+      "_compositeType": 2,
+      "_context": Object {},
+      "_currentElement": <UserWalletTransactions
+        currentUsername="hellosteem"
+        transactions={
+          Array [
+            Object {
+              "op": Array [
+                "transfer_to_vesting",
+                Object {
+                  "amount": "100 STEEM",
+                },
+              ],
+              "timestamp": "0",
+            },
+            Object {
+              "op": Array [
+                "transfer",
+                Object {
+                  "amount": "100 STEEM",
+                  "from": "hellosteem1",
+                  "memo": "transfer memo",
+                },
+              ],
+              "timestamp": "0",
+            },
+          ]
+        }
+      />,
+      "_debugID": 1,
+      "_hostContainerInfo": null,
+      "_hostParent": null,
+      "_instance": StatelessComponent {
+        "_reactInternalInstance": [Circular],
+        "context": Object {},
+        "props": Object {
+          "currentUsername": "hellosteem",
+          "transactions": Array [
+            Object {
+              "op": Array [
+                "transfer_to_vesting",
+                Object {
+                  "amount": "100 STEEM",
+                },
+              ],
+              "timestamp": "0",
+            },
+            Object {
+              "op": Array [
+                "transfer",
+                Object {
+                  "amount": "100 STEEM",
+                  "from": "hellosteem1",
+                  "memo": "transfer memo",
+                },
+              ],
+              "timestamp": "0",
+            },
+          ],
+        },
+        "refs": Object {},
+        "state": null,
+        "updater": Object {
+          "enqueueCallback": [Function],
+          "enqueueCallbackInternal": [Function],
+          "enqueueElementInternal": [Function],
+          "enqueueForceUpdate": [Function],
+          "enqueueReplaceState": [Function],
+          "enqueueSetState": [Function],
+          "isMounted": [Function],
+          "validateCallback": [Function],
+        },
+      },
+      "_mountOrder": 1,
+      "_pendingCallbacks": null,
+      "_pendingElement": null,
+      "_pendingForceUpdate": false,
+      "_pendingReplaceState": false,
+      "_pendingStateQueue": null,
+      "_renderedComponent": NoopInternalComponent {
+        "_currentElement": <div
+          className="UserWalletTransactions"
+        >
+          <TransferTransaction
+            amount={
+              <span>
+                <FormattedNumber
+                  maximumFractionDigits={3}
+                  minimumFractionDigits={3}
+                  value="100.000"
+                />
+                 STEEM
+              </span>
+            }
+            memo="transfer memo"
+            timestamp="0"
+            to=""
+          />
+          <PowerUpTransaction
+            amount={
+              <span>
+                <FormattedNumber
+                  maximumFractionDigits={3}
+                  minimumFractionDigits={3}
+                  value="100.000"
+                />
+                 SP
+              </span>
+            }
+            timestamp="0"
+          />
+        </div>,
+        "_debugID": 2,
+        "_renderedOutput": <div
+          className="UserWalletTransactions"
+        >
+          <TransferTransaction
+            amount={
+              <span>
+                <FormattedNumber
+                  maximumFractionDigits={3}
+                  minimumFractionDigits={3}
+                  value="100.000"
+                />
+                 STEEM
+              </span>
+            }
+            memo="transfer memo"
+            timestamp="0"
+            to=""
+          />
+          <PowerUpTransaction
+            amount={
+              <span>
+                <FormattedNumber
+                  maximumFractionDigits={3}
+                  minimumFractionDigits={3}
+                  value="100.000"
+                />
+                 SP
+              </span>
+            }
+            timestamp="0"
+          />
+        </div>,
+      },
+      "_renderedNodeType": 0,
+      "_rootNodeID": 0,
+      "_topLevelWrapper": null,
+      "_updateBatchNumber": null,
+      "_warnedAboutRefsInRender": false,
+    },
+    "getRenderOutput": [Function],
+    "render": [Function],
+  },
+  "root": [Circular],
+  "unrendered": <UserWalletTransactions
+    currentUsername="hellosteem"
+    transactions={
+      Array [
+        Object {
+          "op": Array [
+            "transfer_to_vesting",
+            Object {
+              "amount": "100 STEEM",
+            },
+          ],
+          "timestamp": "0",
+        },
+        Object {
+          "op": Array [
+            "transfer",
+            Object {
+              "amount": "100 STEEM",
+              "from": "hellosteem1",
+              "memo": "transfer memo",
+            },
+          ],
+          "timestamp": "0",
+        },
+      ]
+    }
+  />,
+}
+`;
diff --git a/src/wallet/__tests__/walletReducer.js b/src/wallet/__tests__/walletReducer.js
index 187f824d..63a7aa49 100644
--- a/src/wallet/__tests__/walletReducer.js
+++ b/src/wallet/__tests__/walletReducer.js
@@ -1,49 +1,74 @@
 import reducer from '../walletReducer';
 import * as actions from '../walletActions';
 
+const reducerInitialState = {
+  totalVestingShares: '',
+  totalVestingFundSteem: '',
+  usersTransactions: {},
+  usersEstAccountsValues: {},
+  usersTransactionsLoading: true,
+};
+
 describe('walletReducer', () => {
   it('should return the initial state', () => {
     expect(reducer(undefined, {})).toEqual({
+      ...reducerInitialState,
       transferVisible: false,
       transferTo: '',
     });
   });
 
   it('should handle OPEN_TRANSFER', () => {
-    expect(reducer(undefined, {
-      type: actions.OPEN_TRANSFER,
-      payload: 'sekhmet',
-    })).toEqual({
+    expect(
+      reducer(undefined, {
+        type: actions.OPEN_TRANSFER,
+        payload: 'sekhmet',
+      }),
+    ).toEqual({
+      ...reducerInitialState,
       transferVisible: true,
       transferTo: 'sekhmet',
     });
 
-    expect(reducer({
-      transferVisible: true,
-      transferTo: 'sekhmet',
-    }, {
-      type: actions.OPEN_TRANSFER,
-      payload: 'fabien',
-    })).toEqual({
+    expect(
+      reducer(
+        {
+          transferVisible: true,
+          transferTo: 'sekhmet',
+        },
+        {
+          type: actions.OPEN_TRANSFER,
+          payload: 'fabien',
+        },
+      ),
+    ).toEqual({
       transferVisible: true,
       transferTo: 'fabien',
     });
   });
 
   it('should handle CLOSE_TRANSFER', () => {
-    expect(reducer(undefined, {
-      type: actions.CLOSE_TRANSFER,
-    })).toEqual({
+    expect(
+      reducer(undefined, {
+        type: actions.CLOSE_TRANSFER,
+      }),
+    ).toEqual({
+      ...reducerInitialState,
       transferVisible: false,
       transferTo: '',
     });
 
-    expect(reducer({
-      transferVisible: true,
-      transferTo: 'fabien',
-    }, {
-      type: actions.CLOSE_TRANSFER,
-    })).toEqual({
+    expect(
+      reducer(
+        {
+          transferVisible: true,
+          transferTo: 'fabien',
+        },
+        {
+          type: actions.CLOSE_TRANSFER,
+        },
+      ),
+    ).toEqual({
       transferVisible: false,
       transferTo: 'fabien',
     });
@@ -54,19 +79,25 @@ describe('walletReducer', () => {
       {
         transferVisible: true,
         transferTo: 'fabien',
+        ...reducerInitialState,
       },
       {
         transferVisible: false,
         transferTo: '',
+        ...reducerInitialState,
       },
     ];
 
-    expect(reducer(states[0], {
-      type: 'NOT_EXISTING',
-    })).toEqual(states[0]);
+    expect(
+      reducer(states[0], {
+        type: 'NOT_EXISTING',
+      }),
+    ).toEqual(states[0]);
 
-    expect(reducer(states[1], {
-      type: 'ANOTHER_NOT_EXISTING',
-    })).toEqual(states[1]);
+    expect(
+      reducer(states[1], {
+        type: 'ANOTHER_NOT_EXISTING',
+      }),
+    ).toEqual(states[1]);
   });
 });