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',