useContext instead of withApi (#1579)

* useContext instead of withApi

* types to interface, fixes

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

@@ -4,7 +4,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { AccountId, RuntimeVersion } from '@polkadot/types/interfaces';
-import { ApiProps } from '@polkadot/react-api/types';
 import { BareProps, I18nProps } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
@@ -15,7 +14,7 @@ import { formatBalance, formatNumber } from '@polkadot/util';
 
 import translate from './translate';
 
-interface Props extends ApiProps, BareProps, I18nProps {
+interface Props extends BareProps, I18nProps {
   balances_totalIssuance?: BN;
   chain_bestNumber?: BN;
   chain_bestNumberLag?: BN;

packages/app-accounts/src/Vanity/index.tsx

@@ -19,7 +19,7 @@ import generatorSort from '../vanitygen/sort';
 import Match from './Match';
 import translate from './translate';
 
-type Props = ComponentProps & I18nProps;
+interface Props extends ComponentProps, I18nProps {}
 
 interface State {
   createSeed: string | null;

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

@@ -22,10 +22,10 @@ import { keyExtractSuri, mnemonicGenerate, mnemonicValidate, randomAsU8a } from
 
 import translate from '../translate';
 
-type Props = ModalProps & ApiProps & I18nProps & {
+interface Props extends ModalProps, ApiProps, I18nProps {
   seed?: string;
   type?: KeypairType;
-};
+}
 
 type SeedType = 'bip' | 'raw' | 'dev';
 

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

@@ -15,7 +15,7 @@ import keyring from '@polkadot/ui-keyring';
 
 import translate from '../translate';
 
-type Props = ModalProps & I18nProps;
+interface Props extends ModalProps, I18nProps {}
 
 interface State {
   address: string | null;

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

@@ -21,14 +21,14 @@ import { bnMax } from '@polkadot/util';
 
 import translate from '../translate';
 
-type Props = ApiProps & I18nProps & {
+interface Props extends ApiProps, I18nProps {
   balances_fees?: DerivedFees;
   className?: string;
   onClose: () => void;
   recipientId?: string;
   senderId?: string;
   system_accountNonce?: BN;
-};
+}
 
 interface State {
   amount: BN;

packages/app-address-book/src/Overview.tsx

@@ -15,9 +15,9 @@ import CreateModal from './modals/Create';
 import Address from './Address';
 import translate from './translate';
 
-type Props = ComponentProps & I18nProps & {
+interface Props extends ComponentProps, I18nProps {
   addresses?: SubjectInfo[];
-};
+}
 
 interface State {
   isCreateOpen: boolean;

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

@@ -14,7 +14,7 @@ import keyring from '@polkadot/ui-keyring';
 
 import translate from '../translate';
 
-type Props = ModalProps & I18nProps;
+interface Props extends ModalProps, I18nProps {}
 
 interface State {
   address: string;

packages/app-contracts/src/Codes/Add.tsx

@@ -6,13 +6,11 @@ import React from 'react';
 import { createType } from '@polkadot/types';
 import { Button, Input } from '@polkadot/react-components';
 
-import ContractModal, { ContractModalProps, ContractModalState } from '../Modal';
+import ContractModal, { ContractModalProps as Props, ContractModalState } from '../Modal';
 import ValidateCode from './ValidateCode';
 import store from '../store';
 import translate from '../translate';
 
-type Props = ContractModalProps;
-
 interface State extends ContractModalState {
   codeHash: string;
   isBusy: boolean;

packages/app-contracts/src/Codes/Upload.tsx

@@ -16,7 +16,7 @@ import ContractModal, { ContractModalProps, ContractModalState } from '../Modal'
 import store from '../store';
 import translate from '../translate';
 
-type Props = ContractModalProps & ApiProps;
+interface Props extends ContractModalProps, ApiProps {}
 
 interface State extends ContractModalState {
   gasLimit: BN;

packages/app-contracts/src/Codes/ValidateCode.tsx

@@ -15,11 +15,11 @@ import { isHex } from '@polkadot/util';
 
 import translate from '../translate';
 
-type Props = ApiProps & I18nProps & {
+interface Props extends ApiProps, I18nProps {
   codeHash?: string | null;
   contracts_codeStorage?: Option<PrefabWasmModule>;
   onChange: (isValid: boolean) => void;
-};
+}
 
 interface State {
   isStored: boolean;

packages/app-contracts/src/Codes/index.tsx

@@ -15,7 +15,7 @@ import Code from './Code';
 import Upload from './Upload';
 import Add from './Add';
 
-type Props = ComponentProps & I18nProps;
+interface Props extends ComponentProps, I18nProps {}
 
 interface State {
   isAddOpen: boolean;

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

@@ -16,7 +16,7 @@ import ValidateAddr from './ValidateAddr';
 
 import translate from '../translate';
 
-type Props = ContractModalProps & ApiProps & I18nProps;
+interface Props extends ContractModalProps, ApiProps, I18nProps {}
 
 interface State extends ContractModalState {
   address?: string | null;

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

@@ -15,11 +15,11 @@ import keyring from '@polkadot/ui-keyring';
 
 import translate from '../translate';
 
-type Props = ApiProps & I18nProps & {
+interface Props extends ApiProps, I18nProps {
   address?: string | null;
   contracts_contractInfoOf?: Option<ContractInfo>;
   onChange: (isValid: boolean) => void;
-};
+}
 
 interface State {
   isStored: boolean;

packages/app-democracy/src/index.tsx

@@ -15,7 +15,7 @@ import Overview from './Overview';
 import Propose from './Propose';
 import translate from './translate';
 
-type Props = AppProps & BareProps & I18nProps;
+interface Props extends AppProps, BareProps, I18nProps {}
 
 interface State {
   tabs: TabItem[];

packages/app-explorer/src/BlockInfo/ByHash.tsx

@@ -5,7 +5,6 @@
 
 import { EventRecord, SignedBlock } from '@polkadot/types/interfaces';
 import { I18nProps } from '@polkadot/react-components/types';
-import { ApiProps } from '@polkadot/react-api/types';
 
 import React from 'react';
 import { HeaderExtended } from '@polkadot/api-derive';
@@ -18,12 +17,12 @@ import Events from './Events';
 import Extrinsics from './Extrinsics';
 import Logs from './Logs';
 
-type Props = ApiProps & I18nProps & {
+interface Props extends I18nProps {
   system_events?: EventRecord[];
   chain_getBlock?: SignedBlock;
   chain_getHeader?: HeaderExtended;
   value: string;
-};
+}
 
 function BlockByHash ({ system_events, chain_getBlock, chain_getHeader }: Props): React.ReactElement<Props> | null {
   if (!chain_getBlock || chain_getBlock.isEmpty || !chain_getHeader || chain_getHeader.isEmpty) {

packages/app-explorer/src/BlockInfo/ByNumber.tsx

@@ -4,14 +4,13 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Hash } from '@polkadot/types/interfaces';
-import { ApiProps } from '@polkadot/react-api/types';
 
 import React from 'react';
 import { withCalls } from '@polkadot/react-api';
 
 import BlockByHash from './ByHash';
 
-interface Props extends ApiProps {
+interface Props {
   chain_getBlockHash?: Hash;
   value: string;
 }

packages/app-explorer/src/NodeInfo/index.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
+import { I18nProps as Props } from '@polkadot/react-components/types';
 import { Info } from './types';
 
 import React, { useContext, useEffect, useState } from 'react';
@@ -18,8 +18,6 @@ import translate from './translate';
 
 const POLL_TIMEOUT = 9900;
 
-type Props = I18nProps;
-
 async function retrieveInfo (api: ApiPromise): Promise<Partial<Info>> {
   try {
     const [blockNumber, health, peers, extrinsics] = await Promise.all([

packages/app-explorer/src/Summary.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
+import { I18nProps as Props } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { SummaryBox, CardSummary } from '@polkadot/react-components';
@@ -11,8 +11,6 @@ import { BestFinalized, BestNumber, TimeNow, TimePeriod, TotalIssuance } from '@
 import SummarySession from './SummarySession';
 import translate from './translate';
 
-type Props = I18nProps;
-
 function Summary ({ t }: Props): React.ReactElement<Props> {
   return (
     <SummaryBox>

packages/app-explorer/src/index.tsx

@@ -3,7 +3,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { ApiProps } from '@polkadot/react-api/types';
 import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
 import { EventRecord } from '@polkadot/types/interfaces';
 import { KeyedEvent } from './types';
@@ -26,7 +25,7 @@ import Main from './Main';
 import NodeInfo from './NodeInfo';
 import translate from './translate';
 
-interface Props extends ApiProps, AppProps, BareProps, I18nProps {
+interface Props extends AppProps, BareProps, I18nProps {
   system_events?: EventRecord[];
 }
 

packages/app-extrinsics/src/Selection.tsx

@@ -17,9 +17,9 @@ import { Nonce } from '@polkadot/react-query';
 import Balance from './Balance';
 import translate from './translate';
 
-type Props = ApiProps & I18nProps & {
+interface Props extends ApiProps, I18nProps {
   queueExtrinsic: QueueTxExtrinsicAdd;
-};
+}
 
 interface State {
   isValid: boolean;

packages/app-extrinsics/src/index.tsx

@@ -10,7 +10,7 @@ import { Tabs } from '@polkadot/react-components';
 import Selection from './Selection';
 import translate from './translate';
 
-type Props = AppProps & I18nProps;
+interface Props extends AppProps, I18nProps {}
 
 function ExtrinsicsApp ({ basePath, t }: Props): React.ReactElement<Props> {
   return (

packages/app-js/src/ActionButtons.tsx

@@ -10,7 +10,7 @@ import { Button, Input } from '@polkadot/react-components';
 
 import translate from './translate';
 
-type Props = BareProps & I18nProps & {
+interface Props extends BareProps, I18nProps {
   isCustomExample: boolean;
   isRunning: boolean;
   generateLink: () => void;
@@ -19,7 +19,7 @@ type Props = BareProps & I18nProps & {
   saveSnippet: (snippetName: string) => void;
   snippetName?: string;
   stopJs: () => void;
-};
+}
 
 interface State {
   isOpen: boolean;

packages/app-js/src/index.tsx

@@ -10,7 +10,7 @@ import { Route, Switch } from 'react-router';
 import './index.css';
 import Playground from './Playground';
 
-type Props = AppProps & BareProps;
+interface Props extends AppProps, BareProps {}
 
 export default function AppJs ({ basePath }: Props): React.ReactElement<Props> {
   return (

packages/app-parachains/src/index.tsx

@@ -12,7 +12,7 @@ import { Tabs } from '@polkadot/react-components';
 import Overview from './Overview';
 import translate from './translate';
 
-type Props = AppProps & BareProps & I18nProps;
+interface Props extends AppProps, BareProps, I18nProps {}
 
 interface State {
   tabs: TabItem[];

packages/app-settings/src/index.tsx

@@ -15,7 +15,7 @@ import translate from './translate';
 import Developer from './Developer';
 import General from './General';
 
-type Props = AppProps & I18nProps;
+interface Props extends AppProps, I18nProps {}
 
 interface State {
   tabs: TabItem[];

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

@@ -18,12 +18,12 @@ import { bnMax } from '@polkadot/util';
 
 import translate from '../../translate';
 
-type Props = I18nProps & ApiProps & CalculateBalanceProps & {
+interface Props extends I18nProps, ApiProps, CalculateBalanceProps {
   controllerId: string;
   isOpen: boolean;
   onClose: () => void;
   stashId: string;
-};
+}
 
 interface State {
   extrinsic: SubmittableExtrinsic | null;

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

@@ -12,13 +12,13 @@ import { withApi, withMulti } from '@polkadot/react-api';
 import ValidationSessionKey from './InputValidationSessionKey';
 import translate from '../../translate';
 
-type Props = I18nProps & ApiProps & {
+interface Props extends I18nProps, ApiProps {
   controllerId: string;
   isOpen: boolean;
   onClose: () => void;
   sessionIds: string[];
   stashId: string;
-};
+}
 
 interface State {
   // TODO remove once we drop v1 support

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

@@ -16,13 +16,13 @@ import { withCalls, withApi, withMulti } from '@polkadot/react-api';
 
 import translate from '../../translate';
 
-type Props = I18nProps & ApiProps & {
+interface Props extends I18nProps, ApiProps {
   controllerId?: AccountId | null;
   isOpen: boolean;
   onClose: () => void;
   stashId: string;
   staking_ledger?: Option<StakingLedger>;
-};
+}
 
 interface State {
   maxBalance?: BN;

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

@@ -27,7 +27,7 @@ import { u8aToHex, u8aConcat } from '@polkadot/util';
 
 import { updateOnlineStatus } from '../../util';
 
-type Props = ApiProps & I18nProps & {
+interface Props extends ApiProps, I18nProps {
   accountId: string;
   allStashes?: string[];
   balances_all?: DerivedBalances;
@@ -35,7 +35,7 @@ type Props = ApiProps & I18nProps & {
   recentlyOnline: Record<string, BlockNumber>;
   staking_info?: DerivedStaking;
   stashOptions: KeyringSectionOption[];
-};
+}
 
 interface State {
   controllerId: string | null;

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

@@ -18,9 +18,9 @@ import Account from './Account';
 import StartStaking from './NewStake';
 import translate from '../translate';
 
-type Props = I18nProps & ComponentProps & ApiProps & {
+interface Props extends I18nProps, ComponentProps, ApiProps {
   myControllers?: string[];
-};
+}
 
 interface State {
   isNewStakeOpen: boolean;

packages/app-staking/src/Overview/index.tsx

@@ -6,23 +6,23 @@
 import { BareProps } from '@polkadot/react-components/types';
 import { ComponentProps } from '../types';
 
-import React from 'react';
+import React, { useContext } from 'react';
 import { HeaderExtended } from '@polkadot/api-derive';
+import { ApiContext } from '@polkadot/react-api';
 import { withCalls, withMulti } from '@polkadot/react-api/with';
 import { formatNumber } from '@polkadot/util';
 
 import CurrentList from './CurrentList';
 import Summary from './Summary';
-import { withApi } from '@polkadot/react-api';
-import { ApiProps } from '@polkadot/react-api/types';
 
-interface Props extends ApiProps, BareProps, ComponentProps {
+interface Props extends BareProps, ComponentProps {
   chain_subscribeNewHeads?: HeaderExtended;
 }
 
 // TODO: Switch to useState
 function Overview (props: Props): React.ReactElement<Props> {
-  const { chain_subscribeNewHeads, allControllers, allStashes, currentValidatorsControllersV1OrStashesV2, isSubstrateV2, recentlyOnline } = props;
+  const { isSubstrateV2 } = useContext(ApiContext);
+  const { chain_subscribeNewHeads, allControllers, allStashes, currentValidatorsControllersV1OrStashesV2, recentlyOnline } = props;
   let nextSorted: string[];
 
   if (isSubstrateV2) {
@@ -67,7 +67,6 @@ function Overview (props: Props): React.ReactElement<Props> {
 
 export default withMulti(
   Overview,
-  withApi,
   withCalls<Props>(
     'derive.chain.subscribeNewHeads'
   )

packages/app-staking/src/index.tsx

@@ -25,13 +25,13 @@ import basicMd from './md/basic.md';
 import Overview from './Overview';
 import translate from './translate';
 
-type Props = AppProps & ApiProps & I18nProps & {
+interface Props extends AppProps, ApiProps, I18nProps {
   allAccounts?: SubjectInfo;
   allStashesAndControllers?: [AccountId[], Option<AccountId>[]];
   chain_bestNumber?: BlockNumber;
   currentValidatorsControllersV1OrStashesV2?: AccountId[];
   recentlyOnline?: AuthorityId[];
-};
+}
 
 interface State {
   allControllers: string[];

packages/app-storage/src/Selection/Consts.tsx

@@ -14,7 +14,7 @@ import { withApi, withMulti } from '@polkadot/react-api';
 
 import translate from '../translate';
 
-type Props = ComponentProps & ApiProps & I18nProps;
+interface Props extends ComponentProps, ApiProps, I18nProps {}
 
 interface State {
   value: ConstValue;

packages/app-storage/src/Selection/Modules.tsx

@@ -18,7 +18,7 @@ import { isUndefined } from '@polkadot/util';
 
 import translate from '../translate';
 
-type Props = ComponentProps & ApiProps & I18nProps;
+interface Props extends ComponentProps, ApiProps, I18nProps {}
 
 interface State {
   isValid: boolean;

packages/app-storage/src/Selection/Raw.tsx

@@ -12,7 +12,7 @@ import translate from '../translate';
 import { u8aToU8a } from '@polkadot/util';
 import { Compact } from '@polkadot/types';
 
-type Props = ComponentProps & I18nProps;
+interface Props extends ComponentProps, I18nProps {}
 
 interface State {
   isValid: boolean;

packages/app-storage/src/Selection/index.tsx

@@ -17,10 +17,10 @@ import Modules from './Modules';
 import Raw from './Raw';
 import translate from '../translate';
 
-type Props = ApiProps & I18nProps & {
+interface Props extends ApiProps, I18nProps {
   basePath: string;
   onAdd: (query: QueryTypes) => void;
-};
+}
 
 interface State {
   items: TabItem[];

packages/app-storage/src/index.tsx

@@ -13,7 +13,7 @@ import Queries from './Queries';
 import Selection from './Selection';
 import translate from './translate';
 
-type Props = AppProps & I18nProps;
+interface Props extends AppProps, I18nProps {}
 
 interface State {
   queue: QueryTypes[];

packages/app-sudo/src/SetKey.tsx

@@ -11,7 +11,7 @@ import styled from 'styled-components';
 
 import translate from './translate';
 
-type Props = I18nProps & ComponentProps;
+interface Props extends I18nProps, ComponentProps {}
 
 interface State {
   selected?: string;

packages/app-sudo/src/Sudo.tsx

@@ -14,9 +14,9 @@ import { withApi, withMulti } from '@polkadot/react-api';
 
 import translate from './translate';
 
-type Props = I18nProps & ApiProps & ComponentProps & {
+interface Props extends I18nProps, ApiProps, ComponentProps {
   onChange: (accountId?: string) => void;
-};
+}
 
 interface State {
   method: Call | null;

packages/app-sudo/src/index.tsx

@@ -19,10 +19,10 @@ import Sudo from './Sudo';
 
 import translate from './translate';
 
-type Props = AppProps & ApiProps & I18nProps & {
+interface Props extends AppProps, ApiProps, I18nProps {
   allAccounts: SubjectInfo;
   sudo_key?: string;
-};
+}
 
 interface State {
   isMine: boolean;

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

@@ -13,12 +13,12 @@ import TxModal, { TxModalProps, TxModalState } from '@polkadot/react-components/
 
 import translate from '../translate';
 
-type Props = I18nProps & ApiProps & TxModalProps & {
+interface Props extends I18nProps, ApiProps, TxModalProps {
   isApproved?: boolean;
   proposalInfo?: React.ReactNode;
   proposalId: string;
   threshold: number;
-};
+}
 
 interface State extends TxModalState {
   isApproving: boolean;

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

@@ -6,12 +6,10 @@ import BN from 'bn.js';
 import React from 'react';
 
 import { Button, InputAddress, InputBalance } from '@polkadot/react-components';
-import TxModal, { TxModalState, TxModalProps } from '@polkadot/react-components/TxModal';
+import TxModal, { TxModalState, TxModalProps as Props } from '@polkadot/react-components/TxModal';
 
 import translate from '../translate';
 
-type Props = TxModalProps;
-
 interface State extends TxModalState {
   beneficiary?: string;
   value: BN;

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

@@ -11,7 +11,7 @@ import Summary from './Summary';
 import Proposals, { Approvals } from './Proposals';
 import Propose from './Propose';
 
-type Props = AppProps & BareProps & I18nProps;
+interface Props extends AppProps, BareProps, I18nProps {}
 
 interface State {
   isProposeOpen: boolean;

packages/app-treasury/src/Settings.tsx

@@ -15,14 +15,14 @@ import { withCalls, withMulti } from '@polkadot/react-api';
 
 import translate from './translate';
 
-type Props = I18nProps & ApiProps & RouteComponentProps & {
+interface Props extends I18nProps, ApiProps, RouteComponentProps {
   basePath: string;
   proposalBond: Permill;
   proposalBondMinimum: BalanceOf;
   spendPeriod: BlockNumber;
   burn: Permill;
   pot: BalanceOf;
-};
+}
 
 interface State {
   accountId?: string;

packages/app-treasury/src/index.tsx

@@ -15,7 +15,7 @@ import Overview from './Overview';
 
 import translate from './translate';
 
-type Props = AppProps & BareProps & I18nProps;
+interface Props extends AppProps, BareProps, I18nProps {}
 
 interface State {
   tabs: TabItem[];

packages/apps/src/Apps.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BareProps } from '@polkadot/react-components/types';
+import { BareProps as Props } from '@polkadot/react-components/types';
 
 // this is disabled, Chrome + WASM memory leak makes it slow & laggy. If enabled
 // we also need to export the default as hot(Apps) (last line)
@@ -21,8 +21,6 @@ import { SideBarTransition, SIDEBAR_TRANSITION_DURATION, SIDEBAR_MENU_THRESHOLD
 import Content from './Content';
 import SideBar from './SideBar';
 
-type Props = BareProps;
-
 interface State {
   isCollapsed: boolean;
   isMenu: boolean;

packages/apps/src/SideBar/Item.tsx

@@ -16,13 +16,13 @@ import { isFunction } from '@polkadot/util';
 
 import translate from '../translate';
 
-type Props = I18nProps & ApiProps & {
+interface Props extends I18nProps, ApiProps {
   isCollapsed: boolean;
   onClick: () => void;
   allAccounts?: SubjectInfo;
   route: Route;
   sudo_key: string;
-};
+}
 
 class Item extends React.PureComponent<Props> {
   private _disabledLog: Map<string, string> = new Map();

packages/apps/src/SideBar/NodeInfo.tsx

@@ -2,15 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BareProps } from '@polkadot/react-components/types';
+import { BareProps as Props } from '@polkadot/react-components/types';
 
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 import { ApiContext } from '@polkadot/react-api';
 import { NodeName, NodeVersion } from '@polkadot/react-query';
 
-type Props = BareProps;
-
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const pkgJson = require('../../package.json');
 

packages/apps/src/overlays/Accounts.tsx

@@ -15,9 +15,9 @@ import accountObservable from '@polkadot/ui-keyring/observable/accounts';
 import translate from '../translate';
 import BaseOverlay from './Base';
 
-type Props = I18nProps & ApiProps & {
+interface Props extends I18nProps, ApiProps {
   allAccounts?: SubjectInfo;
-};
+}
 
 interface State {
   hasAccounts: boolean;

packages/apps/src/overlays/Connecting.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps } from '@polkadot/react-components/types';
+import { I18nProps as Props } from '@polkadot/react-components/types';
 
 import React, { useContext } from 'react';
 import styled from 'styled-components';
@@ -13,8 +13,6 @@ import settings from '@polkadot/ui-settings';
 import translate from '../translate';
 import BaseOverlay from './Base';
 
-type Props = I18nProps;
-
 const isFirefox = typeof (window as any).InstallTrigger !== 'undefined';
 const wsUrl = settings.apiUrl;
 const isWs = wsUrl.startsWith('ws://');

packages/react-api/src/with/call.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { ApiProps, CallState, SubtractProps } from '../types';
+import { ApiProps, CallState as State, SubtractProps } from '../types';
 import { Options } from './types';
 
 import React from 'react';
@@ -22,8 +22,6 @@ interface Method {
 
 type ApiMethodInfo = [Method, any[], string];
 
-type State = CallState;
-
 const NOOP = (): void => {
   // ignore
 };

packages/react-components/src/AddressInfo.tsx

@@ -37,7 +37,7 @@ export interface ValidatorPrefsType {
   validatorPayment?: boolean;
 }
 
-type Props = BareProps & I18nProps & {
+interface Props extends BareProps, I18nProps {
   address: string;
   balances_all?: DerivedBalances;
   children?: React.ReactNode;
@@ -47,7 +47,7 @@ type Props = BareProps & I18nProps & {
   withHexSessionId: string | null;
   withRewardDestination?: boolean;
   withValidatorPrefs?: boolean | ValidatorPrefsType;
-};
+}
 
 // either true (filtered above already) or [own, ...all extras bonded funds from nominators]
 function renderBonded ({ staking_info, t }: Props, bonded: true | BN[]): React.ReactNode {

packages/react-components/src/AddressRow.tsx

@@ -17,10 +17,10 @@ import AddressInfo, { BalanceActiveType } from './AddressInfo';
 import { classes, getAddressName, getAddressTags, toShortAddress } from './util';
 import CopyButton from './CopyButton';
 import IdentityIcon from './IdentityIcon';
-import Row, { RowProps, RowState, styles } from './Row';
+import Row, { RowProps, RowState as State, styles } from './Row';
 import translate from './translate';
 
-export type Props = I18nProps & RowProps & {
+export interface Props extends I18nProps, RowProps {
   bonded?: BN | BN[];
   isContract?: boolean;
   isValid?: boolean;
@@ -29,9 +29,7 @@ export type Props = I18nProps & RowProps & {
   withAddressOrName?: boolean;
   withBalance?: boolean | BalanceActiveType;
   withIndex?: boolean;
-};
-
-type State = RowState;
+}
 
 const DEFAULT_ADDR = '5'.padEnd(16, 'x');
 const ICON_SIZE = 48;

packages/react-components/src/Call.tsx

@@ -16,13 +16,13 @@ import Static from './Static';
 import { classes } from './util';
 import translate from './translate';
 
-export type Props = I18nProps & BareProps & {
+export interface Props extends I18nProps, BareProps {
   children?: React.ReactNode;
   value: IExtrinsic | IMethod;
   withHash?: boolean;
   mortality?: string;
   tip?: BN;
-};
+}
 
 const Wrapper = styled.div`
   .hash .ui--Static {

packages/react-components/src/CardGrid.tsx

@@ -5,14 +5,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import Collection, { CollectionProps, CollectionState, collectionStyles } from './Collection';
+import Collection, { CollectionProps as Props, CollectionState as State, collectionStyles } from './Collection';
 
 import translate from './translate';
 
-type Props = CollectionProps;
-
-type State = CollectionState;
-
 class CardGrid extends Collection<Props, State> {
   public static getDerivedStateFromProps (props: Props): State {
     const state = super.getDerivedStateFromProps(props);

packages/react-components/src/ChainImg.tsx

@@ -3,8 +3,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { ApiProps } from '@polkadot/react-api/types';
-
 import React from 'react';
 import styled from 'styled-components';
 import { withCalls, withMulti } from '@polkadot/react-api';
@@ -47,7 +45,7 @@ const LOGOS: Record<string, any> = {
   substrate
 };
 
-interface Props extends ApiProps {
+interface Props {
   className?: string;
   injectedLogoChain?: any;
   injectedLogoNode?: any;

packages/react-components/src/CodeRow.tsx

@@ -20,10 +20,10 @@ import Messages from './Messages';
 import Row, { RowProps, RowState, styles } from './Row';
 import translate from './translate';
 
-type Props = I18nProps & RowProps & {
+interface Props extends I18nProps, RowProps {
   code: CodeStored;
   withMessages?: boolean;
-};
+}
 
 interface State extends RowState {
   codeHash: string;

packages/react-components/src/Column.tsx

@@ -5,14 +5,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import Collection, { CollectionProps, CollectionState, collectionStyles } from './Collection';
+import Collection, { CollectionProps as Props, CollectionState as State, collectionStyles } from './Collection';
 
 import translate from './translate';
 
-type Props = CollectionProps;
-
-type State = CollectionState;
-
 class Column extends Collection<Props, State> {
   public render (): React.ReactNode {
     const { className } = this.props;

packages/react-components/src/Extrinsic.tsx

@@ -18,7 +18,7 @@ import { isUndefined } from '@polkadot/util';
 
 import paramComponents from './Params';
 
-type Props = BareProps & ApiProps & {
+interface Props extends BareProps, ApiProps {
   defaultValue: CallFunction;
   isDisabled?: boolean;
   isError?: boolean;
@@ -27,7 +27,7 @@ type Props = BareProps & ApiProps & {
   onChange: (method?: Call) => void;
   onEnter: () => void;
   withLabel?: boolean;
-};
+}
 
 interface State {
   methodfn: CallFunction;

packages/react-components/src/IdentityIcon.tsx

@@ -4,7 +4,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { AccountId } from '@polkadot/types/interfaces';
-import { ApiProps } from '@polkadot/react-api/types';
 import { IdentityProps } from '@polkadot/react-identicon/types';
 import { QueueAction$Add } from './Status/types';
 import { I18nProps } from './types';
@@ -17,16 +16,16 @@ import BaseIdentityIcon from '@polkadot/react-identicon';
 import { QueueConsumer } from './Status/Context';
 import translate from './translate';
 
-type CopyProps = IdentityProps & I18nProps & {
+interface CopyProps extends IdentityProps, I18nProps {
   queueAction?: QueueAction$Add;
-};
+}
 
-type IconProps = ApiProps & IdentityProps & {
+interface IconProps extends IdentityProps {
   session_validators?: AccountId[];
   staking_bonded?: Option<AccountId>;
-};
+}
 
-type Props = IconProps & IdentityProps;
+interface Props extends IconProps, IdentityProps {}
 
 interface State {
   isValidator: boolean;

packages/react-components/src/InputBalanceBonded.tsx

@@ -17,7 +17,7 @@ import { withCalls, withMulti, withApi } from '@polkadot/react-api';
 import { ZERO_BALANCE, ZERO_FEES } from '@polkadot/react-signer/Checks/constants';
 import { bnMax } from '@polkadot/util';
 
-type Props = BareProps & ApiProps & {
+interface Props extends BareProps, ApiProps {
   autoFocus?: boolean;
   balances_fees?: DerivedFees;
   balances_all?: DerivedBalances;
@@ -38,7 +38,7 @@ type Props = BareProps & ApiProps & {
   withEllipsis?: boolean;
   withLabel?: boolean;
   withMax?: boolean;
-};
+}
 
 interface State {
   maxBalance?: BN;

packages/react-components/src/InputConsts/SelectKey.tsx

@@ -2,23 +2,21 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { ApiProps } from '@polkadot/react-api/types';
 import { DropdownOptions } from '../util/types';
 import { BareProps } from '../types';
 import { ConstValueBase } from './types';
 
 import React from 'react';
-import { withApi } from '@polkadot/react-api';
 
 import Dropdown from '../Dropdown';
 import { classes } from '../util';
 
-type Props = ApiProps & BareProps & {
+interface Props extends BareProps {
   isError?: boolean;
   onChange: (value: ConstValueBase) => void;
   options: DropdownOptions;
   value: ConstValueBase;
-};
+}
 
 function transform ({ value }: Props): (method: string) => ConstValueBase {
   return (method: string): ConstValueBase => {
@@ -31,7 +29,7 @@ function transform ({ value }: Props): (method: string) => ConstValueBase {
   };
 }
 
-function SelectKey (props: Props): React.ReactElement<Props> | null {
+export default function SelectKey (props: Props): React.ReactElement<Props> | null {
   const { className, isError, onChange, options, style, value } = props;
 
   if (!options.length) {
@@ -51,5 +49,3 @@ function SelectKey (props: Props): React.ReactElement<Props> | null {
     />
   );
 }
-
-export default withApi(SelectKey);

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

@@ -20,14 +20,14 @@ import SelectSection from './SelectSection';
 import keyOptions from './options/key';
 import sectionOptions from './options/section';
 
-type Props = ApiProps & I18nProps & {
+interface Props extends ApiProps, I18nProps {
   defaultValue: ConstValueBase;
   help?: React.ReactNode;
   isError?: boolean;
   label: React.ReactNode;
   onChange?: (value: ConstValue) => void;
   withLabel?: boolean;
-};
+}
 
 interface State {
   optionsMethod: DropdownOptions;

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

@@ -19,7 +19,7 @@ import SelectSection from './SelectSection';
 import methodOptions from './options/method';
 import sectionOptions from './options/section';
 
-type Props = ApiProps & I18nProps & {
+interface Props extends ApiProps, I18nProps {
   defaultValue: CallFunction;
   help?: React.ReactNode;
   isDisabled?: boolean;
@@ -28,7 +28,7 @@ type Props = ApiProps & I18nProps & {
   label: React.ReactNode;
   onChange: (value: CallFunction) => void;
   withLabel?: boolean;
-};
+}
 
 interface State {
   optionsMethod?: DropdownOptions;

packages/react-components/src/InputFile.tsx

@@ -14,7 +14,7 @@ import { classes } from './util';
 import Labelled from './Labelled';
 import translate from './translate';
 
-type Props = BareProps & WithTranslation & {
+interface Props extends BareProps, WithTranslation {
   // Reference Example Usage: https://github.com/react-dropzone/react-dropzone/tree/master/examples/Accept
   // i.e. MIME types: 'application/json, text/plain', or '.json, .txt'
   accept?: string;
@@ -27,7 +27,7 @@ type Props = BareProps & WithTranslation & {
   placeholder?: React.ReactNode | null;
   withEllipsis?: boolean;
   withLabel?: boolean;
-};
+}
 
 interface State {
   file?: {

packages/react-components/src/InputNumber.tsx

@@ -15,7 +15,7 @@ import Dropdown from './Dropdown';
 import Input, { KEYS, KEYS_PRE } from './Input';
 import translate from './translate';
 
-type Props = BareProps & I18nProps & {
+interface Props extends BareProps, I18nProps {
   autoFocus?: boolean;
   bitLength?: BitLength;
   defaultValue?: BN | string;
@@ -34,7 +34,7 @@ type Props = BareProps & I18nProps & {
   withEllipsis?: boolean;
   withLabel?: boolean;
   withMax?: boolean;
-};
+}
 
 interface State {
   isPreKeyDown: boolean;

packages/react-components/src/InputStorage/SelectKey.tsx

@@ -2,25 +2,25 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { ApiProps } from '@polkadot/react-api/types';
 import { StorageEntryPromise } from '@polkadot/api/types';
 import { DropdownOptions } from '../util/types';
 import { BareProps } from '../types';
 
-import React from 'react';
-import { withApi } from '@polkadot/react-api';
+import React, { useContext } from 'react';
+import { ApiPromise } from '@polkadot/api';
+import { ApiContext } from '@polkadot/react-api';
 
 import Dropdown from '../Dropdown';
 import { classes } from '../util';
 
-type Props = ApiProps & BareProps & {
+interface Props extends BareProps {
   isError?: boolean;
   onChange: (value: StorageEntryPromise) => void;
   options: DropdownOptions;
   value: StorageEntryPromise;
-};
+}
 
-function transform ({ api, value }: Props): (method: string) => StorageEntryPromise {
+function transform (api: ApiPromise, { value }: Props): (method: string) => StorageEntryPromise {
   return function (method: string): StorageEntryPromise {
     return api.query[value.creator.section]
       ? api.query[value.creator.section][method]
@@ -28,7 +28,8 @@ function transform ({ api, value }: Props): (method: string) => StorageEntryProm
   };
 }
 
-function SelectKey (props: Props): React.ReactElement<Props> | null {
+export default function SelectKey (props: Props): React.ReactElement<Props> | null {
+  const { api } = useContext(ApiContext);
   const { className, isError, onChange, options, style, value } = props;
 
   if (!options.length) {
@@ -42,11 +43,9 @@ function SelectKey (props: Props): React.ReactElement<Props> | null {
       onChange={onChange}
       options={options}
       style={style}
-      transform={transform(props)}
+      transform={transform(api, props)}
       value={value.creator.method}
       withLabel={false}
     />
   );
 }
-
-export default withApi(SelectKey);

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

@@ -21,14 +21,14 @@ import SelectSection from './SelectSection';
 import keyOptions from './options/key';
 import sectionOptions from './options/section';
 
-type Props = ApiProps & I18nProps & {
+interface Props extends ApiProps, I18nProps {
   defaultValue: StorageEntryPromise;
   help?: React.ReactNode;
   isError?: boolean;
   label: React.ReactNode;
   onChange?: (value: StorageEntryPromise) => void;
   withLabel?: boolean;
-};
+}
 
 interface State {
   optionsMethod: DropdownOptions;

packages/react-components/src/Modal.tsx

@@ -10,10 +10,10 @@ import settings from '@polkadot/ui-settings';
 
 import { classes } from './util';
 
-type Props = BareProps & {
+interface Props extends BareProps {
   children: React.ReactNode;
   [index: string]: any;
-};
+}
 
 export default class Modal extends React.PureComponent<Props> {
   public static Actions = SUIModal.Actions;

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

@@ -3,17 +3,16 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { SubmittableExtrinsicFunction } from '@polkadot/api/types';
-import { Props as BaseProps } from '@polkadot/react-params/types';
-import { ApiProps } from '@polkadot/react-api/types';
+import { Props } from '@polkadot/react-params/types';
 
-import React from 'react';
-import { withApi } from '@polkadot/react-api';
+import React, { useContext } from 'react';
+import { ApiContext } from '@polkadot/react-api';
 
 import Extrinsic from './Extrinsic';
 
-type Props = ApiProps & BaseProps;
+export default function Call ({ className, isDisabled, isError, label, onChange, onEnter, style, withLabel }: Props): React.ReactElement<Props> {
+  const { api, apiDefaultTx } = useContext(ApiContext);
 
-function Call ({ apiDefaultTx, api, className, isDisabled, isError, label, onChange, onEnter, style, withLabel }: Props): React.ReactElement<Props> {
   const defaultValue = ((): SubmittableExtrinsicFunction<'promise'> => {
     try {
       return api.tx.balances.transfer;
@@ -37,5 +36,3 @@ function Call ({ apiDefaultTx, api, className, isDisabled, isError, label, onCha
     />
   );
 }
-
-export default withApi(Call);

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

@@ -2,17 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Props as BaseProps, RawParam } from '@polkadot/react-params/types';
-import { ApiProps } from '@polkadot/react-api/types';
+import { Props, RawParam } from '@polkadot/react-params/types';
 
-import React from 'react';
+import React, { useContext } from 'react';
 import { createType } from '@polkadot/types';
-import { withApi } from '@polkadot/react-api';
+import { ApiContext } from '@polkadot/react-api';
 
 import ExtrinsicDisplay from './Extrinsic';
 
-type Props = ApiProps & BaseProps;
-
 function onChange ({ onChange }: Props): (_: RawParam) => void {
   return function ({ isValid, value }: RawParam): void {
     let proposal = null;
@@ -28,8 +25,9 @@ function onChange ({ onChange }: Props): (_: RawParam) => void {
   };
 }
 
-function ProposalDisplay (props: Props): React.ReactElement<Props> {
-  const { apiDefaultTxSudo, className, isDisabled, isError, label, onEnter, style, withLabel } = props;
+export default function ProposalDisplay (props: Props): React.ReactElement<Props> {
+  const { apiDefaultTxSudo } = useContext(ApiContext);
+  const { className, isDisabled, isError, label, onEnter, style, withLabel } = props;
 
   return (
     <ExtrinsicDisplay
@@ -46,5 +44,3 @@ function ProposalDisplay (props: Props): React.ReactElement<Props> {
     />
   );
 }
-
-export default withApi(ProposalDisplay);

packages/react-components/src/Status/Queue.tsx

@@ -5,7 +5,7 @@
 import { SignerPayload } from '@polkadot/api/types';
 import { RpcMethod } from '@polkadot/jsonrpc/types';
 import { BareProps } from '../types';
-import { ActionStatus, PartialQueueTxExtrinsic, PartialQueueTxRpc, QueueProps, QueueStatus, QueueTx, QueueTxExtrinsic, QueueTxRpc, QueueTxStatus, SignerCallback } from './types';
+import { ActionStatus, PartialQueueTxExtrinsic, PartialQueueTxRpc, QueueProps as State, QueueStatus, QueueTx, QueueTxExtrinsic, QueueTxRpc, QueueTxStatus, SignerCallback } from './types';
 
 import React from 'react';
 import jsonrpc from '@polkadot/jsonrpc';
@@ -19,9 +19,7 @@ export interface Props extends BareProps {
   children: React.ReactNode;
 }
 
-type State = QueueProps;
-
-const defaultState: Partial<QueueProps> = {
+const defaultState: Partial<State> = {
   stqueue: [] as QueueStatus[],
   txqueue: [] as QueueTx[]
 };

packages/react-components/src/TreasuryProposal.tsx

@@ -15,7 +15,7 @@ import { formatBalance } from '@polkadot/util';
 import Inset, { InsetProps } from './Inset';
 import translate from './translate';
 
-type Props = I18nProps & ApiProps & {
+interface Props extends I18nProps, ApiProps {
   className?: string;
   asInset?: boolean;
   insetProps?: Partial<InsetProps>;
@@ -23,7 +23,7 @@ type Props = I18nProps & ApiProps & {
   proposalId: string;
   proposal?: TreasuryProposalType | null;
   withLink?: boolean;
-};
+}
 
 interface State {
   proposal?: TreasuryProposalType | null;

packages/react-components/src/Voting.tsx

@@ -18,14 +18,14 @@ import ProposedAction from './ProposedAction';
 import TxModal, { TxModalProps, TxModalState } from './TxModal';
 import { isTreasuryProposalVote } from './util';
 
-type Props = I18nProps & TxModalProps & {
+interface Props extends I18nProps, TxModalProps {
   allAccounts?: SubjectInfo;
   hash?: string;
   idNumber: BN | number;
   isCouncil: boolean;
   proposal?: Proposal | null;
   preContent?: React.ReactNode;
-};
+}
 
 interface State extends TxModalState {
   voteOptions: { text: React.ReactNode; value: boolean }[];

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

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Props as BareProps } from '../types';
+import { Props } from '../types';
 
 import BN from 'bn.js';
 import React from 'react';
@@ -10,8 +10,6 @@ import { InputBalance } from '@polkadot/react-components';
 
 import Bare from './Bare';
 
-type Props = BareProps;
-
 function onChange ({ isError, onChange }: Props): (_?: BN) => void {
   return function (value?: BN): void {
     if (!onChange) {

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

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { TypeDef } from '@polkadot/types/types';
-import { Props as BaseProps, RawParam } from '../types';
+import { Props, RawParam } from '../types';
 
 import React from 'react';
 import { Enum, createType, getTypeDef } from '@polkadot/types';
@@ -18,8 +18,6 @@ interface Option {
   value?: string;
 }
 
-type Props = BaseProps;
-
 interface State {
   def: TypeDef | null;
   options: Option[];

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

@@ -16,7 +16,7 @@ import Bytes from './Bytes';
 import File from './File';
 import KeyValue from './KeyValue';
 
-type Props = BaseProps & WithTranslation;
+interface Props extends BaseProps, WithTranslation {}
 
 interface State {
   placeholder?: string;

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

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { TypeDef } from '@polkadot/types/types';
-import { Props as BaseProps, RawParam } from '../types';
+import { Props, RawParam } from '../types';
 
 import React from 'react';
 import { createType, getTypeDef } from '@polkadot/types';
@@ -12,8 +12,6 @@ import Params from '../';
 import Base from './Base';
 import Static from './Static';
 
-type Props = BaseProps;
-
 interface State {
   defs: TypeDef[];
   type: string | null;

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

@@ -15,7 +15,7 @@ import getInitValue from '../initValue';
 import Bare from './Bare';
 import findComponent from './findComponent';
 
-type Props = BareProps & WithTranslation;
+interface Props extends BareProps, WithTranslation {}
 
 interface State {
   Component: React.ComponentType<BareProps> | null;

packages/react-signer/src/Checks/ContractCall.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedContractFees } from '@polkadot/api-derive/types';
-import { ExtraFees } from './types';
+import { ExtraFees as State } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
@@ -12,11 +12,9 @@ import { Compact, UInt } from '@polkadot/types';
 interface Props {
   endowment: BN | Compact<UInt>;
   fees: DerivedContractFees;
-  onChange: (fees: ExtraFees) => void;
+  onChange: (fees: State) => void;
 }
 
-type State = ExtraFees;
-
 export default class ContractCall extends React.PureComponent<Props, State> {
   public state: State = {
     extraFees: new BN(0),

packages/react-signer/src/Checks/ContractDeploy.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedContractFees } from '@polkadot/api-derive/types';
-import { ExtraFees } from './types';
+import { ExtraFees as State } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
@@ -12,11 +12,9 @@ import { Compact, UInt } from '@polkadot/types';
 interface Props {
   endowment: BN | Compact<UInt>;
   fees: DerivedContractFees;
-  onChange: (fees: ExtraFees) => void;
+  onChange: (fees: State) => void;
 }
 
-type State = ExtraFees;
-
 export default class ContractDeploy extends React.PureComponent<Props, State> {
   public state: State = {
     extraFees: new BN(0),

packages/react-signer/src/Modal.tsx

@@ -32,9 +32,9 @@ interface BaseProps extends BareProps {
   queueSetTxStatus: QueueTxMessageSetStatus;
 }
 
-type Props = I18nProps & ApiProps & BaseProps & {
+interface Props extends I18nProps, ApiProps, BaseProps {
   allAccounts?: SubjectInfo;
-};
+}
 
 interface State {
   currentItem?: QueueTx;