From 308ff07ac15ae38a026e9f3088d4808ffbb58055 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Fri, 14 May 2021 14:40:00 +0300
Subject: [PATCH] Display parathread info (w/ api & specName) (#5280)

---
 .../page-parachains/src/Overview/ParachainInfo.tsx   | 10 +++++++++-
 .../page-parachains/src/Parathreads/Parathread.tsx   |  7 ++++++-
 packages/page-parachains/src/Parathreads/index.tsx   |  2 ++
 packages/react-api/src/Api.tsx                       | 12 ++++++------
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/page-parachains/src/Overview/ParachainInfo.tsx b/packages/page-parachains/src/Overview/ParachainInfo.tsx
index 3a1d37b2c3..7ec21f5e12 100644
--- a/packages/page-parachains/src/Overview/ParachainInfo.tsx
+++ b/packages/page-parachains/src/Overview/ParachainInfo.tsx
@@ -26,7 +26,7 @@ function ParachainInfo ({ className, id }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       {bestNumber && <div>{formatNumber(bestNumber)}</div>}
-      {runtimeVersion && <div className='version'>v{runtimeVersion.specVersion.toString()}</div>}
+      {runtimeVersion && <div className='version'><div className='media--1100'>{runtimeVersion.specName.toString()}</div><div className='media--1100'>/</div><div>{runtimeVersion.specVersion.toString()}</div></div>}
     </div>
   );
 }
@@ -34,5 +34,13 @@ function ParachainInfo ({ className, id }: Props): React.ReactElement<Props> {
 export default React.memo(styled(ParachainInfo)`
   .version {
     font-size: 0.85rem;
+    white-space: nowrap;
+
+    > div {
+      display: inline-block;
+      overflow: hidden;
+      max-width: 10em;
+      text-overflow: ellipsis;
+    }
   }
 `);
diff --git a/packages/page-parachains/src/Parathreads/Parathread.tsx b/packages/page-parachains/src/Parathreads/Parathread.tsx
index db85276825..6dc187ddb2 100644
--- a/packages/page-parachains/src/Parathreads/Parathread.tsx
+++ b/packages/page-parachains/src/Parathreads/Parathread.tsx
@@ -12,6 +12,7 @@ import { useAccounts, useApi, useCallMulti } from '@polkadot/react-hooks';
 import { formatNumber } from '@polkadot/util';
 
 import Lifecycle from '../Overview/Lifecycle';
+import ParachainInfo from '../Overview/ParachainInfo';
 import Periods from '../Overview/Periods';
 import { useTranslation } from '../translate';
 import { sliceHex } from '../util';
@@ -79,7 +80,11 @@ function Upcoming ({ id, leasePeriod, leases, nextAction }: Props): React.ReactE
           nextAction={nextAction}
         />
       </td>
-      <td className='all number together'>
+      <td className='all' />
+      <td className='number no-pad-left'>
+        <ParachainInfo id={id} />
+      </td>
+      <td className='number together'>
         {leasePeriod && leases && periods && (
           leases.length
             ? (
diff --git a/packages/page-parachains/src/Parathreads/index.tsx b/packages/page-parachains/src/Parathreads/index.tsx
index cf738d21bb..fe98e4e3a6 100644
--- a/packages/page-parachains/src/Parathreads/index.tsx
+++ b/packages/page-parachains/src/Parathreads/index.tsx
@@ -85,6 +85,8 @@ function Parathreads ({ actionsQueue, className, ids, leasePeriod, ownedIds }: P
     ['', 'media--1100'],
     [t('head'), 'start media--1500'],
     [t('lifecycle'), 'start'],
+    [],
+    [t('chain'), 'no-pad-left'],
     [t('leases')],
     ['', 'media--900']
   ]);
diff --git a/packages/react-api/src/Api.tsx b/packages/react-api/src/Api.tsx
index 0667f87a54..b250f53e73 100644
--- a/packages/react-api/src/Api.tsx
+++ b/packages/react-api/src/Api.tsx
@@ -91,7 +91,7 @@ async function getInjectedAccounts (injectedPromise: Promise<InjectedExtension[]
       }
     }));
   } catch (error) {
-    console.error('web3Enable', error);
+    console.error('web3Accounts', error);
 
     return [];
   }
@@ -109,13 +109,13 @@ async function retrieve (api: ApiPromise, injectedPromise: Promise<InjectedExten
     getInjectedAccounts(injectedPromise)
   ]);
 
-  // HACK Horrible hack to try and give some window to the DOT denomination
-  const ss58Format = api.consts.system?.ss58Prefix || chainProperties.ss58Format;
-  const properties = registry.createType('ChainProperties', { ss58Format, tokenDecimals: chainProperties.tokenDecimals, tokenSymbol: chainProperties.tokenSymbol });
-
   return {
     injectedAccounts,
-    properties,
+    properties: registry.createType('ChainProperties', {
+      ss58Format: api.consts.system?.ss58Prefix || chainProperties.ss58Format,
+      tokenDecimals: chainProperties.tokenDecimals,
+      tokenSymbol: chainProperties.tokenSymbol
+    }),
     systemChain: (systemChain || '<unknown>').toString(),
     systemChainType,
     systemName: systemName.toString(),