From 3d4e8a50481eb10cc038aee816e2b4d4e85358f9 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Sat, 14 Jan 2023 14:49:53 +0200
Subject: [PATCH] Rework params styled injection (#8797)

* Rework params styled injection

* Adjust

* Pass registry

* Adjust

* Adjust
---
 packages/apps/public/index.html               |  9 ++++++
 packages/react-params/src/Holder.tsx          | 10 +++---
 packages/react-params/src/Param/Bare.tsx      |  7 ++--
 packages/react-params/src/Param/BaseBytes.tsx | 10 +++---
 packages/react-params/src/Param/Bytes.tsx     |  7 ++--
 packages/react-params/src/Param/Code.tsx      |  3 +-
 .../react-params/src/Param/DispatchError.tsx  |  7 +---
 .../react-params/src/Param/KeyValueArray.tsx  |  3 +-
 packages/react-params/src/Param/Option.tsx    |  7 ++--
 packages/react-params/src/Param/Static.tsx    | 32 +++++++++++--------
 packages/react-params/src/Param/index.tsx     |  1 -
 11 files changed, 51 insertions(+), 45 deletions(-)

diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html
index 874651b8a6..74473c1ee9 100644
--- a/packages/apps/public/index.html
+++ b/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);
diff --git a/packages/react-params/src/Holder.tsx b/packages/react-params/src/Holder.tsx
index 4ddb54a212..04e44a6da5 100644
--- a/packages/react-params/src/Holder.tsx
+++ b/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);
diff --git a/packages/react-params/src/Param/Bare.tsx b/packages/react-params/src/Param/Bare.tsx
index 17f0eaeec7..2822a6d513 100644
--- a/packages/react-params/src/Param/Bare.tsx
+++ b/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)`
-  position: relative;
-`);
+export default React.memo(Bare);
diff --git a/packages/react-params/src/Param/BaseBytes.tsx b/packages/react-params/src/Param/BaseBytes.tsx
index 54ec504fa7..963e12441d 100644
--- a/packages/react-params/src/Param/BaseBytes.tsx
+++ b/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);
diff --git a/packages/react-params/src/Param/Bytes.tsx b/packages/react-params/src/Param/Bytes.tsx
index cbb936b279..b4c6d0e2b3 100644
--- a/packages/react-params/src/Param/Bytes.tsx
+++ b/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)`
-  position: relative;
-`);
+export default React.memo(Bytes);
diff --git a/packages/react-params/src/Param/Code.tsx b/packages/react-params/src/Param/Code.tsx
index cd939cb045..b3cd021f92 100644
--- a/packages/react-params/src/Param/Code.tsx
+++ b/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}
       />
diff --git a/packages/react-params/src/Param/DispatchError.tsx b/packages/react-params/src/Param/DispatchError.tsx
index b4d50ac114..c0fe08fdb9 100644
--- a/packages/react-params/src/Param/DispatchError.tsx
+++ b/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)`
-  // .ui--Labelled-content {
-  //   background: rgba(196, 0, 0, 0.1);
-  // }
-`);
+export default React.memo(ErrorDisplay);
diff --git a/packages/react-params/src/Param/KeyValueArray.tsx b/packages/react-params/src/Param/KeyValueArray.tsx
index c8083158fd..2d26239c6d 100644
--- a/packages/react-params/src/Param/KeyValueArray.tsx
+++ b/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}
               />
             );
diff --git a/packages/react-params/src/Param/Option.tsx b/packages/react-params/src/Param/Option.tsx
index 881e672c38..4ffa7566f4 100644
--- a/packages/react-params/src/Param/Option.tsx
+++ b/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)`
-  position: relative;
-`);
+export default React.memo(OptionDisplay);
diff --git a/packages/react-params/src/Param/Static.tsx b/packages/react-params/src/Param/Static.tsx
index f02fbab972..0a6f7b4a81 100644
--- a/packages/react-params/src/Param/Static.tsx
+++ b/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
-      ? (defaultValue.value as Codec).toHex()
-      : toHumanJson(
-        (defaultValue.value as { toHuman?: () => unknown }).toHuman
-          ? (defaultValue.value as Codec).toHuman()
-          : defaultValue.value
-      )
+
+  const value = useMemo(
+    () => defaultValue && defaultValue.value && (
+      asHex
+        ? (defaultValue.value as Codec).toHex()
+        : toHumanJson(
+          (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);
diff --git a/packages/react-params/src/Param/index.tsx b/packages/react-params/src/Param/index.tsx
index dfa730d642..29dc831862 100644
--- a/packages/react-params/src/Param/index.tsx
+++ b/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}
       />
     )
     : (