Adjust icon based on spec (#5491)

* Adjust icon based on spec

* Rococo

* Remove unneeded console.error in tests

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

@@ -15,6 +15,17 @@ export const identityNodes: Record<string, string> = [
   ['subsocial-node', 'substrate'],
   ['substrate-node', 'substrate'],
   ['polymesh-node', 'substrate']
+].reduce((icons, [node, icon]): Record<string, string> => ({
+  ...icons,
+  [node.toLowerCase().replace(/-/g, ' ')]: icon
+}), {});
+
+export const identitySpec: Record<string, string> = [
+  ['rococo', 'polkadot'],
+  ['statemine', 'polkadot'],
+  ['statemint', 'polkadot'],
+  ['westend', 'polkadot'],
+  ['westmint', 'polkadot']
 ].reduce((icons, [spec, icon]): Record<string, string> => ({
   ...icons,
   [spec.toLowerCase().replace(/-/g, ' ')]: icon

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

@@ -2,19 +2,26 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { chainColors, nodeColors, specColors } from './colors';
-import { identityNodes } from './identityIcons';
+import { identityNodes, identitySpec } from './identityIcons';
 
 export * from './logos';
 
 function sanitize (value?: string): string {
-  return value?.toLowerCase().replace('-', ' ') || '';
+  return value?.toLowerCase().replace(/-/g, ' ') || '';
 }
 
-export function getSystemIcon (systemName: string): 'beachball' | 'polkadot' | 'substrate' {
+export function getSystemIcon (systemName: string, specName: string): 'beachball' | 'polkadot' | 'substrate' {
-  return (identityNodes[systemName.toLowerCase().replace(/-/g, ' ')] || 'substrate') as 'substrate';
+  return (
+    identityNodes[sanitize(systemName)] ||
+    identitySpec[sanitize(specName)] ||
+    'substrate'
+  ) as 'substrate';
 }
 
 export function getSystemColor (systemChain: string, systemName: string, specName: string): string | undefined {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return (
-  return chainColors[sanitize(systemChain)] || nodeColors[sanitize(systemName)] || specColors[sanitize(specName)];
+    chainColors[sanitize(systemChain)] ||
+    nodeColors[sanitize(systemName)] ||
+    specColors[sanitize(specName)]
+  );
 }

packages/page-democracy/src/util.spec.ts

@@ -17,25 +17,11 @@ const ACTUAL = {
 
 const registry = new TypeRegistry();
 
-function fmtBn (bn: BN): string {
-  return bn.toString().padStart(20).substr(0, 8);
-}
-
 describe('approxChanges', (): void => {
   it('approximates where the points are', (): void => {
     const threshold = registry.createType('VoteThreshold', 0);
-
-    console.time('approxChanges');
-
     const { changeAye, changeNay } = approxChanges(threshold, ACTUAL.sqrtElectorate, ACTUAL);
 
-    console.timeEnd('approxChanges');
-
-    console.error(
-      '\n', 'changeAye', fmtBn(changeAye), fmtBn(ACTUAL.votedAye.sub(changeAye)),
-      '\n', 'changeNay', fmtBn(changeNay), fmtBn(ACTUAL.votedNay.add(changeNay))
-    );
-
     expect(
       calcPassing(threshold, ACTUAL.sqrtElectorate, { ...ACTUAL, votedAye: ACTUAL.votedAye.sub(changeAye) })
     ).toBe(false);

packages/page-settings/src/useChainInfo.ts

@@ -17,7 +17,7 @@ function createInfo (api: ApiPromise, systemChain: string, systemName: string, s
     chain: systemChain,
     color: getSystemColor(systemChain, systemName, specName),
     genesisHash: api.genesisHash.toHex(),
-    icon: getSystemIcon(systemName),
+    icon: getSystemIcon(systemName, specName),
     metaCalls: Buffer.from(api.runtimeMetadata.asCallsOnly.toU8a()).toString('base64'),
     specVersion: api.runtimeVersion.specVersion.toNumber(),
     ss58Format: isNumber(api.registry.chainSS58) ? api.registry.chainSS58 : DEFAULT_SS58.toNumber(),

packages/react-components/src/IdentityIcon/index.tsx

@@ -25,8 +25,8 @@ interface Props {
   value?: AccountId | AccountIndex | Address | string | Uint8Array | null;
 }
 
-export function getIdentityTheme (systemName: string): 'substrate' {
+export function getIdentityTheme (systemName: string, specName: string): 'substrate' {
-  return ((settings.icon === 'default' && getSystemIcon(systemName)) || settings.icon) as 'substrate';
+  return ((settings.icon === 'default' && getSystemIcon(systemName, specName)) || settings.icon) as 'substrate';
 }
 
 function isCodec (value?: AccountId | AccountIndex | Address | string | Uint8Array | null): value is AccountId | AccountIndex | Address {
@@ -34,10 +34,10 @@ function isCodec (value?: AccountId | AccountIndex | Address | string | Uint8Arr
 }
 
 function IdentityIcon ({ className = '', prefix, size = 24, theme, value }: Props): React.ReactElement<Props> {
-  const { isEthereum, systemName } = useApi();
+  const { isEthereum, specName, systemName } = useApi();
   const { t } = useTranslation();
   const { queueAction } = useContext(StatusContext);
-  const thisTheme = theme || getIdentityTheme(systemName);
+  const thisTheme = theme || getIdentityTheme(systemName, specName);
   const Custom = thisTheme === 'robohash'
     ? RoboHash
     : undefined;