Update Pioneer

pioneer/packages/apps/src/SideBar/ChainInfo.tsx

@@ -19,8 +19,8 @@ interface Props {
 
 function ChainInfo ({ className = '', onClick }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { api } = useApi();
-  const runtimeVersion = useCall<RuntimeVersion>(api.rpc.state.subscribeRuntimeVersion, []);
+  const { api, isApiReady } = useApi();
+  const runtimeVersion = useCall<RuntimeVersion>(isApiReady && api.rpc.state.subscribeRuntimeVersion, []);
 
   return (
     <div

pioneer/packages/apps/src/translate.ts

@@ -4,6 +4,6 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<['apps', 'apps-routing']> {
   return useTranslationBase(['apps', 'apps-routing']);
 }

pioneer/packages/joy-election/src/VoteForm.tsx

@@ -175,7 +175,7 @@ class Component extends React.PureComponent<Props, State> {
     this.setState({ isFormSubmitted: true });
   }
 
-  private onTxFailed: TxFailedCallback = (_txResult: SubmittableResult | null): void => {
+  private onTxFailed: TxFailedCallback = (_txResult: SubmittableResult | Error | null): void => {
     // TODO Possible UX improvement: tell a user that his vote hasn't been accepted.
   }
 

pioneer/packages/joy-forum/src/EditCategory.tsx

@@ -89,7 +89,7 @@ const InnerForm = (props: FormProps) => {
     if (isValid) sendTx();
   };
 
-  const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | null) => {
+  const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | Error | null) => {
     setSubmitting(false);
 
     if (txResult == null) {

pioneer/packages/joy-forum/src/EditReply.tsx

@@ -85,7 +85,7 @@ const InnerForm = (props: FormProps) => {
     if (isValid) sendTx();
   };
 
-  const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | null) => {
+  const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | Error | null) => {
     setSubmitting(false);
 
     if (txResult == null) {

pioneer/packages/joy-forum/src/EditThread.tsx

@@ -94,7 +94,7 @@ const InnerForm = (props: FormProps) => {
     if (isValid) sendTx();
   };
 
-  const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | null) => {
+  const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | Error | null) => {
     setSubmitting(false);
 
     if (txResult == null) {

pioneer/packages/joy-forum/src/Moderate.tsx

@@ -71,7 +71,7 @@ const InnerForm = (props: FormProps) => {
     if (isValid) sendTx();
   };
 
-  const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | null) => {
+  const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | Error | null) => {
     setSubmitting(false);
 
     if (txResult == null) {

pioneer/packages/joy-members/src/EditForm.tsx

@@ -84,7 +84,7 @@ const InnerForm = (props: FormProps) => {
     if (isValid) sendTx();
   };
 
-  const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | null) => {
+  const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | Error | null) => {
     setSubmitting(false);
 
     if (txResult == null) {

pioneer/packages/joy-proposals/src/Proposal/discussion/DiscussionPostForm.tsx

@@ -47,7 +47,7 @@ const DiscussionPostFormInner = (props: InnerProps) => {
     if (isValid) sendTx();
   };
 
-  const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | null) => {
+  const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | Error | null) => {
     setSubmitting(false);
   };
 

pioneer/packages/joy-proposals/src/forms/GenericProposalForm.tsx

@@ -151,7 +151,7 @@ export const GenericProposalForm: React.FunctionComponent<GenericFormInnerProps>
     setAfterSubmit(() => sendTx);
   };
 
-  const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | null) => {
+  const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | Error | null) => {
     setSubmitting(false);
   };
 

pioneer/packages/joy-tokenomics/src/translate.ts

@@ -4,6 +4,6 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'joy-tokenomics'> {
   return useTranslationBase('joy-tokenomics');
 }

pioneer/packages/joy-utils/src/functions/misc.ts

@@ -168,7 +168,7 @@ export function bytesToString (bytes: Bytes) {
 }
 
 // Based on: https://fettblog.eu/typescript-hasownproperty/
-export function isObjectWithProperties<X extends unknown, Y extends PropertyKey[]> (input: X, ...props: Y): input is X & Record<Y[number], unknown> {
+export function isObjectWithProperties<X, Y extends PropertyKey[]> (input: X, ...props: Y): input is X & Record<Y[number], unknown> {
   return typeof input === 'object' && input !== null && props.every((prop) => prop in input);
 }
 

pioneer/packages/joy-utils/src/react/hocs/JoyEasyForms.tsx

@@ -154,7 +154,7 @@ export function withEasyForm<OuterProps, FormValues>
         setSubmitting(false);
       };
 
-      const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | null) => {
+      const onTxFailed: TxFailedCallback = (txResult: SubmittableResult | Error | null) => {
         setSubmitting(false);
 
         if (txResult === null) {

pioneer/packages/joy-utils/src/transport/base.ts

@@ -1,14 +1,15 @@
 import { ApiPromise } from '@polkadot/api';
 import { UInt } from '@polkadot/types/codec';
-import { Codec, CodecArg } from '@polkadot/types/types';
+import { Codec } from '@polkadot/types/types';
 import { QueryableStorageEntry } from '@polkadot/api/types/storage';
 import { APIQueryCache } from './APIQueryCache';
 
 export async function entriesByIds<IDType extends UInt, ValueType extends Codec> (
   apiMethod: QueryableStorageEntry<'promise'>,
-  firstKey?: CodecArg // First key in case of double maps
+  firstKey?: unknown // First key in case of double maps
 ): Promise<[IDType, ValueType][]> {
-  const entries: [IDType, ValueType][] = (await apiMethod.entries<ValueType>(firstKey))
+  const storageEntries = firstKey ? await apiMethod.entries<ValueType>(firstKey) : await apiMethod.entries<ValueType>();
+  const entries: [IDType, ValueType][] = storageEntries
     .map(([storageKey, value]) => ([
       // If double-map (first key is provided), we map entries by second key
       storageKey.args[firstKey !== undefined ? 1 : 0] as IDType,

pioneer/packages/joy-utils/src/transport/proposals.ts

@@ -19,6 +19,7 @@ import { ThreadId, PostId } from '@joystream/types/common';
 import { Proposal, ProposalId, VoteKind, DiscussionThread, DiscussionPost, ProposalDetails, ProposalStatus } from '@joystream/types/proposals';
 import { MemberId } from '@joystream/types/members';
 import { u32, Bytes, Null } from '@polkadot/types/';
+import { Callback, Codec } from '@polkadot/types/types';
 import { BalanceOf } from '@polkadot/types/interfaces';
 
 import { bytesToString } from '../functions/misc';
@@ -26,6 +27,7 @@ import _ from 'lodash';
 import { metadata as proposalsConsts, apiMethods as proposalsApiMethods } from '../consts/proposals';
 
 import { ApiPromise } from '@polkadot/api';
+import { UnsubscribePromise } from '@polkadot/api/types';
 import MembersTransport from './members';
 import ChainTransport from './chain';
 import CouncilTransport from './council';
@@ -247,8 +249,8 @@ export default class ProposalsTransport extends BaseTransport {
     return Promise.all(ProposalTypes.map((type) => this.parametersFromProposalType(type)));
   }
 
-  async subscribeProposal (id: number|ProposalId, callback: () => void) {
-    return this.api.query.proposalsEngine.proposals(id, callback);
+  async subscribeProposal (id: number|ProposalId, callback: Callback<Proposal>): UnsubscribePromise {
+    return (this.api.query.proposalsEngine.proposals as { <T extends Codec>(arg: unknown, callback: Callback<T>): UnsubscribePromise })<Proposal>(id, callback);
   }
 
   async discussion (id: number|ProposalId): Promise<ParsedDiscussion | null> {

pioneer/packages/page-accounts/src/Accounts/Account.tsx

@@ -18,7 +18,7 @@ import { AddressInfo, AddressMini, AddressSmall, Badge, Button, CryptoType, Forg
 import { useAccountInfo, useApi, useCall, useToggle } from '@polkadot/react-hooks';
 import { Option } from '@polkadot/types';
 import keyring from '@polkadot/ui-keyring';
-import { BN_ZERO, formatBalance, formatNumber } from '@polkadot/util';
+import { BN_ZERO, formatBalance, formatNumber, isFunction } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import { createMenuGroup } from '../util';
@@ -361,9 +361,9 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         )}
       </td>
       <td className='address ui--media-1400'>
-        {meta.parentAddress && (
+        {meta.parentAddress ? (
           <AddressMini value={meta.parentAddress} />
-        )}
+        ) : ''}
       </td>
       <td className='number'>
         <CryptoType accountId={address} />
@@ -407,7 +407,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
             vertical
           >
             {createMenuGroup([
-              api.api.tx.identity?.setIdentity && (
+              isFunction(api.api.tx.identity?.setIdentity) && (
                 <Menu.Item
                   key='identityMain'
                   onClick={toggleIdentityMain}
@@ -415,7 +415,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                   {t('Set on-chain identity')}
                 </Menu.Item>
               ),
-              api.api.tx.identity?.setSubs && identity?.display && (
+              isFunction(api.api.tx.identity?.setSubs) && identity?.display && (
                 <Menu.Item
                   key='identitySub'
                   onClick={toggleIdentitySub}
@@ -423,7 +423,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                   {t('Set on-chain sub-identities')}
                 </Menu.Item>
               ),
-              api.api.tx.democracy?.unlock && democracyUnlockTx && (
+              isFunction(api.api.tx.democracy?.unlock) && democracyUnlockTx && (
                 <Menu.Item
                   key='clearDemocracy'
                   onClick={_clearDemocracyLocks}
@@ -431,7 +431,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                   {t('Clear expired democracy locks')}
                 </Menu.Item>
               ),
-              api.api.tx.vesting?.vest && vestingVestTx && (
+              isFunction(api.api.tx.vesting?.vest) && vestingVestTx && (
                 <Menu.Item
                   key='vestingVest'
                   onClick={_vestingVest}
@@ -484,7 +484,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                 </Menu.Item>
               )
             ])}
-            {api.api.tx.recovery?.createRecovery && createMenuGroup([
+            {isFunction(api.api.tx.recovery?.createRecovery) && createMenuGroup([
               !recoveryInfo && (
                 <Menu.Item
                   key='makeRecoverable'
@@ -500,7 +500,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                 {t('Initiate recovery for another')}
               </Menu.Item>
             ])}
-            {api.api.tx.multisig?.asMulti && isMultisig && createMenuGroup([
+            { isFunction(api.api.tx.multisig?.asMulti) && isMultisig && createMenuGroup([
               <Menu.Item
                 disabled={!multiInfos || !multiInfos.length}
                 key='multisigApprovals'
@@ -509,7 +509,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                 {t('Multisig approvals')}
               </Menu.Item>
             ])}
-            {api.api.query.democracy?.votingOf && delegation?.accountDelegated && createMenuGroup([
+            { isFunction(api.api.query.democracy?.votingOf) && delegation?.accountDelegated && createMenuGroup([
               <Menu.Item
                 key='changeDelegate'
                 onClick={toggleDelegate}
@@ -523,7 +523,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                 {t('Undelegate')}
               </Menu.Item>
             ])}
-            {api.api.query.democracy?.votingOf && !delegation?.accountDelegated && createMenuGroup([
+            {isFunction(api.api.query.democracy?.votingOf) && !delegation?.accountDelegated && createMenuGroup([
               <Menu.Item
                 key='delegate'
                 onClick={toggleDelegate}

pioneer/packages/page-accounts/src/Accounts/index.tsx

@@ -14,7 +14,7 @@ import { getLedger, isLedger } from '@polkadot/react-api';
 import { useApi, useAccounts, useCall, useFavorites, useIpfs, useToggle } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { Button, Input, Table } from '@polkadot/react-components';
-import { BN_ZERO } from '@polkadot/util';
+import { BN_ZERO, isFunction } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import CreateModal from './modals/Create';
@@ -81,7 +81,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
   }, [allAccounts, favorites]);
 
   useEffect(() => {
-    if (api.query.democracy?.votingOf && !delegations?.length) {
+    if (isFunction(api.query.democracy?.votingOf) && !delegations?.length) {
       return;
     }
 

pioneer/packages/page-accounts/src/Contacts/Address.tsx

@@ -11,7 +11,7 @@ import styled from 'styled-components';
 import { AddressSmall, AddressInfo, Button, ChainLock, Icon, LinkExternal, Forget, Menu, Popup, Tags } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
-import { BN_ZERO, formatNumber } from '@polkadot/util';
+import { BN_ZERO, formatNumber, isFunction } from '@polkadot/util';
 
 import Transfer from '../Accounts/modals/Transfer';
 import { useTranslation } from '../translate';
@@ -58,7 +58,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
   useEffect((): void => {
     const { identity, nickname } = info || {};
 
-    if (api.api.query.identity && api.api.query.identity.identityOf) {
+    if (api.api.query.identity && isFunction(api.api.query.identity.identityOf)) {
       if (identity?.display) {
         setAccName(identity.display);
       }

pioneer/packages/page-accounts/src/translate.ts

@@ -4,6 +4,6 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'app-accounts'> {
   return useTranslationBase('app-accounts');
 }

pioneer/packages/page-dashboard/src/translate.ts

@@ -4,6 +4,6 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'app-dashboard'> {
   return useTranslationBase('app-dashboard');
 }

pioneer/packages/page-explorer/src/translate.ts

@@ -4,6 +4,6 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'app-explorer'> {
   return useTranslationBase('app-explorer');
 }

pioneer/packages/page-extrinsics/src/translate.ts

@@ -4,6 +4,6 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'app-extrinsics'> {
   return useTranslationBase('app-extrinsics');
 }

pioneer/packages/page-generic-asset/src/translate.ts

@@ -4,7 +4,7 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse, withTranslation } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'app-generic-asset'> {
   return useTranslationBase('app-generic-asset');
 }
 

pioneer/packages/page-js/src/snippets/storage-examples.ts

@@ -53,7 +53,7 @@ api.query.system.events((events) => {
     const types = event.typeDef;
     // show what we are busy with
     console.log(event.section + ':' + event.method + '::' + 'phase=' + phase.toString());
-    console.log(event.meta.documentation.toString());
+    console.log(event.meta.docs.toString());
     // loop through each of the parameters, displaying the type and data
     event.data.forEach((data, index) => {
       console.log(types[index].type + ';' + data.toString());

pioneer/packages/page-js/src/translate.ts

@@ -4,6 +4,6 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'app-js'> {
   return useTranslationBase('app-js');
 }

pioneer/packages/page-poll/src/translate.ts

@@ -4,6 +4,6 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'app-poll'> {
   return useTranslationBase('app-poll');
 }

pioneer/packages/page-settings/src/translate.ts

@@ -4,6 +4,6 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'app-settings'> {
   return useTranslationBase('app-settings');
 }

pioneer/packages/page-society/src/translate.ts

@@ -4,6 +4,6 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'app-society'> {
   return useTranslationBase('app-society');
 }

pioneer/packages/page-staking/src/Payouts/index.tsx

@@ -184,7 +184,7 @@ function Payouts ({ className = '', isInElection }: Props): React.ReactElement<P
 
   return (
     <div className={className}>
-      {api.tx.staking.payoutStakers && (
+      {isFunction(api.tx.staking.payoutStakers) && (
         <Button.Group>
           <PayToggle
             onChange={setEraSelectionIndex}
@@ -215,7 +215,7 @@ function Payouts ({ className = '', isInElection }: Props): React.ReactElement<P
           />
         ))}
       </Table>
-      {api.tx.staking.payoutStakers && !isLoadingRewards && validators && (validators.length !== 0) && (
+      {isFunction(api.tx.staking.payoutStakers) && !isLoadingRewards && validators && (validators.length !== 0) && (
         <Table
           header={headerValidators}
           isFixed

pioneer/packages/page-staking/src/Targets/Validator.tsx

@@ -10,7 +10,7 @@ import { ApiPromise } from '@polkadot/api';
 import { AddressSmall, Badge, Checkbox, Icon } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 import { useApi, useCall } from '@polkadot/react-hooks';
-import { formatNumber } from '@polkadot/util';
+import { formatNumber, isFunction } from '@polkadot/util';
 import keyring from '@polkadot/ui-keyring';
 
 import MaxBadge from '../MaxBadge';
@@ -34,7 +34,7 @@ function checkIdentity (api: ApiPromise, accountInfo: DeriveAccountInfo): boolea
 
   const { accountId, identity, nickname } = accountInfo;
 
-  if (api.query.identity && api.query.identity.identityOf) {
+  if (api.query.identity && isFunction(api.query.identity.identityOf)) {
     hasIdentity = !!(identity?.display && identity.display.toString());
   } else if (nickname) {
     hasIdentity = !!nickname.toString();

pioneer/packages/page-staking/src/translate.ts

@@ -4,6 +4,6 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'app-staking'> {
   return useTranslationBase('app-staking');
 }

pioneer/packages/page-staking/src/util.ts

@@ -5,6 +5,7 @@
 import { DeriveAccountInfo } from '@polkadot/api-derive/types';
 
 import { ApiPromise } from '@polkadot/api';
+import { isFunction } from '@polkadot/util';
 import keyring from '@polkadot/ui-keyring';
 
 export function checkVisibility (api: ApiPromise, address: string, filterName: string, withIdentity: boolean, accountInfo?: DeriveAccountInfo): boolean {
@@ -17,7 +18,7 @@ export function checkVisibility (api: ApiPromise, address: string, filterName: s
 
       if (!withIdentity && (accountId?.toString().includes(filterName) || accountIndex?.toString().includes(filterName))) {
         isVisible = true;
-      } else if (api.query.identity && api.query.identity.identityOf) {
+      } else if (api.query.identity && isFunction(api.query.identity.identityOf)) {
         isVisible = (!!identity?.display && identity.display.toLowerCase().includes(filterLower)) ||
           (!!identity?.displayParent && identity.displayParent.toLowerCase().includes(filterLower));
       } else if (nickname) {

pioneer/packages/page-storage/src/Query.tsx

@@ -15,6 +15,7 @@ import { withCallDiv } from '@polkadot/react-api/hoc';
 import valueToText from '@polkadot/react-params/valueToText';
 import { Option, Raw } from '@polkadot/types';
 import { isU8a, u8aToHex, u8aToString, compactStripLength } from '@polkadot/util';
+import { registry } from '@joystream/types';
 
 interface Props {
   className?: string;
@@ -52,7 +53,7 @@ function keyToName (isConst: boolean, _key: Uint8Array | QueryableStorageEntry<'
 }
 
 function typeToString ({ creator: { meta: { modifier, type } } }: QueryableStorageEntry<'promise'>): string {
-  const _type = unwrapStorageType(type);
+  const _type = unwrapStorageType(registry, type);
 
   return modifier.isOptional
     ? `Option<${_type}>`
@@ -105,22 +106,14 @@ function getCachedComponent (query: QueryTypes): CacheInstance {
             ? 1
             : 2;
 
-        if ((values.length === allCount) || (type.isMap && type.asMap.linked.isTrue)) {
-          // render function to create an element for the query results which is plugged to the api
-          renderHelper = withCallDiv('subscribe', {
-            paramName: 'params',
-            paramValid: true,
-            params: [key, ...values],
-            withIndicator: true
-          });
-        } else {
-          renderHelper = withCallDiv('subscribe', {
-            paramName: 'params',
-            paramValid: true,
-            params: [key.entries, ...values],
-            withIndicator: true
-          });
-        }
+        renderHelper = withCallDiv('subscribe', {
+          paramName: 'params',
+          paramValid: true,
+          params: values.length === allCount
+            ? [key, ...values]
+            : [key.entries, ...values],
+          withIndicator: true
+        });
       }
 
       type = key.creator && key.creator.meta

pioneer/packages/page-storage/src/Selection/Consts.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 { ConstantCodec } from '@polkadot/metadata/decorate/types';
+import { ConstantCodec } from '@polkadot/types/metadata/decorate/types';
 import { ConstValue } from '@polkadot/react-components/InputConsts/types';
 import { ComponentProps as Props } from '../types';
 
@@ -40,7 +40,7 @@ function Consts ({ onAdd }: Props): React.ReactElement<Props> {
       <div className='storage--actionrow-value'>
         <InputConsts
           defaultValue={defaultValue}
-          help={meta?.documentation.join(' ')}
+          help={meta?.docs.join(' ')}
           label={t<string>('selected constant query')}
           onChange={setValue}
         />

pioneer/packages/page-storage/src/Selection/Modules.tsx

@@ -142,7 +142,7 @@ function Modules ({ onAdd }: Props): React.ReactElement<Props> {
       <div className='storage--actionrow-value'>
         <InputStorage
           defaultValue={api.query.timestamp.now}
-          help={meta?.documentation.join(' ')}
+          help={meta?.docs.join(' ')}
           label={t<string>('selected state query')}
           onChange={_onChangeKey}
         />

pioneer/packages/page-storage/src/translate.ts

@@ -4,6 +4,6 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'app-storage'> {
   return useTranslationBase('app-storage');
 }

pioneer/packages/page-sudo/src/Sudo.tsx

@@ -9,7 +9,7 @@ import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 import { Button, Icon, Extrinsic, Toggle, TxButton, InputNumber } from '@polkadot/react-components';
 import { useApi, useToggle } from '@polkadot/react-hooks';
-import { BN_ZERO } from '@polkadot/util';
+import { BN_ZERO, isFunction } from '@polkadot/util';
 
 import { useTranslation } from './translate';
 
@@ -56,7 +56,7 @@ function Sudo ({ className, isMine, sudoKey }: Props): React.ReactElement<Props>
             value={weight}
           />
         )}
-        {api.tx.sudo.sudoUncheckedWeight && (
+        {isFunction(api.tx.sudo.sudoUncheckedWeight) && (
           <Toggle
             className='sudoToggle'
             label={

pioneer/packages/page-sudo/src/translate.ts

@@ -4,6 +4,6 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'app-sudo'> {
   return useTranslationBase('app-sudo');
 }

pioneer/packages/page-toolbox/src/translate.ts

@@ -4,6 +4,6 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'app-toolbox'> {
   return useTranslationBase('app-toolbox');
 }

pioneer/packages/react-api/src/util/intervalObservable.ts

@@ -4,12 +4,11 @@
 
 import { CallState } from '../types';
 
-import { Subscription } from 'rxjs';
-import { interval } from 'rxjs/observable/interval';
+import { interval, Subscription } from 'rxjs';
 
 const interval$ = interval(500);
 
-export default function intervalObservable<T, Props, State extends CallState> (that: React.Component<Props, State>): Subscription {
+export default function intervalObservable<Props, State extends CallState> (that: React.Component<Props, State>): Subscription {
   return interval$.subscribe((): void => {
     const elapsed = Date.now() - ((that.state.callUpdatedAt as number) || 0);
     const callUpdated = elapsed <= 1500;

pioneer/packages/react-components/src/Expander.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from './translate';
 import Icon from './Icon';
 
 interface Meta {
-  documentation: Text[];
+  docs: Text[];
 }
 
 export interface Props {
@@ -26,11 +26,11 @@ export interface Props {
 }
 
 function formatMeta (meta?: Meta): React.ReactNode | null {
-  if (!meta || !meta.documentation.length) {
+  if (!meta || !meta.docs.length) {
     return null;
   }
 
-  const strings = meta.documentation.map((doc) => doc.toString().trim());
+  const strings = meta.docs.map((doc) => doc.toString().trim());
   const firstEmpty = strings.findIndex((doc) => !doc.length);
 
   return (

pioneer/packages/react-components/src/Extrinsic.tsx

@@ -7,7 +7,7 @@ import { RawParam } from '@polkadot/react-params/types';
 import { TypeDef } from '@polkadot/types/types';
 
 import React, { useCallback, useEffect, useState } from 'react';
-import { GenericCall, getTypeDef } from '@polkadot/types';
+import { getTypeDef } from '@polkadot/types';
 import Params from '@polkadot/react-params';
 import { isUndefined } from '@polkadot/util';
 
@@ -37,7 +37,7 @@ interface CallState {
 }
 
 function getParams ({ meta }: SubmittableExtrinsicFunction<'promise'>): { name: string; type: TypeDef }[] {
-  return GenericCall.filterOrigin(meta).map((arg): { name: string; type: TypeDef } => ({
+  return meta.args.map((arg): { name: string; type: TypeDef } => ({
     name: arg.name.toString(),
     type: getTypeDef(arg.type.toString())
   }));
@@ -65,7 +65,7 @@ function ExtrinsicDisplay ({ defaultValue, isDisabled, isError, isPrivate, label
       try {
         method = extrinsic.fn(...values.map(({ value }): any => value));
       } catch (error) {
-        onError && onError(error);
+        onError && onError(error as Error);
       }
     } else {
       onError && onError(null);
@@ -85,7 +85,7 @@ function ExtrinsicDisplay ({ defaultValue, isDisabled, isError, isPrivate, label
     <div className='extrinsics--Extrinsic'>
       <InputExtrinsic
         defaultValue={defaultValue}
-        help={meta?.documentation.join(' ')}
+        help={meta?.docs.join(' ')}
         isDisabled={isDisabled}
         isError={isError}
         isPrivate={isPrivate}

pioneer/packages/react-components/src/InputConsts/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 { ConstantCodec } from '@polkadot/metadata/decorate/types';
+import { ConstantCodec } from '@polkadot/types/metadata/decorate/types';
 import { DropdownOptions } from '../util/types';
 import { ConstValue, ConstValueBase } from './types';
 

pioneer/packages/react-components/src/InputConsts/options/key.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 { ConstantCodec } from '@polkadot/metadata/decorate/types';
+import { ConstantCodec } from '@polkadot/types/metadata/decorate/types';
 import { DropdownOptions, DropdownOption } from '../../util/types';
 
 import React from 'react';
@@ -35,7 +35,7 @@ export default function createOptions (api: ApiPromise, sectionName: string): Dr
             className='ui--DropdownLinked-Item-text'
             key={`${sectionName}_${value}:text`}
           >
-            {(method.meta.documentation[0] || method.meta.name).toString()}
+            {(method.meta.docs[0] || method.meta.name).toString()}
           </div>
         ],
         value

pioneer/packages/react-components/src/InputExtrinsic/options/method.tsx

@@ -38,7 +38,7 @@ export default function createOptions (api: ApiPromise, sectionName: string): Dr
             className='ui--DropdownLinked-Item-text'
             key={`${sectionName}_${value}:text`}
           >
-            {(method.meta.documentation[0] || value).toString()}
+            {(method.meta.docs[0] || value).toString()}
           </div>
         ],
         value

pioneer/packages/react-components/src/InputStorage/options/key.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 
 import { ApiPromise } from '@polkadot/api';
 import { unwrapStorageType } from '@polkadot/types/primitive/StorageKey';
+import { registry } from '@joystream/types';
 
 export default function createOptions (api: ApiPromise, sectionName: string): DropdownOptions {
   const section = api.query[sectionName];
@@ -28,8 +29,8 @@ export default function createOptions (api: ApiPromise, sectionName: string): Dr
           ? `${type.asDoubleMap.key1.toString()}, ${type.asDoubleMap.key2.toString()}`
           : '';
       const output = method.meta.modifier.isOptional
-        ? `Option<${unwrapStorageType(type)}>`
-        : unwrapStorageType(type);
+        ? `Option<${unwrapStorageType(registry, type)}>`
+        : unwrapStorageType(registry, type);
 
       return {
         className: 'ui--DropdownLinked-Item',
@@ -45,7 +46,7 @@ export default function createOptions (api: ApiPromise, sectionName: string): Dr
             className='ui--DropdownLinked-Item-text'
             key={`${sectionName}_${value}:text`}
           >
-            {(method.meta.documentation[0] || method.meta.name).toString()}
+            {(method.meta.docs[0] || method.meta.name).toString()}
           </div>
         ],
         value

pioneer/packages/react-components/src/ProposedAction.tsx

@@ -54,9 +54,9 @@ function ProposedAction ({ asInset, className = '', expandNested, idNumber, inse
   const { meta, method, section } = registry.findMetaCall(proposal.callIndex);
 
   const header = `#${stringId}: ${section}.${method}`;
-  const documentation = meta?.documentation
+  const documentation = meta?.docs
     ? (
-      <summary>{meta.documentation.join(' ')}</summary>
+      <summary>{meta.docs.join(' ')}</summary>
     )
     : null;
   const params = (isTreasuryProposalVote(proposal) && expandNested)

pioneer/packages/react-components/src/Status/types.ts

@@ -27,7 +27,7 @@ export type SignerCallback = (id: number, result: SignerResult | null) => void;
 
 export type TxCallback = (status: SubmittableResult) => void;
 
-export type TxFailedCallback = (status: SubmittableResult | null) => void;
+export type TxFailedCallback = (status: Error | SubmittableResult | null) => void;
 
 export interface QueueTx extends AccountInfo {
   error?: Error;

pioneer/packages/react-components/src/TxButton.tsx

@@ -22,7 +22,7 @@ function TxButton ({ accountId, className = '', extrinsic: propsExtrinsic, icon,
   const needsAccount = !isUnsigned && !accountId;
 
   const _onFailed = useCallback(
-    (result: SubmittableResult | null): void => {
+    (result: SubmittableResult | Error | null): void => {
       setIsSending(false);
 
       onFailed && onFailed(result);

pioneer/packages/react-components/src/translate.ts

@@ -4,7 +4,7 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse, withTranslation } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'react-components'> {
   return useTranslationBase('react-components');
 }
 

pioneer/packages/react-hooks/src/translate.ts

@@ -4,7 +4,7 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse, withTranslation } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'react-hooks'> {
   return useTranslationBase('react-hooks');
 }
 

pioneer/packages/react-hooks/src/useAccountInfo.ts

@@ -9,6 +9,7 @@ import { AddressFlags, AddressIdentity, UseAccountInfo } from './types';
 
 import { useCallback, useEffect, useState } from 'react';
 import keyring from '@polkadot/ui-keyring';
+import { isFunction } from '@polkadot/util';
 
 import useAccounts from './useAccounts';
 import useAddresses from './useAddresses';
@@ -68,7 +69,7 @@ export default function useAccountInfo (value: string | null, isContract = false
 
     let name;
 
-    if (api.query.identity && api.query.identity.identityOf) {
+    if (api.query.identity && isFunction(api.query.identity.identityOf)) {
       if (identity?.display) {
         name = identity.display;
       }

pioneer/packages/react-hooks/src/useCall.ts

@@ -2,22 +2,26 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { Codec } from '@polkadot/types/types';
-import { CallOptions, CallParam, CallParams } from './types';
+import type { RpcPromiseResult } from '@polkadot/api/types';
+import type { StorageEntryTypeLatest } from '@polkadot/types/interfaces';
+import type { AnyFunction, Codec } from '@polkadot/types/types';
+import type { CallOptions, CallParam, CallParams } from './types';
+import type { MountedRef } from './useIsMountedRef';
 
 import { useEffect, useRef, useState } from 'react';
+
 import { isNull, isUndefined } from '@polkadot/util';
 
-import useIsMountedRef, { MountedRef } from './useIsMountedRef';
+import useIsMountedRef from './useIsMountedRef';
 
 type TrackFnResult = Promise<() => void>;
 
-interface TrackFn {
+export type TrackFn = RpcPromiseResult<AnyFunction> | QueryTrackFn;
+
+interface QueryTrackFn {
   (...params: CallParam[]): TrackFnResult;
   meta?: {
-    type: {
-      isDoubleMap: boolean;
-    };
+    type?: StorageEntryTypeLatest;
   };
 }
 
@@ -65,7 +69,7 @@ function subscribe <T> (mountedRef: MountedRef, tracker: TrackerRef, fn: TrackFn
 
   setTimeout((): void => {
     if (mountedRef.current) {
-      if (fn && (!fn.meta || !fn.meta.type?.isDoubleMap || validParams.length === 2)) {
+      if (fn && (!(fn as QueryTrackFn).meta?.type?.isDoubleMap || validParams.length === 2)) {
         // swap to acive mode and reset our count
         tracker.current.isActive = true;
         tracker.current.count = 0;

pioneer/packages/react-params/src/Param/Amount.tsx

@@ -8,7 +8,6 @@ import BN from 'bn.js';
 import React, { useCallback, useState } from 'react';
 import { registry } from '@polkadot/react-api';
 import { Input } from '@polkadot/react-components';
-import { ClassOf } from '@polkadot/types';
 import { bnToBn, formatNumber } from '@polkadot/util';
 
 import Bare from './Bare';
@@ -17,7 +16,7 @@ function Amount ({ className = '', defaultValue: { value }, isDisabled, isError,
   const [defaultValue] = useState(
     isDisabled
       ? (
-        value instanceof ClassOf(registry, 'AccountIndex')
+        value instanceof registry.createClass('AccountIndex')
           ? value.toString()
           : formatNumber(value as number)
       )

pioneer/packages/react-params/src/Param/DispatchError.tsx

@@ -35,10 +35,10 @@ function ErrorDisplay (props: Props): React.ReactElement<Props> {
 
     if (isModuleError(value as ModuleErrorDefault)) {
       try {
-        const { documentation, name, section } = registry.findMetaError((value as DispatchError).asModule);
+        const { docs, name, section } = registry.findMetaError((value as DispatchError).asModule);
 
         return setDetails({
-          details: documentation.join(', '),
+          details: docs.join(', '),
           type: `${section}.${name}`
         });
       } catch (error) {

pioneer/packages/react-params/src/Param/Static.tsx

@@ -23,7 +23,7 @@ interface Props {
 
 function StaticParam ({ asHex, children, className = '', defaultValue, label }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const value = defaultValue && defaultValue.value && (
+  const value = defaultValue && (defaultValue.value as string) && (
     asHex
       ? (defaultValue.value as Codec).toHex()
       : JSON.stringify(

pioneer/packages/react-params/src/Param/VoteThreshold.tsx

@@ -5,7 +5,6 @@
 import { Props } from '../types';
 
 import React, { useCallback } from 'react';
-import { ClassOf } from '@polkadot/types';
 import { registry } from '@polkadot/react-api';
 import { Dropdown } from '@polkadot/react-components';
 import { bnToBn } from '@polkadot/util';
@@ -36,7 +35,7 @@ function VoteThresholdParam ({ className = '', defaultValue: { value }, isDisabl
     [onChange]
   );
 
-  const defaultValue = value instanceof ClassOf(registry, 'VoteThreshold')
+  const defaultValue = value instanceof registry.createClass('VoteThreshold')
     ? value.toNumber()
     : bnToBn(value as number).toNumber();
 

pioneer/packages/react-params/src/Param/index.tsx

@@ -11,6 +11,7 @@ import { isUndefined } from '@polkadot/util';
 
 import findComponent from './findComponent';
 import Static from './Static';
+import { registry } from '@joystream/types';
 
 function Param ({ className = '', defaultValue, isDisabled, isInOption, isOptional, name, onChange, onEnter, onEscape, overrides, type }: Props): React.ReactElement<Props> | null {
   const compRef = useRef<React.ComponentType<CProps> | null>(findComponent(type, overrides));
@@ -20,8 +21,8 @@ function Param ({ className = '', defaultValue, isDisabled, isInOption, isOption
   }
 
   const label = isUndefined(name)
-    ? encodeTypeDef(type)
-    : `${name}: ${encodeTypeDef(type)}`;
+    ? encodeTypeDef(registry, type)
+    : `${name}: ${encodeTypeDef(registry, type)}`;
 
   return isOptional
     ? (

pioneer/packages/react-params/src/translate.ts

@@ -4,7 +4,7 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse, withTranslation } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'react-params'> {
   return useTranslationBase('react-params');
 }
 

pioneer/packages/react-query/src/translate.ts

@@ -4,7 +4,7 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse, withTranslation } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'react-query'> {
   return useTranslationBase('react-query');
 }
 

pioneer/packages/react-signer/src/TxSigned.tsx

@@ -76,7 +76,7 @@ async function signAndSend (queueSetTxStatus: QueueTxMessageSetStatus, currentIt
     }));
   } catch (error) {
     console.error('signAndSend: error:', error);
-    queueSetTxStatus(currentItem.id, 'error', {}, error);
+    queueSetTxStatus(currentItem.id, 'error', {}, error as Error);
 
     currentItem.txFailedCb && currentItem.txFailedCb(null);
   }
@@ -90,9 +90,9 @@ async function signAsync (queueSetTxStatus: QueueTxMessageSetStatus, { id, txFai
 
     return tx.toJSON();
   } catch (error) {
-    queueSetTxStatus(id, 'error', undefined, error);
+    queueSetTxStatus(id, 'error', undefined, error as Error);
 
-    txFailedCb(error);
+    txFailedCb(error as Error);
   }
 
   return null;

pioneer/packages/react-signer/src/TxUnsigned.tsx

@@ -29,7 +29,7 @@ async function send (queueSetTxStatus: QueueTxMessageSetStatus, currentItem: Que
     }));
   } catch (error) {
     console.error('send: error:', error);
-    queueSetTxStatus(currentItem.id, 'error', {}, error);
+    queueSetTxStatus(currentItem.id, 'error', {}, error as Error);
 
     currentItem.txFailedCb && currentItem.txFailedCb(null);
   }

pioneer/packages/react-signer/src/signers/ApiSigner.ts

@@ -9,7 +9,6 @@ import { Hash } from '@polkadot/types/interfaces';
 import { SignerPayloadJSON } from '@polkadot/types/types';
 
 import { registry } from '@polkadot/react-api';
-import { ClassOf } from '@polkadot/types';
 
 export default class ApiSigner implements Signer {
   readonly #queuePayload: QueueTxPayloadAdd;
@@ -34,7 +33,7 @@ export default class ApiSigner implements Signer {
   }
 
   public update (id: number, result: Hash | SubmittableResult): void {
-    if (result instanceof ClassOf(registry, 'Hash')) {
+    if (result instanceof registry.createClass('Hash')) {
       this.#queueSetTxStatus(id, 'sent', result.toHex());
     } else {
       this.#queueSetTxStatus(id, result.status.type.toLowerCase() as QueueTxStatus, status);

pioneer/packages/react-signer/src/translate.ts

@@ -4,7 +4,7 @@
 
 import { useTranslation as useTranslationBase, UseTranslationResponse, withTranslation } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse {
+export function useTranslation (): UseTranslationResponse<'react-signer'> {
   return useTranslationBase('react-signer');
 }