Parachain proposals

package.json

@@ -12,15 +12,15 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^3.4.2-0",
-    "@polkadot/api-contract": "^3.4.2-0",
+    "@polkadot/api": "^3.4.2-1",
+    "@polkadot/api-contract": "^3.4.2-1",
     "@polkadot/keyring": "^5.2.3",
     "@polkadot/networks": "^5.2.3",
-    "@polkadot/types": "^3.4.2-0",
+    "@polkadot/types": "^3.4.2-1",
     "@polkadot/util": "^5.2.3",
     "@polkadot/util-crypto": "^5.2.3",
     "@polkadot/wasm-crypto": "^3.1.1",
-    "@polkadot/x-rxjs": "^3.4.2-0",
+    "@polkadot/x-rxjs": "^3.4.2-1",
     "babel-core": "^7.0.0-bridge.0",
     "styled-components": "^5.2.0",
     "typescript": "^4.1.3"

packages/page-accounts/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@babel/runtime": "^7.12.5",
     "@polkadot/react-components": "^0.75.2-1",
-    "@polkadot/vanitygen": "^0.25.2-1",
+    "@polkadot/vanitygen": "^0.25.2-2",
     "detect-browser": "^5.2.0",
     "file-saver": "^2.0.5"
   },

packages/page-contracts/package.json

@@ -10,6 +10,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@polkadot/api-contract": "^3.4.2-0"
+    "@polkadot/api-contract": "^3.4.2-1"
   }
 }

packages/page-parachains/src/Overview/Actions.tsx

@@ -6,30 +6,32 @@ import React from 'react';
 import { Button } from '@polkadot/react-components';
 import { useApi, useToggle } from '@polkadot/react-hooks';
 
-import Register from '../modals/Register';
+import Propose from '../modals/Propose';
 import { useTranslation } from '../translate';
 
 interface Props {
-  canRegister?: boolean;
+  className?: string;
 }
 
