Merge pull request #100 from andrerfneves/feature/pill-status-tooltip

Status Pill Tooltip

app/components/status-pill.js

@@ -33,6 +33,7 @@ const Wrapper = styled.div`
   border: 1px solid ${props => props.theme.colors.statusPillBorder}
   border-radius: 27px;
   padding: 8px 16px;
+  position: relative;
 `;
 
 const Icon = styled.img`
@@ -54,16 +55,63 @@ const StatusPillLabel = styled(TextComponent)`
   user-select: none;
 `;
 
+const Tooltip = styled.div`
+  background: ${props => props.theme.colors.walletAddressTooltipBg};
+  position: absolute;
+  bottom: -35px;
+  right: 5px;
+  padding: 6px 10px;
+  border-radius: ${props => props.theme.boxBorderRadius};
+  z-index: 100;
+  white-space: nowrap;
+
+  &:after {
+    bottom: 100%;
+    left: 90%;
+    border: solid transparent;
+    content: ' ';
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  &:after {
+    border-color: transparent;
+    border-bottom-color: ${props => props.theme.colors.walletAddressTooltipBg};
+    border-width: 5px;
+    margin-left: -5px;
+  }
+`;
+
+const TooltipText = styled(TextComponent)`
+  color: ${props => props.theme.colors.walletAddressTooltip};
+  font-size: 10px;
+  font-weight: 700;
+`;
+
 type Props = {
   theme: AppTheme,
 } & MapStateToProps &
   MapDispatchToProps;
 
+type State = {
+  showTooltip: boolean,
+};
+
 const MINUTE_IN_MILI = 60000;
 
-class Component extends PureComponent<Props> {
+class Component extends PureComponent<Props, State> {
   timer: ?IntervalID = null;
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showTooltip: false,
+    };
+  }
+
   componentDidMount() {
     const { getBlockchainStatus } = this.props;
 
@@ -128,14 +176,40 @@ class Component extends PureComponent<Props> {
     }
   };
 
+  getStatusText = () => {
+    const { nodeSyncType } = this.props;
+
+    switch (nodeSyncType) {
+      case 'syncing':
+        return "Syncing blockchain data. You may not send funds or see latest transactions until it's synced 100%";
+      case 'ready':
+        return 'Your chain data is up to date';
+      case 'error':
+        return 'There was an error. Try restarting Zepio';
+      default:
+        return '';
+    }
+  };
+
   render() {
     const icon = this.getIcon();
     const { nodeSyncType, nodeSyncProgress } = this.props;
+    const { showTooltip } = this.state;
     const percent = nodeSyncType === NODE_SYNC_TYPES.SYNCING ? `(${nodeSyncProgress.toFixed(2)}%)` : '';
     const typeText = nodeSyncType === NODE_SYNC_TYPES.READY ? 'Synced' : nodeSyncType;
 
     return (
-      <Wrapper id='status-pill'>
+      // 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={`${typeText} ${percent}`} />
       </Wrapper>