Skip to content

Commit

Permalink
fix merge conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
@Raid5594
Raid5594 committed Jan 16, 2024
2 parents 340c19c + 81e96f5 commit 8a6803b
Show file tree
Hide file tree
Showing 58 changed files with 1,879 additions and 733 deletions.
2 changes: 1 addition & 1 deletion .prettierignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@
**/.eslintrc.js
**/tsconfig.json
**/webpack.config.js
src/img/**/*
src/img/**/*
102 changes: 56 additions & 46 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,61 @@
# Polkadot Staking Dashboard
# Cere Staking Dashboard [Beta]

## Deployment
Staking dashboard is live on [staking.polkadot.network](https://staking.polkadot.network/dashboard)
# Validator Entity Setup Guide

<img width="1807" alt="Screenshot 2022-10-28 at 09 36 42" src="https://user-images.githubusercontent.com/13929023/198530973-0fff2049-da50-4786-96b9-035fa95dec43.png">
Validators can add their identity, contact information and validator list to the dashboard’s Community section. The Community feature is designed to give non-biased exposure to validator entities, and to host a fully-featured validator browser just for that entity's validators.

# Validator Operator Setup Guide
To add your entity, submit a PR with the following changes:

Validator operators can add their contact information, icon, and which validators they operate, to the dashboard’s Community section. The Community feature is designed to give non-biased exposure to validator operators, and to host a fully-featured validator browser just for that operator's validators.
- **Thumbnail SVG:** Add your entity's thumbnail as an SVG file to [this folder](https://github.com/Cerebellum-Network/staking-dashboard/tree/dev-cere/src/config/validators/thumbnails).
- **Entity details:** Add your entity details to the `VALIDATORS_COMMUNITY`JSON object in [this file](https://github.com/Cerebellum-Network/staking-dashboard/blob/dev-cere/src/config/validators/index.ts).

To add an operator, submit a PR with the following changes:

- **Thumbnail:** Add your operator's thumbnail as an SVG Component in [this folder](https://github.com/paritytech/polkadot-staking-dashboard/tree/master/src/config/validators/thumbnails).
- **Operator details:** Add your operator details to the `VALIDATORS_COMMUNITY`JSON object in [this file](https://github.com/paritytech/polkadot-staking-dashboard/blob/master/src/config/validators/index.ts).

## Operator Structure
## Entity Structure

The following table outlines the structure of a `VALIDATOR_COMMUNITY` entry:

| Element | Key | Required | Notes | Example
| ------- | --- | -------- | ----- | ------- |
| Operator Name | `name` | Yes | The chosen name of the operator. | `Validator Central` |
| Thumbnail Name | `thumbnail` | Yes | The name of your SVG component representing your thumbnail. | *See Below* |
| Bio | `bio` | No | A short description of your entity. Maximum 300 characters. | `Summing up my validator identity in a sentence or so.` |
| Email Address | `email` | No | A public email address representing the operator. | `[email protected]` |
| Twitter Handle | `twitter` | No | The Twitter handle representing the operator. | `@ParityTech` |
| Website URL | `website` | No | A live and vlid secure URL to your website. | `https://parity.io` |
| Validator List | `validators` | Yes | A list of validators grouped by network. At least 1 validator in 1 network must be defined. | *See Below* |
| Element | Key | Required | Notes | Example |
|----------------|--------------|----------|------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------|
| Entity Name | `name` | Yes | The chosen name of your entity. | `Validator Central` |
| Thumbnail SVG | `Thumbnail` | Yes | Must be a square SVG file with a non-transparent background, to ensure compatibility with both light and dark theming. | *See Below* |
| Bio | `bio` | No | A short description of your entity. Maximum 300 characters. | `Summing up my validator identity in a sentence or so.` |
| Email Address | `email` | No | A public email address representing your entity. | `[email protected]` |
| Twitter Handle | `twitter` | No | The Twitter handle representing your entity. | `@CereNetwork'` |
| Website URL | `website` | No | A live and vlid secure URL to your website. | `https://cere.network` |
| Validator List | `validators` | Yes | A list of validators grouped by network. At least 1 validator in 1 network must be defined. | *See Below* |

## Example Entity

## Example Operator
At the top of `config/validators/index.ts`, import the SVG you added in the corresponding `./thumbnails` folder as a React component:

Upload your SVG icon as a React component. Look at the existing icons as examples, or use the [SVGR Playground](https://react-svgr.com/playground/) to convert your raw SVG file into a component.
```
import { ReactComponent as Cere } from './thumbnails/cere.svg';
```

Next, add your operator details to the `VALIDATOR_COMMUNITY` object. Only provide the validator(s) for the particular network(s) you are operating in. If you have no operating validators on Kusama, for example, the `kusama` key can be omitted.
Then add your entity details to the `VALIDATOR_COMMUNITY` object. Only provide the validator(s) for the particular network(s) you are operating in.

The following example defines 2 validators on the Polkadot network, and 1 on Kusama:
The following example defines 8 validators on the Cere Network

```
export const VALIDATOR_COMMUNITY = [
...
{
name: 'Validator Central',
thumbnail: 'ValidatorCentral',
bio: 'Summing up my validator identity in a sentence or so. Maximum 300 characters.',
email: '[email protected]',
twitter: '@ParityTech',
website: 'https://parity.io',
name: 'CERE',
Thumbnail: Cere,
bio: `Official Validators from Cere Network, the world's first Decentralized Data Cloud platform.`,
email: '[email protected]',
website: 'https://cere.network',
twitter: '@CereNetwork',
validators: {
polkadot: [
'1hYiMW8KSfUYChzCQSPGXvMSyKVqmyvMXqohjKr3oU5PCXF',
'14QSBoJMHF2Zn2XEoLNSeWgqBRr8XoKPy4BxToD6yLSeFFYe'
cere: [
'6S4mrsCrqWoBAYrp2PKQNh7CYcCtyEtYpx5J626Kj5vszSyy',
'6QhzyvZQm3dLjDmeaoUnLPXzfuTi6X1HEo6AX6gfVbC3shzD',
'6RgfwDiQTLjgbkQ5CorrKtRtCaDABQKYsibk9MeyvzmKFrk2',
'6TBhZAgtFc3Wr8BeNu5tdMJG1NDpxKbG2Hwf2UbVtMGyFxzN',
'6Pyh9zZgp4XCP338VDG7oshK7PvsAdyuBN6S2NNm7CBoCXx8',
'6S9tXQmPYoeBXYey8vKYi9BMbNMD8Zgqb62k7SYMNQLUbydZ',
'6PwAv2L43zGPEwHTb1L7LyCWv7yq2Hc4dSVYHvvi1kscCR91',
'6Qshjra42mLDtc9ouHzUz1bMmYXg2qasmW2xSLgendRdsYED',
],
kusama: ['FykhnPA3pn269LAcQ8VQKDgUQ8ieAaSLwJDhAVhu3dcokVR'],
},
},
...
Expand All @@ -61,20 +65,20 @@ export const VALIDATOR_COMMUNITY = [

## General Requirements

| Requirement | Notes
| ----------- | ----- |
| Accuracy | Operator contact details must be working and valid. |
| Liveness | All submitted validator addresses must be discoverable as a validator on the network in question - whether Polkadot or Kusama. |
| Ordering | Please place your operator in alphabetical order within `VALIDATOR_COMMUNITY`. Operators are shuffled before being displayed in the dashboard, removing any bias associated with ordering methods. |
| Requirement | Notes |
|-------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Accuracy | Entity contact details must be working and valid. |
| Liveness | All submitted validator addresses must be discoverable as a validator on Cere Network. |
| Ordering | Please place your entity in alphabetical order within `VALIDATOR_COMMUNITY`. Validator entities (and their validators) are shuffled before being displayed in the dashboard, removing any bias associated with ordering methods. |

Please submit an issue for any queries around adding your operator details.
Please submit an issue for any queries around adding your validator entity.

# Contribution Guide

## Introduction
This section aims to familiarise developers to the Polkadot Staking Dashboard [[GitHub](https://github.com/paritytech/polkadot-staking-dashboard), [Demo](https://paritytech.github.io/polkadot-staking-dashboard/#/overview)] for the purpose of contributing to the project.
This section aims to familiarise developers to the Cere Staking Dashboard [[GitHub](https://github.com/Cerebellum-Network/staking-dashboard), [Demo](https://paritytech.github.io/polkadot-staking-dashboard/#/overview)] for the purpose of contributing to the project.

Reach out to ross@parity.io for clarification of any content within this document.
Reach out to community@cere.io for clarification of any content within this document.

## Major Packages Used

Expand All @@ -97,6 +101,9 @@ REACT_APP_ORGANISATION="© Parity Technologies"
# provide a privacy policy url in the network bar
REACT_APP_PRIVACY_URL=https://www.parity.io/privacy/
# include the testnet configuration
REACT_APP_INCLUDE_TESTNET=true
```
## Config Files
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.
Expand Down Expand Up @@ -140,7 +147,7 @@ Documenting some of the development patterns used:

## TypeScript Support

The majority of components have types. Type additions are welcome for data that makes sense to type (e.g. data that is unlikely to change as we continue development).
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.

Expand All @@ -156,6 +163,9 @@ Integration tests make sense for the app itself, ensuring the page layout, help
- Actively staking, not actively staking.
- Account connected, no account connected.

# Presentations
# Project Updates

- 30/06/2022: [[Video] Polkadot Decoded 2022: Polkadot Staking Dashboard Demo](https://youtu.be/H1WGu6mf1Ls)
- 30/06/2022: [[Video] Polkadot Decoded 2022: Polkadot Staking Dashboard Demo](https://youtu.be/H1WGu6mf1Ls)
- 08/04/2022: [[Video] Polkadot Staking Dashboard April 2022 Update](https://www.youtube.com/watch?v=y6AJ6RhKMH0)
- 09/03/2022: [Representing the Stash and Controller Account](https://medium.com/@paritytech/polkadot-staking-dashboard-representing-the-stack-and-controller-account-2ea76bb54b47)
- 28/02/2022: [Defining the Polkadot Staking Experience: Phase 0](https://paritytech.medium.com/defining-the-polkadot-staking-experience-phase-0-211cb2bc113c)
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"license": "apache-2.0",
"private": false,
"dependencies": {
"@apollo/client": "^3.7.14",
"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-brands-svg-icons": "^6.2.1",
"@fortawesome/free-regular-svg-icons": "^6.2.1",
Expand Down Expand Up @@ -43,6 +44,7 @@
"react-scroll": "^1.8.6",
"styled-components": "^5.3.3",
"styled-theming": "^2.2.0",
"subscriptions-transport-ws": "^0.11.0",
"typescript": "^4.9.3",
"web-vitals": "^3.1.0",
"yarn": "^1.22.18"
Expand Down
52 changes: 40 additions & 12 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,22 +46,50 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Polkadot Staking Dashboard | Polkadot Staking (DOT)</title>
<title>Cere Staking Dashboard</title>

<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-MJG54ZJ');</script>
<!-- End Google Tag Manager -->
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MJG54ZJ" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->

<!--
Initiate Analytics
-->
<script async defer src="https://apisa.web3.foundation/latest.js"></script>
<noscript><img src="https://apisa.web3.foundation/noscript.gif" alt=""
referrerpolicy="no-referrer-when-downgrade" /></noscript>
</body>

</html>
</html>
4 changes: 2 additions & 2 deletions src/Providers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import { PoolMembershipsProvider } from 'contexts/Pools/PoolMemberships';
import { PoolsConfigProvider } from 'contexts/Pools/PoolsConfig';
import { SessionEraProvider } from 'contexts/SessionEra';
import { StakingProvider } from 'contexts/Staking';
import { SubscanProvider } from 'contexts/Subscan';
import { useTheme } from 'contexts/Themes';
import { TooltipProvider } from 'contexts/Tooltip';
import { TransferOptionsProvider } from 'contexts/TransferOptions';
Expand All @@ -32,6 +31,7 @@ import { withProviders } from 'library/Hooks';
import Router from 'Router';
import { ThemeProvider } from 'styled-components';
import { EntryWrapper as Wrapper } from 'Wrappers';
import { CereStatsProvider } from './contexts/CereStats';

// `polkadot-dashboard-ui` theme classes are inserted here.
export const WrappedRouter = () => {
Expand Down Expand Up @@ -77,7 +77,7 @@ export const Providers = withProviders(
TransferOptionsProvider,
ValidatorsProvider,
UIProvider,
SubscanProvider,
CereStatsProvider,
MenuProvider,
TooltipProvider,
NotificationsProvider,
Expand Down
1 change: 1 addition & 0 deletions src/config/extensions/icons/dot_icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 8a6803b

Please sign in to comment.