Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2048 from LiskHQ/1972-implement-voting-summary-page
Implement voting summary page - Closes #1972
- Loading branch information
Showing
28 changed files
with
1,091 additions
and
251 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import React from 'react'; | ||
| import grid from 'flexboxgrid/dist/flexboxgrid.css'; | ||
| import styles from './votingV2.css'; | ||
| import VotingListViewV2 from '../votingListViewV2'; | ||
| import VotingHeader from './votingHeader'; | ||
| import Onboarding from '../toolbox/onboarding/onboarding'; | ||
| import { getTotalActions } from './../../utils/voting'; | ||
|
|
||
| class DelegatesV2 extends React.Component { | ||
| constructor({ votes, ...props }) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| votingModeEnabled: getTotalActions(votes) > 0, | ||
| }; | ||
|
|
||
| this.toggleVotingMode = this.toggleVotingMode.bind(this); | ||
| this.getOnboardingSlides = this.getOnboardingSlides.bind(this); | ||
| } | ||
|
|
||
| toggleVotingMode() { | ||
| if (this.state.votingModeEnabled) { | ||
| this.props.clearVotes(); | ||
| } | ||
| this.setState({ votingModeEnabled: !this.state.votingModeEnabled }); | ||
| } | ||
|
|
||
| getOnboardingSlides() { | ||
| const { t } = this.props; | ||
| return [{ | ||
| title: t('Welcome to Lisk Delegates!'), | ||
| content: t('Lisk blockchain network is based on a Delegated Proof of Stake consensus algorithm, in which 101 delegates are chosen to run the network by the community.'), | ||
| illustration: 'welcomeLiskDelegates', | ||
| }, { | ||
| title: t('Your voice matters'), | ||
| content: t('In this section of Lisk Hub you can vote for up to 101 delegates to run Lisk’s blockchain network and by doing so have a real impact on the Lisk ecosystem.'), | ||
| illustration: 'yourVoiceMatters', | ||
| }, { | ||
| title: t('Get rewarded by the community'), | ||
| content: t('Some delegates offer to share a certain percentage of their earnings from running the network with the users who vote for them. You can find more information on Lisk’s Reddit or Rocketchat.'), | ||
| illustration: 'getRewarded', | ||
| }, { | ||
| title: t('Expand your knowledge'), | ||
| content: t('Want to dig deeper? We got you covered. You can read more about Lisk’s delgates, voting mechanism and benefits in a dedicated section of Lisk’s help centre.'), | ||
| illustration: 'expandYourKnowledge', | ||
| }]; | ||
| } | ||
| render() { | ||
| const { t, votes } = this.props; | ||
| const { votingModeEnabled } = this.state; | ||
| return ( | ||
| <div className={`${grid.row} ${styles.wrapper}`} ref={(el) => { this.root = el; }}> | ||
| <Onboarding | ||
| slides={this.getOnboardingSlides()} | ||
| finalCallback={this.toggleVotingMode} | ||
| ctaLabel={t('Start voting')} | ||
| name={'delegateOnboarding'} | ||
| /> | ||
| <VotingHeader | ||
| t={t} | ||
| votingModeEnabled={votingModeEnabled} | ||
| toggleVotingMode={this.toggleVotingMode} | ||
| votes={votes}/> | ||
| <section className={`${grid['col-sm-12']} ${grid['col-md-12']} ${styles.votingBox} ${styles.votes}`}> | ||
| <VotingListViewV2 | ||
| votingModeEnabled={votingModeEnabled} | ||
| /> | ||
| </section> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default DelegatesV2; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import React from 'react'; | ||
| import { expect } from 'chai'; | ||
| import { mount } from 'enzyme'; | ||
| import PropTypes from 'prop-types'; | ||
| import thunk from 'redux-thunk'; | ||
| import { BrowserRouter as Router } from 'react-router-dom'; | ||
| import { prepareStore } from '../../../test/unit-test-utils/applicationInit'; | ||
| import peersReducer from '../../store/reducers/peers'; | ||
| import accountReducer from '../../store/reducers/account'; | ||
| import votingReducer from '../../store/reducers/voting'; | ||
| import DelegatesV2 from './delegatesV2'; | ||
| import history from '../../history'; | ||
| import i18n from '../../i18n'; | ||
|
|
||
| describe('DelegatesV2', () => { | ||
| let wrapper; | ||
| const votes = { | ||
| username1: { confirmed: true, unconfirmed: true, publicKey: 'sample_key' }, | ||
| }; | ||
| const store = prepareStore({ | ||
| peers: peersReducer, | ||
| account: accountReducer, | ||
| voting: votingReducer, | ||
| }, [thunk]); | ||
|
|
||
| const delegates = [ | ||
| { | ||
| address: 'address 1', | ||
| username: 'username1', | ||
| publicKey: 'sample_key', | ||
| serverPublicKey: 'sample_key', | ||
| rank: 12, | ||
| }, | ||
| { | ||
| address: 'address 2', | ||
| username: 'username2', | ||
| publicKey: 'sample_key', | ||
| serverPublicKey: 'sample_key', | ||
| rank: 23, | ||
| }, | ||
| ]; | ||
| const props = { | ||
| refreshDelegates: false, | ||
| delegates, | ||
| totalDelegates: 10, | ||
| votes, | ||
| t: key => key, | ||
| history: { location: { search: '' } }, | ||
| clearVotes: jest.fn(), | ||
| }; | ||
| const options = { | ||
| context: { store, history, i18n }, | ||
| childContextTypes: { | ||
| store: PropTypes.object.isRequired, | ||
| history: PropTypes.object.isRequired, | ||
| i18n: PropTypes.object.isRequired, | ||
| }, | ||
| }; | ||
|
|
||
| it('should allow to enable and disable voting mode', () => { | ||
| wrapper = mount(<Router><DelegatesV2 {...props} /></Router>, options); | ||
| wrapper.find('.start-voting-button').at(0).simulate('click'); | ||
| expect(wrapper.find('.addedVotes')).to.have.lengthOf(1); | ||
|
|
||
| wrapper.find('.cancel-voting-button').at(0).simulate('click'); | ||
| expect(wrapper.find('.addedVotes')).to.have.lengthOf(0); | ||
| }); | ||
| }); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| /* istanbul ignore file */ | ||
| import { connect } from 'react-redux'; | ||
| import { translate } from 'react-i18next'; | ||
| import DelegatesV2 from './delegatesV2'; | ||
| import { clearVotes } from '../../actions/voting'; | ||
|
|
||
| const mapStateToProps = state => ({ | ||
| votes: state.voting.votes, | ||
| }); | ||
|
|
||
| const mapDispatchToProps = { | ||
| clearVotes, | ||
| }; | ||
|
|
||
| export default connect(mapStateToProps, mapDispatchToProps)(translate()(DelegatesV2)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,6 +6,10 @@ | |
| justify-content: space-between; | ||
| width: 100%; | ||
| margin-bottom: 25px; | ||
|
|
||
| & > * { | ||
| display: flex; | ||
| } | ||
| } | ||
|
|
||
| .box, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.