Only hide extension updates in settings on dev (polkadot-js#3678)

* Only hide extension updates in settings on dev

* Adjust color indicator for Centrifuge

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],

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)];
-};
+}

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}

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} />
     </>

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 (

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]
+  );
 }

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,18 +131,20 @@ 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))
   );
 
   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]
+  );
 }