Update deps (& berry) (#4765)

* Update deps (& berry)

* linting

* Additional

* Bumps

* jest babel helpers esm

.yarnrc.yml

@@ -10,4 +10,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
     spec: "@yarnpkg/plugin-version"
 
-yarnPath: .yarn/releases/yarn-2.4.0.cjs
+yarnPath: .yarn/releases/yarn-2.4.1.cjs

jest.config.cjs

@@ -3,7 +3,7 @@
 
 const config = require('@polkadot/dev/config/jest.cjs');
 
-const findPackages = require('./scripts/findPackages');
+const findPackages = require('./scripts/findPackages.cjs');
 
 const internalModules = findPackages()
   .filter(({ name }) => !['@polkadot/apps'].includes(name))
@@ -22,9 +22,7 @@ const defaultConfig = {
     '\\.(md)$': '<rootDir>/jest/mocks/empty.js'
   },
   setupFilesAfterEnv: ['<rootDir>/jest/jest-setup.ts'],
-  transformIgnorePatterns: [
+  transformIgnorePatterns: ['/node_modules/(?!@polkadot|@babel/runtime/helpers/esm/|rxjs/_esm5)']
-    '<rootDir>/node_modules'
-  ]
 };
 
 module.exports = Object.assign({}, config, {

package.json

@@ -12,37 +12,37 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^3.11.2-3",
+    "@polkadot/api": "^4.0.1-4",
-    "@polkadot/api-contract": "^3.11.2-3",
+    "@polkadot/api-contract": "^4.0.1-4",
-    "@polkadot/hw-ledger": "^5.9.3-0",
+    "@polkadot/hw-ledger": "^6.0.1-5",
-    "@polkadot/keyring": "^5.9.3-0",
+    "@polkadot/keyring": "^6.0.1-5",
-    "@polkadot/networks": "^5.9.3-0",
+    "@polkadot/networks": "^6.0.1-5",
     "@polkadot/phishing": "^0.6.2",
-    "@polkadot/types": "^3.11.2-3",
+    "@polkadot/types": "^4.0.1-4",
-    "@polkadot/util": "^5.9.3-0",
+    "@polkadot/util": "^6.0.1-5",
-    "@polkadot/util-crypto": "^5.9.3-0",
+    "@polkadot/util-crypto": "^6.0.1-5",
-    "@polkadot/wasm-crypto": "^3.2.4",
+    "@polkadot/wasm-crypto": "^4.0.1-5",
-    "@polkadot/x-rxjs": "^5.9.3-0",
+    "@polkadot/x-rxjs": "^6.0.1-5",
     "babel-core": "^7.0.0-bridge.0",
     "styled-components": "^5.2.0",
-    "typescript": "^4.1.5"
+    "typescript": "^4.2.2"
   },
   "scripts": {
     "analyze": "yarn clean && BUILD_ANALYZE=1 yarn run build:code && yarn source-map-explorer packages/apps/build/main.*.js",
     "build": "yarn run build:i18n && yarn run build:code",
     "build:code": "NODE_ENV=production yarn polkadot-dev-build-ts",
-    "build:i18n": "i18next-scanner --config i18next-scanner.config.js && node ./scripts/i18nSort.js",
+    "build:i18n": "i18next-scanner --config i18next-scanner.config.js && node ./scripts/i18nSort.cjs",
     "build:release:electron": "yarn build && yarn build:electron && yarn postinstall:electron",
-    "build:release:ipfs": "node scripts/ipfsUpload.js",
+    "build:release:ipfs": "node scripts/ipfsUpload.cjs",
     "build:release:ghpages": "yarn polkadot-ci-ghact-docs",
     "build:release:www": "yarn polkadot-ci-ghact-build && yarn build:release:ipfs && yarn build:release:ghpages",
-    "build:robohash": "node scripts/robohash.js",
+    "build:robohash": "node scripts/robohash.cjs",
-    "build:www": "rm -rf packages/apps/build && mkdir -p packages/apps/build && yarn run build:i18n && cd packages/apps && yarn webpack --config webpack.config.js",
+    "build:www": "rm -rf packages/apps/build && mkdir -p packages/apps/build && yarn run build:i18n && cd packages/apps && yarn webpack --config webpack.config.cjs",
     "build:electron": "yarn clean:electronBuild && yarn build:electronMain && yarn build:electronRenderer",
-    "build:devElectronRenderer": "cd packages/apps-electron && yarn webpack --config webpack.renderer.js",
+    "build:devElectronRenderer": "cd packages/apps-electron && yarn webpack --config webpack.renderer.cjs",
-    "build:electronRenderer": "cd packages/apps-electron && NODE_ENV=production yarn webpack --config webpack.renderer.js",
+    "build:electronRenderer": "cd packages/apps-electron && NODE_ENV=production yarn webpack --config webpack.renderer.cjs",
-    "build:devElectronMain": "cd packages/apps-electron && yarn webpack --config webpack.main.js",
+    "build:devElectronMain": "cd packages/apps-electron && yarn webpack --config webpack.main.cjs",
-    "build:electronMain": "cd packages/apps-electron && NODE_ENV=production yarn webpack --config webpack.main.js",
+    "build:electronMain": "cd packages/apps-electron && NODE_ENV=production yarn webpack --config webpack.main.cjs",
     "packElectron:test": "yarn build:release:electron && electron-builder --dir",
     "packElectron:mac": "yarn build:release:electron && electron-builder build --mac",
     "packElectron:win": "yarn build:release:electron && electron-builder build --win",
@@ -60,7 +60,7 @@
     "test": "polkadot-dev-run-test --selectProjects=fast-tests --silent --testPathIgnorePatterns slow --testNamePattern='^((?!--SLOW--).)*$'",
     "test:all": "polkadot-dev-run-test --selectProjects=all-tests --silent",
     "test:one": "polkadot-dev-run-test",
-    "start": "yarn clean && cd packages/apps && yarn webpack-cli serve --config webpack.serve.js --port 3000",
+    "start": "yarn clean && cd packages/apps && yarn webpack-cli serve --config webpack.serve.cjs --port 3000",
     "start:electron": "yarn clean:electronBuild && concurrently 'yarn build:devElectronMain && cd packages/apps-electron && electron ./build/electron.js' 'yarn build:devElectronRenderer'"
   },
   "devDependencies": {
@@ -68,8 +68,8 @@
     "@babel/register": "^7.13.8",
     "@babel/runtime": "^7.13.9",
     "@pinata/sdk": "^1.1.13",
-    "@polkadot/dev": "^0.61.31",
+    "@polkadot/dev": "^0.62.5",
-    "@polkadot/ts": "^0.3.60",
+    "@polkadot/ts": "^0.3.61",
     "@types/bn.js": "^4.11.6",
     "@types/chart.js": "^2.9.31",
     "@types/file-saver": "^2.0.1",

packages/apps-config/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@polkadot/apps-config",
   "version": "0.82.2-6",
+  "type": "module",
   "main": "index.js",
   "sideEffects": true,
   "repository": "github:polkadot-js/apps",
@@ -15,9 +16,9 @@
     "@edgeware/node-types": "^3.3.2",
     "@interlay/polkabtc-types": "^0.5.2",
     "@laminar/type-definitions": "^0.3.1",
-    "@polkadot/networks": "^5.9.3-0",
+    "@polkadot/networks": "^6.0.1-5",
     "@snowfork/snowbridge-types": "^0.2.3",
-    "@sora-substrate/type-definitions": "^0.4.9",
+    "@sora-substrate/type-definitions": "^0.4.10",
     "@subsocial/types": "^0.4.33-w3f-grant2",
     "moonbeam-types-bundle": "1.1.6"
   },

packages/apps-electron/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@babel/core": "^7.13.8",
     "@babel/polyfill": "^7.12.1",
-    "@polkadot/dev": "^0.61.31",
+    "@polkadot/dev": "^0.62.5",
     "@polkadot/react-components": "^0.82.2-6",
     "electron-log": "^4.3.1",
     "electron-updater": "^4.3.7"

packages/apps-electron/webpack.renderer.cjs

@@ -8,7 +8,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const { merge } = require('webpack-merge');
 
-const baseConfig = require('../apps/webpack.base.js');
+const baseConfig = require('../apps/webpack.base.cjs');
 
 const context = __dirname;
 

packages/apps/package.json

@@ -16,7 +16,7 @@
     "@babel/runtime": "^7.13.9",
     "@polkadot/apps-config": "^0.82.2-6",
     "@polkadot/apps-routing": "^0.82.2-6",
-    "@polkadot/dev": "^0.61.31",
+    "@polkadot/dev": "^0.62.5",
     "@polkadot/react-api": "^0.82.2-6",
     "@polkadot/react-components": "^0.82.2-6",
     "@polkadot/react-hooks": "^0.82.2-6",

packages/apps/webpack.base.cjs

@@ -9,7 +9,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const webpack = require('webpack');
 
-const findPackages = require('../../scripts/findPackages');
+const findPackages = require('../../scripts/findPackages.cjs');
 
 function mapChunks (name, regs, inc) {
   return regs.reduce((result, test, index) => ({

packages/apps/webpack.config.cjs

@@ -6,7 +6,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const { merge } = require('webpack-merge');
 
-const baseConfig = require('./webpack.base.js');
+const baseConfig = require('./webpack.base.cjs');
 
 const context = __dirname;
 const hasPublic = fs.existsSync(path.join(context, 'public'));

packages/apps/webpack.serve.cjs

@@ -6,7 +6,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
 
-const baseConfig = require('./webpack.base.js');
+const baseConfig = require('./webpack.base.cjs');
 
 module.exports = merge(
   baseConfig(__dirname, 'development'),

packages/page-accounts/package.json

@@ -12,7 +12,7 @@
     "@babel/runtime": "^7.13.9",
     "@polkadot/phishing": "^0.6.2",
     "@polkadot/react-components": "^0.82.2-6",
-    "@polkadot/vanitygen": "^0.30.1",
+    "@polkadot/vanitygen": "^0.30.2-1",
     "detect-browser": "^5.2.0",
     "file-saver": "^2.0.5"
   },

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

@@ -19,7 +19,7 @@ import { ApiPromise } from '@polkadot/api';
 import { AddressInfo, AddressMini, AddressSmall, Badge, Button, ChainLock, CryptoType, Forget, Icon, IdentityIcon, LinkExternal, Menu, Popup, StatusContext, Tags } from '@polkadot/react-components';
 import { useAccountInfo, useApi, useCall, useLedger, useToggle } from '@polkadot/react-hooks';
 import { keyring } from '@polkadot/ui-keyring';
-import { BN_ZERO, formatBalance, formatNumber } from '@polkadot/util';
+import { BN_ZERO, formatBalance, formatNumber, isFunction } from '@polkadot/util';
 
 import Backup from '../modals/Backup';
 import ChangePass from '../modals/ChangePass';
@@ -209,7 +209,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
 
   const menuItems = useMemo(() => [
     createMenuGroup([
-      api.api.tx.identity?.setIdentity && !isHardware && (
+      isFunction(api.api.tx.identity?.setIdentity) && !isHardware && (
         <Menu.Item
           key='identityMain'
           onClick={toggleIdentityMain}
@@ -217,7 +217,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
           {t('Set on-chain identity')}
         </Menu.Item>
       ),
-      api.api.tx.identity?.setSubs && identity?.display && !isHardware && (
+      isFunction(api.api.tx.identity?.setSubs) && identity?.display && !isHardware && (
         <Menu.Item
           key='identitySub'
           onClick={toggleIdentitySub}
@@ -225,7 +225,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}
@@ -233,7 +233,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}
@@ -286,7 +286,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'
@@ -302,7 +302,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'
@@ -311,7 +311,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}
@@ -325,7 +325,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}
@@ -333,7 +333,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         {t('Delegate democracy votes')}
       </Menu.Item>
     ]),
-    api.api.query.proxy?.proxies && createMenuGroup([
+    isFunction(api.api.query.proxy?.proxies) && createMenuGroup([
       <Menu.Item
         key='proxy-overview'
         onClick={toggleProxyOverview}
@@ -590,7 +590,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         />
       </td>
       <td className='button'>
-        {api.api.tx.balances?.transfer && (
+        {isFunction(api.api.tx.balances?.transfer) && (
           <Button
             icon='paper-plane'
             label={t<string>('send')}

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

@@ -182,7 +182,7 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send
                   </>
                 )
               }
-              {api.tx.balances.transferKeepAlive && (
+              {isFunction(api.tx.balances.transferKeepAlive) && (
                 <Toggle
                   className='typeToggle'
                   label={

packages/page-addresses/src/Contacts/Address.tsx

@@ -13,7 +13,7 @@ import Transfer from '@polkadot/app-accounts/modals/Transfer';
 import { AddressInfo, AddressSmall, Button, ChainLock, Forget, Icon, LinkExternal, 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 { useTranslation } from '../translate';
 
@@ -60,7 +60,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 (isFunction(api.api.query.identity?.identityOf)) {
       if (identity?.display) {
         setAccName(identity.display);
       }
@@ -197,7 +197,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
         />
       </td>
       <td className='button'>
-        {api.api.tx.balances?.transfer && (
+        {isFunction(api.api.tx.balances?.transfer) && (
           <Button
             icon='paper-plane'
             key='send'

packages/page-calendar/src/DayItem.tsx

@@ -18,7 +18,12 @@ interface Props {
   item: EntryInfoTyped;
 }
 
-const options = { day: 'numeric', month: 'long', weekday: 'long', year: 'numeric' };
+const FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {
+  day: 'numeric',
+  month: 'long',
+  weekday: 'long',
+  year: 'numeric'
+};
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function assertUnreachable (x: never): never {
@@ -160,7 +165,7 @@ function DayItem ({ className, item: { date, info, type }, showAllEvents }: Prop
   return (
     <div className={className}>
       {showAllEvents &&
-        <div className='itemDate'>{date.toLocaleString(undefined, options)}</div>
+        <div className='itemDate'>{date.toLocaleString(undefined, FORMAT_OPTIONS)}</div>
       }
       <div className='itemTime'>{date.toLocaleTimeString().split(':').slice(0, 2).join(':')}</div>
       {desc}

packages/page-contracts/package.json

@@ -10,6 +10,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.13.9",
-    "@polkadot/api-contract": "^3.11.2-3"
+    "@polkadot/api-contract": "^4.0.1-4"
   }
 }

packages/page-staking/src/Actions/Account/ListNominees.tsx

@@ -8,6 +8,7 @@ import React, { useMemo } from 'react';
 
 import { AddressMini, Expander, MarkWarning } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
+import { isFunction } from '@polkadot/util';
 
 import { useTranslation } from '../../translate';
 import useInactives from '../useInactives';
@@ -68,7 +69,7 @@ function ListNominees ({ nominating, stashId }: Props): React.ReactElement<Props
   const { api } = useApi();
   const { nomsActive, nomsChilled, nomsInactive, nomsOver, nomsWaiting } = useInactives(stashId, nominating);
   const sessionInfo = useCall<DeriveSessionIndexes>(api.query.staking && api.derive.session?.indexes);
-  const eraExposure = useCall<DeriveEraExposure>(api.query.staking.erasStakers && api.derive.staking.eraExposure, [sessionInfo?.activeEra]);
+  const eraExposure = useCall<DeriveEraExposure>(isFunction(api.query.staking.erasStakers) && api.derive.staking.eraExposure, [sessionInfo?.activeEra]);
   const [renActive, renChilled, renInactive, renOver, renWaiting] = useMemo(
     () => [renderNominators(stashId, nomsActive, eraExposure), renderNominators(stashId, nomsChilled), renderNominators(stashId, nomsInactive), renderNominators(stashId, nomsOver), renderNominators(stashId, nomsWaiting)],
     [eraExposure, nomsActive, nomsChilled, nomsInactive, nomsOver, nomsWaiting, stashId]

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

@@ -15,7 +15,7 @@ import styled from 'styled-components';
 import { ApiPromise } from '@polkadot/api';
 import { AddressInfo, AddressMini, AddressSmall, Badge, Button, Menu, Popup, StakingBonded, StakingRedeemable, StakingUnbonding, StatusContext, TxButton } from '@polkadot/react-components';
 import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
-import { formatNumber } from '@polkadot/util';
+import { formatNumber, isFunction } from '@polkadot/util';
 
 import { useTranslation } from '../../translate';
 import BondExtra from './BondExtra';
@@ -324,7 +324,7 @@ function Account ({ allSlashes, className = '', info: { controllerId, destinatio
                     >
                       {t<string>('Change validator preferences')}
                     </Menu.Item>
-                    {api.tx.staking.kick && (
+                    {isFunction(api.tx.staking.kick) && (
                       <Menu.Item
                         disabled={!isOwnController}
                         onClick={toggleKick}

packages/page-staking/src/Actions/partials/Validate.tsx

@@ -8,7 +8,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { Dropdown, InputAddress, InputNumber, Modal } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
-import { BN_HUNDRED as MAX_COMM } from '@polkadot/util';
+import { BN_HUNDRED as MAX_COMM, isFunction } from '@polkadot/util';
 
 import { useTranslation } from '../../translate';
 
@@ -90,7 +90,7 @@ function Validate ({ className = '', controllerId, onChange, stashId, withSender
           <p>{t<string>('The commission is deducted from all rewards before the remainder is split with nominators.')}</p>
         </Modal.Column>
       </Modal.Columns>
-      {api.tx.staking.kick && (
+      {isFunction(api.tx.staking.kick) && (
         <Modal.Columns>
           <Modal.Column>
             <Dropdown

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

@@ -154,7 +154,7 @@ function Payouts ({ className = '', isInElection, ownValidators }: Props): React
   const { t } = useTranslation();
   const { api } = useApi();
   const [hasOwnValidators] = useState(() => ownValidators.length !== 0);
-  const [myStashesIndex, setMyStashesIndex] = useState(() => (api.tx.staking.payoutStakers && hasOwnValidators) ? 0 : 1);
+  const [myStashesIndex, setMyStashesIndex] = useState(() => (isFunction(api.tx.staking.payoutStakers) && hasOwnValidators) ? 0 : 1);
   const [eraSelectionIndex, setEraSelectionIndex] = useState(0);
   const eraLength = useCall<BN>(api.derive.session.eraLength);
   const historyDepth = useCall<BN>(api.query.staking.historyDepth);
@@ -204,9 +204,11 @@ function Payouts ({ className = '', isInElection, ownValidators }: Props): React
     </tr>
   ), [stashTotal]);
 
+  const hasPayouts = isFunction(api.tx.staking.payoutStakers);
+
   return (
     <div className={className}>
-      {api.tx.staking.payoutStakers && (
+      {hasPayouts && (
         <Button.Group>
           <ToggleGroup
             onChange={setMyStashesIndex}
@@ -226,7 +228,7 @@ function Payouts ({ className = '', isInElection, ownValidators }: Props): React
         </Button.Group>
       )}
       <ElectionBanner isInElection={isInElection} />
-      {api.tx.staking.payoutStakers && !isLoadingRewards && !stashes?.length && (
+      {hasPayouts && !isLoadingRewards && !stashes?.length && (
         <article className='warning centered'>
           <p>{t('Payouts of rewards for a validator can be initiated by any account. This means that as soon as a validator or nominator requests a payout for an era, all the nominators for that validator will be rewarded. Each user does not need to claim individually and the suggestion is that validators should claim rewards for everybody as soon as an era ends.')}</p>
           <p>{t('If you have not claimed rewards straight after the end of the era, the validator is in the active set and you are seeing no rewards, this would mean that the reward payout transaction was made by another account on your behalf. Always check your favorite explorer to see any historic payouts made to your accounts.')}</p>
@@ -248,7 +250,7 @@ function Payouts ({ className = '', isInElection, ownValidators }: Props): React
           />
         ))}
       </Table>
-      {api.tx.staking.payoutStakers && (myStashesIndex === 1) && !isLoadingRewards && validators && (validators.length !== 0) && (
+      {hasPayouts && (myStashesIndex === 1) && !isLoadingRewards && validators && (validators.length !== 0) && (
         <Table
           header={headerValidatorsRef.current}
           isFixed

packages/page-staking/src/Slashes/Era.tsx

@@ -8,6 +8,7 @@ import React, { useCallback, useRef, useState } from 'react';
 
 import { Button, Table, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
+import { isFunction } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import Row from './Row';
@@ -65,7 +66,7 @@ function Slashes ({ buttons, councilId, councilThreshold, slash }: Props): React
       <Summary slash={slash} />
       <Button.Group>
         {buttons}
-        {api.tx.council?.propose && (
+        {isFunction(api.tx.council?.propose) && (
           <>
             <TxButton
               accountId={councilId}

packages/page-staking/src/index.tsx

@@ -13,6 +13,7 @@ import styled from 'styled-components';
 import { HelpOverlay } from '@polkadot/react-components';
 import Tabs from '@polkadot/react-components/Tabs';
 import { useAccounts, useApi, useAvailableSlashes, useCall, useFavorites, useOwnStashInfos } from '@polkadot/react-hooks';
+import { isFunction } from '@polkadot/util';
 
 import basicMd from './md/basic.md';
 import Summary from './Overview/Summary';
@@ -71,7 +72,7 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
       name: 'actions',
       text: t<string>('Account actions')
     },
-    api.query.staking.activeEra && {
+    isFunction(api.query.staking.activeEra) && {
       name: 'payout',
       text: t<string>('Payouts')
     },

packages/page-sudo/src/Sudo.tsx

@@ -9,7 +9,7 @@ import styled from 'styled-components';
 
 import { Button, Extrinsic, Icon, InputNumber, Toggle, TxButton } 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';
 
@@ -44,7 +44,7 @@ function Sudo ({ className, isMine, sudoKey }: Props): React.ReactElement<Props>
           label={t<string>('submit the following change')}
           onChange={_onChangeExtrinsic}
         />
-        {api.tx.sudo.sudoUncheckedWeight && (
+        {isFunction(api.tx.sudo.sudoUncheckedWeight) && (
           <InputNumber
             help={t<string>('The unchecked weight as specified for the sudoUncheckedWeight call.')}
             isDisabled={!withWeight}

packages/react-api/package.json

@@ -15,9 +15,9 @@
   "homepage": "https://github.com/polkadot-js/apps/tree/master/packages/react-api#readme",
   "dependencies": {
     "@babel/runtime": "^7.13.9",
-    "@polkadot/api": "^3.11.2-3",
+    "@polkadot/api": "^4.0.1-4",
-    "@polkadot/extension-dapp": "^0.37.2",
+    "@polkadot/extension-dapp": "^0.37.3-2",
-    "@polkadot/x-rxjs": "^5.9.3-0",
+    "@polkadot/x-rxjs": "^6.0.1-5",
     "fflate": "^0.6.7"
   }
 }

packages/react-components/package.json

@@ -12,15 +12,15 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.34",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@fortawesome/react-fontawesome": "^0.1.14",
-    "@polkadot/keyring": "^5.9.3-0",
+    "@polkadot/keyring": "^6.0.1-5",
     "@polkadot/react-api": "^0.82.2-6",
-    "@polkadot/react-identicon": "^0.70.1",
+    "@polkadot/react-identicon": "^0.70.2-2",
-    "@polkadot/react-qr": "^0.70.1",
+    "@polkadot/react-qr": "^0.70.2-2",
     "@polkadot/react-query": "^0.82.2-6",
-    "@polkadot/ui-keyring": "^0.70.1",
+    "@polkadot/ui-keyring": "^0.70.2-2",
-    "@polkadot/ui-settings": "^0.70.1",
+    "@polkadot/ui-settings": "^0.70.2-2",
-    "@polkadot/util": "^5.9.3-0",
+    "@polkadot/util": "^6.0.1-5",
-    "@polkadot/util-crypto": "^5.9.3-0",
+    "@polkadot/util-crypto": "^6.0.1-5",
     "chart.js": "^2.9.4",
     "codeflask": "^1.4.1",
     "i18next": "^19.9.1",

packages/react-components/src/util/checkVisibility.tsx

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

packages/react-hooks/src/useAccountInfo.ts

@@ -9,6 +9,7 @@ import type { 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';
@@ -86,7 +87,7 @@ export function useAccountInfo (value: string | null, isContract = false): UseAc
 
     let name;
 
-    if (api.query.identity && api.query.identity.identityOf) {
+    if (isFunction(api.query.identity?.identityOf)) {
       if (identity?.display) {
         name = identity.display;
       }

scripts/ipfsUpload.cjs

@@ -6,7 +6,7 @@ const pinataSDK = require('@pinata/sdk');
 const cloudflare = require('dnslink-cloudflare');
 const execSync = require('@polkadot/dev/scripts/execSync.cjs');
 
-const { createWsEndpoints } = require('../packages/apps-config/build/endpoints');
+const { createWsEndpoints } = require('../packages/apps-config/build/endpoints.cjs');
 const pkgJson = require('../package.json');
 
 // https://gateway.pinata.cloud/ipfs/