git.iko.soy/bridge
on master help sign in
Animate pending dots
31aa349pkova
src/bridge/views/SentTransaction.js+79−49
compare with master
unifiedsplit
@@ -8,70 +8,100 @@ import { BRIDGE_ERROR, renderTxnError } from '../lib/error'
8import { NETWORK_NAMES } from '../lib/network'
8import { NETWORK_NAMES } from '../lib/network'
9
9
10
10
11−const Success = (props) => {
11+class Success extends React.Component {
12
12
13− const { networkType, hash, txnConfirmations } = props
13+ constructor(props) {
14+ super(props)
14
15
15− const esvisible =
16+ this.state = {
16− networkType === NETWORK_NAMES.ROPSTEN ||
17+ pending: '.',
17− networkType === NETWORK_NAMES.MAINNET
18+ interval: null
19+ }
20+ }
18
21
22+ componentDidMount() {
19− const esdomain =
23+ const nextDot = {'.': '..',
20− networkType === NETWORK_NAMES.ROPSTEN
24+ '..': '...',
21− ? "ropsten.etherscan.io"
25+ '...': '.'}
22− : "etherscan.io"
23
26
24− const esmessage =
27+ const interval = setInterval(() => {
25− esvisible === true
28+ this.setState(({ pending }) => ({pending: nextDot[pending]}))
26− ? "If you’d like to keep track of it, click the Etherscan link below."
29+ }, 1000)
27− : ''
30+ this.setState({interval: interval})
31+ }
28
32
29− const esanchor =
33+ componentDidUnmount() {
30− esvisible === false
34+ clearInterval(this.state.interval)
31− ? <div />
35+ }
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>
39
36
40− const confirmations = Maybe.fromNullable(txnConfirmations[hash]).getOrElse(0)
37+ render() {
41
38
42− const requiredConfirmations = 1
39+ const { props, state } = this
40+ const { networkType, hash, txnConfirmations } = props
41+ const { pending } = state
43
42
44− const status = confirmations < requiredConfirmations ? 'Pending...' : `Confirmed x${confirmations}!`
43+ const esvisible =
44+ networkType === NETWORK_NAMES.ROPSTEN ||
45+ networkType === NETWORK_NAMES.MAINNET
45
46
46− return (
47+ const esdomain =
47− <Row>
48+ networkType === NETWORK_NAMES.ROPSTEN
48− <Col>
49+ ? "ropsten.etherscan.io"
49− <H1>{ 'Your Transaction was Sent' }</H1>
50+ : "etherscan.io"
50
51
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+
51− <P>
80+ <P>
52− {
81+ {
53− `We sent your transaction to the chain. It can take some time to
82+ `We sent your transaction to the chain. It can take some time to
54 execute, especially if the network is busy. ${esmessage}`
83 execute, especially if the network is busy. ${esmessage}`
55− }
84+ }
56− </P>
85+ </P>
57
86
58− <H3>{ 'Transaction Hash' }</H3>
87+ <H3>{ 'Transaction Hash' }</H3>
59− <P>
88+ <P>
60− { hash }
89+ { hash }
61− </P>
90+ </P>
62
91
63− <H3>{ 'Transaction Status' }</H3>
92+ <H3>{ 'Transaction Status' }</H3>
64− <P>
93+ <P>
65− <div>{ status }</div>
94+ <div>{ status }</div>
66− <div>{ esanchor }</div>
95+ <div>{ esanchor }</div>
67− </P>
96+ </P>
68− <P>
97+ <P>
69− </P>
98+ </P>
70
99
71
100
72− </Col>
101+ </Col>
73− </Row>
102+ </Row>
74− )
103+ )
104+ }
75}
105}
76
106
77const Failure = (props) =>
107const Failure = (props) =>