git.iko.soy/bridge
on da9327a help sign in
bridge/src/views/SetProxy.js
392 lines 9.5 kB history raw
1import Maybe from 'folktale/maybe'
2import React from 'react'
3import * as azimuth from 'azimuth-js'
4import { Row, Col, H1, H3, P, InnerLabel, ShowBlockie, Anchor } from '../components/Base'
5import { AddressInput, Warning } from '../components/Base'
6import * as ob from 'urbit-ob'
8import { PROXY_TYPE, renderProxyType } from '../lib/proxy'
9import { BRIDGE_ERROR } from '../lib/error'
11import { NETWORK_NAMES } from '../lib/network'
13import StatelessTransaction from '../components/StatelessTransaction'
15import { ROUTE_NAMES } from '../lib/router'
17import {
18 sendSignedTransaction,
19 fromWei,
20 } from '../lib/txn'
22import {
23 isValidAddress,
24 addressFromSecp256k1Public,
25} from '../lib/wallet'
27const SetManagementProxy = (props) =>
28 <SetProxy
29 { ...props }
30 proxyType={ PROXY_TYPE.MANAGEMENT_PROXY }
31 />
33const SetSpawnProxy = (props) =>
34 <SetProxy
35 { ...props }
36 proxyType={ PROXY_TYPE.SPAWN_PROXY }
37 />
39const SetTransferProxy = (props) =>
40 <SetProxy
41 { ...props }
42 proxyType={ PROXY_TYPE.TRANSFER_PROXY }
43 />
45class SetProxy extends React.Component {
46 constructor(props) {
47 super(props)
49 const issuingPoint = props.pointCursor.matchWith({
50 Just: (shp) => shp.value,
51 Nothing: () => {
52 throw BRIDGE_ERROR.MISSING_POINT
53 }
54 })
56 this.state = {
57 proxyAddress: '',
58 txn: Maybe.Nothing(),
59 txError: Maybe.Nothing(),
60 issuingPoint: issuingPoint,
61 showGasDetails: false,
62 userApproval: false,
63 nonce: '',
64 gasPrice: '5',
65 chainId: '',
66 gasLimit: '600000',
67 stx: Maybe.Nothing(),
68 }
70 this.handleAddressInput = this.handleAddressInput.bind(this)
71 // Transaction
72 this.handleCreateUnsignedTxn = this.handleCreateUnsignedTxn.bind(this)
73 this.handleSubmit = this.handleSubmit.bind(this)
74 this.handleSetUserApproval = this.handleSetUserApproval.bind(this)
75 this.handleSetTxn = this.handleSetTxn.bind(this)
76 this.handleSetStx = this.handleSetStx.bind(this)
77 this.handleSetNonce = this.handleSetNonce.bind(this)
78 this.handleSetChainId = this.handleSetChainId.bind(this)
79 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)
80 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)
81 this.toggleGasDetails = this.toggleGasDetails.bind(this)
82 }
84 toggleGasDetails() {
85 this.setState({
86 showGasDetails: !this.state.showGasDetails
87 })
88 }
90 componentDidMount() {
91 const { props } = this
93 const addr = props.wallet.matchWith({
94 Just: wal => addressFromSecp256k1Public(wal.value.publicKey),
95 Nothing: () => {
96 throw BRIDGE_ERROR.MISSING_WALLET
97 }
98 })
100 props.web3.matchWith({
101 Nothing: () => {},
102 Just: (w3) => {
103 const validWeb3 = w3.value
105 const getTxMetadata = [
106 validWeb3.eth.getTransactionCount(addr),
107 validWeb3.eth.net.getId(),
108 validWeb3.eth.getGasPrice()
109 ];
111 Promise.all(getTxMetadata).then(r => {
112 const txMetadata = {
113 nonce: r[0],
114 chainId: r[1],
115 gasPrice: fromWei(r[2], 'gwei'),
116 };
118 this.setState({...txMetadata})
120 })
121 }
122 });
124 }
128 handleAddressInput(proxyAddress) {
129 this.setState({ proxyAddress })
130 this.handleClearTxn()
131 }
134 handleCreateUnsignedTxn() {
135 const txn = this.createUnsignedTxn()
136 this.setState({ txn })
137 }
140 handleSetUserApproval(){
141 const {state} = this
142 this.setState({ userApproval: !state.userApproval })
143 }
147 handleSetTxn(txn){
148 this.setState({ txn })
149 }
153 handleSetStx(stx){
154 this.setState({
155 stx,
156 userApproval: false,
157 })
158 }
162 handleSetNonce(nonce){
163 this.setState({ nonce })
164 this.handleClearStx()
165 }
169 handleSetChainId(chainId){
170 this.setState({ chainId })
171 this.handleClearStx()
172 }
176 handleSetGasPrice(gasPrice){
177 this.setState({ gasPrice })
178 this.handleClearStx()
179 }
183 handleSetGasLimit(gasLimit){
184 this.setState({ gasLimit })
185 this.handleClearStx()
186 }
190 handleClearStx() {
191 this.setState({
192 userApproval: false,
193 stx: Maybe.Nothing(),
194 })
195 }
199 handleClearTxn() {
200 this.setState({
201 userApproval: false,
202 txn: Maybe.Nothing(),
203 stx: Maybe.Nothing(),
204 })
205 }
209 handleClearTransaction() {
210 this.setState({
211 userApproval: false,
212 txn: Maybe.Nothing(),
213 stx: Maybe.Nothing(),
214 })
215 }
219 handleSubmit(){
220 const { props, state } = this
221 sendSignedTransaction(props.web3.value, state.stx)
222 .then(sent => {
223 props.setTxnHashCursor(sent)
224 props.popRoute()
225 props.pushRoute(ROUTE_NAMES.SENT_TRANSACTION)
226 })
227 .catch(err => {
228 this.setState({ txError: err.map(val => val.merge()) })
229 })
230 }
233 createUnsignedTxn(proxyAddress) {
234 const { state, props } = this
236 const validContracts = props.contracts.matchWith({
237 Just: (cs) => cs.value,
238 Nothing: () => {
239 throw BRIDGE_ERROR.MISSING_CONTRACTS
240 }
241 })
243 const validPoint = props.pointCursor.matchWith({
244 Just: (shp) => shp.value,
245 Nothing: () => {
246 throw BRIDGE_ERROR.MISSING_POINT
247 }
248 })
250 const txArgs = [
251 validContracts,
252 validPoint,
253 state.proxyAddress
254 ]
256 if (props.proxyType === PROXY_TYPE.TRANSFER_PROXY) {
257 return Maybe.Just(azimuth.ecliptic.setTransferProxy(...txArgs))
258 }
260 if (props.proxyType === PROXY_TYPE.SPAWN_PROXY) {
261 return Maybe.Just(azimuth.ecliptic.setSpawnProxy(...txArgs))
262 }
264 if (props.proxyType === PROXY_TYPE.MANAGEMENT_PROXY) {
265 return Maybe.Just(azimuth.ecliptic.setManagementProxy(...txArgs))
266 }
268 return Maybe.Nothing()
270 }
272 render() {
274 const { props, state } = this
276 const renderedProxyType = renderProxyType(props.proxyType)
278 const validAddress = isValidAddress(state.proxyAddress)
280 const canGenerate = validAddress === true
282 const canSign = Maybe.Just.hasInstance(state.txn)
283 const canApprove = Maybe.Just.hasInstance(state.stx)
284 const canSend = Maybe.Just.hasInstance(state.stx) && state.userApproval === true
286 const esvisible =
287 props.networkType === NETWORK_NAMES.ROPSTEN ||
288 props.networkType === NETWORK_NAMES.MAINNET
290 const esdomain =
291 props.networkType === NETWORK_NAMES.ROPSTEN
292 ? "ropsten.etherscan.io"
293 : "etherscan.io"
295 const ucFirst = w => w.charAt(0).toUpperCase() + w.slice(1);
298 return (
299 <Row>
300 <Col>
301 <H1>
302 { `Set ${ucFirst(renderedProxyType)} Proxy For ` }
303 <code>{ `${ob.patp(state.issuingPoint)}` }</code>
304 </H1>
306 <P>
307 {
308 'Please provide an Ethereum address to act as the ' +
309 `${renderedProxyType} proxy. You can also use Wallet ` +
310 'Generator to generate a keypair.'
311 }
312 </P>
314 <AddressInput
315 className='mono mt-8'
316 prop-size='lg'
317 prop-format='innerLabel'
318 placeholder={ `e.g. 0x84295d5e054d8cff5a22428b195f5a1615bd644f` }
319 value={ state.proxyAddress }
320 onChange={ v => this.handleAddressInput(v) }>
321 <InnerLabel>{ 'Proxy Address' }</InnerLabel>
322 <ShowBlockie className={'mt-1'} address={state.proxyAddress} />
323 </AddressInput>
325 <Anchor
326 className={'mt-1'}
327 prop-size={'sm'}
328 prop-disabled={!isValidAddress(state.proxyAddress) || !esvisible}
329 target={'_blank'}
330 href={`https://${esdomain}/address/${state.proxyAddress}`}>
331 {'View on Etherscan ↗'}
332 </Anchor>
334 <StatelessTransaction
335 // Upper scope
336 web3={props.web3}
337 contracts={props.contracts}
338 wallet={props.wallet}
339 walletType={props.walletType}
340 walletHdPath={props.walletHdPath}
341 networkType={props.networkType}
342 // Tx
343 txn={state.txn}
344 stx={state.stx}
345 // Tx details
346 nonce={state.nonce}
347 gasPrice={state.gasPrice}
348 chainId={state.chainId}
349 gasLimit={state.gasLimit}
350 showGasDetails={state.showGasDetails}
351 toggleGasDetails={this.toggleGasDetails}
352 // Checks
353 userApproval={state.userApproval}
354 canGenerate={ canGenerate }
355 canSign={ canSign }
356 canApprove={ canApprove }
357 canSend={ canSend }
358 // Methods
359 createUnsignedTxn={this.handleCreateUnsignedTxn}
360 setUserApproval={this.handleSetUserApproval}
361 setTxn={this.handleSetTxn}
362 setStx={this.handleSetStx}
363 setNonce={this.handleSetNonce}
364 setChainId={this.handleSetChainId}
365 setGasPrice={this.handleSetGasPrice}
366 setGasLimit={this.handleSetGasLimit}
367 handleSubmit={this.handleSubmit} />
369 {
370 Maybe.Nothing.hasInstance(state.txError)
371 ? ''
372 : <Warning className={'mt-8'}>
373 <H3 style={{marginTop: 0, paddingTop: 0}}>
374 {
375 'There was an error sending your transaction.'
376 }
377 </H3>
378 { state.txError.value }
379 </Warning>
380 }
382 </Col>
383 </Row>
384 )
385 }
388export {
389 SetManagementProxy,
390 SetSpawnProxy,
391 SetTransferProxy