Skip to content

Staking Next Page #11483

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 38 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 29 commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
6217628
feat: initialized staking-next page
ap211unitech Apr 3, 2025
a2d53d9
feat: enhance staking-next page with dynamic tabs and translation sup…
ap211unitech Apr 3, 2025
d31da2b
feat: enabled payouts page for staking-next
ap211unitech Apr 10, 2025
739064b
feat: enabled pools page for staking-next
ap211unitech Apr 10, 2025
57d61ae
feat: enabled bags page for staking-next
ap211unitech Apr 10, 2025
5df46e4
fix: build errors
ap211unitech Apr 10, 2025
a18b2b8
chore: added translation files
ap211unitech Apr 10, 2025
cea2d33
refactor: relay and system staking page
ap211unitech Apr 11, 2025
fdce3a4
feat: enabled overview page for staking-next
ap211unitech Apr 11, 2025
723e46d
feat: enabled actions page for staking-next
ap211unitech Apr 11, 2025
294ad9b
feat: enabled targets page for staking-next
ap211unitech Apr 11, 2025
21ef80b
feat: enabled query page for staking-next
ap211unitech Apr 11, 2025
78cb444
feat: add Command Center component and integrate with Relay Staking Page
ap211unitech Apr 14, 2025
20aa25c
feat: limit event display to a maximum of 5 and adjust styling in Com…
ap211unitech Apr 14, 2025
728e73b
feat: display more info for relay command center
ap211unitech Apr 14, 2025
f0615b0
chore: added translations
ap211unitech Apr 15, 2025
d4e9e31
refactor: relay section for command center
ap211unitech Apr 15, 2025
11e1691
feat: storage fetch for ah api
ap211unitech Apr 15, 2025
ad9ad08
feat: integrate Command Center into StakingApp routing
ap211unitech Apr 15, 2025
149fd3b
feat: add AssetHubSection component and update RelaySection styling
ap211unitech Apr 15, 2025
103ca72
chore: added translation
ap211unitech Apr 15, 2025
477159d
feat: implement API check for staking-next route
ap211unitech Apr 15, 2025
5ad5cfa
feat: enhance AssetHubSection with detailed multiblock and staking su…
ap211unitech Apr 15, 2025
822f7cd
chore: added translations
ap211unitech Apr 16, 2025
4a8ca8c
chore: delete folder
ap211unitech Apr 16, 2025
d4e01f4
chore: added folders
ap211unitech Apr 16, 2025
18146d7
feat: update layout and styling in CommandCenter components
ap211unitech May 7, 2025
49abc2d
feat: improve layout of relay chain and events summary in AssetHubSec…
ap211unitech May 7, 2025
6eb4020
feat: add Slashes component to StakingApp and update TypeScript paths
ap211unitech May 12, 2025
58c2152
feat: enhance CommandCenter with relay and para endpoints integration
ap211unitech May 19, 2025
30707a9
feat: refactor CommandCenter to integrate relay and para endpoints wi…
ap211unitech May 19, 2025
9263093
feat: enhance AssetHubSection and RelaySection with API connection in…
ap211unitech May 19, 2025
1505d35
feat: enhance CommandCenter and RelaySection with children prop and d…
ap211unitech May 19, 2025
9f3214e
feat: improve API disconnection handling and reset state in CommandCe…
ap211unitech May 19, 2025
4028536
feat: improve command center API handling and enhance relay section s…
ap211unitech May 20, 2025
19a75a2
feat: add translations for Active Validators and All Validators in lo…
ap211unitech May 21, 2025
a7e6758
feat: update route path for targets to all-validators in StakingApp
ap211unitech May 21, 2025
204baad
feat: update README with details on Asset Hub migration and staking w…
ap211unitech May 21, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/apps-routing/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import settings from './settings.js';
import signing from './signing.js';
import society from './society.js';
import staking from './staking.js';
import stakingNext from './staking-next.js';
import staking2 from './staking2.js';
import stakingLegacy from './stakingLegacy.js';
import storage from './storage.js';
Expand All @@ -58,6 +59,8 @@ export default function create (t: TFunction): Routes {
poll(t),
transfer(t),
teleport(t),
// Staking for AssetHub Migration
stakingNext(t),
staking(t),
staking2(t),
// Legacy staking Pre v14 pallet version.
Expand Down
29 changes: 29 additions & 0 deletions packages/apps-routing/src/staking-next.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
// Copyright 2017-2025 @polkadot/apps-routing authors & contributors
// SPDX-License-Identifier: Apache-2.0

import type { ApiPromise } from '@polkadot/api';
import type { Route, TFunction } from './types.js';

import Component from '@polkadot/app-staking-next';

function needsApiCheck (api: ApiPromise): boolean {
try {
return !!((api.tx.stakingNextAhClient) || (api.tx.staking && api.tx.stakingNextRcClient));
} catch {
return false;
}
}

export default function create (t: TFunction): Route {
return {
Component,
display: {
needsApi: [],
needsApiCheck
},
group: 'network',
icon: 'certificate',
name: 'staking-next',
text: t('nav.staking-next', 'Staking Next', { ns: 'apps-routing' })
};
}
1 change: 1 addition & 0 deletions packages/apps-routing/tsconfig.build.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
{ "path": "../page-signing/tsconfig.build.json" },
{ "path": "../page-society/tsconfig.build.json" },
{ "path": "../page-staking/tsconfig.build.json" },
{ "path": "../page-staking-next/tsconfig.build.json" },
{ "path": "../page-staking2/tsconfig.build.json" },
{ "path": "../page-staking-legacy/tsconfig.build.json" },
{ "path": "../page-storage/tsconfig.build.json" },
Expand Down
28 changes: 28 additions & 0 deletions packages/apps/public/locales/en/app-staking-next.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"Accounts": "Accounts",
"Asset Hub chain": "Asset Hub chain",
"Asset Hub client pallet(AhClient) is blocked currently, useful for migration signal from the fellowship.": "Asset Hub client pallet(AhClient) is blocked currently, useful for migration signal from the fellowship.",
"Bags": "Bags",
"Command Center": "Command Center",
"No events available": "No events available",
"Overview": "Overview",
"Payouts": "Payouts",
"Pools": "Pools",
"Relay chain": "Relay chain",
"Slashes": "Slashes",
"Targets": "Targets",
"There is a validator set queued in ah-client.": "There is a validator set queued in ah-client.",
"Validator stats": "Validator stats",
"active era": "active era",
"current era": "current era",
"era session index": "era session index",
"events": "events",
"historical range": "historical range",
"id": "id",
"multiblock phase": "multiblock phase",
"multiblock queued score": "multiblock queued score",
"number of validators": "number of validators",
"session": "session",
"signed submissions": "signed submissions",
"snapshot range": "snapshot range"
}
1 change: 1 addition & 0 deletions packages/apps/public/locales/en/apps-routing.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"nav.signing": "Sign and verify",
"nav.society": "Society",
"nav.staking": "Staking",
"nav.staking-next": "Staking Next",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Naming the Section Staking Next might be confusing for anyone outside of the context of this task, can be rename it to something more descriptive?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure what to do here 🤔, this is basically route name & "Staking Next" is the term we are using now.

