Use fa icons for collectives/bridgehub (until available) (#8864)

* Use fa icons for collectives/bridgehub (until available)

* Adjust color for light/dark themes

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

@@ -85,7 +85,6 @@ import chainVara from './chains/vara.svg';
 import chainVirto from './chains/virto.png';
 import chainWatr from './chains/watr.png';
 import chainEggnet from './chains/webb.png';
-import chainWestendColl from './chains/westend-collectives.png';
 import extensionPolkadotJs from './extensions/polkadot-js.svg';
 import externalCommonwealth from './external/commonwealth.png';
 import externalDotreasury from './external/dotreasury.svg';
@@ -244,6 +243,9 @@ import nodeZero from './nodes/zero.svg';
 import emptyLogo from './empty.svg';
 // last-resort fallback, just something empty
 
+const chainWestendCollectives = { fa: 'people-group' };
+const chainWestendBridgeHub = { fa: 'bridge' };
+
 // Alphabetical overrides based on the actual matched chain name
 // NOTE: This is as retrieved via system.chain RPC
 export const chainLogos = Object.entries({
@@ -286,7 +288,7 @@ export const chainLogos = Object.entries({
   ChainX: nodeChainx,
   'Charcoal Testnet': nodeCentrifuge,
   Coinversation: chainCoinversation,
-  Collectives: chainWestendColl,
+  Collectives: chainWestendCollectives,
   'Competitors Club': chainCompetitorsClub,
   'Composable Finance': chainComposableFinance,
   'Contracts on Rococo': chainRococoContracts,
@@ -356,6 +358,7 @@ export const chainLogos = Object.entries({
   Konomi: nodeKonomi,
   Kpron: nodeApron,
   Kusama: chainKusama, // new name after CC3
+  'Kusama BridgeHub': chainWestendBridgeHub,
   'Kusama CC1': chainKusama,
   'Kusama CC2': chainKusama,
   'Kusama CC3': chainKusama,
@@ -481,7 +484,8 @@ export const chainLogos = Object.entries({
   'Watr Network': chainWatr,
   'Web3Games Plum': nodeWeb3games,
   Westend: nodeWestend,
-  'Westend Collectives': chainWestendColl,
+  'Westend BridgeHub': chainWestendBridgeHub,
+  'Westend Collectives': chainWestendCollectives,
   Westlake: nodeWestlake,
   Westmint: nodeStatemine,
   'Westmint Test': nodeStatemine,
@@ -827,6 +831,7 @@ export const namedLogos: Record<string, unknown> = {
   kpron: nodeApron,
   kulupu: nodeKulupu,
   kusama: chainKusama,
+  kusamaBridgeHub: chainWestendBridgeHub,
   kusari: nodeKusari,
   kylin: nodeKylin,
   laminar: nodeLaminar,
@@ -867,7 +872,7 @@ export const namedLogos: Record<string, unknown> = {
   pichiu: nodePichiu,
   polkadex: nodePolkadex,
   polkadot: nodePolkadot,
-  polkadotCollectives: chainWestendColl,
+  polkadotCollectives: chainWestendCollectives,
   polkafoundry: nodePolkaFoundry,
   polkasmith: nodePolkaSmith,
   polymesh: nodePolymesh,
@@ -1013,7 +1018,8 @@ export const namedLogos: Record<string, unknown> = {
   vln: nodeVln,
   web3games: nodeWeb3games,
   westend: nodeWestend,
-  westendCollectives: chainWestendColl,
+  westendBridgeHub: chainWestendBridgeHub,
+  westendCollectives: chainWestendCollectives,
   westendPichiu: nodePichiu,
   westendStandard: chainStandard,
   westlake: nodeWestlake,

packages/react-components/src/ChainImg.tsx

@@ -1,12 +1,16 @@
 // Copyright 2017-2023 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
+
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
 import { chainLogos, emptyLogos, namedLogos, nodeLogos, specLogos } from '@polkadot/apps-config';
 import { useApi } from '@polkadot/react-hooks';
 
+import Icon from './Icon';
+
 interface Props {
   className?: string;
   isInline?: boolean;
@@ -21,28 +25,43 @@ function sanitize (value?: string): string {
 
 function ChainImg ({ className = '', isInline, logo, onClick, withoutHl }: Props): React.ReactElement<Props> {
   const { specName, systemChain, systemName } = useApi();
-  const [isEmpty, img] = useMemo((): [boolean, string] => {
+  const [isEmpty, img, isFa] = useMemo((): [boolean, unknown, boolean] => {
     const found = logo && logo !== 'empty'
       ? namedLogos[logo]
       : chainLogos[sanitize(systemChain)] || nodeLogos[sanitize(systemName)] || specLogos[sanitize(specName)];
+    const imgBase = found || emptyLogos.empty;
+    const isFa = !!((imgBase as Record<string, string>).fa);
+    const img = isFa
+      ? (imgBase as Record<string, string>).fa
+      : imgBase;
 
-    return [!found || logo === 'empty', (found || emptyLogos.empty) as string];
+    return [!found || logo === 'empty', img, isFa];
   }, [logo, specName, systemChain, systemName]);
 
-  return (
-    <StyledImg
-      alt='chain logo'
-      className={`${className}${(isEmpty && !withoutHl) ? ' highlight--bg' : ''}${isInline ? ' isInline' : ''}`}
-      onClick={onClick}
-      src={img}
-    />
-  );
+  const iconClassName = `${className}${(isEmpty && !withoutHl) ? ' highlight--bg' : ''}${isInline ? ' isInline' : ''}`;
+
+  return isFa
+    ? (
+      <StyledIcon
+        className={iconClassName}
+        icon={img as IconName}
+      />
+    )
+    : (
+      <StyledImg
+        alt='chain logo'
+        className={iconClassName}
+        onClick={onClick}
+        src={img as string}
+      />
+    );
 }
 
-const StyledImg = styled.img`
+const STYLE = `
   background: white;
   border-radius: 50%;
   box-sizing: border-box;
+  color: #333;
 
   &.isInline {
     display: inline-block;
@@ -53,4 +72,7 @@ const StyledImg = styled.img`
   }
 `;
 
+const StyledIcon = styled(Icon)`${STYLE}`;
+const StyledImg = styled.img`${STYLE}`;
+
 export default React.memo(ChainImg);