From 42028ee98e383c3a5f70cd760ff787c6f06f3784 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 4 Aug 2020 09:56:45 +0200
Subject: [PATCH] Parachain cleanups & FIXME's (#3328)

* Parachain cleanups & FIXME's

* Small cleanups in display
---
 .../src/Overview/Parachain.tsx                | 43 ++++++++++------
 .../src/Overview/Parachains.tsx               | 12 +++--
 .../page-parachains/src/Overview/Register.tsx | 14 +++---
 .../page-parachains/src/Overview/index.tsx    | 50 ++++---------------
 .../src/Parachain/Deregister.tsx              | 19 ++++---
 .../page-parachains/src/ParachainInfo.tsx     | 18 +++----
 6 files changed, 72 insertions(+), 84 deletions(-)

diff --git a/packages/page-parachains/src/Overview/Parachain.tsx b/packages/page-parachains/src/Overview/Parachain.tsx
index af9e530e34..0bf989c44c 100644
--- a/packages/page-parachains/src/Overview/Parachain.tsx
+++ b/packages/page-parachains/src/Overview/Parachain.tsx
@@ -2,14 +2,18 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { HeadData } from '@polkadot/types/interfaces';
 import { DeriveParachain } from '@polkadot/api-derive/types';
 
 import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import { Badge, Button, Icon } from '@polkadot/react-components';
-import ParachainInfo from '../ParachainInfo';
+import { useApi, useCall } from '@polkadot/react-hooks';
+import { Option } from '@polkadot/types';
+import { formatNumber } from '@polkadot/util';
 
