(add) new ballot form menu components

src/assets/images/BallotInfoContainer/info.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="18">
+    <path fill="#333" fill-rule="evenodd" d="M9 18H1a1 1 0 0 1 0-2h3V6H1a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v11h3a1 1 0 0 1 0 2zM5 2H4a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2z"/>
+</svg>

src/assets/images/BallotInfoContainer/min.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#333" fill-rule="evenodd" d="M17 18h-6a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6h-4v4h4v-4zm1-4h-6a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6h-4v4h4V2zM7 18H1a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6H2v4h4v-4zm.728-8.514l-.118.118-.127.128h-.001l-.881.882-.78.779c-.023.03-.034.066-.062.093l-.805.805a.86.86 0 0 1-.222.441c-.2.2-.471.269-.732.237a.869.869 0 0 1-.732-.237.86.86 0 0 1-.222-.441l-.56-.559-.127-.128-.118-.118-1-1a.88.88 0 1 1 1.245-1.245l1.246 1.245.268.268.175-.175c.023-.03.034-.065.062-.093l1.246-1.245.754-.755 1.246-1.245a.88.88 0 1 1 1.245 1.245l-1 1z"/>
+</svg>

src/assets/images/NewBallotMenuInfo/icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="18">
+    <path fill="#333" fill-rule="evenodd" d="M9 18H1a1 1 0 0 1 0-2h3V6H1a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v11h3a1 1 0 0 1 0 2zM5 2H4a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2z"/>
+</svg>

src/assets/images/icons/icon-add-sokol.svg

@@ -1,11 +0,0 @@
-<svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="14"
-    height="14"
->
-    <path
-        fill="#6ac9b9"
-        fill-rule="evenodd"
-        d="M13 8H8v5a1 1 0 0 1-2 0V8H1a1 1 0 0 1 0-2h5V1a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"
-    />
-</svg>

src/assets/stylesheets/components/_BallotInfoContainer.scss

@@ -36,12 +36,12 @@
     }
 
     &#{ & }-minimum {
-        background-image: url('#{ $base-images-path }/icons/icon-min.svg');
+        background-image: url('#{ $base-images-path }/BallotInfoContainer/min.svg');
         background-size: 18px 18px;
     }
 
     &#{ & }-details {
-        background-image: url('#{ $base-images-path }/icons/icon-info.svg');
+        background-image: url('#{ $base-images-path }/BallotInfoContainer/info.svg');
         background-size: 10px 18px;
         position: relative;
     }

src/assets/stylesheets/components/_NewBallot.scss

@@ -0,0 +1,44 @@
+.new-NewBallot {
+    @include content-layout-width();
+}
+
+.new-NewBallot_Form {
+    background-color: #fff;
+    border-radius: 6px;
+    border: 1px solid $base-border-color;
+    display: block;
+    margin-bottom: 30px;
+    overflow: hidden;
+    transition: 0.15s box-shadow, 0.15s -webkit-box-shadow;
+
+    @media (min-width: $breakpoint-md) {
+        display: flex;
+    }
+}
+
+.new-NewBallot_MenuContainer {
+    background-color: #f8f8f8;
+    border-bottom: 1px solid $base-border-color;
+    box-sizing: border-box;
+    padding-bottom: 30px;
+    padding-top: 0;
+    width: 100%;
+
+    @media (min-width: $breakpoint-md) {
+        border-bottom: none;
+        min-width: 300px;
+        width: 300px;
+    }
+}
+
+.new-NewBallot_FormContent {
+    box-sizing: border-box;
+    padding-bottom: 30px;
+    padding-left: 30px;
+    padding-right: 30px;
+    padding-top: 30px;
+
+    @media (min-width: $breakpoint-md) {
+        border-left: 1px solid $base-border-color;
+    }
+}

src/assets/stylesheets/components/_NewBallotMenu.scss

