Fix Bytes map key queries (#8615)

* Fix Bytes map key queries

* Spread subtype

packages/page-storage/src/Selection/Modules.tsx

@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { QueryableStorageEntry } from '@polkadot/api/types';
-import type { RawParams } from '@polkadot/react-params/types';
+import type { RawParams, TypeDefExt } from '@polkadot/react-params/types';
 import type { StorageEntryTypeLatest } from '@polkadot/types/interfaces';
-import type { Inspect, Registry, TypeDef } from '@polkadot/types/types';
+import type { Inspect, Registry } from '@polkadot/types/types';
 import type { ComponentProps as Props } from '../types';
 
 import React, { useCallback, useMemo, useState } from 'react';
@@ -21,10 +21,6 @@ import { compactStripLength, isHex, isNull, isUndefined, u8aToHex } from '@polka
 
 import { useTranslation } from '../translate';
 
-interface TypeDefExt extends TypeDef {
-  withOptionActive?: boolean;
-}
-
 type ParamsType = { type: TypeDefExt }[];
 
 interface KeyState {
@@ -70,6 +66,7 @@ function expandParams (registry: Registry, st: StorageEntryTypeLatest, isIterabl
     if (isIterable && index === (types.length - 1)) {
       type = getTypeDef(`Option<${str}>`);
       type.withOptionActive = true;
+      type.withOptionNaked = true;
     } else {
       type = getTypeDef(str);
     }

packages/page-storage/src/Selection/index.tsx

@@ -40,7 +40,7 @@ function Selection ({ basePath, onAdd }: Props): React.ReactElement<Props> {
   ]);
 
   const _onAdd = useCallback(
-    (query: ParitalQueryTypes): void => onAdd({ ...query, id: ++id }),
+    (query: ParitalQueryTypes) => onAdd({ ...query, id: ++id }),
     [onAdd]
   );
 

packages/react-params/src/Holder.tsx

@@ -13,7 +13,7 @@ interface Props {
 
 function Holder ({ children, className = '', withBorder, withPadding }: Props): React.ReactElement<Props> {
   return (
-    <div className={`ui--Params ${className} ${withBorder ? 'withBorder' : 'withoutBorder'} ${withPadding ? 'withPadding' : ''}`}>
+    <div className={`ui--Params ${className}${withBorder ? ' withBorder' : ''}${withPadding ? ' withPadding' : ''}`}>
       {children}
     </div>
   );
@@ -21,16 +21,15 @@ function Holder ({ children, className = '', withBorder, withPadding }: Props):
 
 export default React.memo(styled(Holder)`
   &.withBorder {
-    padding-left: 0.25rem;
+    padding-left: 1.5rem;
 
     .ui--Params-Content {
       border-left: 0.25rem solid #f2f2f2;
-    }
-  }
 
-  &.withoutBorder {
-    margin-left: -1.75rem;
-    padding: 0;
+      .ui--Params.withBorder {
+        padding-left: 0.25rem;
+      }
+    }
   }
 
   &.withPadding {

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

@@ -1,8 +1,7 @@
 // Copyright 2017-2022 @polkadot/react-params authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TypeDef } from '@polkadot/types/types';
-import type { RawParam, RawParamOnChange, RawParamOnEnter, RawParamOnEscape, Size } from '../types';
+import type { RawParam, RawParamOnChange, RawParamOnEnter, RawParamOnEscape, Size, TypeDefExt } from '../types';
 
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
@@ -29,11 +28,12 @@ interface Props {
   onEnter?: RawParamOnEnter;
   onEscape?: RawParamOnEscape;
   size?: Size;
-  type: TypeDef & { withOptionActive?: boolean };
+  type: TypeDefExt;
   validate?: (u8a: Uint8Array) => boolean;
   withCopy?: boolean;
   withLabel?: boolean;
   withLength?: boolean;
+  withOptionNaked?: boolean;
 }
 
 interface Validity {
@@ -68,7 +68,7 @@ function convertInput (value: string): [boolean, boolean, Uint8Array] {
     : [value === '0x', false, new Uint8Array([])];
 }
 
-function BaseBytes ({ asHex, children, className = '', defaultValue: { value }, isDisabled, isError, isInOption, label, length = -1, onChange, onEnter, onEscape, size = 'full', validate = defaultValidate, withCopy, withLabel, withLength }: Props): React.ReactElement<Props> {
+function BaseBytes ({ asHex, children, className = '', defaultValue: { value }, isDisabled, isError, isInOption, label, length = -1, onChange, onEnter, onEscape, size = 'full', type: { withOptionNaked }, validate = defaultValidate, withCopy, withLabel, withLength }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [defaultValue] = useState(
     (): string | undefined => {
@@ -102,7 +102,7 @@ function BaseBytes ({ asHex, children, className = '', defaultValue: { value },
         value = compactAddLength(value);
       }
 
-      if (isInOption && isValid) {
+      if (isInOption && isValid && !withOptionNaked) {
         value = u8aConcat([1], value);
       }
 
@@ -115,7 +115,7 @@ function BaseBytes ({ asHex, children, className = '', defaultValue: { value },
 
       setValidity({ isAddress, isValid, lastValue: value });
     },
-    [asHex, length, onChange, validate, withLength, isInOption]
+    [asHex, isInOption, length, onChange, validate, withLength, withOptionNaked]
   );
 
   return (

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

@@ -4,18 +4,19 @@
 import type { Codec, TypeDef } from '@polkadot/types/types';
 import type { Props } from '../types';
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { Toggle } from '@polkadot/react-components';
 import { Option } from '@polkadot/types';
+import { objectSpread } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import Param from './index';
 
 const DEF_VALUE = { isValid: true, value: undefined };
 
-function OptionDisplay ({ className = '', defaultValue: _defaultValue, isDisabled, name, onChange, onEnter, onEscape, registry, type: { sub, withOptionActive } }: Props): React.ReactElement<Props> {
+function OptionDisplay ({ className = '', defaultValue: _defaultValue, isDisabled, name, onChange, onEnter, onEscape, registry, type: { sub, withOptionActive, withOptionNaked } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [isActive, setIsActive] = useState(() => withOptionActive || !!(_defaultValue && _defaultValue.value instanceof Option && _defaultValue.value.isSome) || false);
   const [defaultValue] = useState(
@@ -27,6 +28,10 @@ function OptionDisplay ({ className = '', defaultValue: _defaultValue, isDisable
       )
       : DEF_VALUE
   );
+  const subType = useMemo(
+    () => objectSpread<TypeDef>({}, sub, { withOptionNaked }),
+    [sub, withOptionNaked]
+  );
 
   useEffect((): void => {
     !isActive && onChange && onChange({
@@ -47,7 +52,7 @@ function OptionDisplay ({ className = '', defaultValue: _defaultValue, isDisable
         onEnter={onEnter}
         onEscape={onEscape}
         registry={registry}
-        type={sub as TypeDef}
+        type={subType}
       />
       {!isDisabled && (
         <Toggle

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

@@ -33,7 +33,6 @@ function Unknown (props: Props): React.ReactElement<Props> {
       onEnter={onEnter}
       onEscape={onEscape}
       type={type}
-      withLength={false}
     />
   );
 }

packages/react-params/src/types.ts

@@ -44,7 +44,7 @@ export interface Props {
   // eslint-disable-next-line no-use-before-define
   overrides?: ComponentMap;
   registry: Registry;
-  type: TypeDef & { withOptionActive?: boolean };
+  type: TypeDefExt;
   withLabel?: boolean;
 }
 
@@ -66,3 +66,8 @@ export interface ExpandedCid {
   };
   version: 0 | 1;
 }
+
+export interface TypeDefExt extends TypeDef {
+  withOptionActive?: boolean;
+  withOptionNaked?: boolean;
+}