"nav.storage": "Chain state",
"nav.sudo": "Sudo",
"nav.tech-comm": "Tech. comm.",
Expand Down
1 change: 1 addition & 0 deletions packages/apps/public/locales/en/index.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"app-signing.json",
"app-society.json",
"app-staking-legacy.json",
"app-staking-next.json",
"app-staking.json",
"app-staking2.json",
"app-storage.json",
Expand Down
13 changes: 13 additions & 0 deletions packages/apps/public/locales/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,8 @@
"Approving of all or none of the options is equivalent and will not affect the outcome of the poll.": "",
"As a council member, you can suggest an initial value for the tip, each other council member can suggest their own.": "",
"As such it is recommended that you setup a proxy to control operations via the stash.": "",
"Asset Hub chain": "",
"Asset Hub client pallet(AhClient) is blocked currently, useful for migration signal from the fellowship.": "",
"At block": "",
"Auctions": "",
"Auctions will be deprecated in favor of Coretime. When Coretime is active in Polkadot, this page will be removed.": "",
Expand Down Expand Up @@ -175,6 +177,7 @@
"Close deadline": "",
"Close proposal": "",
"Color": "",
"Command Center": "",
"Committee prime member, default voting": "",
"Completed": "",
"Confirm ABI removal": "",
Expand Down Expand Up @@ -953,6 +956,7 @@
"There are no pending proposals": "",
"There are no registered parachains": "",
"There are no unapplied/pending slashes": "",
"There is a validator set queued in ah-client.": "",
"There is an existing reference count on the sender account. As such the account cannot be reaped from the state.": "",
"There is currently an ongoing election for new validator candidates. As such staking operations are not permitted.": "",
"There is no on-chain attestation statement associated with the Ethereum account {{ethereumAddress}}": "",
Expand Down Expand Up @@ -1162,6 +1166,7 @@
"activate": "",
"active": "",
"active / nominators": "",
"active era": "",
"active issuance": "",
"active raised / cap": "",
"active total": "",
Expand Down Expand Up @@ -1329,6 +1334,7 @@
"current approval (failing)": "",
"current approval (passing)": "",
"current curator": "",
"current era": "",
"current lease": "",
"current price": "",
"current range winning bid": "",
Expand Down Expand Up @@ -1409,6 +1415,7 @@
"epoch": "",
"era": "",
"era points": "",
"era session index": "",
"era {{era}}": "",
"era {{era}}, {{count}} slashes": "",
"era {{era}}/unapplied": "",
Expand Down Expand Up @@ -1473,6 +1480,7 @@
"hex-encoded call": "",
"hex-encoded storage key": "",
"historic results": "",
"historical range": "",
"holders": "",
"https://example.com": "",
"id": "",
Expand Down Expand Up @@ -1573,6 +1581,8 @@
"mnemonic seed": "",
"mortal, valid from #{{startAt}} to #{{endsAt}}": "",
"motions": "",
"multiblock phase": "",
"multiblock queued score": "",
"multisig": "",
"multisig call data": "",
"multisig name": "",
Expand Down Expand Up @@ -1603,6 +1613,7 @@
"nominators": "",
"nominators to be removed": "",
"none": "",
"number of validators": "",
"of {{locked}} vested": "",
"on-chain bonding duration": "",
"on-chain multisig accounts": "",
Expand Down Expand Up @@ -1769,7 +1780,9 @@
"signature crypto type": "",
"signature of supplied data": "",
"signature {{type}}": "",
"signed submissions": "",
"skeptic": "",
"snapshot range": "",
"society head": "",
"sold/offered": "",
"somebody@example.com": "",
Expand Down
Empty file.
Empty file.
3 changes: 3 additions & 0 deletions packages/page-staking-next/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# @polkadot/app-staking-next

