Cleanup InputAddress export, proper props (#1673)

packages/app-123code/src/AccountSelector.tsx

@@ -9,11 +9,11 @@ import { AccountIndex, Balance, Nonce } from '@polkadot/react-query';
 
 interface Props {
   className?: string;
-  onChange: (accountId?: string) => void;
+  onChange: (accountId: string | null) => void;
 }
 
 function AccountSelector ({ className, onChange }: Props): React.ReactElement<Props> {
-  const [accountId, setAccountId] = useState<string | undefined>();
+  const [accountId, setAccountId] = useState<string | null>(null);
 
   useEffect((): void => onChange(accountId), [accountId]);
 

packages/app-123code/src/Transfer.tsx

@@ -9,11 +9,11 @@ import { Button, InputAddress, InputBalance, TxButton, TxComponent } from '@polk
 import Summary from './Summary';
 
 interface Props {
-  accountId?: string;
+  accountId?: string | null;
 }
 interface State {
   amount?: BN;
-  recipientId?: string;
+  recipientId?: string | null;
 }
 
 export default class Transfer extends TxComponent<Props, State> {
@@ -31,7 +31,6 @@ export default class Transfer extends TxComponent<Props, State> {
             <InputAddress
               label='recipient address for this transfer'
               onChange={this.onChangeRecipient}
-              onEnter={this.sendTx}
               type='all'
             />
             <InputBalance
@@ -60,7 +59,7 @@ export default class Transfer extends TxComponent<Props, State> {
     this.setState({ amount });
   }
 
-  private onChangeRecipient = (recipientId?: string): void => {
+  private onChangeRecipient = (recipientId?: string | null): void => {
     this.setState({ recipientId });
   }
 }

packages/app-123code/src/index.tsx

@@ -22,7 +22,7 @@ import translate from './translate';
 interface Props extends AppProps, I18nProps {}
 
 function App ({ className }: Props): React.ReactElement<Props> {
-  const [accountId, setAccountId] = useState<string | undefined>();
+  const [accountId, setAccountId] = useState<string | null>(null);
 
   return (
     // in all apps, the main wrapper is setup to allow the padding

packages/app-accounts/src/modals/Create.tsx

@@ -13,8 +13,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { DEV_PHRASE } from '@polkadot/keyring/defaults';
 import { withApi, withMulti } from '@polkadot/react-api';
-import { AddressRow, Button, Dropdown, Input, Labelled, Modal, Password } from '@polkadot/react-components';
-import { InputAddress } from '@polkadot/react-components/InputAddress';
+import { AddressRow, Button, Dropdown, Input, InputAddress, Labelled, Modal, Password } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 import uiSettings from '@polkadot/ui-settings';
 import { isHex, u8aToHex } from '@polkadot/util';

packages/app-accounts/src/modals/Import.tsx

@@ -8,8 +8,7 @@ import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { ModalProps } from '../types';
 
 import React from 'react';
-import { AddressRow, Button, InputFile, Modal, Password, TxComponent } from '@polkadot/react-components';
-import { InputAddress } from '@polkadot/react-components/InputAddress';
+import { AddressRow, Button, InputAddress, InputFile, Modal, Password, TxComponent } from '@polkadot/react-components';
 import { isHex, isObject, u8aToString } from '@polkadot/util';
 import keyring from '@polkadot/ui-keyring';
 

packages/app-accounts/src/modals/Qr.tsx

@@ -7,8 +7,7 @@ import { ModalProps } from '../types';
 
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { AddressRow, Button, Input, Modal } from '@polkadot/react-components';
-import { InputAddress } from '@polkadot/react-components/InputAddress';
+import { AddressRow, Button, Input, InputAddress, Modal } from '@polkadot/react-components';
 import { QrScanAddress } from '@polkadot/react-qr';
 import keyring from '@polkadot/ui-keyring';
 

packages/app-accounts/src/modals/Transfer.tsx

@@ -166,11 +166,11 @@ class Transfer extends React.PureComponent<Props, State> {
     this.nextState({ amount });
   }
 
-  private onChangeFrom = (senderId: string): void => {
+  private onChangeFrom = (senderId: string | null): void => {
     this.nextState({ senderId });
   }
 
-  private onChangeTo = (recipientId: string): void => {
+  private onChangeTo = (recipientId: string | null): void => {
     this.nextState({ recipientId });
   }
 

packages/app-address-book/src/modals/Create.tsx

@@ -8,8 +8,7 @@ import { ModalProps } from '../types';
 
 import React from 'react';
 
-import { AddressRow, Button, Input, Modal } from '@polkadot/react-components';
-import { InputAddress } from '@polkadot/react-components/InputAddress';
+import { AddressRow, Button, Input, InputAddress, Modal } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
 import translate from '../translate';

packages/app-contracts/src/Contracts/Call.tsx

@@ -256,7 +256,7 @@ class Call extends TxComponent<Props, State> {
     this.setState({ accountId });
   }
 
-  private onChangeAddress = (address: string): void => {
+  private onChangeAddress = (address: string | null): void => {
     const contractAbi = getContractAbi(address);
 
     this.setState({ address, contractAbi, isAddressValid: !!contractAbi });

packages/app-democracy/src/Propose.tsx

@@ -21,7 +21,7 @@ interface Props extends I18nProps, ApiProps, RouteComponentProps {
 }
 
 interface State {
-  accountId?: string;
+  accountId?: string | null;
   method: Call | null;
   value: BN;
   isValid: boolean;
@@ -97,7 +97,7 @@ class Propose extends TxComponent<Props, State> {
     );
   }
 
-  private onChangeAccount = (accountId: string): void => {
+  private onChangeAccount = (accountId: string | null): void => {
     this.nextState({ accountId });
   }
 

packages/app-extrinsics/src/Selection.tsx

@@ -26,7 +26,7 @@ interface State {
   isValidUnsigned: boolean;
   method: Call | null;
   accountNonce?: BN;
-  accountId?: string;
+  accountId?: string | null;
 }
 
 class Selection extends TxComponent<Props, State> {
@@ -126,7 +126,7 @@ class Selection extends TxComponent<Props, State> {
     this.nextState({ accountNonce });
   }
 
-  private onChangeSender = (accountId: string): void => {
+  private onChangeSender = (accountId: string | null): void => {
     this.nextState({ accountId, accountNonce: new BN(0) });
   }
 

packages/app-generic-asset/src/Transfer.tsx

@@ -152,11 +152,11 @@ class Transfer extends React.PureComponent<Props> {
     this.nextState({ amount });
   }
 
-  private onChangeFrom = (senderId: string): void => {
+  private onChangeFrom = (senderId: string | null): void => {
     this.nextState({ senderId });
   }
 
-  private onChangeTo = (recipientId: string): void => {
+  private onChangeTo = (recipientId: string | null): void => {
     this.nextState({ recipientId });
   }
 

packages/app-staking/src/Actions/Account/SetControllerAccount.tsx

@@ -110,7 +110,7 @@ class SetControllerAccount extends TxComponent<Props, State> {
     );
   }
 
-  private onChangeController = (controllerId: string): void => {
+  private onChangeController = (controllerId: string | null): void => {
     this.setState({ controllerId });
   }
 

packages/app-staking/src/Actions/Accounts.tsx

@@ -11,7 +11,7 @@ import { withCalls, withMulti } from '@polkadot/react-api/with';
 
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { Button, CardGrid, InputAddress } from '@polkadot/react-components';
+import { Button, CardGrid } from '@polkadot/react-components';
 import createOption from '@polkadot/ui-keyring/options/item';
 import { getAddressName } from '@polkadot/react-components/util';
 
@@ -43,8 +43,7 @@ function Accounts ({ allAccounts, allStashes, className, myControllers, recently
   const [isNewStakeOpen, setIsNewStateOpen] = useState(false);
   const myStashes = getMyStashes(myControllers, allAccounts);
   const stashOptions = allStashes.map((stashId): KeyringSectionOption =>
-    // FIXME The static setting here just does screwy
-    (InputAddress as any).createOption(createOption(stashId, getAddressName(stashId, 'account')))
+    createOption(stashId, getAddressName(stashId, 'account'))
   );
   const isEmpty = !isNewStakeOpen && (!myStashes || myStashes.length === 0);
 

packages/app-staking/src/Actions/NewStake.tsx

@@ -153,7 +153,7 @@ class NewStake extends TxComponent<Props, State> {
     });
   }
 
-  private onChangeController = (controllerId: string): void => {
+  private onChangeController = (controllerId: string | null): void => {
     this.nextState({ controllerId });
   }
 
@@ -161,7 +161,7 @@ class NewStake extends TxComponent<Props, State> {
     this.nextState({ destination });
   }
 
-  private onChangeStash = (stashId: string): void => {
+  private onChangeStash = (stashId: string | null): void => {
     this.nextState({ stashId });
   }
 

packages/app-sudo/src/SetKey.tsx

@@ -14,7 +14,7 @@ import translate from './translate';
 interface Props extends I18nProps, ComponentProps {}
 
 function SetKey ({ allAccounts, className, isMine, sudoKey, t }: Props): React.ReactElement<Props> {
-  const [selected, setSelected] = useState<string | undefined>();
+  const [selected, setSelected] = useState<string | null>(null);
 
   useEffect((): void => {
     if (sudoKey && !selected) {

packages/app-toolbox/src/Rpc/Account.tsx

@@ -22,7 +22,7 @@ function Account ({ className, defaultValue, isError, onChange, t }: Props): Rea
   const [accountId, setAccountId] = useState<string | null | undefined>(defaultValue);
   const [accountNonce, setAccountNonce] = useState(new BN(0));
 
-  const _onChangeAccountId = (accountId: string): void => {
+  const _onChangeAccountId = (accountId: string | null): void => {
     setAccountId(accountId);
     onChange(accountId, accountNonce);
   };

packages/app-toolbox/src/Sign.tsx

@@ -213,8 +213,8 @@ class Sign extends React.PureComponent<Props, State> {
     });
   }
 
-  private onChangeAccount = (accountId: string): void => {
-    const currentPair = keyring.getPair(accountId);
+  private onChangeAccount = (accountId: string | null): void => {
+    const currentPair = keyring.getPair(accountId || '');
 
     this.nextState({ currentPair });
   }

packages/app-toolbox/src/Verify.tsx

@@ -209,11 +209,11 @@ class Verify extends React.PureComponent<Props, State> {
     this.nextState({ signature, isValidSignature });
   }
 
-  private onChangeAddress = (accountId: string): void => {
+  private onChangeAddress = (accountId: string | null): void => {
     let currentPublicKey;
 
     try {
-      currentPublicKey = keyring.decodeAddress(accountId);
+      currentPublicKey = keyring.decodeAddress(accountId || '');
     } catch (err) {
       console.error(err);
     }

packages/app-treasury/src/Overview/Propose.tsx

@@ -11,7 +11,7 @@ import TxModal, { TxModalState, TxModalProps as Props } from '@polkadot/react-co
 import translate from '../translate';
 
 interface State extends TxModalState {
-  beneficiary?: string;
+  beneficiary?: string | null;
   value: BN;
 }
 
@@ -25,12 +25,10 @@ class Propose extends TxModal<Props, State> {
 
   protected txMethod = (): string => 'treasury.proposeSpend';
 
-  protected txParams = (): (string | BN | undefined)[] => {
+  protected txParams = (): [BN, string | null | undefined] => {
     const { beneficiary, value } = this.state;
 
-    return [
-      value, beneficiary
-    ];
+    return [value, beneficiary];
   }
 
   protected isDisabled = (): boolean => {
@@ -96,7 +94,7 @@ class Propose extends TxModal<Props, State> {
     );
   }
 
-  private onChangeBeneficiary = (beneficiary: string): void => {
+  private onChangeBeneficiary = (beneficiary: string | null): void => {
     this.nextState({ beneficiary });
   }
 

packages/app-treasury/src/Overview/Summary.tsx

@@ -20,7 +20,7 @@ interface Props extends I18nProps {
 }
 
 function Summary ({ treasury_proposalCount, treasury_approvals, treasury_pot, t }: Props): React.ReactElement<Props> {
-  const value = treasury_pot
+  const value = treasury_pot && treasury_pot.gtn(0)
     ? treasury_pot.toString()
     : null;
 
@@ -35,13 +35,11 @@ function Summary ({ treasury_proposalCount, treasury_approvals, treasury_pot, t
         </CardSummary>
       </section>
       <section>
-        <CardSummary label={t('pot')}>
-          {
-            value
-              ? `${formatBalance(value, false)}${treasury_pot && treasury_pot.gtn(0) ? formatBalance.calcSi(value).value : ''}`
-              : '-'
-          }
-        </CardSummary>
+        {value && (
+          <CardSummary label={t('pot')}>
+            {formatBalance(value, false)}{formatBalance.calcSi(value).value}
+          </CardSummary>
+        )}
       </section>
     </SummaryBox>
   );

packages/app-treasury/src/Settings.tsx

@@ -25,7 +25,7 @@ interface Props extends I18nProps, ApiProps, RouteComponentProps {
 }
 
 interface State {
-  accountId?: string;
+  accountId?: string | null;
   proposalBond?: BN;
   proposalBondMinimum?: BN;
   spendPeriod?: BN;
@@ -174,7 +174,7 @@ class Settings extends TxComponent<Props, State> {
     );
   }
 
-  private onChangeAccount = (accountId: string): void => {
+  private onChangeAccount = (accountId: string | null): void => {
     this.nextState({ accountId });
   }
 

packages/react-api/src/with/multi.ts

@@ -11,7 +11,7 @@ export default function withMulti<T> (Component: React.ComponentType<T>, ...hocs
   // after something can use the value of the preceding version
   return hocs
     .reverse()
-    .reduce((Component, hoc): React.ComponentType<any> => {
-      return hoc(Component);
-    }, Component);
+    .reduce((Component, hoc): React.ComponentType<any> =>
+      hoc(Component), Component
+    );
 }

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

@@ -21,26 +21,31 @@ import createHeader from './createHeader';
 import createItem from './createItem';
 
 interface Props extends BareProps {
-  defaultValue?: string | null;
+  defaultValue?: Uint8Array | string | null;
   help?: React.ReactNode;
   hideAddress?: boolean;
   isDisabled?: boolean;
   isError?: boolean;
   isInput?: boolean;
   isMultiple?: boolean;
-  label?: string;
+  label?: React.ReactNode;
   labelExtra?: React.ReactNode;
   onChange?: (value: string | null) => void;
   onChangeMulti?: (value: string[]) => void;
-  options?: Option[];
+  options?: KeyringSectionOption[];
   optionsAll?: Record<string, Option[]>;
   placeholder?: string;
   type?: KeyringOption$Type;
-  value?: string | Uint8Array | string[];
+  value?: string | Uint8Array | string[] | null;
   withEllipsis?: boolean;
   withLabel?: boolean;
 }
 
+type ExportedType = React.ComponentType<Props> & {
+  createOption: (option: KeyringSectionOption, isUppercase?: boolean) => Option;
+  setLastValue: (type: KeyringOption$Type, value: string) => void;
+};
+
 interface State {
   value?: string;
 }
@@ -70,7 +75,7 @@ function transformToAccountId (value: string): string | null {
     : accountId;
 }
 
-function createOption (address: string): KeyringSectionOption {
+function createOption (address: string): Option {
   let isRecent: boolean | undefined;
   const pair = keyring.getAccount(address);
   let name: string | undefined;
@@ -91,6 +96,23 @@ function createOption (address: string): KeyringSectionOption {
   return createItem(createKeyringItem(address, name), !isRecent);
 }
 
+function readOptions (): Record<string, any> {
+  return store.get(STORAGE_KEY) || { defaults: {} };
+}
+
+function getLastValue (type: KeyringOption$Type = DEFAULT_TYPE): any {
+  const options = readOptions();
+
+  return options.defaults[type];
+}
+
+function setLastValue (type: KeyringOption$Type = DEFAULT_TYPE, value: string): void {
+  const options = readOptions();
+
+  options.defaults[type] = value;
+  store.set(STORAGE_KEY, options);
+}
+
 class InputAddress extends React.PureComponent<Props, State> {
   public state: State = {};
 
@@ -107,23 +129,6 @@ class InputAddress extends React.PureComponent<Props, State> {
     }
   }
 
-  public static readOptions (): Record<string, any> {
-    return store.get(STORAGE_KEY) || { defaults: {} };
-  }
-
-  public static getLastValue (type: KeyringOption$Type = DEFAULT_TYPE): any {
-    const options = InputAddress.readOptions();
-
-    return options.defaults[type];
-  }
-
-  public static setLastValue (type: KeyringOption$Type = DEFAULT_TYPE, value: string): void {
-    const options = InputAddress.readOptions();
-
-    options.defaults[type] = value;
-    store.set(STORAGE_KEY, options);
-  }
-
   public render (): React.ReactNode {
     const { className, defaultValue, help, hideAddress = false, isDisabled = false, isError, isMultiple, label, labelExtra, options, optionsAll, placeholder, type = DEFAULT_TYPE, style, withEllipsis, withLabel } = this.props;
     const { value } = this.state;
@@ -133,7 +138,7 @@ class InputAddress extends React.PureComponent<Props, State> {
       return null;
     }
 
-    const lastValue = InputAddress.getLastValue(type);
+    const lastValue = getLastValue(type);
     const lastOption = this.getLastOptionValue();
     const actualValue = transformToAddress(
       isDisabled || (defaultValue && this.hasValue(defaultValue))
@@ -144,13 +149,15 @@ class InputAddress extends React.PureComponent<Props, State> {
             : (lastOption && lastOption.value)
         )
     );
-    const actualOptions = options || (
-      isDisabled && actualValue
-        ? [createOption(actualValue)]
-        : optionsAll
-          ? optionsAll[type]
-          : []
-    );
+    const actualOptions: Option[] = options
+      ? options.map((o): Option => createItem(o))
+      : (
+        isDisabled && actualValue
+          ? [createOption(actualValue)]
+          : optionsAll
+            ? optionsAll[type]
+            : []
+      );
     const _defaultValue = (isMultiple || value !== undefined)
       ? undefined
       : actualValue;
@@ -212,7 +219,7 @@ class InputAddress extends React.PureComponent<Props, State> {
       : undefined;
   }
 
-  private hasValue (test?: string): boolean {
+  private hasValue (test?: Uint8Array | string): boolean {
     const { optionsAll, type = DEFAULT_TYPE } = this.props;
 
     if (!optionsAll) {
@@ -225,7 +232,7 @@ class InputAddress extends React.PureComponent<Props, State> {
   private onChange = (address: string): void => {
     const { onChange, type } = this.props;
 
-    InputAddress.setLastValue(type, address);
+    setLastValue(type, address);
 
     onChange && onChange(transformToAccountId(address));
   }
@@ -279,9 +286,10 @@ class InputAddress extends React.PureComponent<Props, State> {
   }
 }
 
-export { InputAddress };
+(InputAddress as unknown as ExportedType).createOption = createItem;
+(InputAddress as unknown as ExportedType).setLastValue = setLastValue;
 
-const InputAddressExported = withMulti(
+export default withMulti(
   styled(InputAddress)`
     .ui.dropdown .text {
       width: 100%;
@@ -320,8 +328,4 @@ const InputAddressExported = withMulti(
         return result;
       }, {})
   })
-);
-
-(InputAddressExported as any).createOption = createItem;
-
-export default InputAddressExported;
+) as ExportedType;

packages/react-components/src/util/getContractAbi.ts

@@ -6,7 +6,11 @@ import { Abi } from '@polkadot/api-contract';
 
 import getAddressMeta from './getAddressMeta';
 
-export default function getContractAbi (address: string): Abi | null {
+export default function getContractAbi (address: string | null): Abi | null {
+  if (!address) {
+    return null;
+  }
+
   let abi: Abi | undefined;
   const meta = getAddressMeta(address, 'contract');
 

packages/react-components/src/util/toAddress.ts

@@ -5,7 +5,7 @@
 import keyring from '@polkadot/ui-keyring';
 import { hexToU8a, isHex } from '@polkadot/util';
 
-export default function toAddress (value?: string | Uint8Array): string | undefined {
+export default function toAddress (value?: string | Uint8Array | null): string | undefined {
   if (!value) {
     return;
   }

packages/react-params/src/Param/Account.tsx

@@ -10,8 +10,8 @@ import keyring from '@polkadot/ui-keyring';
 
 import Bare from './Bare';
 
-function onChange ({ onChange }: Props): (_?: string) => void {
-  return function (value?: string): void {
+function onChange ({ onChange }: Props): (_?: string | null) => void {
+  return (value?: string | null): void => {
     let isValid = false;
 
     if (value) {

packages/react-query/src/AccountIndex.tsx

@@ -12,12 +12,12 @@ import { withCalls } from '@polkadot/react-api';
 interface Props extends BareProps, CallProps {
   children?: React.ReactNode;
   label?: React.ReactNode;
-  params?: string;
+  params?: string | null;
   accounts_idAndIndex?: [AccountId?, AccountIndex?];
 }
 
-export function AccountIndexDisplay ({ children, className, label = '', style, accounts_idAndIndex = [] }: Props): React.ReactElement<Props> {
-  const [, accountIndex] = accounts_idAndIndex;
+export function AccountIndexDisplay ({ children, className, label = '', style, accounts_idAndIndex }: Props): React.ReactElement<Props> {
+  const [, accountIndex] = accounts_idAndIndex || [];
 
   return (
     <div

packages/react-query/src/Nonce.tsx

@@ -15,7 +15,7 @@ interface Props extends BareProps, CallProps {
   callOnResult?: (accountNonce: BN) => void;
   children?: React.ReactNode;
   label?: React.ReactNode;
-  params?: string;
+  params?: string | null;
 }
 
 export function Nonce ({ accountNonce, children, className, label = '' }: Props): React.ReactElement<Props> {