Use path refs for combinations (#7509)

* Use path refs for combinations

* Adjust

* Adjust padding

* Path variable renames

packages/page-explorer/src/index.tsx

@@ -1,9 +1,11 @@
 // Copyright 2017-2022 @polkadot/app-explorer authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { TFunction } from 'i18next';
+import type { TabItem } from '@polkadot/react-components/Tabs/types';
 import type { KeyedEvent } from '@polkadot/react-query/types';
 
-import React, { useContext, useMemo, useRef } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 import { Route, Switch } from 'react-router';
 
 import { Tabs } from '@polkadot/react-components';
@@ -23,13 +25,20 @@ interface Props {
   newEvents?: KeyedEvent[];
 }
 
-function ExplorerApp ({ basePath, className }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-  const { api } = useApi();
-  const { lastHeaders } = useContext(BlockAuthorsContext);
-  const { eventCount, events } = useContext(EventsContext);
+function createPathRef (basePath: string): Record<string, string | string[]> {
+  return {
+    forks: `${basePath}/forks`,
+    latency: `${basePath}/latency`,
+    node: `${basePath}/node`,
+    query: [
+      `${basePath}/query/:value`,
+      `${basePath}/query/`
+    ]
+  };
+}
 
-  const itemsRef = useRef([
+function createItemsRef (t: TFunction): TabItem[] {
+  return [
     {
       isRoot: true,
       name: 'chain',
@@ -52,12 +61,17 @@ function ExplorerApp ({ basePath, className }: Props): React.ReactElement<Props>
       name: 'node',
       text: t<string>('Node info')
     }
-  ]);
+  ];
+}
 
-  const hidden = useMemo(
-    () => api.query.babe ? [] : ['forks'],
-    [api]
-  );
+function ExplorerApp ({ basePath, className }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const { lastHeaders } = useContext(BlockAuthorsContext);
+  const { eventCount, events } = useContext(EventsContext);
+  const itemsRef = useRef(createItemsRef(t));
+  const pathRef = useRef(createPathRef(basePath));
+  const hidden = useState(() => api.query.babe ? [] : ['forks']);
 
   return (
     <main className={className}>
@@ -67,11 +81,10 @@ function ExplorerApp ({ basePath, className }: Props): React.ReactElement<Props>
         items={itemsRef.current}
       />
       <Switch>
-        <Route path={`${basePath}/forks`}><Forks /></Route>
-        <Route path={`${basePath}/latency`}><Latency /></Route>
-        <Route path={`${basePath}/query/:value`}><BlockInfo /></Route>
-        <Route path={`${basePath}/query`}><BlockInfo /></Route>
-        <Route path={`${basePath}/node`}><NodeInfo /></Route>
+        <Route path={pathRef.current.forks}><Forks /></Route>
+        <Route path={pathRef.current.latency}><Latency /></Route>
+        <Route path={pathRef.current.query}><BlockInfo /></Route>
+        <Route path={pathRef.current.node}><NodeInfo /></Route>
         <Route>
           <Main
             eventCount={eventCount}

packages/page-extrinsics/src/Decoder.tsx

@@ -40,7 +40,7 @@ const DEFAULT_INFO: ExtrinsicInfo = {
 };
 
 function Decoder ({ className, defaultValue, setLast }: Props): React.ReactElement<Props> {
-  const { value: encoded } = useParams<{ value: string }>();
+  const { encoded } = useParams<{ encoded: string }>();
   const [initialValue] = useState(() => defaultValue || encoded);
   const { t } = useTranslation();
   const { api } = useApi();

packages/page-extrinsics/src/index.tsx

@@ -1,6 +1,8 @@
 // Copyright 2017-2022 @polkadot/app-extrinsics authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { TFunction } from 'i18next';
+import type { TabItem } from '@polkadot/react-components/Tabs/types';
 import type { AppProps as Props } from '@polkadot/react-components/types';
 import type { DecodedExtrinsic } from './types';
 
@@ -13,11 +15,17 @@ import Decoder from './Decoder';
 import Submission from './Submission';
 import { useTranslation } from './translate';
 
-function ExtrinsicsApp ({ basePath }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
-  const [decoded, setDecoded] = useState<DecodedExtrinsic | null>(null);
+function createPathRef (basePath: string): Record<string, string | string[]> {
+  return {
+    decode: [
+      `${basePath}/decode/:encoded`,
+      `${basePath}/decode`
+    ]
+  };
+}
 
-  const itemsRef = useRef([
+function createItemsRef (t: TFunction): TabItem[] {
+  return [
     {
       isRoot: true,
       name: 'create',
@@ -28,7 +36,14 @@ function ExtrinsicsApp ({ basePath }: Props): React.ReactElement<Props> {
       name: 'decode',
       text: t<string>('Decode')
     }
-  ]);
+  ];
+}
+
+function ExtrinsicsApp ({ basePath }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const [decoded, setDecoded] = useState<DecodedExtrinsic | null>(null);
+  const itemsRef = useRef(createItemsRef(t));
+  const pathRef = useRef(createPathRef(basePath));
 
   return (
     <main className='extrinsics--App'>
@@ -37,7 +52,7 @@ function ExtrinsicsApp ({ basePath }: Props): React.ReactElement<Props> {
         items={itemsRef.current}
       />
       <Switch>
-        <Route path={[`${basePath}/decode/:value`, `${basePath}/decode`]}>
+        <Route path={pathRef.current.decode}>
           <Decoder
             defaultValue={decoded && decoded.hex}
             setLast={setDecoded}

packages/page-staking/src/index.tsx

@@ -6,7 +6,7 @@ import type { AppProps as Props, ThemeProps } from '@polkadot/react-components/t
 import type { ElectionStatus, ParaValidatorIndex, ValidatorId } from '@polkadot/types/interfaces';
 import type { BN } from '@polkadot/util';
 
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { Route, Switch } from 'react-router';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
@@ -45,6 +45,20 @@ const OPT_MULTI = {
   ]
 };
 
+function createPathRef (basePath: string): Record<string, string | string[]> {
+  return {
+    bags: `${basePath}/bags`,
+    payout: `${basePath}/payout`,
+    pools: `${basePath}/pools`,
+    query: [
+      `${basePath}/query/:value`,
+      `${basePath}/query`
+    ],
+    slashes: `${basePath}/slashes`,
+    targets: `${basePath}/targets`
+  };
+}
+
 function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
@@ -65,6 +79,7 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
   const ownStashes = useOwnStashInfos();
   const slashes = useAvailableSlashes();
   const targets = useSortedTargets(favorites, withLedger);
+  const pathRef = useRef(createPathRef(basePath));
 
   const hasQueries = useMemo(
     () => hasAccounts && !!(api.query.imOnline?.authoredBlocks) && !!(api.query.staking.activeEra),
@@ -143,29 +158,29 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
         items={items}
       />
       <Switch>
-        <Route path={`${basePath}/bags`}>
+        <Route path={pathRef.current.bags}>
           <Bags ownStashes={ownStashes} />
         </Route>
-        <Route path={`${basePath}/payout`}>
+        <Route path={pathRef.current.payout}>
           <Payouts
             isInElection={isInElection}
             ownPools={ownPools}
             ownValidators={ownValidators}
           />
         </Route>
-        <Route path={`${basePath}/pools`}>
+        <Route path={pathRef.current.pools}>
           <Pools ownPools={ownPools} />
         </Route>
-        <Route path={[`${basePath}/query/:value`, `${basePath}/query`]}>
+        <Route path={pathRef.current.query}>
           <Query />
         </Route>
-        <Route path={`${basePath}/slashes`}>
+        <Route path={pathRef.current.slashes}>
           <Slashes
             ownStashes={ownStashes}
             slashes={slashes}
           />
         </Route>
-        <Route path={`${basePath}/targets`}>
+        <Route path={pathRef.current.targets}>
           <Targets
             isInElection={isInElection}
             nominatedBy={nominatedBy}

packages/react-components/src/Inspect.tsx

@@ -117,13 +117,14 @@ export default React.memo(styled(DecodedInspect)`
 
         td:first-child {
           color: var(--color-label);
-          padding-right: 0.5em;
+          padding: 0 0.5em 0 1rem;
           text-align: right;
           white-space: nowrap;
         }
 
         &:not(.isLink) td:last-child {
           font: var(--font-mono);
+          width: 100%;
         }
 
         &.isLink td {