-function Actions ({ canRegister }: Props): React.ReactElement<Props> {
+function Actions (): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
-  const [showRegister, toggleRegister] = useToggle();
+  const [showPropose, togglePropose] = useToggle();
 
   return (
     <>
       <Button.Group>
-        <Button
-          icon='plus'
-          isDisabled={!canRegister || !api.tx.registrar?.registerParathread}
-          label={t<string>('Register')}
-          onClick={toggleRegister}
-        />
+        {api.query.proposeParachains && (
+          <Button
+            icon='plus'
+            isDisabled={true}
+            label={t<string>('Register')}
+            onClick={togglePropose}
+          />
+        )}
       </Button.Group>
-      {showRegister && (
-        <Register onClose={toggleRegister} />
+      {showPropose && (
+        <Propose onClose={togglePropose} />
       )}
     </>
   );

packages/page-parachains/src/Overview/Parachain.tsx

@@ -7,6 +7,7 @@ import type { BlockNumber, HeadData, ParaId } from '@polkadot/types/interfaces';
 import React from 'react';
 
 import { useApi, useCall } from '@polkadot/react-hooks';
+import { formatNumber } from '@polkadot/util';
 
 import { sliceHex } from './util';
 
@@ -18,7 +19,7 @@ interface Props {
 const transformHead = {
   transform: (headData: Option<HeadData>): string | null =>
     headData.isSome
-      ? sliceHex(headData.unwrap())
+      ? sliceHex(headData.unwrap(), 18)
       : null
 };
 
@@ -36,9 +37,7 @@ function Parachain ({ className = '', id }: Props): React.ReactElement<Props> {
 
   return (
     <tr className={className}>
-      <td className='number'>
-        <h1>{id.toString()}</h1>
-      </td>
+      <td className='number'><h1>{formatNumber(id)}</h1></td>
       <td />
       <td className='all start together hash'>{headHex}</td>
       <td className='number'>{watermark}</td>

packages/page-parachains/src/Overview/ParachainList.tsx

@@ -11,7 +11,6 @@ import { useTranslation } from '../translate';
 import Parachain from './Parachain';
 
 interface Props {
-  canRegister?: boolean;
   ids?: ParaId[];
 }
 

packages/page-parachains/src/Overview/Proposal.tsx

@@ -0,0 +1,55 @@
+// Copyright 2017-2021 @polkadot/app-parachains authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ProposalExt } from './types';
+
+import React, { useMemo } from 'react';
+
+import { AddressMini, AddressSmall, Badge } from '@polkadot/react-components';
+import { FormatBalance } from '@polkadot/react-query';
+import { formatNumber } from '@polkadot/util';
+
+import { sliceHex } from './util';
+
+interface Props {
+  proposal: ProposalExt;
+}
+
+function Proposal ({ proposal: { id, isApproved, proposal: { balance, genesisHead, name, proposer, validationCode, validators } } }: Props): React.ReactElement<Props> {
+  const initialHex = useMemo(
+    () => sliceHex(genesisHead, 8),
+    [genesisHead]
+  );
+
+  const validationHex = useMemo(
+    () => sliceHex(validationCode, 8),
+    [validationCode]
+  );
+
+  return (
+    <tr>
+      <td className='number'><h1>{formatNumber(id)}</h1></td>
+      <td className='badge'>
+        {isApproved && (
+          <Badge
+            color='green'
+            icon='check'
+          />
+        )}
+      </td>
+      <td className='start together'>{name.toUtf8()}</td>
+      <td className='address'><AddressSmall value={proposer} /></td>
+      <td className='balance'><FormatBalance value={balance} /></td>
+      <td className='start hash together'>{initialHex}</td>
+      <td className='start hash together'>{validationHex}</td>
+      <td className='address all'>{validators.map((validatorId) => (
+        <AddressMini
+          key={validatorId.toString()}
+          value={validatorId}
+        />
+      ))}</td>
+    </tr>
+  );
+}
+
+export default React.memo(Proposal);

packages/page-parachains/src/Overview/Proposals.tsx

@@ -0,0 +1,45 @@
+// Copyright 2017-2021 @polkadot/app-parachains authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useRef } from 'react';
+
+import { Table } from '@polkadot/react-components';
+
+import { useTranslation } from '../translate';
+import Proposal from './Proposal';
+import useProposals from './useProposals';
+
+interface Props {
+  className?: string;
+}
+
+function Proposals (): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const proposals = useProposals();
+
+  const headerRef = useRef([
+    [t('proposals'), 'start', 2],
+    [],
+    [t('proposer'), 'address'],
+    [t('balance')],
+    [t('initial state'), 'start'],
+    [t('validation'), 'start'],
+    [t('validators'), 'address']
+  ]);
+
+  return (
+    <Table
+      empty={proposals && t<string>('There are no pending proposals')}
+      header={headerRef.current}
+    >
+      {proposals?.map((proposal): React.ReactNode => (
+        <Proposal
+          key={proposal.id.toString()}
+          proposal={proposal}
+        />
+      ))}
+    </Table>
+  );
+}
+
+export default React.memo(Proposals);

packages/page-parachains/src/Overview/Upcoming.tsx

@@ -7,6 +7,7 @@ import type { ParaGenesisArgs, ParaId } from '@polkadot/types/interfaces';
 import React from 'react';
 
 import { useApi, useCall } from '@polkadot/react-hooks';
+import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import { sliceHex } from './util';
@@ -26,12 +27,10 @@ function Upcoming ({ id }: Props): React.ReactElement<Props> {
 
   return (
     <tr key={id.toString()}>
-      <td className='number'>
-        <h1>{id.toString()}</h1>
-      </td>
+      <td className='number'><h1>{formatNumber(id)}</h1></td>
       <td className='all start together hash'>
         {info && (
-          sliceHex(info.genesisHead)
+          sliceHex(info.genesisHead, 8)
         )}
       </td>
       <td className='start'>

packages/page-parachains/src/Overview/index.tsx

@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/app-parachains authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { bool } from '@polkadot/types';
 import type { ParaId } from '@polkadot/types/interfaces';
 
 import React from 'react';
@@ -10,40 +9,35 @@ import { useApi, useCall } from '@polkadot/react-hooks';
 
 import Actions from './Actions';
 import Parachains from './ParachainList';
+import Proposals from './Proposals';
 import Summary from './Summary';
 import Upcoming from './UpcomingList';
 
 interface Props {
   className?: string;
 }
 
-const transformRegister = {
-  transform: (value: bool): boolean => value.isTrue
-};
-
 function Overview (): React.ReactElement<Props> {
   const { api } = useApi();
   const paraIds = useCall<ParaId[]>(api.query.paras?.parachains);
   const upcomingIds = useCall<ParaId[]>(api.query.paras?.upcomingParas);
-  const canRegister = useCall<boolean>(api.query.registrar?.parathreadsRegistrationEnabled, [], transformRegister);
 
   return (
     <>
       <Summary
-        canRegister={canRegister}
         parachainCount={paraIds?.length}
         upcomingCount={upcomingIds?.length}
       />
-      <Actions canRegister={canRegister} />
+      <Actions />
       {api.query.paras && (
         <>
-          <Parachains
-            canRegister={canRegister}
-            ids={paraIds}
-          />
+          <Parachains ids={paraIds} />
           <Upcoming ids={upcomingIds} />
         </>
       )}
+      {api.query.parachainProposals && (
+        <Proposals />
+      )}
     </>
   );
 }

packages/page-parachains/src/Overview/types.tsx

@@ -0,0 +1,10 @@
+// Copyright 2017-2021 @polkadot/app-parachains authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ParachainProposal, ParaId } from '@polkadot/types/interfaces';
+
+export interface ProposalExt {
+  id: ParaId;
+  isApproved: boolean;
+  proposal: ParachainProposal;
+}

packages/page-parachains/src/Overview/useProposals.ts

@@ -0,0 +1,38 @@
+// Copyright 2017-2021 @polkadot/app-parachains authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Option } from '@polkadot/types';
+import type { ParachainProposal, ParaId } from '@polkadot/types/interfaces';
+import type { ProposalExt } from './types';
+
+import { useEffect, useState } from 'react';
+
+import { useApi, useCall, useIsMountedRef } from '@polkadot/react-hooks';
+
+function createExt (approvedIds: ParaId[], entries: [{ args: [ParaId] }, Option<ParachainProposal>][]): ProposalExt[] {
+  return entries
+    .filter(([, opt]) => opt.isSome)
+    .map(([{ args: [id] }, optProposal]) => ({
+      id,
+      isApproved: approvedIds.some((a) => a.eq(id)),
+      proposal: optProposal.unwrap()
+    }));
+}
+
+export default function useProposals (): ProposalExt[] | undefined {
+  const { api } = useApi();
+  const mountedRef = useIsMountedRef();
+  const [state, setState] = useState<ProposalExt[] | undefined>();
+  const approvedIds = useCall<ParaId[]>(api.query.proposeParachains?.approvedProposals);
+
+  useEffect((): void => {
+    approvedIds && api.query.proposeParachain.proposals
+      .entries()
+      .then((entries) =>
+        mountedRef.current && setState(createExt(approvedIds, entries as any))
+      )
+      .catch(console.error);
+  }, [api, approvedIds, mountedRef]);
+
+  return state;
+}

packages/page-parachains/src/Overview/util.ts

@@ -3,8 +3,8 @@
 
 import type { Codec } from '@polkadot/types/types';
 
-export function sliceHex (value: Codec): string {
+export function sliceHex (value: Codec, max: number): string {
   const hex = value.toHex();
 
-  return `${hex.slice(0, 18)}…${hex.slice(-16)}`;
+  return `${hex.slice(0, max + 2)}…${hex.slice(-max)}`;
 }

packages/page-parachains/src/modals/Register.tsx → packages/page-parachains/src/modals/Propose.tsx

@@ -19,9 +19,7 @@ interface CodeState {
   wasm: Uint8Array | null;
 }
 
-// sudo => parasSudoWrapper.sudoScheduleParaInitialize
-
-function Register ({ className, onClose }: Props): React.ReactElement<Props> {
+function Propose ({ className, onClose }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [accountId, setAccountId] = useState<string | null>(null);
@@ -39,8 +37,6 @@ function Register ({ className, onClose }: Props): React.ReactElement<Props> {
     []
   );
 
-  console.error(genesisState);
-
   return (
     <Modal
       className={className}
@@ -117,4 +113,4 @@ function Register ({ className, onClose }: Props): React.ReactElement<Props> {
   );
 }
 
-export default React.memo(Register);
+export default React.memo(Propose);

packages/react-api/package.json

@@ -15,9 +15,9 @@
   "homepage": "https://github.com/polkadot-js/apps/tree/master/packages/react-api#readme",
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@polkadot/api": "^3.4.2-0",
-    "@polkadot/extension-dapp": "^0.36.2-0",
-    "@polkadot/x-rxjs": "^3.4.2-0",
+    "@polkadot/api": "^3.4.2-1",
+    "@polkadot/extension-dapp": "^0.36.2-1",
+    "@polkadot/x-rxjs": "^3.4.2-1",
     "fflate": "^0.4.8"
   }
 }