From f8ee5b838afdccd70154cbb0812ffe605ef2afcc Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Mon, 14 Sep 2020 13:21:03 +0200
Subject: [PATCH] Only hide extension updates in settings on dev (#3678)

* Only hide extension updates in settings on dev

* Adjust color indicator for Centrifuge
---
 packages/apps-config/src/ui/general/index.ts  |  1 +
 packages/apps-config/src/ui/index.ts          |  4 +-
 .../src/Metadata/ChainColorIndicator.tsx      |  2 +-
 packages/page-settings/src/Metadata/index.tsx | 12 ++++--
 packages/page-settings/src/index.tsx          |  8 ++--
 packages/page-settings/src/useChainInfo.ts    | 38 +++++++++----------
 packages/page-settings/src/useExtensions.ts   | 25 ++++++------
 7 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/packages/apps-config/src/ui/general/index.ts b/packages/apps-config/src/ui/general/index.ts
index d051ddb68c..908c7379ae 100644
--- a/packages/apps-config/src/ui/general/index.ts
+++ b/packages/apps-config/src/ui/general/index.ts
@@ -61,6 +61,7 @@ const chainColors: Record<string, any> = [
 // alphabetical
 const nodeColors: Record<string, any> = [
   ['centrifuge chain', nodeCentrifuge],
+  ['Centrifuge Chain Node', nodeCentrifuge],
   ['edgeware node', nodeEdgeware],
   ['kilt node', nodeKilt],
   ['nodle chain node', nodeNodle],
diff --git a/packages/apps-config/src/ui/index.ts b/packages/apps-config/src/ui/index.ts
index c5b15d0661..d28ddbd824 100644
--- a/packages/apps-config/src/ui/index.ts
+++ b/packages/apps-config/src/ui/index.ts
@@ -13,7 +13,7 @@ export function getSystemIcon (systemName: string): 'beachball' | 'polkadot' | '
   return (identityNodes[systemName.toLowerCase().replace(/-/g, ' ')] || 'substrate') as 'substrate';
 }
 
-export const getSystemChainColor = (systemChain: string, systemName: string): string | undefined => {
+export function getSystemChainColor (systemChain: string, systemName: string): string | undefined {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-return
   return chainColors[sanitize(systemChain)] || nodeColors[sanitize(systemName)];
-};
+}
diff --git a/packages/page-settings/src/Metadata/ChainColorIndicator.tsx b/packages/page-settings/src/Metadata/ChainColorIndicator.tsx
index 7dc2e4d338..b6feeb8e32 100644
--- a/packages/page-settings/src/Metadata/ChainColorIndicator.tsx
+++ b/packages/page-settings/src/Metadata/ChainColorIndicator.tsx
@@ -10,7 +10,7 @@ interface Props {
   className?: string;
 }
 
-function ChainColorIndicator ({ className = '', color }: Props): React.ReactElement<Props> {
+function ChainColorIndicator ({ className, color }: Props): React.ReactElement<Props> {
   return (
     <div
       className={className}
diff --git a/packages/page-settings/src/Metadata/index.tsx b/packages/page-settings/src/Metadata/index.tsx
index c692a36343..8b0879d6f7 100644
--- a/packages/page-settings/src/Metadata/index.tsx
+++ b/packages/page-settings/src/Metadata/index.tsx
@@ -3,20 +3,26 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React from 'react';
-import useChainInfo from '../useChainInfo';
+import { useApi } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
+import useChainInfo from '../useChainInfo';
 import Extensions from './Extensions';
 import NetworkSpecs from './NetworkSpecs';
 
 export default function Metadata (): React.ReactElement {
   const { t } = useTranslation();
+  const { isDevelopment } = useApi();
   const chainInfo = useChainInfo();
 
   return (
     <>
-      <h1>{t<string>('Extensions')}</h1>
-      <Extensions chainInfo={chainInfo} />
+      {!isDevelopment && (
+        <>
+          <h1>{t<string>('Extensions')}</h1>
+          <Extensions chainInfo={chainInfo} />
+        </>
+      )}
       <h1>{t<string>('Chain specifications')}</h1>
       <NetworkSpecs chainInfo={chainInfo} />
     </>
diff --git a/packages/page-settings/src/index.tsx b/packages/page-settings/src/index.tsx
index 2959e961f8..982f35a3eb 100644
--- a/packages/page-settings/src/index.tsx
+++ b/packages/page-settings/src/index.tsx
@@ -21,7 +21,7 @@ export { useCounter };
 
 function SettingsApp ({ basePath, onStatusChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { isApiConnected, isApiReady, isDevelopment } = useApi();
+  const { isApiConnected, isApiReady } = useApi();
   const numExtensions = useCounter();
 
   const items = useMemo(() => [
@@ -47,11 +47,9 @@ function SettingsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
 
   const hidden = useMemo(
     () => (isApiConnected && isApiReady)
-      ? isDevelopment
-        ? ['metadata']
-        : []
+      ? []
       : ['metadata', 'i18n'],
-    [isApiConnected, isApiReady, isDevelopment]
+    [isApiConnected, isApiReady]
   );
 
   return (
diff --git a/packages/page-settings/src/useChainInfo.ts b/packages/page-settings/src/useChainInfo.ts
index 067a3cc35b..72a34a04e8 100644
--- a/packages/page-settings/src/useChainInfo.ts
+++ b/packages/page-settings/src/useChainInfo.ts
@@ -4,32 +4,32 @@
 
 import { ChainInfo } from './types';
 
+import { useMemo } from 'react';
+
 import { getSystemChainColor, getSystemIcon } from '@polkadot/apps-config/ui';
 import { getSpecTypes } from '@polkadot/types-known';
 import { registry } from '@polkadot/react-api';
 import { useApi } from '@polkadot/react-hooks';
 import { isNumber } from '@polkadot/util';
 
-import { useEffect, useState } from 'react';
-
 export default function useChainInfo (): ChainInfo | null {
   const { api, isApiReady, systemChain, systemName } = useApi();
-  const [state, setState] = useState<ChainInfo | null>(null);
 
-  useEffect((): void => {
-    isApiReady && setState({
-      chain: systemChain,
-      color: getSystemChainColor(systemChain, systemName),
-      genesisHash: api.genesisHash.toHex(),
-      icon: getSystemIcon(systemName),
-      metaCalls: Buffer.from(api.runtimeMetadata.asCallsOnly.toU8a()).toString('base64'),
-      specVersion: api.runtimeVersion.specVersion.toNumber(),
-      ss58Format: isNumber(api.registry.chainSS58) ? api.registry.chainSS58 : 42,
-      tokenDecimals: isNumber(api.registry.chainDecimals) ? api.registry.chainDecimals : 12,
-      tokenSymbol: api.registry.chainToken || 'Unit',
-      types: getSpecTypes(registry, systemChain, api.runtimeVersion.specName, api.runtimeVersion.specVersion) as unknown as Record<string, string>
-    });
-  }, [api, isApiReady, systemChain, systemName]);
-
-  return state;
+  return useMemo(
+    () => isApiReady
+      ? {
+        chain: systemChain,
+        color: getSystemChainColor(systemChain, systemName),
+        genesisHash: api.genesisHash.toHex(),
+        icon: getSystemIcon(systemName),
+        metaCalls: Buffer.from(api.runtimeMetadata.asCallsOnly.toU8a()).toString('base64'),
+        specVersion: api.runtimeVersion.specVersion.toNumber(),
+        ss58Format: isNumber(api.registry.chainSS58) ? api.registry.chainSS58 : 42,
+        tokenDecimals: isNumber(api.registry.chainDecimals) ? api.registry.chainDecimals : 12,
+        tokenSymbol: api.registry.chainToken || 'Unit',
+        types: getSpecTypes(registry, systemChain, api.runtimeVersion.specName, api.runtimeVersion.specVersion) as unknown as Record<string, string>
+      }
+      : null,
+    [api, isApiReady, systemChain, systemName]
+  );
 }
diff --git a/packages/page-settings/src/useExtensions.ts b/packages/page-settings/src/useExtensions.ts
index 3183a85a9b..23832f16a6 100644
--- a/packages/page-settings/src/useExtensions.ts
+++ b/packages/page-settings/src/useExtensions.ts
@@ -4,7 +4,7 @@
 
 import { InjectedExtension, InjectedMetadataKnown, MetadataDef } from '@polkadot/extension-inject/types';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import store from 'store';
 import { ApiPromise } from '@polkadot/api';
 import { registry } from '@polkadot/react-api';
@@ -22,7 +22,7 @@ interface ExtensionInfo extends ExtensionKnown {
 
 interface Extensions {
   count: number;
-  extensions?: ExtensionInfo[];
+  extensions: ExtensionInfo[];
 }
 
 interface ExtensionProperties {
@@ -131,7 +131,8 @@ async function getExtensionInfo (api: ApiPromise, extension: InjectedExtension):
   }
 }
 
-async function getKnown (api: ApiPromise, extensions: InjectedExtension[]): Promise<ExtensionKnown[]> {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+async function getKnown (api: ApiPromise, extensions: InjectedExtension[], _: number): Promise<ExtensionKnown[]> {
   const all = await Promise.all(
     extensions.map((extension) => getExtensionInfo(api, extension))
   );
@@ -139,10 +140,11 @@ async function getKnown (api: ApiPromise, extensions: InjectedExtension[]): Prom
   return all.filter((info): info is ExtensionKnown => !!info);
 }
 
+const EMPTY_STATE = { count: 0, extensions: [] };
+
 export default function useExtensions (): Extensions {
   const { api, extensions, isApiReady, isDevelopment } = useApi();
   const [all, setAll] = useState<ExtensionKnown[] | undefined>();
-  const [state, setState] = useState<Extensions>({ count: 0 });
   const [trigger, setTrigger] = useState(0);
 
   useEffect((): () => void => {
@@ -156,14 +158,13 @@ export default function useExtensions (): Extensions {
   }, []);
 
   useEffect((): void => {
-    extensions && getKnown(api, extensions).then(setAll);
+    extensions && getKnown(api, extensions, trigger).then(setAll);
   }, [api, extensions, trigger]);
 
-  useEffect((): void => {
-    isDevelopment
-      ? setState({ count: 0, extensions: [] })
-      : isApiReady && all && setState(filterAll(api, all));
-  }, [all, api, isApiReady, isDevelopment]);
-
-  return state;
+  return useMemo(
+    () => isDevelopment || !isApiReady || !all
+      ? EMPTY_STATE
+      : filterAll(api, all),
+    [all, api, isApiReady, isDevelopment]
+  );
 }