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 + }
); }