git.iko.soy/bridge
on e6a3026 help sign in
bridge/src/views/SentTransaction.js
125 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'
7import { NETWORK_NAMES } from '../lib/network'
9const Success = (props) => {
11 const esvisible =
12 props.networkType === NETWORK_NAMES.ROPSTEN ||
13 props.networkType === NETWORK_NAMES.MAINNET
15 const esdomain =
16 props.networkType === NETWORK_NAMES.ROPSTEN
17 ? "ropsten.etherscan.io"
18 : "etherscan.io"
20 const esmessage =
21 esvisible === true
22 ? "If you’d like to keep track of it, click the Etherscan link below."
23 : ''
25 const esanchor =
26 esvisible === false
27 ? <div />
28 : <Anchor
29 className={'mb-4 mt-1'}
30 prop-size={'sm'}
31 target={'_blank'}
32 href={`https://${esdomain}/tx/${props.hash}`}>
33 {'View on Etherscan ↗'}
34 </Anchor>
36 return (
37 <Row>
38 <Col>
39 <H1>{ 'Your Transaction was Sent' }</H1>
41 <P>
42 {
43 `We sent your transaction to the chain. It can take some time to
44 execute, especially if the network is busy. ${esmessage}`
45 }
46 </P>
48 <H3>{ 'Transaction Hash' }</H3>
49 <P>
50 { props.hash }
51 </P>
53 { esanchor }
55 </Col>
56 </Row>
57 )
60const Failure = (props) =>
62 <Row>
63 <Col>
64 <H1>{ 'Error!' }</H1>
67 <Warning>
68 <H3>
69 {
70 'There was an error sending your transaction.'
71 }
72 </H3>
73 { renderTxnError(props.web3, props.message) }
74 </Warning>
75 </Col>
76 </Row>
78const SentTransaction = (props) => {
79 const { web3, txnCursor, networkType, popRoute } = props
80 const { setPointCursor, pointCursor } = props
82 const w3 = web3.matchWith({
83 Nothing: _ => { throw BRIDGE_ERROR.MISSING_WEB3 },
84 Just: res => res.value
85 })
87 const result = txnCursor.matchWith({
88 Nothing: _ => { throw BRIDGE_ERROR.MISSING_TXN },
89 Just: res => res.value
90 })
92 const body = result.matchWith({
93 Error: message => <Failure web3={ w3 } message={ message.value } />,
94 Ok: txn =>
95 <Success
96 hash={ txn.value.transactionHash }
97 networkType={ networkType }
98 />
99 })
101 const ok =
102 <Row>
103 <Col>
104 <Button
105 prop-type={'link'}
106 onClick={
107 () => {
108 setPointCursor(pointCursor)
109 popRoute()
110 }
111 }>
112 { 'Ok →' }
113 </Button>
114 </Col>
115 </Row>
117 return (
118 <div>
119 { body }
120 { ok }
121 </div>
122 )
125export default SentTransaction