297 lines
10 KiB
JavaScript
297 lines
10 KiB
JavaScript
import React, { Component } from 'react'
|
|
import Tooltip from 'rc-tooltip'
|
|
import 'rc-tooltip/assets/bootstrap.css'
|
|
|
|
const encodeJson = json => {
|
|
const encoded = window.encodeURIComponent(JSON.stringify(json))
|
|
return `data:application/json;charset=utf-8,${encoded}`
|
|
}
|
|
|
|
export default class Keys extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.onVisibleChange = this.onVisibleChange.bind(this)
|
|
this.onCopyBtnClick = this.onCopyBtnClick.bind(this)
|
|
this.state = {
|
|
copyBtns: {
|
|
copyMiningPass: {
|
|
visible: false,
|
|
text: 'Copy'
|
|
},
|
|
copyVotingPass: {
|
|
visible: false,
|
|
text: 'Copy'
|
|
},
|
|
copyPayoutPass: {
|
|
visible: false,
|
|
text: 'Copy'
|
|
},
|
|
copyMiningKey: {
|
|
visible: false,
|
|
text: 'Copy'
|
|
},
|
|
copyVotingKey: {
|
|
visible: false,
|
|
text: 'Copy'
|
|
},
|
|
copyPayoutKey: {
|
|
visible: false,
|
|
text: 'Copy'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
componentWillUpdate(nextProps, nextState) {
|
|
if (this.refs.miningKeyAddress) {
|
|
const Clipboard = require('clipboard')
|
|
// this.clipboard = new Clipboard(this.refs.copyBtn);
|
|
new Clipboard(this.refs.miningKeyAddress)
|
|
new Clipboard(this.refs.miningKeyPass)
|
|
new Clipboard(this.refs.payoutKeyAddress)
|
|
new Clipboard(this.refs.payoutKeyPass)
|
|
new Clipboard(this.refs.votingKeyAddress)
|
|
new Clipboard(this.refs.votingKeyPass)
|
|
}
|
|
}
|
|
onVisibleChange(id) {
|
|
console.log(id)
|
|
let copyBtns = this.state.copyBtns
|
|
copyBtns[id].visible = !copyBtns[id].visible
|
|
copyBtns[id].text = 'Copy'
|
|
this.setState({
|
|
copyBtns
|
|
})
|
|
|
|
// const id = e.target.id;
|
|
}
|
|
onCopyBtnClick(e) {
|
|
const id = e.target.id
|
|
let copyBtns = this.state.copyBtns
|
|
copyBtns[id].text = 'Copied!'
|
|
this.setState({
|
|
copyBtns
|
|
})
|
|
}
|
|
render() {
|
|
return (
|
|
<div className="container">
|
|
<div className="keys">
|
|
<div className="keys-i">
|
|
<p className="keys-title">Mining key</p>
|
|
<div className="keys-hash-container">
|
|
<p className="keys-hash" id="miningKey">
|
|
0x
|
|
{this.props.mining.jsonStore.address}
|
|
</p>
|
|
<Tooltip
|
|
visible={this.state.copyBtns.copyMiningKey.visible}
|
|
animation="zoom"
|
|
trigger="hover"
|
|
onVisibleChange={() => {
|
|
this.onVisibleChange('copyMiningKey')
|
|
}}
|
|
placement="right"
|
|
overlay={this.state.copyBtns.copyMiningKey.text}
|
|
>
|
|
<span
|
|
id="copyMiningKey"
|
|
onClick={this.onCopyBtnClick}
|
|
className="copy"
|
|
ref="miningKeyAddress"
|
|
data-clipboard-text={'0x' + this.props.mining.jsonStore.address}
|
|
/>
|
|
</Tooltip>
|
|
</div>
|
|
<p className="keys-hash">
|
|
<label className="password-label">Password:</label>
|
|
<input
|
|
disabled={true}
|
|
defaultValue={this.props.mining.password}
|
|
type="password"
|
|
id="miningKeyPass"
|
|
className="pass"
|
|
/>
|
|
<Tooltip
|
|
visible={this.state.copyBtns.copyMiningPass.visible}
|
|
animation="zoom"
|
|
trigger="hover"
|
|
onVisibleChange={() => {
|
|
this.onVisibleChange('copyMiningPass')
|
|
}}
|
|
placement="right"
|
|
overlay={this.state.copyBtns.copyMiningPass.text}
|
|
>
|
|
<span
|
|
id="copyMiningPass"
|
|
onClick={this.onCopyBtnClick}
|
|
className="copy"
|
|
ref="miningKeyPass"
|
|
data-clipboard-text={this.props.mining.password}
|
|
/>
|
|
</Tooltip>
|
|
</p>
|
|
<p className="keys-description">
|
|
Download this key and use it in your mining node to validate blocks in the network. Mined coins will be
|
|
deposited to your payout account.
|
|
</p>
|
|
<div className="keys-footer">
|
|
<a
|
|
className="keys-download"
|
|
id="miningKeyDownload"
|
|
href={encodeJson(this.props.mining.jsonStore)}
|
|
download={`mining_${this.props.mining.jsonStore.address}.json`}
|
|
>
|
|
Download Mining Key
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="keys-i">
|
|
<p className="keys-title">Payout key</p>
|
|
<div className="keys-hash-container">
|
|
<p className="keys-hash" id="payoutKey">
|
|
0x
|
|
{this.props.payout.jsonStore.address}
|
|
</p>
|
|
<Tooltip
|
|
visible={this.state.copyBtns.copyPayoutKey.visible}
|
|
animation="zoom"
|
|
trigger="hover"
|
|
onVisibleChange={() => {
|
|
this.onVisibleChange('copyPayoutKey')
|
|
}}
|
|
placement="right"
|
|
overlay={this.state.copyBtns.copyPayoutKey.text}
|
|
>
|
|
<span
|
|
id="copyPayoutKey"
|
|
onClick={this.onCopyBtnClick}
|
|
className="copy"
|
|
ref="payoutKeyAddress"
|
|
data-clipboard-text={'0x' + this.props.payout.jsonStore.address}
|
|
/>
|
|
</Tooltip>
|
|
</div>
|
|
<p className="keys-hash">
|
|
<label className="password-label">Password:</label>
|
|
<input
|
|
type="password"
|
|
disabled={true}
|
|
id="payoutKeyPass"
|
|
className="pass"
|
|
defaultValue={this.props.payout.password}
|
|
/>
|
|
<Tooltip
|
|
visible={this.state.copyBtns.copyPayoutPass.visible}
|
|
animation="zoom"
|
|
trigger="hover"
|
|
onVisibleChange={() => {
|
|
this.onVisibleChange('copyPayoutPass')
|
|
}}
|
|
placement="right"
|
|
overlay={this.state.copyBtns.copyPayoutPass.text}
|
|
>
|
|
<span
|
|
id="copyPayoutPass"
|
|
onClick={this.onCopyBtnClick}
|
|
className="copy"
|
|
ref="payoutKeyPass"
|
|
data-clipboard-text={this.props.payout.password}
|
|
/>
|
|
</Tooltip>
|
|
</p>
|
|
<p className="keys-description">
|
|
Download this key and use it on your client node/wallet to spend earned coins.
|
|
</p>
|
|
<div className="keys-footer">
|
|
<a
|
|
className="keys-download"
|
|
id="payoutKeyDownload"
|
|
href={encodeJson(this.props.payout.jsonStore)}
|
|
download={`payout_${this.props.payout.jsonStore.address}.json`}
|
|
>
|
|
Download Payout Key
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="keys-i">
|
|
<p className="keys-title">Voting key</p>
|
|
<div className="keys-hash-container">
|
|
<p className="keys-hash" id="votingKey">
|
|
0x
|
|
{this.props.voting.jsonStore.address}
|
|
</p>
|
|
<Tooltip
|
|
visible={this.state.copyBtns.copyVotingKey.visible}
|
|
animation="zoom"
|
|
trigger="hover"
|
|
onVisibleChange={() => {
|
|
this.onVisibleChange('copyVotingKey')
|
|
}}
|
|
placement="right"
|
|
overlay={this.state.copyBtns.copyVotingKey.text}
|
|
>
|
|
<span
|
|
id="copyVotingKey"
|
|
onClick={this.onCopyBtnClick}
|
|
className="copy"
|
|
ref="votingKeyAddress"
|
|
data-clipboard-text={'0x' + this.props.voting.jsonStore.address}
|
|
/>
|
|
</Tooltip>
|
|
</div>
|
|
<p className="keys-hash">
|
|
<label className="password-label">Password:</label>
|
|
<input
|
|
type="password"
|
|
disabled={true}
|
|
id="votingKeyPass"
|
|
className="pass"
|
|
defaultValue={this.props.voting.password}
|
|
/>
|
|
<Tooltip
|
|
visible={this.state.copyBtns.copyVotingPass.visible}
|
|
animation="zoom"
|
|
trigger="hover"
|
|
onVisibleChange={() => {
|
|
this.onVisibleChange('copyVotingPass')
|
|
}}
|
|
placement="right"
|
|
overlay={this.state.copyBtns.copyVotingPass.text}
|
|
>
|
|
<span
|
|
id="copyVotingPass"
|
|
onClick={this.onCopyBtnClick}
|
|
className="copy"
|
|
ref="votingKeyPass"
|
|
data-clipboard-text={this.props.voting.password}
|
|
/>
|
|
</Tooltip>
|
|
</p>
|
|
<p className="keys-description">
|
|
Download this key and use it on your client node to vote for necessary ballots, such as adding or removing
|
|
miners from the network.
|
|
</p>
|
|
<div className="keys-footer">
|
|
<a
|
|
className="keys-download"
|
|
id="votingKeyDownload"
|
|
href={encodeJson(this.props.voting.jsonStore)}
|
|
download={`voting_${this.props.voting.jsonStore.address}.json`}
|
|
>
|
|
Download Voting Key
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="keys-note">
|
|
<p className="keys-note-title">Important</p>
|
|
<p className="keys-note-description">
|
|
Do not close this tab until you download all keys and save passwords. Keep keys secure and protected. If you
|
|
lose your keys, you will need to get a new initial key using Voting DAPP.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|