From c80b14e620ca42f97055ca572da52ae1eceaa91b Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Sun, 15 Jan 2023 14:52:31 +0200
Subject: [PATCH] Additional styled injection changes (contracts, explorer,
 ..., settings) (#8811)

* Additional styled injection changes (contracts, explorer, ..., settings)

* Fix build
---
 .../page-accounts/test/pages/accountsPage.tsx |  4 +--
 .../test/pages/addressesPage.tsx              |  4 +--
 packages/page-contracts/src/Codes/Code.tsx    | 22 ++++++++------
 .../page-contracts/src/Contracts/Call.tsx     | 14 +++++----
 .../page-contracts/src/Contracts/Contract.tsx | 10 ++++---
 .../src/Contracts/ContractsTable.tsx          |  1 -
 .../page-contracts/src/Contracts/Outcome.tsx  | 10 ++++---
 .../page-contracts/src/Contracts/index.tsx    | 16 ++++++----
 .../page-contracts/src/shared/CodeRow.tsx     | 10 ++++---
 .../src/shared/InputMegaGas.tsx               | 12 ++++----
 .../page-contracts/src/shared/Message.tsx     | 10 ++++---
 .../src/shared/MessageSignature.tsx           | 10 ++++---
 .../page-contracts/src/shared/Messages.tsx    | 29 +++++++++++--------
 packages/page-explorer/src/Api/index.tsx      | 10 ++++---
 .../page-explorer/src/BlockInfo/Extrinsic.tsx | 10 ++++---
 packages/page-explorer/src/Forks.tsx          | 15 +++++-----
 packages/page-explorer/src/Latency/Chart.tsx  | 10 ++++---
 packages/page-explorer/src/Latency/index.tsx  | 10 ++++---
 packages/page-explorer/src/NodeInfo/Peers.tsx | 10 ++++---
 packages/page-explorer/src/Query.tsx          | 10 ++++---
 packages/page-extrinsics/src/Decoded.tsx      | 10 ++++---
 packages/page-extrinsics/src/Decoder.tsx      | 10 ++++---
 packages/page-files/src/CrustFiles.tsx        | 10 ++++---
 packages/page-files/src/Progress.tsx          | 10 ++++---
 packages/page-files/src/UploadModal.tsx       | 10 ++++---
 packages/page-js/src/Output.tsx               | 10 ++++---
 packages/page-js/src/Playground.tsx           | 10 ++++---
 packages/page-nfts/src/AccountItems/index.tsx | 10 ++++---
 .../src/Overview/Parachain.tsx                | 10 ++++---
 .../src/Overview/ParachainInfo.tsx            | 10 ++++---
 packages/page-poll/src/index.tsx              | 10 ++++---
 packages/page-rpc/src/Rpc/Account.tsx         | 10 ++++---
 packages/page-settings/src/Developer.tsx      | 10 ++++---
 .../page-settings/src/I18n/StringInput.tsx    | 10 ++++---
 packages/page-settings/src/I18n/index.tsx     | 10 ++++---
 .../src/Metadata/ChainColorIndicator.tsx      | 14 +++++----
 .../page-settings/src/Metadata/Extensions.tsx | 10 ++++---
 .../src/Metadata/NetworkSpecs.tsx             | 10 ++++---
 packages/page-settings/src/index.tsx          |  5 +---
 39 files changed, 241 insertions(+), 175 deletions(-)

diff --git a/packages/page-accounts/test/pages/accountsPage.tsx b/packages/page-accounts/test/pages/accountsPage.tsx
index cc9a7ab068..69c91980e4 100644
--- a/packages/page-accounts/test/pages/accountsPage.tsx
+++ b/packages/page-accounts/test/pages/accountsPage.tsx
@@ -18,9 +18,7 @@ const NOOP_CHANGE = () => undefined;
 export class AccountsPage extends Page {
   constructor () {
     super(
-      <AccountOverview
-        onStatusChange={NOOP_CHANGE}
-      />,
+      <AccountOverview onStatusChange={NOOP_CHANGE} />,
       'Account-'
     );
   }
diff --git a/packages/page-addresses/test/pages/addressesPage.tsx b/packages/page-addresses/test/pages/addressesPage.tsx
index 8e5b6608eb..1b2f2afc93 100644
--- a/packages/page-addresses/test/pages/addressesPage.tsx
+++ b/packages/page-addresses/test/pages/addressesPage.tsx
@@ -24,9 +24,7 @@ jest.mock('@polkadot/react-hooks/useAddresses', () => ({
 export class AddressesPage extends Page {
   constructor () {
     super(
-      <AddressOverview
-        onStatusChange={NOOP_CHANGE}
-      />,
+      <AddressOverview onStatusChange={NOOP_CHANGE} />,
       'Address-'
     );
   }
diff --git a/packages/page-contracts/src/Codes/Code.tsx b/packages/page-contracts/src/Codes/Code.tsx
index 9b195a4b36..bf86fdfa29 100644
--- a/packages/page-contracts/src/Codes/Code.tsx
+++ b/packages/page-contracts/src/Codes/Code.tsx
@@ -55,7 +55,7 @@ function Code ({ className, code, onShowDeploy }: Props): React.ReactElement<Pro
   );
 
   return (
-    <tr className={className}>
+    <StyledTr className={className}>
       <td className='address top'>
         <Card>
           <CodeRow
@@ -81,11 +81,13 @@ function Code ({ className, code, onShowDeploy }: Props): React.ReactElement<Pro
         </Card>
       </td>
       <td className='all top'>
-        <Messages
-          contractAbi={contractAbi}
-          onSelectConstructor={_onDeployConstructor}
-          withConstructors
-        />
+        {contractAbi && (
+          <Messages
+            contractAbi={contractAbi}
+            onSelectConstructor={_onDeployConstructor}
+            withConstructors
+          />
+        )}
       </td>
       <td className='together codeHash'>
         <div>{`${code.json.codeHash.slice(0, 8)}…${code.json.codeHash.slice(-6)}`}</div>
@@ -109,11 +111,11 @@ function Code ({ className, code, onShowDeploy }: Props): React.ReactElement<Pro
           />
         )}
       </td>
-    </tr>
+    </StyledTr>
   );
 }
 
-export default React.memo(styled(Code)`
+const StyledTr = styled.tr`
   .codeHash {
     div {
       display: inline;
@@ -124,4 +126,6 @@ export default React.memo(styled(Code)`
       }
     }
   }
-`);
+`;
+
+export default React.memo(Code);
diff --git a/packages/page-contracts/src/Contracts/Call.tsx b/packages/page-contracts/src/Contracts/Call.tsx
index 0c408f4b07..7f5f8c4e94 100644
--- a/packages/page-contracts/src/Contracts/Call.tsx
+++ b/packages/page-contracts/src/Contracts/Call.tsx
@@ -24,7 +24,7 @@ interface Props {
   className?: string;
   contract: ContractPromise;
   messageIndex: number;
-  onCallResult?: (messageIndex: number, result?: ContractCallOutcome | void) => void;
+  onCallResult?: (messageIndex: number, result?: ContractCallOutcome) => void;
   onChangeMessage: (messageIndex: number) => void;
   onClose: () => void;
 }
@@ -111,8 +111,8 @@ function Call ({ className = '', contract, messageIndex, onCallResult, onChangeM
   const isViaRpc = (isViaCall || (!message.isMutating && !message.isPayable));
 
   return (
-    <Modal
-      className={[className || '', 'app--contracts-Modal'].join(' ')}
+    <StyledModal
+      className={`${className} app--contracts-Modal`}
       header={t<string>('Call a contract')}
       onClose={onClose}
     >
@@ -217,11 +217,11 @@ function Call ({ className = '', contract, messageIndex, onCallResult, onChangeM
           )
         }
       </Modal.Actions>
-    </Modal>
+    </StyledModal>
   );
 }
 
-export default React.memo(styled(Call)`
+const StyledModal = styled(Modal)`
   .rpc-toggle {
     margin-top: 1rem;
     display: flex;
@@ -235,4 +235,6 @@ export default React.memo(styled(Call)`
   .outcomes {
     margin-top: 1rem;
   }
-`);
+`;
+
+export default React.memo(Call);
diff --git a/packages/page-contracts/src/Contracts/Contract.tsx b/packages/page-contracts/src/Contracts/Contract.tsx
index 37fcbb0876..20afcfd4b5 100644
--- a/packages/page-contracts/src/Contracts/Contract.tsx
+++ b/packages/page-contracts/src/Contracts/Contract.tsx
@@ -65,7 +65,7 @@ function Contract ({ className, contract, index, links, onCall }: Props): React.
   );
 
   return (
-    <tr className={className}>
+    <StyledTr className={className}>
       <td className='address top'>
         {isForgetOpen && (
           <Forget
@@ -116,12 +116,14 @@ function Contract ({ className, contract, index, links, onCall }: Props): React.
           onClick={toggleIsForgetOpen}
         />
       </td>
-    </tr>
+    </StyledTr>
   );
 }
 
-export default React.memo(styled(Contract)`
+const StyledTr = styled.tr`
   td.top a+a {
     margin-left: 0.75rem;
   }
-`);
+`;
+
+export default React.memo(Contract);
diff --git a/packages/page-contracts/src/Contracts/ContractsTable.tsx b/packages/page-contracts/src/Contracts/ContractsTable.tsx
index 29fd57134c..ca3922c983 100644
--- a/packages/page-contracts/src/Contracts/ContractsTable.tsx
+++ b/packages/page-contracts/src/Contracts/ContractsTable.tsx
@@ -123,7 +123,6 @@ function ContractsTable ({ contracts: keyringContracts }: Props): React.ReactEle
       {isCallOpen && contract && (
         <Call
           contract={contract}
-          isOpen={isCallOpen}
           messageIndex={messageIndex}
           onCallResult={onCallResult}
           onChangeMessage={_setMessageIndex}
diff --git a/packages/page-contracts/src/Contracts/Outcome.tsx b/packages/page-contracts/src/Contracts/Outcome.tsx
index de2ff977da..617c04a78b 100644
--- a/packages/page-contracts/src/Contracts/Outcome.tsx
+++ b/packages/page-contracts/src/Contracts/Outcome.tsx
@@ -19,7 +19,7 @@ interface Props {
 
 function Outcome ({ className = '', onClear, outcome: { from, message, output, params, result, when } }: Props): React.ReactElement<Props> | null {
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       <IdentityIcon value={from} />
       <Output
         className='output'
@@ -44,11 +44,11 @@ function Outcome ({ className = '', onClear, outcome: { from, message, output, p
         icon='times'
         onClick={onClear}
       />
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Outcome)`
+const StyledDiv = styled.div`
   align-items: center;
   display: flex;
 
@@ -56,4 +56,6 @@ export default React.memo(styled(Outcome)`
     flex: 1 1;
     margin: 0.25rem 0.5rem;
   }
-`);
+`;
+
+export default React.memo(Outcome);
diff --git a/packages/page-contracts/src/Contracts/index.tsx b/packages/page-contracts/src/Contracts/index.tsx
index 3c49303f9d..80b26dfbb4 100644
--- a/packages/page-contracts/src/Contracts/index.tsx
+++ b/packages/page-contracts/src/Contracts/index.tsx
@@ -1,8 +1,6 @@
 // Copyright 2017-2023 @polkadot/app-contracts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { AppProps as Props } from '@polkadot/react-components/types';
-
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 
@@ -20,6 +18,10 @@ import ContractsTable from './ContractsTable';
 import Deploy from './Deploy';
 import Summary from './Summary';
 
+interface Props {
+  className?: string;
+}
+
 function Contracts ({ className = '' }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { allCodes, codeTrigger } = useCodes();
@@ -46,7 +48,7 @@ function Contracts ({ className = '' }: Props): React.ReactElement<Props> {
   );
 
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       <Summary trigger={codeTrigger} />
       <Button.Group>
         <Button
@@ -90,15 +92,17 @@ function Contracts ({ className = '' }: Props): React.ReactElement<Props> {
       {isAddOpen && (
         <ContractAdd onClose={toggleAdd} />
       )}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Contracts)`
+const StyledDiv = styled.div`
   .ui--Table td > article {
     background: transparent;
     border: none;
     margin: 0;
     padding: 0;
   }
-`);
+`;
+
+export default React.memo(Contracts);
diff --git a/packages/page-contracts/src/shared/CodeRow.tsx b/packages/page-contracts/src/shared/CodeRow.tsx
index 78d6bb9603..9f9b9efae2 100644
--- a/packages/page-contracts/src/shared/CodeRow.tsx
+++ b/packages/page-contracts/src/shared/CodeRow.tsx
@@ -53,7 +53,7 @@ function CodeRow ({ buttons, children, className, code: { json }, isInline, with
   );
 
   return (
-    <Row
+    <StyledRow
       buttons={buttons}
       className={className}
       icon={
@@ -70,11 +70,11 @@ function CodeRow ({ buttons, children, className, code: { json }, isInline, with
       tags={withTags ? tags : undefined}
     >
       {children}
-    </Row>
+    </StyledRow>
   );
 }
 
-export default React.memo(styled(CodeRow)`
+const StyledRow = styled(Row)`
   .ui--CodeRow-icon {
     margin-right: -0.5em;
     background: #eee;
@@ -86,4 +86,6 @@ export default React.memo(styled(CodeRow)`
     justify-content: center;
     align-items: center;
   }
-`);
+`;
+
+export default React.memo(CodeRow);
diff --git a/packages/page-contracts/src/shared/InputMegaGas.tsx b/packages/page-contracts/src/shared/InputMegaGas.tsx
index 3f3a73d4ea..a980f1cc56 100644
--- a/packages/page-contracts/src/shared/InputMegaGas.tsx
+++ b/packages/page-contracts/src/shared/InputMegaGas.tsx
@@ -14,7 +14,7 @@ import { useTranslation } from '../translate';
 
 interface Props {
   className?: string;
-  estimatedWeight?: BN;
+  estimatedWeight?: BN | null;
   isCall?: boolean;
   weight: UseWeight;
 }
@@ -41,7 +41,7 @@ function InputMegaGas ({ className, estimatedWeight, isCall, weight: { execution
   const isDisabled = !!estimatedMg && withEstimate;
 
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       <InputNumber
         defaultValue={estimatedMg && isDisabled ? estimatedMg.toString() : undefined}
         isDisabled={isDisabled}
@@ -70,12 +70,14 @@ function InputMegaGas ({ className, estimatedWeight, isCall, weight: { execution
         {t<string>('{{executionTime}}s execution time', { replace: { executionTime: executionTime.toFixed(3) } })}{', '}
         {t<string>('{{percentage}}% of block weight', { replace: { percentage: percentage.toFixed(2) } })}
       </div>
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(InputMegaGas)`
+const StyledDiv = styled.div`
   .contracts--InputMegaGas-meter {
     text-align: right;
   }
-`);
+`;
+
+export default React.memo(InputMegaGas);
diff --git a/packages/page-contracts/src/shared/Message.tsx b/packages/page-contracts/src/shared/Message.tsx
index fecb176ee8..143beb1ac8 100644
--- a/packages/page-contracts/src/shared/Message.tsx
+++ b/packages/page-contracts/src/shared/Message.tsx
@@ -48,7 +48,7 @@ function Message ({ className = '', index, lastResult, message, onSelect }: Prop
   );
 
   return (
-    <div
+    <StyledDiv
       className={`${className} ${!onSelect ? 'exempt-hover' : ''} ${message.isConstructor ? 'constructor' : ''}`}
       key={`${message.identifier}-${index}`}
     >
@@ -96,11 +96,11 @@ function Message ({ className = '', index, lastResult, message, onSelect }: Prop
           {valueToText('Text', lastResult.output)}
         </Output>
       )}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Message)`
+const StyledDiv = styled.div`
   align-items: center;
   border-radius: 0.25rem;
   display: flex;
@@ -129,4 +129,6 @@ export default React.memo(styled(Message)`
   &+& {
     margin-top: 0.5rem;
   }
-`);
+`;
+
+export default React.memo(Message);
diff --git a/packages/page-contracts/src/shared/MessageSignature.tsx b/packages/page-contracts/src/shared/MessageSignature.tsx
index b22a886620..88049cee6a 100644
--- a/packages/page-contracts/src/shared/MessageSignature.tsx
+++ b/packages/page-contracts/src/shared/MessageSignature.tsx
@@ -33,7 +33,7 @@ function MessageSignature ({ className, message: { args, isConstructor, isMutati
   const { api } = useApi();
 
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       <span className='ui--MessageSignature-name'>{method}</span>
       {' '}({args.map(({ name, type }, index): React.ReactNode => {
         return (
@@ -74,11 +74,11 @@ function MessageSignature ({ className, message: { args, isConstructor, isMutati
           )}
         </>
       )}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(MessageSignature)`
+const StyledDiv = styled.div`
   font: var(--font-mono);
   font-weight: var(--font-weight-normal);
   flex-grow: 1;
@@ -101,4 +101,6 @@ export default React.memo(styled(MessageSignature)`
   .ui--MessageSignature-returnType {
     color: #ff8600;
   }
-`);
+`;
+
+export default React.memo(MessageSignature);
diff --git a/packages/page-contracts/src/shared/Messages.tsx b/packages/page-contracts/src/shared/Messages.tsx
index 0669a5c991..512c335863 100644
--- a/packages/page-contracts/src/shared/Messages.tsx
+++ b/packages/page-contracts/src/shared/Messages.tsx
@@ -50,7 +50,7 @@ function Messages ({ className = '', contract, contractAbi: { constructors, info
   const { api } = useApi();
   const optInfo = useCall<Option<ContractInfo>>(contract && api.query.contracts.contractInfoOf, [contract?.address]);
   const [isUpdating, setIsUpdating] = useState(false);
-  const [lastResults, setLastResults] = useState<(ContractCallOutcome | void)[]>([]);
+  const [lastResults, setLastResults] = useState<(ContractCallOutcome | undefined)[]>([]);
 
   const _onExpander = useCallback(
     (isOpen: boolean): void => {
@@ -63,13 +63,16 @@ function Messages ({ className = '', contract, contractAbi: { constructors, info
     (): void => {
       optInfo && contract &&
         Promise
-          .all(messages.map((m) =>
-            m.isMutating || m.args.length !== 0
-              ? Promise.resolve(undefined)
-              : contract
-                .query[m.method](READ_ADDR, { gasLimit: -1, value: 0 })
-                .catch((e: Error) => console.error(`contract.query.${m.method}:: ${e.message}`))
-          ))
+          .all(
+            messages.map((m) =>
+              m.isMutating || m.args.length !== 0
+                ? Promise.resolve(undefined)
+                : contract
+                  .query[m.method](READ_ADDR, { gasLimit: -1, value: 0 })
+                  .catch((e: Error) => console.error(`contract.query.${m.method}:: ${e.message}`))
+                  .then(() => undefined)
+            )
+          )
           .then(setLastResults)
           .catch(console.error);
     },
@@ -94,7 +97,7 @@ function Messages ({ className = '', contract, contractAbi: { constructors, info
   );
 
   return (
-    <div className={`ui--Messages ${className}${isLabelled ? ' isLabelled' : ''}`}>
+    <StyledDiv className={`ui--Messages ${className}${isLabelled ? ' isLabelled' : ''}`}>
       {withConstructors && (
         <Expander summary={t<string>('Constructors ({{count}})', { replace: { count: constructors.length } })}>
           {sortMessages(constructors).map(([message, index]) => (
@@ -126,11 +129,11 @@ function Messages ({ className = '', contract, contractAbi: { constructors, info
       {withWasm && source.wasm.length !== 0 && (
         <div>{t<string>('{{size}} WASM bytes', { replace: { size: formatNumber(source.wasm.length) } })}</div>
       )}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Messages)`
+const StyledDiv = styled.div`
   padding-bottom: 0.75rem !important;
 
   &.isLabelled {
@@ -141,4 +144,6 @@ export default React.memo(styled(Messages)`
     padding: 1rem 1rem 0.5rem;
     width: 100%;
   }
-`);
+`;
+
+export default React.memo(Messages);
diff --git a/packages/page-explorer/src/Api/index.tsx b/packages/page-explorer/src/Api/index.tsx
index f0437d618c..20bd50f643 100644
--- a/packages/page-explorer/src/Api/index.tsx
+++ b/packages/page-explorer/src/Api/index.tsx
@@ -108,7 +108,7 @@ function Api ({ className }: Props): React.ReactElement<Props> {
   const { stats: { total: { bytesRecv, bytesSent, requests: tReq, subscriptions: tSub } } } = stats[stats.length - 1];
 
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       <SummaryBox>
         <section>
           <CardSummary label={t<string>('sent')}>{formatNumber(bytesSent / 1024)}kB</CardSummary>
@@ -131,11 +131,11 @@ function Api ({ className }: Props): React.ReactElement<Props> {
         title={t<string>('transfer')}
         value={bytesChart}
       />
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Api)`
+const StyledDiv = styled.div`
   .container {
     background: var(--bg-table);
     border: 1px solid var(--border-table);
@@ -146,4 +146,6 @@ export default React.memo(styled(Api)`
   .container+.container {
     margin-top: 1rem;
   }
-`);
+`;
+
+export default React.memo(Api);
diff --git a/packages/page-explorer/src/BlockInfo/Extrinsic.tsx b/packages/page-explorer/src/BlockInfo/Extrinsic.tsx
index 91b645fcdf..255502fad3 100644
--- a/packages/page-explorer/src/BlockInfo/Extrinsic.tsx
+++ b/packages/page-explorer/src/BlockInfo/Extrinsic.tsx
@@ -113,7 +113,7 @@ function ExtrinsicDisplay ({ blockNumber, className = '', events, index, maxBloc
   );
 
   return (
-    <tr
+    <StyledTr
       className={className}
       key={`extrinsic:${index}`}
     >
@@ -176,11 +176,11 @@ function ExtrinsicDisplay ({ blockNumber, className = '', events, index, maxBloc
             : null
         }
       </td>
-    </tr>
+    </StyledTr>
   );
 }
 
-export default React.memo(styled(ExtrinsicDisplay)`
+const StyledTr = styled.tr`
   .explorer--BlockByHash-event+.explorer--BlockByHash-event {
     margin-top: 0.75rem;
   }
@@ -205,4 +205,6 @@ export default React.memo(styled(ExtrinsicDisplay)`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-`);
+`;
+
+export default React.memo(ExtrinsicDisplay);
diff --git a/packages/page-explorer/src/Forks.tsx b/packages/page-explorer/src/Forks.tsx
index 12c723a1ea..1705ecdda7 100644
--- a/packages/page-explorer/src/Forks.tsx
+++ b/packages/page-explorer/src/Forks.tsx
@@ -1,7 +1,6 @@
 // Copyright 2017-2023 @polkadot/app-explorer authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ApiProps } from '@polkadot/react-api/types';
 import type { Header } from '@polkadot/types/interfaces';
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -32,10 +31,8 @@ interface Link {
   hdr: LinkHeader;
 }
 
-interface Props extends ApiProps {
+interface Props {
   className?: string;
-  finHead?: Header;
-  newHead?: Header;
 }
 
 type UnsubFn = () => void;
@@ -375,7 +372,7 @@ function Forks ({ className }: Props): React.ReactElement<Props> | null {
   }
 
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       <SummaryBox>
         <section>
           <CardSummary label={t<string>('blocks')}>{formatNumber(countRef.current.numBlocks)}</CardSummary>
@@ -387,11 +384,11 @@ function Forks ({ className }: Props): React.ReactElement<Props> | null {
           {renderRows(createRows(tree.arr))}
         </tbody>
       </table>
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Forks)`
+const StyledDiv = styled.div`
   margin-bottom: 1.5rem;
 
   table {
@@ -460,4 +457,6 @@ export default React.memo(styled(Forks)`
       }
     }
   }
-`);
+`;
+
+export default React.memo(Forks);
diff --git a/packages/page-explorer/src/Latency/Chart.tsx b/packages/page-explorer/src/Latency/Chart.tsx
index 614780c511..f7ea6a5035 100644
--- a/packages/page-explorer/src/Latency/Chart.tsx
+++ b/packages/page-explorer/src/Latency/Chart.tsx
@@ -23,7 +23,7 @@ const OPTIONS = {
 
 function ChartDisplay ({ className, colors, legends, title, value: { labels, values } }: Props): React.ReactElement<Props> {
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       <h1>{title}</h1>
       <Chart.Line
         colors={colors}
@@ -32,14 +32,16 @@ function ChartDisplay ({ className, colors, legends, title, value: { labels, val
         options={OPTIONS}
         values={values}
       />
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(ChartDisplay)`
+const StyledDiv = styled.div`
   background: var(--bg-table);
   border: 1px solid var(--border-table);
   border-radius: 0.25rem;
   margin-bottom: 1rem;
   padding: 1rem 1.5rem;
-`);
+`;
+
+export default React.memo(ChartDisplay);
diff --git a/packages/page-explorer/src/Latency/index.tsx b/packages/page-explorer/src/Latency/index.tsx
index a43b16601b..96de9277e5 100644
--- a/packages/page-explorer/src/Latency/index.tsx
+++ b/packages/page-explorer/src/Latency/index.tsx
@@ -142,7 +142,7 @@ function Latency ({ className }: Props): React.ReactElement<Props> {
   const EMPTY_TIME = <span className='--tmp --digits'>0.000 <span className='postfix'>s</span></span>;
 
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       <SummaryBox>
         <section>
           <CardSummary label={t<string>('avg')}>
@@ -192,11 +192,11 @@ function Latency ({ className }: Props): React.ReactElement<Props> {
         )
         : <Spinner />
       }
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Latency)`
+const StyledDiv = styled.div`
   .container {
     background: var(--bg-table);
     border: 1px solid var(--border-table);
@@ -213,4 +213,6 @@ export default React.memo(styled(Latency)`
       font-size: var(--font-percent-tiny);
     }
   }
-`);
+`;
+
+export default React.memo(Latency);
diff --git a/packages/page-explorer/src/NodeInfo/Peers.tsx b/packages/page-explorer/src/NodeInfo/Peers.tsx
index aa86c6017f..1940fea2cf 100644
--- a/packages/page-explorer/src/NodeInfo/Peers.tsx
+++ b/packages/page-explorer/src/NodeInfo/Peers.tsx
@@ -44,7 +44,7 @@ function Peers ({ className = '', peers }: Props): React.ReactElement<Props> {
   );
 
   return (
-    <Table
+    <StyledTable
       className={className}
       empty={t<string>('no peers connected')}
       header={headerRef.current}
@@ -57,11 +57,11 @@ function Peers ({ className = '', peers }: Props): React.ReactElement<Props> {
           <td className='number bestNumber'>{formatNumber(bestNumber)}</td>
         </tr>
       ))}
-    </Table>
+    </StyledTable>
   );
 }
 
-export default React.memo(styled(Peers)`
+const StyledTable = styled(Table)`
   overflow-x: auto;
 
   td.roles {
@@ -73,4 +73,6 @@ export default React.memo(styled(Peers)`
     max-width: 11ch;
     width: 11ch;
   }
-`);
+`;
+
+export default React.memo(Peers);
diff --git a/packages/page-explorer/src/Query.tsx b/packages/page-explorer/src/Query.tsx
index caeaf1e304..88f2c9a24f 100644
--- a/packages/page-explorer/src/Query.tsx
+++ b/packages/page-explorer/src/Query.tsx
@@ -45,7 +45,7 @@ function Query ({ className = '', value: propsValue }: Props): React.ReactElemen
   );
 
   return (
-    <FilterOverlay className={`ui--FilterOverlay hasOwnMaxWidth ${className}`}>
+    <StyledFilterOverlay className={`ui--FilterOverlay hasOwnMaxWidth ${className}`}>
       <Input
         className='explorer--query'
         defaultValue={propsValue}
@@ -60,12 +60,14 @@ function Query ({ className = '', value: propsValue }: Props): React.ReactElemen
           onClick={_onQuery}
         />
       </Input>
-    </FilterOverlay>
+    </StyledFilterOverlay>
   );
 }
 
-export default React.memo(styled(Query)`
+const StyledFilterOverlay = styled(FilterOverlay)`
   .explorer--query {
     width: 20em;
   }
-`);
+`;
+
+export default React.memo(Query);
diff --git a/packages/page-extrinsics/src/Decoded.tsx b/packages/page-extrinsics/src/Decoded.tsx
index 9218afbeb8..26c3d38ca2 100644
--- a/packages/page-extrinsics/src/Decoded.tsx
+++ b/packages/page-extrinsics/src/Decoded.tsx
@@ -51,7 +51,7 @@ function Decoded ({ className, extrinsic, isCall, withData = true, withHash = tr
   }
 
   return (
-    <Columar
+    <StyledColumar
       className={className}
       isPadded={false}
     >
@@ -81,11 +81,11 @@ function Decoded ({ className, extrinsic, isCall, withData = true, withHash = tr
           label={t<string>('encoding details')}
         />
       </Columar.Column>
-    </Columar>
+    </StyledColumar>
   );
 }
 
-export default React.memo(styled(Decoded)`
+const StyledColumar = styled(Columar)`
   .ui--Column:last-child .ui--Labelled {
     padding-left: 0.5rem;
 
@@ -93,4 +93,6 @@ export default React.memo(styled(Decoded)`
       left: 2.05rem; /* 3.55 - 1.5 (diff from padding above) */
     }
   }
-`);
+`;
+
+export default React.memo(Decoded);
diff --git a/packages/page-extrinsics/src/Decoder.tsx b/packages/page-extrinsics/src/Decoder.tsx
index ff67652535..fe5d4f44d5 100644
--- a/packages/page-extrinsics/src/Decoder.tsx
+++ b/packages/page-extrinsics/src/Decoder.tsx
@@ -96,7 +96,7 @@ function Decoder ({ className, defaultValue, setLast }: Props): React.ReactEleme
   );
 
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       <Input
         defaultValue={initialValue}
         isError={!extrinsicFn}
@@ -126,11 +126,11 @@ function Decoder ({ className, defaultValue, setLast }: Props): React.ReactEleme
         isCall={isCall}
         withData={false}
       />
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Decoder)`
+const StyledDiv = styled.div`
   .ui--Call--toplevel {
     margin-top: 0;
   }
@@ -138,4 +138,6 @@ export default React.memo(styled(Decoder)`
   .ui--Call > .ui--Params.withBorder {
     padding-left: 2rem;
   }
-`);
+`;
+
+export default React.memo(Decoder);
diff --git a/packages/page-files/src/CrustFiles.tsx b/packages/page-files/src/CrustFiles.tsx
index 1d5edbf532..92c913ac9f 100644
--- a/packages/page-files/src/CrustFiles.tsx
+++ b/packages/page-files/src/CrustFiles.tsx
@@ -218,7 +218,7 @@ function CrustFiles ({ className }: Props): React.ReactElement<Props> {
     FileSaver.saveAs(blob, 'files.json');
   }, [wFiles]);
 
-  return <main className={className}>
+  return <StyledMain className={className}>
     <header></header>
     <input
       onChange={_onInputFile}
@@ -355,10 +355,10 @@ function CrustFiles ({ className }: Props): React.ReactElement<Props> {
     <div>
       {t('Note: The file list is cached locally, switching browsers or devices will not keep displaying the original browser information.')}
     </div>
-  </main>;
+  </StyledMain>;
 }
 
-export default React.memo(styled(CrustFiles)`
+const StyledMain = styled.main`
   h1 {
     text-transform: unset !important;
   }
@@ -398,4 +398,6 @@ export default React.memo(styled(CrustFiles)`
       }
     }
   }
-`);
+`;
+
+export default React.memo(CrustFiles);
diff --git a/packages/page-files/src/Progress.tsx b/packages/page-files/src/Progress.tsx
index 3a0444cbb5..feeaf1bdf4 100644
--- a/packages/page-files/src/Progress.tsx
+++ b/packages/page-files/src/Progress.tsx
@@ -12,7 +12,7 @@ export interface Props {
 
 function Progress ({ className = '', progress, style }: Props) {
   return (
-    <div
+    <StyledDiv
       className={`highlight--border ${className}`}
       style={style}
     >
@@ -20,11 +20,11 @@ function Progress ({ className = '', progress, style }: Props) {
         className='file-progress-bar highlight--bg'
         style={{ width: `${progress}%` }}
       />
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo<Props>(styled(Progress)`
+const StyledDiv = styled.div`
   width: 100%;
   background: unset;
   overflow: hidden;
@@ -38,4 +38,6 @@ export default React.memo<Props>(styled(Progress)`
     width: 0;
     height: 100%;
   }
-`);
+`;
+
+export default React.memo<Props>(Progress);
diff --git a/packages/page-files/src/UploadModal.tsx b/packages/page-files/src/UploadModal.tsx
index ae6bc19720..9b170675ef 100644
--- a/packages/page-files/src/UploadModal.tsx
+++ b/packages/page-files/src/UploadModal.tsx
@@ -275,7 +275,7 @@ function UploadModal ({ className, file, onClose = NOOP, onSuccess = NOOP }: Pro
   }, [pinEndpoints, setCurrentPinEndpoint]);
 
   return (
-    <Modal
+    <StyledModal
       className={className}
       header={t<string>('Upload File')}
       onClose={_onClose}
@@ -353,11 +353,11 @@ function UploadModal ({ className, file, onClose = NOOP, onSuccess = NOOP }: Pro
           onClick={_onClickUp}
         />
       </Modal.Actions>
-    </Modal>
+    </StyledModal>
   );
 }
 
-export default React.memo(styled(UploadModal)`
+const StyledModal = styled(Modal)`
   .files {
     max-height: 300;
     overflow: auto;
@@ -377,4 +377,6 @@ export default React.memo(styled(UploadModal)`
     margin-top: 2rem;
     width: calc(100% - 2rem);
   }
-`);
+`;
+
+export default React.memo(UploadModal);
diff --git a/packages/page-js/src/Output.tsx b/packages/page-js/src/Output.tsx
index 8bd5185c33..62302b6cea 100644
--- a/packages/page-js/src/Output.tsx
+++ b/packages/page-js/src/Output.tsx
@@ -61,7 +61,7 @@ const renderEntry = ({ args, type }: Log, index: number): React.ReactNode => {
 
 function Output ({ children, className = '', logs }: Props): React.ReactElement<Props> {
   return (
-    <article className={`container ${className}`}>
+    <StyledArticle className={`container ${className}`}>
       <div className='logs-wrapper'>
         <div className='logs-container'>
           <pre className='logs-content'>
@@ -70,11 +70,11 @@ function Output ({ children, className = '', logs }: Props): React.ReactElement<
         </div>
       </div>
       {children}
-    </article>
+    </StyledArticle>
   );
 }
 
-export default React.memo(styled(Output)`
+const StyledArticle = styled.article`
   background-color: #4e4e4e;
   color: #ffffff;
   display: flex;
@@ -111,4 +111,6 @@ export default React.memo(styled(Output)`
       color: #f88;
     }
   }
-`);
+`;
+
+export default React.memo(Output);
diff --git a/packages/page-js/src/Playground.tsx b/packages/page-js/src/Playground.tsx
index 5c4e4d77f8..c811d0930a 100644
--- a/packages/page-js/src/Playground.tsx
+++ b/packages/page-js/src/Playground.tsx
@@ -237,7 +237,7 @@ function Playground ({ basePath, className = '' }: Props): React.ReactElement<Pr
   const snippetName = selected.type === 'custom' ? selected.text : undefined;
 
   return (
-    <main className={`js--App ${className}`}>
+    <StyledMain className={`js--App ${className}`}>
       <Tabs
         basePath={basePath}
         items={tabsRef.current}
@@ -295,11 +295,11 @@ function Playground ({ basePath, className = '' }: Props): React.ReactElement<Pr
           </article>
         </div>
       )}
-    </main>
+    </StyledMain>
   );
 }
 
-export default React.memo(styled(Playground)`
+const StyledMain = styled.main`
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -418,4 +418,6 @@ export default React.memo(styled(Playground)`
       margin-bottom: 0;
     }
   }
-`);
+`;
+
+export default React.memo(Playground);
diff --git a/packages/page-nfts/src/AccountItems/index.tsx b/packages/page-nfts/src/AccountItems/index.tsx
index c66578325a..66ebf8b616 100644
--- a/packages/page-nfts/src/AccountItems/index.tsx
+++ b/packages/page-nfts/src/AccountItems/index.tsx
@@ -68,7 +68,7 @@ function AccountItems ({ className, infos = [] }: Props): React.ReactElement<Pro
   }, [completeInfos, infoIndex]);
 
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       <Table
         empty={!info && accountItems && t<string>('No accounts with items found for the collection')}
         filter={collectionOptions.length
@@ -93,12 +93,14 @@ function AccountItems ({ className, infos = [] }: Props): React.ReactElement<Pro
           />
         ))}
       </Table>
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(AccountItems)`
+const StyledDiv = styled.div`
   table {
     overflow: auto;
   }
-`);
+`;
+
+export default React.memo(AccountItems);
diff --git a/packages/page-parachains/src/Overview/Parachain.tsx b/packages/page-parachains/src/Overview/Parachain.tsx
index 8de15c6aaf..1292fd0388 100644
--- a/packages/page-parachains/src/Overview/Parachain.tsx
+++ b/packages/page-parachains/src/Overview/Parachain.tsx
@@ -89,7 +89,7 @@ function Parachain ({ bestNumber, className = '', id, lastBacked, lastInclusion,
   }, [paraInfo, sessionValidators]);
 
   return (
-    <tr className={`${className} ${(lastBacked || lastInclusion || paraInfo.watermark) ? '' : 'isDisabled'}`}>
+    <StyledTr className={`${className} ${(lastBacked || lastInclusion || paraInfo.watermark) ? '' : 'isDisabled'}`}>
       <Table.Column.Id value={id} />
       <td className='badge together'>
         {paraInfo.paraInfo?.locked?.isFalse
@@ -172,11 +172,11 @@ function Parachain ({ bestNumber, className = '', id, lastBacked, lastInclusion,
           periods={paraInfo.leases}
         />
       </td>
-    </tr>
+    </StyledTr>
   );
 }
 
-export default React.memo(styled(Parachain)`
+const StyledTr = styled.tr`
   &.isDisabled {
     td {
       opacity: 0.5
@@ -188,4 +188,6 @@ export default React.memo(styled(Parachain)`
     margin: 0 0.25rem 0 0;
     vertical-align: middle;
   }
-`);
+`;
+
+export default React.memo(Parachain);
diff --git a/packages/page-parachains/src/Overview/ParachainInfo.tsx b/packages/page-parachains/src/Overview/ParachainInfo.tsx
index 03528dda8f..5a60c6df2d 100644
--- a/packages/page-parachains/src/Overview/ParachainInfo.tsx
+++ b/packages/page-parachains/src/Overview/ParachainInfo.tsx
@@ -19,14 +19,14 @@ function ParachainInfo ({ className, id }: Props): React.ReactElement<Props> {
   const { bestNumber, runtimeVersion } = useChainDetails(id);
 
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       {bestNumber && <div>{formatNumber(bestNumber)}</div>}
       {runtimeVersion && <div className='version'><div className='media--1100'>{runtimeVersion.specName.toString()}</div><div className='media--1100'>/</div><div>{runtimeVersion.specVersion.toString()}</div></div>}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(ParachainInfo)`
+const StyledDiv = styled.div`
   .version {
     font-size: var(--font-size-small);
     white-space: nowrap;
@@ -38,4 +38,6 @@ export default React.memo(styled(ParachainInfo)`
       text-overflow: ellipsis;
     }
   }
-`);
+`;
+
+export default React.memo(ParachainInfo);
diff --git a/packages/page-poll/src/index.tsx b/packages/page-poll/src/index.tsx
index 6a6a87491a..16e636b7e4 100644
--- a/packages/page-poll/src/index.tsx
+++ b/packages/page-poll/src/index.tsx
@@ -94,7 +94,7 @@ function PollApp ({ basePath, className }: Props): React.ReactElement<Props> {
   /* eslint-disable react/jsx-max-props-per-line */
 
   return (
-    <main className={className}>
+    <StyledMain className={className}>
       <Tabs
         basePath={basePath}
         items={itemsRef.current}
@@ -201,11 +201,11 @@ function PollApp ({ basePath, className }: Props): React.ReactElement<Props> {
           </ul>
         </div>
       </div>
-    </main>
+    </StyledMain>
   );
 }
 
-export default React.memo(styled(PollApp)`
+const StyledMain = styled.main`
   .pollActions {
     opacity: 0.75;
   }
@@ -298,4 +298,6 @@ export default React.memo(styled(PollApp)`
       margin: 0.75rem;
     }
   }
-`);
+`;
+
+export default React.memo(PollApp);
diff --git a/packages/page-rpc/src/Rpc/Account.tsx b/packages/page-rpc/src/Rpc/Account.tsx
index 0e747138e5..64c3654cf9 100644
--- a/packages/page-rpc/src/Rpc/Account.tsx
+++ b/packages/page-rpc/src/Rpc/Account.tsx
@@ -29,7 +29,7 @@ function Account ({ className = '', defaultValue, isError, onChange }: Props): R
   }, [accountId, accountNonce, onChange]);
 
   return (
-    <div className={`ui--row ${className}`}>
+    <StyledDiv className={`ui--row ${className}`}>
       <div className='large'>
         <InputAddress
           defaultValue={defaultValue}
@@ -52,11 +52,13 @@ function Account ({ className = '', defaultValue, isError, onChange }: Props): R
           />
         </Labelled>
       )}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Account)`
+const StyledDiv = styled.div`
   box-sizing: border-box;
   padding-left: 2em;
-`);
+`;
+
+export default React.memo(Account);
diff --git a/packages/page-settings/src/Developer.tsx b/packages/page-settings/src/Developer.tsx
index d12816ecf8..17da97c071 100644
--- a/packages/page-settings/src/Developer.tsx
+++ b/packages/page-settings/src/Developer.tsx
@@ -165,7 +165,7 @@ function Developer ({ className = '', onStatusChange }: Props): React.ReactEleme
   /* eslint-disable react/jsx-max-props-per-line */
 
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       <div className='ui--row'>
         <div className='full'>
           <InputFile
@@ -210,11 +210,11 @@ function Developer ({ className = '', onStatusChange }: Props): React.ReactEleme
           onClick={_saveDeveloper}
         />
       </Button.Group>
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Developer)`
+const StyledDiv = styled.div`
   .editor {
     height: 21rem;
     margin-left: 2rem;
@@ -224,4 +224,6 @@ export default React.memo(styled(Developer)`
   .help {
     padding: 0.5rem 2rem;
   }
-`);
+`;
+
+export default React.memo(Developer);
diff --git a/packages/page-settings/src/I18n/StringInput.tsx b/packages/page-settings/src/I18n/StringInput.tsx
index 54c51e5b86..67e0b06765 100644
--- a/packages/page-settings/src/I18n/StringInput.tsx
+++ b/packages/page-settings/src/I18n/StringInput.tsx
@@ -21,18 +21,18 @@ function StringInput ({ className = '', onChange, original, tkey, tval }: Props)
   );
 
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       <div className='label'>{original}</div>
       <Input
         onChange={_onChange}
         value={tval}
         withLabel={false}
       />
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(StringInput)`
+const StyledDiv = styled.div`
   .label {
     font-style: italic;
     margin-top: 0.5rem;
@@ -41,4 +41,6 @@ export default React.memo(styled(StringInput)`
       margin-left: 1rem;
     }
   }
-`);
+`;
+
+export default React.memo(StringInput);
diff --git a/packages/page-settings/src/I18n/index.tsx b/packages/page-settings/src/I18n/index.tsx
index af83b74311..fee4e3d1fe 100644
--- a/packages/page-settings/src/I18n/index.tsx
+++ b/packages/page-settings/src/I18n/index.tsx
@@ -216,7 +216,7 @@ function Translate ({ className }: Props): React.ReactElement<Props> {
   }
 
   return (
-    <main className={className}>
+    <StyledMain className={className}>
       <header>
         <Columar>
           <Columar.Column>
@@ -285,11 +285,11 @@ function Translate ({ className }: Props): React.ReactElement<Props> {
           tval={strings[key]}
         />
       )}
-    </main>
+    </StyledMain>
   );
 }
 
-export default React.memo(styled(Translate)`
+const StyledMain = styled.main`
   .ui--Column {
     display: flex;
 
@@ -308,4 +308,6 @@ export default React.memo(styled(Translate)`
     justify-content: flex-end;
     margin-top: 0.75rem;
   }
-`);
+`;
+
+export default React.memo(Translate);
diff --git a/packages/page-settings/src/Metadata/ChainColorIndicator.tsx b/packages/page-settings/src/Metadata/ChainColorIndicator.tsx
index 1c985dc3e8..c905e32dd2 100644
--- a/packages/page-settings/src/Metadata/ChainColorIndicator.tsx
+++ b/packages/page-settings/src/Metadata/ChainColorIndicator.tsx
@@ -11,16 +11,18 @@ interface Props {
 
 function ChainColorIndicator ({ className, color }: Props): React.ReactElement<Props> {
   return (
-    <div
+    <StyledDiv
       className={className}
       color={color}
     />
   );
 }
 
-export default React.memo(styled(ChainColorIndicator)`
-    background-color: ${(props: Props): string => props.color} !important;
-    width: 100px;
-    flex: 1;
-    border-radius: 4px;
+const StyledDiv = styled.div(({ color }: Props): string => `
+  background-color: ${color} !important;
+  width: 100px;
+  flex: 1;
+  border-radius: 4px;
 `);
+
+export default React.memo(ChainColorIndicator);
diff --git a/packages/page-settings/src/Metadata/Extensions.tsx b/packages/page-settings/src/Metadata/Extensions.tsx
index 95a069bde4..da93a3e364 100644
--- a/packages/page-settings/src/Metadata/Extensions.tsx
+++ b/packages/page-settings/src/Metadata/Extensions.tsx
@@ -49,7 +49,7 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
   ]);
 
   return (
-    <Table
+    <StyledTable
       className={className}
       empty={t<string>('No Upgradable extensions')}
       header={headerRef.current}
@@ -83,12 +83,14 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
         )
         : <Spinner />
       }
-    </Table>
+    </StyledTable>
   );
 }
 
-export default React.memo(styled(Extensions)`
+const StyledTable = styled(Table)`
   table {
     overflow: visible;
   }
-`);
+`;
+
+export default React.memo(Extensions);
diff --git a/packages/page-settings/src/Metadata/NetworkSpecs.tsx b/packages/page-settings/src/Metadata/NetworkSpecs.tsx
index fd8f2b1e80..e0f3f1151f 100644
--- a/packages/page-settings/src/Metadata/NetworkSpecs.tsx
+++ b/packages/page-settings/src/Metadata/NetworkSpecs.tsx
@@ -103,7 +103,7 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
   }
 
   return (
-    <Table
+    <StyledTable
       className={className}
       empty={t<string>('No open tips')}
       header={headerRef.current}
@@ -206,11 +206,11 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
           />
         </td>
       </tr>
-    </Table>
+    </StyledTable>
   );
 }
 
-export default React.memo(styled(NetworkSpecs)`
+const StyledTable = styled(Table)`
   td {
     padding: 0;
 
@@ -272,4 +272,6 @@ export default React.memo(styled(NetworkSpecs)`
       border: 1px solid white;
     }
   }
-`);
+`;
+
+export default React.memo(NetworkSpecs);
diff --git a/packages/page-settings/src/index.tsx b/packages/page-settings/src/index.tsx
index c0a59147c6..895bd8e6cb 100644
--- a/packages/page-settings/src/index.tsx
+++ b/packages/page-settings/src/index.tsx
@@ -62,10 +62,7 @@ function SettingsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
       />
       <Switch>
         <Route path={`${basePath}/developer`}>
-          <Developer
-            basePath={basePath}
-            onStatusChange={onStatusChange}
-          />
+          <Developer onStatusChange={onStatusChange} />
         </Route>
         <Route path={`${basePath}/i18n`}>
           <I18n />