zecwallet-lite/app/components/Zcashd.js

84 lines
2.7 KiB
JavaScript

// @flow
/* eslint-disable react/prop-types */
import React, { Component } from 'react';
import { Info, RPCConfig } from './AppState';
import cstyles from './Common.module.css';
import styles from './Zcashd.module.css';
import ScrollPane from './ScrollPane';
import Heart from '../assets/img/zcashdlogo.gif';
const DetailLine = ({ label, value }) => {
return (
<div className={styles.detailline}>
<div className={[cstyles.sublight].join(' ')}>{label} :</div>
<div className={cstyles.breakword}>{value}</div>
</div>
);
};
type Props = {
info: Info,
refresh: () => void,
rpcConfig: RPCConfig,
openServerSelectModal: () => void
};
export default class Zcashd extends Component<Props> {
render() {
const { info, rpcConfig, refresh, openServerSelectModal } = this.props;
const { url } = rpcConfig;
if (!info || !info.version) {
return (
<div>
<div className={[cstyles.verticalflex, cstyles.center].join(' ')}>
<div style={{ marginTop: '100px' }}>
<i className={['fas', 'fa-times-circle'].join(' ')} style={{ fontSize: '96px', color: 'red' }} />
</div>
<div className={cstyles.margintoplarge}>Not Connected</div>
</div>
</div>
);
// eslint-disable-next-line no-else-return
} else {
let height = info.latestBlock;
if (info.verificationProgress < 0.9999) {
const progress = (info.verificationProgress * 100).toFixed(1);
height = `${height} (${progress}%)`;
}
return (
<div>
<div className={styles.container}>
<ScrollPane offsetHeight={0}>
<div className={styles.imgcontainer}>
<img src={Heart} alt="heart" />
</div>
<div className={styles.detailcontainer}>
<div className={styles.detaillines}>
<DetailLine label="version" value={info.version} />
<DetailLine label="Lightwallet Server" value={url} />
<DetailLine label="Network" value={info.testnet ? 'Testnet' : 'Mainnet'} />
<DetailLine label="Block Height" value={height} />
</div>
</div>
<div className={cstyles.buttoncontainer}>
<button className={cstyles.primarybutton} type="button" onClick={openServerSelectModal}>
Switch LightwalletD Server
</button>
<button className={cstyles.primarybutton} type="button" onClick={refresh}>
Refresh All Data
</button>
</div>
<div className={cstyles.margintoplarge} />
</ScrollPane>
</div>
</div>
);
}
}
}