From a66577eda4412e7b5f649d7c71a9049d2d132ad7 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 19 Sep 2019 17:57:32 +0200
Subject: [PATCH] More functional component conversions (#1633)

* More functional component conversions

* Cleanups

* functional Elapsed

* Status -> functional

* Couple more

* One more tiny one
---
 packages/app-accounts/src/modals/Create.tsx   | 198 +++++++-----------
 .../src/modals/CreateConfirmation.tsx         |  57 +++++
 packages/apps/src/Content/NotFound.tsx        |  12 +-
 packages/apps/src/Content/Status.tsx          |  73 +++----
 packages/apps/src/Content/index.tsx           | 110 +++++-----
 packages/apps/src/overlays/Accounts.tsx       |  80 +++----
 packages/apps/src/overlays/Base.tsx           |  61 +++---
 .../react-components/src/Status/Queue.tsx     |  28 +--
 packages/react-components/src/Status/types.ts |   2 +-
 packages/react-query/src/Elapsed.tsx          | 104 +++++----
 10 files changed, 346 insertions(+), 379 deletions(-)
 create mode 100644 packages/app-accounts/src/modals/CreateConfirmation.tsx

diff --git a/packages/app-accounts/src/modals/Create.tsx b/packages/app-accounts/src/modals/Create.tsx
index c81ce5b186..3efe6b78f9 100644
--- a/packages/app-accounts/src/modals/Create.tsx
+++ b/packages/app-accounts/src/modals/Create.tsx
@@ -21,6 +21,7 @@ import { isHex, u8aToHex } from '@polkadot/util';
 import { keyExtractSuri, mnemonicGenerate, mnemonicValidate, randomAsU8a } from '@polkadot/util-crypto';
 
 import translate from '../translate';
+import CreateConfirmation from './CreateConfirmation';
 
 interface Props extends ModalProps, ApiProps, I18nProps {
   seed?: string;
@@ -34,20 +35,23 @@ interface SeedOption {
   value: SeedType;
 }
 
-interface State {
+interface AddressState {
   address: string;
   deriveError: string | null;
   derivePath: string;
-  isNameValid: boolean;
   isSeedValid: boolean;
+  pairType: KeypairType;
+  seed: string;
+  seedType: SeedType;
+}
+
+interface State extends AddressState {
+  isNameValid: boolean;
   isPassValid: boolean;
   isValid: boolean;
   name: string;
-  pairType: KeypairType;
   password: string;
-  seed: string;
   seedOptions: SeedOption[];
-  seedType: SeedType;
   showWarning: boolean;
   tags: string[];
 }
@@ -87,6 +91,30 @@ function addressFromSeed (phrase: string, derivePath: string, pairType: KeypairT
     .address;
 }
 
+function generateSeed (_seed: string | null, derivePath: string, seedType: SeedType, pairType: KeypairType): AddressState {
+  const seed = ((): string => {
+    switch (seedType) {
+      case 'bip':
+        return mnemonicGenerate();
+      case 'dev':
+        return DEV_PHRASE;
+      default:
+        return _seed || u8aToHex(randomAsU8a());
+    }
+  })();
+  const address = addressFromSeed(seed, derivePath, pairType);
+
+  return {
+    address,
+    deriveError: null,
+    derivePath,
+    isSeedValid: true,
+    pairType,
+    seedType,
+    seed
+  };
+}
+
 class Create extends React.PureComponent<Props, State> {
   public state: State;
 
@@ -103,14 +131,25 @@ class Create extends React.PureComponent<Props, State> {
       seedOptions.push({ value: 'dev', text: t('Development') });
     }
 
+    const pairType = type || DEFAULT_TYPE;
+    const seedType = seed ? 'raw' : 'bip';
+
     this.state = {
-      ...(this.emptyState(seed || null, '', type || DEFAULT_TYPE) as State),
-      seedOptions
+      ...generateSeed(seed || null, '', seedType, pairType),
+      isNameValid: true,
+      isPassValid: false,
+      isValid: false,
+      name: 'new account',
+      password: '',
+      seedOptions,
+      showWarning: false,
+      tags: []
     };
   }
 
   public render (): React.ReactNode {
     const { className, t } = this.props;
+    const { address, isValid, showWarning } = this.state;
 
     return (
       <Modal
@@ -119,39 +158,34 @@ class Create extends React.PureComponent<Props, State> {
         open
       >
         <Modal.Header>{t('Add an account via seed')}</Modal.Header>
-        {this.renderModal()}
+        {showWarning && (
+          <CreateConfirmation
+            address={address}
+            name={name}
+            onCommit={this.onCommit}
+            onHideWarning={this.onHideWarning}
+          />
+        )}
         {this.renderInput()}
-        {this.renderButtons()}
+        <Modal.Actions>
+          <Button.Group>
+            <Button
+              label={t('Cancel')}
+              onClick={this.onDiscard}
+            />
+            <Button.Or />
+            <Button
+              isDisabled={!isValid}
+              isPrimary
+              label={t('Save')}
+              onClick={this.onShowWarning}
+            />
+          </Button.Group>
+        </Modal.Actions>
       </Modal>
     );
   }
 
-  private renderButtons (): React.ReactNode {
-    const { t } = this.props;
-    const { isValid } = this.state;
-
-    return (
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            isNegative
-            label={t('Cancel')}
-            labelIcon='cancel'
-            onClick={this.onDiscard}
-          />
-          <Button.Or />
-          <Button
-            isDisabled={!isValid}
-            isPrimary
-            label={t('Save')}
-            labelIcon='save'
-            onClick={this.onShowWarning}
-          />
-        </Button.Group>
-      </Modal.Actions>
-    );
-  }
-
   private renderInput (): React.ReactNode {
     const { t } = this.props;
     const { address, deriveError, derivePath, isNameValid, isPassValid, isSeedValid, name, pairType, password, seed, seedOptions, seedType } = this.state;
@@ -231,101 +265,15 @@ class Create extends React.PureComponent<Props, State> {
               onEnter={this.onCommit}
               value={derivePath}
             />
-            {
-              deriveError
-                ? <Labelled label=''><article className='error'>{deriveError}</article></Labelled>
-                : null
-            }
+            {deriveError && (
+              <Labelled label=''><article className='error'>{deriveError}</article></Labelled>
+            )}
           </details>
         </AddressRow>
       </Modal.Content>
     );
   }
 
-  private renderModal (): React.ReactNode {
-    const { t } = this.props;
-    const { address, name, showWarning } = this.state;
-
-    return (
-      <Modal
-        dimmer='inverted'
-        open={showWarning}
-      >
-        <Modal.Header>
-          {t('Important notice')}
-        </Modal.Header>
-        <Modal.Content>
-          <AddressRow
-            defaultName={name}
-            isInline
-            value={address}
-          >
-            <p>{t('We will provide you with a generated backup file after your account is created. As long as you have access to your account you can always download this file later by clicking on "Backup" button from the Accounts section.')}</p>
-            <p>{t('Please make sure to save this file in a secure location as it is required, together with your password, to restore your account.')}</p>
-          </AddressRow>
-        </Modal.Content>
-        <Modal.Actions>
-          <Button.Group>
-            <Button
-              isNegative
-              label={t('Cancel')}
-              labelIcon='cancel'
-              onClick={this.onHideWarning}
-            />
-            <Button.Or />
-            <Button
-              isPrimary
-              label={t('Create and backup account')}
-              labelIcon='sign-in'
-              onClick={this.onCommit}
-            />
-          </Button.Group>
-        </Modal.Actions>
-      </Modal>
-    );
-  }
-
-  private generateSeed (_seed: string | null, derivePath: string, seedType: SeedType, pairType: KeypairType): Partial<State> {
-    const seed = ((): string => {
-      switch (seedType) {
-        case 'bip':
-          return mnemonicGenerate();
-        case 'dev':
-          return DEV_PHRASE;
-        default:
-          return _seed || u8aToHex(randomAsU8a());
-      }
-    })();
-    const address = addressFromSeed(seed, derivePath, pairType);
-
-    return {
-      address,
-      deriveError: null,
-      derivePath,
-      isSeedValid: true,
-      seed
-    };
-  }
-
-  private emptyState (seed: string | null, derivePath: string, pairType: KeypairType): Partial<State> {
-    const seedType = seed
-      ? 'raw'
-      : this.state ? this.state.seedType : 'bip';
-
-    return {
-      ...this.generateSeed(seed, derivePath, seedType, pairType),
-      isNameValid: true,
-      isPassValid: false,
-      isValid: false,
-      name: 'new account',
-      password: '',
-      pairType,
-      seedType,
-      showWarning: false,
-      tags: []
-    };
-  }
-
   private nextState (newState: Partial<State>): void {
     this.setState(
       (prevState: State): State => {
@@ -439,7 +387,7 @@ class Create extends React.PureComponent<Props, State> {
     }
 
     this.setState(({ derivePath, pairType }: State): State => ({
-      ...(this.generateSeed(null, derivePath, seedType, pairType) as State),
+      ...(generateSeed(null, derivePath, seedType, pairType) as State),
       seedType
     }));
   }
diff --git a/packages/app-accounts/src/modals/CreateConfirmation.tsx b/packages/app-accounts/src/modals/CreateConfirmation.tsx
new file mode 100644
index 0000000000..c1bb4ef7c2
--- /dev/null
+++ b/packages/app-accounts/src/modals/CreateConfirmation.tsx
@@ -0,0 +1,57 @@
+// Copyright 2017-2019 @polkadot/app-accounts authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { I18nProps } from '@polkadot/react-components/types';
+
+import React from 'react';
+import { AddressRow, Button, Modal } from '@polkadot/react-components';
+
+import translate from '../translate';
+
+interface Props extends I18nProps {
+  address: string;
+  name: string;
+  onCommit: () => void;
+  onHideWarning: () => void;
+}
+
+function CreateConfirmation ({ address, name, onCommit, onHideWarning, t }: Props): React.ReactElement<Props> | null {
+  return (
+    <Modal
+      dimmer='inverted'
+      open
+    >
+      <Modal.Header>
+        {t('Important notice')}
+      </Modal.Header>
+      <Modal.Content>
+        <AddressRow
+          defaultName={name}
+          isInline
+          value={address}
+        >
+          <p>{t('We will provide you with a generated backup file after your account is created. As long as you have access to your account you can always download this file later by clicking on "Backup" button from the Accounts section.')}</p>
+          <p>{t('Please make sure to save this file in a secure location as it is required, together with your password, to restore your account.')}</p>
+        </AddressRow>
+      </Modal.Content>
+      <Modal.Actions>
+        <Button.Group>
+          <Button
+            isNegative
+            label={t('Cancel')}
+            onClick={onHideWarning}
+          />
+          <Button.Or />
+          <Button
+            isPrimary
+            label={t('Create and backup account')}
+            onClick={onCommit}
+          />
+        </Button.Group>
+      </Modal.Actions>
+    </Modal>
+  );
+}
+
+export default translate(CreateConfirmation);
diff --git a/packages/apps/src/Content/NotFound.tsx b/packages/apps/src/Content/NotFound.tsx
index c750da12eb..6b6844f2ff 100644
--- a/packages/apps/src/Content/NotFound.tsx
+++ b/packages/apps/src/Content/NotFound.tsx
@@ -6,12 +6,12 @@ import React from 'react';
 import { Redirect } from 'react-router';
 import routing from '@polkadot/apps-routing';
 
+type Props = {};
+
 const defaultTo = `/${routing.default}`;
 
-export default class NotFound extends React.PureComponent<{}> {
-  public render (): React.ReactNode {
-    return (
-      <Redirect to={defaultTo} />
-    );
-  }
+export default function NotFound (): React.ReactElement<Props> {
+  return (
+    <Redirect to={defaultTo} />
+  );
 }
diff --git a/packages/apps/src/Content/Status.tsx b/packages/apps/src/Content/Status.tsx
index db46c6af35..32095a79b6 100644
--- a/packages/apps/src/Content/Status.tsx
+++ b/packages/apps/src/Content/Status.tsx
@@ -5,10 +5,10 @@
 
 import { EventRecord } from '@polkadot/types/interfaces';
 import { KeyringOptions } from '@polkadot/ui-keyring/options/types';
-import { QueueStatus, QueueTx, QueueAction$Add } from '@polkadot/react-components/Status/types';
+import { ActionStatus, QueueStatus, QueueTx, QueueAction$Add } from '@polkadot/react-components/Status/types';
 import { I18nProps } from '@polkadot/react-components/types';
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import keyringOption from '@polkadot/ui-keyring/options';
 import { Status as StatusDisplay } from '@polkadot/react-components';
 import { withCalls, withMulti, withObservable } from '@polkadot/react-api';
@@ -27,9 +27,9 @@ interface Props extends I18nProps {
 
 let prevEventHash: string;
 
-class Status extends React.PureComponent<Props> {
-  public componentDidUpdate ({ optionsAll, queueAction, system_events, t }: Props): void {
-    const eventHash = xxhashAsHex(stringToU8a(JSON.stringify(system_events || [])));
+function Status ({ optionsAll, queueAction, stqueue, system_events = [], t, txqueue }: Props): React.ReactElement<Props> {
+  useEffect((): void => {
+    const eventHash = xxhashAsHex(stringToU8a(JSON.stringify(system_events)));
 
     if (!optionsAll || eventHash === prevEventHash) {
       return;
@@ -38,45 +38,46 @@ class Status extends React.PureComponent<Props> {
     prevEventHash = eventHash;
 
     const addresses = optionsAll.account.map((account): string | null => account.value);
+    const statusses = system_events
+      .map(({ event: { data, method, section } }): ActionStatus | null => {
+        if (section === 'balances' && method === 'Transfer') {
+          const account = data[1].toString();
 
-    (system_events || []).forEach(({ event: { data, method, section } }): void => {
-      if (section === 'balances' && method === 'Transfer') {
-        const account = data[1].toString();
+          if (addresses.includes(account)) {
+            return {
+              account,
+              action: `${section}.${method}`,
+              status: 'event',
+              message: t('transfer received')
+            };
+          }
+        } else if (section === 'democracy') {
+          const index = data[0].toString();
 
-        if (addresses.includes(account)) {
-          queueAction({
-            account,
+          return {
             action: `${section}.${method}`,
             status: 'event',
-            message: t('transfer received')
-          });
+            message: t('update on #{{index}}', {
+              replace: {
+                index
+              }
+            })
+          };
         }
-      } else if (section === 'democracy') {
-        const index = data[0].toString();
 
-        queueAction({
-          action: `${section}.${method}`,
-          status: 'event',
-          message: t('update on #{{index}}', {
-            replace: {
-              index
-            }
-          })
-        });
-      }
-    });
-  }
+        return null;
+      })
+      .filter((item): boolean => !!item) as ActionStatus[];
 
-  public render (): React.ReactNode {
-    const { stqueue, txqueue } = this.props;
+    statusses.length && queueAction(statusses);
+  }, [system_events]);
 
-    return (
-      <StatusDisplay
-        stqueue={stqueue}
-        txqueue={txqueue}
-      />
-    );
-  }
+  return (
+    <StatusDisplay
+      stqueue={stqueue}
+      txqueue={txqueue}
+    />
+  );
 }
 
 export default withMulti(
diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx
index 188a963cd3..09dcb14719 100644
--- a/packages/apps/src/Content/index.tsx
+++ b/packages/apps/src/Content/index.tsx
@@ -19,27 +19,6 @@ import NotFound from './NotFound';
 
 interface Props extends I18nProps, ApiProps, RouteComponentProps {}
 
-const Wrapper = styled.div`
-  background: #fafafa;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  height: 100%;
-  min-height: 100vh;
-  overflow-x: hidden;
-  overflow-y: auto;
-  width: 100%;
-  padding: 0 2rem;
-
-  @media(max-width: 768px) {
-    padding: 0 0.5rem;
-  }
-`;
-
-const Connecting = styled.div`
-  padding: 1rem 0;
-`;
-
 const unknown = {
   display: {
     needsApi: undefined
@@ -48,48 +27,63 @@ const unknown = {
   name: ''
 };
 
-class Content extends React.Component<Props> {
-  public render (): React.ReactNode {
-    const { isApiConnected, isApiReady, location, t } = this.props;
-    const app = location.pathname.slice(1) || '';
-    const { Component, display: { needsApi }, name } = routing.routes.find((route): boolean =>
-      !!(route && app.startsWith(route.name))
-    ) || unknown;
+function Content ({ isApiConnected, isApiReady, className, location, t }: Props): React.ReactElement<Props> {
+  const app = location.pathname.slice(1) || '';
+  const { Component, display: { needsApi }, name } = routing.routes.find((route): boolean =>
+    !!(route && app.startsWith(route.name))
+  ) || unknown;
 
-    if (needsApi && (!isApiReady || !isApiConnected)) {
-      return (
-        <Wrapper>
-          <Connecting>{t('Waiting for API to be connected and ready.')}</Connecting>
-        </Wrapper>
-      );
-    }
-
-    return (
-      <Wrapper>
-        <QueueConsumer>
-          {({ queueAction, stqueue, txqueue }: QueueProps): React.ReactNode => (
-            <>
-              <Component
-                basePath={`/${name}`}
-                location={location}
-                onStatusChange={queueAction}
-              />
-              <Status
-                queueAction={queueAction}
-                stqueue={stqueue}
-                txqueue={txqueue}
-              />
-            </>
-          )}
-        </QueueConsumer>
-      </Wrapper>
-    );
-  }
+  return (
+    <div className={className}>
+      {needsApi && (!isApiReady || !isApiConnected)
+        ? <div className='connecting'>{t('Waiting for API to be connected and ready.')}</div>
+        : (
+          <QueueConsumer>
+            {({ queueAction, stqueue, txqueue }: QueueProps): React.ReactNode => (
+              <>
+                <Component
+                  basePath={`/${name}`}
+                  location={location}
+                  onStatusChange={queueAction}
+                />
+                <Status
+                  queueAction={queueAction}
+                  stqueue={stqueue}
+                  txqueue={txqueue}
+                />
+              </>
+            )}
+          </QueueConsumer>
+        )
+      }
+    </div>
+  );
 }
 
 // React-router needs to be first, otherwise we have blocked updates
 export default withMulti(
-  withRouter(Content),
+  withRouter(
+    styled(Content)`
+      background: #fafafa;
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      height: 100%;
+      min-height: 100vh;
+      overflow-x: hidden;
+      overflow-y: auto;
+      width: 100%;
+      padding: 0 2rem;
+
+      @media(max-width: 768px) {
+        padding: 0 0.5rem;
+      }
+
+      .connecting {
+        padding: 1rem 0;
+      }
+    `
+  ),
   translate,
   // These API queries are used in a number of places, warm them up
   // to avoid constant un-/re-subscribe on these
diff --git a/packages/apps/src/overlays/Accounts.tsx b/packages/apps/src/overlays/Accounts.tsx
index 34bd3ada0a..ac5b90a92b 100644
--- a/packages/apps/src/overlays/Accounts.tsx
+++ b/packages/apps/src/overlays/Accounts.tsx
@@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 import { ApiProps } from '@polkadot/react-api/types';
 import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { withApi, withMulti, withObservable } from '@polkadot/react-api';
@@ -19,66 +19,48 @@ interface Props extends I18nProps, ApiProps {
   allAccounts?: SubjectInfo;
 }
 
-interface State {
-  hasAccounts: boolean;
-  isHidden: boolean;
-}
+function Accounts ({ allAccounts, isApiReady, className, t }: Props): React.ReactElement<Props> | null {
+  const [hasAccounts, setHasAccounts] = useState(false);
+  const [isHidden, setIsHidden] = useState(false);
 
-class Accounts extends React.PureComponent<Props, State> {
-  public state: State = {
-    hasAccounts: false,
-    isHidden: false
-  };
-
-  public static getDerivedStateFromProps ({ allAccounts }: Props, prevState: State): Pick<State, never> | null {
+  useEffect((): void => {
     if (!allAccounts) {
-      return null;
+      return;
     }
 
-    const hasAccounts = Object.keys(allAccounts).length !== 0;
+    const newHas = Object.keys(allAccounts).length !== 0;
 
-    if (hasAccounts === prevState.hasAccounts) {
-      return null;
+    if (newHas !== hasAccounts) {
+      setHasAccounts(newHas);
     }
+  }, [allAccounts]);
 
-    return {
-      hasAccounts
-    };
+  const _onClose = (): void => setIsHidden(true);
+
+  if (!isApiReady || hasAccounts || isHidden) {
+    return null;
   }
 
-  public render (): React.ReactNode {
-    const { isApiReady, className, t } = this.props;
-    const { hasAccounts, isHidden } = this.state;
-
-    if (!isApiReady || hasAccounts || isHidden) {
-      return null;
-    }
-
-    return (
-      <BaseOverlay
-        className={className}
-        icon='users'
-      >
-        <p>{t("You don't have any accounts. Some features are currently hidden and will only become available once you have accounts.")}</p>
-        <p>
-          <Link
-            to='/accounts'
-            onClick={this.onClose}
-          >
-            {t('Create an account now.')}
-          </Link>
-        </p>
-      </BaseOverlay>
-    );
-  }
-
-  private onClose = (): void => {
-    this.setState({ isHidden: true });
-  }
+  return (
+    <BaseOverlay
+      className={className}
+      icon='users'
+    >
+      <p>{t("You don't have any accounts. Some features are currently hidden and will only become available once you have accounts.")}</p>
+      <p>
+        <Link
+          to='/accounts'
+          onClick={_onClose}
+        >
+          {t('Create an account now.')}
+        </Link>
+      </p>
+    </BaseOverlay>
+  );
 }
 
 export default withMulti(
-  styled(Accounts as React.ComponentClass<Props>)`
+  styled(Accounts)`
     background: #fff6cb;
     border-color: #e7c000;
     color: #6b5900;
diff --git a/packages/apps/src/overlays/Base.tsx b/packages/apps/src/overlays/Base.tsx
index cd633abcfd..6055c38f2a 100644
--- a/packages/apps/src/overlays/Base.tsx
+++ b/packages/apps/src/overlays/Base.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 React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Icon } from '@polkadot/react-components';
 
@@ -12,47 +12,34 @@ interface Props {
   icon: string;
 }
 
-interface State {
-  isHidden: boolean;
-}
+function BaseOverlay ({ children, className, icon }: Props): React.ReactElement<Props> | null {
+  const [isHidden, setIsHidden] = useState(false);
 
-class BaseOverlay extends React.PureComponent<Props, State> {
-  public state: State = {
-    isHidden: false
-  };
+  if (isHidden) {
+    return null;
+  }
 
-  public render (): React.ReactNode {
-    const { children, className, icon } = this.props;
-    const { isHidden } = this.state;
+  const _onClose = (): void => setIsHidden(true);
 
-    if (isHidden) {
-      return null;
-    }
-
-    return (
-      <div className={className}>
-        <div className='content'>
-          <Icon
-            className='contentIcon'
-            name={icon as any}
-            size='big'
-          />
-          <div className='contentItem'>
-            {children}
-          </div>
-          <Icon
-            className='closeIcon'
-            name='close'
-            onClick={this.onClose}
-          />
+  return (
+    <div className={className}>
+      <div className='content'>
+        <Icon
+          className='contentIcon'
+          name={icon as any}
+          size='big'
+        />
+        <div className='contentItem'>
+          {children}
         </div>
+        <Icon
+          className='closeIcon'
+          name='close'
+          onClick={_onClose}
+        />
       </div>
-    );
-  }
-
-  private onClose = (): void => {
-    this.setState({ isHidden: true });
-  }
+    </div>
+  );
 }
 
 export default styled(BaseOverlay)`
diff --git a/packages/react-components/src/Status/Queue.tsx b/packages/react-components/src/Status/Queue.tsx
index df8dd1683a..678309cc8c 100644
--- a/packages/react-components/src/Status/Queue.tsx
+++ b/packages/react-components/src/Status/Queue.tsx
@@ -70,24 +70,28 @@ export default class Queue extends React.Component<Props, State> {
     };
   }
 
-  public queueAction = (status: ActionStatus): number => {
-    const id = ++nextId;
-    const removeItem = this.clearAction(id);
+  public queueAction = (status: ActionStatus | ActionStatus[]): number => {
+    const todos = (Array.isArray(status) ? status : [status]).map((item: ActionStatus) => {
+      const id = ++nextId;
+      const removeItem = this.clearAction(id);
+
+      setTimeout(removeItem, REMOVE_TIMEOUT);
+
+      return {
+        ...item,
+        id,
+        isCompleted: false,
+        removeItem
+      };
+    });
 
     this.setState(
       (prevState: State): Pick<State, never> => ({
-        stqueue: prevState.stqueue.concat({
-          ...status,
-          id,
-          isCompleted: false,
-          removeItem
-        })
+        stqueue: prevState.stqueue.concat(...todos)
       })
     );
 
-    setTimeout(removeItem, REMOVE_TIMEOUT);
-
-    return id;
+    return todos[0].id;
   }
 
   private clearStatus (id: number): () => void {
diff --git a/packages/react-components/src/Status/types.ts b/packages/react-components/src/Status/types.ts
index 2c4016ad04..96b61a7d47 100644
--- a/packages/react-components/src/Status/types.ts
+++ b/packages/react-components/src/Status/types.ts
@@ -97,7 +97,7 @@ export type QueueTxPayloadAdd = (payload: SignerPayloadJSON, signerCb: SignerCal
 
 export type QueueTxMessageSetStatus = (id: number, status: QueueTxStatus, result?: any, error?: Error) => void;
 
-export type QueueAction$Add = (status: ActionStatus) => number;
+export type QueueAction$Add = (status: ActionStatus | ActionStatus[]) => number;
 
 export interface QueueProps {
   stqueue: QueueStatus[];
diff --git a/packages/react-query/src/Elapsed.tsx b/packages/react-query/src/Elapsed.tsx
index 470063cf66..395782904c 100644
--- a/packages/react-query/src/Elapsed.tsx
+++ b/packages/react-query/src/Elapsed.tsx
@@ -5,7 +5,7 @@
 import { BareProps } from '@polkadot/react-api/types';
 
 import BN from 'bn.js';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { bnToBn } from '@polkadot/util';
 
 type Ticker = (now: number) => void;
@@ -14,74 +14,68 @@ interface Props extends BareProps {
   value?: BN | Date | number;
 }
 
-interface State {
-  now?: number;
-}
-
 const TICK_TIMEOUT = 100;
-const tickers = new Map<Elapsed, Ticker>();
+const tickers = new Map<number, Ticker>();
+
+let lastNow = Date.now();
+let lastId = 0;
 
 function tick (): void {
-  const now = Date.now();
+  lastNow = Date.now();
 
   for (const ticker of tickers.values()) {
-    ticker(now);
+    ticker(lastNow);
   }
 
   setTimeout(tick, TICK_TIMEOUT);
 }
 
+function getDisplayValue (now = 0, value: BN | Date | number = 0): string {
+  const tsValue = (
+    value && (value as Date).getTime
+      ? (value as Date).getTime()
+      : bnToBn(value as number).toNumber()
+  ) || 0;
+  let display = '0.0s';
+
+  if (now && tsValue) {
+    const elapsed = Math.max(Math.abs(now - tsValue), 0) / 1000;
+
+    if (elapsed < 15) {
+      display = `${elapsed.toFixed(1)}s`;
+    } else if (elapsed < 60) {
+      display = `${elapsed | 0}s`;
+    } else if (elapsed < 3600) {
+      display = `${elapsed / 60 | 0}m`;
+    } else {
+      display = `${elapsed / 3600 | 0}h`;
+    }
+  }
+
+  return display;
+}
+
 tick();
 
-export default class Elapsed extends React.PureComponent<Props, State> {
-  public state: State = {};
+export default function Elapsed ({ className, style, value }: Props): React.ReactElement<Props> {
+  const [now, setNow] = useState(lastNow);
 
-  public componentDidMount (): void {
-    tickers.set(this, (now: number): void => {
-      this.setState({ now });
-    });
-  }
+  useEffect((): () => void => {
+    const id = lastId++;
 
-  public componentWillUnmount (): void {
-    tickers.delete(this);
-  }
+    tickers.set(id, setNow);
 
-  public render (): React.ReactNode {
-    const { className, style, value } = this.props;
-    const { now } = this.state;
+    return (): void => {
+      tickers.delete(id);
+    };
+  }, []);
 
-    return (
-      <div
-        className={['ui--Elapsed', className].join(' ')}
-        style={style}
-      >
-        {this.getDisplayValue(now, value)}
-      </div>
-    );
-  }
-
-  private getDisplayValue (now = 0, value: BN | Date | number = 0): string {
-    const tsValue = (
-      value && (value as Date).getTime
-        ? (value as Date).getTime()
-        : bnToBn(value as number).toNumber()
-    ) || 0;
-    let display = '0.0s';
-
-    if (now && tsValue) {
-      const elapsed = Math.max(Math.abs(now - tsValue), 0) / 1000;
-
-      if (elapsed < 15) {
-        display = `${elapsed.toFixed(1)}s`;
-      } else if (elapsed < 60) {
-        display = `${elapsed | 0}s`;
-      } else if (elapsed < 3600) {
-        display = `${elapsed / 60 | 0}m`;
-      } else {
-        display = `${elapsed / 3600 | 0}h`;
-      }
-    }
-
-    return display;
-  }
+  return (
+    <div
+      className={['ui--Elapsed', className].join(' ')}
+      style={style}
+    >
+      {getDisplayValue(now, value)}
+    </div>
+  );
 }