mirror of https://github.com/dap-ps/discover.git
When editing SNT value for 'Upvote' nothing happens if submit it via keyboard #5
This commit is contained in:
Onuwa Nnachi Isaac
parent
c2e8266b57
commit
d5f3cde983
|
|
@ -106,132 +106,137 @@ class Vote extends Component {
|
|||
>
|
||||
{!learnMoreUpVote && !learnMoreDownVote && (
|
||||
<>
|
||||
<div className={styles.tabs}>
|
||||
<button
|
||||
className={isUpvote ? styles.active : ''}
|
||||
type="button"
|
||||
onClick={this.onClickUpvote}
|
||||
>
|
||||
↑ UPVOTE
|
||||
</button>
|
||||
<button
|
||||
className={!isUpvote ? styles.active : ''}
|
||||
type="button"
|
||||
onClick={this.onClickDownvote}
|
||||
>
|
||||
↓ DOWNVOTE
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.dapp}>
|
||||
<ReactImageFallback
|
||||
className={styles.image}
|
||||
src={dapp.image}
|
||||
fallbackImage={icon}
|
||||
alt="App icon"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
{dapp.name}
|
||||
</div>
|
||||
<div className={styles.items}>
|
||||
<div className={styles.itemRow}>
|
||||
<span className={styles.item}>
|
||||
<img src={sntIcon} alt="SNT" width="24" height="24" />
|
||||
{currentSNTamount.toLocaleString()}
|
||||
</span>
|
||||
{isUpvote &&
|
||||
sntValue > 0 &&
|
||||
afterVoteRating !== null &&
|
||||
afterVoteRating > 0 && (
|
||||
<span className={styles.greenBadge}>
|
||||
{`${afterVoteRating.toLocaleString()} ↑`}
|
||||
</span>
|
||||
)}
|
||||
{!isUpvote &&
|
||||
sntValue > 0 &&
|
||||
afterVoteRating !== null &&
|
||||
afterVoteRating > 0 && (
|
||||
<span className={styles.redBadge}>
|
||||
{`${afterVoteRating.toLocaleString()} ↓`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.itemRow}>
|
||||
<span className={styles.item}>
|
||||
<img
|
||||
src={CategoriesUtils(dapp.category)}
|
||||
alt={getCategoryName(dapp.category)}
|
||||
width="24"
|
||||
height="24"
|
||||
/>
|
||||
{`${getCategoryName(dapp.category)} №${catPosition}`}
|
||||
</span>
|
||||
{isUpvote &&
|
||||
sntValue > 0 &&
|
||||
afterVoteCategoryPosition !== null &&
|
||||
afterVoteCategoryPosition !== catPosition && (
|
||||
<span className={styles.greenBadge}>
|
||||
{`№${afterVoteCategoryPosition} ↑`}
|
||||
</span>
|
||||
)}
|
||||
{!isUpvote &&
|
||||
sntValue > 0 &&
|
||||
afterVoteCategoryPosition !== null &&
|
||||
afterVoteCategoryPosition !== catPosition && (
|
||||
<span className={styles.redBadge}>
|
||||
{`№${afterVoteCategoryPosition} ↓`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{!isUpvote && (
|
||||
<div
|
||||
className={styles.inputArea}
|
||||
// style={{ opacity: sntValue !== '0' ? 1 : 0 }}
|
||||
<form onSubmit={this.onClickVote}>
|
||||
<div className={styles.tabs}>
|
||||
<button
|
||||
className={isUpvote ? styles.active : ''}
|
||||
type="button"
|
||||
onClick={this.onClickUpvote}
|
||||
>
|
||||
<span>{sntValue}</span>
|
||||
</div>
|
||||
)}
|
||||
{isUpvote && (
|
||||
<div
|
||||
className={`${styles.inputArea} ${styles.inputAreaBorder}`}
|
||||
↑ UPVOTE
|
||||
</button>
|
||||
<button
|
||||
className={!isUpvote ? styles.active : ''}
|
||||
type="button"
|
||||
onClick={this.onClickDownvote}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={sntValue}
|
||||
onChange={this.handleChange}
|
||||
placeholder="0"
|
||||
style={{ width: `${21 * Math.max(1, sntValue.length)}px` }}
|
||||
↓ DOWNVOTE
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.dapp}>
|
||||
<ReactImageFallback
|
||||
className={styles.image}
|
||||
src={dapp.image}
|
||||
fallbackImage={icon}
|
||||
alt="App icon"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
{dapp.name}
|
||||
</div>
|
||||
)}
|
||||
{isUpvote && (
|
||||
<p className={styles.disclaimer}>
|
||||
SNT you spend to upvote is locked in the contract and
|
||||
contributes directly to {dapp.name}'s ranking.{' '}
|
||||
<a onClick={onClickLearnMoreUpVote}>Learn more↗</a>
|
||||
</p>
|
||||
)}
|
||||
{!isUpvote && (
|
||||
<p className={styles.disclaimer}>
|
||||
SNT you spend to downvote goes directly back to {dapp.name}.
|
||||
Downvoting moves their DApp down by 1% of the current ranking.
|
||||
The cost is fixed by our unique bonded curve.{' '}
|
||||
<a onClick={onClickLearnMoreDownVote}>Learn more↗</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.items}>
|
||||
<div className={styles.itemRow}>
|
||||
<span className={styles.item}>
|
||||
<img src={sntIcon} alt="SNT" width="24" height="24" />
|
||||
{currentSNTamount.toLocaleString()}
|
||||
</span>
|
||||
{isUpvote &&
|
||||
sntValue > 0 &&
|
||||
afterVoteRating !== null &&
|
||||
afterVoteRating > 0 && (
|
||||
<span className={styles.greenBadge}>
|
||||
{`${afterVoteRating.toLocaleString()} ↑`}
|
||||
</span>
|
||||
)}
|
||||
{!isUpvote &&
|
||||
sntValue > 0 &&
|
||||
afterVoteRating !== null &&
|
||||
afterVoteRating > 0 && (
|
||||
<span className={styles.redBadge}>
|
||||
{`${afterVoteRating.toLocaleString()} ↓`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.itemRow}>
|
||||
<span className={styles.item}>
|
||||
<img
|
||||
src={CategoriesUtils(dapp.category)}
|
||||
alt={getCategoryName(dapp.category)}
|
||||
width="24"
|
||||
height="24"
|
||||
/>
|
||||
{`${getCategoryName(dapp.category)} №${catPosition}`}
|
||||
</span>
|
||||
{isUpvote &&
|
||||
sntValue > 0 &&
|
||||
afterVoteCategoryPosition !== null &&
|
||||
afterVoteCategoryPosition !== catPosition && (
|
||||
<span className={styles.greenBadge}>
|
||||
{`№${afterVoteCategoryPosition} ↑`}
|
||||
</span>
|
||||
)}
|
||||
{!isUpvote &&
|
||||
sntValue > 0 &&
|
||||
afterVoteCategoryPosition !== null &&
|
||||
afterVoteCategoryPosition !== catPosition && (
|
||||
<span className={styles.redBadge}>
|
||||
{`№${afterVoteCategoryPosition} ↓`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{!isUpvote && (
|
||||
<div
|
||||
className={styles.inputArea}
|
||||
// style={{ opacity: sntValue !== '0' ? 1 : 0 }}
|
||||
>
|
||||
<span>{sntValue}</span>
|
||||
</div>
|
||||
)}
|
||||
{isUpvote && (
|
||||
<div
|
||||
className={`${styles.inputArea} ${styles.inputAreaBorder}`}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={sntValue}
|
||||
onChange={this.handleChange}
|
||||
onKeyDown={this.handleDown}
|
||||
placeholder="0"
|
||||
style={{
|
||||
width: `${21 * Math.max(1, sntValue.length)}px`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{isUpvote && (
|
||||
<p className={styles.disclaimer}>
|
||||
SNT you spend to upvote is locked in the contract and
|
||||
contributes directly to {dapp.name}'s ranking.{' '}
|
||||
<a onClick={onClickLearnMoreUpVote}>Learn more↗</a>
|
||||
</p>
|
||||
)}
|
||||
{!isUpvote && (
|
||||
<p className={styles.disclaimer}>
|
||||
SNT you spend to downvote goes directly back to {dapp.name}.
|
||||
Downvoting moves their DApp down by 1% of the current
|
||||
ranking. The cost is fixed by our unique bonded curve.{' '}
|
||||
<a onClick={onClickLearnMoreDownVote}>Learn more↗</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.footer}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={(!sntValue || sntValue === '0') && isUpvote}
|
||||
onClick={this.onClickVote}
|
||||
>
|
||||
{isUpvote ? 'Upvote' : 'Downvote'}
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles.footer}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={(!sntValue || sntValue === '0') && isUpvote}
|
||||
onClick={this.onClickVote}
|
||||
>
|
||||
{isUpvote ? 'Upvote' : 'Downvote'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
{learnMoreUpVote && (
|
||||
|
|
|
|||
Loading…
Reference in New Issue