git.iko.soy/bridge
on b16048c help sign in
bridge/src/views/SentTransaction.js
173 lines 4.1 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 { useNetwork } from '../store/network';
12import { useTxnCursor } from '../store/txnCursor';
13import View from 'components/View';
14import { Grid } from 'indigo-react';
16class Success extends React.Component {
17 constructor(props) {
18 super(props);
20 this.state = {
21 pending: '.',
22 interval: null,
23 };
24 }
26 componentDidMount() {
27 const nextDot = { '.': '..', '..': '...', '...': '.' };
29 const interval = setInterval(() => {
30 this.setState(({ pending }) => ({ pending: nextDot[pending] }));
31 }, 1000);
32 this.setState({ interval: interval });
33 }
35 componentWillUnmount() {
36 clearInterval(this.state.interval);
37 }
39 render() {
40 const { props, state } = this;
41 const { networkType, hash } = props;
42 const { pending } = state;
44 const esvisible =
45 networkType === NETWORK_TYPES.ROPSTEN ||
46 networkType === NETWORK_TYPES.MAINNET;
48 const esdomain =
49 networkType === NETWORK_TYPES.ROPSTEN
50 ? 'ropsten.etherscan.io'
51 : 'etherscan.io';
53 const esmessage =
54 esvisible === true
55 ? 'If you’d like to keep track of it, click the Etherscan link below.'
56 : '';
58 const esanchor =
59 esvisible === false ? null : (
60 <Anchor
61 className={'mb-4 mt-1'}
62 prop-size={'sm'}
63 target={'_blank'}
64 href={`https://${esdomain}/tx/${hash}`}>
65 {'View on Etherscan ↗'}
66 </Anchor>
67 );
69 const confirmations = 1;
71 const requiredConfirmations = 1;
73 const status =
74 confirmations < requiredConfirmations
75 ? `Pending${pending}`
76 : `Confirmed! (x${confirmations} confirmations)!`;
78 return (
79 <Grid>
80 <Grid.Item full>
81 <H1>{'Your Transaction was Sent'}</H1>
83 <P>
84 {`We sent your transaction to the chain. It can take some time to
85 execute, especially if the network is busy. ${esmessage}`}
86 </P>
88 <H3>{'Transaction Hash'}</H3>
89 <P>{hash}</P>
91 <H3>{'Transaction Status'}</H3>
92 <P>{status}</P>
93 <P>{esanchor}</P>
94 </Grid.Item>
95 </Grid>
96 );
97 }
100const Failure = props => (
101 <Grid>
102 <Grid.Item full>
103 <H1>{'Error!'}</H1>
105 <Warning>
106 <H3>{'There was an error sending your transaction.'}</H3>
107 {renderTxnError(props.web3, props.message)}
108 </Warning>
109 </Grid.Item>
110 </Grid>
111);
113function SentTransaction(props) {
114 const history = useHistory();
115 const { web3, networkType } = useNetwork();
116 const { txnCursor } = useTxnCursor();
118 const promptKeyfile = history.data && history.data.promptKeyfile;
120 const w3 = need.web3(web3);
122 const result = txnCursor.matchWith({
123 Nothing: _ => {
124 throw new Error(BRIDGE_ERROR.MISSING_TXN);
125 },
126 Just: res => res.value,
127 });
129 const body = result.matchWith({
130 Error: message => <Failure web3={w3} message={message.value} />,
131 Ok: hash => <Success hash={hash.value} networkType={networkType} />,
132 });
134 const ok = (
135 <Grid>
136 <Grid.Item full>
137 <Button
138 prop-type={'link'}
139 onClick={() => {
140 history.pop();
141 }}>
142 {'Ok →'}
143 </Button>
144 </Grid.Item>
145 </Grid>
146 );
148 let keyfile;
150 if (promptKeyfile) {
151 keyfile = (
152 <Grid>
153 <Grid.Item full>
154 <Button
155 prop-type={'link'}
156 onClick={() => history.popAndPush(ROUTE_NAMES.GEN_KEYFILE)}>
157 {'Download Keyfile →'}
158 </Button>
159 </Grid.Item>
160 </Grid>
161 );
162 }
164 return (
165 <View>
166 {body}
167 {ok}
168 {keyfile}
169 </View>
170 );
173export default SentTransaction;