s/useApiContext/useApi/ (#1900)

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

@@ -10,7 +10,7 @@ import BN from 'bn.js';
 import React from 'react';
 import { withCalls } from '@polkadot/react-api';
 import { Bubble, IdentityIcon } from '@polkadot/react-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import { formatBalance, formatNumber } from '@polkadot/util';
 
 import translate from './translate';
@@ -23,7 +23,7 @@ interface Props extends BareProps, I18nProps {
 }
 
 function SummaryBar ({ balances_totalIssuance, chain_bestNumber, chain_bestNumberLag, staking_validators }: Props): React.ReactElement<Props> {
-  const { api, systemChain, systemName, systemVersion } = useApiContext();
+  const { api, systemChain, systemName, systemVersion } = useApi();
 
   return (
     <summary>

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

@@ -13,7 +13,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { DEV_PHRASE } from '@polkadot/keyring/defaults';
 import { AddressRow, Button, Dropdown, Input, InputAddress, Modal, Password } from '@polkadot/react-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 import uiSettings from '@polkadot/ui-settings';
 import { isHex, u8aToHex } from '@polkadot/util';
@@ -151,7 +151,7 @@ function createAccount (suri: string, pairType: KeypairType, name: string, passw
 }
 
 function Create ({ className, onClose, onStatusChange, seed: propsSeed, t, type: propsType }: Props): React.ReactElement<Props> {
-  const { isDevelopment } = useApiContext();
+  const { isDevelopment } = useApi();
   const [{ address, deriveError, derivePath, isSeedValid, pairType, seed, seedType }, setAddress] = useState<AddressState>(generateSeed(propsSeed, '', propsSeed ? 'raw' : 'bip', propsType));
   const [isConfirmationOpen, setIsConfirmationOpen] = useState(false);
   const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' });

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

@@ -11,7 +11,7 @@ import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';
 import Checks from '@polkadot/react-signer/Checks';
 
@@ -65,7 +65,7 @@ const ZERO = new BN(0);
 // }
 
 function Transfer ({ className, onClose, recipientId: propRecipientId, senderId: propSenderId, t }: Props): React.ReactElement<Props> {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const [amount, setAmount] = useState<BN | undefined>(new BN(0));
   const [extrinsic, setExtrinsic] = useState<SubmittableExtrinsic | null>(null);
   const [hasAvailable, setHasAvailable] = useState(true);

packages/app-claims/src/Claim.tsx

@@ -9,7 +9,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button, Card } from '@polkadot/react-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 
 import translate from './translate';
@@ -21,7 +21,7 @@ interface Props extends I18nProps {
 }
 
 function Claim ({ button, className, ethereumAddress, t }: Props): React.ReactElement<Props> | null {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
   const [claimAddress, setClaimAddress] = useState<EthereumAddress | null>(null);
   const [isBusy, setIsBusy] = useState(false);

packages/app-explorer/src/Forks.tsx

@@ -10,7 +10,7 @@ import { Header } from '@polkadot/types/interfaces';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { CardSummary, IdentityIcon, SummaryBox } from '@polkadot/react-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import { formatNumber } from '@polkadot/util';
 
 import translate from './translate';
@@ -204,7 +204,7 @@ function renderRows (rows: Row[]): React.ReactNode[] {
 }
 
 function Forks ({ className, t }: Props): React.ReactElement<Props> | null {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const [tree, setTree] = useState<Link | null>(null);
   const childrenRef = useRef<Map<string, string[]>>(new Map([['root', []]]));
   const countRef = useRef({ numBlocks: 0, numForks: 0 });

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

@@ -7,7 +7,7 @@ import { Info } from './types';
 
 import React, { useEffect, useState } from 'react';
 import { ApiPromise } from '@polkadot/api';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 import Extrinsics from '../BlockInfo/Extrinsics';
 import Peers from './Peers';
@@ -32,7 +32,7 @@ async function retrieveInfo (api: ApiPromise): Promise<Partial<Info>> {
 }
 
 function NodeInfo ({ t }: Props): React.ReactElement<Props> {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const [info, setInfo] = useState<Partial<Info>>({});
   const [nextRefresh, setNextRefresh] = useState(Date.now());
 

packages/app-explorer/src/index.tsx

@@ -9,7 +9,7 @@ import React, { useContext } from 'react';
 import { Route, Switch } from 'react-router';
 import styled from 'styled-components';
 import Tabs from '@polkadot/react-components/Tabs';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import { BlockAuthorsContext, EventsContext } from '@polkadot/react-query';
 import uiSettings from '@polkadot/ui-settings';
 
@@ -24,7 +24,7 @@ interface Props extends AppProps, BareProps, I18nProps {
 }
 
 function ExplorerApp ({ basePath, className, t }: Props): React.ReactElement<Props> {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const { lastHeaders } = useContext(BlockAuthorsContext);
   const events = useContext(EventsContext);
 

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

@@ -9,7 +9,7 @@ import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button, InputAddress, InputBalance, TxButton, Dropdown } from '@polkadot/react-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';
 import Checks from '@polkadot/react-signer/Checks';
 import { withMulti, withObservable } from '@polkadot/react-api';
@@ -31,7 +31,7 @@ interface Option {
 }
 
 function Transfer ({ assets, className, onClose, recipientId: propRecipientId, senderId: propSenderId, t }: Props): React.ReactElement<Props> {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const [assetId, setAssetId] = useState('0');
   const [amount, setAmount] = useState<BN | undefined>(new BN(0));
   const [extrinsic, setExtrinsic] = useState<SubmittableExtrinsic | null>(null);

packages/app-js/src/Playground.tsx

@@ -13,7 +13,7 @@ import { Transition } from 'semantic-ui-react';
 import snappy from 'snappyjs';
 import styled from 'styled-components';
 import { Button, Dropdown, Editor } from '@polkadot/react-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import uiKeyring from '@polkadot/ui-keyring';
 import * as types from '@polkadot/types';
 import * as util from '@polkadot/util';
@@ -80,7 +80,7 @@ function decodeBase64 (base64: string): Snippet {
 
 // FIXME This... ladies & gentlemen, is a mess that should be untangled
 function Playground ({ className, t }: Props): React.ReactElement<Props> {
-  const { api, isDevelopment } = useApiContext();
+  const { api, isDevelopment } = useApi();
   const history = useHistory();
   const { base64 } = useParams();
   const injectedRef = useRef<Injected | null>(null);

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

@@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 
 import React, { useState } from 'react';
 import { Button, InputAddress, Input, Modal, TxButton } from '@polkadot/react-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 import ValidationSessionKey from './InputValidationSessionKey';
 import translate from '../../translate';
@@ -22,7 +22,7 @@ interface Props extends I18nProps {
 const EMPTY_PROOF = new Uint8Array();
 
 function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t }: Props): React.ReactElement<Props> | null {
-  const { isSubstrateV2 } = useApiContext();
+  const { isSubstrateV2 } = useApi();
   const [keysError, setKeysError] = useState<string | null>(null);
   const [keys, setKeys] = useState<string | null>(
     isSubstrateV2

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

@@ -10,7 +10,7 @@ import { ComponentProps } from '../types';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Button, CardGrid } from '@polkadot/react-components';
-import { trackStream, useApiContext } from '@polkadot/react-hooks';
+import { trackStream, useApi } from '@polkadot/react-hooks';
 import { AccountName } from '@polkadot/react-query';
 import { Option } from '@polkadot/types';
 import createOption from '@polkadot/ui-keyring/options/item';
@@ -45,7 +45,7 @@ function getMyStashes (allAccounts: string[], queryBonded?: Option<AccountId>[],
 }
 
 function Accounts ({ allAccounts, allStashes, className, recentlyOnline, t }: Props): React.ReactElement<Props> {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const queryBonded = trackStream<Option<AccountId>[]>(api.query.staking.bonded.multi as any, [allAccounts]);
   const queryLedger = trackStream<Option<StakingLedger>[]>(api.query.staking.ledger.multi as any, [allAccounts]);
   const [isNewStakeOpen, setIsNewStateOpen] = useState(false);

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

@@ -12,7 +12,7 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { AddressCard, AddressMini, Badge, Expander, Icon } from '@polkadot/react-components';
 import { classes } from '@polkadot/react-components/util';
-import { trackStream, useApiContext } from '@polkadot/react-hooks';
+import { trackStream, useApi } from '@polkadot/react-hooks';
 import { formatNumber } from '@polkadot/util';
 
 import translate from '../translate';
@@ -47,7 +47,7 @@ interface StakingState {
 const WITH_VALIDATOR_PREFS = { validatorPayment: true };
 
 function Address ({ address, authorsMap, className, defaultName, filter, hasQueries, isElected, isFavorite, lastAuthors, myAccounts, points, recentlyOnline, t, toggleFavorite, withNominations = true }: Props): React.ReactElement<Props> | null {
-  const { api, isSubstrateV2 } = useApiContext();
+  const { api, isSubstrateV2 } = useApi();
   // FIXME Any horrors, caused by derive type mismatches
   const stakingInfo = trackStream<DerivedStaking>(api.derive.staking.info as any, [address]);
   const [extraInfo, setExtraInfo] = useState<[React.ReactNode, React.ReactNode][] | undefined>();

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

@@ -9,7 +9,7 @@ import { ValidatorFilter } from '../types';
 
 import React, { useEffect, useState } from 'react';
 import { Columar, Column, Dropdown, FilterOverlay } from '@polkadot/react-components';
-import { useApiContext, useFavorites } from '@polkadot/react-hooks';
+import { useApi, useFavorites } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 
 import { STORE_FAVS_BASE } from '../constants';
@@ -57,7 +57,7 @@ function accountsToString (accounts: AccountId[]): string[] {
 }
 
 function CurrentList ({ authorsMap, hasQueries, lastAuthors, next, recentlyOnline, stakingOverview, t }: Props): React.ReactElement<Props> {
-  const { isSubstrateV2 } = useApiContext();
+  const { isSubstrateV2 } = useApi();
   const [favorites, toggleFavorite] = useFavorites(STORE_FAVS_BASE);
   const [filter, setFilter] = useState<ValidatorFilter>('all');
   const [myAccounts] = useState(keyring.getAccounts().map(({ address }): string => address));

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

@@ -6,7 +6,7 @@ import { BareProps } from '@polkadot/react-components/types';
 import { ComponentProps } from '../types';
 
 import React, { useContext, useEffect, useState } from 'react';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import { BlockAuthorsContext } from '@polkadot/react-query';
 
 import CurrentList from './CurrentList';
@@ -15,7 +15,7 @@ import Summary from './Summary';
 interface Props extends BareProps, ComponentProps {}
 
 export default function Overview ({ allControllers, hasQueries, allStashes, className, recentlyOnline, stakingOverview }: Props): React.ReactElement<Props> {
-  const { isSubstrateV2 } = useApiContext();
+  const { isSubstrateV2 } = useApi();
   const { byAuthor, lastBlockAuthors, lastBlockNumber } = useContext(BlockAuthorsContext);
   const [next, setNext] = useState<string[]>([]);
   const validators = stakingOverview && stakingOverview.validators;

packages/app-staking/src/Query/Validator.tsx

@@ -11,7 +11,7 @@ import React, { useEffect, useState } from 'react';
 import { Chart, Columar, Column } from '@polkadot/react-components';
 import { toShortAddress } from '@polkadot/react-components/util';
 import { getHistoric } from '@polkadot/react-api/util';
-import { trackStream, useApiContext } from '@polkadot/react-hooks';
+import { trackStream, useApi } from '@polkadot/react-hooks';
 import { u32 } from '@polkadot/types';
 import { formatBalance, formatNumber } from '@polkadot/util';
 
@@ -91,7 +91,7 @@ function extractEraSlash (validatorId: string, slashes: Slash[]): BN {
 }
 
 function Validator ({ className, sessionRewards, t, validatorId }: Props): React.ReactElement<Props> {
-  const { api } = useApiContext();
+  const { api } = useApi();
   // FIXME There is something seriously wrong in these two with "any" horrors
   const blockCounts = trackStream<u32[]>(api.query.imOnline?.authoredBlocks?.multi as any, [sessionRewards, validatorId], {
     paramMap: ([sessionRewards, validatorId]: [SessionRewards[], string]): any =>

packages/app-staking/src/index.tsx

@@ -14,7 +14,7 @@ import styled from 'styled-components';
 import { Option } from '@polkadot/types';
 import { HelpOverlay } from '@polkadot/react-components';
 import Tabs from '@polkadot/react-components/Tabs';
-import { trackStream, useAccounts, useApiContext, useSessionRewards } from '@polkadot/react-hooks';
+import { trackStream, useAccounts, useApi, useSessionRewards } from '@polkadot/react-hooks';
 
 import Accounts from './Actions/Accounts';
 import basicMd from './md/basic.md';
@@ -39,7 +39,7 @@ function transformStakingControllers ([stashes, controllers]: [AccountId[], Opti
 }
 
 function App ({ basePath, className, t }: Props): React.ReactElement<Props> {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const { allAccounts, hasAccounts } = useAccounts();
   const stakingControllers = trackStream<[string[], string[]]>(api.derive.staking.controllers, [], { transform: transformStakingControllers });
   const bestNumber = trackStream<BlockNumber>(api.derive.chain.bestNumber, []);

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

@@ -9,14 +9,14 @@ import { ComponentProps } from '../types';
 
 import React, { useState } from 'react';
 import { Button, InputConsts } from '@polkadot/react-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 import translate from '../translate';
 
 interface Props extends ComponentProps, I18nProps {}
 
 function Consts ({ onAdd, t }: Props): React.ReactElement<Props> {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const [defaultValue] = useState<ConstValue>((): ConstValue => {
     const section = Object.keys(api.consts)[0];
     const method = Object.keys(api.consts[section])[0];

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

@@ -11,7 +11,7 @@ import React, { useState } from 'react';
 import { getTypeDef } from '@polkadot/types';
 import { Button, InputStorage } from '@polkadot/react-components';
 import Params from '@polkadot/react-params';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import { isNull, isUndefined } from '@polkadot/util';
 
 import translate from '../translate';
@@ -32,7 +32,7 @@ function areParamsValid (values: RawParams): boolean {
 }
 
 function Modules ({ onAdd, t }: Props): React.ReactElement<Props> {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const [{ defaultValues, isLinked, key, params }, setKey] = useState<{ defaultValues: RawParams | undefined | null; isLinked: boolean; key: StorageEntryPromise; params: ParamsType }>({ defaultValues: undefined, isLinked: false, key: api.query.timestamp.now, params: [] });
   const [{ isValid, values }, setValues] = useState<{ isValid: boolean; values: RawParams }>({ isValid: true, values: [] });
 

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

@@ -8,7 +8,7 @@ import { ComponentProps, QueryTypes, ParitalQueryTypes } from '../types';
 import React from 'react';
 import { Route, Switch } from 'react-router';
 import { Tabs } from '@polkadot/react-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 import Consts from './Consts';
 import Modules from './Modules';
@@ -23,7 +23,7 @@ interface Props extends I18nProps {
 let id = -1;
 
 function Selection ({ basePath, onAdd, t }: Props): React.ReactElement<Props> {
-  const { isSubstrateV2 } = useApiContext();
+  const { isSubstrateV2 } = useApi();
   const _onAdd = (query: ParitalQueryTypes): void => onAdd({ ...query, id: ++id });
   const _renderComponent = (Component: React.ComponentType<ComponentProps>): () => React.ReactNode =>
     // eslint-disable-next-line react/display-name

packages/app-sudo/src/index.tsx

@@ -9,7 +9,7 @@ import { ComponentProps } from './types';
 import React, { useEffect, useState } from 'react';
 import { Route, Switch } from 'react-router';
 import { Icon, Tabs } from '@polkadot/react-components';
-import { trackStream, useAccounts, useApiContext } from '@polkadot/react-hooks';
+import { trackStream, useAccounts, useApi } from '@polkadot/react-hooks';
 
 import SetKey from './SetKey';
 import Sudo from './Sudo';
@@ -20,7 +20,7 @@ interface Props extends AppProps, I18nProps {
 }
 
 function App ({ basePath, t }: Props): React.ReactElement<Props> {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const sudoKey = trackStream<string>(api.query.sudo.key, [], { transform: (k): string => k.toString() });
   const { allAccounts } = useAccounts();
   const [isMine, setIsMine] = useState(false);

packages/apps/src/Content/index.tsx

@@ -9,7 +9,7 @@ import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import routing from '@polkadot/apps-routing';
 import { StatusContext } from '@polkadot/react-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 import Status from './Status';
 import translate from '../translate';
@@ -25,7 +25,7 @@ const unknown = {
 
 function Content ({ className, t }: Props): React.ReactElement<Props> {
   const location = useLocation();
-  const { isApiConnected, isApiReady } = useApiContext();
+  const { isApiConnected, isApiReady } = useApi();
   const { queueAction, stqueue, txqueue } = useContext(StatusContext);
   const app = location.pathname.slice(1) || '';
   const { Component, display: { needsApi }, name } = routing.routes.find((route): boolean =>

packages/apps/src/SideBar/Item.tsx

@@ -12,7 +12,7 @@ import { NavLink } from 'react-router-dom';
 import { ApiPromise } from '@polkadot/api';
 import { Icon, Menu, Tooltip } from '@polkadot/react-components';
 import { withCalls, withMulti } from '@polkadot/react-api';
-import { useAccounts, useApiContext } from '@polkadot/react-hooks';
+import { useAccounts, useApi } from '@polkadot/react-hooks';
 import { isFunction } from '@polkadot/util';
 
 import translate from '../translate';
@@ -76,7 +76,7 @@ function checkVisible (name: string, { api, isApiReady, isApiConnected }: ApiPro
 
 function Item ({ route: { Modal, display, i18n, icon, name }, t, isCollapsed, onClick, sudoKey }: Props): React.ReactElement<Props> | null {
   const { allAccounts, hasAccounts } = useAccounts();
-  const apiProps = useApiContext();
+  const apiProps = useApi();
   const [hasSudo, setHasSudo] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
 

packages/apps/src/SideBar/NodeInfo.tsx

@@ -6,7 +6,7 @@ import { BareProps as Props } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import { NodeName, NodeVersion } from '@polkadot/react-query';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -15,7 +15,7 @@ const pkgJson = require('../../package.json');
 const uiInfo = `apps v${pkgJson.version}`;
 
 function NodeInfo ({ className }: Props): React.ReactElement<Props> {
-  const { api, isApiReady } = useApiContext();
+  const { api, isApiReady } = useApi();
 
   return (
     <div className={className}>

packages/apps/src/SideBar/index.tsx

@@ -12,7 +12,7 @@ import styled from 'styled-components';
 import { Responsive } from 'semantic-ui-react';
 import routing from '@polkadot/apps-routing';
 import { Button, ChainImg, Icon, Menu, media } from '@polkadot/react-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import { classes } from '@polkadot/react-components/util';
 import { BestNumber, Chain } from '@polkadot/react-query';
 
@@ -31,7 +31,7 @@ interface Props extends I18nProps {
 }
 
 function SideBar ({ className, collapse, handleResize, isCollapsed, toggleMenu, menuOpen }: Props): React.ReactElement<Props> {
-  const { api, isApiReady } = useApiContext();
+  const { api, isApiReady } = useApi();
   const [modals, setModals] = useState<Record<string, boolean>>(
     routing.routes.reduce((result: Record<string, boolean>, route): Record<string, boolean> => {
       if (route && route.Modal) {

packages/apps/src/overlays/Accounts.tsx

@@ -7,14 +7,14 @@ import { I18nProps as Props } from '@polkadot/react-components/types';
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-import { useAccounts, useApiContext } from '@polkadot/react-hooks';
+import { useAccounts, useApi } from '@polkadot/react-hooks';
 
 import translate from '../translate';
 import BaseOverlay from './Base';
 
 function Accounts ({ className, t }: Props): React.ReactElement<Props> | null {
   const { hasAccounts } = useAccounts();
-  const { isApiReady } = useApiContext();
+  const { isApiReady } = useApi();
   const [isHidden, setIsHidden] = useState(false);
 
   if (!isApiReady || hasAccounts || isHidden) {

packages/apps/src/overlays/Connecting.tsx

@@ -7,7 +7,7 @@ import { I18nProps as Props } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import settings from '@polkadot/ui-settings';
 
 import translate from '../translate';
@@ -60,7 +60,7 @@ function ConnectOverlay ({ className, isApiConnected, t }: ApiProps & Props): Re
 }
 
 function Connecting (props: Props): React.ReactElement<Props> | null {
-  const api = useApiContext();
+  const api = useApi();
 
   return ExtensionOverlay({ ...props, ...api }) || ConnectOverlay({ ...props, ...api });
 }

packages/react-components/src/ChainImg.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 // the imports here as a bit all-over, non-aphabetical - since we expect this to grow,
 // rather organise based on type, grouping chains and nodes as opposed to location
@@ -54,7 +54,7 @@ interface Props {
 }
 
 function ChainImg ({ className, logo = '', onClick }: Props): React.ReactElement<Props> {
-  const { systemChain, systemName } = useApiContext();
+  const { systemChain, systemName } = useApi();
   const img = LOGOS[logo] || CHAINS[systemChain] || NODES[systemName] || EMPTY;
 
   return (

packages/react-components/src/ChainLock.tsx

@@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 import translate from './translate';
 import Toggle from './Toggle';
@@ -20,7 +20,7 @@ interface Props extends I18nProps {
 }
 
 function ChainLock ({ className, genesisHash, isDisabled, onChange, preventDefault, t }: Props): React.ReactElement<Props> | null {
-  const { isDevelopment, api } = useApiContext();
+  const { isDevelopment, api } = useApi();
 
   if (isDevelopment) {
     return null;

packages/react-components/src/IdentityIcon.tsx

@@ -8,7 +8,7 @@ import { I18nProps } from './types';
 
 import React, { useContext, useEffect, useState } from 'react';
 import { withCalls, withMulti } from '@polkadot/react-api';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import BaseIdentityIcon from '@polkadot/react-identicon';
 import uiSettings from '@polkadot/ui-settings';
 
@@ -34,7 +34,7 @@ export function getIdentityTheme (systemName: string): 'empty' {
 }
 
 function IdentityIcon ({ className, onCopy, prefix, size, style, t, theme, validators, value }: Props): React.ReactElement<Props> {
-  const { systemName } = useApiContext();
+  const { systemName } = useApi();
   const { queueAction } = useContext(StatusContext);
   const [address, setAddress] = useState<string | undefined>();
   const [isValidator, setIsValidator] = useState(false);

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

@@ -11,7 +11,7 @@ import '../InputExtrinsic/InputExtrinsic.css';
 
 import React, { useState } from 'react';
 import { ApiPromise } from '@polkadot/api';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 import Labelled from '../Labelled';
 import translate from '../translate';
@@ -43,7 +43,7 @@ function getValue (api: ApiPromise, { method, section }: ConstValueBase): ConstV
 }
 
 function InputConsts ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(keyOptions(api, defaultValue.section));
   const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
   const [value, setValue] = useState<ConstValue>(getValue(api, defaultValue));

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

@@ -9,7 +9,7 @@ import { DropdownOptions } from '../util/types';
 import './InputExtrinsic.css';
 
 import React, { useState } from 'react';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 import Labelled from '../Labelled';
 import translate from '../translate';
@@ -30,7 +30,7 @@ interface Props extends I18nProps {
 }
 
 function InputExtrinsic ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(methodOptions(api, defaultValue.section));
   const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
   const [value, setValue] = useState<CallFunction>((): CallFunction => defaultValue);

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

@@ -12,7 +12,7 @@ import '../InputExtrinsic/InputExtrinsic.css';
 
 import React, { useState } from 'react';
 import map from '@polkadot/jsonrpc';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 import Labelled from '../Labelled';
 import translate from '../translate';
@@ -31,7 +31,7 @@ interface Props extends I18nProps {
 }
 
 function InputRpc ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(methodOptions(api, defaultValue.section));
   const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
   const [value, setValue] = useState<RpcMethod>((): RpcMethod => defaultValue);

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

@@ -8,7 +8,7 @@ import { StorageEntryPromise } from './types';
 
 import React from 'react';
 import { ApiPromise } from '@polkadot/api';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 import Dropdown from '../Dropdown';
 import { classes } from '../util';
@@ -29,7 +29,7 @@ function transform (api: ApiPromise, { value }: Props): (method: string) => Stor
 }
 
 export default function SelectKey (props: Props): React.ReactElement<Props> | null {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const { className, isError, onChange, options, style, value } = props;
 
   if (!options.length) {

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

@@ -11,7 +11,7 @@ import { StorageEntryPromise } from './types';
 import '../InputExtrinsic/InputExtrinsic.css';
 
 import React, { useState } from 'react';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 import Labelled from '../Labelled';
 import translate from '../translate';
@@ -30,7 +30,7 @@ interface Props extends I18nProps {
 }
 
 function InputStorage ({ className, defaultValue, help, label, onChange, style, withLabel }: Props): React.ReactElement<Props> {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(keyOptions(api, defaultValue.creator.section));
   const [optionsSection] = useState<DropdownOptions>(sectionOptions(api));
   const [value, setValue] = useState<StorageEntryPromise>((): StorageEntryPromise => defaultValue);

packages/react-components/src/LinkPolkascan.tsx

@@ -6,7 +6,7 @@ import { I18nProps } from './types';
 
 import React from 'react';
 import styled from 'styled-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 import translate from './translate';
 
@@ -34,7 +34,7 @@ const TYPES: Record<string, string> = {
 };
 
 function LinkPolkascan ({ className, data, t, type }: Props): React.ReactElement<Props> | null {
-  const { systemChain } = useApiContext();
+  const { systemChain } = useApi();
   const extChain = CHAINS[systemChain];
   const extType = TYPES[type];
 

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

@@ -6,12 +6,12 @@ import { SubmittableExtrinsicFunction } from '@polkadot/api/types';
 import { Props } from '@polkadot/react-params/types';
 
 import React from 'react';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 import Extrinsic from './Extrinsic';
 
 export default function Call ({ className, isDisabled, isError, label, onChange, onEnter, style, withLabel }: Props): React.ReactElement<Props> {
-  const { api, apiDefaultTx } = useApiContext();
+  const { api, apiDefaultTx } = useApi();
 
   const defaultValue = ((): SubmittableExtrinsicFunction<'promise'> => {
     try {

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

@@ -6,7 +6,7 @@ import { Props, RawParam } from '@polkadot/react-params/types';
 
 import React from 'react';
 import { createType } from '@polkadot/types';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 import ExtrinsicDisplay from './Extrinsic';
 
@@ -26,7 +26,7 @@ function onChange ({ onChange }: Props): (_: RawParam) => void {
 }
 
 export default function ProposalDisplay (props: Props): React.ReactElement<Props> {
-  const { apiDefaultTxSudo } = useApiContext();
+  const { apiDefaultTxSudo } = useApi();
   const { className, isDisabled, isError, label, onEnter, style, withLabel } = props;
 
   return (

packages/react-components/src/TreasuryProposal.tsx

@@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 
 import React, { useEffect, useState } from 'react';
 import { InputAddress, Labelled, Static } from '@polkadot/react-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import { Option } from '@polkadot/types';
 import { FormatBalance } from '@polkadot/react-query';
 
@@ -26,7 +26,7 @@ interface Props extends I18nProps {
 
 function TreasuryProposal ({ className, asInset, insetProps, onClick, proposal, proposalId, t }: Props): React.ReactElement<Props> | null {
   const [stateProposal, setProposal] = useState<TreasuryProposalType | null>(null);
-  const { api } = useApiContext();
+  const { api } = useApi();
 
   useEffect((): void => {
     if (!proposal && proposalId) {

packages/react-hooks/src/index.ts

@@ -6,7 +6,7 @@ export { default as trackPromise } from './track/trackPromise';
 export { default as trackStream } from './track/trackStream';
 export { default as useAccounts } from './useAccounts';
 export { default as useAddresses } from './useAddresses';
-export { default as useApiContext } from './useApiContext';
+export { default as useApi } from './useApi';
 export { default as useDebounce } from './useDebounce';
 export { default as useFavorites } from './useFavorites';
 export { default as useSessionRewards } from './useSessionRewards';

packages/react-hooks/src/useApi.tsx

@@ -7,6 +7,6 @@ import { ApiProps } from '@polkadot/react-api/types';
 import { useContext } from 'react';
 import { ApiContext } from '@polkadot/react-api';
 
-export default function useApiContext (): ApiProps {
+export default function useApi (): ApiProps {
   return useContext(ApiContext);
 }

packages/react-hooks/src/useCacheKey.ts

@@ -3,11 +3,11 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import store from 'store';
-import useApiContext from './useApiContext';
+import useApi from './useApi';
 
 // create a chain-specific key for the local cache
 export default function useCacheKey <T> (storageKeyBase: string): [(defaultValue?: T) => T | undefined, (value: T) => T] {
-  const { api, isDevelopment } = useApiContext();
+  const { api, isDevelopment } = useApi();
   const STORAGE_KEY = `${storageKeyBase}:${isDevelopment ? 'development' : api.genesisHash}`;
 
   return [

packages/react-hooks/src/useSessionRewards.tsx

@@ -11,7 +11,7 @@ import { ApiPromise } from '@polkadot/api';
 import { createType } from '@polkadot/types';
 import { bnMax, u8aToU8a } from '@polkadot/util';
 
-import useApiContext from './useApiContext';
+import useApi from './useApi';
 import useCacheKey from './useCacheKey';
 
 interface SerializedSlash {
@@ -111,7 +111,7 @@ async function loadSome (api: ApiPromise, fromHash: Hash, toHash: Hash): Promise
 }
 
 export default function useSessionRewards (maxSessions: number): SessionRewards[] {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const [getCache, setCache] = useCacheKey<Serialized[]>('hooks:sessionSlashes');
   const [filtered, setFiltered] = useState<SessionRewards[]>([]);
 

packages/react-query/src/BlockAuthors.tsx

@@ -4,7 +4,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { HeaderExtended } from '@polkadot/api-derive';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import { formatNumber } from '@polkadot/util';
 
 interface Authors {
@@ -19,13 +19,13 @@ interface Props {
   children: React.ReactNode;
 }
 
-const MAX_HEADERS = 20;
+const MAX_HEADERS = 25;
 
 const byAuthor: Record<string, string> = {};
 const BlockAuthorsContext: React.Context<Authors> = React.createContext<Authors>({ byAuthor, lastHeaders: [] });
 
 function BlockAuthors ({ children }: Props): React.ReactElement<Props> {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const [state, setState] = useState<Authors>({ byAuthor, lastHeaders: [] });
 
   useEffect((): void => {

packages/react-query/src/Chain.tsx

@@ -6,7 +6,7 @@
 import { BareProps } from '@polkadot/react-api/types';
 
 import React from 'react';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 interface Props extends BareProps {
   children?: React.ReactNode;
@@ -14,7 +14,7 @@ interface Props extends BareProps {
 }
 
 export default function Chain ({ children, className, label = '', style }: Props): React.ReactElement<Props> {
-  const { systemChain } = useApiContext();
+  const { systemChain } = useApi();
 
   return (
     <div

packages/react-query/src/Events.tsx

@@ -5,7 +5,7 @@
 import { Codec } from '@polkadot/types/types';
 
 import React, { useEffect, useState } from 'react';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import { EventRecord } from '@polkadot/types/interfaces';
 import { stringToU8a } from '@polkadot/util';
 import { xxhashAsHex } from '@polkadot/util-crypto';
@@ -21,12 +21,12 @@ interface Props {
   children: React.ReactNode;
 }
 
-const MAX_EVENTS = 20;
+const MAX_EVENTS = 25;
 
 const EventsContext: React.Context<Events> = React.createContext<Events>([]);
 
 function Events ({ children }: Props): React.ReactElement<Props> {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const [state, setState] = useState<Events>([]);
 
   useEffect((): void => {

packages/react-query/src/NodeName.tsx

@@ -6,7 +6,7 @@
 import { BareProps } from '@polkadot/react-api/types';
 
 import React from 'react';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 interface Props extends BareProps {
   children?: React.ReactNode;
@@ -14,7 +14,7 @@ interface Props extends BareProps {
 }
 
 export default function NodeName ({ children, className, label = '', style }: Props): React.ReactElement<Props> {
-  const { systemName } = useApiContext();
+  const { systemName } = useApi();
 
   return (
     <div

packages/react-query/src/NodeVersion.tsx

@@ -6,7 +6,7 @@
 import { BareProps } from '@polkadot/react-api/types';
 
 import React from 'react';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 
 interface Props extends BareProps {
   children?: React.ReactNode;
@@ -14,7 +14,7 @@ interface Props extends BareProps {
 }
 
 export default function NodeVersion ({ children, className, label = '', style }: Props): React.ReactElement<Props> {
-  const { systemVersion } = useApiContext();
+  const { systemVersion } = useApi();
 
   return (
     <div

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

@@ -13,7 +13,7 @@ import React, { useState, useEffect } from 'react';
 import { Compact, UInt } from '@polkadot/types';
 import { withCalls } from '@polkadot/react-api';
 import { Icon } from '@polkadot/react-components';
-import { useApiContext } from '@polkadot/react-hooks';
+import { useApi } from '@polkadot/react-hooks';
 import { compactToU8a, formatBalance } from '@polkadot/util';
 
 import translate from '../translate';
@@ -65,7 +65,7 @@ export const calcTxLength = (extrinsic?: IExtrinsic | null, nonce?: BN, tip?: BN
 };
 
 export function FeeDisplay ({ accountId, balances_all = ZERO_BALANCE, balances_fees = ZERO_FEES_BALANCES, className, contract_fees = ZERO_FEES_CONTRACT, extrinsic, isSendable, onChange, t, tip }: Props): React.ReactElement<Props> | null {
-  const { api } = useApiContext();
+  const { api } = useApi();
   const [state, setState] = useState<State>({
     allFees: ZERO,
     allTotal: ZERO,