@@ -8,70 +8,100 @@ import { BRIDGE_ERROR, renderTxnError } from '../lib/error'
88import { NETWORK_NAMES } from '../lib/network'
99
1010
11−const Success = (props) => {
11+class Success extends React.Component {
1212
13− const { networkType, hash, txnConfirmations } = props
13+ constructor(props) {
14+ super(props)
1415
15− const esvisible =
16− networkType === NETWORK_NAMES.ROPSTEN ||
17− networkType === NETWORK_NAMES.MAINNET
16+ this.state = {
17+ pending: '.',
18+ interval: null
19+ }
20+ }
1821
19− const esdomain =
20− networkType === NETWORK_NAMES.ROPSTEN
21− ? "ropsten.etherscan.io"
22− : "etherscan.io"
22+ componentDidMount() {
23+ const nextDot = {'.': '..',
24+ '..': '...',
25+ '...': '.'}
2326
24− const esmessage =
25− esvisible === true
26− ? "If you’d like to keep track of it, click the Etherscan link below."
27− : ''
27+ const interval = setInterval(() => {
28+ this.setState(({ pending }) => ({pending: nextDot[pending]}))
29+ }, 1000)
30+ this.setState({interval: interval})
31+ }
2832
29− const esanchor =
30− esvisible === false
31− ? <div />
32− : <Anchor
33− className={'mb-4 mt-1'}
34− prop-size={'sm'}
35− target={'_blank'}
36− href={`https://${esdomain}/tx/${hash}`}>
37− {'View on Etherscan ↗'}
38− </Anchor>
33+ componentDidUnmount() {
34+ clearInterval(this.state.interval)
35+ }
3936
40− const confirmations = Maybe.fromNullable(txnConfirmations[hash]).getOrElse(0)
37+ render() {
4138
42− const requiredConfirmations = 1
39+ const { props, state } = this
40+ const { networkType, hash, txnConfirmations } = props
41+ const { pending } = state
4342
44− const status = confirmations < requiredConfirmations ? 'Pending...' : `Confirmed x${confirmations}!`
43+ const esvisible =
44+ networkType === NETWORK_NAMES.ROPSTEN ||
45+ networkType === NETWORK_NAMES.MAINNET
4546
46− return (
47− <Row>
48− <Col>
49− <H1>{ 'Your Transaction was Sent' }</H1>
47+ const esdomain =
48+ networkType === NETWORK_NAMES.ROPSTEN
49+ ? "ropsten.etherscan.io"
50+ : "etherscan.io"
5051
51− <P>
52− {
53− `We sent your transaction to the chain. It can take some time to
52+ const esmessage =
53+ esvisible === true
54+ ? "If you’d like to keep track of it, click the Etherscan link below."
55+ : ''
56+
57+ const esanchor =
58+ esvisible === false
59+ ? <div />
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+
68+ const confirmations = Maybe.fromNullable(txnConfirmations[hash]).getOrElse(0)
69+
70+ const requiredConfirmations = 1
71+
72+ const status = confirmations < requiredConfirmations ?
73+ `Pending${pending}` : `Confirmed! (x${confirmations} confirmations)!`
74+
75+ return (
76+ <Row>
77+ <Col>
78+ <H1>{ 'Your Transaction was Sent' }</H1>
79+
80+ <P>
81+ {
82+ `We sent your transaction to the chain. It can take some time to
5483 execute, especially if the network is busy. ${esmessage}`
55− }
56− </P>
84+ }
85+ </P>
5786
58− <H3>{ 'Transaction Hash' }</H3>
59− <P>
60− { hash }
61− </P>
87+ <H3>{ 'Transaction Hash' }</H3>
88+ <P>
89+ { hash }
90+ </P>
6291
63− <H3>{ 'Transaction Status' }</H3>
64− <P>
65− <div>{ status }</div>
66− <div>{ esanchor }</div>
67− </P>
68− <P>
69− </P>
92+ <H3>{ 'Transaction Status' }</H3>
93+ <P>
94+ <div>{ status }</div>
95+ <div>{ esanchor }</div>
96+ </P>
97+ <P>
98+ </P>
7099
71100
72− </Col>
73− </Row>
74− )
101+ </Col>
102+ </Row>
103+ )
104+ }
75105}
76106
77107const Failure = (props) =>