Adjust Option<Bytes> encoding (per Option) (#8616)

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

@@ -66,7 +66,6 @@ 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/react-params/src/Param/BaseBytes.tsx

@@ -7,7 +7,7 @@ import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 
 import { CopyButton, IdentityIcon, Input } from '@polkadot/react-components';
-import { compactAddLength, hexToU8a, isAscii, isHex, stringToU8a, u8aConcat, u8aToHex, u8aToString, u8aToU8a } from '@polkadot/util';
+import { compactAddLength, hexToU8a, isAscii, isHex, stringToU8a, u8aToHex, u8aToString, u8aToU8a } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
 import { useTranslation } from '../translate';
@@ -33,7 +33,6 @@ interface Props {
   withCopy?: boolean;
   withLabel?: boolean;
   withLength?: boolean;
-  withOptionNaked?: boolean;
 }
 
 interface Validity {
@@ -68,7 +67,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', type: { withOptionNaked }, validate = defaultValidate, withCopy, withLabel, withLength }: Props): React.ReactElement<Props> {
+function BaseBytes ({ asHex, children, className = '', defaultValue: { value }, isDisabled, isError, label, length = -1, onChange, onEnter, onEscape, size = 'full', validate = defaultValidate, withCopy, withLabel, withLength }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [defaultValue] = useState(
     (): string | undefined => {
@@ -102,10 +101,6 @@ function BaseBytes ({ asHex, children, className = '', defaultValue: { value },
         value = compactAddLength(value);
       }
 
-      if (isInOption && isValid && !withOptionNaked) {
-        value = u8aConcat([1], value);
-      }
-
       onChange && onChange({
         isValid,
         value: asHex
@@ -115,7 +110,7 @@ function BaseBytes ({ asHex, children, className = '', defaultValue: { value },
 
       setValidity({ isAddress, isValid, lastValue: value });
     },
-    [asHex, isInOption, length, onChange, validate, withLength, withOptionNaked]
+    [asHex, length, onChange, validate, withLength]
   );
 
   return (

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

@@ -2,21 +2,22 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Codec, TypeDef } from '@polkadot/types/types';
-import type { Props } from '../types';
+import type { Props, RawParamOnChangeValue } from '../types';
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, 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 { isU8a, u8aConcat } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import Param from './index';
 
 const DEF_VALUE = { isValid: true, value: undefined };
+const OPT_PREFIX = new Uint8Array([1]);
 
-function OptionDisplay ({ className = '', defaultValue: _defaultValue, isDisabled, name, onChange, onEnter, onEscape, registry, type: { sub, withOptionActive, withOptionNaked } }: Props): React.ReactElement<Props> {
+function OptionDisplay ({ className = '', defaultValue: _defaultValue, isDisabled, name, onChange, onEnter, onEscape, registry, type: { sub, withOptionActive } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [isActive, setIsActive] = useState(() => withOptionActive || !!(_defaultValue && _defaultValue.value instanceof Option && _defaultValue.value.isSome) || false);
   const [defaultValue] = useState(
@@ -28,10 +29,6 @@ function OptionDisplay ({ className = '', defaultValue: _defaultValue, isDisable
       )
       : DEF_VALUE
   );
-  const subType = useMemo(
-    () => objectSpread<TypeDef>({}, sub, { withOptionNaked }),
-    [sub, withOptionNaked]
-  );
 
   useEffect((): void => {
     !isActive && onChange && onChange({
@@ -40,19 +37,32 @@ function OptionDisplay ({ className = '', defaultValue: _defaultValue, isDisable
     });
   }, [isActive, onChange]);
 
+  const _onChange = useCallback(
+    (value: RawParamOnChangeValue) =>
+      onChange && onChange(
+        value.isValid && isU8a(value.value) && !withOptionActive && isActive
+          ? { isValid: true, value: u8aConcat(OPT_PREFIX, value.value) }
+          : value
+      ),
+    [isActive, onChange, withOptionActive]
+  );
+
   return (
     <div className={className}>
       <Param
-        defaultValue={isActive ? defaultValue : DEF_VALUE}
+        defaultValue={
+          isActive
+            ? defaultValue
+            : DEF_VALUE}
         isDisabled={isDisabled || !isActive}
         isInOption
         isOptional={!isActive && !isDisabled}
         name={name}
-        onChange={onChange}
+        onChange={_onChange}
         onEnter={onEnter}
         onEscape={onEscape}
         registry={registry}
-        type={subType}
+        type={sub as TypeDef}
       />
       {!isDisabled && (
         <Toggle

packages/react-params/src/types.ts

@@ -69,5 +69,4 @@ export interface ExpandedCid {
 
 export interface TypeDefExt extends TypeDef {
   withOptionActive?: boolean;
-  withOptionNaked?: boolean;
 }