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.frame}>
 41                  <div className={styles.frameTitle}>Submit your ÐApp</div>
 42                  <ol>
 43                    <li>
 44                      Upload a name, url, description, category and image for your
 45                      DApp in the next step compulsory.
 46                    </li>
 47                    <li>
 48                      Stake the amount of SNT you want to rank your DApp optional.
 49                    </li>
 50                    <li>Hit “submit”.</li>
 51                    <li>
 52                      Our team will ensure that your DApp works well on mobile
 53                      devices and will then include it on the live site using the
 54                      information you provided in Step 1.
 55                    </li>
 56                  </ol>
 57                </div>
 58                <div className={styles.frame}>
 59                  <div className={styles.frameTitle}>Staking</div>
 60                  <p>
 61                    You need not stake anything to be included - your DApp just
 62                    won’t appear in the “Highest Ranked” section. If you do stake
 63                    SNT, your DApp will appear in that section immediately. The
 64                    DApp with the highest effective balance (that is, SNT staked
 65                    plus/minus votes cast for/against) ranks highest.
 66                  </p>
 67                  <p>
 68                    SNT you stake is locked in the Discover contract. You can, at
 69                    any time, withdraw a percentage of what you have staked. The
 70                    more you stake, the lower the percentage you can withdraw.
 71                    Withdrawals must be made from the same wallet as you submitted
 72                    with, so PLEASE SECURE THIS ADDRESS.
 73                  </p>
 74                </div>
 75                <div className={`${styles.frame} ${styles.withBorder}`}>
 76                  <ol>
 77                    <li>
 78                      Staking <strong>10 000 SNT</strong> returns a rate of{' '}
 79                      <strong>99.5%</strong>, so you can withdraw up to{' '}
 80                      <strong>9 950 SNT.</strong>
 81                    </li>
 82                    <li>
 83                      Staking <strong>1 000 000 SNT</strong> returns a rate of
 84                      50.99%, so you can withdraw up to{' '}
 85                      <strong>509 958 SNT.</strong>
 86                    </li>
 87                  </ol>
 88                </div>
 89                <div className={styles.frame}>
 90                  <p>
 91                    Furthermore, the operators of{' '}
 92                    <a href="https://dap.ps">https://dap.ps</a> reserve the right
 93                    to remove any DApp from the UI for reasons including, but not
 94                    limited to:
 95                  </p>
 96                </div>
 97                <div className={`${styles.frame} ${styles.withBorder}`}>
 98                  <ol>
 99                    <li>Malicious code injection</li>
100                    <li>
101                      Violation of <a>Status' principles</a>
102                    </li>
103                    <li>Lack of usability (especially on mobile)</li>
104                    <li>Vote manipulation.</li>
105                  </ol>
106                </div>
107                <div className={styles.frame}>
108                  <p>
109                    Anyone is welcome to fork the software and implement different
110                    UI choices for the same underlying contract. Note that
111                    Discover is not affiliated with Status directly, we have
112                    simply chosen to use SNT as a token of value, to abide by{' '}
113                    <a>Status’ principles</a>, and to take a mobile-first approach
114                    to development.
115                  </p>
116                </div>
117              </>
118            )}
119            {visible_terms && <Terms />}
120            <div className={styles.footerActions}>
121              <button
122                className={styles.submitButton}
123                type="submit"
124                onClick={this.onClickNext}
125              >
126                {visible_how_to_submit ? 'Continue' : 'Get started'}
127              </button>
128            </div>
129          </div>
130        </Modal>
131      )
132    }
133  }
134  
135  HowToSubmit.propTypes = {
136    visible_how_to_submit: PropTypes.bool.isRequired,
137    visible_terms: PropTypes.bool.isRequired,
138    onClickClose: PropTypes.func.isRequired,
139    onClickContinue: PropTypes.func.isRequired,
140    onClickGetStarted: PropTypes.func.isRequired,
141  }
142  
143  export default HowToSubmit