From 3be7650feaf0478865614bdfb809b4ed3ec9d5d2 Mon Sep 17 00:00:00 2001
From: Adam Dossa <adam.dossa@gmail.com>
Date: Mon, 14 Nov 2022 16:53:14 +0000
Subject: [PATCH] Fix `Option<Bytes>` encoding (#8336)

* Fix `Option<Bytes>` encoding

* Fix linting and dependencies

* More linting
---
 packages/react-params/src/Param/BaseBytes.tsx | 11 ++++++++---
 packages/react-params/src/Param/Bytes.tsx     |  5 +++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/react-params/src/Param/BaseBytes.tsx b/packages/react-params/src/Param/BaseBytes.tsx
index dcec584b8f..4e628ddf6c 100644
--- a/packages/react-params/src/Param/BaseBytes.tsx
+++ b/packages/react-params/src/Param/BaseBytes.tsx
@@ -8,7 +8,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, u8aToHex, u8aToString, u8aToU8a } from '@polkadot/util';
+import { compactAddLength, hexToU8a, isAscii, isHex, stringToU8a, u8aConcat, u8aToHex, u8aToString, u8aToU8a } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
 import { useTranslation } from '../translate';
@@ -21,6 +21,7 @@ interface Props {
   defaultValue: RawParam;
   isDisabled?: boolean;
   isError?: boolean;
+  isInOption?: boolean;
   label?: React.ReactNode;
   length?: number;
   name?: string;
@@ -67,7 +68,7 @@ function convertInput (value: string): [boolean, boolean, Uint8Array] {
     : [value === '0x', false, new Uint8Array([])];
 }
 
-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> {
+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> {
   const { t } = useTranslation();
   const [defaultValue] = useState(
     (): string | undefined => {
@@ -101,6 +102,10 @@ function BaseBytes ({ asHex, children, className = '', defaultValue: { value },
         value = compactAddLength(value);
       }
 
+      if (isInOption && isValid) {
+        value = u8aConcat([1], value);
+      }
+
       onChange && onChange({
         isValid,
         value: asHex
@@ -110,7 +115,7 @@ function BaseBytes ({ asHex, children, className = '', defaultValue: { value },
 
       setValidity({ isAddress, isValid, lastValue: value });
     },
-    [asHex, length, onChange, validate, withLength]
+    [asHex, length, onChange, validate, withLength, isInOption]
   );
 
   return (
diff --git a/packages/react-params/src/Param/Bytes.tsx b/packages/react-params/src/Param/Bytes.tsx
index 464d5f7afd..bf77c9bbe0 100644
--- a/packages/react-params/src/Param/Bytes.tsx
+++ b/packages/react-params/src/Param/Bytes.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from '../translate';
 import BaseBytes from './BaseBytes';
 import File from './File';
 
-function Bytes ({ className = '', defaultValue, isDisabled, isError, label, name, onChange, onEnter, onEscape, type, withLabel }: Props): React.ReactElement<Props> {
+function Bytes ({ className = '', defaultValue, isDisabled, isError, isInOption, label, name, onChange, onEnter, onEscape, type, withLabel }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [isValid, setIsValid] = useState(false);
   const [isFileDrop, setFileInput] = useState(false);
@@ -49,6 +49,7 @@ function Bytes ({ className = '', defaultValue, isDisabled, isError, label, name
             defaultValue={defaultValue}
             isDisabled={isDisabled}
             isError={isError}
+            isInOption={isInOption}
             label={label}
             length={-1}
             name={name}
@@ -61,7 +62,7 @@ function Bytes ({ className = '', defaultValue, isDisabled, isError, label, name
           />
         )
       }
-      {!isDisabled && (
+      {!isDisabled && !isInOption && (
         <Toggle
           isOverlay
           label={t<string>('file upload')}