Implement "start voting" - Closes #1971

i18n/locales/en/common.json

@@ -33,6 +33,7 @@
   "Add to bookmarks": "Add to bookmarks",
   "Add to list": "Add to list",
   "Added Votes": "Added Votes",
+  "Added votes": "Added votes",
   "Adding extensions is currently disabled in production version of Lisk Hub": "Adding extensions is currently disabled in production version of Lisk Hub",
   "Address": "Address",
   "Advanced features": "Advanced features",
@@ -72,6 +73,7 @@
   "By voting you decide who is trusted to verify transactions and maintain the Lisk network, whilst collecting the rewards for doing so.": "By voting you decide who is trusted to verify transactions and maintain the Lisk network, whilst collecting the rewards for doing so.",
   "Bytes counter": "Bytes counter",
   "Cancel": "Cancel",
+  "Cancel voting": "Cancel voting",
   "Check for updates...": "Check for updates...",
   "Check spelling – name does not exist on mainnet": "Check spelling – name does not exist on mainnet",
   "Choose": "Choose",
@@ -151,6 +153,7 @@
   "Downvotes": "Downvotes",
   "Drag to reveal": "Drag to reveal",
   "Each LSK token is worth one vote.": "Each LSK token is worth one vote.",
+  "Each time you add or remove a vote it is counted as an action. There's {{fee}} LSK fee per every 33 actions.": "Each time you add or remove a vote it is counted as an action. There's {{fee}} LSK fee per every 33 actions.",
   "Edit": "Edit",
   "Edit transaction": "Edit transaction",
   "Enter URL of the *.js file with the extension": "Enter URL of the *.js file with the extension",
@@ -293,6 +296,7 @@
   "My Account": "My Account",
   "My Wallet": "My Wallet",
   "My Wallet Details": "My Wallet Details",
+  "My votes after confirmation": "My votes after confirmation",
   "Name": "Name",
   "Name is already taken!": "Name is already taken!",
   "Name is available": "Name is available",
@@ -303,10 +307,12 @@
   "News": "News",
   "Next": "Next",
   "No Updates": "No Updates",
+  "No delegates found.": "No delegates found.",
   "No newsfeed available": "No newsfeed available",
   "No results": "No results",
   "No results found": "No results found",
   "No results found.": "No results found.",
+  "No search result in given criteria.": "No search result in given criteria.",
   "No transactions yet": "No transactions yet",
   "No, thanks": "No, thanks",
   "Not Yet Implemented. Sorry.": "Not Yet Implemented. Sorry.",
@@ -362,6 +368,7 @@
   "Redo": "Redo",
   "Reference": "Reference",
   "Register": "Register",
+  "Register as a Delegate": "Register as a Delegate",
   "Registered": "Registered",
   "Registrant": "Registrant",
   "Release Notes": "Release Notes",
@@ -370,6 +377,7 @@
   "Remove Extension": "Remove Extension",
   "Remove from bookmarks": "Remove from bookmarks",
   "Removed Votes": "Removed Votes",
+  "Removed votes": "Removed votes",
   "Report the error via E-Mail": "Report the error via E-Mail",
   "Request": "Request",
   "Request LSK": "Request LSK",
@@ -404,6 +412,7 @@
   "Select device": "Select device",
   "Select the missing words to confirm": "Select the missing words to confirm",
   "Select this account": "Select this account",
+  "Selecting Delegates": "Selecting Delegates",
   "Selection": "Selection",
   "Send": "Send",
   "Send LSK": "Send LSK",
@@ -435,7 +444,9 @@
   "Simply scan the QR code using the Lisk Mobile app or any other QR code reader": "Simply scan the QR code using the Lisk Mobile app or any other QR code reader",
   "Since Last Login": "Since Last Login",
   "Standby": "Standby",
+  "Start by Selecting the delegates you’d like to vote for.": "Start by Selecting the delegates you’d like to vote for.",
   "Start here": "Start here",
+  "Start voting": "Start voting",
   "Stats": "Stats",
   "Status": "Status",
   "Step 1 / 4": "Step 1 / 4",
@@ -472,6 +483,8 @@
   "To recover you can": "To recover you can",
   "Toggle full screen": "Toggle full screen",
   "Total": "Total",
+  "Total actions (": "Total actions (",
+  "Total fee: ": "Total fee: ",
   "Transaction": "Transaction",
   "Transaction Fee": "Transaction Fee",
   "Transaction ID": "Transaction ID",
@@ -545,6 +558,7 @@
   "You have cancelled the transaction on your hardware wallet.": "You have cancelled the transaction on your hardware wallet.",
   "You have cancelled the transaction on your hardware wallet. You can either continue or retry.": "You have cancelled the transaction on your hardware wallet. You can either continue or retry.",
   "You have cancelled voting on your hardware wallet.": "You have cancelled voting on your hardware wallet.",
