git.iko.soy/bridge
on bf5080e help sign in
bridge/src/views/IssueChild.js
519 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 chainId: '',
55 gasLimit: '600000',
56 txn: Nothing(),
57 stx: Nothing(),
58 suggestions: suggestions,
59 }
61 this.handlePointInput = this.handlePointInput.bind(this)
62 this.handleAddressInput = this.handleAddressInput.bind(this)
63 this.handleConfirmAvailability = this.handleConfirmAvailability.bind(this)
64 this.handleCreateUnsignedTxn = this.handleCreateUnsignedTxn.bind(this)
65 this.handleSubmit = this.handleSubmit.bind(this)
66 this.handleSetUserApproval = this.handleSetUserApproval.bind(this)
67 this.handleSetTxn = this.handleSetTxn.bind(this)
68 this.handleSetStx = this.handleSetStx.bind(this)
69 this.handleSetNonce = this.handleSetNonce.bind(this)
70 this.handleSetChainId = this.handleSetChainId.bind(this)
71 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)
72 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)
73 }
75 componentDidMount() {
76 const { props } = this
78 const addr = props.wallet.matchWith({
79 Just: wal => addressFromSecp256k1Public(wal.value.publicKey),
80 Nothing: () => {
81 throw BRIDGE_ERROR.MISSING_WALLET
82 }
83 })
85 props.web3.matchWith({
86 Nothing: () => {},
87 Just: (w3) => {
88 const validWeb3 = w3.value
90 const getTxMetadata = [
91 validWeb3.eth.getTransactionCount(addr),
92 validWeb3.eth.net.getId(),
93 validWeb3.eth.getGasPrice()
94 ]
96 Promise.all(getTxMetadata).then(r => {
97 const txMetadata = {
98 nonce: r[0],
99 chainId: r[1],
100 gasPrice: fromWei(r[2], 'gwei'),
101 }
103 this.setState({...txMetadata})
105 })
106 }
107 })
109 }
113 handleAddressInput = (receivingAddress) => {
114 this.setState({ receivingAddress })
115 this.handleClearTxn()
116 }
120 handlePointInput(desiredPoint) {
121 if (desiredPoint.length < 15) {
122 this.setState({
123 desiredPoint,
124 isAvailable: Nothing()
125 })
126 this.handleClearTxn()
127 }
128 }
132 handleConfirmAvailability() {
133 this.confirmPointAvailability().then(r => {
134 this.setState({
135 isAvailable: r,
136 })
137 })
139 }
143 handleCreateUnsignedTxn() {
144 const txn = this.createUnsignedTxn()
145 this.setState({ txn })
146 }
149 handleSetUserApproval(){
150 const {state} = this
151 this.setState({ userApproval: !state.userApproval })
152 }
156 handleSetTxn(txn){
157 this.setState({ txn })
158 }
162 handleSetStx(stx){
163 this.setState({
164 stx,
165 userApproval: false,
166 })
167 }
171 handleSetNonce(nonce){
172 this.setState({ nonce })
173 this.handleClearStx()
174 }
178 handleSetChainId(chainId){
179 this.setState({ chainId })
180 this.handleClearStx()
181 }
185 handleSetGasPrice(gasPrice){
186 this.setState({ gasPrice })
187 this.handleClearStx()
188 }
192 handleSetGasLimit(gasLimit){
193 this.setState({ gasLimit })
194 this.handleClearStx()
195 }
199 handleClearStx() {
200 this.setState({
201 userApproval: false,
202 stx: Nothing(),
203 })
204 }
208 handleClearTxn() {
209 this.setState({
210 userApproval: false,
211 txn: Nothing(),
212 stx: Nothing(),
213 })
214 }
218 handleClearTransaction() {
219 this.setState({
220 userApproval: false,
221 txn: Nothing(),
222 stx: Nothing(),
223 })
224 }
228 handleSubmit(){
229 const { props, state } = this
230 sendSignedTransaction(props.web3.value, state.stx)
231 .then(sent => {
232 props.setTxnHashCursor(sent)
233 props.popRoute()
234 props.pushRoute(ROUTE_NAMES.SENT_TRANSACTION)
235 })
236 .catch(err => {
237 this.setState({ txError: err.map(val => val.merge()) })
238 })
239 }
241 async confirmPointAvailability() {
242 const { contracts } = this.props
243 const { desiredPoint } = this.state
245 const validContracts = contracts.matchWith({
246 Just: cs => cs.value,
247 Nothing: _ => {
248 throw BRIDGE_ERROR.MISSING_CONTRACTS
249 }
250 })
252 if (canDecodePatp(desiredPoint) === false) {
253 return Just(false)
254 }
256 const point = ob.patp2dec(desiredPoint)
257 const pointSize = azimuth.getPointSize(point)
259 const prefix = azimuth.getPrefix(point)
260 const prefixSize = azimuth.getPointSize(prefix)
262 // NB (jtobin): this prevents galaxies from attempting to spawn planets
263 //
264 if (pointSize !== prefixSize + 1) {
265 return Just(false)
266 }
268 const owner = await azimuth.getOwner(validContracts, point)
270 if (eqAddr(owner, ETH_ZERO_ADDR)) {
271 return Just(true)
272 }
274 return Just(false)
275 }
277 createUnsignedTxn() {
278 const { state, props } = this
280 if (isValidAddress(state.receivingAddress) === false) return Nothing()
281 if (state.isAvailable === false) return Nothing()
282 if (canDecodePatp(state.desiredPoint) === false) return Nothing()
284 const validContracts = props.contracts.matchWith({
285 Just: (cs) => cs.value,
286 Nothing: () => {
287 throw BRIDGE_ERROR.MISSING_CONTRACTS
288 }
289 })
291 const pointDec = ob.patp2dec(state.desiredPoint)
293 const txn = ecliptic.spawn(
294 validContracts,
295 pointDec,
296 state.receivingAddress
297 )
299 return Just(txn)
300 }
304 buttonTriState() {
305 const a = this.state.isAvailable
306 if (Nothing.hasInstance(a)) return 'blue'
307 if (a.value === false) return 'yellow'
308 if (a.value === true) return 'green'
309 }
313 buttonTriStateText() {
314 const a = this.state.isAvailable
315 if (Nothing.hasInstance(a)) return 'Confirm Availablility'
316 if (a.value === false) return 'Point is Not Available'
317 if (a.value === true) return 'Available'
318 }
320 validatePoint = patp => {
321 const point = this.point
323 let vpatp = false
324 try {
325 vpatp = ob.isValidPatp(patp)
326 } catch(_) {
327 }
329 let vchild = false
330 try {
331 vchild = ob.sein(patp) === ob.patp(point)
332 } catch(_) {
333 }
335 return vpatp && vchild
336 }
339 render() {
340 const { props, state } = this
342 const validAddress = isValidAddress(state.receivingAddress)
343 const validPoint = canDecodePatp(state.desiredPoint)
345 const canGenerate = props.web3.matchWith({
346 Nothing: () => {
347 return validAddress === true &&
348 validPoint === true
349 },
350 Just: () => {
351 return validAddress === true &&
352 validPoint === true &&
353 state.isAvailable.value === true
354 }
355 })
357 const canSign = Just.hasInstance(state.txn)
358 const canApprove = Just.hasInstance(state.stx)
359 const canSend =
360 Just.hasInstance(state.stx)
361 && state.userApproval === true
363 const esvisible =
364 props.networkType === NETWORK_NAMES.ROPSTEN ||
365 props.networkType === NETWORK_NAMES.MAINNET
367 const esdomain =
368 props.networkType === NETWORK_NAMES.ROPSTEN
369 ? "ropsten.etherscan.io"
370 : "etherscan.io"
372 return (
373 <Row>
374 <Col>
375 <H1>
376 { 'Issue a Child From ' } <code>{ `${ob.patp(state.issuingPoint)}` }</code>
377 </H1>
380 <P>
381 {
382 `Please enter the point you would like to issue, and specify the
383 receiving Ethereum address. If you need to create an address, you
384 can also use Wallet Generator.`
385 }
386 </P>
388 <P>
389 {
390 `Your point can only issue children with particular names. Some
391 valid suggestions for `
392 }
393 {
394 <code>
395 { ob.patp(state.issuingPoint) }
396 </code>
397 }
398 {
399 ' are '
400 }
401 <code>
402 { state.suggestions[0] }
403 </code>
404 { ', ' }
405 <code>
406 { state.suggestions[1] }
407 </code>
408 { ', and ' }
409 <code>
410 { state.suggestions[2] }
411 </code>
412 { '.' }
413 </P>
415 <PointInput
416 prop-size='lg'
417 prop-format='innerLabel'
418 className={'mono mt-8'}
419 placeholder={ `e.g. ${state.suggestions[3]}` }
420 value={ state.desiredPoint }
421 onChange={ this.handlePointInput }>
422 <InnerLabel>{ 'Point to Issue' }</InnerLabel>
423 <ValidatedSigil
424 className={'tr-0 mt-05 mr-0 abs'}
425 patp={state.desiredPoint}
426 size={76}
427 margin={8}
428 validator={() => this.validatePoint(state.desiredPoint)} />
429 </PointInput>
431 <AddressInput
432 className='text-mono mt-8'
433 prop-size='lg'
434 prop-format='innerLabel'
435 placeholder={ `e.g. 0x84295d5e054d8cff5a22428b195f5a1615bd644f` }
436 value={ state.receivingAddress }
437 disabled={ !state.available }
438 onChange={ v => this.handleAddressInput(v) }>
439 <InnerLabel>{ 'Receiving Address' }</InnerLabel>
440 <ShowBlockie className={'mt-1'} address={state.receivingAddress} />
441 </AddressInput>
443 <Anchor
444 className={'mt-1'}
445 prop-size={'sm'}
446 prop-disabled={!isValidAddress(state.receivingAddress) || !esvisible}
447 target={'_blank'}
448 href={`https://${esdomain}/address/${state.receivingAddress}`}>
449 {'View on Etherscan ↗'}
450 </Anchor>
452 {
453 props.web3.matchWith({
454 Nothing: _ => <div />,
455 Just: _ =>
456 <Button
457 prop-size='lg wide'
458 prop-color={this.buttonTriState()}
459 className={'mt-8'}
460 disabled={!validPoint}
461 onClick={this.handleConfirmAvailability}>
462 {this.buttonTriStateText()}
463 </Button>
464 })
465 }
467 <StatelessTransaction
468 // Upper scope
469 web3={props.web3}
470 contracts={props.contracts}
471 wallet={props.wallet}
472 walletType={props.walletType}
473 walletHdPath={props.walletHdPath}
474 networkType={props.networkType}
475 // Tx
476 txn={state.txn}
477 stx={state.stx}
478 // Tx details
479 nonce={state.nonce}
480 gasPrice={state.gasPrice}
481 chainId={state.chainId}
482 gasLimit={state.gasLimit}
483 // Checks
484 userApproval={state.userApproval}
485 canGenerate={ canGenerate }
486 canSign={ canSign }
487 canApprove={ canApprove }
488 canSend={ canSend }
489 // Methods
490 createUnsignedTxn={this.handleCreateUnsignedTxn}
491 setUserApproval={this.handleSetUserApproval}
492 setTxn={this.handleSetTxn}
493 setStx={this.handleSetStx}
494 setNonce={this.handleSetNonce}
495 setChainId={this.handleSetChainId}
496 setGasPrice={this.handleSetGasPrice}
497 setGasLimit={this.handleSetGasLimit}
498 handleSubmit={this.handleSubmit} />
500 {
501 Nothing.hasInstance(state.txError)
502 ? ''
503 : <Warning className={'mt-8'}>
504 <H3 style={{marginTop: 0, paddingTop: 0}}>
505 {
506 'There was an error sending your transaction.'
507 }
508 </H3>
509 { state.txError.value }
510 </Warning>
511 }
513 </Col>
514 </Row>
515 )
516 }
519export default IssueChild