Merge pull request #15 from iamonuwa/deployment

Issues killer PR

src/common/components/FeatureDapps/FeatureDapps.module.scss

@@ -25,6 +25,9 @@
   flex-direction: column;
   margin: 0 calculateRem(20) calculateRem(20) calculateRem(20);
   text-decoration: none;
+  @media (min-width: 412px) {
+    min-width: 360px;
+  }
 }
 
 .bannerWrapper {

src/common/components/Modal/Modal.module.scss

@@ -45,6 +45,7 @@
     background: #939ba1;
     cursor: pointer;
     transform: rotate(45deg);
+    z-index: 99;
   }
 }
 

src/common/redux/reducers.js

@@ -6,7 +6,7 @@ import vote from '../../modules/Vote/Vote.reducer'
 import profile from '../../modules/Profile/Profile.reducer'
 import submit from '../../modules/Submit/Submit.reducer'
 import desktopMenu from '../../modules/DesktopMenu/DesktopMenu.reducer'
-import transactionStatus from '../../modules/TransactionStatus/TransactionStatus.recuder'
+import transactionStatus from '../../modules/TransactionStatus/TransactionStatus.reducer'
 import alert from '../../modules/Alert/Alert.reducer'
 import howToSubmit from '../../modules/HowToSubmit/HowToSubmit.reducer'
 import withdraw from '../../modules/Withdraw/Withdraw.reducer'

src/modules/Alert/Alert.container.js

@@ -1,10 +1,12 @@
 import { connect } from 'react-redux'
 import Alert from './Alert'
 import { hideAlertAction } from './Alert.reducer'
