Display API errors with overlay (#4048)

packages/apps/src/overlays/Connecting.tsx

@@ -19,13 +19,23 @@ interface Props {
 
 function Connecting ({ className }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const { isApiConnected, isApiReady, isWaitingInjected } = useApi();
+  const { apiError, isApiConnected, isApiReady, isWaitingInjected } = useApi();
 
-  if (!isApiReady) {
+  if (apiError) {
     return (
       <BaseOverlay
         className={className}
-        icon='puzzle-piece'
+        icon='globe'
+        type='error'
+      >
+        <div>{apiError}</div>
+      </BaseOverlay>
+    );
+  } else if (!isApiReady) {
+    return (
+      <BaseOverlay
+        className={className}
+        icon='globe'
         type='info'
       >
         <div>{t<string>('Waiting to make a connection to the remote endpoint and finishing API initialization.')}</div>

packages/react-api/src/Api.tsx

@@ -182,10 +182,12 @@ function Api ({ children, store, url }: Props): React.ReactElement<Props> | null
   const [state, setState] = useState<ApiState>({ hasInjectedAccounts: false, isApiReady: false } as unknown as ApiState);
   const [isApiConnected, setIsApiConnected] = useState(false);
   const [isApiInitialized, setIsApiInitialized] = useState(false);
+  const [apiError, setApiError] = useState<null | string>(null);
   const [extensions, setExtensions] = useState<InjectedExtension[] | undefined>();
+
   const value = useMemo<ApiProps>(
-    () => ({ ...state, api, extensions, isApiConnected, isApiInitialized, isWaitingInjected: !extensions }),
-    [extensions, isApiConnected, isApiInitialized, state]
+    () => ({ ...state, api, apiError, extensions, isApiConnected, isApiInitialized, isWaitingInjected: !extensions }),
+    [apiError, extensions, isApiConnected, isApiInitialized, state]
   );
 
   // initial initialization
@@ -198,6 +200,7 @@ function Api ({ children, store, url }: Props): React.ReactElement<Props> | null
 
     api.on('connected', () => setIsApiConnected(true));
     api.on('disconnected', () => setIsApiConnected(false));
+    api.on('error', (error: Error) => setApiError(error.message));
     api.on('ready', (): void => {
       const injectedPromise = web3Enable('polkadot-js/apps');
 
@@ -207,7 +210,11 @@ function Api ({ children, store, url }: Props): React.ReactElement<Props> | null
 
       loadOnReady(api, injectedPromise, store, types)
         .then(setState)
-        .catch(console.error);
+        .catch((error): void => {
+          console.error(error);
+
+          setApiError((error as Error).message);
+        });
     });
 
     setIsApiInitialized(true);

packages/react-api/src/types.ts

@@ -29,6 +29,7 @@ export interface ApiState {
 
 export interface ApiProps extends ApiState {
   api: ApiPromise;
+  apiError: string | null;
   extensions?: InjectedExtension[];
   isApiConnected: boolean;
   isApiInitialized: boolean;