Additional styled injection changes to components (#8809)

* Additional styled injection changes to components

* Couple more

* One from claims (previously missed)

* Adjust

* Fix some build issues

* Final build adjustments

* Adjust address whitepace

* Adjust bounties

packages/apps-config/src/links/commonwealth.ts

@@ -2,12 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { BN } from '@polkadot/util';
+import type { ExternalDef } from './types';
 
 import { externalLogos } from '../ui/logos';
 
 const HASH_PATHS = ['proposal/councilmotion'];
 
-export default {
+export const Commonwealth: ExternalDef = {
   chains: {
     Edgeware: 'edgeware',
     Kulupu: 'kulupu',
@@ -20,8 +21,8 @@ export default {
   logo: externalLogos.commonwealth as string,
   paths: {
     council: 'proposal/councilmotion',
-    proposal: 'proposal/democracyproposal',
-    referendum: 'proposal/referendum',
+    democracyProposal: 'proposal/democracyproposal',
+    democracyReferendum: 'proposal/referendum',
     treasury: 'proposal/treasuryproposal'
   },
   url: 'https://commonwealth.im/'

packages/apps-config/src/links/dotreasury.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { BN } from '@polkadot/util';
+import type { ExternalDef } from './types';
 
 import { externalLogos } from '../ui/logos';
 
-export default {
+export const Dotreasury: ExternalDef = {
   chains: {
     Kusama: 'ksm',
     Polkadot: 'dot'

packages/apps-config/src/links/dotscanner.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { BN } from '@polkadot/util';
+import type { ExternalDef } from './types';
 
 import { externalLogos } from '../ui/logos';
 
-export default {
+export const DotScanner: ExternalDef = {
   chains: {
     Kusama: 'kusama',
     Polkadot: 'polkadot'

packages/apps-config/src/links/index.ts

@@ -3,19 +3,19 @@
 
 import type { ExternalDef } from './types';
 
-import Commonwealth from './commonwealth';
-import Dotreasury from './dotreasury';
-import DotScanner from './dotscanner';
-import KodaDot from './kodadot';
-import Polkaholic from './polkaholic';
-import Polkascan from './polkascan';
+import { Commonwealth } from './commonwealth';
+import { Dotreasury } from './dotreasury';
+import { DotScanner } from './dotscanner';
+import { KodaDot } from './kodadot';
+import { Polkaholic } from './polkaholic';
+import { Polkascan } from './polkascan';
 import { PolkassemblyIo, PolkassemblyNetwork } from './polkassembly';
-import Polkastats from './polkastats';
-import Singular from './singular';
-import Statescan from './statescan';
-import SubId from './subid';
-import Subscan from './subscan';
-import Subsquare from './subsquare';
+import { Polkastats } from './polkastats';
+import { Singular } from './singular';
+import { Statescan } from './statescan';
+import { SubId } from './subid';
+import { Subscan } from './subscan';
+import { Subsquare } from './subsquare';
 
 export const externalLinks: Record<string, ExternalDef> = {
   Commonwealth,

packages/apps-config/src/links/kodadot.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { BN } from '@polkadot/util';
+import type { ExternalDef } from './types';
 
 import { externalLogos } from '../ui/logos';
 
@@ -11,7 +12,7 @@ const getNetwork = (_chain: string) => {
   return `https://kodadot.xyz/${chain}/u/`;
 };
 
-export default {
+export const KodaDot: ExternalDef = {
   chains: {
     Kusama: 'kusama',
     Statemine: 'statemine',

packages/apps-config/src/links/polkaholic.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { BN } from '@polkadot/util';
+import type { ExternalDef } from './types';
 
 import { externalLogos } from '../ui/logos';
 
-export default {
+export const Polkaholic: ExternalDef = {
   chains: {
     Acala: 'acala',
     Altair: 'altair',

packages/apps-config/src/links/polkascan.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { BN } from '@polkadot/util';
+import type { ExternalDef } from './types';
 
 import { externalLogos } from '../ui/logos';
 
-export default {
+export const Polkascan: ExternalDef = {
   chains: {
     // Kulupu: 'kulupu',
     Kusama: 'kusama',
@@ -20,9 +21,9 @@ export default {
     address: 'account',
     block: 'block',
     council: 'council/motion',
+    democracyProposal: 'democracy/proposal',
+    democracyReferendum: 'democracy/referendum',
     extrinsic: 'transaction',
-    proposal: 'democracy/proposal',
-    referendum: 'democracy/referendum',
     techcomm: 'techcomm/proposal',
     treasury: 'treasury/proposal'
   },

packages/apps-config/src/links/polkassembly.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { BN } from '@polkadot/util';
+import type { ExternalDef } from './types';
 
 import { externalLogos } from '../ui/logos';
 
-export const PolkassemblyIo = {
+export const PolkassemblyIo: ExternalDef = {
   chains: {
     Altair: 'Altair',
     Astar: 'astar',
@@ -31,16 +32,16 @@ export const PolkassemblyIo = {
   paths: {
     bounty: 'bounty',
     council: 'motion',
-    proposal: 'proposal',
+    democracyProposal: 'proposal',
+    democracyReferendum: 'referendum',
     referenda: 'referenda',
-    referendum: 'referendum',
     tip: 'tip',
     treasury: 'treasury'
   },
   url: 'https://polkassembly.io/'
 };
 
-export const PolkassemblyNetwork = {
+export const PolkassemblyNetwork: ExternalDef = {
   ...PolkassemblyIo,
   chains: {
     Bifrost: 'bifrost',

packages/apps-config/src/links/polkastats.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { BN } from '@polkadot/util';
+import type { ExternalDef } from './types';
 
 import { externalLogos } from '../ui/logos';
 
-export default {
+export const Polkastats: ExternalDef = {
   chains: {
     Kusama: 'kusama',
     Polkadot: 'polkadot',
@@ -20,7 +21,6 @@ export default {
     address: 'account',
     block: 'block',
     extrinsic: 'extrinsic',
-    intention: 'intention',
     validator: 'validator'
   },
   url: 'https://polkastats.io/'

packages/apps-config/src/links/singular.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { BN } from '@polkadot/util';
+import type { ExternalDef } from './types';
 
 import { externalLogos } from '../ui/logos';
 
@@ -14,12 +15,13 @@ const getNetwork = (_chain: string) => {
   }
 };
 
-export default {
+export const Singular: ExternalDef = {
   chains: {
     Kusama: 'kusama',
     Statemine: 'statemine'
   },
-  create: (_chain: string, _path: string, data: BN | number | string): string => `https://singular.app/space/${getNetwork(_chain)}${data.toString()}`,
+  create: (_chain: string, _path: string, data: BN | number | string): string =>
+    `https://singular.app/space/${getNetwork(_chain)}${data.toString()}`,
   isActive: true,
   logo: externalLogos.singular as string,
   paths: {

packages/apps-config/src/links/statescan.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { BN } from '@polkadot/util';
+import type { ExternalDef } from './types';
 
 import { externalLogos } from '../ui/logos';
 
-export default {
+export const Statescan: ExternalDef = {
   chains: {
     Litentry: 'litentry',
     Statemine: 'statemine',

packages/apps-config/src/links/subid.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { BN } from '@polkadot/util';
+import type { ExternalDef } from './types';
 
 import { externalLogos } from '../ui/logos';
 
-export default {
+export const SubId: ExternalDef = {
   chains: {
     Altair: 'altair',
     Bifrost: 'bifrost',

packages/apps-config/src/links/subscan.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { BN } from '@polkadot/util';
+import type { ExternalDef } from './types';
 
 import { externalLogos } from '../ui/logos';
 
-export default {
+export const Subscan: ExternalDef = {
   chains: {
     Acala: 'acala',
     'Acala Mandala TC5': 'acala-testnet',
@@ -91,9 +92,9 @@ export default {
     block: 'block',
     bounty: 'bounty',
     council: 'council',
+    democracyProposal: 'democracy_proposal',
+    democracyReferendum: 'referenda',
     extrinsic: 'extrinsic',
-    proposal: 'democracy_proposal',
-    referendum: 'referenda',
     techcomm: 'tech',
     tip: 'treasury_tip',
     treasury: 'treasury',

packages/apps-config/src/links/subsquare.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { BN } from '@polkadot/util';
+import type { ExternalDef } from './types';
 
 import { externalLogos } from '../ui/logos';
 
-export default {
+export const Subsquare: ExternalDef = {
   chains: {
     Acala: 'acala',
     Altair: 'altair',
@@ -33,11 +34,11 @@ export default {
   paths: {
     bounty: 'treasury/bounty',
     council: 'council/motion',
-    external: 'democracy/external',
+    democracyExternal: 'democracy/external',
+    democracyProposal: 'democracy/proposal',
+    democracyReferendum: 'democracy/referendum',
     fellowshipReferenda: 'fellowship/referendum',
-    proposal: 'democracy/proposal',
     referenda: 'referenda/referendum',
-    referendum: 'democracy/referendum',
     tip: 'treasury/tip',
     treasury: 'treasury/proposal'
   },

packages/apps-config/src/links/types.ts

@@ -3,13 +3,36 @@
 
 import type { BN } from '@polkadot/util';
 
-export type LinkTypes = 'address' | 'block' | 'bounty' | 'council' | 'extrinsic' | 'proposal' | 'referendum' | 'techcomm' | 'tip' | 'treasury';
+export interface LinkPath {
+  // general
+  address?: string;
+  block?: string;
+  extrinsic?: string;
+  validator?: string;
+
+  // governance 1
+  bounty?: string;
+  council?: string;
+  democracyExternal?: string;
+  democracyProposal?: string;
+  democracyReferendum?: string;
+  techcomm?: string;
+  tip?: string;
+  treasury?: string;
+
+  // governance 2
+  fellowshipReferenda?: string;
+  rankedPolls?: string;
+  referenda?: string;
+}
+
+export type LinkTypes = keyof LinkPath;
 
 export interface ExternalDef {
   chains: Record<string, string>;
   isActive: boolean;
   logo: string;
-  paths: Partial<Record<LinkTypes, string>>;
+  paths: LinkPath;
   url: string;
   create: (chain: string, path: string, data: BN | number | string, hash?: string) => string;
 }

packages/apps/src/Endpoints/index.tsx

@@ -6,7 +6,7 @@ import type { Group } from './types';
 
 // ok, this seems to be an eslint bug, this _is_ a package import
 import punycode from 'punycode/';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import store from 'store';
 import styled from 'styled-components';
 
@@ -138,6 +138,7 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
   const [{ apiUrl, groupIndex, hasUrlChanged, isUrlValid }, setApiUrl] = useState<UrlState>(() => extractUrlState(settings.get().apiUrl, groups));
   const [storedCustomEndpoints, setStoredCustomEndpoints] = useState<string[]>(() => getCustomEndpoints());
   const [affinities, setAffinities] = useState(() => loadAffinities(groups));
+  const sidebarRef = useRef<HTMLDivElement>(null);
 
   const isKnownUrl = useMemo(() => {
     let result = false;
@@ -263,6 +264,7 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
       offset={offset}
       onClose={onClose}
       position='left'
+      sidebarRef={sidebarRef}
     >
       {groups.map((group, index): React.ReactNode => (
         <GroupDisplay

packages/page-accounts/src/Sidebar/JudgementTag.tsx

@@ -33,7 +33,6 @@ function JudgementTag ({ judgement: { judgementName, registrars } }: Props): Rea
     >
       <Tag
         color={judgementColor}
-        isTag={false}
         label={`${registrars.length} ${judgementName}`}
         size='tiny'
       />

packages/page-accounts/src/Sidebar/Judgements.tsx

@@ -28,7 +28,6 @@ function Judgements ({ address, className = '' }: Props): React.ReactElement<Pro
       >
         <Tag
           color='yellow'
-          isTag={false}
           key='NoJudgements'
           label={t<string>('No judgements')}
           size='tiny'

packages/page-accounts/src/Sidebar/Sidebar.tsx

@@ -25,8 +25,7 @@ interface Props {
 function FullSidebar ({ address, className = '', dataTestId, onClose, onUpdateName }: Props): React.ReactElement<Props> {
   const [inEditMode, setInEditMode] = useState<boolean>(false);
   const { accountIndex, flags, identity, meta } = useAccountInfo(address);
-
-  const ref = useRef<HTMLDivElement>(null);
+  const sidebarRef = useRef<HTMLDivElement>(null);
 
   return (
     <StyledSidebar
@@ -34,7 +33,7 @@ function FullSidebar ({ address, className = '', dataTestId, onClose, onUpdateNa
       dataTestId={dataTestId}
       onClose={onClose}
       position='right'
-      sidebarRef={ref}
+      sidebarRef={sidebarRef}
     >
       <div
         className='ui--AddressMenu-header'
@@ -45,7 +44,7 @@ function FullSidebar ({ address, className = '', dataTestId, onClose, onUpdateNa
           address={address}
           isBeingEdited={setInEditMode}
           onUpdateName={onUpdateName}
-          sidebarRef={ref}
+          sidebarRef={sidebarRef}
         />
       </div>
       <div className='ui--ScrollSection'>

packages/page-accounts/src/Sidebar/SidebarEditableSection.tsx

@@ -67,7 +67,6 @@ function SidebarEditableSection ({ accountIndex, address, isBeingEdited, onUpdat
           isEditable
           isEditing={isEditingTags}
           onChange={setTags}
-          size='tiny'
           value={tags}
           withEditButton={false}
           withTitle

packages/page-accounts/src/modals/Create.tsx

@@ -261,7 +261,6 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
         {step === 1 && <>
           <Modal.Columns hint={t<string>('The secret seed value for this account. Ensure that you keep this in a safe place, with access to the seed you can re-create the account.')}>
             <TextArea
-              isAction
               isError={!isSeedValid}
               isReadOnly={seedType === 'dev'}
               label={

packages/page-bounties/src/Bounties.tsx

@@ -29,7 +29,7 @@ function Bounties ({ className }: Props): React.ReactElement {
 
   const headerRef = useRef<([React.ReactNode?, string?, number?] | false)[]>([
     [t('bounties'), 'start', 3],
-    [t('value'), 'start'],
+    [t('value')],
     [t('curator'), 'start'],
     [t('next action'), 'start', 3]
   ]);

packages/page-bounties/src/Bounty.tsx

@@ -70,7 +70,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
         <td>
           <BountyStatusView bountyStatus={bountyStatus} />
         </td>
-        <td><FormatBalance value={value} /></td>
+        <td className='number'><FormatBalance value={value} /></td>
         <td>
           {curatorToRender && (
             <Curator

packages/page-bounties/src/BountyStatusView.tsx

@@ -4,8 +4,6 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { LabelHelp } from '@polkadot/react-components';
-
 import { insertSpaceBeforeCapitalLetter } from './helpers';
 import { StatusName } from './types';
 
@@ -21,7 +19,6 @@ function BountyStatusView ({ bountyStatus, className = '' }: Props): React.React
       data-testid={'bountyStatus'}
     >
       {insertSpaceBeforeCapitalLetter(bountyStatus)}
-      <LabelHelp />
     </StyledDiv>
   );
 }

packages/page-claims/src/Warning.tsx

@@ -23,7 +23,7 @@ function Warning ({ className }: Props): React.ReactElement<Props> | null {
 
   return (
     <Card isError>
-      <div className={className}>
+      <StyledDiv className={className}>
         {
           needsAttest.length > 1
             ? t('You need to sign an attestation for the following accounts:')
@@ -36,12 +36,12 @@ function Warning ({ className }: Props): React.ReactElement<Props> | null {
             />
           ))
         }
-      </div>
+      </StyledDiv>
     </Card>
   );
 }
 
-export default React.memo(styled(Warning)`
+const StyledDiv = styled.div`
   font-size: 1.15rem;
   display: flex;
   flex-direction: column;
@@ -53,4 +53,6 @@ export default React.memo(styled(Warning)`
   .ui--AddressMini-address {
     max-width: 20rem;
   }
-`);
+`;
+
+export default React.memo(Warning);

packages/page-contracts/src/shared/CodeRow.tsx

@@ -67,7 +67,7 @@ function CodeRow ({ buttons, children, className, code: { json }, isInline, with
       onChangeTags={setTags}
       onSaveName={_onSaveName}
       onSaveTags={_onSaveTags}
-      tags={withTags && tags}
+      tags={withTags ? tags : undefined}
     >
       {children}
     </Row>

packages/page-democracy/src/Overview/External.tsx

@@ -65,7 +65,7 @@ function External ({ className = '', value: { image, imageHash, threshold } }: P
             <Columar.Column>
               <LinkExternal
                 data={imageHash}
-                type='external'
+                type='democracyExternal'
                 withTitle
               />
             </Columar.Column>

packages/page-democracy/src/Overview/Proposal.tsx

@@ -91,7 +91,7 @@ function Proposal ({ className = '', value: { balance, image, imageHash, index,
             <Columar.Column>
               <LinkExternal
                 data={index}
-                type='proposal'
+                type='democracyProposal'
                 withTitle
               />
             </Columar.Column>

packages/page-democracy/src/Overview/Referendum.tsx

@@ -180,7 +180,7 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
             <Columar.Column>
               <LinkExternal
                 data={index}
-                type='referendum'
+                type='democracyReferendum'
                 withTitle
               />
             </Columar.Column>

packages/page-explorer/src/BlockInfo/ByHash.tsx

@@ -151,10 +151,12 @@ function BlockByHash ({ className = '', error, value }: Props): React.ReactEleme
               <td className='hash overflow media--1300'>{getHeader.extrinsicsRoot.toHex()}</td>
               <td className='hash overflow media--1200'>{getHeader.stateRoot.toHex()}</td>
               <td className='media--1000'>
-                <LinkExternal
-                  data={value}
-                  type='block'
-                />
+                {value && (
+                  <LinkExternal
+                    data={value}
+                    type='block'
+                  />
+                )}
               </td>
             </tr>
           )

packages/page-ranked/src/Members/Member.tsx

@@ -1,6 +1,7 @@
 // Copyright 2017-2023 @polkadot/app-ranked authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { FlagColor } from '@polkadot/react-components/types';
 import type { Member as MemberType } from '../types';
 
 import React from 'react';
@@ -14,7 +15,7 @@ interface Props {
   value: MemberType;
 }
 
-const COLOR_LST = ['grey', 'grey', 'yellow', 'orange', 'purple', 'blue', 'green', 'black'];
+const COLOR_LST: FlagColor[] = ['grey', 'grey', 'yellow', 'orange', 'purple', 'blue', 'green', 'black'];
 const COLOR_DEF = COLOR_LST[COLOR_LST.length - 1];
 
 function Member ({ className, value: { accountId, info: { rank } } }: Props): React.ReactElement<Props> {

packages/page-scheduler/src/DispatchEntry.tsx

@@ -45,7 +45,7 @@ function DispatchEntry ({ value: { at, image, imageHash, index } }: Props): Reac
       <td className='links media--1000'>
         <LinkExternal
           data={index}
-          type='referendum'
+          type='democracyReferendum'
         />
       </td>
     </tr>

packages/page-settings/src/I18n/index.tsx

@@ -231,7 +231,6 @@ function Translate ({ className }: Props): React.ReactElement<Props> {
               {t<string>('{{done}}/{{total}}, {{progress}}% done', { replace: progressDisplay(modProgress) })}
             </div>
             <Progress
-              color='auto'
               total={modProgress[1]}
               value={modProgress[0]}
             />
@@ -248,7 +247,6 @@ function Translate ({ className }: Props): React.ReactElement<Props> {
               {t<string>('{{done}}/{{total}}, {{progress}}% done', { replace: progressDisplay(allProgress[record]) })}
             </div>
             <Progress
-              color='auto'
               total={allProgress[record]?.[1]}
               value={allProgress[record]?.[0]}
             />

packages/react-components/src/AccountName.tsx

@@ -255,6 +255,7 @@ const StyledSpan = styled.span`
         max-width: var(--width-shortaddr);
         opacity: var(--opacity-light);
         text-transform: none;
+        white-space: nowrap;
       }
 
       .sub,

packages/react-components/src/AddressRow.tsx

@@ -56,7 +56,7 @@ function AddressRow ({ buttons, children, className, defaultName, fullLength = f
       onChangeTags={setTags}
       onSaveName={onSaveName}
       onSaveTags={onSaveTags}
-      tags={withTags && tags}
+      tags={withTags ? tags : undefined}
     >
       {children}
       {overlay}

packages/react-components/src/Flag.tsx

@@ -1,11 +1,12 @@
 // Copyright 2017-2023 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { FlagColor } from './types';
+
 import React from 'react';
 import styled from 'styled-components';
 
-import { Tag } from '@polkadot/react-components/index';
-import { FlagColor } from '@polkadot/react-components/types';
+import Tag from './Tag';
 
 interface FlagProps {
   className?: string;
@@ -18,7 +19,6 @@ function Flag ({ className = '', color, label }: FlagProps): React.ReactElement<
     <Tag
       className={`${className} ${color === 'theme' ? ' highlight--color-bg highlight--bg' : ''}` }
       color={color}
-      isFlag
       label={label}
       size='tiny'
     />

packages/react-components/src/IdentityIcon/RoboHash/index.tsx

@@ -71,7 +71,7 @@ function RoboHash ({ className, publicKey, size }: Props): React.ReactElement<Pr
   );
 
   return (
-    <div
+    <StyledDiv
       className={className}
       style={style}
     >
@@ -81,11 +81,11 @@ function RoboHash ({ className, publicKey, size }: Props): React.ReactElement<Pr
           src={src}
         />
       )}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(RoboHash)`
+const StyledDiv = styled.div`
   background: var(--bg-page);
   border-radius: 50%;
   position: relative;
@@ -102,4 +102,6 @@ export default React.memo(styled(RoboHash)`
       opacity: 0.35;
     }
   }
-`);
+`;
+
+export default React.memo(RoboHash);

packages/react-components/src/IdentityIcon/index.tsx

@@ -43,7 +43,7 @@ function IdentityIcon ({ className = '', forceIconType, prefix, size = 24, theme
     ? RoboHash
     : undefined;
 
-  const _onCopy = useCallback(
+  const onCopy = useCallback(
     (account: string) => queueAction({
       account,
       action: t('clipboard'),
@@ -54,10 +54,10 @@ function IdentityIcon ({ className = '', forceIconType, prefix, size = 24, theme
   );
 
   return (
-    <BaseIdentityIcon
+    <StyledBaseIdentityIcon
       Custom={Custom}
       className={className}
-      onCopy={_onCopy}
+      onCopy={onCopy}
       prefix={prefix}
       size={size}
       theme={forceIconType || (isEthereum ? 'ethereum' : thisTheme as 'substrate')}
@@ -66,7 +66,7 @@ function IdentityIcon ({ className = '', forceIconType, prefix, size = 24, theme
   );
 }
 
-export default React.memo(styled(IdentityIcon)(({ theme }: ThemeProps) => `
+const StyledBaseIdentityIcon = styled(BaseIdentityIcon)(({ theme }: ThemeProps) => `
   ${theme.theme === 'dark'
     ? `circle:first-child {
       fill: #282829;
@@ -77,4 +77,6 @@ export default React.memo(styled(IdentityIcon)(({ theme }: ThemeProps) => `
   border-radius: 50%;
   display: inline-block;
   overflow: hidden;
-`));
+`);
+
+export default React.memo(IdentityIcon);

packages/react-components/src/InputExtrinsic/LinkedWrapper.tsx

@@ -15,7 +15,7 @@ interface Props {
 
 function LinkedWrapper ({ children, className = '', label, withLabel }: Props): React.ReactElement<Props> {
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       <Labelled
         label={label}
         withLabel={withLabel}
@@ -24,11 +24,11 @@ function LinkedWrapper ({ children, className = '', label, withLabel }: Props):
           {children}
         </div>
       </Labelled>
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(LinkedWrapper)`
+const StyledDiv = styled.div`
   .ui--DropdownLinked-Items {
     .text {
       box-sizing: border-box;
@@ -66,4 +66,6 @@ export default React.memo(styled(LinkedWrapper)`
     text-align: right;
     text-overflow: ellipsis;
   }
-`);
+`;
+
+export default React.memo(LinkedWrapper);

packages/react-components/src/LabelHelp.tsx

@@ -21,7 +21,7 @@ function LabelHelp ({ className = '', help, icon = 'question-circle' }: Props):
   const [trigger] = useState(() => `label-help-${++id}`);
 
   return (
-    <div
+    <StyledDiv
       className={`ui--LabelHelp ${className}`}
       tabIndex={-1}
     >
@@ -33,13 +33,15 @@ function LabelHelp ({ className = '', help, icon = 'question-circle' }: Props):
         text={help}
         trigger={trigger}
       />
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(LabelHelp)`
+const StyledDiv = styled.div`
   cursor: help;
   display: inline-block;
   line-height: 1rem;
   margin: 0 0 0 0.25rem;
-`);
+`;
+
+export default React.memo(LabelHelp);

packages/react-components/src/Labelled.tsx

@@ -29,7 +29,7 @@ function Labelled ({ className = '', children, isFull, isHidden, isOuter, isSmal
   }
 
   return (
-    <div className={`ui--Labelled${isSmall ? ' isSmall' : ''}${isFull ? ' isFull' : ''}${isOuter ? ' isOuter' : ''} ${className}`}>
+    <StyledDiv className={`ui--Labelled${isSmall ? ' isSmall' : ''}${isFull ? ' isFull' : ''}${isOuter ? ' isOuter' : ''} ${className}`}>
       <label>{withEllipsis
         ? <div className='withEllipsis'>{label}</div>
         : label
@@ -38,11 +38,11 @@ function Labelled ({ className = '', children, isFull, isHidden, isOuter, isSmal
       <div className='ui--Labelled-content'>
         {children}
       </div>
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Labelled)`
+const StyledDiv = styled.div`
   &.ui--Labelled {
     display: block;
     position: relative;
@@ -179,4 +179,6 @@ export default React.memo(styled(Labelled)`
       }
     }
   }
-`);
+`;
+
+export default React.memo(Labelled);

packages/react-components/src/LinkExternal.tsx

@@ -65,7 +65,7 @@ function LinkExternal ({ className = '', data, hash, isSidebar, isSmall, isText,
   }
 
   return (
-    <div className={`${className} ui--LinkExternal ${isText ? 'isText' : 'isLogo'} ${withTitle ? 'isMain' : ''} ${isSmall ? 'isSmall' : ''} ${isSidebar ? 'isSidebar' : ''}`}>
+    <StyledDiv className={`${className} ui--LinkExternal ${isText ? 'isText' : 'isLogo'} ${withTitle ? 'isMain' : ''} ${isSmall ? 'isSmall' : ''} ${isSidebar ? 'isSidebar' : ''}`}>
       {(isText && !isSmall) && <div>{t<string>('View this externally')}</div>}
       {withTitle && (
         <h5>{t('external links')}</h5>
@@ -76,11 +76,11 @@ function LinkExternal ({ className = '', data, hash, isSidebar, isSmall, isText,
           : <div>{t<string>('none')}</div>
         }
       </div>
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(LinkExternal)`
+const StyledDiv = styled.div`
   text-align: right;
 
   &.isMain {
@@ -141,4 +141,6 @@ export default React.memo(styled(LinkExternal)`
       white-space: nowrap;
     }
   }
-`);
+`;
+
+export default React.memo(LinkExternal);

packages/react-components/src/MarkError.tsx

@@ -14,15 +14,17 @@ interface Props {
 
 function MarkError ({ children, className = '', content }: Props): React.ReactElement<Props> {
   return (
-    <article className={`mark error ${className}`}>
+    <StyledArticle className={`mark error ${className}`}>
       <Icon icon='exclamation-triangle' />{content}{children}
-    </article>
+    </StyledArticle>
   );
 }
 
-export default React.memo(styled(MarkError)`
+const StyledArticle = styled.article`
   .ui--Icon {
     color: rgba(255, 12, 12, 1);
     margin-right: 0.5rem;
   }
-`);
+`;
+
+export default React.memo(MarkError);

packages/react-components/src/MarkWarning.tsx

@@ -15,15 +15,17 @@ interface Props {
 
 function MarkWarning ({ children, className = '', content, withIcon = true }: Props): React.ReactElement<Props> {
   return (
-    <article className={`mark warning ${className}`}>
+    <StyledArticle className={`mark warning ${className}`}>
       {withIcon && <Icon icon='exclamation-triangle' />}{content}{children}
-    </article>
+    </StyledArticle>
   );
 }
 
-export default React.memo(styled(MarkWarning)`
+const StyledArticle = styled.article`
   .ui--Icon {
     color: rgba(255, 196, 12, 1);
     margin-right: 0.5rem;
   }
-`);
+`;
+
+export default React.memo(MarkWarning);

packages/react-components/src/Menu/Base.tsx

@@ -8,13 +8,13 @@ import styled from 'styled-components';
 
 function Base ({ children, className = '' }: BaseProps): React.ReactElement<BaseProps> {
   return (
-    <div className={`ui--Menu ${className}`}>
+    <StyledDiv className={`ui--Menu ${className}`}>
       {children}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Base)`
+const StyledDiv = styled.div`
   display: flex;
   flex-direction: column;
   min-width: 14.286rem;
@@ -24,4 +24,6 @@ export default React.memo(styled(Base)`
     margin-right: 1rem;
     margin-left: 1rem;
   }
-`);
+`;
+
+export default React.memo(Base);

packages/react-components/src/Menu/Divider.tsx

@@ -8,15 +8,17 @@ import styled from 'styled-components';
 
 function Divider ({ className = '' }: DividerProps): React.ReactElement {
   return (
-    <div className={`ui--Menu__Divider ${className}`} />
+    <StyledDiv className={`ui--Menu__Divider ${className}`} />
   );
 }
 
-export default React.memo(styled(Divider)`
+const StyledDiv = styled.div`
   margin: 0.25rem 0 1rem;
   border-top: 1px solid var(--border-table);
 
   &:first-child, &:last-child {
     display: none
   }
-`);
+`;
+
+export default React.memo(Divider);

packages/react-components/src/Menu/Header.tsx

@@ -8,15 +8,17 @@ import styled from 'styled-components';
 
 function Header ({ children, className }: HeaderProps): React.ReactElement {
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       {children}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Header)`
+const StyledDiv = styled.div`
   color: var(--color-label);
   font-size: var(--font-size-tiny);
   line-height: 0.857rem;
   margin-bottom: 0.3rem;
-`);
+`;
+
+export default React.memo(Header);

packages/react-components/src/Menu/Item.tsx

@@ -17,7 +17,7 @@ function Item ({ children, className = '', icon, isDisabled, label, onClick }: I
   );
 
   return (
-    <div
+    <StyledDiv
       className={`ui--Menu__Item ${className}${icon ? ' hasIcon' : ''}${isDisabled ? ' isDisabled' : ''}`}
       onClick={_onClick}
     >
@@ -28,11 +28,11 @@ function Item ({ children, className = '', icon, isDisabled, label, onClick }: I
         />
       )}
       {label}{children}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Item)`
+const StyledDiv = styled.div`
   align-items: center;
   cursor: pointer;
   display: flex;
@@ -59,4 +59,6 @@ export default React.memo(styled(Item)`
     cursor: default;
     opacity: 0.5;
   }
-`);
+`;
+
+export default React.memo(Item);

packages/react-components/src/Output.tsx

@@ -4,6 +4,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { isString } from '@polkadot/util';
+
 import CopyButton from './CopyButton';
 import Labelled from './Labelled';
 
@@ -19,14 +21,14 @@ interface Props {
   isTrimmed?: boolean;
   label?: React.ReactNode;
   labelExtra?: React.ReactNode;
-  value?: string;
+  value?: React.ReactNode | string | null;
   withCopy?: boolean;
   withLabel?: boolean;
 }
 
 function Output ({ children, className = '', isDisabled, isError, isFull, isHidden, isMonospace, isSmall, isTrimmed, label, labelExtra, value, withCopy = false, withLabel }: Props): React.ReactElement<Props> {
   return (
-    <Labelled
+    <StyledLabelled
       className={className}
       isFull={isFull}
       isHidden={isHidden}
@@ -36,7 +38,7 @@ function Output ({ children, className = '', isDisabled, isError, isFull, isHidd
       withLabel={withLabel}
     >
       <div className={`ui--output ui dropdown selection ${isError ? ' error' : ''}${isMonospace ? ' monospace' : ''}${isDisabled ? 'isDisabled' : ''}`}>
-        {isTrimmed && value && (value.length > 512)
+        {isTrimmed && isString(value) && (value.length > 512)
           ? `${value.slice(0, 256)}…${value.slice(-256)}`
           : value
         }
@@ -45,11 +47,11 @@ function Output ({ children, className = '', isDisabled, isError, isFull, isHidd
       {withCopy && (
         <CopyButton value={value} />
       )}
-    </Labelled>
+    </StyledLabelled>
   );
 }
 
-export default React.memo(styled(Output)`
+const StyledLabelled = styled(Labelled)`
   .ui.selection.dropdown.ui--output.isDisabled {
     background: transparent;
     border-style: dashed;
@@ -61,4 +63,6 @@ export default React.memo(styled(Output)`
     overflow: hidden;
     text-overflow: ellipsis;
   }
-`);
+`;
+
+export default React.memo(Output);

packages/react-components/src/ParaLink.tsx

@@ -31,7 +31,7 @@ function ParaLink ({ className, id }: Props): React.ReactElement<Props> | null {
     : endpoints[0];
 
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       <ChainImg
         isInline
         logo={info || 'empty'}
@@ -46,11 +46,11 @@ function ParaLink ({ className, id }: Props): React.ReactElement<Props> | null {
         )
         : text
       }
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(ParaLink)`
+const StyledDiv = styled.div`
   vertical-align: middle;
   white-space: nowrap;
 
@@ -63,4 +63,6 @@ export default React.memo(styled(ParaLink)`
     text-overflow: ellipsis;
     vertical-align: middle;
   }
-`);
+`;
+
+export default React.memo(ParaLink);

packages/react-components/src/ParentAccount.tsx

@@ -14,7 +14,7 @@ interface ParentAccountProps {
 
 function ParentAccount ({ address, className }: ParentAccountProps): React.ReactElement<ParentAccountProps> {
   return (
-    <div
+    <StyledDiv
       className={className}
       data-testid='parent'
     >
@@ -27,11 +27,11 @@ function ParentAccount ({ address, className }: ParentAccountProps): React.React
         withSidebar
       >
       </AccountName>
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(ParentAccount)`
+const StyledDiv = styled.div`
   align-items: center;
   color: #8B8B8B;
   var(--font-size-small);
@@ -42,4 +42,6 @@ export default React.memo(styled(ParentAccount)`
     margin-right: 0.3rem;
     margin-left: 0.15rem;
   }
-`);
+`;
+
+export default React.memo(ParentAccount);

packages/react-components/src/PasswordStrength.tsx

@@ -35,7 +35,7 @@ function PasswordStrength ({ className = '', value }: Props): React.ReactElement
   const style = { width: `${passwordStrength * 100 / MAX_STRENGTH}%` };
 
   return (
-    <div
+    <StyledDiv
       className={className}
       style={{ display: (value ? 'flex' : 'none') }}
     >
@@ -47,11 +47,11 @@ function PasswordStrength ({ className = '', value }: Props): React.ReactElement
         />
       </div>
       {t<string>('strong')}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(PasswordStrength)`
+const StyledDiv = styled.div`
   align-items: center;
   margin-top: 0.5rem;
   margin-left: 2rem;
@@ -77,4 +77,6 @@ export default React.memo(styled(PasswordStrength)`
     border-radius: 0.15rem;
     background: linear-gradient(90.43deg, #FF8B00 0%, #FFBB50 112.75%);
   }
-`);
+`;
+
+export default React.memo(PasswordStrength);

packages/react-components/src/Progress.tsx

@@ -48,7 +48,7 @@ function Progress ({ className = '', isBlurred, isDisabled, total, value }: Prop
   const drawAngle = (angle === 360) ? 360 : angle % 360;
 
   return (
-    <div className={`ui--Progress ${isDisabled ? 'isDisabled' : ''} ${isBlurred ? '--tmp' : ''} ${className}`}>
+    <StyledDiv className={`ui--Progress ${isDisabled ? 'isDisabled' : ''} ${isBlurred ? '--tmp' : ''} ${className}`}>
       <div className='background highlight--bg' />
       <Clip
         angle={
@@ -69,13 +69,13 @@ function Progress ({ className = '', isBlurred, isDisabled, total, value }: Prop
       <div className='inner'>
         <div>{Math.floor(angle * 100 / 360)}%</div>
       </div>
-    </div>
+    </StyledDiv>
   );
 }
 
 const SIZE = '3.5rem';
 
-export default React.memo(styled(Progress)`
+const StyledDiv = styled.div`
   border-radius: 100%;
   clip-path: circle(50%);
   height: ${SIZE};
@@ -147,4 +147,6 @@ export default React.memo(styled(Progress)`
       clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
     }
   }
-`);
+`;
+
+export default React.memo(Progress);

packages/react-components/src/Row.tsx

@@ -1,6 +1,8 @@
 // Copyright 2017-2023 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
+
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
@@ -10,7 +12,112 @@ import EditButton from './EditButton';
 import Input from './Input';
 import Tags from './Tags';
 
-export const styles = `
+export interface RowProps {
+  address?: AccountId | AccountIndex | Address | string | null;
+  buttons?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+  defaultName?: string | null;
+  details?: React.ReactNode;
+  icon?: React.ReactNode;
+  iconInfo?: React.ReactNode;
+  isDisabled?: boolean;
+  isInline?: boolean;
+  isEditableName?: boolean;
+  isEditableTags?: boolean;
+  isShortAddr?: boolean;
+  name?: string;
+  onChangeName?: (_: string) => void;
+  onChangeTags?: (_: string[]) => void;
+  onSaveName?: () => void;
+  onSaveTags?: () => void;
+  tags?: string[];
+}
+
+function Row ({ address, buttons, children, className = '', defaultName, details, icon, iconInfo, isDisabled, isEditableName, isEditableTags, isInline, isShortAddr = true, name, onChangeName, onChangeTags, onSaveName, onSaveTags, tags }: RowProps): React.ReactElement<RowProps> {
+  const [isEditingName, toggleIsEditingName] = useToggle();
+  const [isEditingTags, toggleIsEditingTags] = useToggle();
+
+  const _onSaveName = useCallback((): void => {
+    onSaveName && onSaveName();
+    toggleIsEditingName();
+  }, [onSaveName, toggleIsEditingName]);
+
+  return (
+    <StyledDiv className={`ui--Row${isDisabled ? ' isDisabled' : ''}${isInline ? ' isInline' : ''} ${className}`}>
+      <div className='ui--Row-base'>
+        {icon && (
+          <div className='ui--Row-icon'>
+            {icon}
+            {iconInfo && (
+              <div className='ui--Row-icon-info'>
+                {iconInfo}
+              </div>
+            )}
+          </div>
+        )}
+        <div className='ui--Row-details'>
+          {(name || defaultName) && (
+            isEditableName && isEditingName
+              ? (
+                <Input
+                  autoFocus
+                  defaultValue={name || defaultName}
+                  isInPlaceEditor
+                  onBlur={_onSaveName}
+                  onChange={onChangeName}
+                  onEnter
+                  withLabel={false}
+                />
+              )
+              : (
+                <div className='ui--Row-name'>
+                  {
+                    isEditableName
+                      ? (
+                        <EditButton onClick={toggleIsEditingName}>
+                          {name || defaultName}
+                        </EditButton>
+                      )
+                      : name || defaultName
+                  }
+                </div>
+              )
+          )}
+          {address && (
+            <div className={`ui--Row-address ${isShortAddr ? 'shortAddr' : ''}`}>
+              {address}
+            </div>
+          )}
+          {details}
+          {tags && (
+            <Tags
+              className='ui--Row-tags'
+              isEditable={isEditableTags}
+              isEditing={isEditingTags}
+              onChange={onChangeTags}
+              onSave={onSaveTags}
+              onToggleIsEditing={toggleIsEditingTags}
+              value={tags}
+            />
+          )}
+        </div>
+        {buttons && (
+          <div className='ui--Row-buttons'>
+            {buttons}
+          </div>
+        )}
+      </div>
+      {children && (
+        <div className='ui--Row-children'>
+          {children}
+        </div>
+      )}
+    </StyledDiv>
+  );
+}
+
+const StyledDiv = styled.div`
   text-align: left;
 
   &.isDisabled {
@@ -152,114 +259,4 @@ export const styles = `
   }
 `;
 
-export interface RowProps {
-  address?: string;
-  buttons?: React.ReactNode;
-  children?: React.ReactNode;
-  className?: string;
-  defaultName?: string | null;
-  details?: React.ReactNode;
-  icon?: React.ReactNode;
-  iconInfo?: React.ReactNode;
-  isDisabled?: boolean;
-  isInline?: boolean;
-  isEditableName?: boolean;
-  isEditableTags?: boolean;
-  isShortAddr?: boolean;
-  name?: string;
-  onChangeName?: (_: string) => void;
-  onChangeTags?: (_: string[]) => void;
-  onSaveName?: () => void;
-  onSaveTags?: () => void;
-  tags?: string[];
-}
-
-function Row ({ address, buttons, children, className = '', defaultName, details, icon, iconInfo, isDisabled, isEditableName, isEditableTags, isInline, isShortAddr = true, name, onChangeName, onChangeTags, onSaveName, onSaveTags, tags }: RowProps): React.ReactElement<RowProps> {
-  const [isEditingName, toggleIsEditingName] = useToggle();
-  const [isEditingTags, toggleIsEditingTags] = useToggle();
-
-  const _onSaveName = useCallback((): void => {
-    onSaveName && onSaveName();
-    toggleIsEditingName();
-  }, [onSaveName, toggleIsEditingName]);
-
-  return (
-    <div
-      className={`ui--Row${isDisabled ? ' isDisabled' : ''}${isInline ? ' isInline' : ''} ${className}`}
-    >
-      <div className='ui--Row-base'>
-        {icon && (
-          <div className='ui--Row-icon'>
-            {icon}
-            {iconInfo && (
-              <div className='ui--Row-icon-info'>
-                {iconInfo}
-              </div>
-            )}
-          </div>
-        )}
-        <div className='ui--Row-details'>
-          {(name || defaultName) && (
-            isEditableName && isEditingName
-              ? (
-                <Input
-                  autoFocus
-                  defaultValue={name || defaultName}
-                  isInPlaceEditor
-                  onBlur={_onSaveName}
-                  onChange={onChangeName}
-                  onEnter
-                  withLabel={false}
-                />
-              )
-              : (
-                <div className='ui--Row-name'>
-                  {
-                    isEditableName
-                      ? (
-                        <EditButton onClick={toggleIsEditingName}>
-                          {name || defaultName}
-                        </EditButton>
-                      )
-                      : name || defaultName
-                  }
-                </div>
-              )
-          )}
-          {address && (
-            <div className={`ui--Row-address ${isShortAddr ? 'shortAddr' : ''}`}>
-              {address}
-            </div>
-          )}
-          {details}
-          {tags && (
-            <Tags
-              className='ui--Row-tags'
-              isEditable={isEditableTags}
-              isEditing={isEditingTags}
-              onChange={onChangeTags}
-              onSave={onSaveTags}
-              onToggleIsEditing={toggleIsEditingTags}
-              size='tiny'
-              value={tags}
-            />
-          )}
-        </div>
-        {buttons && (
-          <div className='ui--Row-buttons'>
-            {buttons}
-          </div>
-        )}
-      </div>
-      {children && (
-        <div className='ui--Row-children'>
-          {children}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default React.memo(styled(Row)`${
-  styles
-}`);
+export default React.memo(Row);

packages/react-components/src/Sidebar.tsx

@@ -12,15 +12,15 @@ interface Props {
   className?: string;
   dataTestId?: string;
   offset?: number | string;
-  onClose: () => void;
+  onClose?: () => void;
   position: 'left' | 'right';
   sidebarRef: React.RefObject<HTMLDivElement>;
 }
 
-function Sidebar ({ button, children, className = '', dataTestId = '', onClose, sidebarRef }: Props): React.ReactElement<Props> {
+function Sidebar ({ button, children, className = '', dataTestId = '', onClose, position, sidebarRef }: Props): React.ReactElement<Props> {
   return (
-    <div
-      className={`ui--Sidebar ${className}`}
+    <StyledDiv
+      className={`ui--Sidebar ${className} ${position}Position`}
       data-testid={dataTestId}
       ref={sidebarRef}
     >
@@ -35,14 +35,13 @@ function Sidebar ({ button, children, className = '', dataTestId = '', onClose,
         />
       </Button.Group>
       {children}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Sidebar)(({ offset = 0, position }: Props) => `
+const StyledDiv = styled.div`
   background: var(--bg-page);
   bottom: 0;
-  box-shadow: ${position === 'right' ? '-6px' : '6px'} 0px 20px 0px rgba(0, 0, 0, 0.3);
   margin-left: -0.125rem;
   max-width: 24rem;
   min-width: 24rem;
@@ -51,7 +50,16 @@ export default React.memo(styled(Sidebar)(({ offset = 0, position }: Props) => `
   overflow-y: auto;
   top: 0;
   z-index: 999;
-  ${position}: ${offset};
+
+  &.leftPosition {
+    box-shadow: 6px 0px 20px 0px rgba(0, 0, 0, 0.3);
+    left: 0;
+  }
+
+  &.rightPosition {
+    box-shadow: -6px 0px 20px 0px rgba(0, 0, 0, 0.3);
+    right: 0;
+  }
 
   .ui--Sidebar-buttons {
     margin: 0;
@@ -59,4 +67,6 @@ export default React.memo(styled(Sidebar)(({ offset = 0, position }: Props) => `
     right: 0.5rem;
     top: 0.5rem;
   }
-`));
+`;
+
+export default React.memo(Sidebar);

packages/react-components/src/SortDropdown.tsx

@@ -10,7 +10,7 @@ interface Props {
   className?: string;
   defaultValue: string;
   label: string;
-  onChange: (value: unknown) => void;
+  onChange: (value: any) => void;
   onClick: () => void;
   options: unknown[];
   sortDirection: 'descending' | 'ascending';
@@ -18,7 +18,7 @@ interface Props {
 
 function SortDropdown ({ className = '', defaultValue, label, onChange, onClick, options, sortDirection }: Props): React.ReactElement<Props> {
   return (
-    <div className={`ui--Sort ${className}`}>
+    <StyledDiv className={`ui--Sort ${className}`}>
       <Dropdown
         defaultValue={defaultValue}
         label={label}
@@ -37,11 +37,11 @@ function SortDropdown ({ className = '', defaultValue, label, onChange, onClick,
           icon='sort-down'
         />
       </button>
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(SortDropdown)`
+const StyledDiv = styled.div`
   position: relative;
   display: flex;
   flex-direction: row;
@@ -139,4 +139,6 @@ export default React.memo(styled(SortDropdown)`
   .ui--Labelled.ui--Dropdown:hover::after {
     left: 7.857rem;
   }
-`);
+`;
+
+export default React.memo(SortDropdown);

packages/react-components/src/Spinner.tsx

@@ -23,17 +23,17 @@ function Spinner ({ className = '', label, noLabel, variant = 'app' }: Props): R
   const { t } = useTranslation();
 
   return (
-    <div className={`${className} ui--Spinner variant-${variant}`}>
+    <StyledSpinner className={`${className} ui--Spinner variant-${variant}`}>
       <img
         className={variant === 'push' ? '' : 'highlight--bg highlight--border'}
         src={spinnerSrc as string}
       />
       {!noLabel && variant.startsWith('app') && <div className='text'>{label || t('Retrieving data')}</div>}
-    </div>
+    </StyledSpinner>
   );
 }
 
-export default React.memo(styled(Spinner)`
+const StyledSpinner = styled.div`
   display: block;
   line-height: 1rem;
   margin: 0 auto;
@@ -69,4 +69,6 @@ export default React.memo(styled(Spinner)`
       margin-top: 0.25rem;
     }
   }
-`);
+`;
+
+export default React.memo(Spinner);

packages/react-components/src/StakingUnbonding.tsx

@@ -25,7 +25,7 @@ interface DeriveStakingAccountPartial {
 }
 
 interface Props {
-  iconPosition: 'left' | 'right';
+  iconPosition?: 'left' | 'right';
   className?: string;
   stakingInfo?: DeriveStakingAccountPartial;
 }
@@ -68,7 +68,7 @@ function StakingUnbonding ({ className = '', iconPosition = 'left', stakingInfo
   const trigger = `${stakingInfo.accountId.toString()}-unlocking-trigger`;
 
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       {iconPosition === 'left' && (
         <Icon
           className='left'
@@ -105,11 +105,11 @@ function StakingUnbonding ({ className = '', iconPosition = 'left', stakingInfo
           tooltip={trigger}
         />
       )}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(StakingUnbonding)`
+const StyledDiv = styled.div`
   white-space: nowrap;
 
   .ui--Icon.left {
@@ -125,4 +125,6 @@ export default React.memo(styled(StakingUnbonding)`
   .ui--FormatBalance {
     display: inline-block;
   }
-`);
+`;
+
+export default React.memo(StakingUnbonding);

packages/react-components/src/SummaryBox.tsx

@@ -12,13 +12,13 @@ interface Props {
 
 function SummaryBox ({ children, className = '', isSmall }: Props): React.ReactElement<Props> {
   return (
-    <div className={`${className}${isSmall ? ' isSmall' : ''}`}>
+    <StyledDiv className={`${className}${isSmall ? ' isSmall' : ''}`}>
       {children}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(SummaryBox)`
+const StyledDiv = styled.div`
   align-items: stretch;
   border-radius: 0.25rem;
   display: flex;
@@ -56,4 +56,6 @@ export default React.memo(styled(SummaryBox)`
     padding-right: 0;
     padding-top: 0;
   }
-`);
+`;
+
+export default React.memo(SummaryBox);

packages/react-components/src/Tag.tsx

@@ -24,7 +24,7 @@ function Tag ({ className = '', color = 'theme', hover, label, size = 'small' }:
   const [trigger] = useState(() => `tag-hover-${Date.now()}-${tagId++}`);
 
   return (
-    <div
+    <StyledDiv
       className={`ui--Tag ${color}Color ${size}Size ${theme}Theme ${className}`}
       color={color || 'grey'}
       data-for={hover && trigger}
@@ -37,11 +37,11 @@ function Tag ({ className = '', color = 'theme', hover, label, size = 'small' }:
           trigger={trigger}
         />
       )}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Tag)`
+const StyledDiv = styled.div`
   border-radius: 0.25rem;
   color: #fff;
   display: inline-block;
@@ -103,4 +103,6 @@ export default React.memo(styled(Tag)`
   &.themeColor.darkTheme {
     background-color: rgba(255,255,255,0.08);
   }
-`);
+`;
+
+export default React.memo(Tag);

packages/react-components/src/Tags.tsx

@@ -46,7 +46,7 @@ function Tags ({ children, className = '', isEditable, isEditing, onChange, onSa
   );
 
   return (
-    <div className={`ui--Tags ${className}`}>
+    <StyledDiv className={`ui--Tags ${className}`}>
       {withTitle && (
         <h5>{t<string>('Tags')}</h5>
       )}
@@ -75,11 +75,11 @@ function Tags ({ children, className = '', isEditable, isEditing, onChange, onSa
           : contents
       }
       {children}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Tags)`
+const StyledDiv = styled.div`
   label {
     display: inline-block;
   }
@@ -101,4 +101,6 @@ export default React.memo(styled(Tags)`
   .ui--Tag {
     margin: 0.1rem 0 0.1rem 0.571rem;
   }
-`);
+`;
+
+export default React.memo(Tags);

packages/react-components/src/TextArea.tsx

@@ -26,7 +26,7 @@ function TextArea ({ children, className, isError, isReadOnly, label, onChange,
   );
 
   return (
-    <Labelled
+    <StyledLabelled
       className={className}
       label={label}
       withLabel={withLabel}
@@ -45,11 +45,11 @@ function TextArea ({ children, className, isError, isReadOnly, label, onChange,
         />
         {children}
       </div>
-    </Labelled>
+    </StyledLabelled>
   );
 }
 
-export default React.memo(styled(TextArea)`
+const StyledLabelled = styled(Labelled)`
   .TextAreaWithDropdown {
     display: flex;
     textarea {
@@ -94,4 +94,6 @@ export default React.memo(styled(TextArea)`
       }
     }
   }
-`);
+`;
+
+export default React.memo(TextArea);

packages/react-components/src/ToggleGroup.tsx

@@ -9,7 +9,7 @@ import { Button } from '@polkadot/react-components';
 interface Option {
   isDisabled?: boolean;
   text: string;
-  value: number;
+  value: string | number;
 }
 
 interface Props {
@@ -61,7 +61,7 @@ function ToggleGroup ({ className = '', onChange, options, value }: Props): Reac
   }
 
   return (
-    <div className={`ui--ToggleGroup ${className}`}>
+    <StyledDiv className={`ui--ToggleGroup ${className}`}>
       {available.map(({ isDisabled, text }, index): React.ReactNode => (
         <ToggleIndexMemo
           index={index}
@@ -72,11 +72,11 @@ function ToggleGroup ({ className = '', onChange, options, value }: Props): Reac
           text={text}
         />
       ))}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(ToggleGroup)`
+const StyledDiv = styled.div`
   display: inline-block;
   margin-right: 1.5rem;
 
@@ -97,4 +97,6 @@ export default React.memo(styled(ToggleGroup)`
       width: 1em;
     }
   }
-`);
+`;
+
+export default React.memo(ToggleGroup);

packages/react-components/src/Tooltip.tsx

@@ -39,7 +39,7 @@ function Tooltip ({ children, className = '', isClickable = false, place, text,
   }, [tooltipContainer]);
 
   return createPortal(
-    <ReactTooltip
+    <StyledReactTooltip
       className={`ui--Tooltip ${className}`}
       clickable={isClickable}
       effect='solid'
@@ -49,12 +49,12 @@ function Tooltip ({ children, className = '', isClickable = false, place, text,
       <div className='tooltipSpacer'>
         {text}{children}
       </div>
-    </ReactTooltip>,
+    </StyledReactTooltip>,
     tooltipContainer
   );
 }
 
-export default React.memo(styled(Tooltip)`
+const StyledReactTooltip = styled(ReactTooltip)`
   .tooltipSpacer {
     padding: 0.375rem;
   }
@@ -115,4 +115,6 @@ export default React.memo(styled(Tooltip)`
   .row+.row {
     margin-top: 0.5rem;
   }
-`);
+`;
+
+export default React.memo(Tooltip);