From 1bfbce4d6e444dc081830c79fd4e111fee2dcad1 Mon Sep 17 00:00:00 2001 From: Dominik Guzei Date: Tue, 12 Nov 2024 14:31:08 +0100 Subject: [PATCH] feat: Add navigation with governance to voting page [LW-11519] --- source/renderer/app/Routes.tsx | 22 ++++++-- .../VotingPowerDelegation.scss | 16 ++++++ .../VotingPowerDelegation.tsx | 25 ++++++++++ .../app/config/votingNavigationConfig.ts | 4 ++ .../renderer/app/containers/voting/Voting.tsx | 50 +++++++++++++++++++ .../voting/VotingGovernancePage.tsx | 21 ++++++++ .../voting/VotingRegistrationPage.tsx | 5 +- source/renderer/app/routes-config.ts | 2 + 8 files changed, 137 insertions(+), 8 deletions(-) create mode 100644 source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.scss create mode 100644 source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.tsx create mode 100644 source/renderer/app/config/votingNavigationConfig.ts create mode 100644 source/renderer/app/containers/voting/Voting.tsx create mode 100644 source/renderer/app/containers/voting/VotingGovernancePage.tsx diff --git a/source/renderer/app/Routes.tsx b/source/renderer/app/Routes.tsx index 7f6129b635..30a8231e0e 100644 --- a/source/renderer/app/Routes.tsx +++ b/source/renderer/app/Routes.tsx @@ -36,6 +36,9 @@ import VotingRegistrationPage from './containers/voting/VotingRegistrationPage'; import { IS_STAKING_INFO_PAGE_AVAILABLE } from './config/stakingConfig'; import AnalyticsConsentPage from './containers/profile/AnalyticsConsentPage'; import TrackedRoute from './analytics/TrackedRoute'; +import { Voting } from './containers/voting/Voting'; +import VotingPowerDelegation from './components/voting/voting-governance/VotingPowerDelegation'; +import VotingGovernancePage from './containers/voting/VotingGovernancePage'; export const Routes = withRouter(() => ( @@ -205,11 +208,20 @@ export const Routes = withRouter(() => ( component={RedeemItnRewardsContainer} /> - + + + + + + diff --git a/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.scss b/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.scss new file mode 100644 index 0000000000..e69f6ee789 --- /dev/null +++ b/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.scss @@ -0,0 +1,16 @@ +@import '../votingConfig'; + +.component { + flex: 1 0 0; + padding: 20px; +} + +.heading { + @extend %accentText; + font-family: var(--font-semibold); + font-size: 18px; + letter-spacing: 2px; + margin-bottom: 14px; + text-align: center; + text-transform: uppercase; +} diff --git a/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.tsx b/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.tsx new file mode 100644 index 0000000000..eff5c8725d --- /dev/null +++ b/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { observer } from 'mobx-react'; +import { injectIntl } from 'react-intl'; +import BorderedBox from '../../widgets/BorderedBox'; +import { messages } from '../voting-info/Headline.messages'; +import styles from './VotingPowerDelegation.scss'; +import type { Intl } from '../../../types/i18nTypes'; + +type Props = { + intl: Intl; +}; + +function VotingPowerDelegation({ intl }: Props) { + return ( +
+ +

+ {intl.formatMessage(messages.heading)} +

+ +
+ ); +} + +export default observer(injectIntl(VotingPowerDelegation)); diff --git a/source/renderer/app/config/votingNavigationConfig.ts b/source/renderer/app/config/votingNavigationConfig.ts new file mode 100644 index 0000000000..b2e0b26f6e --- /dev/null +++ b/source/renderer/app/config/votingNavigationConfig.ts @@ -0,0 +1,4 @@ +export const VOTING_NAV_IDS = { + REGISTRATION: 'registration', + GOVERNANCE: 'governance', +}; diff --git a/source/renderer/app/containers/voting/Voting.tsx b/source/renderer/app/containers/voting/Voting.tsx new file mode 100644 index 0000000000..2a4c51473e --- /dev/null +++ b/source/renderer/app/containers/voting/Voting.tsx @@ -0,0 +1,50 @@ +import React, { Component } from 'react'; +import { inject, observer } from 'mobx-react'; +import Navigation, { type NavButtonProps } from '../../components/navigation/Navigation'; +import type { InjectedContainerProps } from '../../types/injectedPropsType'; +import MainLayout from '../MainLayout'; +import { ROUTES } from '../../routes-config'; + +type Props = InjectedContainerProps; + +@inject('stores', 'actions') +@observer +export class Voting extends Component { + + static defaultProps = { + actions: null, + stores: null, + }; + + render() { + const { app } = this.props.stores; + const navItems: Array = [ + { + id: ROUTES.VOTING.REGISTRATION, + label: 'Registration', + }, + { + id: ROUTES.VOTING.GOVERNANCE, + label: 'Governance', + }, + ]; + const activeItem = navItems.find((item) => app.currentRoute === item.id); + return ( + +
+ navItemId === activeItem.id} + onNavItemClick={(navItemId: string) => { + this.props.actions.router.goToRoute.trigger({ + route: navItemId + }); + }} + /> +
+ {this.props.children} + + ); + } +} diff --git a/source/renderer/app/containers/voting/VotingGovernancePage.tsx b/source/renderer/app/containers/voting/VotingGovernancePage.tsx new file mode 100644 index 0000000000..20ba3a6f38 --- /dev/null +++ b/source/renderer/app/containers/voting/VotingGovernancePage.tsx @@ -0,0 +1,21 @@ +import React, { Component } from 'react'; +import { inject, observer } from 'mobx-react'; +import type { InjectedProps } from '../../types/injectedPropsType'; +import VotingPowerDelegation from '../../components/voting/voting-governance/VotingPowerDelegation'; + +type Props = InjectedProps; + +@inject('stores', 'actions') +@observer +class VotingGovernancePage extends Component { + static defaultProps = { + actions: null, + stores: null, + }; + + render() { + return ; + } +} + +export default VotingGovernancePage; diff --git a/source/renderer/app/containers/voting/VotingRegistrationPage.tsx b/source/renderer/app/containers/voting/VotingRegistrationPage.tsx index 365dc7b390..61a16cd183 100644 --- a/source/renderer/app/containers/voting/VotingRegistrationPage.tsx +++ b/source/renderer/app/containers/voting/VotingRegistrationPage.tsx @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import { observer, inject } from 'mobx-react'; -import Layout from '../MainLayout'; import { VOTING_REGISTRATION_MIN_WALLET_FUNDS } from '../../config/votingConfig'; import VerticalFlexContainer from '../../components/layout/VerticalFlexContainer'; import VotingInfo from '../../components/voting/voting-info/VotingInfo'; @@ -77,7 +76,7 @@ class VotingRegistrationPage extends Component { ); const innerContent = this.getInnerContent(isVotingRegistrationDialogOpen); return ( - + <> {innerContent} @@ -86,7 +85,7 @@ class VotingRegistrationPage extends Component { {isVotingRegistrationDialogOpen && ( )} - + ); } } diff --git a/source/renderer/app/routes-config.ts b/source/renderer/app/routes-config.ts index a25b0aa24f..26c7ea94d0 100644 --- a/source/renderer/app/routes-config.ts +++ b/source/renderer/app/routes-config.ts @@ -32,7 +32,9 @@ export const ROUTES = { UTXO: '/wallets/:id/utxo', }, VOTING: { + ROOT: '/voting', REGISTRATION: '/voting/registration', + GOVERNANCE: '/voting/governance', }, SETTINGS: { ROOT: '/settings',