git.iko.soy/bridge
on fd7a195 help sign in
bridge/src/views/SentTransaction.js
182 lines 4.3 kB history raw
1import Maybe from 'folktale/maybe';
2import React from 'react';
3import * as need from '../lib/need';
4import { Row, Col, H1, H3, P, Warning, Anchor } from '../components/old/Base';
5import { Button } from '../components/old/Base';
7import { ROUTE_NAMES } from '../lib/routeNames';
8import { useHistory } from '../store/history';
9import { BRIDGE_ERROR, renderTxnError } from '../lib/error';
10import { NETWORK_TYPES } from '../lib/network';
11import { useTxnConfirmations } from '../store/txnConfirmations';
12import { useNetwork } from '../store/network';
13import { useTxnCursor } from '../store/txnCursor';
15class Success extends React.Component {
16 constructor(props) {
17 super(props);
19 this.state = {
20 pending: '.',
21 interval: null,
22 };
23 }
25 componentDidMount() {
26 const nextDot = { '.': '..', '..': '...', '...': '.' };
28 const interval = setInterval(() => {
29 this.setState(({ pending }) => ({ pending: nextDot[pending] }));
30 }, 1000);
31 this.setState({ interval: interval });
32 }
34 componentWillUnmount() {
35 clearInterval(this.state.interval);
36 }
38 render() {
39 const { props, state } = this;
40 const { networkType, hash, txnConfirmations } = props;
41 const { pending } = state;
43 const esvisible =
44 networkType === NETWORK_TYPES.ROPSTEN ||
45 networkType === NETWORK_TYPES.MAINNET;
47 const esdomain =
48 networkType === NETWORK_TYPES.ROPSTEN
49 ? 'ropsten.etherscan.io'
50 : 'etherscan.io';
52 const esmessage =
53 esvisible === true
54 ? 'If you’d like to keep track of it, click the Etherscan link below.'
55 : '';
57 const esanchor =
58 esvisible === false ? null : (
59 <Anchor
60 className={'mb-4 mt-1'}
61 prop-size={'sm'}
62 target={'_blank'}
63 href={`https://${esdomain}/tx/${hash}`}>
64 {'View on Etherscan ↗'}
65 </Anchor>
66 );
68 const confirmations = Maybe.fromNullable(txnConfirmations[hash]).getOrElse(
69 0
70 );
72 const requiredConfirmations = 1;
74 const status =
75 confirmations < requiredConfirmations
76 ? `Pending${pending}`
77 : `Confirmed! (x${confirmations} confirmations)!`;
79 return (
80 <Row>
81 <Col>
82 <H1>{'Your Transaction was Sent'}</H1>
84 <P>
85 {`We sent your transaction to the chain. It can take some time to
86 execute, especially if the network is busy. ${esmessage}`}
87 </P>
89 <H3>{'Transaction Hash'}</H3>
90 <P>{hash}</P>
92 <H3>{'Transaction Status'}</H3>
93 <P>{status}</P>
94 <P>{esanchor}</P>
95 </Col>
96 </Row>
97 );
98 }
101const Failure = props => (
102 <Row>
103 <Col>
104 <H1>{'Error!'}</H1>
106 <Warning>
107 <H3>{'There was an error sending your transaction.'}</H3>
108 {renderTxnError(props.web3, props.message)}
109 </Warning>
110 </Col>
111 </Row>
112);
114function SentTransaction(props) {
115 const history = useHistory();
116 const { txnConfirmations } = useTxnConfirmations();
117 const { web3, networkType } = useNetwork();
118 const { txnCursor } = useTxnCursor();
120 const promptKeyfile = history.data && history.data.promptKeyfile;
122 // TODO: remove need's assumption about accepting the props object
123 const w3 = need.web3({ web3 });
125 const result = txnCursor.matchWith({
126 Nothing: _ => {
127 throw BRIDGE_ERROR.MISSING_TXN;
128 },
129 Just: res => res.value,
130 });
132 const body = result.matchWith({
133 Error: message => <Failure web3={w3} message={message.value} />,
134 Ok: hash => (
135 <Success
136 hash={hash.value}
137 networkType={networkType}
138 txnConfirmations={txnConfirmations}
139 />
140 ),
141 });
143 const ok = (
144 <Row>
145 <Col>
146 <Button
147 prop-type={'link'}
148 onClick={() => {
149 history.pop();
150 }}>
151 {'Ok →'}
152 </Button>
153 </Col>
154 </Row>
155 );
157 let keyfile;
159 if (promptKeyfile) {
160 keyfile = (
161 <Row>
162 <Col>
163 <Button
164 prop-type={'link'}
165 onClick={() => history.popAndPush(ROUTE_NAMES.GEN_KEYFILE)}>
166 {'Download Keyfile →'}
167 </Button>
168 </Col>
169 </Row>
170 );
171 }
173 return (
174 <div>
175 {body}
176 {ok}
177 {keyfile}
178 </div>
179 );
182export default SentTransaction;