1  import React from 'react'
 2  import PropTypes from 'prop-types'
 3  import ReactImageFallback from 'react-image-fallback'
 4  import styles from './TransactionStatus.module.scss'
 5  import icon from '../../common/assets/images/icon.svg'
 6  import loadingSpinner from '../../common/assets/images/loading-spinner.svg'
 7  
 8  class TransactionStatus extends React.Component {
 9    componentDidMount() {
10      this.checkTransactionHash()
11    }
12  
13    checkTransactionHash() {
14      const { dappTx, progress, checkTransactionStatus } = this.props
15      if (dappTx !== '' && progress === true) checkTransactionStatus(dappTx)
16    }
17  
18    render() {
19      const {
20        dappName,
21        dappTx,
22        dappImg,
23        txDesc,
24        published,
25        progress,
26        failed,
27        hide,
28      } = this.props
29  
30      return (
31        <div className={`${styles.cnt} ${dappName !== '' ? styles.active : ''}`}>
32          <ReactImageFallback
33            className={styles.image}
34            src={dappImg}
35            fallbackImage={icon}
36            alt="App icon"
37          />
38          <div className={styles.data}>
39            <div className={styles.name}>
40              <div className={styles.nameItself}>{dappName}</div>
41              {!progress && (
42                <div className={styles.close} onClick={hide}>
43                  +
44                </div>
45              )}
46            </div>
47            <div className={styles.info}>{txDesc}</div>
48            {published && <div className={styles.status}>✓ Published</div>}
49            {progress && (
50              <div className={styles.status}>
51                <img src={loadingSpinner} />
52                Waiting for confirmation of the network...
53              </div>
54            )}
55            {failed && (
56              <div className={`${styles.status} ${styles.red} ${styles.column}`}>
57                Transaction failed. Please check EtherScan for tx:{' '}
58                <span>{dappTx}</span>
59              </div>
60            )}
61          </div>
62        </div>
63      )
64    }
65  }
66  
67  TransactionStatus.propTypes = {
68    dappTx: PropTypes.string.isRequired,
69    dappName: PropTypes.string.isRequired,
70    dappImg: PropTypes.string.isRequired,
71    txDesc: PropTypes.string.isRequired,
72    progress: PropTypes.bool.isRequired,
73    published: PropTypes.bool.isRequired,
74    failed: PropTypes.bool.isRequired,
75    hide: PropTypes.func.isRequired,
76    checkTransactionStatus: PropTypes.func.isRequired,
77  }
78  
79  export default TransactionStatus