/
EosBuyAccountModal.js
128 lines (109 loc) · 3.96 KB
/
EosBuyAccountModal.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import React, { Fragment } from 'react'
import { Modal } from 'components/modal'
import { Button } from 'components/controls'
import { FieldLabel, Input } from 'components/forms'
import Link from 'sw-valuelink'
import config from 'app-config'
import actions from 'redux/actions'
import { constants, eos } from 'helpers'
import { getState } from 'redux/core'
import cssModules from 'react-css-modules'
import styles from './EosBuyAccountModal.scss'
import Tooltip from 'components/ui/Tooltip/Tooltip'
import { FormattedMessage } from 'react-intl'
@cssModules(styles)
export default class EosBuyAccountModal extends React.Component {
state = {
activePrivateKey: '',
activePublicKey: '',
accountName: '',
price: '',
error: '',
}
async componentDidMount() {
const {
user: {
eosData: {
activePrivateKey,
activePublicKey,
address: accountName,
},
},
} = getState()
const { buyAccountPriceInBTC: price } = config.api.eos
this.setState({ activePrivateKey, activePublicKey, accountName, price })
}
handleSubmit = async () => {
actions.loader.show(true)
try {
await actions.eos.buyAccount()
actions.modals.close(constants.modals.EosBuyAccount)
} catch (e) {
console.error(e)
this.setState({ error: e.toString() })
}
actions.loader.hide()
}
render() {
const { error, activePrivateKey, activePublicKey, accountName, price } = this.state
const { name } = this.props
const linked = Link.all(this, 'accountName', 'activePrivateKey', 'activePublicKey', 'price')
const activationPayment = localStorage.getItem(constants.localStorage.eosActivationPayment)
return (
<Fragment>
<Modal name={name} title="EOS Register">
<div>
<FieldLabel inRow>
<FormattedMessage id="EosBuyAccountModal72" defaultMessage="Account name" />
<Tooltip text="This account will be registered in EOS blockchain" />
</FieldLabel>
<Input readOnly="true" valueLink={linked.accountName} />
</div>
<div>
<FieldLabel inRow>
<FormattedMessage id="EosBuyAccountModal78" defaultMessage="APrivate key" />
<Tooltip text="Private key for active and owner permissions" />
</FieldLabel>
<Input readOnly="true" valueLink={linked.activePrivateKey} />
</div>
<div>
<FieldLabel inRow>
<FormattedMessage id="EosBuyAccountModal84" defaultMessage="Public key" />
<Tooltip text="Public key associated with account" />
</FieldLabel>
<Input readOnly="true" valueLink={linked.activePublicKey} />
</div>
<div>
<FieldLabel inRow>
<FormattedMessage id="EosBuyAccountModal90" defaultMessage="Price (BTC)" />
<Tooltip text="This amount will be withdrawn from your BTC wallet" />
</FieldLabel>
<Input readOnly="true" valueLink={linked.price} />
</div>
{ error && (
<div styleName="error">
<FormattedMessage id="EosBuyAccountModal103" defaultMessage="Sorry, error occured during activation, try again" />
</div>
)}
{ activationPayment && (
<div>
<strong>
<FormattedMessage id="EosBuyAccountModal109" defaultMessage="Payment transaction:" />
<a
href={`${config.link.bitpay}/tx/${activationPayment}`}
target="_blank"
rel="noopener noreferrer"
>
{activationPayment}
</a>
</strong>
</div>
)}
<Button styleName="button" brand fullWidth onClick={this.handleSubmit}>
<FormattedMessage id="EosBuyAccountModal114" defaultMessage="Create account" />
</Button>
</Modal>
</Fragment>
)
}
}