Parachain cleanups & FIXME's (#3328)

* Parachain cleanups & FIXME's * Small cleanups in display
2020-08-04 09:56:45 +02:00 · 2020-08-04 09:56:45 +02:00 · 42028ee98e
commit 42028ee98e
parent cd9bc795cc
6 changed files with 72 additions and 84 deletions
--- 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;
  }
--- 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}
--- 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>
--- 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} />
    </>
  );
 }
--- 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>
--- 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);