Apply Balance component overrides to inputs (#8583)

* Apply Balance component overrides to inputs

* Additional

* Adjust

* Adjust

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<u128>': 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(),

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<u128>': BalanceParam,
-  u128: BalanceParam
-};
-
 function EventDisplay ({ children, className = '', eventName, value }: Props): React.ReactElement<Props> {
   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]
   );

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<ComponentMap>({}, 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}
       />

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) {

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';

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<u128>': BalanceParam
+};
+
+export const balanceEventsOverrides: ComponentMap = {
+  u128: BalanceParam
+};

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';

packages/react-params/src/index.tsx

@@ -88,8 +88,6 @@ class Params extends React.PureComponent<Props, State> {
       return null;
     }
 
-    overrides && console.log(overrides);
-
     return (
       <Holder
         className={className}