data model

src/common/components/DappList/DappList.jsx

@@ -9,7 +9,7 @@ const DappList = props => {
     dapps &&
     dapps.map((dapp, i) => (
       <DappListItem
-        {...dapp}
+        dapp={dapp}
         key={dapp.name}
         isRanked={isRanked}
         position={i + 1}

src/common/components/DappListItem/DappListItem.container.js

@@ -3,16 +3,20 @@ import DappListItem from './DappListItem'
 import {
   showDownVoteAction,
   showUpVoteAction,
+  switchToUpvoteAction,
+  switchToUpDownvoteAction,
 } from '../../../modules/Vote/Vote.reducer'
 
 const mapDispatchToProps = dispatch => ({
-  onClickUpVote: () => {
+  onClickUpVote: dapp => {
     window.location.hash = 'vote'
-    dispatch(showUpVoteAction())
+    dispatch(switchToUpvoteAction())
+    dispatch(showUpVoteAction(dapp))
   },
-  onClickDownVote: () => {
+  onClickDownVote: dapp => {
     window.location.hash = 'vote'
-    dispatch(showDownVoteAction())
+    dispatch(switchToUpDownvoteAction())
+    dispatch(showDownVoteAction(dapp))
   },
 })
 

src/common/components/DappListItem/DappListItem.jsx

@@ -10,17 +10,24 @@ import downvoteArrowIcon from '../../assets/images/downvote-arrow.svg'
 
 const DappListItem = props => {
   const {
-    name,
+    dapp,
-    description,
+    onClickUpVote,
-    url,
+    onClickDownVote,
-    image,
     isRanked,
     position,
     showActionButtons,
-    onClickUpVote,
-    onClickDownVote,
   } = props
 
+  const { name, description, url, image } = dapp
+
+  const handleUpVote = () => {
+    onClickUpVote(dapp)
+  }
+
+  const handleDownVote = () => {
+    onClickDownVote(dapp)
+  }
+
   return (
     <div className={isRanked ? styles.rankedListItem : styles.listItem}>
       {isRanked && <div className={styles.position}>{position}</div>}
@@ -43,13 +50,13 @@ const DappListItem = props => {
           <p className={styles.actionArea}>
             <span className={styles.sntAmount}>
               <img src={sntIcon} alt="SNT" width="16" height="16" />
-              12,345
+              {dapp.sntValue}
             </span>
-            <span className={styles.vote} onClick={onClickUpVote}>
+            <span className={styles.vote} onClick={handleUpVote}>
               <img src={upvoteArrowIcon} alt="" />
               Upvote
             </span>
-            <span className={styles.vote} onClick={onClickDownVote}>
+            <span className={styles.vote} onClick={handleDownVote}>
               <img src={downvoteArrowIcon} alt="" />
               Downvote
             </span>
@@ -65,9 +72,13 @@ DappListItem.defaultProps = {
   showActionButtons: false,
 }
 
-DappListItem.propTypes = Object.assign({}, DappModel, {
+DappListItem.propTypes = {
+  dapp: PropTypes.shape(DappModel).isRequired,
+  isRanked: PropTypes.bool,
+  showActionButtons: PropTypes.bool,
+  position: PropTypes.number.isRequired,
   onClickUpVote: PropTypes.func.isRequired,
   onClickDownVote: PropTypes.func.isRequired,
-})
+}
 
 export default DappListItem

src/common/components/Modal/Modal.jsx

@@ -32,6 +32,7 @@ Modal.defaultProps = {
   modalClassName: '',
   windowClassName: '',
   contentClassName: '',
+  children: null,
 }
 
 Modal.propTypes = {
@@ -42,7 +43,7 @@ Modal.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
-  ]).isRequired,
+  ]),
   onClickClose: PropTypes.func.isRequired,
 }
 

src/common/data/dapps.js

@@ -8,6 +8,8 @@ const Dapps = [
     description: 'Meet the future of trading',
     category: Categories.EXCHANGES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Bancor',
@@ -16,6 +18,8 @@ const Dapps = [
     description: 'Bancor is a decentralized liquidity network',
     category: Categories.EXCHANGES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Kyber',
@@ -25,6 +29,8 @@ const Dapps = [
     image: '/images/dapps/kyber.png',
     category: Categories.EXCHANGES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Uniswap',
@@ -34,6 +40,8 @@ const Dapps = [
     image: '/images/dapps/uniswap.png',
     category: Categories.EXCHANGES,
     dateAdded: '2019-04-23',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'DAI by MakerDao',
@@ -42,6 +50,8 @@ const Dapps = [
     image: '/images/dapps/dai.png',
     category: Categories.EXCHANGES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Augur',
@@ -51,6 +61,8 @@ const Dapps = [
     image: '/images/dapps/augur.svg',
     category: Categories.EXCHANGES,
     dateAdded: '2019-04-11',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'LocalEthereum',
@@ -59,6 +71,8 @@ const Dapps = [
     image: '/images/dapps/local-ethereum.png',
     category: Categories.EXCHANGES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Eth2phone',
@@ -67,6 +81,8 @@ const Dapps = [
     image: '/images/dapps/eth2phone.png',
     category: Categories.EXCHANGES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'DDEX',
@@ -76,6 +92,8 @@ const Dapps = [
     image: '/images/dapps/ddex.png',
     category: Categories.EXCHANGES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Nuo',
@@ -85,6 +103,8 @@ const Dapps = [
     image: '/images/dapps/nuo.png',
     category: Categories.EXCHANGES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'EasyTrade',
@@ -93,6 +113,8 @@ const Dapps = [
     image: '/images/dapps/easytrade.png',
     category: Categories.EXCHANGES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'slow.trade',
@@ -102,6 +124,8 @@ const Dapps = [
     image: '/images/dapps/slowtrade.png',
     category: Categories.EXCHANGES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Expo Trading',
@@ -110,6 +134,8 @@ const Dapps = [
     image: '/images/dapps/expotrading.png',
     category: Categories.EXCHANGES,
     dateAdded: '2019-04-11',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'blockimmo',
@@ -119,6 +145,8 @@ const Dapps = [
     image: '/images/dapps/blockimmo.png',
     category: Categories.MARKETPLACES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'CryptoCribs',
@@ -127,6 +155,8 @@ const Dapps = [
     image: '/images/dapps/cryptocribs.png',
     category: Categories.MARKETPLACES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Ethlance',
@@ -136,6 +166,8 @@ const Dapps = [
     image: '/images/dapps/ethlance.png',
     category: Categories.MARKETPLACES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'OpenSea',
@@ -144,6 +176,8 @@ const Dapps = [
     image: '/images/dapps/opensea.png',
     category: Categories.MARKETPLACES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'KnownOrigin',
@@ -152,6 +186,8 @@ const Dapps = [
     image: '/images/dapps/knownorigin.png',
     category: Categories.MARKETPLACES,
     dateAdded: '2019-04-11',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'dBay',
@@ -160,6 +196,8 @@ const Dapps = [
     image: '/images/dapps/dBay.png',
     category: Categories.MARKETPLACES,
     dateAdded: '2019-04-23',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Name Bazaar',
@@ -168,6 +206,8 @@ const Dapps = [
     image: '/images/dapps/name-bazaar.png',
     category: Categories.MARKETPLACES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'The Bounties Network',
@@ -176,6 +216,8 @@ const Dapps = [
     image: '/images/dapps/bounties-network.png',
     category: Categories.MARKETPLACES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Emoon',
@@ -185,6 +227,8 @@ const Dapps = [
     image: '/images/dapps/emoon.png',
     category: Categories.MARKETPLACES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Astro Ledger',
@@ -193,6 +237,8 @@ const Dapps = [
     image: '/images/dapps/astroledger.svg',
     category: Categories.MARKETPLACES,
     dateAdded: '2019-04-11',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'SuperRare',
@@ -202,6 +248,8 @@ const Dapps = [
     image: '/images/dapps/superrare.png',
     category: Categories.MARKETPLACES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'CryptoCare',
@@ -211,6 +259,8 @@ const Dapps = [
     image: '/images/dapps/cryptocare.jpg',
     category: Categories.COLLECTIBLES,
     dateAdded: '2019-04-11',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'CryptoKitties',
@@ -219,6 +269,8 @@ const Dapps = [
     image: '/images/dapps/cryptokitties.png',
     category: Categories.COLLECTIBLES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Cryptographics',
@@ -228,6 +280,8 @@ const Dapps = [
     image: '/images/dapps/cryptographics.png',
     category: Categories.COLLECTIBLES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'CryptoPunks',
@@ -236,6 +290,8 @@ const Dapps = [
     image: '/images/dapps/cryptopunks.png',
     category: Categories.COLLECTIBLES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Crypto Takeovers',
@@ -244,6 +300,8 @@ const Dapps = [
     image: '/images/dapps/cryptotakeovers.png',
     category: Categories.GAMES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'CryptoFighters',
@@ -252,6 +310,8 @@ const Dapps = [
     image: '/images/dapps/cryptofighters.png',
     category: Categories.GAMES,
     dateAdded: '2019-04-11',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Decentraland',
@@ -261,6 +321,8 @@ const Dapps = [
     image: '/images/dapps/decentraland.png',
     category: Categories.GAMES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Dragonereum',
@@ -269,6 +331,8 @@ const Dapps = [
     image: '/images/dapps/dragonereum.png',
     category: Categories.GAMES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Etherbots',
@@ -277,6 +341,8 @@ const Dapps = [
     image: '/images/dapps/etherbots.png',
     category: Categories.GAMES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Etheremon',
@@ -285,6 +351,8 @@ const Dapps = [
     image: '/images/dapps/etheremon.png',
     category: Categories.GAMES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'CryptoStrikers',
@@ -293,6 +361,8 @@ const Dapps = [
     image: '/images/dapps/cryptostrikers.png',
     category: Categories.GAMES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   // {
   //   name: 'FairHouse',
@@ -301,6 +371,8 @@ const Dapps = [
   //   image: '/images/dapps/fairhouse.png',
   //   category: Categories.GAMES,
   //   dateAdded: '2019-04-11',
+  //   sntValue: 12345,
+  //   categoryPosition: 2,
   // },
   {
     name: 'Cent',
@@ -309,6 +381,8 @@ const Dapps = [
     image: '/images/dapps/cent.png',
     category: Categories.SOCIAL_NETWORKS,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Kickback',
@@ -318,6 +392,8 @@ const Dapps = [
     image: '/images/dapps/kickback.png',
     category: Categories.SOCIAL_NETWORKS,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Peepeth',
@@ -326,6 +402,8 @@ const Dapps = [
     image: '/images/dapps/peepeth.png',
     category: Categories.SOCIAL_NETWORKS,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'livepeer.tv',
@@ -334,6 +412,8 @@ const Dapps = [
     image: '/images/dapps/livepeer.png',
     category: Categories.OTHER,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Aragon',
@@ -342,6 +422,8 @@ const Dapps = [
     image: '/images/dapps/aragon.png',
     category: Categories.UTILITIES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Compound Finance',
@@ -351,6 +433,8 @@ const Dapps = [
     image: '/images/dapps/compoundfinance.png',
     category: Categories.UTILITIES,
     dateAdded: '2019-04-11',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'InstaDApp',
@@ -359,6 +443,8 @@ const Dapps = [
     image: '/images/dapps/instadapp.jpg',
     category: Categories.UTILITIES,
     dateAdded: '2019-04-11',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Livepeer',
@@ -367,6 +453,8 @@ const Dapps = [
     image: '/images/dapps/livepeer.png',
     category: Categories.UTILITIES,
     dateAdded: '2019-04-11',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'ETHLend',
@@ -375,6 +463,8 @@ const Dapps = [
     image: '/images/dapps/ethlend.png',
     category: Categories.UTILITIES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Civitas',
@@ -383,6 +473,8 @@ const Dapps = [
     image: '/images/dapps/civitas.png',
     category: Categories.UTILITIES,
     dateAdded: '2019-04-11',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: '3Box',
@@ -391,6 +483,8 @@ const Dapps = [
     image: '/images/dapps/3Box.png',
     category: Categories.UTILITIES,
     dateAdded: '2019-04-11',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Hexel',
@@ -399,6 +493,8 @@ const Dapps = [
     image: '/images/dapps/hexel.png',
     category: Categories.UTILITIES,
     dateAdded: '2019-04-11',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'Smartz',
@@ -407,6 +503,8 @@ const Dapps = [
     image: '/images/dapps/smartz.png',
     category: Categories.UTILITIES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
   {
     name: 'SNT Voting DApp',
@@ -416,6 +514,8 @@ const Dapps = [
     image: '/images/dapps/snt-voting.png',
     category: Categories.UTILITIES,
     dateAdded: '2019-04-05',
+    sntValue: 12345,
+    categoryPosition: 2,
   },
 ]
 

src/common/data/vote.js

@@ -1,5 +1,8 @@
 const vote = {
   visible: false,
+  dapp: null,
+  isUpvote: false,
+  sntValue: '0',
 }
 
 export default vote

src/common/utils/models.js

@@ -7,9 +7,8 @@ export const DappModel = {
   description: PropTypes.string,
   category: PropTypes.string,
   dateAdded: PropTypes.string,
-  isRanked: PropTypes.bool,
+  sntValue: PropTypes.number,
-  position: PropTypes.number,
+  categoryPosition: PropTypes.number,
-  showActionButtons: PropTypes.bool,
 }
 
 export const DappListModel = PropTypes.arrayOf(PropTypes.shape(DappModel))

src/modules/RecentlyAdded/RecentlyAdded.selector.js

@@ -11,7 +11,7 @@ const recentDapps = createSelector(
       return (
         moment(dapp.dateAdded).toISOString() >
         moment()
-          .subtract(21, 'days')
+          .subtract(31, 'days')
           .utc()
           .toISOString()
       )

src/modules/Vote/Vote.container.js

@@ -1,7 +1,12 @@
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import Vote from './Vote'
-import { closeVoteAction } from './Vote.reducer'
+import {
+  closeVoteAction,
+  switchToUpvoteAction,
+  switchToUpDownvoteAction,
+  onInputSntValueAction,
+} from './Vote.reducer'
 
 const mapStateToProps = state => state.vote
 const mapDispatchToProps = dispatch => ({
@@ -9,6 +14,9 @@ const mapDispatchToProps = dispatch => ({
     window.history.back()
     dispatch(closeVoteAction())
   },
+  onClickUpvote: () => dispatch(switchToUpvoteAction()),
+  onClickDownvote: () => dispatch(switchToUpDownvoteAction()),
+  onInputSntValue: sntValue => dispatch(onInputSntValueAction(sntValue)),
 })
 
 export default withRouter(

src/modules/Vote/Vote.jsx

@@ -7,6 +7,7 @@ import CategoriesUtils from '../Categories/Categories.utils'
 import Categories from '../../common/utils/categories'
 import icon from '../../common/assets/images/icon.svg'
 import Modal from '../../common/components/Modal'
+import { DappModel } from '../../common/utils/models'
 
 const getCategoryName = category =>
   Categories.find(x => x.key === category).value
@@ -14,46 +15,36 @@ const getCategoryName = category =>
 class Vote extends Component {
   constructor(props) {
     super(props)
-    this.state = {
-      isUpvote: true,
-      sntValue: 0,
-    }
-    this.onClickTab = this.onClickTab.bind(this)
     this.handleChange = this.handleChange.bind(this)
   }
 
-  onClickTab(showUpvote) {
-    return () => {
-      this.setState({ isUpvote: showUpvote })
-    }
-  }
-
   handleChange(e) {
     const { value } = e.target
     if (value !== '' && /^[1-9][0-9]*$/.test(value) === false) return
+
     if (parseInt(value, 10) > 1571296) return
 
-    this.setState({ sntValue: value })
+    const { onInputSntValue } = this.props
+    onInputSntValue(value)
   }
 
   render() {
-    const { isUpvote, sntValue } = this.state
+    const {
-    const { visible, onClickClose } = this.props
+      visible,
+      onClickClose,
+      isUpvote,
+      dapp,
+      onClickUpvote,
+      onClickDownvote,
+      sntValue,
+    } = this.props
 
-    // TODO: extract these to props
+    if (dapp === null) {
-
+      return <Modal visible={false} onClickClose={onClickClose} />
-    const dapp = {
-      name: 'Kyber',
-      url: 'https://web3.kyber.network',
-      description:
-        'On-chain, instant and liquid platform for exchange and payment service',
-      image: '/images/dapps/kyber.png',
-      category: 'EXCHANGES',
-      dateAdded: null,
     }
 
-    const currentSNTamount = 23456
+    const currentSNTamount = dapp.sntValue
-    const categoryPosition = 2
+    const catPosition = dapp.categoryPosition
     const upvoteSNTcost = currentSNTamount + parseInt(sntValue, 10)
     const downvoteSNTcost = 3244
 
@@ -68,14 +59,14 @@ class Vote extends Component {
           <button
             className={isUpvote ? styles.active : ''}
             type="button"
-            onClick={this.onClickTab(true)}
+            onClick={onClickUpvote}
           >
             ↑ UPVOTE
           </button>
           <button
             className={!isUpvote ? styles.active : ''}
             type="button"
-            onClick={this.onClickTab(false)}
+            onClick={onClickDownvote}
           >
             ↓ DOWNVOTE
           </button>
@@ -116,11 +107,11 @@ class Vote extends Component {
                 width="24"
                 height="24"
               />
-              {`${getCategoryName(dapp.category)} №${categoryPosition}`}
+              {`${getCategoryName(dapp.category)} №${catPosition}`}
             </span>
             {isUpvote && upvoteSNTcost > currentSNTamount && (
               <span className={styles.greenBadge}>
-                {`№${categoryPosition - 1} ↑`}
+                {`№${catPosition - 1} ↑`}
               </span>
             )}
           </div>
@@ -136,7 +127,7 @@ class Vote extends Component {
               type="text"
               value={sntValue}
               onChange={this.handleChange}
-              style={{ width: `${19 * sntValue.length}px` }}
+              style={{ width: `${19 * Math.max(1, sntValue.length)}px` }}
             />
           </div>
         )}
@@ -161,7 +152,10 @@ class Vote extends Component {
               </a>
             </p>
           )}
-          <button type="submit" disabled={!sntValue}>
+          <button
+            type="submit"
+            disabled={(!sntValue || sntValue === '0') && isUpvote}
+          >
             {isUpvote ? 'Upvote' : 'Downvote'}
           </button>
         </div>
@@ -170,9 +164,19 @@ class Vote extends Component {
   }
 }
 
+Vote.defaultProps = {
+  dapp: null,
+}
+
 Vote.propTypes = {
+  dapp: PropTypes.shape(DappModel),
+  isUpvote: PropTypes.bool.isRequired,
   visible: PropTypes.bool.isRequired,
+  sntValue: PropTypes.string.isRequired,
   onClickClose: PropTypes.func.isRequired,
+  onClickUpvote: PropTypes.func.isRequired,
+  onClickDownvote: PropTypes.func.isRequired,
+  onInputSntValue: PropTypes.func.isRequired,
 }
 
 export default Vote

src/modules/Vote/Vote.module.scss

@@ -43,13 +43,17 @@
   display: inline-flex;
   align-items: center;
   cursor: pointer;
+  outline: none;
+
+  transition-property: color;
+  transition-duration: 0.4s;
 }
 
 .tabs button:first-child {
   margin-right: 32px;
 }
 
-.tabs button.active:after {
+.tabs button:after {
   display: block;
   clear: both;
   content: '';
@@ -58,14 +62,21 @@
   right: 0;
   bottom: 0;
   width: 24px;
-  border-bottom: 2px solid $link-color;
+  border-bottom: 2px solid transparent;
   margin: 0 auto 0 auto;
+
+  transition-property: border-color;
+  transition-duration: 0.4s;
 }
 
 .tabs button.active {
   color: $link-color;
 }
 
+.tabs button.active:after {
+  border-bottom-color: $link-color;
+}
+
 .dapp {
   height: 48px;
   display: flex;

src/modules/Vote/Vote.reducer.js

@@ -4,14 +4,27 @@ import reducerUtil from '../../common/utils/reducer'
 const SHOW_UP_VOTE = 'SHOW_UP_VOTE'
 const SHOW_DOWN_VOTE = 'SHOW_DOWN_VOTE'
 const CLOSE_VOTE = 'CLOSE_VOTE'
+const SWITCH_TO_UPVOTE = 'SWITCH_TO_UPVOTE'
+const SWITCH_TO_DOWNVOTE = 'SWITCH_TO_DOWNVOTE'
+const ON_INPUT_SNT_VALUE = 'ON_INPUT_SNT_VALUE'
 
-export const showUpVoteAction = () => ({
+export const showUpVoteAction = dapp => ({
   type: SHOW_UP_VOTE,
+  payload: dapp,
+})
+
+export const showDownVoteAction = dapp => ({
+  type: SHOW_DOWN_VOTE,
+  payload: dapp,
+})
+
+export const switchToUpvoteAction = () => ({
+  type: SWITCH_TO_UPVOTE,
   payload: null,
 })
 
-export const showDownVoteAction = () => ({
+export const switchToUpDownvoteAction = () => ({
-  type: SHOW_DOWN_VOTE,
+  type: SWITCH_TO_DOWNVOTE,
   payload: null,
 })
 
@@ -20,15 +33,24 @@ export const closeVoteAction = () => ({
   payload: null,
 })
 
-const showUpVote = state => {
+export const onInputSntValueAction = sntValue => ({
+  type: ON_INPUT_SNT_VALUE,
+  payload: sntValue,
+})
+
+const showUpVote = (state, dapp) => {
   return Object.assign({}, state, {
     visible: true,
+    dapp,
+    sntValue: '0',
   })
 }
 
-const showDownVote = state => {
+const showDownVote = (state, dapp) => {
   return Object.assign({}, state, {
     visible: true,
+    dapp,
+    sntValue: '0',
   })
 }
 
@@ -38,10 +60,31 @@ const closeVote = state => {
   })
 }
 
+const switchToUpvote = state => {
+  return Object.assign({}, state, {
+    isUpvote: true,
+  })
+}
+
+const switchToDownvote = state => {
+  return Object.assign({}, state, {
+    isUpvote: false,
+  })
+}
+
+const onInputSntValue = (state, sntValue) => {
+  return Object.assign({}, state, {
+    sntValue,
+  })
+}
+
 const map = {
   [SHOW_UP_VOTE]: showUpVote,
   [SHOW_DOWN_VOTE]: showDownVote,
   [CLOSE_VOTE]: closeVote,
+  [SWITCH_TO_UPVOTE]: switchToUpvote,
+  [SWITCH_TO_DOWNVOTE]: switchToDownvote,
+  [ON_INPUT_SNT_VALUE]: onInputSntValue,
 }
 
 export default reducerUtil(map, voteState)