git.iko.soy/bridge
on 345aeb5 help sign in
bridge/src/views/IssueChild.js
521 lines 13 kB history raw
1import Maybe from 'folktale/maybe'
2import React from 'react'
3import * as azimuth 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 {
17 canDecodePatp,
18 sendSignedTransaction,
19 fromWei,
20 } from '../lib/txn'
22import {
23 ETH_ZERO_ADDR,
24 isValidAddress,
25 eqAddr,
26 addressFromSecp256k1Public
27} from '../lib/wallet'
29class IssueChild extends React.Component {
30 constructor(props) {
31 super(props)
34 const issuingPoint = props.pointCursor.matchWith({
35 Just: (pt) => parseInt(pt.value, 10),
36 Nothing: () => {
37 throw BRIDGE_ERROR.MISSING_POINT
38 }
39 })
41 const getCandidate = () => ob.patp(getSpawnCandidate(issuingPoint))
43 const suggestions = [
44 getCandidate(),
45 getCandidate(),
46 getCandidate(),
47 getCandidate()
48 ]
50 this.state = {
51 txError: Maybe.Nothing(),
52 receivingAddress: '',
53 issuingPoint: issuingPoint,
54 desiredPoint: '',
55 isAvailable: Maybe.Nothing(), // allow attempt when offline
56 userApproval: false,
57 nonce: '',
58 gasPrice: '5',
59 chainId: '',
60 gasLimit: '600000',
61 txn: Maybe.Nothing(),
62 stx: Maybe.Nothing(),
63 suggestions: suggestions,
64 }
66 this.handlePointInput = this.handlePointInput.bind(this)
67 this.handleAddressInput = this.handleAddressInput.bind(this)
68 this.handleConfirmAvailability = this.handleConfirmAvailability.bind(this)
69 // Transaction
70 this.handleCreateUnsignedTxn = this.handleCreateUnsignedTxn.bind(this)
71 this.handleSubmit = this.handleSubmit.bind(this)
72 this.handleSetUserApproval = this.handleSetUserApproval.bind(this)
73 this.handleSetTxn = this.handleSetTxn.bind(this)
74 this.handleSetStx = this.handleSetStx.bind(this)
75 this.handleSetNonce = this.handleSetNonce.bind(this)
76 this.handleSetChainId = this.handleSetChainId.bind(this)
77 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)
78 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)
79 }
81 componentDidMount() {
82 const { props } = this
84 const addr = props.wallet.matchWith({
85 Just: wal => addressFromSecp256k1Public(wal.value.publicKey),
86 Nothing: () => {
87 throw BRIDGE_ERROR.MISSING_WALLET
88 }
89 })
91 props.web3.matchWith({
92 Nothing: () => {},
93 Just: (w3) => {
94 const validWeb3 = w3.value
96 const getTxMetadata = [
97 validWeb3.eth.getTransactionCount(addr),
98 validWeb3.eth.net.getId(),
99 validWeb3.eth.getGasPrice()
100 ];
102 Promise.all(getTxMetadata).then(r => {
103 const txMetadata = {
104 nonce: r[0],
105 chainId: r[1],
106 gasPrice: fromWei(r[2], 'gwei'),
107 };
109 this.setState({...txMetadata})
111 })
112 }
113 });
115 }
119 handleAddressInput = (receivingAddress) => {
120 this.setState({ receivingAddress })
121 this.handleClearTxn()
122 }
126 handlePointInput(desiredPoint) {
127 if (desiredPoint.length < 15) {
128 this.setState({
129 desiredPoint,
130 isAvailable: Maybe.Nothing()
131 })
132 this.handleClearTxn()
133 }
134 }
138 handleConfirmAvailability() {
139 this.confirmPointAvailability().then(r => {
140 this.setState({
141 isAvailable: r,
142 })
143 })
145 }
149 handleCreateUnsignedTxn() {
150 const txn = this.createUnsignedTxn()
151 this.setState({ txn })
152 }
155 handleSetUserApproval(){
156 const {state} = this
157 this.setState({ userApproval: !state.userApproval })
158 }
162 handleSetTxn(txn){
163 this.setState({ txn })
164 }
168 handleSetStx(stx){
169 this.setState({
170 stx,
171 userApproval: false,
172 })
173 }
177 handleSetNonce(nonce){
178 this.setState({ nonce })
179 this.handleClearStx()
180 }
184 handleSetChainId(chainId){
185 this.setState({ chainId })
186 this.handleClearStx()
187 }
191 handleSetGasPrice(gasPrice){
192 this.setState({ gasPrice })
193 this.handleClearStx()
194 }
198 handleSetGasLimit(gasLimit){
199 this.setState({ gasLimit })
200 this.handleClearStx()
201 }
205 handleClearStx() {
206 this.setState({
207 userApproval: false,
208 stx: Maybe.Nothing(),
209 })
210 }
214 handleClearTxn() {
215 this.setState({
216 userApproval: false,
217 txn: Maybe.Nothing(),
218 stx: Maybe.Nothing(),
219 })
220 }
224 handleClearTransaction() {
225 this.setState({
226 userApproval: false,
227 txn: Maybe.Nothing(),
228 stx: Maybe.Nothing(),
229 })
230 }
234 handleSubmit(){
235 const { props, state } = this
236 sendSignedTransaction(props.web3.value, state.stx)
237 .then(sent => {
238 props.setTxnHashCursor(sent)
239 props.popRoute()
240 props.pushRoute(ROUTE_NAMES.SENT_TRANSACTION)
241 })
242 .catch(err => {
243 this.setState({ txError: err.map(val => val.merge()) })
244 })
245 }
249 async confirmPointAvailability() {
250 const { state, props } = this
252 if (canDecodePatp(state.desiredPoint) === false) return Maybe.Just(false)
254 const validContracts = props.contracts.matchWith({
255 Just: (cs) => cs.value,
256 Nothing: () => {
257 throw BRIDGE_ERROR.MISSING_CONTRACTS
258 }
259 })
261 const pointDec = ob.patp2dec(state.desiredPoint)
263 // This check prevents galaxies from creating planets, bc right now it results in a failed tx
264 // The intention is for the Azimuth contract to allow this in the future someday soon
265 // This size check will need to be removed at that time
266 const prefixSize = azimuth.azimuth.getPointSize(azimuth.azimuth.getPrefix(pointDec))
267 if (prefixSize + 1 !== azimuth.azimuth.getPointSize(pointDec)) return Maybe.Just(false)
269 const owner = await azimuth.azimuth.getOwner(
270 validContracts,
271 pointDec
272 )
274 if (eqAddr(owner, ETH_ZERO_ADDR)) return Maybe.Just(true)
276 return Maybe.Just(false)
277 }
281 createUnsignedTxn() {
282 const { state, props } = this
284 if (isValidAddress(state.receivingAddress) === false) return Maybe.Nothing()
285 if (state.isAvailable === false) return Maybe.Nothing()
286 if (canDecodePatp(state.desiredPoint) === false) return Maybe.Nothing()
288 const validContracts = props.contracts.matchWith({
289 Just: (cs) => cs.value,
290 Nothing: () => {
291 throw BRIDGE_ERROR.MISSING_CONTRACTS
292 }
293 })
295 const pointDec = ob.patp2dec(state.desiredPoint)
297 const txn = azimuth.ecliptic.spawn(
298 validContracts,
299 pointDec,
300 state.receivingAddress
301 )
303 return Maybe.Just(txn)
304 }
308 buttonTriState() {
309 const a = this.state.isAvailable
310 if (Maybe.Nothing.hasInstance(a)) return 'blue'
311 if (a.value === false) return 'yellow'
312 if (a.value === true) return 'green'
313 }
317 buttonTriStateText() {
318 const a = this.state.isAvailable
319 if (Maybe.Nothing.hasInstance(a)) return 'Confirm Availablility'
320 if (a.value === false) return 'Point is Not Available'
321 if (a.value === true) return 'Available'
322 }
324 validatePoint = patp => {
325 const point = this.point
327 let vpatp = false
328 try {
329 vpatp = ob.isValidPatp(patp)
330 } catch(_) {
331 }
333 let vchild = false
334 try {
335 vchild = ob.sein(patp) === ob.patp(point)
336 } catch(_) {
337 }
339 return vpatp && vchild
340 }
343 render() {
344 const { props, state } = this
346 const validAddress = isValidAddress(state.receivingAddress)
347 const validPoint = canDecodePatp(state.desiredPoint)
349 const canGenerate = props.web3.matchWith({
350 Nothing: () => {
351 return validAddress === true &&
352 validPoint === true
353 },
354 Just: () => {
355 return validAddress === true &&
356 validPoint === true &&
357 state.isAvailable.value === true
358 }
359 })
361 const canSign = !Maybe.Nothing.hasInstance(state.txn)
362 const canApprove = !Maybe.Nothing.hasInstance(state.stx)
363 const canSend = !Maybe.Nothing.hasInstance(state.stx) && state.userApproval === true
365 const esvisible =
366 props.networkType === NETWORK_NAMES.ROPSTEN ||
367 props.networkType === NETWORK_NAMES.MAINNET
369 const esdomain =
370 props.networkType === NETWORK_NAMES.ROPSTEN
371 ? "ropsten.etherscan.io"
372 : "etherscan.io"
374 return (
375 <Row>
376 <Col>
377 <H1>
378 { 'Issue a Child From ' } <code>{ `${ob.patp(state.issuingPoint)}` }</code>
379 </H1>
382 <P>
383 {
384 `Please enter the point you would like to issue, and specify the
385 receiving Ethereum address. If you need to create an address, you
386 can also use Wallet Generator.`
387 }
388 </P>
390 <P>
391 {
392 `Your point can only issue children with particular names. Some
393 valid suggestions for `
394 }
395 {
396 <code>
397 { ob.patp(state.issuingPoint) }
398 </code>
399 }
400 {
401 ' are '
402 }
403 <code>
404 { state.suggestions[0] }
405 </code>
406 { ', ' }
407 <code>
408 { state.suggestions[1] }
409 </code>
410 { ', and ' }
411 <code>
412 { state.suggestions[2] }
413 </code>
414 { '.' }
415 </P>
417 <PointInput
418 prop-size='lg'
419 prop-format='innerLabel'
420 className={'mono mt-8'}
421 placeholder={ `e.g. ${state.suggestions[3]}` }
422 value={ state.desiredPoint }
423 onChange={ this.handlePointInput }>
424 <InnerLabel>{ 'Point to Issue' }</InnerLabel>
425 <ValidatedSigil
426 className={'tr-0 mt-05 mr-0 abs'}
427 patp={state.desiredPoint}
428 size={76}
429 margin={8}
430 validator={() => this.validatePoint(state.desiredPoint)} />
431 </PointInput>
433 <AddressInput
434 className='text-mono mt-8'
435 prop-size='lg'
436 prop-format='innerLabel'
437 placeholder={ `e.g. 0x84295d5e054d8cff5a22428b195f5a1615bd644f` }
438 value={ state.receivingAddress }
439 disabled={ !state.available }
440 onChange={ v => this.handleAddressInput(v) }>
441 <InnerLabel>{ 'Receiving Address' }</InnerLabel>
442 <ShowBlockie className={'mt-1'} address={state.receivingAddress} />
443 </AddressInput>
445 <Anchor
446 className={'mt-1'}
447 prop-size={'sm'}
448 prop-disabled={!isValidAddress(state.receivingAddress) || !esvisible}
449 target={'_blank'}
450 href={`https://${esdomain}/address/${state.receivingAddress}`}>
451 {'View on Etherscan ↗'}
452 </Anchor>
454 {
455 props.web3.matchWith({
456 Nothing: _ => <div />,
457 Just: _ =>
458 <Button
459 prop-size='lg wide'
460 prop-color={this.buttonTriState()}
461 className={'mt-8'}
462 disabled={!validPoint}
463 onClick={this.handleConfirmAvailability}>
464 {this.buttonTriStateText()}
465 </Button>
466 })
467 }
469 <StatelessTransaction
470 // Upper scope
471 web3={props.web3}
472 contracts={props.contracts}
473 wallet={props.wallet}
474 walletType={props.walletType}
475 walletHdPath={props.walletHdPath}
476 networkType={props.networkType}
477 // Tx
478 txn={state.txn}
479 stx={state.stx}
480 // Tx details
481 nonce={state.nonce}
482 gasPrice={state.gasPrice}
483 chainId={state.chainId}
484 gasLimit={state.gasLimit}
485 // Checks
486 userApproval={state.userApproval}
487 canGenerate={ canGenerate }
488 canSign={ canSign }
489 canApprove={ canApprove }
490 canSend={ canSend }
491 // Methods
492 createUnsignedTxn={this.handleCreateUnsignedTxn}
493 setUserApproval={this.handleSetUserApproval}
494 setTxn={this.handleSetTxn}
495 setStx={this.handleSetStx}
496 setNonce={this.handleSetNonce}
497 setChainId={this.handleSetChainId}
498 setGasPrice={this.handleSetGasPrice}
499 setGasLimit={this.handleSetGasLimit}
500 handleSubmit={this.handleSubmit} />
502 {
503 Maybe.Nothing.hasInstance(state.txError)
504 ? ''
505 : <Warning className={'mt-8'}>
506 <H3 style={{marginTop: 0, paddingTop: 0}}>
507 {
508 'There was an error sending your transaction.'
509 }
510 </H3>
511 { state.txError.value }
512 </Warning>
513 }
515 </Col>
516 </Row>
517 )
518 }
521export default IssueChild