feat: Add navigation with governance to voting page [LW-11519]

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(() => (
   <Route path={ROUTES.ROOT}>
@@ -205,11 +208,20 @@ export const Routes = withRouter(() => (
             component={RedeemItnRewardsContainer}
           />
         </Route>
-        <TrackedRoute
-          pageTitle="Voting Registration"
-          path={ROUTES.VOTING.REGISTRATION}
-          component={VotingRegistrationPage}
-        />
+        <Route path={ROUTES.VOTING.ROOT}>
+          <Voting>
+            <TrackedRoute
+              pageTitle="Voting Registration"
+              path={ROUTES.VOTING.REGISTRATION}
+              component={VotingRegistrationPage}
+            />
+            <TrackedRoute
+              pageTitle="Voting Governance"
+              path={ROUTES.VOTING.GOVERNANCE}
+              component={VotingGovernancePage}
+            />
+          </Voting>
+        </Route>
       </Switch>
     </Root>
   </Route>

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;
+}

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 (
+    <div className={styles.component}>
+      <BorderedBox>
+        <h1 className={styles.heading}>
+          {intl.formatMessage(messages.heading)}
+        </h1>
+      </BorderedBox>
+    </div>
+  );
+}
+
+export default observer(injectIntl(VotingPowerDelegation));

source/renderer/app/config/votingNavigationConfig.ts

@@ -0,0 +1,4 @@
+export const VOTING_NAV_IDS = {
+  REGISTRATION: 'registration',
+  GOVERNANCE: 'governance',
+};

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<Props> {
+
+  static defaultProps = {
+    actions: null,
+    stores: null,
+  };
+
+  render() {
+    const { app } = this.props.stores;
+    const navItems: Array<NavButtonProps> = [
+      {
+        id: ROUTES.VOTING.REGISTRATION,
+        label: 'Registration',
+      },
+      {
+        id: ROUTES.VOTING.GOVERNANCE,
+        label: 'Governance',
+      },
+    ];
+    const activeItem = navItems.find((item) => app.currentRoute === item.id);
+    return (
+      <MainLayout>
+        <div style={{ height: '50px' }}>
+          <Navigation
+            items={navItems}
+            activeItem={activeItem.label}
+            isActiveNavItem={(navItemId: string) => navItemId === activeItem.id}
+            onNavItemClick={(navItemId: string) => {
+              this.props.actions.router.goToRoute.trigger({
+                route: navItemId
+              });
+            }}
+          />
+        </div>
+        {this.props.children}
+      </MainLayout>
+    );
+  }
+}

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<Props> {
+  static defaultProps = {
+    actions: null,
+    stores: null,
+  };
+
+  render() {
+    return <VotingPowerDelegation />;
+  }
+}
+
+export default VotingGovernancePage;

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<Props> {
     );
     const innerContent = this.getInnerContent(isVotingRegistrationDialogOpen);
     return (
-      <Layout>
+      <>
         <VerticalFlexContainer>
           {innerContent}
           <VotingFooterLinks onClickExternalLink={openExternalLink} />
@@ -86,7 +85,7 @@ class VotingRegistrationPage extends Component<Props> {
         {isVotingRegistrationDialogOpen && (
           <VotingRegistrationDialogContainer />
         )}
-      </Layout>
+      </>
     );
   }
 }

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