From 606598e8980c11d5fb9a0789b37761382eb16d41 Mon Sep 17 00:00:00 2001 From: Arjun Porwal <65214523+ap211unitech@users.noreply.github.com> Date: Thu, 16 Jan 2025 20:34:47 +0530 Subject: [PATCH] fix: transactionPaymentApi issue (#11208) * fix: transactionPaymentApi issue * chore: changed variable name * chore: added comment --- packages/page-runtime/src/Runtime/Selection.tsx | 7 +++++++ packages/react-params/src/Param/Bytes.tsx | 4 ++-- packages/react-params/src/Param/index.tsx | 3 ++- packages/react-params/src/ParamComp.tsx | 4 +++- packages/react-params/src/index.tsx | 4 +++- packages/react-params/src/types.ts | 1 + 6 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/page-runtime/src/Runtime/Selection.tsx b/packages/page-runtime/src/Runtime/Selection.tsx index 3ddab77b0b..1437d5c734 100644 --- a/packages/page-runtime/src/Runtime/Selection.tsx +++ b/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 { const { t } = useTranslation(); const [{ isValid, method, values }, setState] = useState({ @@ -82,6 +88,7 @@ function Selection ({ onSubmit }: Props): React.ReactElement { key={`${method.section}.${method.method}:params` /* force re-render on change */} onChange={_onChangeValues} params={params} + withLength={!WITHOUT_LENGTH.includes(method.section)} /> )} diff --git a/packages/react-params/src/Param/Bytes.tsx b/packages/react-params/src/Param/Bytes.tsx index 4e93162097..81370d22d6 100644 --- a/packages/react-params/src/Param/Bytes.tsx +++ b/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 { +function Bytes ({ className = '', defaultValue, isDisabled, isError, label, name, onChange, onEnter, onEscape, type, withLabel, withLength = true }: Props): React.ReactElement { 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} /> ) } diff --git a/packages/react-params/src/Param/index.tsx b/packages/react-params/src/Param/index.tsx index 1056c8b0c2..fa2ba516be 100644 --- a/packages/react-params/src/Param/index.tsx +++ b/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 | null { +function Param ({ className = '', defaultValue, isDisabled, isError, isOptional, name, onChange, onEnter, onEscape, overrides, registry, type, withLength = true }: Props): React.ReactElement | 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} /> ); } diff --git a/packages/react-params/src/ParamComp.tsx b/packages/react-params/src/ParamComp.tsx index e0f8384185..b364d57653 100644 --- a/packages/react-params/src/ParamComp.tsx +++ b/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 { +function ParamComp ({ defaultValue, index, isDisabled, isError, name, onChange, onEnter, onEscape, overrides, registry, type, withLength = true }: Props): React.ReactElement { 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} /> ); diff --git a/packages/react-params/src/index.tsx b/packages/react-params/src/index.tsx index 8fd5ab4879..ca62b998c5 100644 --- a/packages/react-params/src/index.tsx +++ b/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 { } 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 { overrides={overrides} registry={registry} type={type} + withLength={withLength} /> ))} {children} diff --git a/packages/react-params/src/types.ts b/packages/react-params/src/types.ts index d683dc5e6f..279496cb8d 100644 --- a/packages/react-params/src/types.ts +++ b/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';