Short info blurb for linked chains (#7989)

packages/apps-config/src/endpoints/types.ts

@@ -36,6 +36,7 @@ export interface LinkOption extends Option {
   summary?: string;
   teleport?: number[];
   textBy: string;
+  textRelay?: React.ReactNode;
   value: string;
   valueRelay?: string[];
 }

packages/apps-config/src/endpoints/util.ts

@@ -33,6 +33,9 @@ function expandLinked (input: LinkOption[]): LinkOption[] {
         expandLinked(entry.linked).map((child): LinkOption => {
           child.genesisHashRelay = entry.genesisHash;
           child.isChild = true;
+          child.textRelay = input.length
+            ? input[0].text
+            : undefined;
           child.valueRelay = valueRelay;
 
           return child;

packages/apps/src/Endpoints/Network.tsx

@@ -8,6 +8,7 @@ import styled from 'styled-components';
 
 import { ChainImg } from '@polkadot/react-components';
 
+import { useTranslation } from '../translate';
 import Url from './Url';
 
 interface Props {
@@ -18,7 +19,8 @@ interface Props {
   value: Network;
 }
 
-function NetworkDisplay ({ apiUrl, className = '', setApiUrl, value: { icon, isChild, isUnreachable, name, providers } }: Props): React.ReactElement<Props> {
+function NetworkDisplay ({ apiUrl, className = '', setApiUrl, value: { icon, isChild, isRelay, isUnreachable, name, nameRelay: relay, paraId, providers } }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const isSelected = useMemo(
     () => providers.some(({ url }) => url === apiUrl),
     [apiUrl, providers]
@@ -50,7 +52,21 @@ function NetworkDisplay ({ apiUrl, className = '', setApiUrl, value: { icon, isC
           logo={icon === 'local' ? 'empty' : (icon || 'empty')}
           withoutHl
         />
-        <div className='endpointValue'>{name}</div>
+        <div className='endpointValue'>
+          <div>{name}</div>
+          {isSelected && (isRelay || !!paraId) && (
+            <div className='endpointExtra'>
+              {isRelay
+                ? t<string>('Relay chain')
+                : paraId && paraId < 1000
+                  ? t<string>('{{relay}} System', { replace: { relay } })
+                  : paraId && paraId < 2000
+                    ? t<string>('{{relay}} Common', { replace: { relay } })
+                    : t<string>('{{relay}} Parachain', { replace: { relay } })
+              }
+            </div>
+          )}
+        </div>
       </div>
       {isSelected && providers.map(({ name, url }): React.ReactNode => (
         <Url
@@ -95,5 +111,12 @@ export default React.memo(styled(NetworkDisplay)`
     &+.endpointProvider {
       margin-top: -0.125rem;
     }
+
+    .endpointValue {
+      .endpointExtra {
+        font-size: 0.75rem;
+        opacity: 0.8;
+      }
+    }
   }
 `);

packages/apps/src/Endpoints/index.tsx

@@ -56,7 +56,10 @@ function combineEndpoints (endpoints: LinkOption[]): Group[] {
         prev.networks.push({
           icon: e.info,
           isChild: e.isChild,
+          isRelay: !!e.genesisHash,
           name: e.text as string,
+          nameRelay: e.textRelay as string,
+          paraId: e.paraId,
           providers: [prov]
         });
       }

packages/apps/src/Endpoints/types.ts

@@ -7,8 +7,11 @@ export interface Network {
   icon?: string;
   isChild?: boolean;
   isLightClient?: boolean;
+  isRelay?: boolean;
   isUnreachable?: boolean;
   name: string;
+  nameRelay?: string;
+  paraId?: number;
   providers: {
     name: string;
     url: string;