Merge pull request #1305 from miikkatu/show-exact-balance-on-hover

Show exact wallet balance on mouse hover over

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
    * Add keyboard shortcut to quit the app on Windows ([#1202](https://github.com/lbryio/lbry-app/pull/1202))
    * Build for both architectures (x86 and x64) for Windows ([#1262](https://github.com/lbryio/lbry-app/pull/1262))
    * Add referral FAQ to Invites screen([#1314](https://github.com/lbryio/lbry-app/pull/1314))
+   * Show exact wallet balance on mouse hover over ([#1305](https://github.com/lbryio/lbry-app/pull/1305))
 
 ### Fixed
    * Black screen on macOS after maximizing LBRY and then closing ([#1235](https://github.com/lbryio/lbry-app/pull/1235))

src/renderer/component/header/index.js

@@ -1,22 +1,21 @@
 import { connect } from 'react-redux';
+import { doDownloadUpgradeRequested } from 'redux/actions/app';
 import { doNavigate } from 'redux/actions/navigation';
 import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded } from 'redux/selectors/app';
-import { formatCredits } from 'util/formatCredits';
 import { selectBalance } from 'redux/selectors/wallet';
+import { formatCredits } from 'util/formatCredits';
 import Header from './view';
-import { doDownloadUpgradeRequested } from 'redux/actions/app';
 
 const select = state => ({
-  isUpgradeAvailable: selectIsUpgradeAvailable(state),
   autoUpdateDownloaded: selectAutoUpdateDownloaded(state),
-  balance: formatCredits(selectBalance(state) || 0, 2),
+  balance: selectBalance(state),
+  isUpgradeAvailable: selectIsUpgradeAvailable(state),
+  roundedBalance: formatCredits(selectBalance(state) || 0, 2),
 });
 
 const perform = dispatch => ({
-  navigate: path => dispatch(doNavigate(path)),
-  back: () => dispatch(doHistoryBack()),
-  forward: () => dispatch(doHistoryForward()),
   downloadUpgradeRequested: () => dispatch(doDownloadUpgradeRequested()),
+  navigate: path => dispatch(doNavigate(path)),
 });
 
 export default connect(select, perform)(Header);

src/renderer/component/header/view.jsx

@@ -5,20 +5,22 @@ import WunderBar from 'component/wunderbar';
 import * as icons from 'constants/icons';
 
 type Props = {
+  autoUpdateDownloaded: boolean,
   balance: string,
-  navigate: any => void,
   downloadUpgradeRequested: any => void,
   isUpgradeAvailable: boolean,
-  autoUpdateDownloaded: boolean,
+  navigate: any => void,
+  roundedBalance: string,
 };
 
 const Header = (props: Props) => {
   const {
+    autoUpdateDownloaded,
     balance,
+    downloadUpgradeRequested,
     isUpgradeAvailable,
     navigate,
-    downloadUpgradeRequested,
-    autoUpdateDownloaded,
+    roundedBalance,
   } = props;
 
   const showUpgradeButton =
@@ -37,7 +39,10 @@ const Header = (props: Props) => {
               `${balance}`
             ) : (
               <React.Fragment>
-                <span className="btn__label--balance">You have</span> <span>{balance} LBC</span>
+                <span className="btn__label--balance" title={`${balance} LBC`}>
+                  You have
+                </span>{' '}
+                <span title={`${balance} LBC`}>{roundedBalance} LBC</span>
               </React.Fragment>
             )
           }