From 4febafac10baecf1b555a548560e9e0a6b4ee82f Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 15 Jan 2020 21:44:07 +0100
Subject: [PATCH] Connecting overlay rendering order (#2130)

* Connecting overlay rendering order

* API

* Combine components

* Unused import
---
 .../app-staking/src/Actions/Account/index.tsx | 31 +++++++++--------
 packages/apps/src/overlays/Connecting.tsx     | 33 +++++++------------
 2 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/packages/app-staking/src/Actions/Account/index.tsx b/packages/app-staking/src/Actions/Account/index.tsx
index 4e17aa458e..7dde5c34fa 100644
--- a/packages/app-staking/src/Actions/Account/index.tsx
+++ b/packages/app-staking/src/Actions/Account/index.tsx
@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedBalances, DerivedStakingAccount, DerivedStakingOverview, DerivedHeartbeats } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { AccountId, Exposure, StakingLedger, ValidatorPrefs } from '@polkadot/types/interfaces';
 import { Codec, ITuple } from '@polkadot/types/types';
 
@@ -13,7 +12,7 @@ import { AddressInfo, AddressMini, AddressSmall, Button, Menu, Popup, TxButton }
 import { useAccounts, useApi, useCall, useToggle } from '@polkadot/react-hooks';
 import { u8aConcat, u8aToHex } from '@polkadot/util';
 
-import translate from '../../translate';
+import { useTranslation } from '../../translate';
 import BondExtra from './BondExtra';
 import InjectKeys from './InjectKeys';
 import Nominate from './Nominate';
@@ -26,8 +25,9 @@ import useInactives from './useInactives';
 
 type ValidatorInfo = ITuple<[ValidatorPrefs, Codec]>;
 
-interface Props extends I18nProps {
+interface Props {
   allStashes?: string[];
+  className?: string;
   isOwnStash: boolean;
   next: string[];
   onUpdateType: (stashId: string, type: 'validator' | 'nominator' | 'started' | 'other') => void;
@@ -87,7 +87,8 @@ function getStakeState (allAccounts: string[], allStashes: string[] | undefined,
   };
 }
 
-function Account ({ allStashes, className, isOwnStash, next, onUpdateType, stakingOverview, stashId, t }: Props): React.ReactElement<Props> {
+function Account ({ allStashes, className, isOwnStash, next, onUpdateType, stakingOverview, stashId }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api, isSubstrateV2 } = useApi();
   const { allAccounts } = useAccounts();
   const validateInfo = useCall<ValidatorInfo>(api.query.staking.validators, [stashId]);
@@ -381,16 +382,14 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, staki
   );
 }
 
-export default translate(
-  styled(Account)`
-    .ui--Button-Group {
-      display: inline-block;
-      margin-right: 0.25rem;
-      vertical-align: inherit;
-    }
+export default styled(Account)`
+  .ui--Button-Group {
+    display: inline-block;
+    margin-right: 0.25rem;
+    vertical-align: inherit;
+  }
 
-    .mini-nopad {
-      padding: 0;
-    }
-  `
-);
+  .mini-nopad {
+    padding: 0;
+  }
+`;
diff --git a/packages/apps/src/overlays/Connecting.tsx b/packages/apps/src/overlays/Connecting.tsx
index a7f132be65..66020fb7af 100644
--- a/packages/apps/src/overlays/Connecting.tsx
+++ b/packages/apps/src/overlays/Connecting.tsx
@@ -19,28 +19,21 @@ interface Props {
   className?: string;
 }
 
-function ExtensionOverlay ({ className }: Props): React.ReactElement<Props> | null {
+function Connecting ({ className }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const { isWaitingInjected } = useApi();
+  const { isApiConnected, isWaitingInjected } = useApi();
 
-  if (!isWaitingInjected) {
-    return null;
+  if (isWaitingInjected) {
+    return (
+      <BaseOverlay
+        className={className}
+        icon='puzzle'
+      >
+        <div>{t('Waiting for authorization from the extension. Please open the installed extension and approve or reject access.')}</div>
+      </BaseOverlay>
+    );
   }
 
-  return (
-    <BaseOverlay
-      className={className}
-      icon='puzzle'
-    >
-      <div>{t('Waiting for authorization from the extension. Please open the installed extension and approve or reject access.')}</div>
-    </BaseOverlay>
-  );
-}
-
-function ConnectOverlay ({ className }: Props): React.ReactElement<Props> | null {
-  const { t } = useTranslation();
-  const { isApiConnected } = useApi();
-
   if (isApiConnected) {
     return null;
   }
@@ -60,10 +53,6 @@ function ConnectOverlay ({ className }: Props): React.ReactElement<Props> | null
   );
 }
 
-function Connecting (props: Props): React.ReactElement<Props> | null {
-  return ExtensionOverlay(props) || ConnectOverlay(props);
-}
-
 export default styled(Connecting)`
   background: #ffe6e6;
   border-color: #c00;