status-im
/
discover-dapps
mirror of https://github.com/status-im/discover-dapps.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

overlaping, downvote & tc before submit

This commit is contained in:
Kamen Stoykov 2019-05-16 22:30:16 +03:00
parent 0a6db07355
commit df750b6dbb
9 changed files with 198 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/common/components/DappListItem/DappListItem.jsx
View File

@ -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,11 +59,12 @@ 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>
<div className={styles.voteTriggers}>
<span className={styles.vote} onClick={handleUpVote}>
<img src={upvoteArrowIcon} alt="" />
Upvote
@ -69,7 +73,8 @@ const DappListItem = props => {
<img src={downvoteArrowIcon} alt="" />
Downvote
</span>
</p>
</div>
</div>
)}
</div>
</div>

29
src/common/components/DappListItem/DappListItem.module.scss
View File

@ -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);
}

3
src/common/data/how-to-submit.js
View File

@ -1,5 +1,6 @@
const howToSubmit = {
visible: false,
visible_how_to_submit: false,
visible_terms: false,
}
export default howToSubmit

6
src/modules/HowToSubmit/HowToSubmit.container.js
View File

@ -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(() => {

83
src/modules/HowToSubmit/HowToSubmit.jsx
View File

@ -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,8 +33,10 @@ class HowToSubmit extends React.Component {
onClickClose={onClickClose}
windowClassName={styles.modalWindow}
>
<div className={styles.cnt}>
<div className={styles.title}>Terms and conditions</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>
@ -31,27 +49,27 @@ class HowToSubmit extends React.Component {
</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.
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.
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.
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}`}>
@ -62,17 +80,18 @@ class HowToSubmit extends React.Component {
<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>
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:
<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}`}>
@ -87,20 +106,24 @@ class HowToSubmit extends React.Component {
</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.
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,
}

20
src/modules/HowToSubmit/HowToSubmit.reducer.js
View File

@ -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)

3
src/modules/TransactionStatus/TransactionStatus.module.scss
View File

@ -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;

13
src/modules/Vote/Vote.jsx
View File

@ -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 (
{!isUpvote &&
afterVoteCategoryPosition !== null &&
afterVoteCategoryPosition !== catPosition && (
<span className={styles.redBadge}>
{`№${afterVoteCategoryPosition} ↓`}
</span>
)} */}
)}
</div>
</div>
{!isUpvote && (

4
src/modules/Vote/Vote.reducer.js
View File

@ -111,15 +111,17 @@ export const updateAfterVotingValuesAction = rating => ({
export const fetchVoteRatingAction = (dapp, isUpvote, sntValue) => {
return async (dispatch, getState) => {
let rating
if (isUpvote === true) {
try {
rating = await BlockchainSDK.DiscoverService.upVoteEffect(
dapp.id,
sntValue,
)
rating = parseInt(rating, 10)
} catch (e) {
return
}
rating = parseInt(rating, 10)
} else rating = parseInt(dapp.sntValue * 0.99, 10)
const state = getState()
const voteState = state.vote