+import { hideAction } from '../TransactionStatus/TransactionStatus.reducer'
 
 const mapStateToProps = state => state.alert
 const mapDispatchToProps = dispatch => ({
   hideAlert: () => dispatch(hideAlertAction()),
+  hideTransaction: () => dispatch(hideAction()),
 })
 
 export default connect(

src/modules/Alert/Alert.jsx

@@ -9,13 +9,15 @@ class Alert extends React.Component {
     this.onClickNegative = this.onClickNegative.bind(this)
   }
   onClickPositive() {
-    const { hideAlert, positiveListener } = this.props
+    const { hideAlert, positiveListener, hideTransaction } = this.props
     hideAlert()
+    hideTransaction()
     if (positiveListener !== null) positiveListener()
   }
   onClickNegative() {
-    const { hideAlert, negativeListener } = this.props
+    const { hideAlert, negativeListener, hideTransaction } = this.props
     hideAlert()
+    hideTransaction()
     if (negativeListener !== null) negativeListener()
   }
   render() {

src/modules/HowToSubmit/HowToSubmit.jsx

@@ -37,83 +37,87 @@ class HowToSubmit extends React.Component {
           {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 href="https://status.im/about/">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 href="https://status.im/about/">Status’ principles</a>, and
-                  to take a mobile-first approach to development.
-                </p>
+              <div className={styles.howto}>
+                <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 href="https://status.im/about/">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 href="https://status.im/about/">Status’ principles</a>
+                    , and to take a mobile-first approach to development.
+                  </p>
+                </div>
               </div>
             </>
           )}

src/modules/HowToSubmit/HowToSubmit.module.scss

@@ -9,14 +9,22 @@
 }
 
 .title {
-  line-height: 40px;
   text-align: center;
+  letter-spacing: calculateRem(0.2);
   text-transform: uppercase;
-  font-weight: 600;
-  font-size: 17px;
+  font-weight: 500;
+  font-size: calculateRem(16);
+  padding: calculateRem(10) 0;
+  position: sticky;
+  top: 0;
+  background: #fff;
   border-bottom: 1px solid #f7f7f7;
 }
 
+.title + .howto {
+  padding-top: calculateRem(1);
+}
+
 a {
   color: $link-color;
 }

src/modules/Profile/Profile.jsx

@@ -71,7 +71,9 @@ const ProfileContent = ({
         <div className={styles.ranking}>
           <span className={styles.heading}>Ranking</span>
           <div className={styles.rank}>
-            <div className={styles.rank_position_1}>
+            <div
+              className={[styles.rank_position_1, styles[category]].join(' ')}
+            >
               <span className={styles.rank_position_span}>
                 {categoryPosition}
               </span>

src/modules/Profile/Profile.module.scss

@@ -45,10 +45,6 @@ a {
   cursor: pointer;
 }
 
-.category {
-  margin-bottom: calculateRem(20);
-}
-
 .heading {
   color: $text-color;
   font-size: calculateRem(13);
@@ -64,14 +60,14 @@ a {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: calculateRem(40) auto;
+  margin: calculateRem(40) 0 0 0;
 }
 
 .button {
   border-radius: 20px;
   background-color: #4360df;
   color: #ffffff;
-  margin: calculateRem(16) 0 calculateRem(24) 0;
+  margin: calculateRem(16) 0 calculateRem(16) 0;
   padding: calculateRem(12) calculateRem(32);
 }
 
@@ -98,17 +94,17 @@ a {
 .chat_image {
   width: calculateRem(40);
   height: calculateRem(40);
-  margin-top: calculateRem(20);
+  // margin-top: calculateRem(20);
   border-radius: 20px;
 }
 
 .chat_link {
-  margin: calculateRem(25) calculateRem(10) 0;
+  margin: 0 0 0 calculateRem(10);
 }
 
 .chat_icon {
   margin-left: calculateRem(-10);
-  margin-bottom: calculateRem(10);
+  margin-bottom: calculateRem(20);
 }
 
 .url {
@@ -183,3 +179,35 @@ a {
     }
   }
 }
+
+.EXCHANGES {
+  background: $purple-bg;
+}
+
+.MARKETPLACES {
+  background: $orange-bg;
+}
+
+.OTHER {
+  background: $yellow-bg;
+}
+
+.MEDIA {
+  background: $yellow-bg;
+}
+
+.GAMES {
+  background: $pink-bg;
+}
+
+.COLLECTIBLES {
+  background: $blue-bg;
+}
+
+.SOCIAL_NETWORKS {
+  background: $green-bg;
+}
+
+.UTILITIES {
+  background: $red-bg;
+}

src/modules/Submit/Submit.module.scss

@@ -122,8 +122,9 @@
     }
   }
 
-  input::placeholder {
-    color: $headline-color;
+  input::placeholder,
+  textarea::placeholder {
+    color: #939ba1;
   }
 
   .imgInfo {

src/modules/Submit/Submit.reducer.js

@@ -5,7 +5,7 @@ import {
   checkTransactionStatusAction,
   onStartProgressAction,
   hideAction,
-} from '../TransactionStatus/TransactionStatus.recuder'
+} from '../TransactionStatus/TransactionStatus.reducer'
 import {
   TYPE_SUBMIT,
   TYPE_UPDATE,

src/modules/TransactionStatus/TransactionStatus.container.js

@@ -3,7 +3,7 @@ import TransactionStatus from './TransactionStatus'
 import {
   hideAction,
   checkTransactionStatusAction,
-} from './TransactionStatus.recuder'
+} from './TransactionStatus.reducer'
 
 const mapStateToProps = state => state.transactionStatus
 const mapDispatchToProps = dispatch => ({

src/modules/TransactionStatus/TransactionStatus.reducer.js

@@ -8,7 +8,7 @@ import {
 import { onUpdateDappDataAction } from '../Dapps/Dapps.reducer'
 import { showAlertAction } from '../Alert/Alert.reducer'
 import BlockchainSDK from '../../common/blockchain'
-import DappModel from '../../common/data/dapp';
+import DappModel from '../../common/data/dapp'
 
 const HIDE = 'TXS_HIDE'
 const ON_START_PROGRESS = 'TXS_ON_START_PROGRESS'

src/modules/Vote/Vote.jsx

@@ -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 && (

src/modules/Vote/Vote.module.scss

@@ -53,11 +53,6 @@
 
 .tabs button:first-child {
   margin-right: 32px;
-  color: #44d058;
-}
-
-.tabs button:last-child {
-  color: #ff2d55;
 }
 
 .tabs button:after {

src/modules/Vote/Vote.reducer.js

@@ -7,7 +7,7 @@ import {
   onStartProgressAction,
   onReceiveTransactionInfoAction,
   checkTransactionStatusAction,
-} from '../TransactionStatus/TransactionStatus.recuder'
+} from '../TransactionStatus/TransactionStatus.reducer'
 import {
   TYPE_UPVOTE,
   TYPE_DOWNVOTE,

src/modules/Withdraw/Withdraw.reducer.js

@@ -5,7 +5,7 @@ import {
   checkTransactionStatusAction,
   onStartProgressAction,
   hideAction,
-} from '../TransactionStatus/TransactionStatus.recuder'
+} from '../TransactionStatus/TransactionStatus.reducer'
 import { TYPE_WITHDRAW } from '../TransactionStatus/TransactionStatus.utilities'
 import { showAlertAction } from '../Alert/Alert.reducer'