Adjust overlays (#2142)

packages/apps/src/overlays/Accounts.tsx

@@ -4,7 +4,6 @@
 
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
 import { useAccounts, useApi } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
@@ -14,7 +13,7 @@ interface Props {
   className?: string;
 }
 
-function Accounts ({ className }: Props): React.ReactElement<Props> | null {
+export default function Accounts ({ className }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { hasAccounts } = useAccounts();
   const { isApiReady } = useApi();
@@ -30,6 +29,7 @@ function Accounts ({ className }: Props): React.ReactElement<Props> | null {
     <BaseOverlay
       className={className}
       icon='users'
+      type='info'
     >
       <p>{t("You don't have any accounts. Some features are currently hidden and will only become available once you have accounts.")}</p>
       <p>
@@ -43,9 +43,3 @@ function Accounts ({ className }: Props): React.ReactElement<Props> | null {
     </BaseOverlay>
   );
 }
-
-export default styled(Accounts)`
-  background: #fff6cb;
-  border-color: #e7c000;
-  color: #6b5900;
-`;

packages/apps/src/overlays/Base.tsx

@@ -10,9 +10,10 @@ interface Props {
   children: React.ReactNode;
   className?: string;
   icon: string;
+  type: 'error' | 'info';
 }
 
-function BaseOverlay ({ children, className, icon }: Props): React.ReactElement<Props> | null {
+function BaseOverlay ({ children, className, icon, type }: Props): React.ReactElement<Props> | null {
   const [isHidden, setIsHidden] = useState(false);
 
   if (isHidden) {
@@ -22,7 +23,7 @@ function BaseOverlay ({ children, className, icon }: Props): React.ReactElement<
   const _onClose = (): void => setIsHidden(true);
 
   return (
-    <div className={className}>
+    <div className={`${className} ${type === 'error' ? 'isError' : 'isInfo'}`}>
       <div className='content'>
         <Icon
           className='contentIcon'
@@ -52,6 +53,18 @@ export default styled(BaseOverlay)`
   top: 0;
   z-index: 500;
 
+  &.isError {
+    background: #ffe6e6;
+    border-color: #c00;
+    color: #4d0000;
+  }
+
+  &.isInfo {
+    background: #fff6cb;
+    border-color: #e7c000;
+    color: #6b5900;
+  }
+
   .content {
     display: flex;
     margin: 0 auto;

packages/apps/src/overlays/Connecting.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React from 'react';
-import styled from 'styled-components';
 import { useApi } from '@polkadot/react-hooks';
 import settings from '@polkadot/ui-settings';
 
@@ -19,7 +18,7 @@ interface Props {
   className?: string;
 }
 
-function Connecting ({ className }: Props): React.ReactElement<Props> | null {
+export default function Connecting ({ className }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { isApiConnected, isWaitingInjected } = useApi();
 
@@ -28,33 +27,27 @@ function Connecting ({ className }: Props): React.ReactElement<Props> | null {
       <BaseOverlay
         className={className}
         icon='puzzle'
+        type='info'
       >
         <div>{t('Waiting for authorization from the extension. Please open the installed extension and approve or reject access.')}</div>
       </BaseOverlay>
     );
+  } else if (!isApiConnected) {
+    return (
+      <BaseOverlay
+        className={className}
+        icon='globe'
+        type='error'
+      >
+        <div>{t('You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.')}</div>
+        {
+          isWs && !isWsLocal && isHttps
+            ? <div>{t('You are connecting from a secure location to an insecure WebSocket ({{wsUrl}}). Due to browser mixed-content security policies this connection type is not allowed. Change the RPC service to a secure \'wss\' endpoint.', { replace: { wsUrl } })}</div>
+            : undefined
+        }
+      </BaseOverlay>
+    );
   }
 
-  if (isApiConnected) {
-    return null;
-  }
-
-  return (
-    <BaseOverlay
-      className={className}
-      icon='globe'
-    >
-      <div>{t('You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.')}</div>
-      {
-        isWs && !isWsLocal && isHttps
-          ? <div>{t('You are connecting from a secure location to an insecure WebSocket ({{wsUrl}}). Due to browser mixed-content security policies this connection type is not allowed. Change the RPC service to a secure \'wss\' endpoint.', { replace: { wsUrl } })}</div>
-          : undefined
-      }
-    </BaseOverlay>
-  );
+  return null;
 }
-
-export default styled(Connecting)`
-  background: #ffe6e6;
-  border-color: #c00;
-  color: #4d0000;
-`;

packages/react-api/src/Api.tsx

@@ -113,6 +113,7 @@ async function loadOnReady (api: ApiPromise): Promise<State> {
 export default function Api ({ children, queuePayload, queueSetTxStatus, url }: Props): React.ReactElement<Props> | null {
   const [state, setState] = useState<State>({ isApiReady: false } as Partial<State> as State);
   const [isApiConnected, setIsApiConnected] = useState(false);
+  const [isApiLoading, setIsApiLoading] = useState(true);
   const [isWaitingInjected, setIsWaitingInjected] = useState(isWeb3Injected);
 
   // initial initialization
@@ -135,11 +136,13 @@ export default function Api ({ children, queuePayload, queueSetTxStatus, url }:
     injectedPromise
       .then((): void => setIsWaitingInjected(false))
       .catch((error: Error) => console.error(error));
+
+    setIsApiLoading(false);
   }, []);
 
   return api
     ? (
-      <ApiContext.Provider value={{ ...state, api, isApiConnected, isWaitingInjected }}>
+      <ApiContext.Provider value={{ ...state, api, isApiConnected, isApiLoading, isWaitingInjected }}>
         {children}
       </ApiContext.Provider>
     )

packages/react-api/src/types.ts

@@ -30,6 +30,7 @@ export interface ApiProps extends ApiState {
   api: ApiPromise;
   isWaitingInjected: boolean;
   isApiConnected: boolean;
+  isApiLoading: boolean;
 }
 
 export interface OnChangeCbObs {