diff --git a/packages/react-components/src/Call.tsx b/packages/react-components/src/Call.tsx index ee6f12ef0d..256867e8f8 100644 --- a/packages/react-components/src/Call.tsx +++ b/packages/react-components/src/Call.tsx @@ -10,10 +10,10 @@ import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; import Params from '@polkadot/react-params'; -import BalanceParam from '@polkadot/react-params/Param/Balance'; import { FormatBalance } from '@polkadot/react-query'; import { Enum, getTypeDef } from '@polkadot/types'; +import { balanceCalls, balanceCallsOverrides } from './constants'; import Static from './Static'; import { useTranslation } from './translate'; @@ -52,22 +52,6 @@ interface Extracted { values: Value[]; } -const BALANCE_CALLS = [ - 'balances.forceTransfer', 'balances.forceUnreserve', 'balances.setBalance', 'balances.transfer', 'balances.transferKeepAlive', - 'bounties.proposeBounty', 'bounties.proposeCurator', - 'convictionVoting.delegate', - 'crowdloan.contribute', 'crowdloan.create', 'crowdloan.edit', - 'democracy.delegate', 'democracy.propose', - 'nominationPools.bondExtra', 'nominationPools.join', 'nominationPools.unbond', - 'staking.bond', 'staking.bondExtra', 'staking.rebond', 'staking.unbond', - 'treasury.proposeSpend', 'treasury.spend', - 'vesting.forceVestedTransfer', 'vesting.vestedTransfer' -]; - -const BALANCE_OVERRIDE: ComponentMap = { - 'Compact': BalanceParam -}; - function isExtrinsic (value: IExtrinsic | IMethod): value is IExtrinsic { return !!(value as IExtrinsic).signature; } @@ -79,8 +63,8 @@ function getRawSignature (value: IExtrinsic): ExtrinsicSignature | undefined { } function extractState (value: IExtrinsic | IMethod, withHash?: boolean, withSignature?: boolean, callName?: string): Extracted { - const overrides = callName && BALANCE_CALLS.includes(callName) - ? BALANCE_OVERRIDE + const overrides = callName && balanceCalls.includes(callName) + ? balanceCallsOverrides : undefined; const params = value.meta.args.map(({ name, type }): Param => ({ name: name.toString(), diff --git a/packages/react-components/src/Event.tsx b/packages/react-components/src/Event.tsx index b0980b77cf..74d0641e60 100644 --- a/packages/react-components/src/Event.tsx +++ b/packages/react-components/src/Event.tsx @@ -2,7 +2,6 @@ // SPDX-License-Identifier: Apache-2.0 import type { DecodedEvent } from '@polkadot/api-contract/types'; -import type { ComponentMap } from '@polkadot/react-params/types'; import type { Bytes } from '@polkadot/types'; import type { Event } from '@polkadot/types/interfaces'; import type { Codec } from '@polkadot/types/types'; @@ -10,8 +9,8 @@ import type { Codec } from '@polkadot/types/types'; import React, { useMemo } from 'react'; import { Input } from '@polkadot/react-components'; +import { balanceEvents, balanceEventsOverrides } from '@polkadot/react-components/constants'; import Params from '@polkadot/react-params'; -import BalanceParam from '@polkadot/react-params/Param/Balance'; import { useTranslation } from './translate'; import { getContractAbi } from './util'; @@ -32,18 +31,6 @@ interface AbiEvent extends DecodedEvent { values: Value[]; } -const BALANCE_EVENTS = [ - 'balances.Deposit', 'balances.Endowed', 'balances.Transfer', 'balances.Withdraw', - 'staking.Bonded', 'staking.Rewarded', 'staking.Unbonded', 'staking.Withdrawn', - 'transactionPayment.TransactionFeePaid', - 'treasury.Deposit' -]; - -const BALANCE_OVERRIDE: ComponentMap = { - 'Compact': BalanceParam, - u128: BalanceParam -}; - function EventDisplay ({ children, className = '', eventName, value }: Props): React.ReactElement { const { t } = useTranslation(); const names = value.data.names; @@ -54,8 +41,8 @@ function EventDisplay ({ children, className = '', eventName, value }: Props): R const values = value.data.map((value) => ({ isValid: true, value })); const overrides = useMemo( - () => eventName && BALANCE_EVENTS.includes(eventName) - ? BALANCE_OVERRIDE + () => eventName && balanceEvents.includes(eventName) + ? balanceEventsOverrides : undefined, [eventName] ); diff --git a/packages/react-components/src/Extrinsic.tsx b/packages/react-components/src/Extrinsic.tsx index 64f15380db..9984626495 100644 --- a/packages/react-components/src/Extrinsic.tsx +++ b/packages/react-components/src/Extrinsic.tsx @@ -2,15 +2,16 @@ // SPDX-License-Identifier: Apache-2.0 import type { SubmittableExtrinsic, SubmittableExtrinsicFunction } from '@polkadot/api/types'; -import type { RawParam } from '@polkadot/react-params/types'; +import type { ComponentMap, RawParam } from '@polkadot/react-params/types'; import type { TypeDef } from '@polkadot/types/types'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import Params from '@polkadot/react-params'; import { getTypeDef } from '@polkadot/types/create'; -import { isUndefined } from '@polkadot/util'; +import { isUndefined, objectSpread } from '@polkadot/util'; +import { balanceCalls, balanceCallsOverrides } from './constants'; import InputExtrinsic from './InputExtrinsic'; import paramComponents from './Params'; @@ -43,6 +44,8 @@ interface CallState { values: RawParam[]; } +const allComponents = objectSpread({}, paramComponents, balanceCallsOverrides); + function isValuesValid (params: ParamDef[], values: RawParam[]): boolean { return values.reduce((isValid, value): boolean => isValid && @@ -95,6 +98,13 @@ function ExtrinsicDisplay ({ defaultArgs, defaultValue, filter, isDisabled, isEr onChange(method); }, [extrinsic, onChange, onError, values]); + const overrides = useMemo( + () => balanceCalls.includes(`${extrinsic.fn.section}.${extrinsic.fn.method}`) + ? allComponents + : paramComponents, + [extrinsic] + ); + const _onChangeMethod = useCallback( (fn: SubmittableExtrinsicFunction<'promise'>) => setDisplay((prev): CallState => @@ -131,7 +141,7 @@ function ExtrinsicDisplay ({ defaultArgs, defaultValue, filter, isDisabled, isEr onChange={_setValues} onEnter={onEnter} onEscape={onEscape} - overrides={paramComponents} + overrides={overrides} params={params} values={values} /> diff --git a/packages/react-components/src/InputBalance.tsx b/packages/react-components/src/InputBalance.tsx index 888b9edbf5..de67730012 100644 --- a/packages/react-components/src/InputBalance.tsx +++ b/packages/react-components/src/InputBalance.tsx @@ -2,12 +2,10 @@ // SPDX-License-Identifier: Apache-2.0 import type { SiDef } from '@polkadot/util/types'; -import type { BitLength } from './types'; import React, { useMemo } from 'react'; import styled from 'styled-components'; -import { BitLengthOption } from '@polkadot/react-components/constants'; import { BN, BN_TEN, formatBalance, isString, isUndefined } from '@polkadot/util'; import InputNumber from './InputNumber'; @@ -38,7 +36,7 @@ interface Props { withMax?: boolean; } -const DEFAULT_BITLENGTH = BitLengthOption.CHAIN_SPEC as BitLength; +const DEFAULT_BITLENGTH = 128; function reformat (value?: string | BN, isDisabled?: boolean, siDecimals?: number): { defaultValue?: string; siDefault?: SiDef } { if (!value) { diff --git a/packages/react-components/src/InputNumber.tsx b/packages/react-components/src/InputNumber.tsx index 1d74f78362..7235884f43 100644 --- a/packages/react-components/src/InputNumber.tsx +++ b/packages/react-components/src/InputNumber.tsx @@ -11,7 +11,6 @@ import styled from 'styled-components'; import { useApi } from '@polkadot/react-hooks'; import { BN, BN_ONE, BN_TEN, BN_TWO, BN_ZERO, formatBalance, isBn, isUndefined } from '@polkadot/util'; -import { BitLengthOption } from './constants'; import Dropdown from './Dropdown'; import Input, { KEYS_PRE } from './Input'; import { useTranslation } from './translate'; @@ -48,7 +47,7 @@ interface Props { withMax?: boolean; } -const DEFAULT_BITLENGTH = BitLengthOption.NORMAL_NUMBERS as BitLength; +const DEFAULT_BITLENGTH = 32; export class TokenUnit { public static abbr = 'Unit'; diff --git a/packages/react-components/src/constants.ts b/packages/react-components/src/constants.ts index 9e0e9ec791..6dffe5a9d2 100644 --- a/packages/react-components/src/constants.ts +++ b/packages/react-components/src/constants.ts @@ -1,10 +1,9 @@ // Copyright 2017-2022 @polkadot/react-components authors & contributors // SPDX-License-Identifier: Apache-2.0 -export enum BitLengthOption { - CHAIN_SPEC = 128, - NORMAL_NUMBERS = 32 -} +import type { ComponentMap } from '@polkadot/react-params/types'; + +import BalanceParam from '@polkadot/react-params/Param/Balance'; export const ScreenSizes = { DESKTOP: 992, @@ -17,3 +16,38 @@ export const rewardDestinationOptions = [ { text: 'Stash account (do not increase the amount at stake)', value: 1 }, { text: 'Controller account', value: 2 } ]; + +export const balanceCalls = [ + 'auctions.bid', + 'balances.forceTransfer', 'balances.forceUnreserve', 'balances.setBalance', 'balances.transfer', 'balances.transferKeepAlive', + 'bounties.proposeBounty', 'bounties.proposeCurator', + 'childBounties.proposeCurator', + 'claims.mintClaim', + 'convictionVoting.delegate', + 'crowdloan.contribute', 'crowdloan.create', 'crowdloan.edit', + 'democracy.delegate', 'democracy.propose', + 'identity.requestJudgement', 'identity.setFee', + 'nominationPools.bondExtra', 'nominationPools.join', 'nominationPools.unbond', + 'phragmenElection.vote', + 'society.bid', 'society.vouch', + 'staking.bond', 'staking.bondExtra', 'staking.rebond', 'staking.unbond', + 'tips.tip', 'tips.tipNew', + 'treasury.proposeSpend', 'treasury.spend', + 'vesting.forceVestedTransfer', 'vesting.vestedTransfer' +]; + +// needs expansion with events from above +export const balanceEvents = [ + 'balances.Deposit', 'balances.Endowed', 'balances.Transfer', 'balances.Withdraw', + 'staking.Bonded', 'staking.Rewarded', 'staking.Unbonded', 'staking.Withdrawn', + 'transactionPayment.TransactionFeePaid', + 'treasury.Deposit' +]; + +export const balanceCallsOverrides: ComponentMap = { + 'Compact': BalanceParam +}; + +export const balanceEventsOverrides: ComponentMap = { + u128: BalanceParam +}; diff --git a/packages/react-params/src/Param/Balance.tsx b/packages/react-params/src/Param/Balance.tsx index 695593e583..4a9f528a26 100644 --- a/packages/react-params/src/Param/Balance.tsx +++ b/packages/react-params/src/Param/Balance.tsx @@ -5,7 +5,8 @@ import type { Props } from '../types'; import React, { useCallback, useState } from 'react'; -import { InputBalance } from '@polkadot/react-components'; +// circular dep :( +import InputBalance from '@polkadot/react-components/InputBalance'; import { BN } from '@polkadot/util'; import Bare from './Bare'; diff --git a/packages/react-params/src/index.tsx b/packages/react-params/src/index.tsx index 56dc86f2da..a2a8f31b27 100644 --- a/packages/react-params/src/index.tsx +++ b/packages/react-params/src/index.tsx @@ -88,8 +88,6 @@ class Params extends React.PureComponent { return null; } - overrides && console.log(overrides); - return (