Logo/colors based on specName (#5325)

packages/apps-config/src/ui/colors.ts

@@ -56,7 +56,6 @@ const chainRoccoTick = '#22bb22';
 const chainRoccoTrack = '#bb2222';
 const chainRoccoTrick = '#2222bb';
 const chainRiochain = '#4d87f6';
-const chainShell = '#2e86ab'; // '#0596FC';
 const chainSnakenet = '#f653a2';
 const chainWestend = '#da68a7';
 const chainGalois = '#000000';
@@ -118,11 +117,14 @@ const nodeZeitgeist = 'linear-gradient(180deg, rgba(32,90,172,1) 0%, rgba(26,72,
 const nodeZero = '#0099cc';
 const nodeZenlink = 'linear-gradient(45deg, #F20082 0%, #FF4D4D 100%)';
 
+// based on the spec name
+const specShell = '#2e86ab'; // '#0596FC';
+
 export { emptyColor };
 
 // Alphabetical overrides based on the actual matched chain name
 // NOTE: This is as retrieved via the system.chain RPC
-export const chainColors: Record<string, any> = [
+export const chainColors: Record<string, string> = [
   ['acala mandala pc1', chainRoccoAcala],
   ['acala mandala pc2', chainRoccoAcala],
   ['Apron PC1', chainApron],
@@ -165,7 +167,6 @@ export const chainColors: Record<string, any> = [
   ['Kusama CC1', chainKusama],
   ['Kusama CC2', chainKusama],
   ['Kusama CC3', chainKusama],
-  ['Kusama Shell 1000', chainShell],
   ['Kusama', chainKusama],
   ['laminar turbulence pc1', chainRococoLaminar],
   ['Litentry', chainLitentry],
@@ -197,7 +198,6 @@ export const chainColors: Record<string, any> = [
   ['RioChain CC-1', chainRiochain],
   ['Riochain Staging', chainRiochain],
   ['sherpax', chainChainx],
-  ['Shell', chainShell],
   ['Statemint Test', nodeStatemint],
   ['SubDAO PC1', chainSubDAO],
   ['Subsocial PC1', chainSubsocial],
@@ -215,14 +215,14 @@ export const chainColors: Record<string, any> = [
   ['Westlake', chainWestlake],
   ['Zenlink PC1', chainZenlink],
   ['ZERO.IO', chainZero]
-].reduce((colors, [chain, color]): Record<string, any> => ({
+].reduce((colors, [chain, color]): Record<string, string> => ({
   ...colors,
   [chain.toLowerCase()]: color
 }), {});
 
 // Alphabetical overrides based on the actual software node type
 // NOTE: This is as retrieved via the system.name RPC
-export const nodeColors: Record<string, any> = [
+export const nodeColors: Record<string, string> = [
   ['Apron Node', nodeApron],
   ['Bit.Country Node', nodeBitCountry],
   ['Bifrost Node', nodeBifrost],
@@ -272,7 +272,16 @@ export const nodeColors: Record<string, any> = [
   ['Zeitgeist Node', nodeZeitgeist],
   ['Zeitgeist Collator', nodeZeitgeist],
   ['Zenlink Collator', nodeZenlink]
-].reduce((colors, [node, color]): Record<string, any> => ({
+].reduce((colors, [node, color]): Record<string, string> => ({
   ...colors,
   [node.toLowerCase().replace(/-/g, ' ')]: color
 }), {});
+
+// Alphabetical overrides based on the actual software node type
+// NOTE: This is as retrieved via the system.name RPC
+export const specColors: Record<string, string> = [
+  ['shell', specShell]
+].reduce((colors, [spec, color]): Record<string, any> => ({
+  ...colors,
+  [spec.toLowerCase().replace(/-/g, ' ')]: color
+}), {});

packages/apps-config/src/ui/index.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2021 @polkadot/apps-config authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { chainColors, nodeColors } from './colors';
+import { chainColors, nodeColors, specColors } from './colors';
 import { identityNodes } from './identityIcons';
 
 export * from './logos';
@@ -14,7 +14,7 @@ export function getSystemIcon (systemName: string): 'beachball' | 'polkadot' | '
   return (identityNodes[systemName.toLowerCase().replace(/-/g, ' ')] || 'substrate') as 'substrate';
 }
 
-export function getSystemChainColor (systemChain: string, systemName: string): string | undefined {
+export function getSystemColor (systemChain: string, systemName: string, specName: string): string | undefined {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-  return chainColors[sanitize(systemChain)] || nodeColors[sanitize(systemName)];
+  return chainColors[sanitize(systemChain)] || nodeColors[sanitize(systemName)] || specColors[sanitize(specName)];
 }

packages/apps-config/src/ui/logos/index.ts

@@ -136,7 +136,6 @@ export const chainLogos: Record<string, unknown> = [
   ['Kusama CC1', chainKusama],
   ['Kusama CC2', chainKusama],
   ['Kusama CC3', chainKusama],
-  ['Kusama Shell 1000', nodeShell],
   ['Litentry', nodeLitentry],
   ['MathChain PC1', nodeMath],
   ['Moonbase Alpha', moonbeam],
@@ -160,7 +159,6 @@ export const chainLogos: Record<string, unknown> = [
   ['Rococo', chainRococo],
   ['RioChain CC-1', nodeRiochain],
   ['RioChain Staging', nodeRiochain],
-  ['Shell', nodeShell],
   ['Statemint Test', nodeStatemint],
   ['SubDAO PC1', nodeSubDAO],
   ['Subsocial', nodeSubsocial],
@@ -297,6 +295,14 @@ export const nodeLogos: Record<string, unknown> = [
   [(node as string).toLowerCase().replace(/-/g, ' ')]: logo
 }), {});
 
+// Alphabetical overrides based on the actual specName
+export const specLogos: Record<string, unknown> = [
+  ['shell', nodeShell]
+].reduce((logos, [spec, logo]): Record<string, unknown> => ({
+  ...logos,
+  [(spec as string).toLowerCase().replace(/-/g, ' ')]: logo
+}), {});
+
 // Alphabetical overrides when we pass an explicit logo name
 // NOTE: Matches with what is defined as "info" in settings/endpoints.ts
 // (Generally would be the 'network' key in the known ss58 as per

packages/apps/src/Apps.tsx

@@ -7,7 +7,7 @@ import React, { useContext, useMemo } from 'react';
 import styled, { ThemeContext } from 'styled-components';
 
 import AccountSidebar from '@polkadot/app-accounts/Sidebar';
-import { getSystemChainColor } from '@polkadot/apps-config';
+import { getSystemColor } from '@polkadot/apps-config';
 import GlobalStyle from '@polkadot/react-components/styles';
 import { useApi } from '@polkadot/react-hooks';
 import Signer from '@polkadot/react-signer';
@@ -21,11 +21,11 @@ export const PORTAL_ID = 'portals';
 
 function Apps ({ className = '' }: Props): React.ReactElement<Props> {
   const { theme } = useContext<ThemeDef>(ThemeContext);
-  const { systemChain, systemName } = useApi();
+  const { specName, systemChain, systemName } = useApi();
 
   const uiHighlight = useMemo(
-    () => getSystemChainColor(systemChain, systemName),
-    [systemChain, systemName]
+    () => getSystemColor(systemChain, systemName, specName),
+    [specName, systemChain, systemName]
   );
 
   return (

packages/page-settings/src/useChainInfo.ts

@@ -6,16 +6,16 @@ import type { ChainInfo } from './types';
 
 import { useMemo } from 'react';
 
-import { getSystemChainColor, getSystemIcon } from '@polkadot/apps-config';
+import { getSystemColor, getSystemIcon } from '@polkadot/apps-config';
 import { DEFAULT_DECIMALS, DEFAULT_SS58 } from '@polkadot/react-api';
 import { useApi } from '@polkadot/react-hooks';
 import { getSpecTypes } from '@polkadot/types-known';
 import { formatBalance, isNumber } from '@polkadot/util';
 
-function createInfo (api: ApiPromise, systemChain: string, systemName: string): ChainInfo {
+function createInfo (api: ApiPromise, systemChain: string, systemName: string, specName: string): ChainInfo {
   return {
     chain: systemChain,
-    color: getSystemChainColor(systemChain, systemName),
+    color: getSystemColor(systemChain, systemName, specName),
     genesisHash: api.genesisHash.toHex(),
     icon: getSystemIcon(systemName),
     metaCalls: Buffer.from(api.runtimeMetadata.asCallsOnly.toU8a()).toString('base64'),
@@ -28,12 +28,12 @@ function createInfo (api: ApiPromise, systemChain: string, systemName: string):
 }
 
 export default function useChainInfo (): ChainInfo | null {
-  const { api, isApiReady, systemChain, systemName } = useApi();
+  const { api, isApiReady, specName, systemChain, systemName } = useApi();
 
   return useMemo(
     () => isApiReady
-      ? createInfo(api, systemChain, systemName)
+      ? createInfo(api, systemChain, systemName, specName)
       : null,
-    [api, isApiReady, systemChain, systemName]
+    [api, isApiReady, specName, systemChain, systemName]
   );
 }

packages/react-api/src/Api.tsx

@@ -169,6 +169,8 @@ async function loadOnReady (api: ApiPromise, injectedPromise: Promise<InjectedEx
     isApiReady: true,
     isDevelopment: isEthereum ? false : isDevelopment,
     isEthereum,
+    specName: api.runtimeVersion.specName.toString(),
+    specVersion: api.runtimeVersion.specVersion.toString(),
     systemChain,
     systemName,
     systemVersion

packages/react-api/src/types.ts

@@ -21,6 +21,8 @@ export interface ApiState {
   isApiReady: boolean;
   isDevelopment: boolean;
   isEthereum: boolean;
+  specName: string;
+  specVersion: string;
   systemChain: string;
   systemName: string;
   systemVersion: string;

packages/react-components/src/ChainImg.tsx

@@ -4,7 +4,7 @@
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
-import { chainLogos, emptyLogos, namedLogos, nodeLogos } from '@polkadot/apps-config';
+import { chainLogos, emptyLogos, namedLogos, nodeLogos, specLogos } from '@polkadot/apps-config';
 import { useApi } from '@polkadot/react-hooks';
 
 interface Props {
@@ -20,14 +20,14 @@ function sanitize (value?: string): string {
 }
 
 function ChainImg ({ className = '', isInline, logo, onClick, withoutHl }: Props): React.ReactElement<Props> {
-  const { systemChain, systemName } = useApi();
+  const { specName, systemChain, systemName } = useApi();
   const [isEmpty, img] = useMemo((): [boolean, string] => {
     const found = logo
       ? namedLogos[logo]
-      : chainLogos[sanitize(systemChain)] || nodeLogos[sanitize(systemName)];
+      : chainLogos[sanitize(systemChain)] || nodeLogos[sanitize(systemName)] || specLogos[sanitize(specName)];
 
     return [!found || logo === 'empty', (found || emptyLogos.empty) as string];
-  }, [logo, systemChain, systemName]);
+  }, [logo, specName, systemChain, systemName]);
 
   return (
     <img