+  "You have not voted yet.": "You have not voted yet.",
   "You will be able to select the desired network when signing in": "You will be able to select the desired network when signing in",
   "You will be signed out in a minute due to no network activity. You can turn off Auto-Logout in the settings.": "You will be signed out in a minute due to no network activity. You can turn off Auto-Logout in the settings.",
   "You will need it to use your Lisk ID, like sending and voting. You are responsible for keeping your second passphrase safe. No one can restore it, not even Lisk.": "You will need it to use your Lisk ID, like sending and voting. You are responsible for keeping your second passphrase safe. No one can restore it, not even Lisk.",

src/components/app/type.css

@@ -120,7 +120,6 @@ h6 {
 
 p,
 a,
-b,
 i,
 strong {
   font-size: var(--paragraph-font-size-l);

src/components/app/variablesV2.css

@@ -124,6 +124,7 @@ or "warn/action" ineastd of "red/green"
   --color-title-header-box: #4c4c4c;
   --color-link: var(--color-primary-standard);
   --color-rows-hover: rgba(157, 184, 250, 0.2);
+  --color-highlight-checkboxes: rgba(64, 112, 244, 0.08);
 
   /*************************
         Box

src/components/boxV2/box.css

@@ -27,7 +27,7 @@
     display: flex;
     flex-direction: row;
     height: 48px;
-    justify-content: flex-start;
+    justify-content: space-between;
     margin: 0;
     padding: 16px 20px;
     width: 100%;

src/components/boxV2/index.js

@@ -4,7 +4,7 @@ import styles from './box.css';
 const Box = (props) => {
   const childs = props.children;
 
-  const hasHeader = Array.isArray(childs) && childs.some(child => child.type === 'header');
+  const hasHeader = Array.isArray(childs) && childs.some(child => child && child.type === 'header');
 
   return (
     <div className={`${styles.wrapper} ${hasHeader ? styles.withHeader : ''} ${props.className}`}>

src/components/splashscreen/splashscreen.js

@@ -101,7 +101,7 @@ class Splashscreen extends React.Component {
               </Link>
               <Tooltip
                 className={`${styles.tooltip}`}
-                infoIconClassName={styles.infoIcon}
+                styles={{ infoIcon: styles.infoIcon }}
                 title={t('Guest mode')}>
                 <React.Fragment>
                   <p className={`${styles.tooltipText}`}>

src/components/votingListViewV2/voteCheckboxV2.css → src/components/toolbox/checkBox/checkBox.css

@@ -1,10 +1,11 @@
-@import '../app/variablesV2.css';
+@import '../../app/variablesV2.css';
 
 .checkbox {
   display: inline-block;
   width: 16px;
   height: 16px;
   position: relative;
+  cursor: pointer;
 
   & input {
     visibility: hidden;
@@ -13,10 +14,13 @@
 
   & span {
     color: var(--color-ultramarine-blue);
+    border-radius: var(--border-radius-standard);
     font-size: 20px;
     position: absolute;
     left: 0;
     top: 0;
+    width: 15px;
+    height: 15px;
 
     &.checked {
       display: none;
@@ -26,11 +30,22 @@
     &.unchecked {
       font-size: 16px;
       background-color: var(--color-white);
-      border: 1px solid var(--dark-border-color);
-      border-radius: var(--border-radius-standard);
+      border: solid 1px rgba(0, 0, 0, 0.08);
       color: var(--color-white);
       display: block;
     }
+
+    &.accent {
+      border: 1px solid var(--color-ultramarine-blue);
+      border-radius: calc(var(--border-radius-standard) + 1px);
+      box-shadow: 0 0 5px 0 var(--color-ultramarine-blue);
+      line-height: 15px !important;
+    }
+
+    &.removed {
+      border: solid 1px var(--color-burnt-sienna);
+      box-shadow: unset;
+    }
   }
 
   & input:checked {

src/components/toolbox/checkBox/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from './checkBox.css';
+import svgIcons from '../../../utils/svgIcons';
+
+const CheckBox = ({
+  added, removed, id, onChange, accent, checked, className,
+}) => (
+  <label className={`${styles.checkbox} ${className} ${checked ? 'checked' : 'unchecked'}`} htmlFor={id}>
+    <input type='checkbox'
+      id={id}
+      checked={!!checked}
+      onChange={onChange} />
+    <span className={`${styles.checked} ${(accent || added) && styles.accent}`}>
+      <img src={svgIcons.checkmark} />
+    </span>
+    <span className={`${styles.unchecked} ${accent && styles.accent} ${removed && styles.removed}`} />
+  </label>
+);
+
+export default CheckBox;

src/components/toolbox/checkBox/index.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import CheckBox from './index';
+
+describe('CheckBox', () => {
+  const props = {
+    added: true,
+    removed: false,
+    onChange: () => {},
+  };
+
+  it('should render checkmark icon if props.checked is true', () => {
+    const wrapper = mount(<CheckBox {...props} checked={true} />);
+    expect(wrapper.find('img').props()).toHaveProperty('src', 'test-file-stub');
+  });
+
+  it('should render with "accent" class if props.accent is true', () => {
+    const wrapper = mount(<CheckBox {...props} accent={true} />);
+    expect(wrapper.find('.checked').hasClass('accent')).toEqual(true);
+  });
+
+  it('should render with "removed" class if props.removed is true', () => {
+    const wrapper = mount(<CheckBox {...props} removed={true} />);
+    expect(wrapper.find('span.unchecked').hasClass('removed')).toEqual(true);
+  });
+});
+

src/components/toolbox/tabs/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from './tabs.css';
+
+const Tabs = ({
+  tabs, active, onClick, className,
+}) => (
+  <ul className={styles.wrapper}>
+    {tabs.map((filter, i) => (
+      <li key={i}
+        className={`${className} ${filter.className} ${(active === filter.value) ? styles.active : ''}`}
+        onClick={() => onClick(filter)}>
+        {filter.name}
+      </li>
+    ))}
+  </ul>
+);
+
+Tabs.defaultProps = {
+  tabs: [],
+  onClick: () => {},
+  className: '',
+};
+
+export default Tabs;

src/components/toolbox/tabs/index.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Tabs from './index';
+
+describe('Tabs', () => {
+  const props = {
+    tabs: [{
+      value: 'All',
+    },
+    {
+      value: 'Voted',
+    }],
+    active: 'All',
+  };
+
+  it('should render list of length of props.tabs', () => {
+    const wrapper = mount(<Tabs {...props} />);
+    expect(wrapper.find('li')).toHaveLength(props.tabs.length);
+  });
+
+  it('should render empty even if no props.tabs', () => {
+    const wrapper = mount(<Tabs />);
+    expect(wrapper.find('li')).toHaveLength(0);
+  });
+
+  it('should call props.onClick when li clicked', () => {
+    const index = 1;
+    const onClick = jest.fn();
+    const wrapper = mount(<Tabs {...props} onClick={onClick} />);
+    (wrapper.find('li').at(index)).simulate('click');
+    expect(onClick).toHaveBeenCalledWith(props.tabs[index]);
+  });
+
+  it('should not fail if no props.onClick passed when li clicked', () => {
+    const index = 1;
+    const onClick = jest.fn();
+    const wrapper = mount(<Tabs {...props} />);
+    (wrapper.find('li').at(index)).simulate('click');
+    expect(onClick).not.toHaveBeenCalledWith(props.tabs[index]);
+  });
+});

src/components/toolbox/tabs/tabs.css

@@ -0,0 +1,41 @@
+@import '../../app/variablesV2.css';
+@import '../../app/mixins.css';
+
+.wrapper {
+  border-radius: inherit;
+  background-color: var(--color-white-smoke);
+  display: flex;
+  list-style: none;
+  margin: 0;
+  margin-left: -20px;
+  padding: 0;
+
+  & > li {
+    @mixin contentNormal;
+
+    align-items: center;
+    border-bottom: 1px solid var(--color-platinum);
+    border-right: 1px solid var(--color-platinum);
+    color: var(--color-slate-gray);
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    margin-bottom: -2px;
+    padding: 14px 20px;
+    position: relative;
+
+    &:first-child {
+      border-top-left-radius: var(--border-radius-box);
+    }
+
+    &:last-child:not(.active) {
+      border-right: 0 none;
+    }
+
+    &.active {
+      background: var(--color-white);
+      border-bottom: 1px solid var(--color-white);
+      color: var(--color-ultramarine-blue);
+    }
+  }
+}

src/components/toolbox/tooltip/tooltip.js

@@ -64,19 +64,25 @@ class Tooltip extends React.Component {
 
   render() {
     const {
-      title, children, footer, className, infoIconClassName,
+      title, children, footer, className, alwaysShow,
     } = this.props;
+    const {
+      showTooltip,
+    } = this.state;
+    const {
+      infoIcon = '', tooltip = '',
+    } = this.props.styles || {};
     return React.isValidElement(children) && (
       <div
         className={`${styles.tooltipWrapper} ${className}`}
         onMouseLeave={this.handleMouseLeave}
         onMouseMove={this.handleMouseMove}
         ref={this.setWrapperRef}>
         <span
-          className={`${styles.infoIcon} ${infoIconClassName}`}
+          className={`${styles.infoIcon} ${infoIcon}`}
           onClick={this.handleClick}
           />
-        <div className={`${styles.tooltip} ${this.state.showTooltip ? 'shownTooltip' : ''} tooltip-window`}>
+        <div className={`${styles.tooltip} ${(alwaysShow || showTooltip) ? 'shownTooltip' : ''} ${tooltip} tooltip-window`}>
           <span className={`${styles.tooltipArrow} tooltip-arrow`}>
             <svg stroke="inherit" fill="currentColor" viewBox="0 0 14 28">
               <path d="M13.307.5S.5 10.488.5 13.896c0 3.409 12.785 12.893 12.785 12.893"/>

src/components/transactionsV2/transactionsOverviewV2.test.js

@@ -84,7 +84,7 @@ describe('TransactionsOverview V2', () => {
   });
 
   it('should call onFilterSet when filtering transations', () => {
-    wrapper.find('.transaction-filter-item').first().simulate('click');
+    wrapper.find('.filter-all').first().simulate('click');
     expect(props.onFilterSet).to.have.been.calledWith();
   });
 });