Merge pull request #24 from andrerfneves/feature/console-view-layout
Feature/console view layout
This commit is contained in:
commit
fba42defd3
File diff suppressed because it is too large
Load Diff
After Width: | Height: | Size: 1.9 MiB |
|
@ -5,12 +5,37 @@ import React, { Component, Fragment } from 'react';
|
||||||
import { ipcRenderer } from 'electron';
|
import { ipcRenderer } from 'electron';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import generateRandomString from '../utils/generate-random-string';
|
import generateRandomString from '../utils/generate-random-string';
|
||||||
|
import { TextComponent } from '../components/text';
|
||||||
|
|
||||||
|
import ConsoleSymbol from '../assets/images/console_zcash.svg';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||||
|
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
||||||
|
border-radius: ${props => props.theme.boxBorderRadius};
|
||||||
|
padding: 38px 33.5px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const ConsoleText = styled(TextComponent)`
|
||||||
|
font-family: 'Source Code Pro', monospace;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ConsoleImg = styled.img`
|
||||||
|
height: 200px;
|
||||||
|
width: auto;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const initialLog = `
|
||||||
|
Thank you for running a Zcash node!
|
||||||
|
You're helping to strengthen the network and contributing to a social good :)
|
||||||
|
|
||||||
|
In order to ensure you are adequately protecting your privacy when using Zcash, please see <https://z.cash/support/security/>.
|
||||||
|
`;
|
||||||
|
|
||||||
|
const breakpoints = [1, 4, 7, 10, 13];
|
||||||
|
|
||||||
type Props = {};
|
type Props = {};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
|
@ -18,22 +43,13 @@ type State = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export class ConsoleView extends Component<Props, State> {
|
export class ConsoleView extends Component<Props, State> {
|
||||||
scrollView = React.createRef();
|
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
log: '',
|
log: '',
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
ipcRenderer.on('zcashd-log', (event, message) => {
|
ipcRenderer.on('zcashd-log', (event, message) => {
|
||||||
this.setState(state => ({
|
this.setState(() => ({ log: initialLog + message }));
|
||||||
log: `${state.log}\n${message}`,
|
|
||||||
}));
|
|
||||||
|
|
||||||
if (this.scrollView && this.scrollView.current) {
|
|
||||||
// eslint-disable-next-line
|
|
||||||
this.scrollView.current.scrollTop = this.scrollView.current.scrollHeight;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -41,14 +57,20 @@ export class ConsoleView extends Component<Props, State> {
|
||||||
const { log } = this.state;
|
const { log } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Wrapper ref={this.scrollView}>
|
<Wrapper>
|
||||||
{log
|
{log ? (
|
||||||
&& log.split('\n').map(item => (
|
<Fragment>
|
||||||
<Fragment key={generateRandomString()}>
|
<ConsoleImg src={ConsoleSymbol} alt='Zcashd' />
|
||||||
{item}
|
{log.split('\n').map((item, idx) => (
|
||||||
<br />
|
<Fragment key={generateRandomString()}>
|
||||||
</Fragment>
|
<ConsoleText value={item} />
|
||||||
))}
|
{breakpoints.includes(idx) ? <br /> : null}
|
||||||
|
</Fragment>
|
||||||
|
))}
|
||||||
|
</Fragment>
|
||||||
|
) : (
|
||||||
|
<ConsoleText value='Waiting for daemon logs...' />
|
||||||
|
)}
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,7 +31,7 @@ const getDaemonOptions = ({ username, password }) => {
|
||||||
const defaultOptions = [
|
const defaultOptions = [
|
||||||
'-showmetrics',
|
'-showmetrics',
|
||||||
'--metricsui=0',
|
'--metricsui=0',
|
||||||
'-metricsrefreshtime=3',
|
'-metricsrefreshtime=1',
|
||||||
`-rpcuser=${username}`,
|
`-rpcuser=${username}`,
|
||||||
`-rpcpassword=${password}`,
|
`-rpcpassword=${password}`,
|
||||||
];
|
];
|
||||||
|
@ -92,7 +92,7 @@ const runDaemon: () => Promise<?ChildProcess> = () => new Promise(async (resolve
|
||||||
);
|
);
|
||||||
|
|
||||||
childProcess.stdout.on('data', (data) => {
|
childProcess.stdout.on('data', (data) => {
|
||||||
if (mainWindow) mainWindow.webContents.send('zcashd-log', data.toString());
|
if (mainWindow && mainWindow.webContents) mainWindow.webContents.send('zcashd-log', data.toString());
|
||||||
if (!resolved) {
|
if (!resolved) {
|
||||||
resolve(childProcess);
|
resolve(childProcess);
|
||||||
resolved = true;
|
resolved = true;
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
<link rel="shortcut icon" href="favicon.ico" />
|
<link rel="shortcut icon" href="favicon.ico" />
|
||||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet" />
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" />
|
||||||
|
|
||||||
<title>Zcash Reference Wallet</title>
|
<title>Zcash Reference Wallet</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
Loading…
Reference in New Issue