Refresh balance button (#1027)

* Refresh balance button.

* Refresh balance button.

* Move refresh.svg

* Remove previous svg.

* Map action with saga.

* Fix travis build (on prettify).

* Move refresh button in-line with account balance

* Update styles

common/actions/wallet/actionCreators.ts

@@ -159,3 +159,10 @@ export function setWalletConfig(config: WalletConfig): types.SetWalletConfigActi
     payload: config
   };
 }
+
+export type TSetAccountBalance = typeof setAccountBalance;
+export function setAccountBalance(): types.SetAccountBalanceAction {
+  return {
+    type: TypeKeys.WALLET_SET_ACCOUNT_BALANCE
+  };
+}

common/actions/wallet/actionTypes.ts

@@ -125,6 +125,10 @@ export interface SetPasswordPendingAction {
   type: TypeKeys.WALLET_SET_PASSWORD_PENDING;
 }
 
+export interface SetAccountBalanceAction {
+  type: TypeKeys.WALLET_SET_ACCOUNT_BALANCE;
+}
+
 /*** Union Type ***/
 export type WalletAction =
   | UnlockPrivateKeyAction
@@ -143,4 +147,5 @@ export type WalletAction =
   | ScanWalletForTokensAction
   | SetWalletTokensAction
   | SetWalletConfigAction
-  | SetPasswordPendingAction;
+  | SetPasswordPendingAction
+  | SetAccountBalanceAction;

common/actions/wallet/constants.ts

@@ -19,5 +19,6 @@ export enum TypeKeys {
   WALLET_SET_WALLET_TOKENS = 'WALLET_SET_WALLET_TOKENS',
   WALLET_SET_CONFIG = 'WALLET_SET_CONFIG',
   WALLET_RESET = 'WALLET_RESET',
-  WALLET_SET_PASSWORD_PENDING = 'WALLET_SET_PASSWORD_PENDING'
+  WALLET_SET_PASSWORD_PENDING = 'WALLET_SET_PASSWORD_PENDING',
+  WALLET_SET_ACCOUNT_BALANCE = 'WALLET_SET_ACCOUNT_BALANCE'
 }

common/assets/images/refresh.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
+    <g class="nc-icon-wrapper" fill="#000000">
+        <path d="M26.47 9.53C24.3 7.35 21.32 6 18 6 11.37 6 6 11.37 6 18s5.37 12 12 12c5.94 0 10.85-4.33 11.81-10h-3.04c-.91 4.01-4.49 7-8.77 7-4.97 0-9-4.03-9-9s4.03-9 9-9c2.49 0 4.71 1.03 6.34 2.66L20 16h10V6l-3.53 3.53z"></path>
+    </g>
+</svg>

common/components/BalanceSidebar/AccountInfo.scss

@@ -11,6 +11,30 @@
 
     &-header {
       margin-top: 0;
+      display: inline-block;
+    }
+
+    &-refresh {
+      background: transparent;
+      border: none;
+      margin: 0px 0.5rem;
+      padding: 0;
+      height: 1.4rem;
+      width: 1.2rem;
+      opacity: 0.3;
+      transition: opacity 0.3s;
+      > img {
+        height: inherit;
+        width: inherit;
+        vertical-align: top;
+      }
+      &:hover {
+        opacity: 0.54;
+      }
+      &:active {
+        transition: opacity 120ms;
+        opacity: 1;
+      }
     }
   }
 
@@ -53,6 +77,11 @@
     }
   }
 
