diff --git a/packages/react-components/src/InputAddress/index.tsx b/packages/react-components/src/InputAddress/index.tsx index 2e2321f29d..1874c3e40a 100644 --- a/packages/react-components/src/InputAddress/index.tsx +++ b/packages/react-components/src/InputAddress/index.tsx @@ -12,6 +12,7 @@ import { withMulti, withObservable } from '@polkadot/react-api/hoc'; import { keyring } from '@polkadot/ui-keyring'; import { createOptionItem } from '@polkadot/ui-keyring/options/item'; import { isNull, isUndefined } from '@polkadot/util'; +import { isAddress } from '@polkadot/util-crypto'; import Dropdown from '../Dropdown'; import Static from '../Static'; @@ -170,7 +171,7 @@ class InputAddress extends React.PureComponent { const { lastValue, value } = this.state; const lastOption = this.getLastOptionValue(); const actualValue = transformToAddress( - isDisabled || (defaultValue && this.hasValue(defaultValue)) + isDisabled || (defaultValue && (this.hasValue(defaultValue) || type === 'allPlus')) ? defaultValue : this.hasValue(lastValue) ? lastValue @@ -180,7 +181,9 @@ class InputAddress extends React.PureComponent { ? dedupe(options.map((o) => createItem(o))) : isDisabled && actualValue ? [createOption(actualValue)] - : this.getFiltered(); + : actualValue + ? this.addActual(actualValue) + : this.getFiltered(); const _defaultValue = (isMultiple || !isUndefined(value)) ? undefined : actualValue; @@ -219,6 +222,14 @@ class InputAddress extends React.PureComponent { ); } + private addActual (actualValue: string): Option[] { + const base = this.getFiltered(); + + return this.hasValue(actualValue) + ? base + : base.concat(createOption(actualValue)); + } + private renderLabel = ({ value }: KeyringSectionOption): React.ReactNode => { if (!value) { return undefined; @@ -263,7 +274,7 @@ class InputAddress extends React.PureComponent { !filter && setLastValue(type, address); onChange && onChange( - this.hasValue(address) + !!address && (this.hasValue(address) || (type === 'allPlus' && isAddress(address))) ? transformToAccountId(address) : null ); diff --git a/packages/react-components/src/Params/Call.tsx b/packages/react-components/src/Params/Call.tsx index 09dddc8ed3..5e249be74c 100644 --- a/packages/react-components/src/Params/Call.tsx +++ b/packages/react-components/src/Params/Call.tsx @@ -1,6 +1,7 @@ // Copyright 2017-2022 @polkadot/app-extrinsics authors & contributors // SPDX-License-Identifier: Apache-2.0 +import type { ApiPromise } from '@polkadot/api'; import type { SubmittableExtrinsic, SubmittableExtrinsicFunction } from '@polkadot/api/types'; import type { Props, RawParam } from '@polkadot/react-params/types'; import type { Call } from '@polkadot/types/interfaces'; @@ -27,29 +28,31 @@ function mapArgs (args: unknown[]): RawParam[] { })); } +export function extractInitial (api: ApiPromise, initialValue: SubmittableExtrinsicFunction<'promise'>, input?: RawParam): { initialArgs?: RawParam[], initialValue: SubmittableExtrinsicFunction<'promise'> } { + try { + return input && input.value + ? isCall(input.value) + ? { + initialArgs: mapArgs(input.value.args), + initialValue: api.tx[input.value.section][input.value.method] + } + : isSubmittable(input.value) + ? { + initialArgs: mapArgs(input.value.method.args), + initialValue: api.tx[input.value.method.section][input.value.method.method] + } + : { initialValue: (input.value as SubmittableExtrinsicFunction<'promise'>) } + : { initialValue }; + } catch (error) { + return { initialValue }; + } +} + function CallDisplay ({ className = '', defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement { const { api, apiDefaultTx } = useApi(); const [{ initialArgs, initialValue }] = useState( - (): { initialArgs?: RawParam[], initialValue: SubmittableExtrinsicFunction<'promise'> } => { - try { - return defaultValue && defaultValue.value - ? isCall(defaultValue.value) - ? { - initialArgs: mapArgs(defaultValue.value.args), - initialValue: api.tx[defaultValue.value.section][defaultValue.value.method] - } - : isSubmittable(defaultValue.value) - ? { - initialArgs: mapArgs(defaultValue.value.method.args), - initialValue: api.tx[defaultValue.value.method.section][defaultValue.value.method.method] - } - : { initialValue: (defaultValue.value as SubmittableExtrinsicFunction<'promise'>) } - : { initialValue: api.tx.balances.transfer }; - } catch (error) { - return { initialValue: apiDefaultTx }; - } - } + () => extractInitial(api, apiDefaultTx, defaultValue) ); return ( diff --git a/packages/react-components/src/Params/OpaqueCall.tsx b/packages/react-components/src/Params/OpaqueCall.tsx index 48502cec2b..00728b5a8d 100644 --- a/packages/react-components/src/Params/OpaqueCall.tsx +++ b/packages/react-components/src/Params/OpaqueCall.tsx @@ -4,14 +4,19 @@ import type { SubmittableExtrinsic } from '@polkadot/api/types'; import type { Props, RawParam } from '@polkadot/react-params/types'; -import React, { useCallback } from 'react'; +import React, { useCallback, useState } from 'react'; import { useApi } from '@polkadot/react-hooks'; +import { extractInitial } from './Call'; import ExtrinsicDisplay from './Extrinsic'; -function OpaqueCall ({ className = '', isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement { - const { apiDefaultTxSudo } = useApi(); +function OpaqueCall ({ className = '', defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement { + const { api, apiDefaultTxSudo } = useApi(); + + const [{ initialArgs, initialValue }] = useState( + () => extractInitial(api, apiDefaultTxSudo, defaultValue) + ); const _onChange = useCallback( ({ isValid, value }: RawParam): void => { @@ -32,7 +37,8 @@ function OpaqueCall ({ className = '', isDisabled, isError, label, onChange, onE return ( { +function ProposalDisplay ({ className = '', defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement { const { api, apiDefaultTxSudo } = useApi(); + const [{ initialArgs, initialValue }] = useState( + () => extractInitial(api, apiDefaultTxSudo, defaultValue) + ); + const _onChange = useCallback( ({ isValid, value }: RawParam): void => { let proposal = null; @@ -31,7 +36,8 @@ function ProposalDisplay ({ className = '', isDisabled, isError, label, onChange return (