useAccounts hook

packages/app-accounts/src/Overview.tsx

@@ -3,13 +3,12 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { I18nProps } from '@polkadot/react-components/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 import { ComponentProps } from './types';
 
 import React, { useState } from 'react';
 import keyring from '@polkadot/ui-keyring';
-import accountObservable from '@polkadot/ui-keyring/observable/accounts';
-import { getLedger, isLedger, withMulti, withObservable } from '@polkadot/react-api';
+import { getLedger, isLedger } from '@polkadot/react-api';
+import { useAccounts } from '@polkadot/react-hooks';
 import { Button, CardGrid } from '@polkadot/react-components';
 
 import CreateModal from './modals/Create';
@@ -20,7 +19,6 @@ import Banner from './Banner';
 import translate from './translate';
 
 interface Props extends ComponentProps, I18nProps {
-  accounts?: SubjectInfo[];
 }
 
 // query the ledger for the address, adding it to the keyring
@@ -36,11 +34,12 @@ async function queryLedger (): Promise<void> {
   }
 }
 
-function Overview ({ accounts, onStatusChange, t }: Props): React.ReactElement<Props> {
+function Overview ({ onStatusChange, t }: Props): React.ReactElement<Props> {
+  const { allAccounts, hasAccounts } = useAccounts();
   const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [isImportOpen, setIsImportOpen] = useState(false);
   const [isQrOpen, setIsQrOpen] = useState(false);
-  const emptyScreen = !(isCreateOpen || isImportOpen || isQrOpen) && accounts && (Object.keys(accounts).length === 0);
+  const emptyScreen = !(isCreateOpen || isImportOpen || isQrOpen) && !hasAccounts;
 
   const _toggleCreate = (): void => setIsCreateOpen(!isCreateOpen);
   const _toggleImport = (): void => setIsImportOpen(!isImportOpen);
@@ -105,7 +104,7 @@ function Overview ({ accounts, onStatusChange, t }: Props): React.ReactElement<P
           onStatusChange={onStatusChange}
         />
       )}
