feat: Init monorepo, app and ui-buttons packages (#2327)

.eslintignore

@@ -1,4 +1,7 @@
 *.css
+*.scss
+*.lottie
+*.woff2
 *.svg
 *.png
 *.json
@@ -11,11 +14,12 @@
 *.txt
 *.html
 *.webmanifest
-LICENSE
-dist
-build
-vite.config.ts
-public/lottie/player.js
-CHANGELOG.md
-.yarn
-.licenserc.json
+**/LICENSE
+**/node_modules
+**/dist
+**/build
+**/CHANGELOG.md
+**/.yarn
+**/.licenserc.json
+**/lottie
+**/vite.config.ts

.eslintrc.json

@@ -84,14 +84,17 @@
         "fixStyle": "separate-type-imports"
       }
     ],
-    "@typescript-eslint/no-shadow": ["error"]
+    "@typescript-eslint/no-shadow": "error"
   },
   "settings": {
     "react": {
       "version": "detect"
     },
     "import/resolver": {
-      "typescript": {}
+      "typescript": {
+        "alwaysTryTypes": true,
+        "project": ["tsconfig.json", "packages/*/tsconfig.json"]
+      }
     }
   }
 }

.github/workflows/ci.yml

@@ -41,6 +41,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - run: yarn install
       - run: yarn build
+        working-directory: packages/app
       - run: yarn lint
       - run: yarn test
 
@@ -54,6 +55,7 @@ jobs:
           node-version: 18.x
       - run: yarn install
       - run: yarn run locale:validate
+        working-directory: packages/app
 
   all:
     needs: [check-license, markdown-link-check, build, validate-locales]

.github/workflows/gh-pages.yml

@@ -42,14 +42,14 @@ jobs:
         run: yarn install
 
       - name: Build
-        working-directory: '.'
+        working-directory: 'packages/app'
         run: yarn build
 
       - name: Upload Artifact
         uses: actions/upload-pages-artifact@v3
         with:
           name: github-pages
-          path: build
+          path: package/app/build
 
   deploy:
     runs-on: ubuntu-latest
@@ -67,7 +67,7 @@ jobs:
       - uses: actions/download-artifact@master
         with:
           name: github-pages
-          path: build
+          path: package/app/build
       - uses: actions/configure-pages@v5
       - id: deployment
         uses: actions/deploy-pages@main

.release-please-manifest.json

@@ -0,0 +1 @@
+{}

README.md

