From df4b73721ab0edc9bce8d1ab2348e356ec539260 Mon Sep 17 00:00:00 2001 From: aitrean Date: Thu, 8 Feb 2018 02:22:32 -0500 Subject: [PATCH] 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 | 7 +++ common/actions/wallet/actionTypes.ts | 7 ++- common/actions/wallet/constants.ts | 3 +- common/assets/images/refresh.svg | 5 ++ .../BalanceSidebar/AccountInfo.scss | 29 ++++++++++ .../components/BalanceSidebar/AccountInfo.tsx | 55 ++++++++++++------- common/components/ui/UnitDisplay.tsx | 2 +- common/sagas/wallet/wallet.ts | 1 + 8 files changed, 85 insertions(+), 24 deletions(-) create mode 100644 common/assets/images/refresh.svg diff --git a/common/actions/wallet/actionCreators.ts b/common/actions/wallet/actionCreators.ts index 23ee04d4..ad4cfc6a 100644 --- a/common/actions/wallet/actionCreators.ts +++ b/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 + }; +} diff --git a/common/actions/wallet/actionTypes.ts b/common/actions/wallet/actionTypes.ts index f154f2e8..bda66390 100644 --- a/common/actions/wallet/actionTypes.ts +++ b/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; diff --git a/common/actions/wallet/constants.ts b/common/actions/wallet/constants.ts index c1c2ff9d..24990ea4 100644 --- a/common/actions/wallet/constants.ts +++ b/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' } diff --git a/common/assets/images/refresh.svg b/common/assets/images/refresh.svg new file mode 100644 index 00000000..9787d3b5 --- /dev/null +++ b/common/assets/images/refresh.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/common/components/BalanceSidebar/AccountInfo.scss b/common/components/BalanceSidebar/AccountInfo.scss index 1286d6a0..7aa9c158 100644 --- a/common/components/BalanceSidebar/AccountInfo.scss +++ b/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; diff --git a/common/components/BalanceSidebar/AccountInfo.tsx b/common/components/BalanceSidebar/AccountInfo.tsx index 85cccfa3..d8dc5e2c 100644 --- a/common/components/BalanceSidebar/AccountInfo.tsx +++ b/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 { public state = { @@ -108,23 +114,31 @@ class AccountInfo extends React.Component {
{translate('sidebar_AccountBal')}
    -
  • - - {balance.isPending ? ( - - ) : ( - - )} - - {!balance.isPending ? balance.wei ? {network.name} : null : null} +
  • + {balance.isPending ? ( + + ) : ( + + + + + + + )}
@@ -162,12 +176,11 @@ class AccountInfo extends React.Component { ); } } - function mapStateToProps(state: AppState): StateProps { return { balance: state.wallet.balance, network: getNetworkConfig(state) }; } - -export default connect(mapStateToProps)(AccountInfo); +const mapDispatchToProps: DispatchProps = { setAccountBalance }; +export default connect(mapStateToProps, mapDispatchToProps)(AccountInfo); diff --git a/common/components/ui/UnitDisplay.tsx b/common/components/ui/UnitDisplay.tsx index 373b72c6..3b55e167 100644 --- a/common/components/ui/UnitDisplay.tsx +++ b/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} diff --git a/common/sagas/wallet/wallet.ts b/common/sagas/wallet/wallet.ts index afff2ce5..78e4eb69 100644 --- a/common/sagas/wallet/wallet.ts +++ b/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)