diff --git a/packages/page-parachains/src/Overview/Parachain.tsx b/packages/page-parachains/src/Overview/Parachain.tsx
index 73d23a1be0..f77c16fc83 100644
--- a/packages/page-parachains/src/Overview/Parachain.tsx
+++ b/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 (
-
+
{formatNumber(id)} |
|
@@ -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
+ }
+ }
+`);
diff --git a/packages/react-components/src/ParaLink.tsx b/packages/react-components/src/ParaLink.tsx
index 02954545d0..4f53345632 100644
--- a/packages/react-components/src/ParaLink.tsx
+++ b/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 | 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 (
@@ -31,10 +37,15 @@ function ParaLink ({ className, id }: Props): React.ReactElement | null {
logo={info || 'empty'}
withoutHl
/>
- {text}
+ {links.length
+ ? (
+ {text}
+ )
+ : text
+ }
);
}
|