Bump deps

package.json

@@ -10,10 +10,10 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^0.99.0-beta.3",
-    "@polkadot/api-contract": "^0.99.0-beta.3",
+    "@polkadot/api": "^0.99.0-beta.4",
+    "@polkadot/api-contract": "^0.99.0-beta.4",
     "@polkadot/keyring": "^1.7.1",
-    "@polkadot/types": "^0.99.0-beta.3",
+    "@polkadot/types": "^0.99.0-beta.4",
     "@polkadot/util": "^1.7.1",
     "@polkadot/util-crypto": "^1.7.1",
     "babel-core": "^7.0.0-bridge.0",
@@ -34,10 +34,11 @@
     "start": "cd packages/apps && webpack --config webpack.config.js"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.4",
-    "@babel/runtime": "^7.7.4",
-    "@polkadot/dev-react": "^0.32.0-beta.16",
-    "@polkadot/ts": "^0.1.87",
+    "@babel/core": "^7.7.5",
+    "@babel/register": "^7.7.4",
+    "@babel/runtime": "^7.7.5",
+    "@polkadot/dev-react": "^0.32.0-beta.17",
+    "@polkadot/ts": "^0.1.88",
     "autoprefixer": "^9.7.1",
     "empty": "^0.10.1",
     "html-loader": "^0.5.5",

packages/app-123code/package.json

@@ -10,7 +10,7 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.7.5",
     "@polkadot/react-components": "^0.38.0-beta.43"
   }
 }

packages/app-accounts/package.json

@@ -10,9 +10,9 @@
   "contributors": [],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.7.5",
     "@polkadot/react-components": "^0.38.0-beta.43",
-    "@polkadot/react-qr": "^0.48.0-beta.0",
+    "@polkadot/react-qr": "^0.48.0-beta.1",
     "@types/file-saver": "^2.0.0",
     "@types/yargs": "^13.0.2",
     "babel-plugin-module-resolver": "^3.1.1",

packages/app-address-book/package.json

@@ -10,7 +10,7 @@
   "contributors": [],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.7.5",
     "@polkadot/react-components": "^0.38.0-beta.43"
   }
 }

packages/app-claims/package.json

@@ -11,7 +11,7 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.7.5",
     "@polkadot/react-components": "^0.38.0-beta.43"
   }
 }

packages/app-contracts/package.json

@@ -10,8 +10,8 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.4",
-    "@polkadot/api-contract": "^0.99.0-beta.3",
+    "@babel/runtime": "^7.7.5",
+    "@polkadot/api-contract": "^0.99.0-beta.4",
     "@polkadot/react-components": "^0.38.0-beta.43"
   }
 }

packages/app-council/package.json

@@ -10,7 +10,7 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.7.5",
     "@polkadot/react-components": "^0.38.0-beta.43",
     "@polkadot/react-query": "^0.38.0-beta.43"
   }

packages/app-dashboard/package.json

@@ -10,7 +10,7 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.7.5",
     "@polkadot/apps-routing": "^0.38.0-beta.43",
     "@polkadot/react-components": "^0.38.0-beta.43"
   }

packages/app-democracy/package.json

@@ -10,7 +10,7 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.7.5",
     "@polkadot/react-components": "^0.38.0-beta.43",
     "@polkadot/react-query": "^0.38.0-beta.43"
   }

packages/app-explorer/package.json

@@ -10,7 +10,7 @@
   "contributors": [],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.7.5",
     "@polkadot/react-components": "^0.38.0-beta.43"
   }
 }

packages/app-extrinsics/package.json

@@ -10,7 +10,7 @@
   "contributors": [],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.7.5",
     "@polkadot/react-components": "^0.38.0-beta.43",
     "@polkadot/react-params": "^0.38.0-beta.43",
     "@polkadot/react-signer": "^0.38.0-beta.43"

packages/app-generic-asset/package.json

@@ -10,7 +10,7 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.7.5",
     "@polkadot/react-components": "^0.38.0-beta.43"
   }
 }

packages/app-js/package.json

@@ -10,7 +10,7 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.7.5",
     "@polkadot/react-components": "^0.38.0-beta.43",
     "snappyjs": "^0.6.0"
   }

packages/app-parachains/package.json

@@ -10,7 +10,7 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.7.5",
     "@polkadot/react-components": "^0.38.0-beta.43",
     "@polkadot/react-query": "^0.38.0-beta.43"
   }

packages/app-settings/package.json

@@ -10,7 +10,7 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.7.5",
     "@polkadot/react-components": "^0.38.0-beta.43",
     "@polkadot/react-query": "^0.38.0-beta.43",
     "query-string": "^6.8.3"

packages/app-staking/package.json