+  &-balance-wrapper {
+    display: flex;
+    align-items: flex-end;
+  }
+
   &-list {
     &-item {
       margin-bottom: 0;

common/components/BalanceSidebar/AccountInfo.tsx

@@ -8,6 +8,8 @@ import Spinner from 'components/ui/Spinner';
 import { getNetworkConfig } from 'selectors/config';
 import { AppState } from 'reducers';
 import { connect } from 'react-redux';
+import refreshIcon from 'assets/images/refresh.svg';
+import { TSetAccountBalance, setAccountBalance } from 'actions/wallet';
 
 interface OwnProps {
   wallet: IWallet;
@@ -24,7 +26,11 @@ interface State {
   confirmAddr: boolean;
 }
 
-type Props = OwnProps & StateProps;
+interface DispatchProps {
+  setAccountBalance: TSetAccountBalance;
+}
+
+type Props = OwnProps & StateProps & DispatchProps;
 
 class AccountInfo extends React.Component<Props, State> {
   public state = {
@@ -108,23 +114,31 @@ class AccountInfo extends React.Component<Props, State> {
         <div className="AccountInfo-section">
           <h5 className="AccountInfo-section-header">{translate('sidebar_AccountBal')}</h5>
           <ul className="AccountInfo-list">
-            <li className="AccountInfo-list-item">
+            <li className="AccountInfo-list-item AccountInfo-balance-wrapper">
-              <span
+              {balance.isPending ? (
-                className="AccountInfo-list-item-clickable mono wrap"
+                <Spinner />
-                onClick={this.toggleShowLongBalance}
+              ) : (
-              >
+                <React.Fragment>
-                {balance.isPending ? (
+                  <span
-                  <Spinner />
+                    className="AccountInfo-list-item-clickable mono wrap"
-                ) : (
+                    onClick={this.toggleShowLongBalance}
-                  <UnitDisplay
+                  >
-                    value={balance.wei}
+                    <UnitDisplay
-                    unit={'ether'}
+                      value={balance.wei}
-                    displayShortBalance={!showLongBalance}
+                      unit={'ether'}
-                    checkOffline={true}
+                      displayShortBalance={!showLongBalance}
-                  />
+                      checkOffline={true}
-                )}
+                      symbol={balance.wei ? network.name : null}
-              </span>
+                    />
-              {!balance.isPending ? balance.wei ? <span> {network.name}</span> : null : null}
+                  </span>
+                  <button
+                    className="AccountInfo-section-refresh"
+                    onClick={this.props.setAccountBalance}
+                  >
+                    <img src={refreshIcon} />
+                  </button>
+                </React.Fragment>
+              )}
             </li>
           </ul>
         </div>
@@ -162,12 +176,11 @@ class AccountInfo extends React.Component<Props, State> {
     );
   }
 }
-
 function mapStateToProps(state: AppState): StateProps {
   return {
     balance: state.wallet.balance,
     network: getNetworkConfig(state)
   };
 }
-
+const mapDispatchToProps: DispatchProps = { setAccountBalance };
-export default connect(mapStateToProps)(AccountInfo);
+export default connect(mapStateToProps, mapDispatchToProps)(AccountInfo);

common/components/ui/UnitDisplay.tsx

@@ -18,7 +18,7 @@ interface Props {
    * @type {string}
    * @memberof Props
    */
-  symbol?: string;
+  symbol?: string | null;
   /**
    * @description display the long balance, if false, trims it to 3 decimal places, if a number is specified then that number is the number of digits to be displayed.
    * @type {boolean}

common/sagas/wallet/wallet.ts

@@ -316,6 +316,7 @@ export default function* walletSaga(): SagaIterator {
     takeEvery(TypeKeys.WALLET_SCAN_WALLET_FOR_TOKENS, scanWalletForTokens),
     takeEvery(TypeKeys.WALLET_SET_WALLET_TOKENS, handleSetWalletTokens),
     takeEvery(TypeKeys.WALLET_SET_TOKEN_BALANCE_PENDING, updateTokenBalance),
+    takeEvery(TypeKeys.WALLET_SET_ACCOUNT_BALANCE, updateAccountBalance),
     // Foreign actions
     takeEvery(ConfigTypeKeys.CONFIG_TOGGLE_OFFLINE, updateBalances),
     takeEvery(CustomTokenTypeKeys.CUSTOM_TOKEN_ADD, handleCustomTokenAdd)