Adjust paras display (#7157)

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

@@ -6,6 +6,7 @@ import type { LeasePeriod, QueuedAction } from '../types';
 import type { EventMapInfo, ValidatorInfo } from './types';
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
 
 import { AddressMini, Expander, ParaLink } from '@polkadot/react-components';
 import { BlockToTime } from '@polkadot/react-query';
@@ -88,7 +89,7 @@ function Parachain ({ bestNumber, className = '', id, lastBacked, lastInclusion,
   }, [paraInfo, sessionValidators]);
 
   return (
-    <tr className={className}>
+    <tr className={`${className} ${(lastBacked || lastInclusion || paraInfo.watermark) ? '' : 'isDisabled'}`}>
       <td className='number'><h1>{formatNumber(id)}</h1></td>
       <td className='badge'><ParaLink id={id} /></td>
       <td className='number media--1400'>
@@ -165,4 +166,10 @@ function Parachain ({ bestNumber, className = '', id, lastBacked, lastInclusion,
   );
 }
 
-export default React.memo(Parachain);
+export default React.memo(styled(Parachain)`
+  &.isDisabled {
+    td {
+      opacity: 0.5
+    }
+  }
+`);

packages/react-components/src/ParaLink.tsx

@@ -3,7 +3,7 @@
 
 import type { BN } from '@polkadot/util';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
 import { useParaEndpoints } from '@polkadot/react-hooks';
@@ -17,12 +17,18 @@ interface Props {
 
 function ParaLink ({ className, id }: Props): React.ReactElement<Props> | null {
   const endpoints = useParaEndpoints(id);
+  const links = useMemo(
+    () => endpoints.filter(({ isDisabled, isUnreachable }) => !isDisabled && !isUnreachable),
+    [endpoints]
+  );
 
   if (!endpoints.length) {
     return null;
   }
 
-  const { info, text, value } = endpoints[endpoints.length - 1];
+  const { info, text, value } = links.length
+    ? links[links.length - 1]
+    : endpoints[0];
 
   return (
     <div className={className}>
@@ -31,10 +37,15 @@ function ParaLink ({ className, id }: Props): React.ReactElement<Props> | null {
         logo={info || 'empty'}
         withoutHl
       />
-      <a
-        className='chainAlign'
-        href={`${window.location.origin}${window.location.pathname}?rpc=${encodeURIComponent(value)}`}
-      >{text}</a>
+      {links.length
+        ? (
+          <a
+            className='chainAlign'
+            href={`${window.location.origin}${window.location.pathname}?rpc=${encodeURIComponent(value)}`}
+          >{text}</a>
+        )
+        : text
+      }
     </div>
   );
 }