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,26 +236,31 @@ 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 (
-      // eslint-disable-next-line
-      <Wrapper
-        onMouseOver={() => this.setState({ showTooltip: true })}
-        onMouseOut={() => this.setState({ showTooltip: false })}
-        id='status-pill'
-      >
-        {showTooltip && (
-          <Tooltip>
-            <TooltipText value={this.getStatusText()} />
-          </Tooltip>
-        )}
-        {icon && <Icon src={icon} animated={this.isSyncing()} />}
-        <StatusPillLabel value={`${this.getLabel()} ${percent}`} />
+      <Wrapper>
+        {isRefetching && <RefetchingLabel>Refetching...</RefetchingLabel>}
+        {
+          // eslint-disable-next-line
+          <StatusWrapper
+            onMouseOver={() => this.setState({ showTooltip: true })}
+            onMouseOut={() => this.setState({ showTooltip: false })}
+            id='status-pill'
+          >
+            {showTooltip && (
+              <Tooltip>
+                <TooltipText value={this.getStatusText()} />
+              </Tooltip>
+            )}
+            {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 = {|