From 5fddc19c0e436559e401f8be834aab0a9f3b5560 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Wed, 6 Jan 2021 10:02:10 +0100 Subject: [PATCH] Expand upcoming parachain info (#4324) * Expand upcoming parachain info * Adjust * Display * unwelcome comment --- package.json | 8 +- packages/page-contracts/package.json | 2 +- .../src/Overview/Parachain.tsx | 25 ++-- .../{Parachains.tsx => ParachainList.tsx} | 9 +- .../page-parachains/src/Overview/Upcoming.tsx | 56 ++++---- .../src/Overview/UpcomingList.tsx | 41 ++++++ .../page-parachains/src/Overview/index.tsx | 4 +- packages/page-parachains/src/Overview/util.ts | 10 ++ .../page-parachains/src/modals/Register.tsx | 2 + packages/react-api/package.json | 4 +- yarn.lock | 126 +++++++++--------- 11 files changed, 164 insertions(+), 123 deletions(-) rename packages/page-parachains/src/Overview/{Parachains.tsx => ParachainList.tsx} (81%) create mode 100644 packages/page-parachains/src/Overview/UpcomingList.tsx create mode 100644 packages/page-parachains/src/Overview/util.ts diff --git a/package.json b/package.json index c95df0a30c..9c383fed86 100644 --- a/package.json +++ b/package.json @@ -12,15 +12,15 @@ "packages/*" ], "resolutions": { - "@polkadot/api": "^3.3.2-1", - "@polkadot/api-contract": "^3.3.2-1", + "@polkadot/api": "^3.3.2-2", + "@polkadot/api-contract": "^3.3.2-2", "@polkadot/keyring": "^5.2.3", "@polkadot/networks": "^5.2.3", - "@polkadot/types": "^3.3.2-1", + "@polkadot/types": "^3.3.2-2", "@polkadot/util": "^5.2.3", "@polkadot/util-crypto": "^5.2.3", "@polkadot/wasm-crypto": "^3.1.1", - "@polkadot/x-rxjs": "^3.3.2-1", + "@polkadot/x-rxjs": "^3.3.2-2", "babel-core": "^7.0.0-bridge.0", "styled-components": "^5.2.0", "typescript": "^4.1.3" diff --git a/packages/page-contracts/package.json b/packages/page-contracts/package.json index ab1786e9d2..e7aa899265 100644 --- a/packages/page-contracts/package.json +++ b/packages/page-contracts/package.json @@ -10,6 +10,6 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.12.5", - "@polkadot/api-contract": "^3.3.2-1" + "@polkadot/api-contract": "^3.3.2-2" } } diff --git a/packages/page-parachains/src/Overview/Parachain.tsx b/packages/page-parachains/src/Overview/Parachain.tsx index d473f320b6..7d7e3a010c 100644 --- a/packages/page-parachains/src/Overview/Parachain.tsx +++ b/packages/page-parachains/src/Overview/Parachain.tsx @@ -1,30 +1,25 @@ // Copyright 2017-2021 @polkadot/app-parachains authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ThemeProps } from '@polkadot/react-components/types'; import type { Option } from '@polkadot/types'; import type { BlockNumber, HeadData, ParaId } from '@polkadot/types/interfaces'; import React from 'react'; -import styled from 'styled-components'; import { useApi, useCall } from '@polkadot/react-hooks'; +import { sliceHex } from './util'; + interface Props { className?: string; id: ParaId; } const transformHead = { - transform: (headData: Option): string | null => { - if (headData.isSome) { - const hex = headData.unwrap().toHex(); - - return `${hex.slice(0, 18)}…${hex.slice(-16)}`; - } - - return null; - } + transform: (headData: Option): string | null => + headData.isSome + ? sliceHex(headData.unwrap()) + : null }; const transformMark = { @@ -45,14 +40,10 @@ function Parachain ({ className = '', id }: Props): React.ReactElement {

{id.toString()}

- {headHex} + {headHex} {watermark} ); } -export default React.memo(styled(Parachain)(({ theme }: ThemeProps) => ` - td.headhex { - font: ${theme.fontMono}; - } -`)); +export default React.memo(Parachain); diff --git a/packages/page-parachains/src/Overview/Parachains.tsx b/packages/page-parachains/src/Overview/ParachainList.tsx similarity index 81% rename from packages/page-parachains/src/Overview/Parachains.tsx rename to packages/page-parachains/src/Overview/ParachainList.tsx index 621b7f50a1..b649953da6 100644 --- a/packages/page-parachains/src/Overview/Parachains.tsx +++ b/packages/page-parachains/src/Overview/ParachainList.tsx @@ -4,7 +4,6 @@ import type { ParaId } from '@polkadot/types/interfaces'; import React, { useRef } from 'react'; -import styled from 'styled-components'; import { Table } from '@polkadot/react-components'; @@ -16,7 +15,7 @@ interface Props { ids?: ParaId[]; } -function Parachains ({ ids }: Props): React.ReactElement { +function ParachainList ({ ids }: Props): React.ReactElement { const { t } = useTranslation(); const headerRef = useRef([ @@ -40,8 +39,4 @@ function Parachains ({ ids }: Props): React.ReactElement { ); } -export default React.memo(styled(Parachains)` - tbody tr { - cursor: pointer; - } -`); +export default React.memo(ParachainList); diff --git a/packages/page-parachains/src/Overview/Upcoming.tsx b/packages/page-parachains/src/Overview/Upcoming.tsx index 6b65f1b245..a05fc1066a 100644 --- a/packages/page-parachains/src/Overview/Upcoming.tsx +++ b/packages/page-parachains/src/Overview/Upcoming.tsx @@ -1,44 +1,46 @@ // Copyright 2017-2021 @polkadot/app-parachains authors & contributors // SPDX-License-Identifier: Apache-2.0 -import type { ParaId } from '@polkadot/types/interfaces'; +import type { Option } from '@polkadot/types'; +import type { ParaGenesisArgs, ParaId } from '@polkadot/types/interfaces'; -import React, { useRef } from 'react'; -import styled from 'styled-components'; +import React from 'react'; -import { Table } from '@polkadot/react-components'; +import { useApi, useCall } from '@polkadot/react-hooks'; import { useTranslation } from '../translate'; +import { sliceHex } from './util'; interface Props { - ids?: ParaId[]; + id: ParaId; } -function Upcoming ({ ids }: Props): React.ReactElement { - const { t } = useTranslation(); +const transformGenesis = { + transform: (opt: Option) => opt.unwrapOr(null) +}; - const headerRef = useRef([ - [t('upcoming'), 'start'] - ]); +function Upcoming ({ id }: Props): React.ReactElement { + const { t } = useTranslation(); + const { api } = useApi(); + const info = useCall(api.query.paras.upcomingParasGenesis, [id], transformGenesis); return ( - ('There are no upcoming parachains')} - header={headerRef.current} - > - {ids?.map((id): React.ReactNode => ( - - - - ))} -
-

{id.toString()}

-
+ + +

{id.toString()}

+ + + {info && ( + sliceHex(info.genesisHead) + )} + + + {info && ( + info.parachain ? t('Yes') : t('No') + )} + + ); } -export default React.memo(styled(Upcoming)` - tbody tr { - cursor: pointer; - } -`); +export default React.memo(Upcoming); diff --git a/packages/page-parachains/src/Overview/UpcomingList.tsx b/packages/page-parachains/src/Overview/UpcomingList.tsx new file mode 100644 index 0000000000..7e1b1dc0db --- /dev/null +++ b/packages/page-parachains/src/Overview/UpcomingList.tsx @@ -0,0 +1,41 @@ +// Copyright 2017-2021 @polkadot/app-parachains authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import type { ParaId } from '@polkadot/types/interfaces'; + +import React, { useRef } from 'react'; + +import { Table } from '@polkadot/react-components'; + +import { useTranslation } from '../translate'; +import Upcoming from './Upcoming'; + +interface Props { + ids?: ParaId[]; +} + +function UpcomingList ({ ids }: Props): React.ReactElement { + const { t } = useTranslation(); + + const headerRef = useRef([ + [t('upcoming'), 'start'], + [undefined, 'all'], + [t('parachain'), 'start'] + ]); + + return ( + ('There are no upcoming parachains')} + header={headerRef.current} + > + {ids?.map((id): React.ReactNode => ( + + ))} +
+ ); +} + +export default React.memo(UpcomingList); diff --git a/packages/page-parachains/src/Overview/index.tsx b/packages/page-parachains/src/Overview/index.tsx index 401c4302e7..cea6e46243 100644 --- a/packages/page-parachains/src/Overview/index.tsx +++ b/packages/page-parachains/src/Overview/index.tsx @@ -9,9 +9,9 @@ import React from 'react'; import { useApi, useCall } from '@polkadot/react-hooks'; import Actions from './Actions'; -import Parachains from './Parachains'; +import Parachains from './ParachainList'; import Summary from './Summary'; -import Upcoming from './Upcoming'; +import Upcoming from './UpcomingList'; interface Props { className?: string; diff --git a/packages/page-parachains/src/Overview/util.ts b/packages/page-parachains/src/Overview/util.ts new file mode 100644 index 0000000000..874d03b0ae --- /dev/null +++ b/packages/page-parachains/src/Overview/util.ts @@ -0,0 +1,10 @@ +// Copyright 2017-2021 @polkadot/app-parachains authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import type { Codec } from '@polkadot/types/types'; + +export function sliceHex (value: Codec): string { + const hex = value.toHex(); + + return `${hex.slice(0, 18)}…${hex.slice(-16)}`; +} diff --git a/packages/page-parachains/src/modals/Register.tsx b/packages/page-parachains/src/modals/Register.tsx index 2251da1ace..83cbd8acba 100644 --- a/packages/page-parachains/src/modals/Register.tsx +++ b/packages/page-parachains/src/modals/Register.tsx @@ -19,6 +19,8 @@ interface CodeState { wasm: Uint8Array | null; } +// sudo => parasSudoWrapper.sudoScheduleParaInitialize + function Register ({ className, onClose }: Props): React.ReactElement { const { t } = useTranslation(); const { api } = useApi(); diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 05f26502bd..cc3bf9f885 100644 --- a/packages/react-api/package.json +++ b/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.3.2-1", + "@polkadot/api": "^3.3.2-2", "@polkadot/extension-dapp": "^0.36.1", - "@polkadot/x-rxjs": "^3.3.2-1", + "@polkadot/x-rxjs": "^3.3.2-2", "fflate": "^0.4.8" } } diff --git a/yarn.lock b/yarn.lock index 1ac286fd98..231c127a16 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1908,54 +1908,54 @@ __metadata: languageName: node linkType: hard -"@polkadot/api-contract@npm:^3.3.2-1": - version: 3.3.2-1 - resolution: "@polkadot/api-contract@npm:3.3.2-1" +"@polkadot/api-contract@npm:^3.3.2-2": + version: 3.3.2-2 + resolution: "@polkadot/api-contract@npm:3.3.2-2" dependencies: "@babel/runtime": ^7.12.5 - "@polkadot/api": 3.3.2-1 - "@polkadot/types": 3.3.2-1 + "@polkadot/api": 3.3.2-2 + "@polkadot/types": 3.3.2-2 "@polkadot/util": ^5.2.3 - "@polkadot/x-rxjs": 3.3.2-1 + "@polkadot/x-rxjs": 3.3.2-2 bn.js: ^4.11.9 - checksum: 073f9a984d136729201c7984a37492a8b2aab9063c9407a410ab28418a207a82a98914ba1aadde596da5f0c7045acfcf1023b1e1f14fcc9fb6d66b782b2f0c3f + checksum: 71312ffc4c8c44633b4ac0093e2d1a46c1ccdeff89108ea293a578525929d2bd4b5e3a1f87d2f3235b59367c4782bbc2592614408a379e391b228879013c4f97 languageName: node linkType: hard -"@polkadot/api-derive@npm:3.3.2-1": - version: 3.3.2-1 - resolution: "@polkadot/api-derive@npm:3.3.2-1" +"@polkadot/api-derive@npm:3.3.2-2": + version: 3.3.2-2 + resolution: "@polkadot/api-derive@npm:3.3.2-2" dependencies: "@babel/runtime": ^7.12.5 - "@polkadot/api": 3.3.2-1 - "@polkadot/rpc-core": 3.3.2-1 - "@polkadot/types": 3.3.2-1 + "@polkadot/api": 3.3.2-2 + "@polkadot/rpc-core": 3.3.2-2 + "@polkadot/types": 3.3.2-2 "@polkadot/util": ^5.2.3 "@polkadot/util-crypto": ^5.2.3 - "@polkadot/x-rxjs": 3.3.2-1 + "@polkadot/x-rxjs": 3.3.2-2 bn.js: ^4.11.9 - checksum: 337cadffacef10ca257711a9ec2afd19a86c0cb3fe9f155ae0307e3b0b8d1bdc253267fe32cc24c65d933c7ecee960cd4126367bfa5e7db1cfedfbbf46761800 + checksum: 8eef3a38c1ae6b696c7a2f9a328b2269ab6f0325f7b0360c341fb135cf54bd8cc455766a583a943e18f6e0be6258c13b61e26e51152a5d66053b5ed5392b6300 languageName: node linkType: hard -"@polkadot/api@npm:^3.3.2-1": - version: 3.3.2-1 - resolution: "@polkadot/api@npm:3.3.2-1" +"@polkadot/api@npm:^3.3.2-2": + version: 3.3.2-2 + resolution: "@polkadot/api@npm:3.3.2-2" dependencies: "@babel/runtime": ^7.12.5 - "@polkadot/api-derive": 3.3.2-1 + "@polkadot/api-derive": 3.3.2-2 "@polkadot/keyring": ^5.2.3 - "@polkadot/metadata": 3.3.2-1 - "@polkadot/rpc-core": 3.3.2-1 - "@polkadot/rpc-provider": 3.3.2-1 - "@polkadot/types": 3.3.2-1 - "@polkadot/types-known": 3.3.2-1 + "@polkadot/metadata": 3.3.2-2 + "@polkadot/rpc-core": 3.3.2-2 + "@polkadot/rpc-provider": 3.3.2-2 + "@polkadot/types": 3.3.2-2 + "@polkadot/types-known": 3.3.2-2 "@polkadot/util": ^5.2.3 "@polkadot/util-crypto": ^5.2.3 - "@polkadot/x-rxjs": 3.3.2-1 + "@polkadot/x-rxjs": 3.3.2-2 bn.js: ^4.11.9 eventemitter3: ^4.0.7 - checksum: fc22237a114354bd85517c0c79eb5126a24cbe3f61378c9d24ad9941d73fb94d1c3af4f7e4bc2b30b3f0f0d0b98573ad8f765e7f01b4245e236246ac1fdd8a9f + checksum: 672d2ecc03be8761500800f166da75afef4c1e88ddac9f3e4714145d6e3b8b75de9d96d97983a4212c49cb2b25d240896f59cbd7ddecd865ed3a49380961460b languageName: node linkType: hard @@ -2018,7 +2018,7 @@ __metadata: resolution: "@polkadot/app-contracts@workspace:packages/page-contracts" dependencies: "@babel/runtime": ^7.12.5 - "@polkadot/api-contract": ^3.3.2-1 + "@polkadot/api-contract": ^3.3.2-2 languageName: unknown linkType: soft @@ -2427,17 +2427,17 @@ __metadata: languageName: node linkType: hard -"@polkadot/metadata@npm:3.3.2-1": - version: 3.3.2-1 - resolution: "@polkadot/metadata@npm:3.3.2-1" +"@polkadot/metadata@npm:3.3.2-2": + version: 3.3.2-2 + resolution: "@polkadot/metadata@npm:3.3.2-2" dependencies: "@babel/runtime": ^7.12.5 - "@polkadot/types": 3.3.2-1 - "@polkadot/types-known": 3.3.2-1 + "@polkadot/types": 3.3.2-2 + "@polkadot/types-known": 3.3.2-2 "@polkadot/util": ^5.2.3 "@polkadot/util-crypto": ^5.2.3 bn.js: ^4.11.9 - checksum: f9619551bfe6d7fbe1a6545182f75b382efb1b7c31c2d07bf3ba355b72580b047d2f4ac7563c140545bdf8d6d5c5c0ac660a91aa299a5eeacf45452a38905fd5 + checksum: 623ddc7a16cf51dfda8b5160b721829374c75555ce12c7621a234176ec1466184d7049dfc968ae1e94676dd4930de6805e549e34b679475eeb7e07d58a5ba530 languageName: node linkType: hard @@ -2455,9 +2455,9 @@ __metadata: resolution: "@polkadot/react-api@workspace:packages/react-api" dependencies: "@babel/runtime": ^7.12.5 - "@polkadot/api": ^3.3.2-1 + "@polkadot/api": ^3.3.2-2 "@polkadot/extension-dapp": ^0.36.1 - "@polkadot/x-rxjs": ^3.3.2-1 + "@polkadot/x-rxjs": ^3.3.2-2 fflate: ^0.4.8 languageName: unknown linkType: soft @@ -2586,33 +2586,33 @@ __metadata: languageName: unknown linkType: soft -"@polkadot/rpc-core@npm:3.3.2-1": - version: 3.3.2-1 - resolution: "@polkadot/rpc-core@npm:3.3.2-1" +"@polkadot/rpc-core@npm:3.3.2-2": + version: 3.3.2-2 + resolution: "@polkadot/rpc-core@npm:3.3.2-2" dependencies: "@babel/runtime": ^7.12.5 - "@polkadot/metadata": 3.3.2-1 - "@polkadot/rpc-provider": 3.3.2-1 - "@polkadot/types": 3.3.2-1 + "@polkadot/metadata": 3.3.2-2 + "@polkadot/rpc-provider": 3.3.2-2 + "@polkadot/types": 3.3.2-2 "@polkadot/util": ^5.2.3 - "@polkadot/x-rxjs": 3.3.2-1 - checksum: b2b8e0f415495cd919317037384c711c731195b840a22ab4b3eef59a1ccebfddea0b9b4db5212e586b820bf09f3debbff1892915956ad01183f3a3b31bf54e90 + "@polkadot/x-rxjs": 3.3.2-2 + checksum: 273076a131700bdc1e8402c32ea7ebdd17a88a9e859189780929ce4c6e706ae738919edb0d910d265a4a5868cd0e330693f45e88efe22f6e39b3ae57905c8316 languageName: node linkType: hard -"@polkadot/rpc-provider@npm:3.3.2-1": - version: 3.3.2-1 - resolution: "@polkadot/rpc-provider@npm:3.3.2-1" +"@polkadot/rpc-provider@npm:3.3.2-2": + version: 3.3.2-2 + resolution: "@polkadot/rpc-provider@npm:3.3.2-2" dependencies: "@babel/runtime": ^7.12.5 - "@polkadot/types": 3.3.2-1 + "@polkadot/types": 3.3.2-2 "@polkadot/util": ^5.2.3 "@polkadot/util-crypto": ^5.2.3 "@polkadot/x-fetch": ^5.2.3 "@polkadot/x-ws": ^5.2.3 bn.js: ^4.11.9 eventemitter3: ^4.0.7 - checksum: fe92f2b18fda1d1b21cb3443a55c56e75798ba1ec536536b0c3d1edd128e2c7f0a4beafd9f85ea35fa6f342fb0719d72f3037220c4454294969ec897f945a1ab + checksum: bca3712ba8f783a66e46e06083d88b98d63f2685de21d391eec073c650d178cf8ec3aaa06198b3f0e8fe28bb3a122522da72dda3a715266a661cafd2c5a073b3 languageName: node linkType: hard @@ -2634,30 +2634,30 @@ __metadata: languageName: node linkType: hard -"@polkadot/types-known@npm:3.3.2-1": - version: 3.3.2-1 - resolution: "@polkadot/types-known@npm:3.3.2-1" +"@polkadot/types-known@npm:3.3.2-2": + version: 3.3.2-2 + resolution: "@polkadot/types-known@npm:3.3.2-2" dependencies: "@babel/runtime": ^7.12.5 - "@polkadot/types": 3.3.2-1 + "@polkadot/types": 3.3.2-2 "@polkadot/util": ^5.2.3 bn.js: ^4.11.9 - checksum: 7de99b98d9df7e2265badd857917e2e745b7f6e8cf249564cf7d4a0248ce4ce4a3ee7cd32ee7615e25d6bde27c970db47c4b0d79e4caef87256a424db8f39704 + checksum: bdbeb95a8c59a457957bcecbef72b704a62e0b848314e55f9f660ed747b128aca326d73577695be7c341e7ffa773f393c2a7fcf8b806932eea1c06ada1b96a85 languageName: node linkType: hard -"@polkadot/types@npm:^3.3.2-1": - version: 3.3.2-1 - resolution: "@polkadot/types@npm:3.3.2-1" +"@polkadot/types@npm:^3.3.2-2": + version: 3.3.2-2 + resolution: "@polkadot/types@npm:3.3.2-2" dependencies: "@babel/runtime": ^7.12.5 - "@polkadot/metadata": 3.3.2-1 + "@polkadot/metadata": 3.3.2-2 "@polkadot/util": ^5.2.3 "@polkadot/util-crypto": ^5.2.3 - "@polkadot/x-rxjs": 3.3.2-1 + "@polkadot/x-rxjs": 3.3.2-2 "@types/bn.js": ^4.11.6 bn.js: ^4.11.9 - checksum: e4a38cdbb1f9927f027563bcc7792a9421470153525f4553c509ef94b2ba47938c72334270bb272c456c170a498b8b86981eb113d45f745702b9d1c458986443 + checksum: 0be18355dccdf997d9e8044a58b50cd9fddc8058939784a1b1f71a4fcff9c916e0a7a1a1f70cc6aabedc5106503684be3449f4ce2f26222c1e34b9db51f18870 languageName: node linkType: hard @@ -2819,13 +2819,13 @@ __metadata: languageName: node linkType: hard -"@polkadot/x-rxjs@npm:^3.3.2-1": - version: 3.3.2-1 - resolution: "@polkadot/x-rxjs@npm:3.3.2-1" +"@polkadot/x-rxjs@npm:^3.3.2-2": + version: 3.3.2-2 + resolution: "@polkadot/x-rxjs@npm:3.3.2-2" dependencies: "@babel/runtime": ^7.12.5 rxjs: ^6.6.3 - checksum: dc0f3e4f5741887ce2936fbbd7fa06a1e821a6381e9eec39cfc9c0e89eb4234f610b5fb2832c706b086e079699b80ebbcdc3e438874146541c539a0524faaa9c + checksum: 583adf4075077fdc18c9680ac13ad2a0453c32acf417407310b233d4bcbcdd3e53be2deb9d8d662ba438b55be212dd157e926c698703084bd1f0412773ff9f9b languageName: node linkType: hard