feat(status-pill): add StatusPill refetching status

__tests__/components/status-pill.test.js

@@ -18,6 +18,7 @@ describe('<StatusPill />', () => {
           getBlockchainStatus={() => Promise.resolve()}
           nodeSyncProgress={56.0}
           nodeSyncType='syncing'
+          isRefetching={false}
         />
       </ThemeProvider>,
     );
@@ -32,6 +33,7 @@ describe('<StatusPill />', () => {
           getBlockchainStatus={() => Promise.resolve()}
           nodeSyncProgress={100.0}
           nodeSyncType='ready'
+          isRefetching={false}
         />
       </ThemeProvider>,
     );
@@ -46,6 +48,7 @@ describe('<StatusPill />', () => {
           getBlockchainStatus={() => Promise.resolve()}
           nodeSyncProgress={0.0}
           nodeSyncType='error'
+          isRefetching={false}
         />
       </ThemeProvider>,
     );

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,15 +236,18 @@ class Component extends PureComponent<Props, State> {
 
   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 (
+      <Wrapper>
+        {isRefetching && <RefetchingLabel>Refetching...</RefetchingLabel>}
+        {
           // eslint-disable-next-line
-      <Wrapper
+          <StatusWrapper
             onMouseOver={() => this.setState({ showTooltip: true })}
             onMouseOut={() => this.setState({ showTooltip: false })}
             id='status-pill'
@@ -239,6 +259,8 @@ class Component extends PureComponent<Props, State> {
             )}
             {icon && <Icon src={icon} animated={this.isSyncing()} />}
             <StatusPillLabel value={`${this.getLabel()} ${percent}`} />
+          </StatusWrapper>
+        }
       </Wrapper>
     );
   }

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 = {|