Rework params styled injection (#8797)

* Rework params styled injection

* Adjust

* Pass registry

* Adjust

* Adjust

packages/apps/public/index.html

@@ -91,6 +91,11 @@
         /* --color-table-head: rgba(78, 78, 78, 0.8); */
         --color-text: rgba(78, 78, 78, 0.8); /* 1 */
       }
+    </style>
+    <style>
+      .--absolute {
+        position: absolute;
+      }
 
       .--digits {
         font-variant-numeric: tabular-nums;
@@ -102,6 +107,10 @@
         display: none;
       }
 
+      .--relative {
+        position: relative;
+      }
+
       .--tmp {
         background: grey;
         filter: blur(2px);

packages/react-params/src/Holder.tsx

@@ -14,13 +14,13 @@ interface Props {
 
 function Holder ({ children, className = '', withBorder, withExpander, withPadding }: Props): React.ReactElement<Props> {
   return (
-    <div className={`ui--Params ${className}${withBorder ? ' withBorder' : ''}${withPadding ? ' withPadding' : ''}${withExpander ? ' withExpander' : ''}`}>
+    <StyledDiv className={`ui--Params ${className}${withBorder ? ' withBorder' : ''}${withPadding ? ' withPadding' : ''}${withExpander ? ' withExpander' : ''}`}>
       {children}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Holder)`
+const StyledDiv = styled.div`
   &.withBorder {
     padding-left: 2rem;
 
@@ -106,4 +106,6 @@ export default React.memo(styled(Holder)`
       right: 3.5rem;
     }
   }
-`);
+`;
+
+export default React.memo(Holder);

packages/react-params/src/Param/Bare.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import styled from 'styled-components';
 
 interface Props {
   children?: React.ReactNode;
@@ -11,12 +10,10 @@ interface Props {
 
 function Bare ({ children, className = '' }: Props): React.ReactElement<Props> {
   return (
-    <div className={`ui--row ${className}`}>
+    <div className={`ui--row --relative ${className}`}>
       {children}
     </div>
   );
 }
 
-export default React.memo(styled(Bare)`
+export default React.memo(Bare);
-  position: relative;
-`);

packages/react-params/src/Param/BaseBytes.tsx

@@ -114,7 +114,7 @@ function BaseBytes ({ asHex, children, className = '', defaultValue: { value },
   );
 
   return (
-    <Bare className={className}>
+    <StyledBare className={className}>
       <Input
         className={size}
         defaultValue={defaultValue as string}
@@ -142,11 +142,11 @@ function BaseBytes ({ asHex, children, className = '', defaultValue: { value },
           />
         )}
       </Input>
-    </Bare>
+    </StyledBare>
   );
 }
 
-export default React.memo(styled(BaseBytes)`
+const StyledBare = styled(Bare)`
   .ui--InputAddressSimpleIcon {
     background: #eee;
     border: 1px solid #888;
@@ -155,4 +155,6 @@ export default React.memo(styled(BaseBytes)`
     position: absolute;
     top: 8px;
   }
-`);
+`;
+
+export default React.memo(BaseBytes);

packages/react-params/src/Param/Bytes.tsx

@@ -4,7 +4,6 @@
 import type { Props } from '../types';
 
 import React, { useCallback, useState } from 'react';
-import styled from 'styled-components';
 
 import { Toggle } from '@polkadot/react-components';
 import { compactAddLength } from '@polkadot/util';
@@ -33,7 +32,7 @@ function Bytes ({ className = '', defaultValue, isDisabled, isError, isInOption,
   );
 
   return (
-    <div className={className}>
+    <div className={`${className} --relative`}>
       {!isDisabled && isFileDrop
         ? (
           <File
@@ -74,6 +73,4 @@ function Bytes ({ className = '', defaultValue, isDisabled, isError, isInOption,
   );
 }
 
-export default React.memo(styled(Bytes)`
+export default React.memo(Bytes);
-  position: relative;
-`);

packages/react-params/src/Param/Code.tsx

@@ -10,7 +10,7 @@ import { isWasm } from '@polkadot/util';
 import Bytes from './Bytes';
 import BytesFile from './File';
 
-function Code ({ className = '', defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, type, withLabel }: Props): React.ReactElement<Props> {
+function Code ({ className = '', defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, registry, type, withLabel }: Props): React.ReactElement<Props> {
   const [isValid, setIsValid] = useState(false);
 
   const _onChange = useCallback(
@@ -32,6 +32,7 @@ function Code ({ className = '', defaultValue, isDisabled, isError, label, onCha
         label={label}
         onEnter={onEnter}
         onEscape={onEscape}
+        registry={registry}
         type={type}
         withLabel={withLabel}
       />

packages/react-params/src/Param/DispatchError.tsx

@@ -5,7 +5,6 @@ import type { DispatchError } from '@polkadot/types/interfaces';
 import type { Props as BaseProps } from '../types';
 
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
 
 import { Input } from '@polkadot/react-components';
 
@@ -85,8 +84,4 @@ function ErrorDisplay (props: Props): React.ReactElement<Props> {
   );
 }
 
-export default React.memo(styled(ErrorDisplay)`
+export default React.memo(ErrorDisplay);
-  // .ui--Labelled-content {
-  //   background: rgba(196, 0, 0, 0.1);
-  // }
-`);

packages/react-params/src/Param/KeyValueArray.tsx

@@ -50,7 +50,7 @@ function parseFile (raw: Uint8Array): Parsed {
   };
 }
 
-function KeyValueArray ({ className = '', defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement<Props> {
+function KeyValueArray ({ className = '', defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, registry, withLabel }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [placeholder, setPlaceholder] = useState<string>(t(EMPTY_PLACEHOLDER));
 
@@ -101,6 +101,7 @@ function KeyValueArray ({ className = '', defaultValue, isDisabled, isError, lab
                 name={keyHex}
                 onEnter={onEnter}
                 onEscape={onEscape}
+                registry={registry}
                 type={BYTES_TYPE}
               />
             );

packages/react-params/src/Param/Option.tsx

@@ -5,7 +5,6 @@ import type { Codec, TypeDef } from '@polkadot/types/types';
 import type { Props, RawParamOnChangeValue } from '../types';
 
 import React, { useCallback, useEffect, useState } from 'react';
-import styled from 'styled-components';
 
 import { Toggle } from '@polkadot/react-components';
 import { Option } from '@polkadot/types';
@@ -48,7 +47,7 @@ function OptionDisplay ({ className = '', defaultValue: _defaultValue, isDisable
   );
 
   return (
-    <div className={className}>
+    <div className={`${className} --relative`}>
       <Param
         defaultValue={
           isActive
@@ -76,6 +75,4 @@ function OptionDisplay ({ className = '', defaultValue: _defaultValue, isDisable
   );
 }
 
-export default React.memo(styled(OptionDisplay)`
+export default React.memo(OptionDisplay);
-  position: relative;
-`);

packages/react-params/src/Param/Static.tsx

@@ -4,7 +4,7 @@
 import type { Codec } from '@polkadot/types/types';
 import type { RawParam } from '../types';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
 import { Static } from '@polkadot/react-components';
@@ -25,18 +25,22 @@ interface Props {
 
 function StaticParam ({ asHex, children, childrenPre, className = '', defaultValue, label }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const value = defaultValue && (defaultValue.value as string) && (
+
-    asHex
+  const value = useMemo(
-      ? (defaultValue.value as Codec).toHex()
+    () => defaultValue && defaultValue.value && (
-      : toHumanJson(
+      asHex
-        (defaultValue.value as { toHuman?: () => unknown }).toHuman
+        ? (defaultValue.value as Codec).toHex()
-          ? (defaultValue.value as Codec).toHuman()
+        : toHumanJson(
-          : defaultValue.value
+          (defaultValue.value as Codec).toHuman
-      )
+            ? (defaultValue.value as Codec).toHuman()
+            : defaultValue.value
+        )
+    ),
+    [asHex, defaultValue]
   );
 
   return (
-    <Bare className={className}>
+    <StyledBare className={className}>
       {childrenPre}
       <Static
         className='full'
@@ -44,11 +48,11 @@ function StaticParam ({ asHex, children, childrenPre, className = '', defaultVal
         value={<pre>{value || t<string>('<empty>')}</pre>}
       />
       {children}
-    </Bare>
+    </StyledBare>
   );
 }
 
-export default React.memo(styled(StaticParam)`
+const StyledBare = styled(Bare)`
   pre {
     margin: 0;
     overflow: hidden;
@@ -58,4 +62,6 @@ export default React.memo(styled(StaticParam)`
   .ui--Static {
     margin-bottom: 0 !important;
   }
-`);
+`;
+
+export default React.memo(StaticParam);

packages/react-params/src/Param/index.tsx

@@ -53,7 +53,6 @@ function Param ({ className = '', defaultValue, isDisabled, isError, isInOption,
       <Static
         defaultValue={defaultValue}
         label={label}
-        type={type}
       />
     )
     : (