git.iko.soy/bridge
on b30edac help sign in
bridge/src/views/IssueChild.js
529 lines 13 kB history raw
1import { Just, Nothing } from 'folktale/maybe'
2import React from 'react'
3import { azimuth, ecliptic } from 'azimuth-js'
4import * as ob from 'urbit-ob'
6import { Row, Col, H1, H3, P, Anchor, Warning } from '../components/Base'
7import { Button, ShowBlockie, ValidatedSigil } from '../components/Base'
8import { PointInput, AddressInput, InnerLabel } from '../components/Base'
10import StatelessTransaction from '../components/StatelessTransaction'
12import { ROUTE_NAMES } from '../lib/router'
13import { NETWORK_NAMES } from '../lib/network'
14import { BRIDGE_ERROR } from '../lib/error'
15import { getSpawnCandidate } from '../lib/child'
16import { canDecodePatp, sendSignedTransaction, fromWei } from '../lib/txn'
18import {
19 ETH_ZERO_ADDR,
20 isValidAddress,
21 eqAddr,
22 addressFromSecp256k1Public
23} from '../lib/wallet'
25class IssueChild extends React.Component {
26 constructor(props) {
27 super(props)
29 const issuingPoint = props.pointCursor.matchWith({
30 Just: (pt) => parseInt(pt.value, 10),
31 Nothing: () => {
32 throw BRIDGE_ERROR.MISSING_POINT
33 }
34 })
36 const getCandidate = () => ob.patp(getSpawnCandidate(issuingPoint))
38 const suggestions = [
39 getCandidate(),
40 getCandidate(),
41 getCandidate(),
42 getCandidate()
43 ]
45 this.state = {
46 txError: Nothing(),
47 receivingAddress: '',
48 issuingPoint: issuingPoint,
49 desiredPoint: '',
50 isAvailable: Nothing(), // use Nothing to allow attempt when offline
51 userApproval: false,
52 nonce: '',
53 gasPrice: '5',
54 showGasDetails: false,
55 chainId: '',
56 gasLimit: '600000',
57 txn: Nothing(),
58 stx: Nothing(),
59 suggestions: suggestions,
60 }
62 this.handlePointInput = this.handlePointInput.bind(this)
63 this.handleAddressInput = this.handleAddressInput.bind(this)
64 this.handleConfirmAvailability = this.handleConfirmAvailability.bind(this)
65 this.handleCreateUnsignedTxn = this.handleCreateUnsignedTxn.bind(this)
66 this.handleSubmit = this.handleSubmit.bind(this)
67 this.handleSetUserApproval = this.handleSetUserApproval.bind(this)
68 this.handleSetTxn = this.handleSetTxn.bind(this)
69 this.handleSetStx = this.handleSetStx.bind(this)
70 this.handleSetNonce = this.handleSetNonce.bind(this)
71 this.handleSetChainId = this.handleSetChainId.bind(this)
72 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)
73 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)
74 this.toggleGasDetails = this.toggleGasDetails.bind(this)
75 }
77 toggleGasDetails() {
78 this.setState({
79 showGasDetails: !this.state.showGasDetails
80 })
81 }
83 componentDidMount() {
84 const { props } = this
86 const addr = props.wallet.matchWith({
87 Just: wal => addressFromSecp256k1Public(wal.value.publicKey),
88 Nothing: () => {
89 throw BRIDGE_ERROR.MISSING_WALLET
90 }
91 })
93 props.web3.matchWith({
94 Nothing: () => {},
95 Just: (w3) => {
96 const validWeb3 = w3.value
98 const getTxMetadata = [
99 validWeb3.eth.getTransactionCount(addr),
100 validWeb3.eth.net.getId(),
101 validWeb3.eth.getGasPrice()
102 ]
104 Promise.all(getTxMetadata).then(r => {
105 const txMetadata = {
106 nonce: r[0],
107 chainId: r[1],
108 gasPrice: fromWei(r[2], 'gwei'),
109 }
111 this.setState({...txMetadata})
113 })
114 }
115 })
117 }
121 handleAddressInput = (receivingAddress) => {
122 this.setState({ receivingAddress })
123 this.handleClearTxn()
124 }
128 handlePointInput(desiredPoint) {
129 if (desiredPoint.length < 15) {
130 this.setState({
131 desiredPoint,
132 isAvailable: Nothing()
133 })
134 this.handleClearTxn()
135 }
136 }
140 handleConfirmAvailability() {
141 this.confirmPointAvailability().then(r => {
142 this.setState({
143 isAvailable: r,
144 })
145 })
147 }
151 handleCreateUnsignedTxn() {
152 const txn = this.createUnsignedTxn()
153 this.setState({ txn })
154 }
157 handleSetUserApproval(){
158 const {state} = this
159 this.setState({ userApproval: !state.userApproval })
160 }
164 handleSetTxn(txn){
165 this.setState({ txn })
166 }
170 handleSetStx(stx){
171 this.setState({
172 stx,
173 userApproval: false,
174 })
175 }
179 handleSetNonce(nonce){
180 this.setState({ nonce })
181 this.handleClearStx()
182 }
186 handleSetChainId(chainId){
187 this.setState({ chainId })
188 this.handleClearStx()
189 }
193 handleSetGasPrice(gasPrice){
194 this.setState({ gasPrice })
195 this.handleClearStx()
196 }
200 handleSetGasLimit(gasLimit){
201 this.setState({ gasLimit })
202 this.handleClearStx()
203 }
207 handleClearStx() {
208 this.setState({
209 userApproval: false,
210 stx: Nothing(),
211 })
212 }
216 handleClearTxn() {
217 this.setState({
218 userApproval: false,
219 txn: Nothing(),
220 stx: Nothing(),
221 })
222 }
226 handleClearTransaction() {
227 this.setState({
228 userApproval: false,
229 txn: Nothing(),
230 stx: Nothing(),
231 })
232 }
236 handleSubmit(){
237 const { props, state } = this
238 sendSignedTransaction(props.web3.value, state.stx)
239 .then(sent => {
240 props.setTxnHashCursor(sent)
241 props.popRoute()
242 props.pushRoute(ROUTE_NAMES.SENT_TRANSACTION)
243 })
244 .catch(err => {
245 this.setState({ txError: err.map(val => val.merge()) })
246 })
247 }
249 async confirmPointAvailability() {
250 const { contracts } = this.props
251 const { desiredPoint } = this.state
253 const validContracts = contracts.matchWith({
254 Just: cs => cs.value,
255 Nothing: _ => {
256 throw BRIDGE_ERROR.MISSING_CONTRACTS
257 }
258 })
260 if (canDecodePatp(desiredPoint) === false) {
261 return Just(false)
262 }
264 const point = ob.patp2dec(desiredPoint)
265 const pointSize = azimuth.getPointSize(point)
267 const prefix = azimuth.getPrefix(point)
268 const prefixSize = azimuth.getPointSize(prefix)
270 // NB (jtobin): this prevents galaxies from attempting to spawn planets
271 //
272 if (pointSize !== prefixSize + 1) {
273 return Just(false)
274 }
276 const owner = await azimuth.getOwner(validContracts, point)
278 if (eqAddr(owner, ETH_ZERO_ADDR)) {
279 return Just(true)
280 }
282 return Just(false)
283 }
285 createUnsignedTxn() {
286 const { state, props } = this
288 if (isValidAddress(state.receivingAddress) === false) return Nothing()
289 if (state.isAvailable === false) return Nothing()
290 if (canDecodePatp(state.desiredPoint) === false) return Nothing()
292 const validContracts = props.contracts.matchWith({
293 Just: (cs) => cs.value,
294 Nothing: () => {
295 throw BRIDGE_ERROR.MISSING_CONTRACTS
296 }
297 })
299 const pointDec = ob.patp2dec(state.desiredPoint)
301 const txn = ecliptic.spawn(
302 validContracts,
303 pointDec,
304 state.receivingAddress
305 )
307 return Just(txn)
308 }
312 buttonTriState() {
313 const a = this.state.isAvailable
314 if (Nothing.hasInstance(a)) return 'blue'
315 if (a.value === false) return 'yellow'
316 if (a.value === true) return 'green'
317 }
321 buttonTriStateText() {
322 const a = this.state.isAvailable
323 if (Nothing.hasInstance(a)) return 'Confirm Availablility'
324 if (a.value === false) return 'Point is Not Available'
325 if (a.value === true) return 'Available'
326 }
328 validatePoint = patp => {
329 const point = this.point
331 let vpatp = false
332 try {
333 vpatp = ob.isValidPatp(patp)
334 } catch(_) {
335 }
337 let vchild = false
338 try {
339 vchild = ob.sein(patp) === ob.patp(point)
340 } catch(_) {
341 }
343 return vpatp && vchild
344 }
347 render() {
348 const { props, state } = this
350 const validAddress = isValidAddress(state.receivingAddress)
351 const validPoint = canDecodePatp(state.desiredPoint)
353 const canGenerate = props.web3.matchWith({
354 Nothing: () => {
355 return validAddress === true &&
356 validPoint === true
357 },
358 Just: () => {
359 return validAddress === true &&
360 validPoint === true &&
361 state.isAvailable.value === true
362 }
363 })
365 const canSign = Just.hasInstance(state.txn)
366 const canApprove = Just.hasInstance(state.stx)
367 const canSend =
368 Just.hasInstance(state.stx)
369 && state.userApproval === true
371 const esvisible =
372 props.networkType === NETWORK_NAMES.ROPSTEN ||
373 props.networkType === NETWORK_NAMES.MAINNET
375 const esdomain =
376 props.networkType === NETWORK_NAMES.ROPSTEN
377 ? "ropsten.etherscan.io"
378 : "etherscan.io"
380 return (
381 <Row>
382 <Col>
383 <H1>
384 { 'Issue a Child From ' } <code>{ `${ob.patp(state.issuingPoint)}` }</code>
385 </H1>
388 <P>
389 {
390 `Please enter the point you would like to issue, and specify the
391 receiving Ethereum address. If you need to create an address, you
392 can also use Wallet Generator.`
393 }
394 </P>
396 <P>
397 {
398 `Your point can only issue children with particular names. Some
399 valid suggestions for `
400 }
401 {
402 <code>
403 { ob.patp(state.issuingPoint) }
404 </code>
405 }
406 {
407 ' are '
408 }
409 <code>
410 { state.suggestions[0] }
411 </code>
412 { ', ' }
413 <code>
414 { state.suggestions[1] }
415 </code>
416 { ', and ' }
417 <code>
418 { state.suggestions[2] }
419 </code>
420 { '.' }
421 </P>
423 <PointInput
424 prop-size='lg'
425 prop-format='innerLabel'
426 className={'mono mt-8'}
427 placeholder={ `e.g. ${state.suggestions[3]}` }
428 value={ state.desiredPoint }
429 onChange={ this.handlePointInput }>
430 <InnerLabel>{ 'Point to Issue' }</InnerLabel>
431 <ValidatedSigil
432 className={'tr-0 mt-05 mr-0 abs'}
433 patp={state.desiredPoint}
434 size={76}
435 margin={8}
436 validator={() => this.validatePoint(state.desiredPoint)} />
437 </PointInput>
439 <AddressInput
440 className='text-mono mt-8'
441 prop-size='lg'
442 prop-format='innerLabel'
443 placeholder={ `e.g. 0x84295d5e054d8cff5a22428b195f5a1615bd644f` }
444 value={ state.receivingAddress }
445 disabled={ !state.available }
446 onChange={ v => this.handleAddressInput(v) }>
447 <InnerLabel>{ 'Receiving Address' }</InnerLabel>
448 <ShowBlockie className={'mt-1'} address={state.receivingAddress} />
449 </AddressInput>
451 <Anchor
452 className={'mt-1'}
453 prop-size={'sm'}
454 prop-disabled={!isValidAddress(state.receivingAddress) || !esvisible}
455 target={'_blank'}
456 href={`https://${esdomain}/address/${state.receivingAddress}`}>
457 {'View on Etherscan ↗'}
458 </Anchor>
460 {
461 props.web3.matchWith({
462 Nothing: _ => <div />,
463 Just: _ =>
464 <Button
465 prop-size='lg wide'
466 prop-color={this.buttonTriState()}
467 className={'mt-8'}
468 disabled={!validPoint}
469 onClick={this.handleConfirmAvailability}>
470 {this.buttonTriStateText()}
471 </Button>
472 })
473 }
475 <StatelessTransaction
476 // Upper scope
477 web3={props.web3}
478 contracts={props.contracts}
479 wallet={props.wallet}
480 walletType={props.walletType}
481 walletHdPath={props.walletHdPath}
482 networkType={props.networkType}
483 // Tx
484 txn={state.txn}
485 stx={state.stx}
486 // Tx details
487 nonce={state.nonce}
488 gasPrice={state.gasPrice}
489 showGasDetails={state.showGasDetails}
490 toggleGasDetails={this.toggleGasDetails}
491 chainId={state.chainId}
492 gasLimit={state.gasLimit}
493 // Checks
494 userApproval={state.userApproval}
495 canGenerate={ canGenerate }
496 canSign={ canSign }
497 canApprove={ canApprove }
498 canSend={ canSend }
499 // Methods
500 createUnsignedTxn={this.handleCreateUnsignedTxn}
501 setUserApproval={this.handleSetUserApproval}
502 setTxn={this.handleSetTxn}
503 setStx={this.handleSetStx}
504 setNonce={this.handleSetNonce}
505 setChainId={this.handleSetChainId}
506 setGasPrice={this.handleSetGasPrice}
507 setGasLimit={this.handleSetGasLimit}
508 handleSubmit={this.handleSubmit} />
510 {
511 Nothing.hasInstance(state.txError)
512 ? ''
513 : <Warning className={'mt-8'}>
514 <H3 style={{marginTop: 0, paddingTop: 0}}>
515 {
516 'There was an error sending your transaction.'
517 }
518 </H3>
519 { state.txError.value }
520 </Warning>
521 }
523 </Col>
524 </Row>
525 )
526 }
529export default IssueChild