@@ -1,3 +1,4 @@
1+import Maybe from 'folktale/maybe'
12import React from 'react'
23import { Row, Col, H1, H3, P, Warning, Anchor } from '../components/Base'
34import { Button } from '../components/Base'
@@ -6,55 +7,100 @@ import { ROUTE_NAMES } from '../lib/router'
67import { BRIDGE_ERROR, renderTxnError } from '../lib/error'
78import { NETWORK_NAMES } from '../lib/network'
89
9−const Success = (props) => {
10−
11− const esvisible =
12− props.networkType === NETWORK_NAMES.ROPSTEN ||
13− props.networkType === NETWORK_NAMES.MAINNET
14−
15− const esdomain =
16− props.networkType === NETWORK_NAMES.ROPSTEN
17− ? "ropsten.etherscan.io"
18− : "etherscan.io"
19−
20− const esmessage =
21− esvisible === true
22− ? "If you’d like to keep track of it, click the Etherscan link below."
23− : ''
24−
25− const esanchor =
26− esvisible === false
27− ? <div />
28− : <Anchor
29− className={'mb-4 mt-1'}
30− prop-size={'sm'}
31− target={'_blank'}
32− href={`https://${esdomain}/tx/${props.hash}`}>
33− {'View on Etherscan ↗'}
34− </Anchor>
3510
36− return (
37− <Row>
38− <Col>
39− <H1>{ 'Your Transaction was Sent' }</H1>
11+class Success extends React.Component {
12+
13+ constructor(props) {
14+ super(props)
15+
16+ this.state = {
17+ pending: '.',
18+ interval: null
19+ }
20+ }
21+
22+ componentDidMount() {
23+ const nextDot = {'.': '..',
24+ '..': '...',
25+ '...': '.'}
26+
27+ const interval = setInterval(() => {
28+ this.setState(({ pending }) => ({pending: nextDot[pending]}))
29+ }, 1000)
30+ this.setState({interval: interval})
31+ }
32+
33+ componentWillUnmount() {
34+ clearInterval(this.state.interval)
35+ }
36+
37+ render() {
38+
39+ const { props, state } = this
40+ const { networkType, hash, txnConfirmations } = props
41+ const { pending } = state
42+
43+ const esvisible =
44+ networkType === NETWORK_NAMES.ROPSTEN ||
45+ networkType === NETWORK_NAMES.MAINNET
46+
47+ const esdomain =
48+ networkType === NETWORK_NAMES.ROPSTEN
49+ ? "ropsten.etherscan.io"
50+ : "etherscan.io"
51+
52+ const esmessage =
53+ esvisible === true
54+ ? "If you’d like to keep track of it, click the Etherscan link below."
55+ : ''
4056
41− <P>
42− {
43− `We sent your transaction to the chain. It can take some time to
57+ const esanchor =
58+ esvisible === false
59+ ? 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+
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
4483 execute, especially if the network is busy. ${esmessage}`
45− }
46− </P>
84+ }
85+ </P>
4786
48− <H3>{ 'Transaction Hash' }</H3>
49− <P>
50− { props.hash }
51− </P>
87+ <H3>{ 'Transaction Hash' }</H3>
88+ <P>
89+ { hash }
90+ </P>
5291
53− { esanchor }
92+ <H3>{ 'Transaction Status' }</H3>
93+ <P>
94+ { status }
95+ </P>
96+ <P>
97+ { esanchor }
98+ </P>
5499
55− </Col>
56− </Row>
57− )
100+ </Col>
101+ </Row>
102+ )
103+ }
58104}
59105
60106const Failure = (props) =>
@@ -76,7 +122,7 @@ const Failure = (props) =>
76122 </Row>
77123
78124const SentTransaction = (props) => {
79− const { web3, txnHashCursor, networkType, popRoute, pushRoute } = props
125+ const { web3, txnHashCursor, networkType, popRoute, pushRoute, txnConfirmations} = props
80126 const { setPointCursor, pointCursor } = props
81127
82128 const promptKeyfile = props.routeData && props.routeData.promptKeyfile
@@ -97,6 +143,7 @@ const SentTransaction = (props) => {
97143 <Success
98144 hash={ hash.value }
99145 networkType={ networkType }
146+ txnConfirmations={ txnConfirmations }
100147 />
101148 })
102149