1  import React from 'react'
  2  import PropTypes from 'prop-types'
  3  import styles from './HowToSubmit.module.scss'
  4  import Modal from '../../common/components/Modal'
  5  import Terms from '../Terms/Terms'
  6  
  7  class HowToSubmit extends React.Component {
  8    constructor(props) {
  9      super(props)
 10      this.wrapper = React.createRef()
 11      this.onClickNext = this.onClickNext.bind(this)
 12    }
 13  
 14    onClickNext() {
 15      const {
 16        visible_how_to_submit,
 17        onClickContinue,
 18        onClickGetStarted,
 19      } = this.props
 20      if (visible_how_to_submit) {
 21        this.wrapper.current.parentNode.parentNode.scrollTop = 0
 22        onClickContinue()
 23      } else onClickGetStarted()
 24    }
 25  
 26    render() {
 27      const { visible_how_to_submit, visible_terms, onClickClose } = this.props
 28      const visible = visible_how_to_submit || visible_terms
 29  
 30      return (
 31        <Modal
 32          visible={visible && window.location.hash === '#how-to-submit'}
 33          onClickClose={onClickClose}
 34          windowClassName={styles.modalWindow}
 35        >
 36          <div ref={this.wrapper} className={styles.cnt}>
 37            {visible_how_to_submit && (
 38              <>
 39                <div className={styles.title}>How to submit a ÐApp</div>
 40                <div className={styles.howto}>
 41                  <div className={styles.frame}>
 42                    <div className={styles.frameTitle}>Submit your ÐApp</div>
 43                    <ol>
 44                      <li>
 45                        Upload a name, url, description, category and image for
 46                        your DApp in the next step compulsory.
 47                      </li>
 48                      <li>
 49                        Stake the amount of SNT you want to rank your DApp
 50                        optional.
 51                      </li>
 52                      <li>Hit “submit”.</li>
 53                      <li>
 54                        Our team will ensure that your DApp works well on mobile
 55                        devices and will then include it on the live site using
 56                        the information you provided in Step 1.
 57                      </li>
 58                    </ol>
 59                  </div>
 60                  <div className={styles.frame}>
 61                    <div className={styles.frameTitle}>Staking</div>
 62                    <p>
 63                      You need not stake anything to be included - your DApp just
 64                      won’t appear in the “Highest Ranked” section. If you do
 65                      stake SNT, your DApp will appear in that section
 66                      immediately. The DApp with the highest effective balance
 67                      (that is, SNT staked plus/minus votes cast for/against)
 68                      ranks highest.
 69                    </p>
 70                    <p>
 71                      SNT you stake is locked in the Discover contract. You can,
 72                      at any time, withdraw a percentage of what you have staked.
 73                      The more you stake, the lower the percentage you can
 74                      withdraw. Withdrawals must be made from the same wallet as
 75                      you submitted with, so PLEASE SECURE THIS ADDRESS.
 76                    </p>
 77                  </div>
 78                  <div className={`${styles.frame} ${styles.withBorder}`}>
 79                    <ol>
 80                      <li>
 81                        Staking <strong>10 000 SNT</strong> returns a rate of{' '}
 82                        <strong>99.5%</strong>, so you can withdraw up to{' '}
 83                        <strong>9 950 SNT.</strong>
 84                      </li>
 85                      <li>
 86                        Staking <strong>1 000 000 SNT</strong> returns a rate of
 87                        50.99%, so you can withdraw up to{' '}
 88                        <strong>509 958 SNT.</strong>
 89                      </li>
 90                    </ol>
 91                  </div>
 92                  <div className={styles.frame}>
 93                    <p>
 94                      Furthermore, the operators of{' '}
 95                      <a href="https://dap.ps">https://dap.ps</a> reserve the
 96                      right to remove any DApp from the UI for reasons including,
 97                      but not limited to:
 98                    </p>
 99                  </div>
100                  <div className={`${styles.frame} ${styles.withBorder}`}>
101                    <ol>
102                      <li>Malicious code injection</li>
103                      <li>
104                        Violation of{' '}
105                        <a href="https://status.im/about/">Status' principles</a>
106                      </li>
107                      <li>Lack of usability (especially on mobile)</li>
108                      <li>Vote manipulation.</li>
109                    </ol>
110                  </div>
111                  <div className={styles.frame}>
112                    <p>
113                      Anyone is welcome to fork the software and implement
114                      different UI choices for the same underlying contract. Note
115                      that Discover is not affiliated with Status directly, we
116                      have simply chosen to use SNT as a token of value, to abide
117                      by <a href="https://status.im/about/">Status’ principles</a>
118                      , and to take a mobile-first approach to development.
119                    </p>
120                  </div>
121                </div>
122              </>
123            )}
124            {visible_terms && <Terms />}
125            <div className={styles.footerActions}>
126              <button
127                className={styles.submitButton}
128                type="submit"
129                onClick={this.onClickNext}
130              >
131                {visible_how_to_submit ? 'Continue' : 'Get started'}
132              </button>
133            </div>
134          </div>
135        </Modal>
136      )
137    }
138  }
139  
140  HowToSubmit.propTypes = {
141    visible_how_to_submit: PropTypes.bool.isRequired,
142    visible_terms: PropTypes.bool.isRequired,
143    onClickClose: PropTypes.func.isRequired,
144    onClickContinue: PropTypes.func.isRequired,
145    onClickGetStarted: PropTypes.func.isRequired,
146  }
147  
148  export default HowToSubmit