More Info can be found here - https://hackmd.io/7PiBrGxxRG2ib-WRZYJZhQ
23 changes: 23 additions & 0 deletions packages/page-staking-next/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"bugs": "https://github.com/polkadot-js/apps/issues",
"engines": {
"node": ">=18"
},
"homepage": "https://github.com/polkadot-js/apps/tree/master/packages/page-staking-next#readme",
"license": "Apache-2.0",
"name": "@polkadot/app-staking-next",
"private": true,
"repository": {
"directory": "packages/page-staking-next",
"type": "git",
"url": "https://github.com/polkadot-js/apps.git"
},
"sideEffects": false,
"type": "module",
"version": "0.152.2-11-x",
"peerDependencies": {
"react": "*",
"react-dom": "*",
"react-is": "*"
}
}
159 changes: 159 additions & 0 deletions packages/page-staking-next/src/CommandCenter/ah.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
// Copyright 2017-2025 @polkadot/app-staking-next authors & contributors
// SPDX-License-Identifier: Apache-2.0

import type { IAhOutput } from './index.js';

import React from 'react';
import { Link } from 'react-router-dom';

import { CardSummary, Expander, MarkWarning, styled } from '@polkadot/react-components';
import { Event as EventDisplay } from '@polkadot/react-params';
import { formatNumber } from '@polkadot/util';

