diff --git a/__tests__/components/status-pill.test.js b/__tests__/components/status-pill.test.js
index ea690e7..77252c8 100644
--- a/__tests__/components/status-pill.test.js
+++ b/__tests__/components/status-pill.test.js
@@ -18,6 +18,7 @@ describe('', () => {
getBlockchainStatus={() => Promise.resolve()}
nodeSyncProgress={56.0}
nodeSyncType='syncing'
+ isRefetching={false}
/>
,
);
@@ -32,6 +33,7 @@ describe('', () => {
getBlockchainStatus={() => Promise.resolve()}
nodeSyncProgress={100.0}
nodeSyncType='ready'
+ isRefetching={false}
/>
,
);
@@ -46,6 +48,7 @@ describe('', () => {
getBlockchainStatus={() => Promise.resolve()}
nodeSyncProgress={0.0}
nodeSyncType='error'
+ isRefetching={false}
/>
,
);
diff --git a/app/components/status-pill.js b/app/components/status-pill.js
index 6c25e96..9008c60 100644
--- a/app/components/status-pill.js
+++ b/app/components/status-pill.js
@@ -27,6 +27,14 @@ const rotate = keyframes`
`;
const Wrapper = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: flex-end;
+ justify-content: center;
+ height: 100%;
+`;
+
+const StatusWrapper = styled.div`
align-items: center;
display: flex;
background: ${props => props.theme.colors.statusPillBg};
@@ -90,6 +98,15 @@ const TooltipText = styled(TextComponent)`
font-weight: 700;
`;
+const RefetchingLabel = styled.p`
+ color: ${props => props.theme.colors.sidebarItem};
+ font-size: 10px;
+ letter-spacing: 0.5px;
+ text-transform: uppercase;
+ font-family: ${props => props.theme.fontFamily};
+ margin-right: 10px;
+`;
+
type Props = {
theme: AppTheme,
} & MapStateToProps &
@@ -219,26 +236,31 @@ class Component extends PureComponent {
render() {
const icon = this.getIcon();
- const { nodeSyncType, nodeSyncProgress } = this.props;
+ const { nodeSyncType, nodeSyncProgress, isRefetching } = this.props;
const { showTooltip } = this.state;
const percent = nodeSyncType && nodeSyncType === NODE_SYNC_TYPES.SYNCING
? `(${nodeSyncProgress.toFixed(2)}%)`
: '';
return (
- // eslint-disable-next-line
- this.setState({ showTooltip: true })}
- onMouseOut={() => this.setState({ showTooltip: false })}
- id='status-pill'
- >
- {showTooltip && (
-
-
-
- )}
- {icon && }
-
+
+ {isRefetching && Refetching...}
+ {
+ // eslint-disable-next-line
+ this.setState({ showTooltip: true })}
+ onMouseOut={() => this.setState({ showTooltip: false })}
+ id='status-pill'
+ >
+ {showTooltip && (
+
+
+
+ )}
+ {icon && }
+
+
+ }
);
}
diff --git a/app/containers/status-pill.js b/app/containers/status-pill.js
index ddef1a1..a48d8fc 100644
--- a/app/containers/status-pill.js
+++ b/app/containers/status-pill.js
@@ -8,6 +8,7 @@ import { updateNodeSyncStatus } from '../redux/modules/app';
import { StatusPill } from '../components/status-pill';
import rpc from '../../services/api';
import { NODE_SYNC_TYPES } from '../constants/node-sync-types';
+import { FETCH_STATE } from '../constants/fetch-states';
import type { Dispatch } from '../types/redux';
import type { AppState } from '../types/app-state';
@@ -15,11 +16,15 @@ import type { AppState } from '../types/app-state';
export type MapStateToProps = {|
nodeSyncProgress: number,
nodeSyncType: 'ready' | 'syncing' | 'error',
+ isRefetching: boolean,
|};
-const mapStateToProps = ({ app }: AppState): MapStateToProps => ({
+const mapStateToProps = ({ app, walletSummary, receive }: AppState): MapStateToProps => ({
nodeSyncProgress: app.nodeSyncProgress,
nodeSyncType: app.nodeSyncType,
+ isRefetching:
+ walletSummary.fetchState === FETCH_STATE.REFETCHING
+ || receive.fetchState === FETCH_STATE.REFETCHING,
});
export type MapDispatchToProps = {|