113 lines
2.3 KiB
JavaScript
113 lines
2.3 KiB
JavaScript
|
// @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>
|
||
|
);
|
||
|
}
|
||
|
}
|