From 39396c065ce766e31ef7356e5f157df80aa570f7 Mon Sep 17 00:00:00 2001 From: Jaco Date: Mon, 16 Jan 2023 11:39:17 +0200 Subject: [PATCH] Staking test app (#8822) * Staking test app * Split favorites * Pack rows --- packages/apps-routing/src/index.ts | 2 + packages/apps-routing/src/staking2.ts | 58 +++++ packages/apps/src/Apps.tsx | 16 ++ packages/page-staking/src/index.tsx | 16 -- packages/page-staking2/.skip-build | 0 packages/page-staking2/.skip-npm | 0 packages/page-staking2/LICENSE | 201 ++++++++++++++++++ packages/page-staking2/README.md | 1 + packages/page-staking2/package.json | 18 ++ .../src/Validators/Validator.tsx | 94 ++++++++ .../page-staking2/src/Validators/index.tsx | 78 +++++++ .../src/Validators/useExposure.ts | 79 +++++++ .../page-staking2/src/Validators/usePoints.ts | 36 ++++ packages/page-staking2/src/constants.ts | 6 + packages/page-staking2/src/index.tsx | 69 ++++++ packages/page-staking2/src/translate.ts | 10 + packages/page-staking2/src/types.ts | 8 + packages/page-staking2/src/useSessionInfo.ts | 34 +++ .../page-staking2/src/useValidatorsActive.ts | 19 ++ packages/page-staking2/tsconfig.build.json | 9 + .../src/Table/Column/Balance.tsx | 14 +- tsconfig.base.json | 2 + yarn.lock | 8 + 23 files changed, 759 insertions(+), 19 deletions(-) create mode 100644 packages/apps-routing/src/staking2.ts create mode 100644 packages/page-staking2/.skip-build create mode 100644 packages/page-staking2/.skip-npm create mode 100644 packages/page-staking2/LICENSE create mode 100644 packages/page-staking2/README.md create mode 100644 packages/page-staking2/package.json create mode 100644 packages/page-staking2/src/Validators/Validator.tsx create mode 100644 packages/page-staking2/src/Validators/index.tsx create mode 100644 packages/page-staking2/src/Validators/useExposure.ts create mode 100644 packages/page-staking2/src/Validators/usePoints.ts create mode 100644 packages/page-staking2/src/constants.ts create mode 100644 packages/page-staking2/src/index.tsx create mode 100644 packages/page-staking2/src/translate.ts create mode 100644 packages/page-staking2/src/types.ts create mode 100644 packages/page-staking2/src/useSessionInfo.ts create mode 100644 packages/page-staking2/src/useValidatorsActive.ts create mode 100644 packages/page-staking2/tsconfig.build.json diff --git a/packages/apps-routing/src/index.ts b/packages/apps-routing/src/index.ts index ef602e211f..c220e48840 100644 --- a/packages/apps-routing/src/index.ts +++ b/packages/apps-routing/src/index.ts @@ -35,6 +35,7 @@ import settings from './settings'; import signing from './signing'; import society from './society'; import staking from './staking'; +import staking2 from './staking2'; import storage from './storage'; import sudo from './sudo'; import techcomm from './techcomm'; @@ -54,6 +55,7 @@ export default function create (t: TFunction): Routes { transfer(t), teleport(t), staking(t), + staking2(t), collator(t), // governance v2 referenda(t), diff --git a/packages/apps-routing/src/staking2.ts b/packages/apps-routing/src/staking2.ts new file mode 100644 index 0000000000..4946b520b3 --- /dev/null +++ b/packages/apps-routing/src/staking2.ts @@ -0,0 +1,58 @@ +// Copyright 2017-2023 @polkadot/apps-routing authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import type { TFunction } from 'i18next'; +import type { ApiPromise } from '@polkadot/api'; +import type { PalletStakingExposure } from '@polkadot/types/lookup'; +import type { Route } from './types'; + +import Component from '@polkadot/app-staking2'; +import { ZERO_ACCOUNT } from '@polkadot/react-hooks/useWeight'; +import { unwrapStorageType } from '@polkadot/types/primitive/StorageKey'; +import { assert, BN_ONE } from '@polkadot/util'; + +function needsApiCheck (api: ApiPromise): boolean { + try { + // we need a known Exposure type + const { others: [{ value, who }], own, total } = api.registry.createType( + unwrapStorageType(api.registry, api.query.staking.erasStakers.creator.meta.type), + { others: [{ value: BN_ONE, who: ZERO_ACCOUNT }], own: BN_ONE, total: BN_ONE } + ); + + assert(total && own && value && who && total.eq(BN_ONE) && own.eq(BN_ONE) && value.eq(BN_ONE), 'Needs a known Exposure type'); + } catch { + console.warn('Unable to create known-shape Exposure type, disabling staking route'); + + return false; + } + + try { + // we need to be able to bond + api.tx.staking.bond(ZERO_ACCOUNT, BN_ONE, { Account: ZERO_ACCOUNT }); + } catch { + console.warn('Unable to create staking bond transaction, disabling staking route'); + + return false; + } + + return true; +} + +export default function create (t: TFunction): Route { + return { + Component, + display: { + isHidden: true, + needsApi: [ + 'query.session.validators', + 'query.staking.erasStakers', + 'tx.staking.bond' + ], + needsApiCheck + }, + group: 'network', + icon: 'certificate', + name: 'test-staking', + text: t('nav.staking', 'Staking', { ns: 'apps-routing' }) + }; +} diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx index 2ff976b5b7..9682d68f01 100644 --- a/packages/apps/src/Apps.tsx +++ b/packages/apps/src/Apps.tsx @@ -54,6 +54,22 @@ const StyledDiv = styled.div` display: flex; flex-direction: column; min-height: 100vh; + + ${[ + 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, + 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, + 20, 21, 22, 23, 24 + ].map((n) => ` + .greyAnim-${n} { + animation: greyAnim${n} 2s; + } + + @keyframes greyAnim${n} { + 0% { background: #a6a6a6; } + 50% { background: darkorange; } + 100% { background: #a6a6a6; } + } + `).join('')} `; export default React.memo(Apps); diff --git a/packages/page-staking/src/index.tsx b/packages/page-staking/src/index.tsx index e4b168472e..434a6cbf6b 100644 --- a/packages/page-staking/src/index.tsx +++ b/packages/page-staking/src/index.tsx @@ -248,22 +248,6 @@ const StyledMain = styled.main` color: var(--color-error); } } - - ${[ - 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, - 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, - 20, 21, 22, 23, 24 - ].map((n) => ` - .greyAnim-${n} { - animation: greyAnim${n} 2s; - } - - @keyframes greyAnim${n} { - 0% { background: #a6a6a6; } - 50% { background: darkorange; } - 100% { background: #a6a6a6; } - } - `).join('')} `; export default React.memo(StakingApp); diff --git a/packages/page-staking2/.skip-build b/packages/page-staking2/.skip-build new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/page-staking2/.skip-npm b/packages/page-staking2/.skip-npm new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/page-staking2/LICENSE b/packages/page-staking2/LICENSE new file mode 100644 index 0000000000..0d381b2e97 --- /dev/null +++ b/packages/page-staking2/LICENSE @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + +TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + +1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + +2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + +3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + +4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + +5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + +6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + +7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + +8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + +9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + +END OF TERMS AND CONDITIONS + +APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + +Copyright [yyyy] [name of copyright owner] + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/packages/page-staking2/README.md b/packages/page-staking2/README.md new file mode 100644 index 0000000000..28b56465ea --- /dev/null +++ b/packages/page-staking2/README.md @@ -0,0 +1 @@ +# @polkadot/app-fellowship diff --git a/packages/page-staking2/package.json b/packages/page-staking2/package.json new file mode 100644 index 0000000000..0139cae525 --- /dev/null +++ b/packages/page-staking2/package.json @@ -0,0 +1,18 @@ +{ + "bugs": "https://github.com/polkadot-js/apps/issues", + "homepage": "https://github.com/polkadot-js/apps/tree/master/packages/page-fellowship#readme", + "license": "Apache-2.0", + "name": "@polkadot/app-staking2", + "private": true, + "repository": { + "directory": "packages/page-staking2", + "type": "git", + "url": "https://github.com/polkadot-js/apps.git" + }, + "sideEffects": false, + "type": "module", + "version": "0.122.3-302-x", + "dependencies": { + "@babel/runtime": "^7.20.7" + } +} diff --git a/packages/page-staking2/src/Validators/Validator.tsx b/packages/page-staking2/src/Validators/Validator.tsx new file mode 100644 index 0000000000..48288676db --- /dev/null +++ b/packages/page-staking2/src/Validators/Validator.tsx @@ -0,0 +1,94 @@ +// Copyright 2017-2023 @polkadot/app-staking authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import type { BN } from '@polkadot/util'; + +import React, { useMemo } from 'react'; + +import { AddressSmall, Table, Tag } from '@polkadot/react-components'; +import { useToggle } from '@polkadot/react-hooks'; +import { FormatBalance } from '@polkadot/react-query'; + +import useExposure from './useExposure'; + +interface Props { + activeEra: BN | null; + className?: string; + isFavorite: boolean; + points?: string; + stashId: string; + toggleFavorite: (stashId: string) => void; +} + +interface PropsExpanded { + className?: string; + stashId: string; +} + +function ValidatorExpanded ({ className = '' }: PropsExpanded): React.ReactElement { + return ( + + + + + + ); +} + +function Validator ({ activeEra, className = '', isFavorite, points, stashId, toggleFavorite }: Props): React.ReactElement { + const [isExpanded, toggleExpanded] = useToggle(); + const exposure = useExposure(stashId, activeEra); + + const pointsAnimClass = useMemo( + () => (points && `greyAnim-${Date.now() % 25}`) || '', + [points] + ); + + return ( + <> + + + + + {points && ( + + )} + + + + + + + ( + + , {exposure.waiting.others.length}) + + ) + } + value={exposure?.clipped?.total} + withLoading + /> + + + {isExpanded && ( + + )} + + ); +} + +export default React.memo(Validator); diff --git a/packages/page-staking2/src/Validators/index.tsx b/packages/page-staking2/src/Validators/index.tsx new file mode 100644 index 0000000000..ffc3d0cd73 --- /dev/null +++ b/packages/page-staking2/src/Validators/index.tsx @@ -0,0 +1,78 @@ +// Copyright 2017-2023 @polkadot/app-staking authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import type { SessionInfo } from '../types'; + +import React, { useRef } from 'react'; + +import { Table } from '@polkadot/react-components'; + +import { useTranslation } from '../translate'; +import usePoints from './usePoints'; +import Validator from './Validator'; + +interface Props { + className?: string; + sessionInfo: SessionInfo; + toggleFavorite: (stashId: string) => void; + validatorsActive?: string[]; + validatorsFavorite?: string[]; +} + +function Validators ({ className = '', sessionInfo: { activeEra }, toggleFavorite, validatorsActive, validatorsFavorite }: Props): React.ReactElement { + const { t } = useTranslation(); + const points = usePoints(activeEra); + + const headerActive = useRef<[string?, string?, number?][]>([ + // favorite, details, expand + [t('validators'), 'start', 3] + ]); + + const headerFavorite = useRef<[string?, string?, number?][]>([ + // favorite, details, expand + [t('favorites'), 'start', 3] + ]); + + return ( + <> + {validatorsFavorite && ( + + {validatorsFavorite.map((stashId) => ( + + ))} +
+ )} + ('No session validators found')} + emptySpinner={t('Retrieving session validators')} + header={headerActive.current} + isSplit + > + {validatorsActive?.map((stashId) => ( + + ))} +
+ + ); +} + +export default React.memo(Validators); diff --git a/packages/page-staking2/src/Validators/useExposure.ts b/packages/page-staking2/src/Validators/useExposure.ts new file mode 100644 index 0000000000..98864d1f80 --- /dev/null +++ b/packages/page-staking2/src/Validators/useExposure.ts @@ -0,0 +1,79 @@ +// Copyright 2017-2023 @polkadot/app-staking authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import type { PalletStakingExposure } from '@polkadot/types/lookup'; + +import { useMemo } from 'react'; + +import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks'; +import { BN } from '@polkadot/util'; + +interface ExposureEntry { + who: string, + value: BN +} + +interface Exposure { + others: ExposureEntry[]; + own: BN; + total: BN; +} + +interface Result { + clipped?: Exposure; + exposure?: Exposure; + waiting?: { + others: ExposureEntry[], + total: BN + }; +} + +const OPT_EXPOSURE = { + transform: ({ others, own, total }: PalletStakingExposure): Exposure => ({ + others: others + .sort((a, b) => a.value.unwrap().cmp(b.value.unwrap())) + .map(({ value, who }) => ({ + value: value.unwrap(), + who: who.toString() + })), + own: own.unwrap(), + total: total.unwrap() + }) +}; + +function getResult (exposure?: Exposure, clipped?: Exposure): Result { + let waiting: Result['waiting']; + + if (exposure && clipped) { + const others = exposure.others.filter(({ who }) => + !clipped.others.find((c) => + who === c.who + ) + ); + + if (others.length) { + waiting = { others, total: others.reduce((total, { value }) => total.iadd(value), new BN(0)) }; + } + } + + return { clipped, exposure, waiting }; +} + +function useExposureImpl (stashId: string, activeEra: BN | null): Result | undefined { + const { api } = useApi(); + + const exposureParams = useMemo( + () => activeEra && [activeEra, stashId], + [activeEra, stashId] + ); + + const fullExposure = useCall(api.query.staking.erasStakers, exposureParams, OPT_EXPOSURE); + const clipExposure = useCall(api.query.staking.erasStakersClipped, exposureParams, OPT_EXPOSURE); + + return useMemo( + () => getResult(fullExposure, clipExposure), + [clipExposure, fullExposure] + ); +} + +export default createNamedHook('useExposure', useExposureImpl); diff --git a/packages/page-staking2/src/Validators/usePoints.ts b/packages/page-staking2/src/Validators/usePoints.ts new file mode 100644 index 0000000000..ce42c0a6c3 --- /dev/null +++ b/packages/page-staking2/src/Validators/usePoints.ts @@ -0,0 +1,36 @@ +// Copyright 2017-2023 @polkadot/app-staking authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import type { PalletStakingEraRewardPoints } from '@polkadot/types/lookup'; +import type { BN } from '@polkadot/util'; + +import { useMemo } from 'react'; + +import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks'; +import { BN_ZERO, formatNumber } from '@polkadot/util'; + +type Result = Record; + +const OPT_POINTS = { + transform: ({ individual }: PalletStakingEraRewardPoints): Result => + [...individual.entries()] + .filter(([, points]) => points.gt(BN_ZERO)) + .reduce((result: Result, [stashId, points]): Result => { + result[stashId.toString()] = formatNumber(points); + + return result; + }, {}) +}; + +function usePointsImpl (activeEra: BN | null): Result | undefined { + const { api } = useApi(); + + const pointsParams = useMemo( + () => activeEra && [activeEra], + [activeEra] + ); + + return useCall(activeEra && api.query.staking.erasRewardPoints, pointsParams, OPT_POINTS); +} + +export default createNamedHook('usePoints', usePointsImpl); diff --git a/packages/page-staking2/src/constants.ts b/packages/page-staking2/src/constants.ts new file mode 100644 index 0000000000..5611223939 --- /dev/null +++ b/packages/page-staking2/src/constants.ts @@ -0,0 +1,6 @@ +// Copyright 2017-2023 @polkadot/app-staking authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +export const MAX_NOMINATIONS = 16; + +export const STORE_FAVS_BASE = 'staking:favorites'; diff --git a/packages/page-staking2/src/index.tsx b/packages/page-staking2/src/index.tsx new file mode 100644 index 0000000000..f7165f61d0 --- /dev/null +++ b/packages/page-staking2/src/index.tsx @@ -0,0 +1,69 @@ +// Copyright 2017-2023 @polkadot/app-staking authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import type { AppProps as Props } from '@polkadot/react-components/types'; + +import React, { useMemo, useRef } from 'react'; +import { Route, Switch } from 'react-router'; + +import { Tabs } from '@polkadot/react-components'; +import { useFavorites } from '@polkadot/react-hooks'; + +import { STORE_FAVS_BASE } from './constants'; +import { useTranslation } from './translate'; +import useSessionInfo from './useSessionInfo'; +import useValidatorsActive from './useValidatorsActive'; +import Validators from './Validators'; + +function splitValidators (favorites: string[], validators?: string[]): { validatorsActive?: string[], validatorsFavorite?: string[] } { + if (!validators) { + return {}; + } + + const validatorsFavorite = validators.filter((a) => favorites.includes(a)); + + return validatorsFavorite.length + ? { validatorsActive: validators.filter((a) => !validatorsFavorite.includes(a)), validatorsFavorite } + : { validatorsActive: validators }; +} + +function StakingApp ({ basePath }: Props): React.ReactElement { + const { t } = useTranslation(); + const [favorites, toggleFavorite] = useFavorites(STORE_FAVS_BASE); + const validators = useValidatorsActive(); + const sessionInfo = useSessionInfo(); + + const { validatorsActive, validatorsFavorite } = useMemo( + () => splitValidators(favorites, validators), + [favorites, validators] + ); + + const itemsRef = useRef([ + { + isRoot: true, + name: 'sign', + text: t('Validators') + } + ]); + + return ( +
+ + + + + + +
+ ); +} + +export default React.memo(StakingApp); diff --git a/packages/page-staking2/src/translate.ts b/packages/page-staking2/src/translate.ts new file mode 100644 index 0000000000..7d40eca971 --- /dev/null +++ b/packages/page-staking2/src/translate.ts @@ -0,0 +1,10 @@ +// Copyright 2017-2023 @polkadot/app-staking authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import type { UseTranslationResponse } from 'react-i18next'; + +import { useTranslation as useTranslationBase } from 'react-i18next'; + +export function useTranslation (): UseTranslationResponse<'app-staking', undefined> { + return useTranslationBase('app-staking'); +} diff --git a/packages/page-staking2/src/types.ts b/packages/page-staking2/src/types.ts new file mode 100644 index 0000000000..bd61badf8b --- /dev/null +++ b/packages/page-staking2/src/types.ts @@ -0,0 +1,8 @@ +// Copyright 2017-2023 @polkadot/app-staking authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import type { BN } from '@polkadot/util'; + +export interface SessionInfo { + activeEra: BN | null; +} diff --git a/packages/page-staking2/src/useSessionInfo.ts b/packages/page-staking2/src/useSessionInfo.ts new file mode 100644 index 0000000000..0b6e8c7d0a --- /dev/null +++ b/packages/page-staking2/src/useSessionInfo.ts @@ -0,0 +1,34 @@ +// Copyright 2017-2023 @polkadot/app-staking authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import type { Option } from '@polkadot/types'; +import type { PalletStakingActiveEraInfo } from '@polkadot/types/lookup'; +import type { BN } from '@polkadot/util'; +import type { SessionInfo } from './types'; + +import { useMemo } from 'react'; + +import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks'; + +const EMPTY_RESULT: SessionInfo = { activeEra: null }; + +const OPT_ACTIVEERA = { + transform: (activeEra: Option): BN | null => + activeEra.isSome + ? activeEra.unwrap().index + : null +}; + +function useSessionInfoImpl (): SessionInfo { + const { api } = useApi(); + const activeEra = useCall(api.query.staking.activeEra, undefined, OPT_ACTIVEERA); + + return useMemo( + () => activeEra + ? { activeEra } + : EMPTY_RESULT, + [activeEra] + ); +} + +export default createNamedHook('useSessionInfo', useSessionInfoImpl); diff --git a/packages/page-staking2/src/useValidatorsActive.ts b/packages/page-staking2/src/useValidatorsActive.ts new file mode 100644 index 0000000000..b065145282 --- /dev/null +++ b/packages/page-staking2/src/useValidatorsActive.ts @@ -0,0 +1,19 @@ +// Copyright 2017-2023 @polkadot/app-staking authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import type { AccountId32 } from '@polkadot/types/interfaces'; + +import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks'; + +const OPT_VALIDATORS = { + transform: (validators: AccountId32[]): string[] => + validators.map((a) => a.toString()) +}; + +function useValidatorsActiveImpl (): string[] | undefined { + const { api } = useApi(); + + return useCall(api.query.session.validators, undefined, OPT_VALIDATORS); +} + +export default createNamedHook('useValidatorsActive', useValidatorsActiveImpl); diff --git a/packages/page-staking2/tsconfig.build.json b/packages/page-staking2/tsconfig.build.json new file mode 100644 index 0000000000..da24d9f225 --- /dev/null +++ b/packages/page-staking2/tsconfig.build.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "baseUrl": "..", + "outDir": "./build", + "rootDir": "./src" + }, + "references": [] +} diff --git a/packages/react-components/src/Table/Column/Balance.tsx b/packages/react-components/src/Table/Column/Balance.tsx index fde18b7fdc..391670798f 100644 --- a/packages/react-components/src/Table/Column/Balance.tsx +++ b/packages/react-components/src/Table/Column/Balance.tsx @@ -10,12 +10,14 @@ import { FormatBalance } from '@polkadot/react-query'; export interface Props { className?: string; colSpan?: number; + label?: React.ReactNode; + labelPost?: React.ReactNode; rowSpan?: number; value?: BN | null; withLoading?: boolean; } -function Balance ({ className = '', colSpan, rowSpan, value, withLoading }: Props): React.ReactElement { +function Balance ({ className = '', colSpan, label, labelPost, rowSpan, value, withLoading }: Props): React.ReactElement { return ( {value - ? + ? ( + + ) : withLoading && ( ) diff --git a/tsconfig.base.json b/tsconfig.base.json index 6a16612fa7..8fde6b2cae 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -76,6 +76,8 @@ "@polkadot/app-society/*": ["page-society/src/*"], "@polkadot/app-staking": ["page-staking/src"], "@polkadot/app-staking/*": ["page-staking/src/*"], + "@polkadot/app-staking2": ["page-staking2/src"], + "@polkadot/app-staking2/*": ["page-staking2/src/*"], "@polkadot/app-storage": ["page-storage/src"], "@polkadot/app-storage/*": ["page-storage/src/*"], "@polkadot/app-sudo": ["page-sudo/src"], diff --git a/yarn.lock b/yarn.lock index 1a01b827e8..ba84135c71 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3098,6 +3098,14 @@ __metadata: languageName: unknown linkType: soft +"@polkadot/app-staking2@workspace:packages/page-staking2": + version: 0.0.0-use.local + resolution: "@polkadot/app-staking2@workspace:packages/page-staking2" + dependencies: + "@babel/runtime": ^7.20.7 + languageName: unknown + linkType: soft + "@polkadot/app-staking@workspace:packages/page-staking": version: 0.0.0-use.local resolution: "@polkadot/app-staking@workspace:packages/page-staking"