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        publishedEmpty,
26        progress,
27        message,
28        failed,
29        hide,
30      } = this.props
31  
32      return (
33        <div className={`${styles.cnt} ${dappName !== '' ? styles.active : ''}`}>
34          <ReactImageFallback
35            className={styles.image}
36            src={dappImg}
37            fallbackImage={icon}
38            alt="App icon"
39          />
40          <div className={styles.data}>
41            <div className={styles.name}>
42              <div className={styles.nameItself}>{dappName}</div>
43              {/* {!progress && ( */}
44              <div className={styles.close} onClick={hide}>
45                +
46              </div>
47              {/* )} */}
48            </div>
49            <div className={styles.info}>{txDesc}</div>
50            {publishedEmpty && (
51              <div className={styles.status}>
52                ✓ Thank you for submitting. Your dapp will be reviewed soon.
53              </div>
54            )}
55            {published && <div className={styles.status}>✓ {message}</div>}
56            {progress && (
57              <div className={styles.status}>
58                <img src={loadingSpinner} alt="Loading..." />
59                Waiting for confirmation from Ethereum...
60              </div>
61            )}
62            {failed && (
63              <div className={`${styles.status} ${styles.red} ${styles.column}`}>
64                Transaction failed. Please check EtherScan for tx:{' '}
65                <span>{dappTx}</span>
66              </div>
67            )}
68          </div>
69        </div>
70      )
71    }
72  }
73  
74  TransactionStatus.propTypes = {
75    dappTx: PropTypes.string.isRequired,
76    dappName: PropTypes.string.isRequired,
77    dappImg: PropTypes.string.isRequired,
78    txDesc: PropTypes.string.isRequired,
79    progress: PropTypes.bool.isRequired,
80    published: PropTypes.bool.isRequired,
81    publishedEmpty: PropTypes.bool.isRequired,
82    message: PropTypes.string.isRequired,
83    failed: PropTypes.bool.isRequired,
84    hide: PropTypes.func.isRequired,
85    checkTransactionStatus: PropTypes.func.isRequired,
86  }
87  
88  export default TransactionStatus