fix: transactionPaymentApi issue (#11208)

* fix: transactionPaymentApi issue

* chore: changed variable name

* chore: added comment

packages/page-runtime/src/Runtime/Selection.tsx

@@ -22,6 +22,12 @@ interface State {
   values: RawParam[];
 }
 
+/**
+ * Declares the Runtime APIs that do not require extrinsic length to be prefixed when converting them to a u8 array.
+ * REF: https://github.com/polkadot-js/apps/blob/master/packages/react-params/src/Param/BaseBytes.tsx#L99
+*/
+const WITHOUT_LENGTH = ['transactionPaymentApi'];
+
 function Selection ({ onSubmit }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [{ isValid, method, values }, setState] = useState<State>({
@@ -82,6 +88,7 @@ function Selection ({ onSubmit }: Props): React.ReactElement<Props> {
           key={`${method.section}.${method.method}:params` /* force re-render on change */}
           onChange={_onChangeValues}
           params={params}
+          withLength={!WITHOUT_LENGTH.includes(method.section)}
         />
       )}
       <Button.Group>

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

@@ -12,7 +12,7 @@ import { useTranslation } from '../translate.js';
 import BaseBytes from './BaseBytes.js';
 import File from './File.js';
 
-function Bytes ({ className = '', defaultValue, isDisabled, isError, label, name, onChange, onEnter, onEscape, type, withLabel }: Props): React.ReactElement<Props> {
+function Bytes ({ className = '', defaultValue, isDisabled, isError, label, name, onChange, onEnter, onEscape, type, withLabel, withLength = true }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [isValid, setIsValid] = useState(false);
   const [isFileDrop, setFileInput] = useState(false);
@@ -66,7 +66,7 @@ function Bytes ({ className = '', defaultValue, isDisabled, isError, label, name
             onEscape={onEscape}
             type={type}
             withLabel={withLabel}
-            withLength
+            withLength={withLength}
           />
         )
       }

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

@@ -22,7 +22,7 @@ function formatJSON (input: string): string {
     .replace(/^{_alias: {.*}, /, '{');
 }
 
-function Param ({ className = '', defaultValue, isDisabled, isError, isOptional, name, onChange, onEnter, onEscape, overrides, registry, type }: Props): React.ReactElement<Props> | null {
+function Param ({ className = '', defaultValue, isDisabled, isError, isOptional, name, onChange, onEnter, onEscape, overrides, registry, type, withLength = true }: Props): React.ReactElement<Props> | null {
   const Component = useMemo(
     () => findComponent(registry, type, overrides),
     [registry, type, overrides]
@@ -71,6 +71,7 @@ function Param ({ className = '', defaultValue, isDisabled, isError, isOptional,
         overrides={overrides}
         registry={registry}
         type={type}
+        withLength={withLength}
       />
     );
 }

packages/react-params/src/ParamComp.tsx

@@ -21,9 +21,10 @@ interface Props {
   registry: Registry;
   type: TypeDef;
   values?: RawParams | null;
+  withLength?: boolean;
 }
 
-function ParamComp ({ defaultValue, index, isDisabled, isError, name, onChange, onEnter, onEscape, overrides, registry, type }: Props): React.ReactElement<Props> {
+function ParamComp ({ defaultValue, index, isDisabled, isError, name, onChange, onEnter, onEscape, overrides, registry, type, withLength = true }: Props): React.ReactElement<Props> {
   const _onChange = useCallback(
     (value: RawParamOnChangeValue): void =>
       onChange(index, value),
@@ -44,6 +45,7 @@ function ParamComp ({ defaultValue, index, isDisabled, isError, name, onChange,
         overrides={overrides}
         registry={registry}
         type={type}
+        withLength={withLength}
       />
     </div>
   );

packages/react-params/src/index.tsx

@@ -32,6 +32,7 @@ interface Props extends I18nProps {
   values?: RawParams | null;
   withBorder?: boolean;
   withExpander?: boolean;
+  withLength?: boolean;
 }
 
 interface State {
@@ -84,7 +85,7 @@ class Params extends React.PureComponent<Props, State> {
   }
 
   public override render (): React.ReactNode {
-    const { children, className = '', isDisabled, isError, onEnter, onEscape, overrides, params, registry = statics.api.registry, withBorder = true, withExpander } = this.props;
+    const { children, className = '', isDisabled, isError, onEnter, onEscape, overrides, params, registry = statics.api.registry, withBorder = true, withExpander, withLength = true } = this.props;
     const { values = this.props.values } = this.state;
 
     if (!values?.length) {
@@ -113,6 +114,7 @@ class Params extends React.PureComponent<Props, State> {
                 overrides={overrides}
                 registry={registry}
                 type={type}
+                withLength={withLength}
               />
             ))}
             {children}

packages/react-params/src/types.ts

@@ -43,6 +43,7 @@ export interface Props {
   registry: Registry;
   type: TypeDefExt;
   withLabel?: boolean;
+  withLength?: boolean;
 }
 
 export type Size = 'full' | 'large' | 'medium' | 'small';