-      {accounts && Object.keys(accounts).map((address): React.ReactNode => (
+      {allAccounts.map((address): React.ReactNode => (
         <Account
           address={address}
           key={address}
@@ -115,8 +114,4 @@ function Overview ({ accounts, onStatusChange, t }: Props): React.ReactElement<P
   );
 }
 
-export default withMulti(
-  Overview,
-  translate,
-  withObservable(accountObservable.subject, { propName: 'accounts' })
-);
+export default translate(Overview);

packages/app-accounts/src/index.tsx

@@ -3,49 +3,39 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { AppProps, I18nProps } from '@polkadot/react-components/types';
-import { ComponentProps, LocationProps } from './types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
+import { ComponentProps } from './types';
 
 import React, { useEffect, useState } from 'react';
 import { Route, Switch } from 'react-router';
-import accountObservable from '@polkadot/ui-keyring/observable/accounts';
+import { useAccounts } from '@polkadot/react-hooks';
 import { HelpOverlay, Tabs } from '@polkadot/react-components';
-import { withMulti, withObservable } from '@polkadot/react-api';
 
 import basicMd from './md/basic.md';
 import Overview from './Overview';
 import translate from './translate';
 import Vanity from './Vanity';
 
 interface Props extends AppProps, I18nProps {
-  allAccounts?: SubjectInfo;
-  location: any;
 }
 
-function AccountsApp ({ allAccounts = {}, basePath, location, onStatusChange, t }: Props): React.ReactElement<Props> {
+function AccountsApp ({ basePath, onStatusChange, t }: Props): React.ReactElement<Props> {
+  const { hasAccounts } = useAccounts();
   const [hidden, setHidden] = useState<string[]>(['vanity']);
 
   useEffect((): void => {
     setHidden(
-      Object.keys(allAccounts).length !== 0
+      hasAccounts
         ? []
         : ['vanity']
     );
-  }, [allAccounts]);
+  }, [hasAccounts]);
 
-  const _renderComponent = (Component: React.ComponentType<ComponentProps>): (props: LocationProps) => React.ReactNode => {
-    // eslint-disable-next-line react/display-name
-    return ({ match }: LocationProps): React.ReactNode => {
-      return (
-        <Component
-          basePath={basePath}
-          location={location}
-          match={match}
-          onStatusChange={onStatusChange}
-        />
-      );
-    };
-  };
+  const _renderComponent = (Component: React.ComponentType<ComponentProps>): React.ReactNode => (
+    <Component
+      basePath={basePath}
+      onStatusChange={onStatusChange}
+    />
+  );
 
   return (
     <main className='accounts--App'>
@@ -68,15 +58,11 @@ function AccountsApp ({ allAccounts = {}, basePath, location, onStatusChange, t
         />
       </header>
       <Switch>
-        <Route path={`${basePath}/vanity`} render={_renderComponent(Vanity)} />
-        <Route render={_renderComponent(Overview)} />
+        <Route path={`${basePath}/vanity`}>{_renderComponent(Vanity)}</Route>
+        <Route>{_renderComponent(Overview)}</Route>
       </Switch>
     </main>
   );
 }
 
-export default withMulti(
-  AccountsApp,
-  translate,
-  withObservable(accountObservable.subject, { propName: 'allAccounts' })
-);
+export default translate(AccountsApp);

packages/app-accounts/src/types.ts

@@ -7,21 +7,14 @@ import { ActionStatus } from '@polkadot/react-components/Status/types';
 
 import { WithTranslation } from 'react-i18next';
 
-export interface LocationProps {
-  location: any;
-  match: {
-    params: Record<string, string>;
-  };
-}
-
 export interface BareProps {
   className?: string;
   style?: Record<string, any>;
 }
 
 export type I18nProps = BareProps & WithTranslation;
 
-export type ComponentProps = AppProps & LocationProps;
+export type ComponentProps = AppProps;
 
 export interface ModalProps {
   onClose: () => void;

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

@@ -3,25 +3,23 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { I18nProps } from '@polkadot/react-components/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 import { ComponentProps } from './types';
 
 import React, { useState } from 'react';
 import { Button, CardGrid } from '@polkadot/react-components';
-import addressObservable from '@polkadot/ui-keyring/observable/addresses';
-import { withMulti, withObservable } from '@polkadot/react-api';
+import { useAddresses } from '@polkadot/react-hooks';
 
 import CreateModal from './modals/Create';
 import Address from './Address';
 import translate from './translate';
 
 interface Props extends ComponentProps, I18nProps {
-  addresses?: SubjectInfo[];
 }
 
-function Overview ({ addresses, onStatusChange, t }: Props): React.ReactElement<Props> {
+function Overview ({ onStatusChange, t }: Props): React.ReactElement<Props> {
+  const { hasAddresses, allAddresses } = useAddresses();
   const [isCreateOpen, setIsCreateOpen] = useState(false);
-  const emptyScreen = !isCreateOpen && (!addresses || Object.keys(addresses).length === 0);
+  const emptyScreen = !isCreateOpen && !hasAddresses;
 
   const _toggleCreate = (): void => setIsCreateOpen(!isCreateOpen);
 
@@ -46,7 +44,7 @@ function Overview ({ addresses, onStatusChange, t }: Props): React.ReactElement<
           onStatusChange={onStatusChange}
         />
       )}
-      {addresses && Object.keys(addresses).map((address): React.ReactNode => (
+      {allAddresses.map((address): React.ReactNode => (
         <Address
           address={address}
           key={address}
@@ -56,8 +54,4 @@ function Overview ({ addresses, onStatusChange, t }: Props): React.ReactElement<
   );
 }
 
-export default withMulti(
-  Overview,
-  translate,
-  withObservable(addressObservable.subject, { propName: 'addresses' })
-);
+export default translate(Overview);

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

@@ -4,7 +4,6 @@
 
 import { AppProps, I18nProps } from '@polkadot/react-components/types';
 import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-import { ComponentProps } from './types';
 
 import React from 'react';
 import { Route, Switch } from 'react-router';
@@ -21,16 +20,6 @@ interface Props extends AppProps, I18nProps {
 }
 
 function AddressBookApp ({ basePath, onStatusChange, t }: Props): React.ReactElement<Props> {
-  const _renderComponent = (Component: React.ComponentType<ComponentProps>): () => React.ReactNode => {
-    // eslint-disable-next-line react/display-name
-    return (): React.ReactNode =>
-      <Component
-        basePath={basePath}
-        location={location}
-        onStatusChange={onStatusChange}
-      />;
-  };
-
   return (
     <main className='address-book--App'>
       <HelpOverlay md={basicMd} />
@@ -47,7 +36,13 @@ function AddressBookApp ({ basePath, onStatusChange, t }: Props): React.ReactEle
         />
       </header>
       <Switch>
-        <Route render={_renderComponent(Overview)} />
+        <Route>
+          <Overview
+            basePath={basePath}
+            location={location}
+            onStatusChange={onStatusChange}
+          />
+        </Route>
       </Switch>
     </main>
   );

packages/app-democracy/src/Overview/Seconding.tsx

@@ -4,26 +4,23 @@
 
 import { AccountId } from '@polkadot/types/interfaces';
 import { I18nProps } from '@polkadot/react-components/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
-import accountObservable from '@polkadot/ui-keyring/observable/accounts';
-import { withMulti, withObservable } from '@polkadot/react-api';
+import { useAccounts } from '@polkadot/react-hooks';
 
 import translate from '../translate';
 
 interface Props extends I18nProps {
-  allAccounts?: SubjectInfo;
   depositors: AccountId[];
   proposalId: BN | number;
 }
 
-function Seconding ({ allAccounts, depositors, proposalId, t }: Props): React.ReactElement<Props> | null {
+function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Props> | null {
+  const { hasAccounts } = useAccounts();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [isSecondingOpen, setIsSecondingOpen] = useState(false);
-  const hasAccounts = allAccounts && Object.keys(allAccounts).length !== 0;
 
   if (!hasAccounts) {
     return null;
@@ -85,8 +82,4 @@ function Seconding ({ allAccounts, depositors, proposalId, t }: Props): React.Re
   );
 }
 
-export default withMulti(
-  Seconding,
-  translate,
-  withObservable(accountObservable.subject, { propName: 'allAccounts' })
-);
+export default translate(Seconding);

packages/app-democracy/src/Overview/Voting.tsx

@@ -3,26 +3,23 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { I18nProps } from '@polkadot/react-components/types';
-import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, Dropdown, InputAddress, Modal, TxButton } from '@polkadot/react-components';
-import accountObservable from '@polkadot/ui-keyring/observable/accounts';
-import { withMulti, withObservable } from '@polkadot/react-api';
+import { useAccounts } from '@polkadot/react-hooks';
 
 import translate from '../translate';
 
 interface Props extends I18nProps {
-  allAccounts?: SubjectInfo;
   referendumId: BN | number;
 }
 
-function Voting ({ allAccounts, referendumId, t }: Props): React.ReactElement<Props> | null {
+function Voting ({ referendumId, t }: Props): React.ReactElement<Props> | null {
+  const { hasAccounts } = useAccounts();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [isVotingOpen, setIsVotingOpen] = useState(false);
   const [voteValue, setVoteValue] = useState(true);
-  const hasAccounts = allAccounts && Object.keys(allAccounts).length !== 0;
 
   if (!hasAccounts) {
     return null;
@@ -93,8 +90,4 @@ function Voting ({ allAccounts, referendumId, t }: Props): React.ReactElement<Pr
   );
 }
 
-export default withMulti(
-  Voting,
-  translate,
-  withObservable(accountObservable.subject, { propName: 'allAccounts' })
-);
+export default translate(Voting);

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

@@ -7,8 +7,8 @@ import { BlockNumber } from '@polkadot/types/interfaces';
 import { BareProps } from '@polkadot/react-components/types';
 
 import React, { useEffect, useState } from 'react';
-import { withRouter } from 'react-router-dom';
-import { withCalls, withMulti } from '@polkadot/react-api';
+import { useParams } from 'react-router-dom';
+import { withCalls } from '@polkadot/react-api';
 import { isHex } from '@polkadot/util';
 
 import Query from '../Query';
@@ -17,15 +17,11 @@ import BlockByNumber from './ByNumber';
 
 interface Props extends BareProps {
   chain_bestNumber?: BlockNumber;
-  match: {
-    params: {
-      value: string;
-    };
-  };
 }
 
-function Entry ({ chain_bestNumber, match: { params: { value } } }: Props): React.ReactElement<Props> | null {
-  const [stateValue, setStateValue] = useState<string>(value);
+function Entry ({ chain_bestNumber }: Props): React.ReactElement<Props> | null {
+  const { value } = useParams();
+  const [stateValue, setStateValue] = useState<string | undefined>(value);
 
   useEffect((): void => {
     if (value && value !== stateValue) {
@@ -54,7 +50,4 @@ function Entry ({ chain_bestNumber, match: { params: { value } } }: Props): Reac
   );
 }
 
-export default withMulti(
-  withRouter(Entry),
-  withCalls<Props>('derive.chain.bestNumber')
-);
+export default withCalls<Props>('derive.chain.bestNumber')(Entry);