git.iko.soy/bridge
on adf9104 help sign in
bridge/src/views/SentTransaction.js
124 lines 2.7 kB history raw
1import React from 'react'
2import { Row, Col, H1, H3, P, Warning, Anchor } from '../components/Base'
3import { Button } from '../components/Base'
5import { BRIDGE_ERROR, renderTxnError } from '../lib/error'
6import { NETWORK_NAMES } from '../lib/network'
8const Success = (props) => {
10 const esvisible =
11 props.networkType === NETWORK_NAMES.ROPSTEN ||
12 props.networkType === NETWORK_NAMES.MAINNET
14 const esdomain =
15 props.networkType === NETWORK_NAMES.ROPSTEN
16 ? "ropsten.etherscan.io"
17 : "etherscan.io"
19 const esmessage =
20 esvisible === true
21 ? "If you’d like to keep track of it, click the Etherscan link below."
22 : ''
24 const esanchor =
25 esvisible === false
26 ? <div />
27 : <Anchor
28 className={'mb-4 mt-1'}
29 prop-size={'sm'}
30 target={'_blank'}
31 href={`https://${esdomain}/tx/${props.hash}`}>
32 {'View on Etherscan ↗'}
33 </Anchor>
35 return (
36 <Row>
37 <Col>
38 <H1>{ 'Your Transaction was Sent' }</H1>
40 <P>
41 {
42 `We sent your transaction to the chain. It can take some time to
43 execute, especially if the network is busy. ${esmessage}`
44 }
45 </P>
47 <H3>{ 'Transaction Hash' }</H3>
48 <P>
49 { props.hash }
50 </P>
52 { esanchor }
54 </Col>
55 </Row>
56 )
59const Failure = (props) =>
61 <Row>
62 <Col>
63 <H1>{ 'Error!' }</H1>
66 <Warning>
67 <H3>
68 {
69 'There was an error sending your transaction.'
70 }
71 </H3>
72 { renderTxnError(props.web3, props.message) }
73 </Warning>
74 </Col>
75 </Row>
77const SentTransaction = (props) => {
78 const { web3, txnHashCursor, networkType, popRoute } = props
79 const { setPointCursor, pointCursor } = props
81 const w3 = web3.matchWith({
82 Nothing: _ => { throw BRIDGE_ERROR.MISSING_WEB3 },
83 Just: res => res.value
84 })
86 const result = txnHashCursor.matchWith({
87 Nothing: _ => { throw BRIDGE_ERROR.MISSING_TXN },
88 Just: res => res.value
89 })
91 const body = result.matchWith({
92 Error: message => <Failure web3={ w3 } message={ message.value } />,
93 Ok: hash =>
94 <Success
95 hash={ hash.value }
96 networkType={ networkType }
97 />
98 })
100 const ok =
101 <Row>
102 <Col>
103 <Button
104 prop-type={'link'}
105 onClick={
106 () => {
107 setPointCursor(pointCursor)
108 popRoute()
109 }
110 }>
111 { 'Ok →' }
112 </Button>
113 </Col>
114 </Row>
116 return (
117 <div>
118 { body }
119 { ok }
120 </div>
121 )
124export default SentTransaction