Adjust endpoint logos with allowed empty (#4539)

* Adjust endpoint logos with allowed empty

* Displa parachain logos alongside

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

@@ -189,6 +189,7 @@ export const namedLogos: Record<string, unknown> = {
   rococoCrust: nodeCrust,
   rococoDarwinia: nodeDarwinia,
   rococoDataHighway: nodeDataHighway,
+  rococoEncointer: nodeEncointerNotee,
   rococoHydrate: chainHydrate,
   rococoKilt: nodeKilt,
   rococoLaminar: nodeLaminar,

packages/apps/src/Endpoints/Network.tsx

@@ -48,7 +48,9 @@ function NetworkDisplay ({ affinity, apiUrl, className = '', setApiUrl, value: {
       >
         <ChainImg
           className='endpointIcon'
-          logo={icon === 'local' ? 'empty' : icon}
+          isInline
+          logo={icon === 'local' ? 'empty' : (icon || 'empty')}
+          withoutHl
         />
         <div className='endpointValue'>{name}</div>
       </div>
@@ -78,12 +80,6 @@ export default React.memo(styled(NetworkDisplay)(({ theme }: ThemeProps) => `
     background: ${theme.bgTable};
   }
 
-  .endpointIcon {
-    height: 24px;
-    margin-right: 0.75rem;
-    width: 24px;
-  }
-
   .endpointSection {
     align-items: center;
     display: flex;

packages/page-parachains/src/Overview/Parachain.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Option, Vec } from '@polkadot/types';
-import type { Balance, BlockNumber, HeadData, Header, ParaId } from '@polkadot/types/interfaces';
+import type { BlockNumber, HeadData, Header, ParaId } from '@polkadot/types/interfaces';
 import type { Codec } from '@polkadot/types/types';
 
 import BN from 'bn.js';
@@ -10,7 +10,7 @@ import React, { useMemo } from 'react';
 
 import { Badge } from '@polkadot/react-components';
 import { useApi, useCall, useCallMulti, useParaApi } from '@polkadot/react-hooks';
-import { BlockToTime, FormatBalance } from '@polkadot/react-query';
+import { BlockToTime } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
 import { getChainLink, sliceHex } from '../util';
@@ -67,7 +67,6 @@ function Parachain ({ bestNumber, className = '', id, isScheduled, lastBacked, l
   const { api } = useApi();
   const { api: paraApi, endpoints } = useParaApi(id);
   const paraBest = useCall<BlockNumber>(paraApi?.derive.chain.bestNumber);
-  const paraIssu = useCall<Balance>(paraApi?.query.balances?.totalIssuance);
   const lastRelayNumber = useCall<BN>(lastInclusion && api.rpc.chain.getHeader, [lastInclusion && lastInclusion[1]], transformHeader);
   const paraInfo = useCallMulti<QueryState>([
     [api.query.paras.heads, id],
@@ -119,7 +118,6 @@ function Parachain ({ bestNumber, className = '', id, isScheduled, lastBacked, l
         }
       </td>
       <td className='number media--900'>{paraBest && <>{formatNumber(paraBest)}</>}</td>
-      <td className='number media--1100'>{paraIssu && <FormatBalance valueFormatted={paraIssu.toHuman()} />}</td>
       <td className='number media--1300'>
         {paraInfo.updateAt && bestNumber && (
           <>

packages/page-parachains/src/Overview/ParachainList.tsx

@@ -92,7 +92,6 @@ function ParachainList ({ ids, scheduled }: Props): React.ReactElement<Props> {
     [t('included (parent)'), undefined, 2],
     [t('backed')],
     [t('chain best'), 'media--900'],
-    [t('issuance'), 'media--1100'],
     [t('upgrade'), 'media--1300'],
     [t('ump/dmp/hrmp'), 'media--1200']
   ]);

packages/page-parachains/src/index.tsx

@@ -62,4 +62,10 @@ export default React.memo(styled(ParachainsApp)`
   .parachains--hidden {
     display: none;
   }
+
+  a.chainAlign {
+    height: 24px;
+    line-height: 24px;
+    vertical-align: top;
+  }
 `);

packages/page-parachains/src/util.tsx

@@ -6,6 +6,8 @@ import type { Codec } from '@polkadot/types/types';
 
 import React from 'react';
 
+import { ChainImg } from '@polkadot/react-components';
+
 export function sliceHex (value: Codec, max: number): string {
   const hex = value.toHex();
 
@@ -19,7 +21,19 @@ export function getChainLink (endpoints: LinkOption[]): React.ReactNode {
     return null;
   }
 
-  const { text, value } = endpoints[endpoints.length - 1];
+  const { info, text, value } = endpoints[endpoints.length - 1];
 
-  return <a href={`${window.location.origin}${window.location.pathname}?rpc=${encodeURIComponent(value)}`}>{text}</a>;
+  return (
+    <>
+      <ChainImg
+        isInline
+        logo={info || 'empty'}
+        withoutHl
+      />
+      <a
+        className='chainAlign'
+        href={`${window.location.origin}${window.location.pathname}?rpc=${encodeURIComponent(value)}`}
+      >{text}</a>
+    </>
+  );
 }

packages/react-components/src/ChainImg.tsx

@@ -9,18 +9,22 @@ import { useApi } from '@polkadot/react-hooks';
 
 interface Props {
   className?: string;
+  isInline?: boolean;
   logo?: keyof typeof namedLogos;
   onClick?: () => any;
+  withoutHl?: boolean;
 }
 
 function sanitize (value?: string): string {
   return value?.toLowerCase().replace('-', ' ') || '';
 }
 
-function ChainImg ({ className = '', logo, onClick }: Props): React.ReactElement<Props> {
+function ChainImg ({ className = '', isInline, logo, onClick, withoutHl }: Props): React.ReactElement<Props> {
   const { systemChain, systemName } = useApi();
   const [isEmpty, img] = useMemo((): [boolean, string] => {
-    const found: unknown = namedLogos[logo || ''] || chainLogos[sanitize(systemChain)] || nodeLogos[sanitize(systemName)];
+    const found = logo
+      ? namedLogos[logo]
+      : chainLogos[sanitize(systemChain)] || nodeLogos[sanitize(systemName)];
 
     return [!found || logo === 'empty', (found || emptyLogos.empty) as string];
   }, [logo, systemChain, systemName]);
@@ -28,7 +32,7 @@ function ChainImg ({ className = '', logo, onClick }: Props): React.ReactElement
   return (
     <img
       alt='chain logo'
-      className={`${className}${isEmpty ? ' highlight--bg' : ''}`}
+      className={`${className}${(isEmpty && !withoutHl) ? ' highlight--bg' : ''}${isInline ? ' isInline' : ''}`}
       onClick={onClick}
       src={img}
     />
@@ -39,4 +43,10 @@ export default React.memo(styled(ChainImg)`
   background: white;
   border-radius: 50%;
   box-sizing: border-box;
+
+  &.isInline {
+    height: 24px;
+    margin-right: 0.75rem;
+    width: 24px;
+  }
 `);

packages/react-components/src/Table/Body.tsx

@@ -71,7 +71,7 @@ export default React.memo(styled(Body)(({ theme }: ThemeProps) => `
     }
 
     &.badge {
-      padding: 0.5rem;
+      padding: 0.75rem 0.5rem 0.5rem;
     }
 
     &.button {