diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 67a41ca182..eb0063da9e 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -4,10 +4,82 @@ updates: - package-ecosystem: npm directory: '/' schedule: - interval: monthly - open-pull-requests-limit: 30 + interval: weekly + open-pull-requests-limit: 20 + groups: + eslint: + patterns: + - 'eslint*' + - '@eslint/*' + - '@typescript-eslint/*' + - 'typescript-eslint' + prettier: + patterns: + - 'prettier*' + react: + patterns: + - 'react*' + - 'styled-components' + - '@fortawesome/*' + - 'react-helmet-async' + - 'react-router-dom' + types: + patterns: + - '@types/*' + + utils-and-qrcode: + patterns: + - 'classnames' + - 'date-fns' + - 'bn.js' + - 'buffer' + - 'compare-versions' + - '@ledgerhq/*' + - 'rxjs' + - 'chroma-js' + - 'xxhash-wasm' + - 'html5-qrcode' + - 'qrcode-generator' + - 'chroma-js' + - 'framer-motion' + vite: + patterns: + - 'vite*' + - 'vite-plugin-*' + charts: + patterns: + - 'chart.js' + - 'react-chartjs-2' + polkadot: + patterns: + - '@polkadot/*' + - '@zondax/ledger-substrate' + - 'polkadot-api' + ui: + patterns: + - '@w3ux/*' + - 'ui-*' + - 'locales' + - 'styles' + - 'assets' + lottie: + patterns: + - '@dotlottie/*' + - '@lottiefiles/*' + wagmi: + patterns: + - 'viem' + - 'wagmi' + testing: + patterns: + - 'vitest' + - 'vite-bundle-visualizer' + commit-message: + prefix: 'deps' - package-ecosystem: github-actions directory: '/' schedule: - interval: monthly + interval: weekly + commit-message: + prefix: 'ci' diff --git a/.release-please-manifest.json b/.release-please-manifest.json index 0967ef424b..d810f1d6d3 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -1 +1,12 @@ -{} +{ + "packages/ui-core": "1.1.0", + "packages/types": "1.1.0", + "packages/consts": "1.1.0", + "packages/assets": "1.1.0", + "packages/locales": "1.1.0", + "packages/styles": "1.1.0", + "packages/plugin-staking-api": "1.1.0", + "packages/ui-overlay": "1.1.0", + "packages/ui-buttons": "1.1.0", + "packages/app": "1.8.0" +} diff --git a/package.json b/package.json index caf2ecf925..cf3f8f5dfd 100644 --- a/package.json +++ b/package.json @@ -12,22 +12,22 @@ "test": "npm run test --workspaces --if-present" }, "devDependencies": { - "@eslint/js": "^9.17.0", + "@eslint/js": "^9.18.0", "@ledgerhq/logs": "^6.12.0", - "@types/chroma-js": "^2.4.5", + "@types/chroma-js": "^3.1.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.2.25", "@types/react-helmet": "^6.1.11", - "@typescript-eslint/parser": "^8.19.0", + "@typescript-eslint/parser": "^8.20.0", "@vitejs/plugin-react-swc": "^3.7.0", "@w3ux/types": "^1.0.0", - "eslint": "^9.17.0", - "eslint-config-prettier": "^9.1.0", + "eslint": "^9.18.0", + "eslint-config-prettier": "^10.0.1", "eslint-import-resolver-typescript": "^3.7.0", "eslint-plugin-import": "^2.31.0", - "eslint-plugin-prefer-arrow-functions": "^3.4.1", - "eslint-plugin-prettier": "^5.2.1", - "eslint-plugin-react": "^7.37.2", + "eslint-plugin-prefer-arrow-functions": "^3.6.2", + "eslint-plugin-prettier": "^5.2.2", + "eslint-plugin-react": "^7.37.4", "eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-unused-imports": "^4.1.4", "globals": "^15.13.0", @@ -35,7 +35,7 @@ "prettier-plugin-organize-imports": "^4.1.0", "sass": "1.77.6", "typescript": "^5.7.2", - "typescript-eslint": "^8.16.0", + "typescript-eslint": "^8.20.0", "vite": "^6.0.2" }, "dependencies": { @@ -47,7 +47,7 @@ "bignumber.js": "^9.1.2", "classnames": "^2.5.1", "date-fns": "^4.1.0", - "framer-motion": "^11.11.1", + "framer-motion": "^11.18.0", "i18next": "^24.2.0", "react": "^18.3.1", "react-error-boundary": "^4.0.13", diff --git a/packages/app/CHANGELOG.md b/packages/app/CHANGELOG.md index a261564c1a..c142ba5af5 100644 --- a/packages/app/CHANGELOG.md +++ b/packages/app/CHANGELOG.md @@ -1,5 +1,53 @@ # Changelog +## [1.8.0](https://github.com/polkadot-cloud/polkadot-staking-dashboard/compare/app-v1.7.0...app-v1.8.0) (2025-01-16) + + +### Features + +* Add 100% validator commission prompt. ([#2358](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2358)) ([01294ae](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/01294aed9a437a26fe5543f8abb48ae5a0023cec)) +* Disable dual staking ([#2368](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2368)) ([e94d92d](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/e94d92d27fee4739a1f349a4c5ed897cae24fa1a)) +* **fix:** Abstract `LeavePool`, use as depositor unbond ([#2370](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2370)) ([a97eaaf](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/a97eaaf1591a0306d6de760ee6f74875fb4d52de)) +* **fix:** Ensure unclaimed payouts are ints ([#2336](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2336)) ([9b59277](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/9b59277365ae06a88ad9f8ce8d70de113169717d)) +* **fix:** Fix prettier organize imports, lint. ([#2340](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2340)) ([441caf7](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/441caf7069b7d9a59116c05a88e82748e7b31388)) +* **fix:** Remove left pool from state ([#2373](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2373)) ([4b823b9](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/4b823b9108b7502f0a40ed4c08da3197dd4f343c)) +* **fix:** use compact prefix ([#2374](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2374)) ([f923419](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/f923419f04637b8fcf8e1026ce394cbc3dc0b58c)) +* Historical pool rewards to Staking API, replace Subscan ([#2376](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2376)) ([9233131](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/9233131dfc4cb2781f719b80c825adc4fbc6c94c)) +* init `ui-structure`, `consts`, `styles` packages, migrate Structure kit ([#2330](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2330)) ([6d15f49](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/6d15f49460315940ec7a2502a2dca238f72c401f)) +* Init monorepo, `app` and `ui-buttons` packages ([#2327](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2327)) ([09c8daa](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/09c8daa701596e65143799497c1116242358560f)) +* Init Staking API GraphQL Plugin, discontinue Binance Spot ([#2332](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2332)) ([297b1d4](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/297b1d463a770fcd213d9e9083e85446ce6fa834)) +* **light client:** Use wss boot nodes only ([#2345](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2345)) ([02e778d](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/02e778d1731c405cb9ff955b49fc6a91645f3cdc)) +* Nominator Rewards from Staking API, discontinue Subscan nominator rewards ([#2365](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2365)) ([5e36d3a](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/5e36d3ae97177b19fc4875a891958b70186b0781)) +* normalise title w. polkadot ([e163a0f](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/e163a0fa411764e335e9e5a858f8ba1bc2140f62)) +* **refactor:** `ui-structure` to `ui-core`, handle multiple exports ([#2411](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2411)) ([21d6d87](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/21d6d876826cdea76cc85ea1db1ad0df56afe3c8)) +* **refactor:** Add assets package, move svgs to package ([#2361](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2361)) ([15c08b1](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/15c08b1f224cad6578575eae67cc03fe0947d938)) +* **refactor:** Initialise `ui-overlay` package, restructure components ([#2409](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2409)) ([70a81bf](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/70a81bfafbe0dff74b4a6c5053b9842d86d43dea)) +* **refactor:** Locales to package, fixes and structural improvements. ([#2338](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2338)) ([b9efa04](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/b9efa04f90839b13d6276c2209229d6adfe330f4)) +* **refactor:** Migrate to ESLint 9 ([#2342](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2342)) ([43db0c0](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/43db0c0259de34f7ce989de4b7596011e8a22000)) +* **refactor:** Modal close refactor, helmet async, rm react-scroll ([#2412](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2412)) ([7977231](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/797723187060e8e32e696c81cc8aa0c899507708)) +* **refactor:** Move CardHeader to `core-ui` ([#2423](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2423)) ([8793f3a](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/8793f3a4f6c1aed50797df4b7d493ffa5a43b8fc)) +* **refactor:** Pool rewards to controller, pool types to `types` package ([#2344](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2344)) ([437ffe4](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/437ffe4cca9ac23fe412cec68f59ee095f1e195f)) +* **refactor:** Remove semi ([#2356](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2356)) ([4c10b19](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/4c10b192612f557128b3eb23af68a24a993f41e7)) +* **refactor:** Rm `useSize` hook, `lodash` deps ([#2341](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2341)) ([a03169b](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/a03169bab77b74f1d2dc1b16aef7405babb30185)) +* **refactor:** Simplify `ui-core` structure ([#2414](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2414))t ([b9f42d2](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/b9f42d2c3c776fbc833e4fea36aefba0cdbbb737)) +* **refactor:** Use `@lottiefiles/dotlottie-react` ([#2413](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2413)) ([01fbcd8](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/01fbcd815db5fa51b2facecbf2f8be302a4264b6)) +* **refactor:** Use Staking API for validator era points ([#2417](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2417)) ([9e1b37f](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/9e1b37f1f032173700ce8cfacb18460143070db0)) +* Refetch token price if online status is true ([#2337](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2337)) ([c87a8f2](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/c87a8f2d6cff43b72c817c170fa83ced6d2786b9)) +* Revise footer ([#2408](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2408)) ([30e739e](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/30e739ed1ca7bebcc2ca6c4b4ebee2e54b2d2e77)) +* Support options refresh with Discord and Mail ([#2331](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2331)) ([0700594](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/07005940dc45a1921d530e18c5c49efd0f4c4d61)) +* Tx subscriptions to `TxSubmission` ([#2372](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2372)) ([04308d4](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/04308d45f9d8bec4ef29695767b2b982485c1ffc)) +* Use `useCanFastUnstake` query ([#2377](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2377)) ([0d99cbb](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/0d99cbb7156c30a047b4db32187977c1bc7b42c4)) +* use latest validator assets ([#2375](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2375)) ([b2a8af1](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/b2a8af1ff57fa8412efe67d08e1233e6eeea50ac)) +* Use pool points for unbonding / leaving pool ([#2369](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2369)) ([e1c3a08](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/e1c3a085b458a34f4559a9f43e947fbe610ef600)) + + +### Bug Fixes + +* average dip ([374e07f](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/374e07f27530b3b1de8e04615c89d3e91c6ce9c8)) +* Manage pools formatting error ([#2363](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2363)) ([eedef20](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/eedef2048720e31f6bf51d5bc36239eeb071f6bf)) +* Proxy support logic for Polkadot API ([#2359](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2359)) ([a6a37f1](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/a6a37f1ff061d82de42a54dcd504f6b80b62e739)) +* theme Selectable buttons ([#2334](https://github.com/polkadot-cloud/polkadot-staking-dashboard/issues/2334)) ([20b33e5](https://github.com/polkadot-cloud/polkadot-staking-dashboard/commit/20b33e5ef485dde1b2d92f57ddf3044e7add9afe)) + ## [1.7.0](https://github.com/polkadot-cloud/polkadot-staking-dashboard/compare/v1.6.0...v1.7.0) (2024-11-08) diff --git a/packages/app/package.json b/packages/app/package.json index a6509eb5fa..b0122b7fb2 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -22,7 +22,7 @@ "@polkadot-api/merkleize-metadata": "^1.1.12", "@polkadot-api/signers-common": "^0.1.4", "@polkadot-api/substrate-bindings": "^0.11.0", - "@polkadot/util": "^13.2.3", + "@polkadot/util": "^13.3.1", "@polkawatch/ddp-client": "^2.0.20", "@w3ux/extension-assets": "^1.0.0", "@w3ux/factories": "^1.0.0", @@ -42,7 +42,7 @@ "i18next-browser-languagedetector": "^8.0.2", "locales": "workspace:*", "plugin-staking-api": "workspace:*", - "polkadot-api": "^1.8.0", + "polkadot-api": "^1.8.2", "qrcode-generator": "1.4.4", "rc-slider": "^11.1.6", "react-chartjs-2": "^5.2.0", diff --git a/packages/app/src/library/Card/Wrappers.ts b/packages/app/src/library/Card/Wrappers.ts index 769f922616..a5e2393dee 100644 --- a/packages/app/src/library/Card/Wrappers.ts +++ b/packages/app/src/library/Card/Wrappers.ts @@ -3,69 +3,7 @@ import { PageWidthMediumThreshold } from 'consts' import styled from 'styled-components' -import type { CardHeaderWrapperProps, CardWrapperProps } from '../Graphs/types' - -/* CardHeaderWrapper - * - * Used as headers for individual cards. Usually a h4 accompanied - * with a h2. withAction allows a full-width header with a right-side - * button. - */ -export const CardHeaderWrapper = styled.div` - display: flex; - flex-flow: ${(props) => (props.$withAction ? 'row' : 'column')} wrap; - align-items: ${(props) => (props.$withAction ? 'center' : 'none')}; - justify-content: ${(props) => (props.$withAction ? 'none' : 'center')}; - margin-bottom: ${(props) => (props.$withMargin ? '1rem' : 0)}; - padding: 0rem 0.25rem; - width: 100%; - - h2 { - font-family: InterBold, sans-serif; - margin-bottom: 1rem; - } - h2, - h3 { - color: var(--text-color-primary); - display: flex; - flex-flow: row wrap; - align-items: center; - flex-grow: ${(props) => (props.$withAction ? 1 : 0)}; - - @media (max-width: ${PageWidthMediumThreshold}px) { - margin-top: 0.5rem; - } - } - h3, - h4 { - font-family: InterSemiBold, sans-serif; - } - h4 { - margin-top: 0; - margin-bottom: 0.4rem; - display: flex; - flex-flow: row wrap; - align-items: center; - flex-grow: ${(props) => (props.$withAction ? 1 : 0)}; - } - .note { - color: var(--text-color-secondary); - font-family: InterSemiBold, sans-serif; - font-size: 1.1rem; - margin-top: 0.2rem; - margin-left: 0.4rem; - } - .networkIcon { - width: 1.9rem; - height: 1.9rem; - margin-right: 0.5rem; - } - - > div { - display: flex; - align-items: center; - } -` +import type { CardWrapperProps } from '../Graphs/types' /* CardWrapper * diff --git a/packages/app/src/library/Graphs/EraPoints.tsx b/packages/app/src/library/Graphs/EraPointsLine.tsx similarity index 53% rename from packages/app/src/library/Graphs/EraPoints.tsx rename to packages/app/src/library/Graphs/EraPointsLine.tsx index 0fea39992c..659e770259 100644 --- a/packages/app/src/library/Graphs/EraPoints.tsx +++ b/packages/app/src/library/Graphs/EraPointsLine.tsx @@ -2,7 +2,9 @@ // SPDX-License-Identifier: GPL-3.0-only import type { AnyJson } from '@w3ux/types' +import BigNumber from 'bignumber.js' import { + BarElement, CategoryScale, Chart as ChartJS, Legend, @@ -14,61 +16,80 @@ import { } from 'chart.js' import { useNetwork } from 'contexts/Network' import { useTheme } from 'contexts/Themes' +import { format, fromUnixTime } from 'date-fns' +import { DefaultLocale, locales } from 'locales' +import type { ValidatorEraPoints } from 'plugin-staking-api/types' import { Line } from 'react-chartjs-2' import { useTranslation } from 'react-i18next' import graphColors from 'styles/graphs/index.json' -import type { EraPointsProps } from './types' ChartJS.register( CategoryScale, LinearScale, PointElement, LineElement, + BarElement, Title, Tooltip, Legend ) -export const EraPoints = ({ items = [], height }: EraPointsProps) => { - const { t } = useTranslation('library') +export const EraPointsLine = ({ + entries, + syncing, + width, + height, +}: { + entries: ValidatorEraPoints[] + syncing: boolean + width: string | number + height: string | number +}) => { + const { i18n, t } = useTranslation() const { mode } = useTheme() const { colors } = useNetwork().networkData + // Format reward points as an array of strings, or an empty array if syncing + const dataset = syncing + ? [] + : entries.map((entry) => new BigNumber(entry.points).toString()) + + // Use primary color for line + const color = colors.primary[mode] + const options = { responsive: true, maintainAspectRatio: false, + barPercentage: 0.3, + maxBarThickness: 13, scales: { x: { - border: { - display: false, - }, + stacked: true, grid: { - color: 'rgba(0,0,0,0)', + display: false, }, ticks: { - display: true, - maxTicksLimit: 30, - autoSkip: true, - }, - title: { - display: true, - text: 'Era', + color: graphColors.canvas.axis[mode], font: { size: 10, }, + autoSkip: true, }, }, y: { + stacked: true, + beginAtZero: true, + ticks: { + color: graphColors.canvas.axis[mode], + font: { + size: 10, + }, + }, border: { display: false, }, grid: { - color: graphColors.grid[mode], - }, - min: 0, - ticks: { - display: true, - beginAtZero: false, + color: graphColors.canvas.grid[mode], }, }, }, @@ -78,7 +99,6 @@ export const EraPoints = ({ items = [], height }: EraPointsProps) => { }, title: { display: false, - text: t('eraPoints'), }, tooltip: { displayColors: false, @@ -90,7 +110,8 @@ export const EraPoints = ({ items = [], height }: EraPointsProps) => { }, callbacks: { title: () => [], - label: (context: AnyJson) => `${context.parsed.y}`, + label: (context: AnyJson) => + `${new BigNumber(context.parsed.y).decimalPlaces(0).toFormat()} ${t('eraPoints', { ns: 'library' })}`, }, intersect: false, interaction: { @@ -101,24 +122,30 @@ export const EraPoints = ({ items = [], height }: EraPointsProps) => { } const data = { - labels: items.map(({ era }) => era), + labels: entries.map(({ start }: { start: number }) => { + const dateObj = format(fromUnixTime(start), 'do MMM', { + locale: locales[i18n.resolvedLanguage ?? DefaultLocale].dateFormat, + }) + return `${dateObj}` + }), datasets: [ { - label: t('points'), - data: items.map(({ points }) => points), - borderColor: colors.primary[mode], - backgroundColor: colors.primary[mode], - pointStyle: undefined, + label: t('era', { ns: 'library' }), + data: dataset, + borderColor: color, + backgroundColor: color, pointRadius: 0, - borderWidth: 2, + borderRadius: 3, }, ], } return (
diff --git a/packages/app/src/overlay/canvas/JoinPool/Overview/PerformanceGraph.tsx b/packages/app/src/library/Graphs/LegacyEraPoints.tsx similarity index 54% rename from packages/app/src/overlay/canvas/JoinPool/Overview/PerformanceGraph.tsx rename to packages/app/src/library/Graphs/LegacyEraPoints.tsx index f66c7d0e9c..26c6e9d6ec 100644 --- a/packages/app/src/overlay/canvas/JoinPool/Overview/PerformanceGraph.tsx +++ b/packages/app/src/library/Graphs/LegacyEraPoints.tsx @@ -1,7 +1,6 @@ // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { useSize } from '@w3ux/hooks' import type { AnyJson } from '@w3ux/types' import BigNumber from 'bignumber.js' import { @@ -15,19 +14,12 @@ import { Title, Tooltip, } from 'chart.js' -import { useHelp } from 'contexts/Help' import { useNetwork } from 'contexts/Network' -import { usePoolPerformance } from 'contexts/Pools/PoolPerformance' import { useTheme } from 'contexts/Themes' -import { useUi } from 'contexts/UI' -import { formatSize } from 'library/Graphs/Utils' -import { useRef } from 'react' import { Line } from 'react-chartjs-2' import { useTranslation } from 'react-i18next' import graphColors from 'styles/graphs/index.json' -import { ButtonHelp } from 'ui-buttons' -import type { OverviewSectionProps } from '../types' -import { GraphWrapper, HeadingWrapper } from '../Wrappers' +import type { PointsByEra } from 'types' ChartJS.register( CategoryScale, @@ -40,56 +32,45 @@ ChartJS.register( Legend ) -export const PerformanceGraph = ({ - bondedPool, - performanceKey, - graphSyncing, -}: OverviewSectionProps) => { +export const LegacyEraPoints = ({ + pointsByEra, + syncing, + width, + height, +}: { + pointsByEra: PointsByEra + syncing: boolean + width: string | number + height: string | number +}) => { const { t } = useTranslation() const { mode } = useTheme() - const { openHelp } = useHelp() - const { containerRefs } = useUi() const { colors } = useNetwork().networkData - const { getPoolRewardPoints } = usePoolPerformance() - const poolRewardPoints = getPoolRewardPoints(performanceKey) - const rawEraRewardPoints = poolRewardPoints[bondedPool.addresses.stash] || {} - - // Ref to the graph container. - const graphInnerRef = useRef(null) - - // Get the size of the graph container. - const size = useSize(graphInnerRef, { - outerElement: containerRefs?.mainInterface, - }) - const { width, height } = formatSize(size, 150) - - // Format reward points as an array of strings, or an empty array if syncing. - const dataset = graphSyncing + // Format reward points as an array of strings, or an empty array if syncing + const dataset = syncing ? [] : Object.values( Object.fromEntries( - Object.entries(rawEraRewardPoints).map(([k, v]: AnyJson) => [ + Object.entries(pointsByEra).map(([k, v]) => [ k, new BigNumber(v).toString(), ]) ) ) - // Format labels, only displaying the first and last era. - const labels = Object.keys(rawEraRewardPoints).map(() => '') - - const firstEra = Object.keys(rawEraRewardPoints)[0] + // Format labels, only displaying the first and last era + const labels = Object.keys(pointsByEra).map(() => '') + const firstEra = Object.keys(pointsByEra)[0] labels[0] = firstEra - ? `${t('era', { ns: 'library' })} ${Object.keys(rawEraRewardPoints)[0]}` + ? `${t('era', { ns: 'library' })} ${Object.keys(pointsByEra)[0]}` : '' - - const lastEra = Object.keys(rawEraRewardPoints)[labels.length - 1] + const lastEra = Object.keys(pointsByEra)[labels.length - 1] labels[labels.length - 1] = lastEra - ? `${t('era', { ns: 'library' })} ${Object.keys(rawEraRewardPoints)[labels.length - 1]}` + ? `${t('era', { ns: 'library' })} ${Object.keys(pointsByEra)[labels.length - 1]}` : '' - // Use primary color for bars. + // Use primary color for line const color = colors.primary[mode] const options = { @@ -104,6 +85,7 @@ export const PerformanceGraph = ({ display: false, }, ticks: { + color: graphColors.canvas.axis[mode], font: { size: 10, }, @@ -114,6 +96,7 @@ export const PerformanceGraph = ({ stacked: true, beginAtZero: true, ticks: { + color: graphColors.canvas.axis[mode], font: { size: 10, }, @@ -122,7 +105,7 @@ export const PerformanceGraph = ({ display: false, }, grid: { - color: graphColors.grid[mode], + color: graphColors.canvas.grid[mode], }, }, }, @@ -169,29 +152,14 @@ export const PerformanceGraph = ({ } return ( -
- -

- {t('recentPerformance', { ns: 'library' })} - openHelp('Era Points')} - /> -

- - - -
- -
- +
+
) } diff --git a/packages/app/src/library/ListItem/Labels/Metrics.tsx b/packages/app/src/library/ListItem/Labels/Metrics.tsx index 3c0ce1cb69..9eb4543a03 100644 --- a/packages/app/src/library/ListItem/Labels/Metrics.tsx +++ b/packages/app/src/library/ListItem/Labels/Metrics.tsx @@ -7,19 +7,20 @@ import { useOverlay } from 'ui-overlay' import type { MetricsProps } from '../types' export const Metrics = ({ display, address }: MetricsProps) => { - const { openModal } = useOverlay().modal + const { openCanvas } = useOverlay().canvas return (