import { useTranslation } from '../translate.js';

function AssetHubSection ({ ahOutput }: {ahOutput: IAhOutput[]}) {
const { t } = useTranslation();

return (
<div>
<h1 style={{ textTransform: 'capitalize' }}>
{t('Asset Hub chain')}
</h1>
<StyledSection>
{ahOutput.map((ah) => {
return (
<div
className='relay__chain'
key={ah.finalizedBlock}
>
<div className='details'>
<div className='session__summary'>
<h4 className='--digits'>
<Link to={`/explorer/query/${ah.finalizedBlock}`}>#{formatNumber(ah.finalizedBlock)}</Link>
</h4>
</div>
<div>
<div className='staking__summary'>
<CardSummary label={t('current era')}>
{ah.staking.currentEra}
</CardSummary>
<CardSummary label={t('era session index')}>
{ah.staking.erasStartSessionIndex}
</CardSummary>
<CardSummary label={t('active era')}>
{ah.staking.activeEra.index}
</CardSummary>
</div>
<div className='multiblock__summary'>
<CardSummary label={t('multiblock phase')}>
{ah.multiblock.phase}
</CardSummary>
{ah.multiblock.queuedScore &&
<CardSummary label={t('multiblock queued score')}>
{ah.multiblock.queuedScore}
</CardSummary>}
<CardSummary label={t('signed submissions')}>
{ah.multiblock.signedSubmissions}
</CardSummary>
{!!ah.multiblock.snapshotRange.length &&
<CardSummary label={t('snapshot range')}>
{ah.multiblock.snapshotRange}
</CardSummary>}
</div>
</div>
</div>
<div className='events__summary'>
<h3>{t('events')}</h3>
{ah.events.map((event) => {
const eventName = `${event.section}.${event.method}`;

return (
<Expander
isLeft
key={event.index.toString()}
summary={eventName}
summaryMeta={event.meta}
>
<EventDisplay
className='details'
eventName={eventName}
value={event}
withExpander
/>
</Expander>

);
})}
{ah.events.length === 0 && <MarkWarning content={t('No events available')} />}
</div>
</div>
);
})}
</StyledSection>
</div>);
}

const StyledSection = styled.section`
margin-block: 1rem;
overflow: auto;

.warning {
max-width: fit-content;
margin-left: 0;
}

.ui--Labelled-content {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-normal);
}

.relay__chain {
display: grid;
grid-template-columns: repeat(2, 1fr);
place-items: start;
background: var(--bg-table);
margin-bottom: 0.35rem;
padding: 0.8rem 1rem;
border-radius: 0.5rem;

.details {
display: flex;
align-items: center;
gap: 0.8rem;

.session__summary {
display: flex;
align-items: center;

h4 {
font-weight: 400;
font-size: medium;
}
}

.staking__summary {
display: flex;
justify-content: end;
}

.multiblock__summary {
display: flex;
justify-content: end;
margin-top: 1.5rem;
}
}

.events__summary {
display: grid;
gap: 1rem;
justify-self: center;
h3 {
font-weight: 500;
font-size: var(--font-size-h2);
}
}
}
`;

export default React.memo(AssetHubSection);
Loading