git.iko.soy/bridge
on 2144ac9 help sign in
bridge/src/views/SentTransaction.js
183 lines 4.4 kB history raw
1import Maybe from 'folktale/maybe';
2import React from 'react';
3import * as need from '../lib/need';
4import { 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';
14import View from 'components/View';
15import { Grid } from 'indigo-react';
17class Success extends React.Component {
18 constructor(props) {
19 super(props);
21 this.state = {
22 pending: '.',
23 interval: null,
24 };
25 }
27 componentDidMount() {
28 const nextDot = { '.': '..', '..': '...', '...': '.' };
30 const interval = setInterval(() => {
31 this.setState(({ pending }) => ({ pending: nextDot[pending] }));
32 }, 1000);
33 this.setState({ interval: interval });
34 }
36 componentWillUnmount() {
37 clearInterval(this.state.interval);
38 }
40 render() {
41 const { props, state } = this;
42 const { networkType, hash, txnConfirmations } = props;
43 const { pending } = state;
45 const esvisible =
46 networkType === NETWORK_TYPES.ROPSTEN ||
47 networkType === NETWORK_TYPES.MAINNET;
49 const esdomain =
50 networkType === NETWORK_TYPES.ROPSTEN
51 ? 'ropsten.etherscan.io'
52 : 'etherscan.io';
54 const esmessage =
55 esvisible === true
56 ? 'If you’d like to keep track of it, click the Etherscan link below.'
57 : '';
59 const esanchor =
60 esvisible === false ? null : (
61 <Anchor
62 className={'mb-4 mt-1'}
63 prop-size={'sm'}
64 target={'_blank'}
65 href={`https://${esdomain}/tx/${hash}`}>
66 {'View on Etherscan ↗'}
67 </Anchor>
68 );
70 const confirmations = Maybe.fromNullable(txnConfirmations[hash]).getOrElse(
71 0
72 );
74 const requiredConfirmations = 1;
76 const status =
77 confirmations < requiredConfirmations
78 ? `Pending${pending}`
79 : `Confirmed! (x${confirmations} confirmations)!`;
81 return (
82 <Grid>
83 <Grid.Item full>
84 <H1>{'Your Transaction was Sent'}</H1>
86 <P>
87 {`We sent your transaction to the chain. It can take some time to
88 execute, especially if the network is busy. ${esmessage}`}
89 </P>
91 <H3>{'Transaction Hash'}</H3>
92 <P>{hash}</P>
94 <H3>{'Transaction Status'}</H3>
95 <P>{status}</P>
96 <P>{esanchor}</P>
97 </Grid.Item>
98 </Grid>
99 );
100 }
103const Failure = props => (
104 <Grid>
105 <Grid.Item full>
106 <H1>{'Error!'}</H1>
108 <Warning>
109 <H3>{'There was an error sending your transaction.'}</H3>
110 {renderTxnError(props.web3, props.message)}
111 </Warning>
112 </Grid.Item>
113 </Grid>
114);
116function SentTransaction(props) {
117 const history = useHistory();
118 const { txnConfirmations } = useTxnConfirmations();
119 const { web3, networkType } = useNetwork();
120 const { txnCursor } = useTxnCursor();
122 const promptKeyfile = history.data && history.data.promptKeyfile;
124 const w3 = need.web3(web3);
126 const result = txnCursor.matchWith({
127 Nothing: _ => {
128 throw BRIDGE_ERROR.MISSING_TXN;
129 },
130 Just: res => res.value,
131 });
133 const body = result.matchWith({
134 Error: message => <Failure web3={w3} message={message.value} />,
135 Ok: hash => (
136 <Success
137 hash={hash.value}
138 networkType={networkType}
139 txnConfirmations={txnConfirmations}
140 />
141 ),
142 });
144 const ok = (
145 <Grid>
146 <Grid.Item full>
147 <Button
148 prop-type={'link'}
149 onClick={() => {
150 history.pop();
151 }}>
152 {'Ok →'}
153 </Button>
154 </Grid.Item>
155 </Grid>
156 );
158 let keyfile;
160 if (promptKeyfile) {
161 keyfile = (
162 <Grid>
163 <Grid.Item full>
164 <Button
165 prop-type={'link'}
166 onClick={() => history.popAndPush(ROUTE_NAMES.GEN_KEYFILE)}>
167 {'Download Keyfile →'}
168 </Button>
169 </Grid.Item>
170 </Grid>
171 );
172 }
174 return (
175 <View>
176 {body}
177 {ok}
178 {keyfile}
179 </View>
180 );
183export default SentTransaction;