Nested Call decoded display (#7503)

* Nested Call decoded display

* Fix non-default case

packages/react-components/src/InputExtrinsic/index.tsx

@@ -31,6 +31,7 @@ function InputExtrinsic ({ className = '', defaultValue, help, isDisabled, label
   const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(() => methodOptions(api, defaultValue.section));
   const [optionsSection] = useState<DropdownOptions>(() => sectionOptions(api));
   const [value, setValue] = useState<SubmittableExtrinsicFunction<'promise'>>((): SubmittableExtrinsicFunction<'promise'> => defaultValue);
+  const [{ defaultMethod, defaultSection }] = useState(() => ({ defaultMethod: defaultValue.method, defaultSection: defaultValue.section }));
 
   const _onKeyChange = useCallback(
     (newValue: SubmittableExtrinsicFunction<'promise'>): void => {
@@ -64,7 +65,7 @@ function InputExtrinsic ({ className = '', defaultValue, help, isDisabled, label
     >
       <SelectSection
         className='small'
-        defaultValue={isDisabled ? value.section : undefined}
+        defaultValue={defaultSection}
         isDisabled={isDisabled}
         onChange={isDisabled ? undefined : _onSectionChange}
         options={optionsSection}
@@ -73,7 +74,7 @@ function InputExtrinsic ({ className = '', defaultValue, help, isDisabled, label
       <SelectMethod
         api={api}
         className='large'
-        defaultValue={isDisabled ? value.method : undefined}
+        defaultValue={defaultMethod}
         isDisabled={isDisabled}
         onChange={isDisabled ? undefined : _onKeyChange}
         options={optionsMethod}

packages/react-components/src/Params/Call.tsx

@@ -4,27 +4,31 @@
 import type { SubmittableExtrinsicFunction } from '@polkadot/api/types';
 import type { Props } from '@polkadot/react-params/types';
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import { useApi } from '@polkadot/react-hooks';
 
 import Extrinsic from './Extrinsic';
 
-function Call ({ className = '', isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement<Props> {
+function Call ({ className = '', defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement<Props> {
   const { api, apiDefaultTx } = useApi();
 
-  const defaultValue = ((): SubmittableExtrinsicFunction<'promise'> => {
-    try {
-      return api.tx.balances.transfer;
-    } catch (error) {
-      return apiDefaultTx;
+  const [initialValue] = useState(
+    (): SubmittableExtrinsicFunction<'promise'> => {
+      try {
+        return defaultValue && defaultValue.value
+          ? defaultValue.value as SubmittableExtrinsicFunction<'promise'>
+          : api.tx.balances.transfer;
+      } catch (error) {
+        return apiDefaultTx;
+      }
     }
-  })();
+  );
 
   return (
     <Extrinsic
       className={className}
-      defaultValue={defaultValue}
+      defaultValue={initialValue}
       isDisabled={isDisabled}
       isError={isError}
       isPrivate={false}

packages/react-components/src/Params/Extrinsic.tsx

@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { SubmittableExtrinsic, SubmittableExtrinsicFunction } from '@polkadot/api/types';
-import type { RawParamOnChange, RawParamOnEnter, RawParamOnEscape } from '@polkadot/react-params/types';
+import type { RawParam, RawParamOnChange, RawParamOnEnter, RawParamOnEscape } from '@polkadot/react-params/types';
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import BaseExtrinsic from '../Extrinsic';
 
@@ -22,6 +22,13 @@ interface Props {
 }
 
 function ExtrinsicDisplay ({ className = '', defaultValue, isDisabled, isError, isPrivate, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement<Props> {
+  const [defaultArgs] = useState(
+    () => defaultValue && defaultValue.args && defaultValue.args.map((value): RawParam => ({
+      isValid: true,
+      value
+    }))
+  );
+
   const _onChange = useCallback(
     (method?: SubmittableExtrinsic<'promise'>): void =>
       onChange && onChange({
@@ -34,6 +41,7 @@ function ExtrinsicDisplay ({ className = '', defaultValue, isDisabled, isError,
   return (
     <BaseExtrinsic
       className={className}
+      defaultArgs={defaultArgs}
       defaultValue={defaultValue}
       isDisabled={isDisabled}
       isError={isError}

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, isU8a, stringToU8a, u8aToHex, u8aToString } 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';
@@ -70,17 +70,21 @@ function convertInput (value: string): [boolean, boolean, 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> {
   const { t } = useTranslation();
   const [defaultValue] = useState(
-    value
-      ? isDisabled && isU8a(value) && isAscii(value)
-        ? u8aToString(value)
-        : isHex(value)
-          ? value
-          : u8aToHex(value as Uint8Array)
-      : undefined
+    (): string | undefined => {
+      if (value) {
+        const u8a = u8aToU8a(value as Uint8Array);
+
+        return isAscii(u8a)
+          ? u8aToString(u8a)
+          : u8aToHex(u8a);
+      }
+
+      return undefined;
+    }
   );
   const [{ isAddress, isValid, lastValue }, setValidity] = useState<Validity>(() => ({
     isAddress: false,
-    isValid: isHex(defaultValue)
+    isValid: isHex(defaultValue) || isAscii(defaultValue)
   }));
 
   const _onChange = useCallback(