Add Tabs for missing apps (#3445)

packages/page-accounts/src/Accounts/BannerDOT.tsx

@@ -37,8 +37,8 @@ function BannerDOT (): React.ReactElement | null {
           ? <Trans key='dotRenomGoing'>On approximately {endDate} (block number {formatNumber(POLKADOT_DENOM_BLOCK)} in <BlockToTime
             blocks={remaining}
             isInline
-          />), the DOT token will undergo a <a href='#/poll'>redenomination</a> from its original sale.</Trans>
-          : <Trans key='dotRenomDone'>At block number {formatNumber(POLKADOT_DENOM_BLOCK)} the DOT token underwent a <a href='#/poll'>redenomination</a> from its original sale.</Trans>
+          />), the DOT token will undergo a redenomination from its original sale.</Trans>
+          : <Trans key='dotRenomDone'>At block number {formatNumber(POLKADOT_DENOM_BLOCK)} the DOT token underwent a redenomination from its original sale.</Trans>
       }</p>
       <p>{
         endDate

packages/page-claims/src/index.tsx

@@ -2,14 +2,15 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { AppProps as Props } from '@polkadot/react-components/types';
 import { Option } from '@polkadot/types';
 import { EcdsaSignature, EthereumAddress, StatementKind } from '@polkadot/types/interfaces';
 
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { Trans } from 'react-i18next';
 import styled from 'styled-components';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { Button, Card, Columar, Column, Input, InputAddress, Tooltip } from '@polkadot/react-components';
+import { Button, Card, Columar, Column, Input, InputAddress, Tabs, Tooltip } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { TokenUnit } from '@polkadot/react-components/InputNumber';
 import { u8aToHex, u8aToString } from '@polkadot/util';
@@ -72,7 +73,7 @@ const transformStatement = {
   transform: (option: Option<StatementKind>) => option.unwrapOr(null)
 };
 
-function ClaimsApp (): React.ReactElement {
+function ClaimsApp ({ basePath }: Props): React.ReactElement<Props> {
   const [didCopy, setDidCopy] = useState(false);
   const [ethereumAddress, setEthereumAddress] = useState<string | undefined | null>(null);
   const [signature, setSignature] = useState<EcdsaSignature | null>(null);
@@ -88,6 +89,12 @@ function ClaimsApp (): React.ReactElement {
   const [preclaimEthereumAddress, setPreclaimEthereumAddress] = useState<string | null | undefined | typeof PRECLAIMS_LOADING>(PRECLAIMS_LOADING);
   const isPreclaimed = !!preclaimEthereumAddress && preclaimEthereumAddress !== PRECLAIMS_LOADING;
 
+  const itemsRef = useRef([{
+    isRoot: true,
+    name: 'create',
+    text: t<string>('Claim tokens')
+  }]);
+
   // Everytime we change account, reset everything, and check if the accountId
   // has a preclaim.
   useEffect(() => {
@@ -180,7 +187,12 @@ function ClaimsApp (): React.ReactElement {
 
   return (
     <main>
-      <header />
+      <header>
+        <Tabs
+          basePath={basePath}
+          items={itemsRef.current}
+        />
+      </header>
       {!isOldClaimProcess && <Warning />}
       <h1>
         <Trans>Claim your <em>{TokenUnit.abbr}</em> tokens</Trans>

packages/page-poll/src/index.tsx

@@ -6,10 +6,10 @@ import { Approvals, Balance, BlockNumber } from '@polkadot/types/interfaces';
 import { ITuple } from '@polkadot/types/types';
 
 import BN from 'bn.js';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Trans } from 'react-i18next';
 import styled from 'styled-components';
-import { Button, Columar, InputAddress, Progress, Spinner, Toggle, TxButton } from '@polkadot/react-components';
+import { Button, Columar, InputAddress, Progress, Spinner, Tabs, Toggle, TxButton } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { FormatBalance, BlockToTime } from '@polkadot/react-query';
 import { BN_ONE, BN_ZERO, bnMax, formatBalance, formatNumber } from '@polkadot/util';
@@ -17,6 +17,7 @@ import { BN_ONE, BN_ZERO, bnMax, formatBalance, formatNumber } from '@polkadot/u
 import { useTranslation } from './translate';
 
 interface Props {
+  basePath: string;
   className?: string;
 }
 
@@ -27,7 +28,7 @@ interface Turnout {
 
 const DIV = new BN(1_000_000);
 
-function PollApp ({ className }: Props): React.ReactElement<Props> {
+function PollApp ({ basePath, className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const totals = useCall<ITuple<[Balance, Balance, Balance, Balance]>>(api.query.poll.totals);
@@ -41,6 +42,12 @@ function PollApp ({ className }: Props): React.ReactElement<Props> {
   const [opt10b, setOpt10b] = useState(false);
   const [progress, setProgress] = useState<BN[] | undefined>();
 
+  const itemsRef = useRef([{
+    isRoot: true,
+    name: 'poll',
+    text: t<string>('Denomination poll')
+  }]);
+
   useEffect((): void => {
     if (totalIssuance && totals) {
       const max = bnMax(BN_ONE, ...totals);
@@ -83,6 +90,12 @@ function PollApp ({ className }: Props): React.ReactElement<Props> {
 
   return (
     <main className={className}>
+      <header>
+        <Tabs
+          basePath={basePath}
+          items={itemsRef.current}
+        />
+      </header>
       <div className='pollContainer'>
         <div className='pollHeader'>
           <h1>{t('denomination vote')}</h1>