Redirect to explorer with no API support (#3226)

packages/apps/src/Content/index.tsx

@@ -11,9 +11,10 @@ import createRoutes from '@polkadot/apps-routing';
 import { ErrorBoundary, Spinner, StatusContext } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 
-import Status from './Status';
+import { findMissingApis } from '../endpoint';
 import { useTranslation } from '../translate';
 import NotFound from './NotFound';
+import Status from './Status';
 
 interface Props {
   className?: string;
@@ -33,14 +34,13 @@ const NOT_FOUND: Route = {
 function Content ({ className }: Props): React.ReactElement<Props> {
   const location = useLocation();
   const { t } = useTranslation();
-  const { isApiConnected, isApiReady } = useApi();
+  const { api, isApiConnected, isApiReady } = useApi();
   const { queueAction } = useContext(StatusContext);
   const { Component, display: { needsApi }, name } = useMemo(
     (): Route => {
       const app = location.pathname.slice(1) || '';
-      const found = createRoutes(t).find((route) => !!(route && app.startsWith(route.name)));
 
-      return found || NOT_FOUND;
+      return createRoutes(t).find((route) => !!(route && app.startsWith(route.name))) || NOT_FOUND;
     },
     [location, t]
   );
@@ -56,13 +56,18 @@ function Content ({ className }: Props): React.ReactElement<Props> {
         : (
           <>
             <Suspense fallback='...'>
-              <ErrorBoundary trigger={name}>
-                <Component
-                  basePath={`/${name}`}
-                  location={location}
-                  onStatusChange={queueAction}
-                />
-              </ErrorBoundary>
+              {findMissingApis(api, needsApi).length
+                ? <NotFound />
+                : (
+                  <ErrorBoundary trigger={name}>
+                    <Component
+                      basePath={`/${name}`}
+                      location={location}
+                      onStatusChange={queueAction}
+                    />
+                  </ErrorBoundary>
+                )
+              }
             </Suspense>
             <Status />
           </>

packages/apps/src/SideBar/Item.tsx

@@ -8,10 +8,10 @@ import { AccountId } from '@polkadot/types/interfaces';
 
 import React, { useEffect, useState } from 'react';
 import { NavLink } from 'react-router-dom';
-import { ApiPromise } from '@polkadot/api';
 import { Badge, Icon, Menu, Tooltip } from '@polkadot/react-components';
 import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
-import { isFunction } from '@polkadot/util';
+
+import { findMissingApis } from '../endpoint';
 
 const DUMMY_COUNTER = (): null => null;
 
@@ -32,17 +32,6 @@ function logDisabled (route: string, message: string): void {
   }
 }
 
-function hasEndpoint (api: ApiPromise, endpoint: string): boolean {
-  const [area, section, method] = endpoint.split('.');
-
-  try {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    return isFunction((api as any)[area][section][method]);
-  } catch (error) {
-    return false;
-  }
-}
-
 function checkVisible (name: string, { api, isApiConnected, isApiReady }: ApiProps, hasAccounts: boolean, hasSudo: boolean, { isHidden, needsAccounts, needsApi, needsSudo }: Route['display']): boolean {
   if (isHidden) {
     return false;
@@ -58,13 +47,7 @@ function checkVisible (name: string, { api, isApiConnected, isApiReady }: ApiPro
     return false;
   }
 
-  const notFound = needsApi.filter((endpoint: string | string[]): boolean => {
-    const hasApi = Array.isArray(endpoint)
-      ? endpoint.reduce((hasApi, endpoint): boolean => hasApi || hasEndpoint(api, endpoint), false)
-      : hasEndpoint(api, endpoint);
-
-    return !hasApi;
-  });
+  const notFound = findMissingApis(api, needsApi);
 
   if (notFound.length !== 0) {
     logDisabled(name, `API not available: ${notFound.toString()}`);

packages/apps/src/endpoint.ts

@@ -0,0 +1,31 @@
+// Copyright 2017-2020 @polkadot/apps authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { ApiPromise } from '@polkadot/api';
+import { isFunction } from '@polkadot/util';
+
+function hasEndpoint (api: ApiPromise, endpoint: string): boolean {
+  const [area, section, method] = endpoint.split('.');
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    return isFunction((api as any)[area][section][method]);
+  } catch (error) {
+    return false;
+  }
+}
+
+export function findMissingApis (api: ApiPromise, needsApi?: (string | string[])[]): (string | string[])[] {
+  if (!needsApi) {
+    return [];
+  }
+
+  return needsApi.filter((endpoint: string | string[]): boolean => {
+    const hasApi = Array.isArray(endpoint)
+      ? endpoint.reduce((hasApi, endpoint) => hasApi || hasEndpoint(api, endpoint), false)
+      : hasEndpoint(api, endpoint);
+
+    return !hasApi;
+  });
+}