From b70c5ed748148d739da841b4332b7d042da26527 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Thu, 10 Nov 2022 15:07:41 +0200
Subject: [PATCH] Display icon for unlocked parachains (#8328)

* Display icon for unlocked parachains

* Adjust
---
 .../src/Overview/Parachain.tsx                | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/page-parachains/src/Overview/Parachain.tsx b/packages/page-parachains/src/Overview/Parachain.tsx
index f77c16fc83..3473f2df99 100644
--- a/packages/page-parachains/src/Overview/Parachain.tsx
+++ b/packages/page-parachains/src/Overview/Parachain.tsx
@@ -8,7 +8,7 @@ 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 { AddressMini, Badge, Expander, ParaLink } from '@polkadot/react-components';
 import { BlockToTime } from '@polkadot/react-query';
 import { BN, formatNumber } from '@polkadot/util';
 
@@ -90,8 +90,21 @@ function Parachain ({ bestNumber, className = '', id, lastBacked, lastInclusion,
 
   return (
     <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'>
+        <h1>{formatNumber(id)}</h1>
+      </td>
+      <td className='badge together'>
+        {paraInfo.paraInfo?.locked?.isFalse
+          ? (
+            <Badge
+              color='orange'
+              icon='unlock'
+            />
+          )
+          : <Badge color='transparent' />
+        }
+        <ParaLink id={id} />
+      </td>
       <td className='number media--1400'>
         {validators && validators[1].length !== 0 && (
           <Expander
@@ -172,4 +185,10 @@ export default React.memo(styled(Parachain)`
       opacity: 0.5
     }
   }
+
+  td.badge.together > div {
+    display: inline-block;
+    margin: 0 0.25rem 0 0;
+    vertical-align: middle;
+  }
 `);