Don't make unavailable apps crash the full app (#2251)

packages/apps-routing/src/types.ts

@@ -12,6 +12,7 @@ export interface RouteProps extends AppProps, BareProps {
 export interface Route {
   Component: React.ComponentType<RouteProps>;
   Modal?: React.ComponentType<any>;
+  isIgnored?: boolean;
   useCheck?: () => boolean;
   useCounter?: () => number;
   display: {

packages/apps/src/Content/index.tsx

@@ -6,7 +6,7 @@ import React, { Suspense, useContext } from 'react';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import routing from '@polkadot/apps-routing';
-import { StatusContext } from '@polkadot/react-components';
+import { ErrorBoundary, StatusContext } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 
 import Status from './Status';
@@ -18,10 +18,11 @@ interface Props {
 }
 
 const unknown = {
+  Component: NotFound,
   display: {
     needsApi: undefined
   },
-  Component: NotFound,
+  isIgnored: false,
   name: ''
 };
 
@@ -42,11 +43,13 @@ function Content ({ className }: Props): React.ReactElement<Props> {
         : (
           <>
             <Suspense fallback='...'>
-              <Component
-                basePath={`/${name}`}
-                location={location}
-                onStatusChange={queueAction}
-              />
+              <ErrorBoundary>
+                <Component
+                  basePath={`/${name}`}
+                  location={location}
+                  onStatusChange={queueAction}
+                />
+              </ErrorBoundary>
             </Suspense>
             <Status
               queueAction={queueAction}

packages/apps/src/SideBar/Item.tsx

@@ -73,7 +73,8 @@ function checkVisible (name: string, { api, isApiReady, isApiConnected }: ApiPro
   return notFound.length === 0;
 }
 
-export default function Item ({ route: { Modal, useCounter = DUMMY_COUNTER, display, i18n, icon, name }, isCollapsed, onClick }: Props): React.ReactElement<Props> | null {
+export default function Item ({ route, isCollapsed, onClick }: Props): React.ReactElement<Props> | null {
+  const { Modal, useCounter = DUMMY_COUNTER, display, i18n, icon, name } = route;
   const { t } = useTranslation();
   const { allAccounts, hasAccounts } = useAccounts();
   const apiProps = useApi();
@@ -87,7 +88,10 @@ export default function Item ({ route: { Modal, useCounter = DUMMY_COUNTER, disp
   }, [allAccounts, sudoKey]);
 
   useEffect((): void => {
-    setIsVisible(checkVisible(name, apiProps, hasAccounts, hasSudo, display));
+    const isVisible = checkVisible(name, apiProps, hasAccounts, hasSudo, display);
+
+    route.isIgnored = !isVisible;
+    setIsVisible(isVisible);
   }, [apiProps, hasAccounts, hasSudo]);
 
   if (!isVisible) {

packages/react-components/src/ErrorBoundary.tsx

@@ -46,7 +46,7 @@ class ErrorBoundary extends React.Component<Props> {
     return hasError
       ? (
         <article className='error'>
-          {t('Uncaught error. Something went wrong with the data extraction, resulting in an error log.')}
+          {t('Uncaught error. Something went wrong with the query and rendering of this component.')}
         </article>
       )
       : children;