Expose and use StatusContext (#1725)

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

@@ -6,8 +6,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 import { KeypairType } from '@polkadot/util-crypto/types';
 
 import React, { useContext, useEffect, useState } from 'react';
-import { Button, Dropdown, Icon, Input, Modal } from '@polkadot/react-components';
-import { QueueContext } from '@polkadot/react-components/Status';
+import { Button, Dropdown, Icon, Input, Modal, StatusContext } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 import { assert, u8aToHex } from '@polkadot/util';
 import { keyExtractSuri, mnemonicValidate } from '@polkadot/util-crypto';
@@ -30,7 +29,7 @@ const CRYPTO_MAP: Record<string, KeypairType[]> = {
 const EMPTY_KEY = '0x';
 
 function InjectKeys ({ isOpen = true, onClose, t }: Props): React.ReactElement<Props> | null {
-  const { queueRpc } = useContext(QueueContext);
+  const { queueRpc } = useContext(StatusContext);
   // this needs to align with what is set as the first value in `type`
   const [crypto, setCrypto] = useState<KeypairType>('sr25519');
   const [publicKey, setPublicKey] = useState(EMPTY_KEY);

packages/apps/src/Content/index.tsx

@@ -4,14 +4,13 @@
 
 import { I18nProps } from '@polkadot/react-components/types';
 import { ApiProps } from '@polkadot/react-api/types';
-import { QueueProps } from '@polkadot/react-components/Status/types';
 
-import React from 'react';
+import React, { useContext } from 'react';
 import { withRouter, RouteComponentProps } from 'react-router';
 import styled from 'styled-components';
 import routing from '@polkadot/apps-routing';
 import { withCalls, withMulti } from '@polkadot/react-api';
-import { QueueConsumer } from '@polkadot/react-components/Status/Context';
+import { StatusContext } from '@polkadot/react-components';
 
 import Status from './Status';
 import translate from '../translate';
@@ -27,7 +26,8 @@ const unknown = {
   name: ''
 };
 
-function Content ({ isApiConnected, isApiReady, className, location, t, i18n }: Props): React.ReactElement<Props> {
+function Content ({ isApiConnected, isApiReady, className, location, t }: Props): React.ReactElement<Props> {
+  const { queueAction, stqueue, txqueue } = useContext(StatusContext);
   const app = location.pathname.slice(1) || '';
   const { Component, display: { needsApi }, name } = routing.routes.find((route): boolean =>
     !!(route && app.startsWith(route.name))
@@ -38,22 +38,18 @@ function Content ({ isApiConnected, isApiReady, className, location, t, i18n }:
       {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>
+          <>
+            <Component
+              basePath={`/${name}`}
+              location={location}
+              onStatusChange={queueAction}
+            />
+            <Status
+              queueAction={queueAction}
+              stqueue={stqueue}
+              txqueue={txqueue}
+            />
+          </>
         )
       }
     </div>

packages/react-components/src/CopyButton.tsx

@@ -7,7 +7,7 @@ import { BareProps, I18nProps } from './types';
 import React, { useContext } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
-import QueueContext from './Status/Context';
+import StatusContext from './Status/Context';
 import Button from './Button';
 import translate from './translate';
 import styled from 'styled-components';
@@ -20,7 +20,7 @@ interface Props extends BareProps, I18nProps {
 }
 
 function CopyButton ({ children, className, icon = 'copy', isAddress = false, t, value }: Props): React.ReactElement<Props> {
-  const { queueAction } = useContext(QueueContext);
+  const { queueAction } = useContext(StatusContext);
 
   const _onCopy = (): void => {
     isAddress && queueAction && queueAction({

packages/react-components/src/Status/index.tsx

@@ -14,10 +14,10 @@ import Button from '../Button';
 import Icon from '../Icon';
 import translate from '../translate';
 import { classes } from '../util';
-import QueueContext from './Context';
+import StatusContext from './Context';
 import { STATUS_COMPLETE } from './constants';
 
-export { QueueContext };
+export { StatusContext };
 
 interface Props extends I18nProps {
   stqueue?: QueueStatus[];

packages/react-components/src/index.tsx

@@ -63,7 +63,7 @@ export { default as ProposedAction } from './ProposedAction';
 export { default as OnlineStatus } from './OnlineStatus';
 export { default as Row } from './Row';
 export { default as Static } from './Static';
-export { default as Status } from './Status';
+export { default as Status, StatusContext } from './Status';
 export { default as SummaryBox } from './SummaryBox';
 export { default as Tabs } from './Tabs';
 export { default as Toggle } from './Toggle';

packages/react-signer/src/index.tsx

@@ -7,7 +7,7 @@ import { BareProps } from '@polkadot/react-components/types';
 import './index.css';
 
 import React, { useContext } from 'react';
-import QueueContext from '@polkadot/react-components/Status/Context';
+import { StatusContext } from '@polkadot/react-components';
 
 import Modal from './Modal';
 
@@ -16,7 +16,7 @@ interface Props extends BareProps {
 }
 
 export default function Signer ({ children, className, style }: Props): React.ReactElement<Props> {
-  const { txqueue, queueSetTxStatus } = useContext(QueueContext);
+  const { txqueue, queueSetTxStatus } = useContext(StatusContext);
 
   return (
     <>