@@ -1,5 +1,9 @@
+<!-- markdown-link-check-disable -->
+
 [![Polkadot - App](https://img.shields.io/badge/Polkadot-App-E6007A?logo=polkadot&logoColor=E6007A)](https://staking.polkadot.cloud) ![ci](https://github.com/polkadot-cloud/polkadot-staking-dashboard/actions/workflows/ci.yml/badge.svg) [![License](https://img.shields.io/badge/License-GPL3.0-blue.svg)](https://opensource.org/licenses/GPL-3.0)
 
+<!-- markdown-link-check-enable -->
+
 > #### 📢 17/06/2024: Repository Migration
 >
 > This repository was previously at `paritytech/polkadot-staking-dashboard`. As of 17/06/2024, Polkadot Staking Dashboard lives at `polkadot-cloud/polkadot-staking-dashboard`.
@@ -34,26 +38,6 @@ The following URL will load Kusama and use the Chinese localisation resource:
 staking.polkadot.cloud/#/overview?n=kusama&l=cn
 ```
 
-## Using Containers
-
-You may build a container using:
-
-```
-./shell/build-container.sh
-```
-
-Then run your container with:
-
-```
-podman run --d -p 8080:80 localhost/polkadot-staking-dashboard
-```
-
-<!-- markdown-link-check-disable -->
-
-And access the **Staking Dashboard** at http://localhost:8080/.
-
-<!-- markdown-link-check-enable-->
-
 ## Presentations
 
 - 29/06/2023: [[Video] Polkadot Decoded 2023: The Next Step of the Polkadot UX Journey](https://www.youtube.com/watch?v=s78SZZ_ZA64)

docs/CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contribution Guide
 
-This section aims to familiarise developers to the Polkadot Staking Dashboard [[Deployment](https://staking.polkadot.cloud).
+This section aims to familiarise developers to the Polkadot Staking Dashboard [[Deployment](https://staking.polkadot.cloud)].
 
 Reach out to ross@jkrb.io for clarification of any content within this document.
 
@@ -29,46 +29,6 @@ If you would like to know more about the Conventional Commits specification, ple
 
 Release Please is a GitHub action maintained by Google that automates CHANGELOG generation, the creation of GitHub releases, and version bumps. [[Gtihub docs](https://github.com/googleapis/release-please), [Action](https://github.com/marketplace/actions/release-please-action)]
 
-## Major Packages Used
-
-- React 18
-- Polkadot JS API [[docs](https://polkadot.js.org/docs/api)]
-- React Chart JS 2 for graphing. [[docs](https://www.chartjs.org/docs/latest/), [React docs](https://react-chartjs-2.js.org/)]
-- Framer Motion. [[docs](https://www.framer.com/docs/animation/)]
-- [Font Awesome](https://fontawesome.com/v5/search) for the majority of icons. [Ionicons](https://ionic.io/ionicons) for side menu footer icons
-- SCSS for theme configuration and Styled Components [[docs](https://styled-components.com/docs)] for component styling.
-
-## Environment Variables
-
-Optionally apply envrionment variables in an environment file such as `.env` or with `yarn build` to customise the build of staking dashboard.
-
-Refer to the [`.env`](https://github.com/polkadot-cloud/polkadot-staking-dashboard/blob/main/.env) file in the root of the repository for all supported variables.
-
-## 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/polkadot-cloud/polkadot-staking-dashboard/blob/main/src/config/pages.ts): provides the pages and page categories of the app.
-- [`config/help.ts`](https://github.com/polkadot-cloud/polkadot-staking-dashboard/blob/main/src/config/help.ts): provides the help content.
-
-## App Entry
-
-Going from the top-most component, the component hierarchy is set up as follows:
-
-- `src/index.tsx`: DOM render, of little interest.
-- `src/App.tsx`: wraps `<App />` in the theme provider context and determines the active network from local storage.
-- `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.
-- `src/Router.tsx`: contains react router `<Route>`'s, in addition to the major app presentational components.
-
-## Development Patterns
-
-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`.
-- **Constants or default values** (such as those waiting for Polkadot API) are defined in `src/consts.ts`.
-- Packages with missing TypeScript definitions can be declared in `src/vite-env.d.ts`.
-
 ## TypeScript Support
 
 Strict mode is used in development and full type coverage is required.

env.d.ts

@@ -0,0 +1,7 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+declare module '*.module.scss' {
+  const classes: Record<string, string>;
+  export default classes;
+}

package.json

@@ -1,70 +1,19 @@
 {
   "name": "polkadot-staking-dashboard",
-  "version": "1.7.0",
+  "version": "1.0.0",
   "type": "module",
   "license": "GPL-3.0-only",
   "scripts": {
-    "build": "tsc && vite build --base '/'",
-    "clear": "rm -rf node_modules build tsconfig.tsbuildinfo yarn.lock",
-    "dev": "vite",
-    "lint": "eslint . --fix && npx prettier --write . && npx prettier --write ./.scripts && node ./.scripts/localeOrderKeys.cjs",
-    "locale:order": "node ./.scripts/localeOrderKeys.cjs",
-    "locale:validate": "node ./.scripts/localeValidate.cjs",
-    "preview": "vite preview",
-    "test": "vitest",
-    "visualizer": "vite-bundle-visualizer"
-  },
-  "dependencies": {
-    "@dotlottie/player-component": "^2.7.12",
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
-    "@fortawesome/free-brands-svg-icons": "^6.5.2",
-    "@fortawesome/free-regular-svg-icons": "^6.5.2",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@ledgerhq/hw-transport-webhid": "^6.29.2",
-    "@polkadot-api/merkleize-metadata": "^1.1.4",
-    "@polkadot/api": "^14.2.3",
-    "@polkadot/rpc-provider": "^14.2.3",
-    "@polkawatch/ddp-client": "^2.0.20",
-    "@substrate/connect": "^1.1.0",
-    "@w3ux/extension-assets": "^0.4.0",
-    "@w3ux/factories": "^1.0.0",
-    "@w3ux/hooks": "^1.2.1",
-    "@w3ux/react-connect-kit": "^1.8.0",
-    "@w3ux/react-odometer": "^1.1.0",
-    "@w3ux/react-polkicon": "^2.0.1-alpha.0",
-    "@w3ux/utils": "1.1.1-beta.9",
-    "@w3ux/validator-assets": "^0.2.0",
-    "@zondax/ledger-substrate": "^1.0.0",
-    "bignumber.js": "^9.1.2",
-    "bn.js": "^5.2.1",
-    "buffer": "^6.0.3",
-    "chart.js": "^4.4.4",
-    "chroma-js": "^3.1.1",
-    "compare-versions": "^6.1.1",
-    "date-fns": "^4.1.0",
-    "framer-motion": "^11.11.1",
-    "html5-qrcode": "^2.3.8",
-    "i18next": "^23.11.5",
-    "i18next-browser-languagedetector": "^8.0.0",
-    "lodash.debounce": "^4.0.8",
-    "lodash.throttle": "^4.1.1",
-    "qrcode-generator": "1.4.4",
-    "rc-slider": "^11.1.6",
-    "react": "^18.3.1",
-    "react-chartjs-2": "^5.2.0",
-    "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.13",
-    "react-helmet": "^6.1.0",
-    "react-i18next": "^15.0.2",
-    "react-router-dom": "^6.23.1",
-    "react-scroll": "^1.9.0",
-    "styled-components": "^6.1.13",
-    "usehooks-ts": "^3.0.2",
-    "viem": "^2.21.35",
-    "wagmi": "^2.12.25",
-    "xxhash-wasm": "^1.0.2"
+    "clear": "npm run --workspaces clear && rm -rf build dist tsconfig.tsbuildinfo",
+    "dev": "cd packages/app && yarn dev",
+    "lint": "eslint './**' --fix && npx prettier --write . && npm run lint --workspaces --if-present",
+    "preview": "cd packages/app && yarn preview",
+    "reset": "npm run clear && rm -rf node_modules yarn.lock && yarn",
+    "test": "npm run test --workspaces --if-present"
   },
+  "workspaces": [
+    "packages/*"
+  ],
   "devDependencies": {
     "@ledgerhq/logs": "^6.12.0",
     "@types/chroma-js": "^2.4.4",
@@ -91,14 +40,10 @@
     "prettier": "^3.3.1",
     "prettier-plugin-organize-imports": "^4.0.0",
     "sass": "1.77.6",
-    "typescript": "^5.4.3",
-    "vite": "^5.2.12",
-    "vite-bundle-visualizer": "^1.2.1",
-    "vite-plugin-checker": "^0.7.0",
-    "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^5.0.1",
-    "vitest": "^1.6.0"
+    "typescript": "^5.4.3"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1"
   },
   "packageManager": "yarn@4.1.1"
 }

packages/app/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "app",
+  "version": "1.7.0",
+  "type": "module",
+  "license": "GPL-3.0-only",
+  "scripts": {
+    "build": "npx tsc && vite build --base '/'",
+    "clear": "rm -rf build dist tsconfig.tsbuildinfo",
+    "reset": "yarn run clear &&  rm -rf node_modules yarn.lock && yarn",
+    "dev": "vite",
+    "lint": "npx prettier --write ./.scripts & node ./.scripts/localeOrderKeys.cjs",
+    "locale:order": "node ./.scripts/localeOrderKeys.cjs",
+    "locale:validate": "node ./.scripts/localeValidate.cjs",
+    "preview": "vite preview",
+    "test": "vitest",
+    "visualizer": "vite-bundle-visualizer"
+  },
+  "dependencies": {
+    "@dotlottie/player-component": "^2.7.12",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@ledgerhq/hw-transport-webhid": "^6.29.2",
+    "@polkadot-api/merkleize-metadata": "^1.1.4",
+    "@polkadot/api": "^14.2.3",
+    "@polkadot/rpc-provider": "^14.2.3",
+    "@polkawatch/ddp-client": "^2.0.20",
+    "@substrate/connect": "^2.0.1",
+    "@w3ux/extension-assets": "^0.4.0",
+    "@w3ux/factories": "^1.0.0",
+    "@w3ux/hooks": "^1.2.1",
+    "@w3ux/react-connect-kit": "^1.8.0",
+    "@w3ux/react-odometer": "^1.1.0",
+    "@w3ux/react-polkicon": "^2.0.1-alpha.0",
+    "@w3ux/utils": "1.1.1-beta.9",
+    "@w3ux/validator-assets": "^0.2.0",
+    "@zondax/ledger-substrate": "^1.0.0",
+    "bignumber.js": "^9.1.2",
+    "bn.js": "^5.2.1",
+    "buffer": "^6.0.3",
+    "chart.js": "^4.4.4",
+    "chroma-js": "^3.1.1",
+    "compare-versions": "^6.1.1",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^11.11.1",
+    "html5-qrcode": "^2.3.8",
+    "i18next": "^23.11.5",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1",
+    "qrcode-generator": "1.4.4",
+    "rc-slider": "^11.1.6",
+    "react": "^18.3.1",
+    "react-chartjs-2": "^5.2.0",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.13",
+    "react-helmet": "^6.1.0",
+    "react-i18next": "^15.0.2",
+    "react-router-dom": "^6.23.1",
+    "react-scroll": "^1.9.0",
+    "styled-components": "^6.1.13",
+    "ui-buttons": "workspace:*",
+    "usehooks-ts": "^3.0.2",
+    "viem": "^2.21.35",
+    "wagmi": "^2.12.25",
+    "xxhash-wasm": "^1.0.2"
+  },
+  "devDependencies": {
+    "vite": "^5.2.12",
+    "vite-bundle-visualizer": "^1.2.1",
+    "vite-plugin-checker": "^0.7.0",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^1.6.0"
+  },
+  "packageManager": "yarn@4.1.1"
+}