Skip to content

Commit

Permalink
Merge pull request #52 from Cerebellum-Network/feature/sync-with-1.0.…
Browse files Browse the repository at this point in the history
…1-bumped-polkadotjs

Feature/sync with 1.0.1 bumped polkadotjs
  • Loading branch information
Raid5594 authored Feb 23, 2024
2 parents b4f427c + 78d1fc0 commit 86d687b
Show file tree
Hide file tree
Showing 588 changed files with 28,662 additions and 12,979 deletions.
171 changes: 81 additions & 90 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,95 +1,86 @@
{
"env": {
"browser": true,
"es2021": true
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"airbnb",
// "airbnb-typescript",
"plugin:prettier/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"arrowFunctions": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"airbnb",
"plugin:prettier/recommended"
"ecmaVersion": "latest",
"sourceType": "module",
"project": "./tsconfig.json"
},
"plugins": ["react", "@typescript-eslint", "prefer-arrow-functions"],
"rules": {
"import/no-webpack-loader-syntax": "off",
"react/require-default-props": "off",
"react/no-access-state-in-setstate": "off",
"react/destructuring-assignment": "off",
"react/function-component-definition": "off",
"react/jsx-no-constructed-context-values": "off",
"react/no-array-index-key": "off",
"react/react-in-jsx-scope": "off",
"react/jsx-props-no-spreading": "off",
"react/jsx-no-useless-fragment": "off",
"react/static-property-placement": "off",
"no-unused-vars": "off",
"no-param-reassign": "off",
"no-plusplus": "off",
"no-continue": "off",
"no-underscore-dangle": "off",
"no-restricted-syntax": "off",
"@typescript-eslint/no-empty-function": "off",
"no-use-before-define": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-use-before-define": "off",
"import/prefer-default-export": "off",
"consistent-return": "off",
"no-promise-executor-return": "off",
"prefer-destructuring": "off",
"@typescript-eslint/ban-ts-comment": "off",
"no-nested-ternary": "off",
"no-shadow": "off",
"semi": [2, "always"],
"react/jsx-filename-extension": [
"warn",
{
"extensions": [".tsx"]
}
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"arrowFunctions": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint",
"prefer-arrow-functions"
"import/extensions": [
"error",
"ignorePackages",
{
"ts": "never",
"tsx": "never"
}
],
"rules": {
"react/no-access-state-in-setstate": "off",
"react/destructuring-assignment": "off",
"react/function-component-definition": "off",
"react/jsx-no-constructed-context-values": "off",
"react/no-array-index-key": "off",
"react/react-in-jsx-scope": "off",
"react/jsx-props-no-spreading": "off",
"react/jsx-no-useless-fragment": "off",
"react/static-property-placement": "off",
"no-unused-vars": "off",
"no-param-reassign": "off",
"no-plusplus": "off",
"no-continue": "off",
"max-len": "off",
"no-underscore-dangle": "off",
"no-restricted-syntax": "off",
"@typescript-eslint/no-empty-function": "off",
"react/prop-types": "off",
"arrow-body-style": "off",
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": "off",
"import/prefer-default-export": "off",
"consistent-return": "off",
"no-promise-executor-return": "off",
"prefer-destructuring": "off",
"@typescript-eslint/ban-ts-comment": "off",
"camelcase": "off",
"no-nested-ternary": "off",
"semi": [
2,
"always"
],
"react/jsx-filename-extension": [
"warn",
{
"extensions": [
".tsx"
]
}
],
"import/extensions": [
"error",
"ignorePackages",
{
"ts": "never",
"tsx": "never"
}
],
"no-shadow": "off",
"@typescript-eslint/no-shadow": [
"error"
],
"prefer-arrow-functions/prefer-arrow-functions": [
"warn",
{
"classPropertiesAllowed": false,
"disallowPrototype": false,
"returnStyle": "unchanged",
"singleReturnOnly": false
}
]
},
"settings": {
"import/resolver": {
"typescript": {}
}
"@typescript-eslint/no-shadow": ["error"],
"prefer-arrow-functions/prefer-arrow-functions": [
"warn",
{
"classPropertiesAllowed": false,
"disallowPrototype": false,
"returnStyle": "unchanged",
"singleReturnOnly": false
}
],
"react/prop-types": "off"
},
"settings": {
"import/resolver": {
"typescript": {}
}
}
}
}
16 changes: 16 additions & 0 deletions .github/dependabot.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
version: 2

updates:
- package-ecosystem: npm
directory: '/'
labels:
- 'automerge'
schedule:
interval: daily
open-pull-requests-limit: 4
- package-ecosystem: github-actions
directory: '/'
labels:
- 'automerge'
schedule:
interval: daily
21 changes: 21 additions & 0 deletions .github/mergify.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
queue_rules:
- name: default
conditions:
- check-success=all
- label=automerge
- base=master
- '#changes-requested-reviews-by=0'
- '#approved-reviews-by>=1'

pull_request_rules:
- name: automatic merge when CI passes on master
conditions:
- check-success=all
- label=automerge
- base=master
- '#changes-requested-reviews-by=0'
- '#approved-reviews-by>=1'
actions:
queue:
name: default
method: merge
39 changes: 39 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
name: Staking Dashboard CI

on:
push:
branches: [master]
pull_request:
branches: [master]

jobs:
check-license-lines:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- name: Check License Lines
uses: kt3k/[email protected]
build:
runs-on: ubuntu-latest

strategy:
matrix:
node-version: [14.x, 16.x, 18.x]

steps:
- uses: actions/[email protected]
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
- run: yarn install
- run: yarn build
- run: yarn lint
# - run: yarn test # No reason to check for tests now since they do not exist

all:
# This job ensures that all jobs above (now we have just build) are successful.
needs: [check-license-lines, build]
runs-on: ubuntu-latest
steps:
- run: echo Success
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

# environment
.env
.vscode

# dependencies
/node_modules
Expand Down
4 changes: 4 additions & 0 deletions .licenserc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"**/*.{ts, tsx}": "// Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors",
"ignore": ["testdata", "npm"]
}
3 changes: 2 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@
**/package-lock.json
**/.eslintrc.js
**/tsconfig.json
**/webpack.config.js
**/webpack.config.js
src/img/**/*
2 changes: 1 addition & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Refactored testnet inclusion condition in build-and-deploy job
- Updated branches for Stage and Prod
- Updated information about Inflation
- Fixed HTML page formatting, ChangeNominations, and CERE_URL
- Fixed HTML page formatting, ChangeNominations, and CereUrl
- Updated README.md, prod.yaml, Favicons, units, and URI Prefix
- Adjusted constants and networks for Cere
- Updated default Network and active networks fields
Expand Down
46 changes: 23 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,31 +107,31 @@ 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.
- [`config/pages.ts`](https://github.com/rossbulat/polkadot-staking-dashboard/blob/master/src/config/pages.ts): provides the pages and page categories of the app.
- [`config/assistant.ts`](https://github.com/rossbulat/polkadot-staking-dashboard/blob/master/src/config/assistant.ts): provides the assistant content.
- [`Utils.ts`](https://github.com/rossbulat/polkadot-staking-dashboard/blob/master/src/Utils.ts): Various general helper functions used throughout the app, such as formatting utilities.
- [`config/pages.ts`](https://github.com/paritytech/polkadot-staking-dashboard/blob/master/src/config/pages.ts): provides the pages and page categories of the app.
- [`config/help.ts`](https://github.com/paritytech/polkadot-staking-dashboard/blob/master/src/config/help.ts): provides the help content.
- [`Utils.ts`](https://github.com/paritytech/polkadot-staking-dashboard/blob/master/src/Utils.ts): Various general helper functions used throughout the app, such as formatting utilities.

## Folders

Folders are structured in the [`src/`](https://github.com/rossbulat/polkadot-staking-dashboard/tree/master/src) directory to separate functional, presentational and context components:
- [`contexts`](https://github.com/rossbulat/polkadot-staking-dashboard/tree/master/src/contexts): context providers for the app. All Polkadot JS API interaction happens in these files.
- [`img`](https://github.com/rossbulat/polkadot-staking-dashboard/tree/master/src/img): app SVGs.
- [`library`](https://github.com/rossbulat/polkadot-staking-dashboard/tree/master/src/library): reusable components that could eventually be abstracted into a separate UI library.
- [`modals`](https://github.com/rossbulat/polkadot-staking-dashboard/tree/master/src/modals): the various modal pop-ups used in the app.
- [`pages`](https://github.com/rossbulat/polkadot-staking-dashboard/tree/master/src/pages): similar to modals, page components and components that comprise pages.
- [`theme`](https://github.com/rossbulat/polkadot-staking-dashboard/tree/master/src/theme): the theming configuration of the app.
- [`workers`](https://github.com/rossbulat/polkadot-staking-dashboard/tree/master/src/workers): web workers that crunch process-heavy scripts. Only one exists right now, that iterates `erasStakers` and calculates active nominators and minimum nomination bond.
Folders are structured in the [`src/`](https://github.com/paritytech/polkadot-staking-dashboard/tree/master/src) directory to separate functional, presentational and context components:
- [`contexts`](https://github.com/paritytech/polkadot-staking-dashboard/tree/master/src/contexts): context providers for the app. All Polkadot JS API interaction happens in these files.
- [`img`](https://github.com/paritytech/polkadot-staking-dashboard/tree/master/src/img): app SVGs.
- [`library`](https://github.com/paritytech/polkadot-staking-dashboard/tree/master/src/library): reusable components that could eventually be abstracted into a separate UI library.
- [`modals`](https://github.com/paritytech/polkadot-staking-dashboard/tree/master/src/modals): the various modal pop-ups used in the app.
- [`pages`](https://github.com/paritytech/polkadot-staking-dashboard/tree/master/src/pages): similar to modals, page components and components that comprise pages.
- [`theme`](https://github.com/paritytech/polkadot-staking-dashboard/tree/master/src/theme): the theming configuration of the app.
- [`workers`](https://github.com/paritytech/polkadot-staking-dashboard/tree/master/src/workers): web workers that crunch process-heavy scripts. Only one exists right now, that iterates `erasStakers` and calculates active nominators and minimum nomination bond.

## App Entry

Going from the top-most component, the component hierarchy is set up as follows:
- [`index.tsx`](https://github.com/rossbulat/polkadot-staking-dashboard/blob/master/src/index.tsx): DOM render, of little interest.
- [`App.tsx`](https://github.com/rossbulat/polkadot-staking-dashboard/blob/master/src/App.tsx): wraps `<App />` in the theme provider context and determines the active network from local storage.
- [`Providers.tsx`](https://github.com/rossbulat/polkadot-staking-dashboard/blob/master/src/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`](https://github.com/rossbulat/polkadot-staking-dashboard/blob/master/src/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:
- [`index.tsx`](https://github.com/paritytech/polkadot-staking-dashboard/blob/master/src/index.tsx): DOM render, of little interest.
- [`App.tsx`](https://github.com/paritytech/polkadot-staking-dashboard/blob/master/src/App.tsx): wraps `<App />` in the theme provider context and determines the active network from local storage.
- [`Providers.tsx`](https://github.com/paritytech/polkadot-staking-dashboard/blob/master/src/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`](https://github.com/paritytech/polkadot-staking-dashboard/blob/master/src/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.
- `<Help />`: top-level of the help module.
- `<Headers />`: fixed header of the app containing the stash / controller and accounts 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).

Expand All @@ -140,10 +140,10 @@ Going from the top-most component, the component hierarchy is set up as follows:
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`](https://github.com/rossbulat/polkadot-staking-dashboard/blob/master/src/Wrappers.tsx).
- **Theme values** can be either directly imported into styled components, from [`theme/index.ts`](https://github.com/rossbulat/polkadot-staking-dashboard/blob/master/src/theme/index.ts), or as raw values within component files using [`theme/default.ts`](https://github.com/rossbulat/polkadot-staking-dashboard/blob/master/src/theme/default.ts).
- **Constants or default values** (such as those waiting for Polkadot API) are defined in [`src/constants.ts`](https://github.com/rossbulat/polkadot-staking-dashboard/blob/master/src/constants.ts).
- Packages with **missing TypeScript definitions** can be declared in [`src/react-app-env.d.ts`](https://github.com/rossbulat/polkadot-staking-dashboard/blob/master/src/react-app-env.d.ts).
- **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`](https://github.com/paritytech/polkadot-staking-dashboard/blob/master/src/Wrappers.tsx).
- **Theme values** can be either directly imported into styled components, from [`theme/index.ts`](https://github.com/paritytech/polkadot-staking-dashboard/blob/master/src/theme/index.ts), or as raw values within component files using [`theme/default.ts`](https://github.com/paritytech/polkadot-staking-dashboard/blob/master/src/theme/default.ts).
- **Constants or default values** (such as those waiting for Polkadot API) are defined in [`src/constants.ts`](https://github.com/paritytech/polkadot-staking-dashboard/blob/master/src/constants.ts).
- Packages with **missing TypeScript definitions** can be declared in [`src/react-app-env.d.ts`](https://github.com/paritytech/polkadot-staking-dashboard/blob/master/src/react-app-env.d.ts).

## TypeScript Support

Expand All @@ -157,7 +157,7 @@ We develop in strict mode, so types are always required for objects. Use any ini

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:
Integration tests make sense for the app itself, ensuring the page layout, help module, 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.
Expand All @@ -168,4 +168,4 @@ Integration tests make sense for the app itself, ensuring the page layout, assis
- 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://rossbulat.medium.com/defining-the-polkadot-staking-experience-phase-0-211cb2bc113c)
- 28/02/2022: [Defining the Polkadot Staking Experience: Phase 0](https://paritytech.medium.com/defining-the-polkadot-staking-experience-phase-0-211cb2bc113c)
Loading

0 comments on commit 86d687b

Please sign in to comment.