git.iko.soy/bridge
on d593175 help sign in
bridge/src/views/SentTransaction.js
149 lines 3.2 kB history raw
1import React from 'react'
2import { Row, Col, H1, H3, P, Warning, Anchor } from '../components/Base'
3import { Button } from '../components/Base'
5import { ROUTE_NAMES } from '../lib/router'
6import { 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, txnHashCursor, networkType, popRoute, pushRoute } = props
80 const { setPointCursor, pointCursor } = props
82 const promptKeyfile = props.routeData && props.routeData.promptKeyfile
84 const w3 = web3.matchWith({
85 Nothing: _ => { throw BRIDGE_ERROR.MISSING_WEB3 },
86 Just: res => res.value
87 })
89 const result = txnHashCursor.matchWith({
90 Nothing: _ => { throw BRIDGE_ERROR.MISSING_TXN },
91 Just: res => res.value
92 })
94 const body = result.matchWith({
95 Error: message => <Failure web3={ w3 } message={ message.value } />,
96 Ok: hash =>
97 <Success
98 hash={ hash.value }
99 networkType={ networkType }
100 />
101 })
103 const ok =
104 <Row>
105 <Col>
106 <Button
107 prop-type={'link'}
108 onClick={
109 () => {
110 setPointCursor(pointCursor)
111 popRoute()
112 }
113 }>
114 { 'Ok →' }
115 </Button>
116 </Col>
117 </Row>
119 let keyfile;
121 if (promptKeyfile) {
122 keyfile = (
123 <Row>
124 <Col>
125 <Button
126 prop-type={'link'}
127 onClick={
128 () => {
129 popRoute()
130 pushRoute(ROUTE_NAMES.GEN_KEYFILE)
131 }
132 }>
133 { 'Download Keyfile →' }
134 </Button>
135 </Col>
136 </Row>
137 )
138 }
140 return (
141 <div>
142 { body }
143 { ok }
144 { keyfile }
145 </div>
146 )
149export default SentTransaction