git.iko.soy/bridge
on d67c869 help sign in
bridge/src/views/SentTransaction.js
172 lines 4.1 kB history raw
1import React from 'react';
2import * as need from '../lib/need';
3import { H1, H3, P, Warning, Anchor } from '../components/old/Base';
4import { Button } from '../components/old/Base';
6import { ROUTE_NAMES } from '../lib/routeNames';
7import { useHistory } from '../store/history';
8import { BRIDGE_ERROR, renderTxnError } from '../lib/error';
9import { NETWORK_TYPES } from '../lib/network';
10import { useNetwork } from '../store/network';
11import { useTxnCursor } from '../store/txnCursor';
12import View from 'components/View';
13import { Grid } from 'indigo-react';
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 } = 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 = 1;
70 const requiredConfirmations = 1;
72 const status =
73 confirmations < requiredConfirmations
74 ? `Pending${pending}`
75 : `Confirmed! (x${confirmations} confirmations)!`;
77 return (
78 <Grid>
79 <Grid.Item full>
80 <H1>{'Your Transaction was Sent'}</H1>
82 <P>
83 {`We sent your transaction to the chain. It can take some time to
84 execute, especially if the network is busy. ${esmessage}`}
85 </P>
87 <H3>{'Transaction Hash'}</H3>
88 <P>{hash}</P>
90 <H3>{'Transaction Status'}</H3>
91 <P>{status}</P>
92 <P>{esanchor}</P>
93 </Grid.Item>
94 </Grid>
95 );
96 }
99const Failure = props => (
100 <Grid>
101 <Grid.Item full>
102 <H1>{'Error!'}</H1>
104 <Warning>
105 <H3>{'There was an error sending your transaction.'}</H3>
106 {renderTxnError(props.web3, props.message)}
107 </Warning>
108 </Grid.Item>
109 </Grid>
110);
112function SentTransaction(props) {
113 const history = useHistory();
114 const { web3, networkType } = useNetwork();
115 const { txnCursor } = useTxnCursor();
117 const promptKeyfile = history.data && history.data.promptKeyfile;
119 const w3 = need.web3(web3);
121 const result = txnCursor.matchWith({
122 Nothing: _ => {
123 throw new Error(BRIDGE_ERROR.MISSING_TXN);
124 },
125 Just: res => res.value,
126 });
128 const body = result.matchWith({
129 Error: message => <Failure web3={w3} message={message.value} />,
130 Ok: hash => <Success hash={hash.value} networkType={networkType} />,
131 });
133 const ok = (
134 <Grid>
135 <Grid.Item full>
136 <Button
137 prop-type={'link'}
138 onClick={() => {
139 history.pop();
140 }}>
141 {'Ok →'}
142 </Button>
143 </Grid.Item>
144 </Grid>
145 );
147 let keyfile;
149 if (promptKeyfile) {
150 keyfile = (
151 <Grid>
152 <Grid.Item full>
153 <Button
154 prop-type={'link'}
155 onClick={() => history.popAndPush(ROUTE_NAMES.GEN_KEYFILE)}>
156 {'Download Keyfile →'}
157 </Button>
158 </Grid.Item>
159 </Grid>
160 );
161 }
163 return (
164 <View>
165 {body}
166 {ok}
167 {keyfile}
168 </View>
169 );
172export default SentTransaction;