@@ -10,7 +10,7 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.7.4",
+    "@babel/runtime": "^7.7.5",
     "@polkadot/app-explorer": "^0.38.0-beta.43",
     "@polkadot/react-components": "^0.38.0-beta.43",
     "@polkadot/react-query": "^0.38.0-beta.43"

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

@@ -228,7 +228,7 @@ class Account extends React.PureComponent<Props, State> {
         </div>
         {nominees && !!nominees.length && (
           <details className='staking--Account-Nominations'>
-            <summary>{t('Nominating {{count}}', { replace: { count: nominees.length } })}</summary>
+            <summary>{t('Nominating ({{count}})', { replace: { count: nominees.length } })}</summary>
             {nominees.map((nomineeId, index): React.ReactNode => (
               <AddressMini
                 key={index}

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

@@ -2,15 +2,15 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { DerivedHeartbeats } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
 import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
 import { AccountId, StakingLedger } from '@polkadot/types/interfaces';
-import { ComponentProps } from '../types';
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button, CardGrid } from '@polkadot/react-components';
-import { useStream, useApi } from '@polkadot/react-hooks';
+import { useStream, useApi, useAccounts } from '@polkadot/react-hooks';
 import { AccountName } from '@polkadot/react-query';
 import { Option } from '@polkadot/types';
 import createOption from '@polkadot/ui-keyring/options/item';
@@ -19,7 +19,10 @@ import Account from './Account';
 import StartStaking from './NewStake';
 import translate from '../translate';
 
-interface Props extends I18nProps, ComponentProps {
+interface Props extends I18nProps {
+  allStashes: string[];
+  isVisible: boolean;
+  recentlyOnline?: DerivedHeartbeats;
 }
 
 function getStashes (allAccounts: string[], queryBonded?: Option<AccountId>[], queryLedger?: Option<StakingLedger>[]): [string, boolean][] | null {
@@ -44,17 +47,28 @@ function getStashes (allAccounts: string[], queryBonded?: Option<AccountId>[], q
   return result;
 }
 
-function Actions ({ allAccounts, allStashes, className, recentlyOnline, t }: Props): React.ReactElement<Props> {
+function Actions ({ allStashes, className, isVisible, recentlyOnline, t }: Props): React.ReactElement<Props> {
   const { api } = useApi();
+  const { allAccounts } = useAccounts();
   const queryBonded = useStream<Option<AccountId>[]>(api.query.staking.bonded.multi as any, [allAccounts]);
   const queryLedger = useStream<Option<StakingLedger>[]>(api.query.staking.ledger.multi as any, [allAccounts]);
   const [isNewStakeOpen, setIsNewStateOpen] = useState(false);
-  const foundStashes = getStashes(allAccounts, queryBonded, queryLedger);
-  const stashOptions = allStashes.map((stashId): KeyringSectionOption =>
-    createOption(stashId, (<AccountName params={stashId} />) as any)
-  );
-  const isEmpty = !isNewStakeOpen && (!foundStashes || foundStashes.length === 0);
+  const [foundStashes, setFoundStashes] = useState<[string, boolean][] | null>(null);
+  const [stashOptions, setStashOptions] = useState<KeyringSectionOption[]>([]);
+
+  useEffect((): void => {
+    setStashOptions(
+      allStashes.map((stashId): KeyringSectionOption =>
+        createOption(stashId, (<AccountName params={stashId} />) as any)
+      )
+    );
+  }, [allStashes]);
 
+  useEffect((): void => {
+    setFoundStashes(getStashes(allAccounts, queryBonded, queryLedger));
+  }, [allAccounts, queryBonded, queryLedger]);
+
+  const isEmpty = !isNewStakeOpen && (!foundStashes || foundStashes.length === 0);
   const _toggleNewStake = (): void => setIsNewStateOpen(!isNewStakeOpen);
 
   return (
@@ -68,7 +82,7 @@ function Actions ({ allAccounts, allStashes, className, recentlyOnline, t }: Pro
           onClick={_toggleNewStake}
         />
       }
-      className={className}
+      className={`${className} ${!isVisible && 'staking--hidden'}`}
       emptyText={t('No funds staked yet.')}
       isEmpty={isEmpty}
     >

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

@@ -9,8 +9,7 @@ import { ValidatorFilter } from '../types';
 
 import React, { useEffect, useState } from 'react';
 import { Dropdown, FilterOverlay, Table } from '@polkadot/react-components';
-import { useApi, useFavorites } from '@polkadot/react-hooks';
-import keyring from '@polkadot/ui-keyring';
+import { useAccounts, useApi, useFavorites } from '@polkadot/react-hooks';
 
 import { STORE_FAVS_BASE } from '../constants';
 import translate from '../translate';
@@ -20,6 +19,7 @@ interface Props extends I18nProps {
   authorsMap: Record<string, string>;
   hasQueries: boolean;
   isIntentions: boolean;
+  isVisible: boolean;
   lastAuthors?: string[];
   next: string[];
   recentlyOnline?: DerivedHeartbeats;
@@ -57,15 +57,15 @@ function accountsToString (accounts: AccountId[]): string[] {
   return accounts.map((accountId): string => accountId.toString());
 }
 
-function CurrentList ({ authorsMap, hasQueries, isIntentions, lastAuthors, next, recentlyOnline, stakingOverview, t }: Props): React.ReactElement<Props> {
+function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAuthors, next, recentlyOnline, stakingOverview, t }: Props): React.ReactElement<Props> | null {
   const { isSubstrateV2 } = useApi();
+  const { allAccounts } = useAccounts();
   const [favorites, toggleFavorite] = useFavorites(STORE_FAVS_BASE);
   const [filter, setFilter] = useState<ValidatorFilter>('all');
-  const [myAccounts] = useState(keyring.getAccounts().map(({ address }): string => address));
   const [{ elected, validators, waiting }, setFiltered] = useState<{ elected: AccountExtend[]; validators: AccountExtend[]; waiting: AccountExtend[] }>({ elected: [], validators: [], waiting: [] });
 
   useEffect((): void => {
-    if (stakingOverview) {
+    if (isVisible && stakingOverview) {
       const _elected = accountsToString(stakingOverview.currentElected);
       const _validators = accountsToString(stakingOverview.validators);
       const validators = filterAccounts(_validators, _elected, favorites, [], stakingOverview.eraPoints);
@@ -77,7 +77,7 @@ function CurrentList ({ authorsMap, hasQueries, isIntentions, lastAuthors, next,
         waiting: filterAccounts(next, [], favorites, _elected)
       });
     }
-  }, [favorites, next, stakingOverview]);
+  }, [favorites, isVisible, next, stakingOverview]);
 
   const _renderRows = (addresses: AccountExtend[], defaultName: string, withOnline: boolean): React.ReactNode =>
     addresses.map(([address, isElected, isFavorite, points]): React.ReactNode => (
@@ -91,7 +91,7 @@ function CurrentList ({ authorsMap, hasQueries, isIntentions, lastAuthors, next,
         isFavorite={isFavorite}
         lastAuthors={lastAuthors}
         key={address}
-        myAccounts={myAccounts}
+        myAccounts={allAccounts}
         points={points}
         recentlyOnline={
           withOnline
@@ -103,7 +103,7 @@ function CurrentList ({ authorsMap, hasQueries, isIntentions, lastAuthors, next,
     ));
 
   return (
-    <div>
+    <div className={`${!isVisible && 'staking--hidden'}`}>
       <FilterOverlay>
         <Dropdown
           onChange={setFilter}

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

@@ -5,26 +5,27 @@
 import { DerivedStakingOverview } from '@polkadot/api-derive/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
-import React from 'react';
+import React, { useContext } from 'react';
 import styled from 'styled-components';
 import SummarySession from '@polkadot/app-explorer/SummarySession';
 import { CardSummary, IdentityIcon, SummaryBox } from '@polkadot/react-components';
+import { BlockAuthorsContext } from '@polkadot/react-query';
 
 import translate from '../translate';
 
 interface Props extends I18nProps {
-  allControllers: string[];
   className?: string;
-  lastAuthors?: string[];
-  lastBlock?: string;
+  isVisible: boolean;
   next: string[];
   stakingOverview?: DerivedStakingOverview;
 }
 
-function Summary ({ className, lastAuthors, lastBlock, next, stakingOverview, style, t }: Props): React.ReactElement<Props> {
+function Summary ({ className, isVisible, next, stakingOverview, style, t }: Props): React.ReactElement<Props> {
+  const { lastBlockAuthors, lastBlockNumber } = useContext(BlockAuthorsContext);
+
   return (
     <SummaryBox
-      className={className}
+      className={`${className} ${!isVisible && 'staking--hidden'}`}
       style={style}
     >
       <section>
@@ -44,15 +45,15 @@ function Summary ({ className, lastAuthors, lastBlock, next, stakingOverview, st
           className='validator--Summary-authors'
           label={t('last block')}
         >
-          {lastAuthors && lastAuthors.map((author): React.ReactNode => (
+          {lastBlockAuthors?.map((author): React.ReactNode => (
             <IdentityIcon
               className='validator--Account-block-icon'
               key={author}
               size={24}
               value={author}
             />
           ))}
-          {lastBlock}
+          {lastBlockNumber}
         </CardSummary>
       </section>
       <section>