diff --git a/src/common/components/DappListItem/DappListItem.jsx b/src/common/components/DappListItem/DappListItem.jsx index abd83b8..65a2694 100644 --- a/src/common/components/DappListItem/DappListItem.jsx +++ b/src/common/components/DappListItem/DappListItem.jsx @@ -33,7 +33,10 @@ const DappListItem = props => { return (
{isRanked &&
{position}
} -
onToggleProfileModal(name)}> +
onToggleProfileModal(name)} + > { alt="App icon" />
-
+
onToggleProfileModal(name)}>

{name}

{  → {showActionButtons && ( -

+

SNT {dapp.sntValue} - - - Upvote - - - - Downvote - -

+
+ + + Upvote + + + + Downvote + +
+
)}
diff --git a/src/common/components/DappListItem/DappListItem.module.scss b/src/common/components/DappListItem/DappListItem.module.scss index 2e156e7..68bd085 100644 --- 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); } diff --git a/src/common/data/how-to-submit.js b/src/common/data/how-to-submit.js index 990aa8e..7e14efb 100644 --- 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 diff --git a/src/modules/HowToSubmit/HowToSubmit.container.js b/src/modules/HowToSubmit/HowToSubmit.container.js index a469be4..1bafbe5 100644 --- 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(() => { diff --git a/src/modules/HowToSubmit/HowToSubmit.jsx b/src/modules/HowToSubmit/HowToSubmit.jsx index 10bdc36..32cacb3 100644 --- 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 ( -
-
Terms and conditions
-
-
Submit your ÐApp
-
    -
  1. - Upload a name, url, description, category and image for your - DApp in the next step compulsory. -
    2. -
  2. - Stake the amount of SNT you want to rank your DApp optional. -
    3. -
  3. Hit “submit”.
    4. -
  4. - 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. -
    5. -
-
-
-
Staking
-

- 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. -

-

- 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. -

-
-
-
    -
  1. - Staking 10 000 SNT returns a rate of{' '} - 99.5%, so you can withdraw up to{' '} - 9 950 SNT. -
    2. -
  2. - Staking 1 000 000 SNT returns a rate of 50.99%, - so you can withdraw up to 509 958 SNT. -
    3. -
-
-
-

- Furthermore, the operators of{' '} - https://dap.ps reserve the right to - remove any DApp from the UI for reasons including, but not limited - to: -

-
-
-
    -
  1. Malicious code injection
    2. -
  2. - Violation of Status' principles -
    3. -
  3. Lack of usability (especially on mobile)
    4. -
  4. Vote manipulation.
    5. -
-
-
-

- 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 Status’ principles, - and to take a mobile-first approach to development. -

-
+
+ {visible_how_to_submit && ( + <> +
How to submit a ÐApp
+
+
Submit your ÐApp
+
    +
  1. + Upload a name, url, description, category and image for your + DApp in the next step compulsory. +
    2. +
  2. + Stake the amount of SNT you want to rank your DApp optional. +
    3. +
  3. Hit “submit”.
    4. +
  4. + 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. +
    5. +
+
+
+
Staking
+

+ 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. +

+

+ 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. +

+
+
+
    +
  1. + Staking 10 000 SNT returns a rate of{' '} + 99.5%, so you can withdraw up to{' '} + 9 950 SNT. +
    2. +
  2. + Staking 1 000 000 SNT returns a rate of + 50.99%, so you can withdraw up to{' '} + 509 958 SNT. +
    3. +
+
+
+

+ Furthermore, the operators of{' '} + https://dap.ps reserve the right + to remove any DApp from the UI for reasons including, but not + limited to: +

+
+
+
    +
  1. Malicious code injection
    2. +
  2. + Violation of Status' principles +
    3. +
  3. Lack of usability (especially on mobile)
    4. +
  4. Vote manipulation.
    5. +
+
+
+

+ 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{' '} + Status’ principles, and to take a mobile-first approach + to development. +

+
+ + )} + {visible_terms && }
@@ -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, } diff --git a/src/modules/HowToSubmit/HowToSubmit.reducer.js b/src/modules/HowToSubmit/HowToSubmit.reducer.js index e06b130..d6dc1b6 100644 --- 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) diff --git a/src/modules/TransactionStatus/TransactionStatus.module.scss b/src/modules/TransactionStatus/TransactionStatus.module.scss index 6175d3a..50817f7 100644 --- 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; diff --git a/src/modules/Vote/Vote.jsx b/src/modules/Vote/Vote.jsx index 2a29d54..bef4209 100644 --- 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()} ↑`} )} - {/* {!isUpvote && afterVoteRating !== null && ( + {!isUpvote && afterVoteRating !== null && ( {`${afterVoteRating.toLocaleString()} ↓`} - )} */} + )}
@@ -165,11 +164,13 @@ class Vote extends Component { {`№${afterVoteCategoryPosition} ↑`} )} - {/* {!isUpvote && afterVoteCategoryPosition !== null && afterVoteCategoryPosition !== catPosition ( - - {`№${afterVoteCategoryPosition} ↓`} - - )} */} + {!isUpvote && + afterVoteCategoryPosition !== null && + afterVoteCategoryPosition !== catPosition && ( + + {`№${afterVoteCategoryPosition} ↓`} + + )}
{!isUpvote && ( diff --git a/src/modules/Vote/Vote.reducer.js b/src/modules/Vote/Vote.reducer.js index 823688d..c7436cb 100644 --- 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