+import ParachainInfo from '../ParachainInfo';
 import { useTranslation } from '../translate';
 
 interface Props {
@@ -19,8 +23,19 @@ interface Props {
 
 function Parachain ({ className = '', parachain: { didUpdate, id, info, pendingSwapId, relayDispatchQueueSize = 0 } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const history = useHistory();
+  const { api } = useApi();
+  const headHex = useCall<string | null>(api.query.parachains.heads, [id], {
+    transform: (headData: Option<HeadData>): string | null => {
+      if (headData.isNone) {
+        return null;
+      }
 
+      const hex = headData.toHex();
+
+      return `${hex.slice(0, 8)}…${hex.slice(-6)}`;
+    }
+  });
+  const history = useHistory();
   const _onClick = useCallback(
     (): void => {
       history.push(`/parachains/${id.toString()}`);
@@ -40,34 +55,26 @@ function Parachain ({ className = '', parachain: { didUpdate, id, info, pendingS
         <div>
           <Badge
             className='did-update'
-            color='green'
+            color={didUpdate ? 'green' : 'gray'}
             hover={
               didUpdate
                 ? t<string>('Updated in the latest block')
                 : t<string>('Not updated in the last block')
             }
-            info={
-              <Icon icon='check' />
-            }
-            isGray={!didUpdate}
+            info={<Icon icon='check' />}
           />
           <Badge
             className='pending-messages'
-            color='counter'
-            hover={t<string>('{{relayDispatchQueueSize}} dispatch messages pending', {
-              replace: {
-                relayDispatchQueueSize
-              }
-            })}
-            info={relayDispatchQueueSize}
-            isGray={relayDispatchQueueSize <= 0}
+            color={relayDispatchQueueSize ? 'counter' : 'gray'}
+            hover={t<string>('{{relayDispatchQueueSize}} dispatch messages pending', { replace: { relayDispatchQueueSize } })}
+            info={formatNumber(relayDispatchQueueSize)}
           />
         </div>
       </td>
       <td className='all info'>
         <ParachainInfo info={info} />
       </td>
-      <td className='all'></td>
+      <td className='start together headhex'>{headHex}</td>
       <td className='number pending-swap-id ui--media-small'>
         {pendingSwapId?.toString()}
       </td>
@@ -111,6 +118,10 @@ export default React.memo(styled(Parachain)`
     }
   }
 
+  td.headhex {
+    font-family: monospace;
+  }
+
   .did-update {
     margin-bottom: 0;
   }
diff --git a/packages/page-parachains/src/Overview/Parachains.tsx b/packages/page-parachains/src/Overview/Parachains.tsx
index e01db1f87e..6a75b8756e 100644
--- a/packages/page-parachains/src/Overview/Parachains.tsx
+++ b/packages/page-parachains/src/Overview/Parachains.tsx
@@ -12,22 +12,26 @@ import { useTranslation } from '../translate';
 import Parachain from './Parachain';
 
 interface Props {
-  parachains: DeriveParachain[];
+  parachains?: DeriveParachain[];
 }
 
 function Parachains ({ parachains }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   const header = useMemo(() => [
-    [t('parachains'), 'start', 4],
+    [t('parachains'), 'start', 3],
+    [t('heads'), 'start'],
     [t('swap to id')],
     [t('scheduling')],
     []
   ], [t]);
 
   return (
-    <Table header={header}>
-      {parachains.map((parachain): React.ReactNode => (
+    <Table
+      empty={t<string>('There are no registered parachains')}
+      header={header}
+    >
+      {parachains?.map((parachain): React.ReactNode => (
         <Parachain
           key={parachain.id.toString()}
           parachain={parachain}
diff --git a/packages/page-parachains/src/Overview/Register.tsx b/packages/page-parachains/src/Overview/Register.tsx
index 8960224895..a4181d46ca 100644
--- a/packages/page-parachains/src/Overview/Register.tsx
+++ b/packages/page-parachains/src/Overview/Register.tsx
@@ -16,8 +16,9 @@ import { Button, Dropdown, InputFile, InputNumber, InputWasm, Modal, TxButton }
 import { useTranslation } from '../translate';
 
 interface Props {
+  isDisabled: boolean;
   nextFreeId?: BN;
-  sudoKey: string;
+  sudoKey?: string;
 }
 
 type Scheduling = 'Always' | 'Dynamic';
@@ -30,7 +31,7 @@ const schedulingOptions = [{
   value: 'Dynamic'
 }];
 
-function Register ({ nextFreeId = BN_THOUSAND, sudoKey }: Props): React.ReactElement<Props> | null {
+function Register ({ isDisabled, nextFreeId = BN_THOUSAND, sudoKey }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const { isOpen, onClose, onOpen } = useModal();
@@ -59,12 +60,13 @@ function Register ({ nextFreeId = BN_THOUSAND, sudoKey }: Props): React.ReactEle
   const extrinsic = useMemo(
     (): SubmittableExtrinsic | null => {
       try {
-        return api.tx.registrar.registerPara(
+        // FIXME democracy
+        return api.tx.sudo.sudo(api.tx.registrar.registerPara(
           id,
           info,
           code ? u8aToHex(code) : null,
           initialHeadState ? u8aToString(initialHeadState) : null
-        );
+        ));
       } catch (error) {
         console.log(error);
 
@@ -79,6 +81,7 @@ function Register ({ nextFreeId = BN_THOUSAND, sudoKey }: Props): React.ReactEle
       <div className='ui--Row-buttons'>
         <Button
           icon='plus'
+          isDisabled={isDisabled || !sudoKey}
           label={t<string>('Register a parachain')}
           onClick={onOpen}
         />
@@ -136,11 +139,10 @@ function Register ({ nextFreeId = BN_THOUSAND, sudoKey }: Props): React.ReactEle
           <Modal.Actions onCancel={onClose}>
             <TxButton
               accountId={sudoKey}
+              extrinsic={extrinsic}
               isDisabled={!isIdValid || !isCodeValid || !isInitialHeadStateValid}
               onClick={onClose}
               onSendRef={onSendRef}
-              params={[extrinsic]}
-              tx={'sudo.sudo'}
             />
           </Modal.Actions>
         </Modal>
diff --git a/packages/page-parachains/src/Overview/index.tsx b/packages/page-parachains/src/Overview/index.tsx
index 87881f140c..33b8a074d9 100644
--- a/packages/page-parachains/src/Overview/index.tsx
+++ b/packages/page-parachains/src/Overview/index.tsx
@@ -6,67 +6,37 @@ import { DeriveParachain } from '@polkadot/api-derive/types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { Button, Icon, Spinner } from '@polkadot/react-components';
+import { Button } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
 import Parachains from './Parachains';
 import Register from './Register';
 import Summary from './Summary';
 
-import { useTranslation } from '../translate';
-
 interface Props {
   isMine?: boolean;
   sudoKey?: string;
 }
 
 function Overview ({ isMine, sudoKey }: Props): React.ReactElement<Props> {
-  const { t } = useTranslation();
   const { api } = useApi();
-  const parachains = useCall<DeriveParachain[]>(api.derive.parachains.overview) || null;
+  const parachains = useCall<DeriveParachain[]>(api.derive.parachains.overview);
   const nextFreeId = useCall<BN>(api.query.registrar.nextFreeId);
 
-  if (!parachains) {
-    return (
-      <Spinner />
-    );
-  }
-
-  const actions = isMine && sudoKey
-    ? (
+  return (
+    <>
+      <Summary
+        nextFreeId={nextFreeId}
+        parachainCount={parachains?.length || 0}
+      />
       <Button.Group>
         <Register
+          isDisabled={!isMine}
           nextFreeId={nextFreeId}
           sudoKey={sudoKey}
         />
       </Button.Group>
-    )
-    : null;
-
-  if (!!parachains && !parachains.length) {
-    return (
-      <>
-        {actions}
-        <article className='error padded'>
-          <div>
-            <Icon icon='ban' />
-            {t<string>('There are no registered parachains')}
-          </div>
-        </article>
-      </>
-    );
-  }
-
-  return (
-    <>
-      {actions}
-      <Summary
-        nextFreeId={nextFreeId}
-        parachainCount={parachains.length}
-      />
-      <Parachains
-        parachains={parachains}
-      />
+      <Parachains parachains={parachains} />
     </>
   );
 }
diff --git a/packages/page-parachains/src/Parachain/Deregister.tsx b/packages/page-parachains/src/Parachain/Deregister.tsx
index 21a7ebb237..b3e0ba2a82 100644
--- a/packages/page-parachains/src/Parachain/Deregister.tsx
+++ b/packages/page-parachains/src/Parachain/Deregister.tsx
@@ -5,7 +5,7 @@
 import { DeriveParachainInfo } from '@polkadot/api-derive/types';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 
-import React, { useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { useApi } from '@polkadot/react-hooks';
 
 import { Modal, Static, TxButton } from '@polkadot/react-components';
@@ -31,7 +31,8 @@ function Deregister ({ id, info, isOpen, onClose, onSubmit, sudoKey }: Props): R
   const extrinsic = useMemo(
     (): SubmittableExtrinsic | null => {
       try {
-        return api.tx.registrar.deregisterPara(id);
+        // FIXME democracy
+        return api.tx.sudo.sudo(api.tx.registrar.deregisterPara(id));
       } catch (error) {
         console.log(error);
 
@@ -41,10 +42,13 @@ function Deregister ({ id, info, isOpen, onClose, onSubmit, sudoKey }: Props): R
     [api, id]
   );
 
-  const onStart = (): void => {
-    onClose();
-    onSubmit();
-  };
+  const onStart = useCallback(
+    (): void => {
+      onClose();
+      onSubmit();
+    },
+    [onClose, onSubmit]
+  );
 
   return (
     <Modal
@@ -67,12 +71,11 @@ function Deregister ({ id, info, isOpen, onClose, onSubmit, sudoKey }: Props): R
       <Modal.Actions onCancel={onClose}>
         <TxButton
           accountId={sudoKey}
+          extrinsic={extrinsic}
           isDisabled={!id || !extrinsic}
           onClick={onClose}
           onSendRef={onSendRef}
           onStart={onStart}
-          params={[extrinsic]}
-          tx={'sudo.sudo'}
         />
       </Modal.Actions>
     </Modal>
diff --git a/packages/page-parachains/src/ParachainInfo.tsx b/packages/page-parachains/src/ParachainInfo.tsx
index fd5a21c895..9888a7de30 100644
--- a/packages/page-parachains/src/ParachainInfo.tsx
+++ b/packages/page-parachains/src/ParachainInfo.tsx
@@ -5,8 +5,7 @@
 import { DeriveParachainInfo } from '@polkadot/api-derive/types';
 
 import React from 'react';
-import styled from 'styled-components';
-import { AvatarItem } from '@polkadot/react-components';
+import { AvatarItem, Icon } from '@polkadot/react-components';
 
 import { useTranslation } from './translate';
 import { parachainName, parachainOwner } from './util';
@@ -27,7 +26,12 @@ function ParachainInfo ({ children, className = '', info, isBig }: Props): React
       icon={
         info?.icon
           ? <img src={info.icon} />
-          : <i className='icon chain' />
+          : (
+            <Icon
+              className='ui--highlight--bg'
+              icon='link'
+            />
+          )
       }
       isBig={isBig}
       subtitle={parachainOwner(t, info)}
@@ -38,10 +42,4 @@ function ParachainInfo ({ children, className = '', info, isBig }: Props): React
   );
 }
 
-export default React.memo(styled(ParachainInfo)`
-  & {
-    .icon.chain {
-      background: #e03997;
-    }
-  }
-`);
+export default React.memo(ParachainInfo);