git.iko.soy/bridge
on e72ca11 help sign in
bridge/src/views/IssueChild.js
516 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, Form, InnerLabel } from '../components/Base'
10import StatelessTransaction from '../components/StatelessTransaction'
12import { ROUTE_NAMES } from '../lib/router'
13import { BRIDGE_ERROR } from '../lib/error'
14import { getSpawnCandidate } from '../lib/child'
15import {
16 canDecodePatp,
17 sendSignedTransaction,
18 fromWei,
19 } from '../lib/txn'
21import {
22 ETH_ZERO_ADDR,
23 isValidAddress,
24 eqAddr,
25 addressFromSecp256k1Public
26} from '../lib/wallet'
28class IssueChild extends React.Component {
29 constructor(props) {
30 super(props)
33 const issuingPoint = props.pointCursor.matchWith({
34 Just: (pt) => parseInt(pt.value, 10),
35 Nothing: () => {
36 throw BRIDGE_ERROR.MISSING_POINT
37 }
38 })
40 const getCandidate = () => ob.patp(getSpawnCandidate(issuingPoint))
42 const suggestions = [
43 getCandidate(),
44 getCandidate(),
45 getCandidate(),
46 getCandidate()
47 ]
49 this.state = {
50 txError: Maybe.Nothing(),
51 receivingAddress: '',
52 issuingPoint: issuingPoint,
53 desiredPoint: '',
54 isAvailable: Maybe.Nothing(), // allow attempt when offline
55 userApproval: false,
56 nonce: '',
57 gasPrice: '5',
58 chainId: '',
59 gasLimit: '600000',
60 txn: Maybe.Nothing(),
61 stx: Maybe.Nothing(),
62 suggestions: suggestions,
63 }
65 this.handlePointInput = this.handlePointInput.bind(this)
66 this.handleAddressInput = this.handleAddressInput.bind(this)
67 this.handleConfirmAvailability = this.handleConfirmAvailability.bind(this)
68 // Transaction
69 this.handleCreateUnsignedTxn = this.handleCreateUnsignedTxn.bind(this)
70 this.handleSubmit = this.handleSubmit.bind(this)
71 this.handleSetUserApproval = this.handleSetUserApproval.bind(this)
72 this.handleSetTxn = this.handleSetTxn.bind(this)
73 this.handleSetStx = this.handleSetStx.bind(this)
74 this.handleSetNonce = this.handleSetNonce.bind(this)
75 this.handleSetChainId = this.handleSetChainId.bind(this)
76 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)
77 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)
78 }
80 componentDidMount() {
81 const { props } = this
83 const addr = props.wallet.matchWith({
84 Just: wal => addressFromSecp256k1Public(wal.value.publicKey),
85 Nothing: () => {
86 throw BRIDGE_ERROR.MISSING_WALLET
87 }
88 })
90 props.web3.matchWith({
91 Nothing: () => {},
92 Just: (w3) => {
93 const validWeb3 = w3.value
95 const getTxMetadata = [
96 validWeb3.eth.getTransactionCount(addr),
97 validWeb3.eth.net.getId(),
98 validWeb3.eth.getGasPrice()
99 ];
101 Promise.all(getTxMetadata).then(r => {
102 const txMetadata = {
103 nonce: r[0],
104 chainId: r[1],
105 gasPrice: fromWei(r[2], 'gwei'),
106 };
108 this.setState({...txMetadata})
110 })
111 }
112 });
114 }
118 handleAddressInput = (receivingAddress) => {
119 this.setState({ receivingAddress })
120 this.handleClearTxn()
121 }
125 handlePointInput(desiredPoint) {
126 if (desiredPoint.length < 15) {
127 this.setState({
128 desiredPoint,
129 isAvailable: Maybe.Nothing()
130 })
131 this.handleClearTxn()
132 }
133 }
137 handleConfirmAvailability() {
138 this.confirmPointAvailability().then(r => {
139 this.setState({
140 isAvailable: r,
141 })
142 })
144 }
148 handleCreateUnsignedTxn() {
149 const txn = this.createUnsignedTxn()
150 this.setState({ txn })
151 }
154 handleSetUserApproval(){
155 const {state} = this
156 this.setState({ userApproval: !state.userApproval })
157 }
161 handleSetTxn(txn){
162 this.setState({ txn })
163 }
167 handleSetStx(stx){
168 this.setState({
169 stx,
170 userApproval: false,
171 })
172 }
176 handleSetNonce(nonce){
177 this.setState({ nonce })
178 this.handleClearStx()
179 }
183 handleSetChainId(chainId){
184 this.setState({ chainId })
185 this.handleClearStx()
186 }
190 handleSetGasPrice(gasPrice){
191 this.setState({ gasPrice })
192 this.handleClearStx()
193 }
197 handleSetGasLimit(gasLimit){
198 this.setState({ gasLimit })
199 this.handleClearStx()
200 }
204 handleClearStx() {
205 this.setState({
206 userApproval: false,
207 stx: Maybe.Nothing(),
208 })
209 }
213 handleClearTxn() {
214 this.setState({
215 userApproval: false,
216 txn: Maybe.Nothing(),
217 stx: Maybe.Nothing(),
218 })
219 }
223 handleClearTransaction() {
224 this.setState({
225 userApproval: false,
226 txn: Maybe.Nothing(),
227 stx: Maybe.Nothing(),
228 })
229 }
233 handleSubmit(){
234 const { props, state } = this
235 sendSignedTransaction(props.web3.value, state.stx)
236 .then(sent => {
237 props.setTxnCursor(sent)
238 props.popRoute()
239 props.pushRoute(ROUTE_NAMES.SENT_TRANSACTION)
240 })
241 .catch(err => {
242 // Note that value.value is due to wrapped Maybe.Just + Result.Error
243 this.setState({ txError: Maybe.Just(err.value.value) })
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
348 const validAddress = isValidAddress(state.receivingAddress)
349 const validPoint = canDecodePatp(state.desiredPoint)
351 const canGenerate = props.web3.matchWith({
352 Nothing: () => {
353 return validAddress === true &&
354 validPoint === true
355 },
356 Just: () => {
357 return validAddress === true &&
358 validPoint === true &&
359 state.isAvailable.value === true
360 }
361 })
364 const canSign = !Maybe.Nothing.hasInstance(state.txn)
365 const canApprove = !Maybe.Nothing.hasInstance(state.stx)
366 const canSend = !Maybe.Nothing.hasInstance(state.stx) && state.userApproval === true
368 return (
369 <Row>
370 <Col>
371 <H1>
372 { 'Issue a Child From ' } <code>{ `${ob.patp(state.issuingPoint)}` }</code>
373 </H1>
376 <P>
377 {
378 `Please enter the point you would like to issue, and specify the
379 receiving Ethereum address. If you need to create an address, you
380 can also use Wallet Generator.`
381 }
382 </P>
384 <P>
385 {
386 `Your point can only issue children with particular names. Some
387 valid suggestions for `
388 }
389 {
390 <code>
391 { ob.patp(state.issuingPoint) }
392 </code>
393 }
394 {
395 ' are '
396 }
397 <code>
398 { state.suggestions[0] }
399 </code>
400 { ', ' }
401 <code>
402 { state.suggestions[1] }
403 </code>
404 { ', and ' }
405 <code>
406 { state.suggestions[2] }
407 </code>
408 { '.' }
409 </P>
411 <Form>
412 <PointInput
413 prop-size='lg'
414 prop-format='innerLabel'
415 className={'mono mt-8'}
416 placeholder={ `e.g. ${state.suggestions[3]}` }
417 value={ state.desiredPoint }
418 onChange={ this.handlePointInput }>
419 <InnerLabel>{ 'Point to Issue' }</InnerLabel>
420 <ValidatedSigil
421 className={'tr-0 mt-05 mr-0 abs'}
422 patp={state.desiredPoint}
423 size={76}
424 margin={8}
425 validator={() => this.validatePoint(state.desiredPoint)} />
426 </PointInput>
428 <AddressInput
429 className='text-mono mt-8'
430 prop-size='lg'
431 prop-format='innerLabel'
432 placeholder={ `e.g. 0x84295d5e054d8cff5a22428b195f5a1615bd644f` }
433 value={ state.receivingAddress }
434 disabled={ !state.available }
435 onChange={ v => this.handleAddressInput(v) }>
436 <InnerLabel>{ 'Receiving Address' }</InnerLabel>
437 <ShowBlockie className={'mt-1'} address={state.receivingAddress} />
438 </AddressInput>
440 <Anchor
441 className={'mt-1'}
442 prop-size={'sm'}
443 prop-disabled={!isValidAddress(state.receivingAddress)}
444 target={'_blank'}
445 href={`https://etherscan.io/address/${state.receivingAddress}`}>
446 {'View on Etherscan ↗'}
447 </Anchor>
449 {
450 props.web3.matchWith({
451 Nothing: _ => <div />,
452 Just: _ =>
453 <Button
454 prop-size='lg wide'
455 prop-color={this.buttonTriState()}
456 className={'mt-8'}
457 disabled={!validPoint}
458 onClick={this.handleConfirmAvailability}>
459 {this.buttonTriStateText()}
460 </Button>
461 })
462 }
464 <StatelessTransaction
465 // Upper scope
466 web3={props.web3}
467 contracts={props.contracts}
468 wallet={props.wallet}
469 walletType={props.walletType}
470 walletHdPath={props.walletHdPath}
471 // Tx
472 txn={state.txn}
473 stx={state.stx}
474 // Tx details
475 nonce={state.nonce}
476 gasPrice={state.gasPrice}
477 chainId={state.chainId}
478 gasLimit={state.gasLimit}
479 // Checks
480 userApproval={state.userApproval}
481 canGenerate={ canGenerate }
482 canSign={ canSign }
483 canApprove={ canApprove }
484 canSend={ canSend }
485 // Methods
486 createUnsignedTxn={this.handleCreateUnsignedTxn}
487 setUserApproval={this.handleSetUserApproval}
488 setTxn={this.handleSetTxn}
489 setStx={this.handleSetStx}
490 setNonce={this.handleSetNonce}
491 setChainId={this.handleSetChainId}
492 setGasPrice={this.handleSetGasPrice}
493 setGasLimit={this.handleSetGasLimit}
494 handleSubmit={this.handleSubmit} />
496 </Form>
498 {
499 Maybe.Nothing.hasInstance(state.txError)
500 ? ''
501 : <Warning className={'mt-8'}>
502 <H3 style={{marginTop: 0, paddingTop: 0}}>
503 {
504 'There was an error sending your transaction.'
505 }
506 </H3>
507 { state.txError.value }
508 </Warning>
509 }
510 </Col>
511 </Row>
512 )
513 }
516export default IssueChild