overlaping, downvote & tc before submit

2019-05-16 22:30:16 +03:00 · 2019-05-16 22:30:16 +03:00 · df750b6dbb
parent 0a6db07355
commit df750b6dbb
9 changed files with 198 additions and 118 deletions
--- a/src/common/components/DappListItem/DappListItem.jsx
+++ b/src/common/components/DappListItem/DappListItem.jsx
@ -33,7 +33,10 @@ const DappListItem = props => {
  return (
    <div className={isRanked ? styles.rankedListItem : styles.listItem}>
      {isRanked && <div className={styles.position}>{position}</div>}
-      <div onClick={() => onToggleProfileModal(name)}>
+      <div
+        className={styles.imgWrapper}
+        onClick={() => onToggleProfileModal(name)}
+      >
        <ReactImageFallback
          className={styles.image}
          src={image}
@ -41,7 +44,7 @@ const DappListItem = props => {
          alt="App icon"
        />
      </div>
-      <div>
+      <div className={styles.column}>
        <div onClick={() => onToggleProfileModal(name)}>
          <h2 className={styles.header}>{name}</h2>
          <p
@ -56,20 +59,22 @@ const DappListItem = props => {
          &nbsp;&rarr;
        </a>
        {showActionButtons && (
-          <p className={styles.actionArea}>
+          <div className={styles.actionArea}>
            <span className={styles.sntAmount}>
              <img src={sntIcon} alt="SNT" width="16" height="16" />
              {dapp.sntValue}
            </span>
-            <span className={styles.vote} onClick={handleUpVote}>
-              <img src={upvoteArrowIcon} alt="" />
-              Upvote
-            </span>
-            <span className={styles.vote} onClick={handleDownVote}>
-              <img src={downvoteArrowIcon} alt="" />
-              Downvote
-            </span>
-          </p>
+            <div className={styles.voteTriggers}>
+              <span className={styles.vote} onClick={handleUpVote}>
+                <img src={upvoteArrowIcon} alt="" />
+                Upvote
+              </span>
+              <span className={styles.vote} onClick={handleDownVote}>
+                <img src={downvoteArrowIcon} alt="" />
+                Downvote
+              </span>
+            </div>
+          </div>
        )}
      </div>
    </div>
--- a/src/common/components/DappListItem/DappListItem.module.scss
+++ b/src/common/components/DappListItem/DappListItem.module.scss
@ -18,6 +18,12 @@
  position: relative;
 }

+.column {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+}
+
 .header {
  color: $headline-color;
  font-size: calculateRem(15);
@ -41,6 +47,7 @@
  font-size: calculateRem(12);
  color: $link-color;
  text-decoration: none;
+  margin-bottom: 12px;
 }

 .description {
@ -60,11 +67,16 @@
 }

 .position {
+  flex: 0 0 auto;
  margin-top: calculateRem(20);
  margin-right: calculateRem(16);
  font-size: calculateRem(13);
 }

+.imgWrapper {
+  flex: 0 0 auto;
+}
+
 .sntAmount {
  font-size: calculateRem(12);
  font-weight: 500;
@ -99,6 +111,19 @@
 }

 .actionArea {
-  bottom: 0;
-  position: absolute;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-top: auto;
+
+  .voteTriggers {
+    display: inherit;
+    align-items: inherit;
+  }
+}
+
+.actionArea > * {
+  margin-bottom: calculateRem(8);
 }
--- a/src/common/data/how-to-submit.js
+++ b/src/common/data/how-to-submit.js
@ -1,5 +1,6 @@
 const howToSubmit = {
-  visible: false,
+  visible_how_to_submit: false,
+  visible_terms: false,
 }

 export default howToSubmit
--- a/src/modules/HowToSubmit/HowToSubmit.container.js
+++ b/src/modules/HowToSubmit/HowToSubmit.container.js
@ -1,12 +1,16 @@
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import HowToSubmit from './HowToSubmit'
-import { hideHowToSubmitAction } from './HowToSubmit.reducer'
+import {
+  hideHowToSubmitAction,
+  switchToTermsAction,
+} from './HowToSubmit.reducer'
 import { showSubmitAction } from '../Submit/Submit.reducer'

 const mapStateToProps = state => state.howToSubmit
 const mapDispatchToProps = dispatch => ({
  onClickClose: () => dispatch(hideHowToSubmitAction()),
+  onClickContinue: () => dispatch(switchToTermsAction()),
  onClickGetStarted: () => {
    dispatch(hideHowToSubmitAction())
    setTimeout(() => {
--- a/src/modules/HowToSubmit/HowToSubmit.jsx
+++ b/src/modules/HowToSubmit/HowToSubmit.jsx
@ -2,14 +2,30 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './HowToSubmit.module.scss'
 import Modal from '../../common/components/Modal'
+import Terms from '../Terms/Terms'

 class HowToSubmit extends React.Component {
  constructor(props) {
    super(props)
+    this.wrapper = React.createRef()
+    this.onClickNext = this.onClickNext.bind(this)
+  }
+
+  onClickNext() {
+    const {
+      visible_how_to_submit,
+      onClickContinue,
+      onClickGetStarted,
+    } = this.props
+    if (visible_how_to_submit) {
+      this.wrapper.current.parentNode.parentNode.scrollTop = 0
+      onClickContinue()
+    } else onClickGetStarted()
  }

  render() {
-    const { visible, onClickClose, onClickGetStarted } = this.props
+    const { visible_how_to_submit, visible_terms, onClickClose } = this.props
+    const visible = visible_how_to_submit || visible_terms

    return (
      <Modal
@ -17,90 +33,97 @@ class HowToSubmit extends React.Component {
        onClickClose={onClickClose}
        windowClassName={styles.modalWindow}
      >
-        <div className={styles.cnt}>
-          <div className={styles.title}>Terms and conditions</div>
-          <div className={styles.frame}>
-            <div className={styles.frameTitle}>Submit your ÐApp</div>
-            <ol>
-              <li>
-                Upload a name, url, description, category and image for your
-                DApp in the next step compulsory.
-              </li>
-              <li>
-                Stake the amount of SNT you want to rank your DApp optional.
-              </li>
-              <li>Hit “submit”.</li>
-              <li>
-                Our team will ensure that your DApp works well on mobile devices
-                and will then include it on the live site using the information
-                you provided in Step 1.
-              </li>
-            </ol>
-          </div>
-          <div className={styles.frame}>
-            <div className={styles.frameTitle}>Staking</div>
-            <p>
-              You need not stake anything to be included - your DApp just won’t
-              appear in the “Highest Ranked” section. If you do stake SNT, your
-              DApp will appear in that section immediately. The DApp with the
-              highest effective balance (that is, SNT staked plus/minus votes
-              cast for/against) ranks highest.
-            </p>
-            <p>
-              SNT you stake is locked in the Discover contract. You can, at any
-              time, withdraw a percentage of what you have staked. The more you
-              stake, the lower the percentage you can withdraw. Withdrawals must
-              be made from the same wallet as you submitted with, so PLEASE
-              SECURE THIS ADDRESS.
-            </p>
-          </div>
-          <div className={`${styles.frame} ${styles.withBorder}`}>
-            <ol>
-              <li>
-                Staking <strong>10 000 SNT</strong> returns a rate of{' '}
-                <strong>99.5%</strong>, so you can withdraw up to{' '}
-                <strong>9 950 SNT.</strong>
-              </li>
-              <li>
-                Staking <strong>1 000 000 SNT</strong> returns a rate of 50.99%,
-                so you can withdraw up to <strong>509 958 SNT.</strong>
-              </li>
-            </ol>
-          </div>
-          <div className={styles.frame}>
-            <p>
-              Furthermore, the operators of{' '}
-              <a href="https://dap.ps">https://dap.ps</a> reserve the right to
-              remove any DApp from the UI for reasons including, but not limited
-              to:
-            </p>
-          </div>
-          <div className={`${styles.frame} ${styles.withBorder}`}>
-            <ol>
-              <li>Malicious code injection</li>
-              <li>
-                Violation of <a>Status' principles</a>
-              </li>
-              <li>Lack of usability (especially on mobile)</li>
-              <li>Vote manipulation.</li>
-            </ol>
-          </div>
-          <div className={styles.frame}>
-            <p>
-              Anyone is welcome to fork the software and implement different UI
-              choices for the same underlying contract. Note that Discover is
-              not affiliated with Status directly, we have simply chosen to use
-              SNT as a token of value, to abide by <a>Status’ principles</a>,
-              and to take a mobile-first approach to development.
-            </p>
-          </div>
+        <div ref={this.wrapper} className={styles.cnt}>
+          {visible_how_to_submit && (
+            <>
+              <div className={styles.title}>How to submit a ÐApp</div>
+              <div className={styles.frame}>
+                <div className={styles.frameTitle}>Submit your ÐApp</div>
+                <ol>
+                  <li>
+                    Upload a name, url, description, category and image for your
+                    DApp in the next step compulsory.
+                  </li>
+                  <li>
+                    Stake the amount of SNT you want to rank your DApp optional.
+                  </li>
+                  <li>Hit “submit”.</li>
+                  <li>
+                    Our team will ensure that your DApp works well on mobile
+                    devices and will then include it on the live site using the
+                    information you provided in Step 1.
+                  </li>
+                </ol>
+              </div>
+              <div className={styles.frame}>
+                <div className={styles.frameTitle}>Staking</div>
+                <p>
+                  You need not stake anything to be included - your DApp just
+                  won’t appear in the “Highest Ranked” section. If you do stake
+                  SNT, your DApp will appear in that section immediately. The
+                  DApp with the highest effective balance (that is, SNT staked
+                  plus/minus votes cast for/against) ranks highest.
+                </p>
+                <p>
+                  SNT you stake is locked in the Discover contract. You can, at
+                  any time, withdraw a percentage of what you have staked. The
+                  more you stake, the lower the percentage you can withdraw.
+                  Withdrawals must be made from the same wallet as you submitted
+                  with, so PLEASE SECURE THIS ADDRESS.
+                </p>
+              </div>
+              <div className={`${styles.frame} ${styles.withBorder}`}>
+                <ol>
+                  <li>
+                    Staking <strong>10 000 SNT</strong> returns a rate of{' '}
+                    <strong>99.5%</strong>, so you can withdraw up to{' '}
+                    <strong>9 950 SNT.</strong>
+                  </li>
+                  <li>
+                    Staking <strong>1 000 000 SNT</strong> returns a rate of
+                    50.99%, so you can withdraw up to{' '}
+                    <strong>509 958 SNT.</strong>
+                  </li>
+                </ol>
+              </div>
+              <div className={styles.frame}>
+                <p>
+                  Furthermore, the operators of{' '}
+                  <a href="https://dap.ps">https://dap.ps</a> reserve the right
+                  to remove any DApp from the UI for reasons including, but not
+                  limited to:
+                </p>
+              </div>
+              <div className={`${styles.frame} ${styles.withBorder}`}>
+                <ol>
+                  <li>Malicious code injection</li>
+                  <li>
+                    Violation of <a>Status' principles</a>
+                  </li>
+                  <li>Lack of usability (especially on mobile)</li>
+                  <li>Vote manipulation.</li>
+                </ol>
+              </div>
+              <div className={styles.frame}>
+                <p>
+                  Anyone is welcome to fork the software and implement different
+                  UI choices for the same underlying contract. Note that
+                  Discover is not affiliated with Status directly, we have
+                  simply chosen to use SNT as a token of value, to abide by{' '}
+                  <a>Status’ principles</a>, and to take a mobile-first approach
+                  to development.
+                </p>
+              </div>
+            </>
+          )}
+          {visible_terms && <Terms />}
          <div className={styles.footerActions}>
            <button
              className={styles.submitButton}
              type="submit"
-              onClick={onClickGetStarted}
+              onClick={this.onClickNext}
            >
-              Continue
+              {visible_how_to_submit ? 'Continue' : 'Get started'}
            </button>
          </div>
        </div>
@ -110,8 +133,10 @@ class HowToSubmit extends React.Component {
 }

 HowToSubmit.propTypes = {
-  visible: PropTypes.bool.isRequired,
+  visible_how_to_submit: PropTypes.bool.isRequired,
+  visible_terms: PropTypes.bool.isRequired,
  onClickClose: PropTypes.func.isRequired,
+  onClickContinue: PropTypes.func.isRequired,
  onClickGetStarted: PropTypes.func.isRequired,
 }

--- a/src/modules/HowToSubmit/HowToSubmit.reducer.js
+++ b/src/modules/HowToSubmit/HowToSubmit.reducer.js
@ -3,6 +3,7 @@ import reducerUtil from '../../common/utils/reducer'

 const SHOW = 'HOW_TO_SHOW'
 const HIDE = 'HOW_TO_HIDE'
+const SWITCH_TO_TERMS = 'HOW_SWITCH_TO_TERMS'

 export const showHowToSubmitAction = () => {
  window.location.hash = 'how-to-submit'
@ -20,21 +21,36 @@ export const hideHowToSubmitAction = () => {
  }
 }

+export const switchToTermsAction = () => ({
+  type: SWITCH_TO_TERMS,
+  payload: null,
+})
+
 const show = state => {
  return Object.assign({}, state, {
-    visible: true,
+    visible_how_to_submit: true,
+    visible_terms: false,
  })
 }

 const hide = state => {
  return Object.assign({}, state, {
-    visible: false,
+    visible_how_to_submit: false,
+    visible_terms: false,
+  })
+}
+
+const switchToTerms = state => {
+  return Object.assign({}, state, {
+    visible_how_to_submit: false,
+    visible_terms: true,
  })
 }

 const map = {
  [SHOW]: show,
  [HIDE]: hide,
+  [SWITCH_TO_TERMS]: switchToTerms,
 }

 export default reducerUtil(map, howToSubmitInitialState)
--- a/src/modules/TransactionStatus/TransactionStatus.module.scss
+++ b/src/modules/TransactionStatus/TransactionStatus.module.scss
@ -61,8 +61,9 @@
        align-items: center;
        justify-content: center;
        color: #fff;
-        font-size: 16px;
+        font-size: 18px;
        font-weight: 300;
+        font-family: 'Times New Roman', Times, serif;
        margin-left: auto;
        border-radius: 50%;
        background: #939ba1;
--- a/src/modules/Vote/Vote.jsx
+++ b/src/modules/Vote/Vote.jsx
@ -34,7 +34,7 @@ class Vote extends Component {
  onClickDownvote() {
    const { dapp, onClickDownvote, fetchVoteRating } = this.props
    onClickDownvote()
-    // fetchVoteRating(dapp, false, 3244)
+    fetchVoteRating(dapp, false, DOWNVOTE_COST)
  }

  handleChange(e) {
@ -91,7 +91,6 @@ class Vote extends Component {
      afterVoteCategoryPosition = 1
      for (let i = 0; i < dappsByCategory.length; ++i) {
        if (dappsByCategory[i] === dapp) continue
-
        if (dappsByCategory[i].sntValue < afterVoteRating) break
        afterVoteCategoryPosition++
      }
@ -142,11 +141,11 @@ class Vote extends Component {
                {`${afterVoteRating.toLocaleString()} ↑`}
              </span>
            )}
-            {/* {!isUpvote && afterVoteRating !== null && (
+            {!isUpvote && afterVoteRating !== null && (
              <span className={styles.redBadge}>
                {`${afterVoteRating.toLocaleString()} ↓`}
              </span>
-            )} */}
+            )}
          </div>
          <div className={styles.itemRow}>
            <span className={styles.item}>
@ -165,11 +164,13 @@ class Vote extends Component {
                  {`№${afterVoteCategoryPosition} ↑`}
                </span>
              )}
-            {/* {!isUpvote && afterVoteCategoryPosition !== null &&  afterVoteCategoryPosition !== catPosition (
-              <span className={styles.redBadge}>
-                {`№${afterVoteCategoryPosition} ↓`}
-              </span>
-            )} */}
+            {!isUpvote &&
+              afterVoteCategoryPosition !== null &&
+              afterVoteCategoryPosition !== catPosition && (
+                <span className={styles.redBadge}>
+                  {`№${afterVoteCategoryPosition} ↓`}
+                </span>
+              )}
          </div>
        </div>
        {!isUpvote && (
--- a/src/modules/Vote/Vote.reducer.js
+++ b/src/modules/Vote/Vote.reducer.js
@ -111,15 +111,17 @@ export const updateAfterVotingValuesAction = rating => ({
 export const fetchVoteRatingAction = (dapp, isUpvote, sntValue) => {
  return async (dispatch, getState) => {
    let rating
-    try {
-      rating = await BlockchainSDK.DiscoverService.upVoteEffect(
-        dapp.id,
-        sntValue,
-      )
-    } catch (e) {
-      return
-    }
-    rating = parseInt(rating, 10)
+    if (isUpvote === true) {
+      try {
+        rating = await BlockchainSDK.DiscoverService.upVoteEffect(
+          dapp.id,
+          sntValue,
+        )
+        rating = parseInt(rating, 10)
+      } catch (e) {
+        return
+      }
+    } else rating = parseInt(dapp.sntValue * 0.99, 10)

    const state = getState()
    const voteState = state.vote