From df02b3242164e58cf5ff55d8895e2bab8a71a976 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eliabe=20J=C3=BAnior?=
 <8146889+eliabejr@users.noreply.github.com>
Date: Thu, 17 Jan 2019 16:40:27 -0300
Subject: [PATCH] Feature/status pill (#38)

* feat(styles): create status pill component

* feat(styles): add status pill icons

* feat(status-pill): refactor component logic

* feat(status-pill): add component in docz

* feat(status-pill): show component on header

* feat(status-pill): call RPC to check verification progress

* feat(status-pill): add setInterval on getBlockchainStatus function

* chore: clean code

* feat(status-pill): add ticker to check blockchain info

* feat(status-pill): improve component experience

* chore(status-pill): refactor component lifecycle

* chore(status-pill): increase update time
---
 app/assets/images/error_icon.png  | Bin 0 -> 2848 bytes
 app/assets/images/green_check.png | Bin 0 -> 4695 bytes
 app/assets/images/sync_icon.png   | Bin 0 -> 3446 bytes
 app/components/header.js          |  13 +++-
 app/components/status-pill.js     | 112 ++++++++++++++++++++++++++++++
 app/components/status-pill.mdx    |  22 ++++++
 app/theme.js                      |   2 +
 7 files changed, 148 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/images/error_icon.png
 create mode 100644 app/assets/images/green_check.png
 create mode 100644 app/assets/images/sync_icon.png
 create mode 100644 app/components/status-pill.js
 create mode 100644 app/components/status-pill.mdx

diff --git a/app/assets/images/error_icon.png b/app/assets/images/error_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..f15d38a9ac29a88b6297808d600316ee6ff70305
GIT binary patch
literal 2848
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

literal 0
HcmV?d00001

diff --git a/app/assets/images/green_check.png b/app/assets/images/green_check.png
new file mode 100644
index 0000000000000000000000000000000000000000..51df71e61e07a0406ca2e75819adcc0918facdeb
GIT binary patch
literal 4695
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
Z{{d$j1{8*tOn(3X002ovPDHLkV1lj7@YMhS

literal 0
HcmV?d00001

diff --git a/app/assets/images/sync_icon.png b/app/assets/images/sync_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..82c6359329f1f42ad27f992a462b7e4941ad0b01
GIT binary patch
literal 3446
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
Y|B=$x8&PVB6#xJL07*qoM6N<$f=QNs(f|Me

literal 0
HcmV?d00001

diff --git a/app/components/header.js b/app/components/header.js
index 4dd2d84..5c2a085 100644
--- a/app/components/header.js
+++ b/app/components/header.js
@@ -6,6 +6,8 @@ import styled from 'styled-components';
 import { ZcashLogo } from './zcash-logo';
 import { TextComponent } from './text';
 import { Divider } from './divider';
+import { RowComponent } from './row';
+import { StatusPill } from './status-pill';
 
 const Wrapper = styled.div`
   height: ${props => props.theme.headerHeight};
@@ -38,6 +40,12 @@ const TitleWrapper = styled.div`
   padding-right: ${props => props.theme.layoutPaddingRight};
 `;
 
+const TitleRow = styled(RowComponent)`
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
+
 const Title = styled(TextComponent)`
   font-size: ${props => `${props.theme.fontSize.large}em`};
   margin-top: 10px;
@@ -57,7 +65,10 @@ export const HeaderComponent = ({ title }: Props) => (
       <ZcashLogo />
     </LogoWrapper>
     <TitleWrapper>
-      <Title value={title} />
+      <TitleRow alignItems='center' justifyContent='space-around'>
+        <Title value={title} />
+        <StatusPill />
+      </TitleRow>
       <Divider opacity={0.1} />
     </TitleWrapper>
   </Wrapper>
diff --git a/app/components/status-pill.js b/app/components/status-pill.js
new file mode 100644
index 0000000..d4c8e53
--- /dev/null
+++ b/app/components/status-pill.js
@@ -0,0 +1,112 @@
+// @flow
+import React, { Component } from 'react';
+import styled, { keyframes } from 'styled-components';
+import eres from 'eres';
+
+import { TextComponent } from './text';
+
+import rpc from '../../services/api';
+
+import readyIcon from '../assets/images/green_check.png';
+import syncIcon from '../assets/images/sync_icon.png';
+import errorIcon from '../assets/images/error_icon.png';
+
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+const Wrapper = styled.div`
+  align-items: center;
+  display: flex;
+  background-color: #000;
+  border-radius: 27px;
+  padding: 7px 13px;
+`;
+
+const Icon = styled.img`
+  width: 12px;
+  height: 12px;
+  margin-right: 8px;
+  animation: 2s linear infinite;
+  animation-name: ${props => (props.animated ? rotate : 'none')};
+`;
+
+const StatusPillLabel = styled(TextComponent)`
+  color: ${props => props.theme.colors.statusPillLabel};
+  font-weight: ${props => props.theme.fontWeight.bold};
+  text-transform: uppercase;
+`;
+
+type Props = {};
+
+type State = {
+  type: string,
+  icon: string,
+  progress: number,
+  isSynching: boolean,
+};
+
+export class StatusPill extends Component<Props, State> {
+  timer: ?IntervalID = null;
+
+  state = {
+    type: 'synching',
+    icon: syncIcon,
+    progress: 0,
+    isSynching: true,
+  };
+
+  componentDidMount() {
+    this.timer = setInterval(() => {
+      this.getBlockchainStatus();
+    }, 2000);
+  }
+
+  componentWillUnmount() {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  }
+
+  getBlockchainStatus = async () => {
+    const [blockchainErr, blockchaininfo] = await eres(
+      rpc.getblockchaininfo(),
+    );
+
+    const newProgress = blockchaininfo.verificationprogress * 100;
+
+    this.setState({
+      progress: newProgress,
+      ...(newProgress > 99.99 ? {
+        type: 'ready',
+        icon: readyIcon,
+        isSynching: false,
+      } : {}),
+    });
+
+    if (blockchainErr) {
+      this.setState(() => ({ type: 'error', icon: errorIcon }));
+    }
+  }
+
+  render() {
+    const {
+      type, icon, progress, isSynching,
+    } = this.state;
+    const showPercent = isSynching ? `(${progress.toFixed(2)}%)` : '';
+
+    return (
+      <Wrapper>
+        <Icon src={icon} animated={isSynching} />
+        <StatusPillLabel value={`${type} ${showPercent}`} />
+      </Wrapper>
+    );
+  }
+}
diff --git a/app/components/status-pill.mdx b/app/components/status-pill.mdx
new file mode 100644
index 0000000..d013575
--- /dev/null
+++ b/app/components/status-pill.mdx
@@ -0,0 +1,22 @@
+---
+name: StatusPill
+---
+
+import { Playground, PropsTable } from 'docz'
+
+import { StatusPill } from './status-pill.js'
+import { DoczWrapper } from '../theme.js'
+
+# StatusPill
+
+## Properties
+
+<PropsTable of={StatusPill} />
+
+## Basic Usage
+
+<Playground>
+  <DoczWrapper>
+    {() => <StatusPill percent={83.} />}
+  </DoczWrapper>
+</Playground>
diff --git a/app/theme.js b/app/theme.js
index 1bafe92..28ea0f0 100644
--- a/app/theme.js
+++ b/app/theme.js
@@ -24,6 +24,7 @@ const transactionReceived = '#6AEAC0';
 const transactionsDate = '#777777';
 const transactionsItemHovered = '#222222';
 const selectButtonShadow = 'rgba(238,201,76,0.65)';
+const statusPillLabel = '#727272';
 const transactionsDetailsLabel = transactionsDate;
 
 const appTheme = {
@@ -68,6 +69,7 @@ const appTheme = {
     inputBackground: brandOne,
     selectButtonShadow,
     transactionsDetailsLabel,
+    statusPillLabel,
   },
   sidebarWidth: '180px',
   headerHeight: '60px',