Hide para indicator on non relays (#5344)

packages/page-staking/src/Legend.tsx

@@ -10,9 +10,10 @@ import { useTranslation } from './translate';
 
 interface Props {
   className?: string;
+  isRelay?: boolean;
 }
 
-function Legend ({ className }: Props): React.ReactElement<Props> {
+function Legend ({ className, isRelay }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
@@ -24,13 +25,15 @@ function Legend ({ className }: Props): React.ReactElement<Props> {
         />
         {t('Next session')}
       </span>
-      <span>
-        <Badge
-          color='purple'
-          icon='vector-square'
-        />
-        {t('Para validator')}
-      </span>
+      {isRelay && (
+        <span>
+          <Badge
+            color='purple'
+            icon='vector-square'
+          />
+          {t('Para validator')}
+        </span>
+      )}
       <span>
         <Badge
           color='green'

packages/page-staking/src/Overview/Address/Status.tsx

@@ -13,6 +13,7 @@ interface Props {
   isElected: boolean;
   isMain?: boolean;
   isPara?: boolean;
+  isRelay?: boolean;
   nominators?: { nominatorId: string }[];
   onlineCount?: false | BN;
   onlineMessage?: boolean;
@@ -20,7 +21,7 @@ interface Props {
 
 const NO_NOMS: { nominatorId: string }[] = [];
 
-function Status ({ isElected, isMain, isPara, nominators = NO_NOMS, onlineCount, onlineMessage }: Props): React.ReactElement<Props> {
+function Status ({ isElected, isMain, isPara, isRelay, nominators = NO_NOMS, onlineCount, onlineMessage }: Props): React.ReactElement<Props> {
   const { allAccounts } = useAccounts();
   const blockCount = onlineCount && onlineCount.toNumber();
 
@@ -40,15 +41,16 @@ function Status ({ isElected, isMain, isPara, nominators = NO_NOMS, onlineCount,
         )
         : <Badge color='transparent' />
       }
-      {isPara
-        ? (
-          <Badge
-            color='purple'
-            icon='vector-square'
-          />
-        )
-        : <Badge color='transparent' />
-      }
+      {isRelay && (
+        isPara
+          ? (
+            <Badge
+              color='purple'
+              icon='vector-square'
+            />
+          )
+          : <Badge color='transparent' />
+      )}
       {isElected
         ? (
           <Badge

packages/page-staking/src/Overview/Address/index.tsx

@@ -123,6 +123,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
           isElected={isElected}
           isMain={isMain}
           isPara={isPara}
+          isRelay={!!(api.query.parasShared || api.query.shared)?.activeValidatorIndices}
           nominators={isMain ? nominators : nominatedBy}
           onlineCount={recentlyOnline?.blockCount}
           onlineMessage={recentlyOnline?.hasMessage}

packages/page-staking/src/Overview/CurrentList.tsx

@@ -187,7 +187,7 @@ function CurrentList ({ favorites, hasQueries, isIntentions, paraValidators = DE
           />
         }
         header={headerActiveRef.current}
-        legend={<Legend />}
+        legend={<Legend isRelay={!!(api.query.parasShared || api.query.shared)?.activeValidatorIndices} />}
       >
         {isLoading ? undefined : _renderRows(validators, true)}
       </Table>