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)