@@ -0,0 +1,58 @@
+.mn-NewBallotMenu {
+    background-color: #fff;
+    border-bottom: 1px solid $base-border-color;
+    list-style: none;
+    margin: 0;
+    padding: 30px;
+}
+
+.mn-NewBallotMenu_Item {
+    color: #333;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 30px;
+    margin-bottom: 10px;
+    position: relative;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    &::before {
+        background-color: transparent;
+        border-bottom-right-radius: 5px;
+        border-top-right-radius: 5px;
+        content: '';
+        height: 30px;
+        left: -30px;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4px;
+    }
+
+    &#{ & }-core#{ & }-active {
+       color: $poa-purple;
+
+        &::before {
+            background-color: $poa-purple;
+        }
+    }
+
+    &#{ & }-sokol#{ & }-active {
+       color: $sokol-cyan;
+
+        &::before {
+            background-color: $sokol-cyan;
+        }
+    }
+
+    &#{ & }-dai#{ & }-active {
+       color: $xdai-orange;
+
+        &::before {
+            background-color: $xdai-orange;
+        }
+    }
+}

src/assets/stylesheets/components/_NewBallotMenuInfo.scss

@@ -0,0 +1,52 @@
+.mn-NewBallotMenuInfo {
+    padding: 30px;
+}
+
+.mn-NewBallotMenuInfo_Title {
+    color: #333;
+    font-size: 16px;
+    font-weight: 400;
+    margin-bottom: 30px;
+    padding-left: 25px;
+    position: relative;
+
+    &::before {
+        background-image: url('#{ $base-images-path }/NewBallotMenuInfo/icon.svg');
+        background-position: 50% 50%;
+        background-repeat: no-repeat;
+        background-size: 10px 18px;
+        content: '';
+        height: 32px;
+        left: 0;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 10px;
+    }
+}
+
+.mn-NewBallotMenuInfo_List {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.mn-NewBallotMenuInfo_ListItem {
+    color: #777;
+    font-size: 14px;
+    line-height: 1.71;
+    margin-bottom: 20px;
+    padding-left: 25px;
+    position: relative;
+
+    &::before {
+        background-color: #333;
+        border-radius: 50%;
+        content: '';
+        height: 6px;
+        left: 0;
+        position: absolute;
+        top: 8px;
+        width: 6px;
+    }
+}

src/assets/stylesheets/components/_index.scss

@@ -31,7 +31,10 @@
 @import "MainTitle";
 @import "MobileMenuLinks";
 @import "NavigationLinks";
+@import "NewBallot";
+@import "NewBallotMenu";
+@import "NewBallotMenuInfo";
 @import "SearchBar";
 @import "SocialIcons";
 @import "VoteProgressBar";
-@import "Votes";
+@import "Votes";

src/components/BallotEmissionFundsMetadata/index.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import { observable, action } from 'mobx'
-import { inject, observer } from 'mobx-react'
-import { constants } from '../utils/constants'
 import moment from 'moment'
+import { constants } from '../../utils/constants'
+import { inject, observer } from 'mobx-react'
+import { observable, action } from 'mobx'
 
 @inject('ballotStore', 'contractsStore')
 @observer

src/components/BallotKeysMetadata/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import { inject, observer } from 'mobx-react'
 import Select from 'react-select'
+import { inject, observer } from 'mobx-react'
 
 @inject('ballotStore', 'contractsStore')
 @observer

src/components/NewBallot/index.js

@@ -1,16 +1,20 @@
 import React from 'react'
-import { inject, observer } from 'mobx-react'
 import moment from 'moment'
 import swal from 'sweetalert2'
-import { Validator } from './Validator.jsx'
-import { KeysTypes } from './KeysTypes.jsx'
-import { BallotKeysMetadata } from './BallotKeysMetadata.jsx'
-import { BallotMinThresholdMetadata } from './BallotMinThresholdMetadata.jsx'
-import { BallotProxyMetadata } from './BallotProxyMetadata.jsx'
-import { BallotEmissionFundsMetadata } from './BallotEmissionFundsMetadata.jsx'
-import { messages } from '../utils/messages'
-import { constants } from '../utils/constants'
-import { sendTransactionByVotingKey } from '../utils/helpers'
+import { BallotEmissionFundsMetadata } from '../BallotEmissionFundsMetadata'
+import { BallotKeysMetadata } from '../BallotKeysMetadata'
+import { BallotMinThresholdMetadata } from '../BallotMinThresholdMetadata'
+import { BallotProxyMetadata } from '../BallotProxyMetadata'
+import { KeysTypes } from '../KeysTypes'
+import { NewBallotMenu } from '../NewBallotMenu'
+import { NewBallotMenuInfo } from '../NewBallotMenuInfo'
+import { Validator } from '../Validator'
+import { constants } from '../../utils/constants'
+import { getNetworkBranch } from '../../utils/utils'
+import { inject, observer } from 'mobx-react'
+import { messages } from '../../utils/messages'
+import { sendTransactionByVotingKey } from '../../utils/helpers'
+
 @inject('commonStore', 'ballotStore', 'validatorStore', 'contractsStore', 'routing', 'ballotsStore')
 @observer
 export class NewBallot extends React.Component {
@@ -19,6 +23,12 @@ export class NewBallot extends React.Component {
     this.onClick = this.onClick.bind(this)
   }
 
+  getVotingNetworkBranch = () => {
+    const { contractsStore } = this.props
+
+    return contractsStore.netId ? getNetworkBranch(contractsStore.netId) : null
+  }
+
   getStartTimeUnix() {
     return moment
       .utc()
@@ -365,27 +375,50 @@ export class NewBallot extends React.Component {
     }
   }
 
-  menuItemActive = ballotType => {
-    const { ballotStore } = this.props
-
-    if (ballotType === ballotStore.ballotType) {
-      return 'ballot-types-i ballot-types-i_active'
-    } else {
-      return 'ballot-types-i'
-    }
-  }
-
   componentDidMount() {
     const { ballotStore } = this.props
     ballotStore.changeBallotType(null, ballotStore.BallotType.keys)
   }
 
+  getMenuItems() {
+    const { contractsStore, ballotStore } = this.props
+    let items = [
+      {
+        active: ballotStore.BallotType.keys === ballotStore.ballotType,
+        onClick: e => ballotStore.changeBallotType(e, ballotStore.BallotType.keys),
+        text: 'Validator Management Ballot'
+      },
+      {
+        active: ballotStore.BallotType.minThreshold === ballotStore.ballotType,
+        onClick: e => ballotStore.changeBallotType(e, ballotStore.BallotType.minThreshold),
+        text: 'Consensus Threshold Ballot'
+      },
+      {
+        active: ballotStore.BallotType.proxy === ballotStore.ballotType,
+        onClick: e => ballotStore.changeBallotType(e, ballotStore.BallotType.proxy),
+        text: 'Modify Proxy Contract Ballot'
+      }
+    ]
+
+    if (contractsStore.votingToManageEmissionFunds) {
+      items.push({
+        active: ballotStore.BallotType.emissionFunds === ballotStore.ballotType,
+        onClick: e => ballotStore.changeBallotType(e, ballotStore.BallotType.emissionFunds),
+        text: 'Emission Funds Ballot'
+      })
+    }
+
+    return items
+  }
+
   render() {
     const { contractsStore, ballotStore } = this.props
+    const networkBranch = this.getVotingNetworkBranch()
     let validator = ballotStore.isNewValidatorPersonalData ? <Validator /> : ''
     let keysTypes = ballotStore.isBallotForKey ? <KeysTypes /> : ''
     let metadata
     let minThreshold = 0
+
     switch (ballotStore.ballotType) {
       case ballotStore.BallotType.keys:
         metadata = <BallotKeysMetadata />
@@ -406,63 +439,21 @@ export class NewBallot extends React.Component {
       default:
         break
     }
-    const emissionFundsManagementBallot = contractsStore.votingToManageEmissionFunds ? (
-      <div
-        className={this.menuItemActive(ballotStore.BallotType.emissionFunds)}
-        onClick={e => ballotStore.changeBallotType(e, ballotStore.BallotType.emissionFunds)}
-      >
-        Emission Funds Ballot
-      </div>
-    ) : (
-      ''
-    )
+
     return (
-      <section className="container new">
-        <form action="" className="new-form">
-          <div className="new-form-side new-form-side_left">
-            <div className="ballot-types">
-              <div
-                className={this.menuItemActive(ballotStore.BallotType.keys)}
-                onClick={e => ballotStore.changeBallotType(e, ballotStore.BallotType.keys)}
-              >
-                Validator Management Ballot
-              </div>
-              <div
-                className={this.menuItemActive(ballotStore.BallotType.minThreshold)}
-                onClick={e => ballotStore.changeBallotType(e, ballotStore.BallotType.minThreshold)}
-              >
-                Consensus Threshold Ballot
-              </div>
-              <div
-                className={this.menuItemActive(ballotStore.BallotType.proxy)}
-                onClick={e => ballotStore.changeBallotType(e, ballotStore.BallotType.proxy)}
-              >
-                Modify Proxy Contract Ballot
-              </div>
-              {emissionFundsManagementBallot}
-            </div>
-            <div className="info">
-              <p className="info-title">Limits of the ballot</p>
-              <div className="info-i">
-                Minimum {minThreshold} from {contractsStore.validatorsLength} validators are required to pass the&nbsp;
-                proposal
-                <br />
-              </div>
-              <div className="info-i">
-                You can create {contractsStore.validatorLimits.keys} ballot(s) for keys
-                <br />
-              </div>
-              <div className="info-i">
-                You can create {contractsStore.validatorLimits.minThreshold} ballot(s) for consensus
-                <br />
-              </div>
-              <div className="info-i">
-                You can create {contractsStore.validatorLimits.proxy} ballot(s) for proxy
-                <br />
-              </div>
-            </div>
+      <section className="new-NewBallot">
+        <form className="new-NewBallot_Form">
+          <div className="new-NewBallot_MenuContainer">
+            <NewBallotMenu menuItems={this.getMenuItems()} networkBranch={networkBranch} />
+            <NewBallotMenuInfo
+              keys={contractsStore.validatorLimits.keys}
+              minThreshold={minThreshold}
+              proxy={contractsStore.validatorLimits.proxy}
+              validatorLimitsMinThreshold={contractsStore.validatorLimits.minThreshold}
+              validatorsLength={contractsStore.validatorsLength}
+            />
           </div>
-          <div className="new-form-side new-form-side_right">
+          <div className="new-NewBallot_FormContent">
             <div className="form-el">
               <label>Description of the ballot</label>
               <div>

src/components/NewBallotMenu/index.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+export const NewBallotMenu = ({ networkBranch, menuItems }) => {
+  return (
+    <ul className={`mn-NewBallotMenu mn-NewBallotMenu-${networkBranch}`}>
+      {menuItems.map((item, index) => (
+        <li
+          className={`mn-NewBallotMenu_Item mn-NewBallotMenu_Item-${networkBranch} ${
+            item.active ? 'mn-NewBallotMenu_Item-active' : ''
+          }`}
+          key={index}
+          onClick={item.onClick}
+        >
+          {item.text}
+        </li>
+      ))}
+    </ul>
+  )
+}

src/components/NewBallotMenuInfo/index.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+export const NewBallotMenuInfo = ({ minThreshold, validatorsLength, keys, validatorLimitsMinThreshold, proxy }) => {
+  return (
+    <div className="mn-NewBallotMenuInfo">
+      <h2 className="mn-NewBallotMenuInfo_Title">Limits of the ballot</h2>
+      <ul className="mn-NewBallotMenuInfo_List">
+        <li className="mn-NewBallotMenuInfo_ListItem">
+          Minimum {minThreshold} from {validatorsLength} validators are required to pass the&nbsp; proposal
+        </li>
+        <li className="mn-NewBallotMenuInfo_ListItem">You can create {keys} ballot(s) for keys</li>
+        <li className="mn-NewBallotMenuInfo_ListItem">
+          You can create {validatorLimitsMinThreshold} ballot(s) for consensus
+        </li>
+        <li className="mn-NewBallotMenuInfo_ListItem">You can create {proxy} ballot(s) for proxy</li>
+      </ul>
+    </div>
+  )
+}

src/components/Validator/index.js

@@ -1,8 +1,8 @@
-import React from 'react'
-import { inject, observer } from 'mobx-react'
-import Select from 'react-select'
 import PlacesAutocomplete, { geocodeByAddress } from 'react-places-autocomplete'
-import { constants } from '../utils/constants'
+import React from 'react'
+import Select from 'react-select'
+import { constants } from '../../utils/constants'
+import { inject, observer } from 'mobx-react'
 
 @inject('validatorStore', 'ballotStore')
 @observer

src/components/index.js

@@ -4,5 +4,5 @@ export { Footer } from './Footer'
 export { Header } from './Header'
 export { Loading } from './Loading'
 export { MainTitle } from './MainTitle'
-export { NewBallot } from './NewBallot.jsx'
+export { NewBallot } from './NewBallot'
 export { SearchBar } from './SearchBar'