Additional styled injection changes (contracts, explorer, ..., settings) (#8811)

* Additional styled injection changes (contracts, explorer, ..., settings) * Fix build
2023-01-15 14:52:31 +02:00 · 2023-01-15 14:52:31 +02:00 · c80b14e620
commit c80b14e620
parent 0f13cb7133
39 changed files with 241 additions and 175 deletions
--- 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-'
    );
  }
--- 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-'
    );
  }
--- 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);
--- 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);
--- 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);
--- 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}
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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);
--- 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 />