https://paritytech.github.io/polkadot-staking-dashboard/
Features are being implemented in an incremental fashion. We are considering the app MVP once the following tasks are completed:
- Initial app layout and navigation
- Assistant initialisation
- Live charts
- Network metrics, staking metrics
- Polkadot JS accounts import
- Stash / controller account abstraction
- Performant validator list fetching and meta data syncing
- Validator filtering initialisation and favourite validators
- Theming support
- Integrate Intention / Active Bond Thresholds
- Recent Payouts as list
- Multi-wallet support
- Node only / External API toggles
- Screen size support
- Extrinsics
- Initial Nomination management tooling
- Nomination Pools
- Chain API Integration
Additional features that are being considered:
- Validator Lists
- Validator selection algorithm
- Validator ranking algorithm
- Wallet Connect support
This section aims to familiarise developers to the Polkadot Staking Dashboard [GitHub, Demo] for the purpose of contributing to the project.
Reach out to ross@parity.io for clarification of any content within this document.
- React 18
- Polkadot JS API [docs]
- React Chart JS 2 for graphing. [docs, React docs]
- Framer Motion. [docs]
- Font Awesome for the majority of icons. Ionicons for side menu footer icons
- Downshift for dropdowns [docs]
- Styled Components [docs] alongside Styled Theming [docs] for theme configuration.
There are some ad-hoc files defining app configuration where needed. These just provide a means of bootstrapping app data, and further abstraction could be explored in the future.
pages.ts
: provides the pages and page categories of the app, as well as the assistant content.Utils.ts
: Various general helper functions used throughout the app, such as formatting utilities.
Folders are structured in the src/
directory to separate functional, presentational and context components:
contexts
: context providers for the app. All Polkadot JS API interaction happens in these files.img
: app SVGs.library
: reusable components that could eventually be abstracted into a separate UI library.modals
: the various modal pop-ups used in the app.pages
: similar to modals, page components and components that comprise pages.theme
: The theming configuration of the app.workers
: web workers that crunch process-heavy scripts. Only one exists right now, that iterateserasStakers
and calculates active nominators and minimum nomination bond.
Going from the top-most component, the component hierarchy is set up as follows:
index.tsx
: DOM render, of little interest.App.tsx
: Wraps<App />
in the theme provider context and determines the active network from local storage.Providers.tsx
: Imports and wraps<Router />
with all the contexts using a withProviders hook. We also wrap styled component's theme provider context here to make the theme configuration work.Router.tsx
: Contains react router<Route>
's, in addition to the major app presentational components. Beyond<Route>
components, this file is also the entry point for the following components:<Modal />
: top-level of the modal.<Assistant />
: top-level of the assistant.<Headers />
: fixed header of the app containing the stash / controller, assistant and menu toggle buttons.<NetworkBar />
: fixed network bar at the bottom of the app.<Notifications />
: Smaller context-based popups. Currently used on click-to-copy, or to display extrinsic status (pending, success).
Documenting some of the development patterns used:
- We use the "Wrapper" terminology for styled components that wrap a functional component.
- Styles are defined on a per-component basis, being defined in the same folder as the component markup itself. Where unavoidable (such as global styles, interface layout), styled components should reside in
src/Wrappers.ts
. - Theme values can be either directly imported into styled components, from
theme/index.ts
, or as raw values within component files usingtheme/default.ts
. - Constants or default values (such as those waiting for Polkadot API) are defined in
src/constants.ts
. - Packages with missing TypeScript definitions can be declared in
src/react-app-env.d.ts
.
Beyond some very lightweight typing here and there, components are yet to be comprehensively typed. Types are welcome for data that makes sense to type (e.g. data that is unlikely to change as we continue development).
We develop in strict mode, so types are always required for objects. Use any initially to adhere to this requirement.
Tests have not yet been developed.
Testing could be initialised on a per-component basis, such as isolating library components and testing them within a storybook environment.
Integration tests make sense for the app itself, ensuring the page layout, assistant, and modals display the correct content at various app states. These states currently persist of:
- Connecting to the network, fetching from API, fully synced.
- Actively staking, not actively staking.
- Account connected, no account connected.
- 08/04/2022: [Video] Polkadot Staking Dashboard April 2022 Update
- 09/03/2022: Representing the Stash and Controller Account
- 28/02/2022: Defining the Polkadot Staking Experience: Phase 0