From 2efbde9cb95352e8ccc3b6e135a413d21b97c909 Mon Sep 17 00:00:00 2001 From: Danny Willems Date: Tue, 23 Sep 2025 20:25:42 +0200 Subject: [PATCH 1/5] frontend: configure prettier --- frontend/.prettierrc.json | 28 ++++++++++++++++++++++++++ frontend/Makefile | 41 ++++++++++++++++++++++++++++++++++++++ frontend/package-lock.json | 17 ++++++++++++++++ frontend/package.json | 5 ++++- 4 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 frontend/.prettierrc.json create mode 100644 frontend/Makefile diff --git a/frontend/.prettierrc.json b/frontend/.prettierrc.json new file mode 100644 index 0000000000..731ac911c8 --- /dev/null +++ b/frontend/.prettierrc.json @@ -0,0 +1,28 @@ +{ + "printWidth": 80, + "tabWidth": 2, + "useTabs": false, + "semi": true, + "singleQuote": true, + "quoteProps": "as-needed", + "jsxSingleQuote": false, + "trailingComma": "all", + "bracketSpacing": true, + "bracketSameLine": false, + "arrowParens": "avoid", + "proseWrap": "preserve", + "htmlWhitespaceSensitivity": "css", + "endOfLine": "lf", + "overrides": [ + { + "files": "**/*.html", + "options": { + "parser": "angular", + "printWidth": 80, + "bracketSameLine": false, + "htmlWhitespaceSensitivity": "ignore", + "singleAttributePerLine": false + } + } + ] +} \ No newline at end of file diff --git a/frontend/Makefile b/frontend/Makefile new file mode 100644 index 0000000000..5413b96f80 --- /dev/null +++ b/frontend/Makefile @@ -0,0 +1,41 @@ +# Frontend Makefile + +.PHONY: help +help: ## Display this help message + @echo "Frontend Makefile - Available targets:" + @grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}' + +.PHONY: install +install: ## Install npm dependencies + npm install + +.PHONY: prettify +prettify: ## Format HTML, SCSS, TypeScript, and JavaScript files with Prettier + npx prettier --write 'src/**/*.{ts,js,html,scss,css,json}' + +.PHONY: check-prettify +check-prettify: ## Check if files are formatted with Prettier + npx prettier --check 'src/**/*.{ts,js,html,scss,css,json}' + +.PHONY: start +start: ## Start the development server + npm start + +.PHONY: build +build: ## Build the frontend for production + npm run build:prod + +.PHONY: test +test: ## Run Cypress tests + npm run tests + +.PHONY: test-headless +test-headless: ## Run Cypress tests in headless mode + npm run tests:headless + +.PHONY: clean +clean: ## Clean build artifacts and node_modules + rm -rf dist node_modules + +.PHONY: rebuild +rebuild: clean install build ## Clean, reinstall dependencies, and rebuild diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 778bbd9935..ade6e67cdb 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -69,6 +69,7 @@ "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", + "prettier": "^3.6.2", "terser-webpack-plugin": "^5.3.10", "typescript": "~5.8.3", "webpack": "^5.88.2", @@ -15816,6 +15817,22 @@ "dev": true, "license": "MIT" }, + "node_modules/prettier": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz", + "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 8d057435fb..f760769bee 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,7 +19,9 @@ "sentry:sourcemaps": "sentry-cli sourcemaps inject --org openmina-uv --project openmina ./dist/frontend/browser && sentry-cli sourcemaps upload --org openmina-uv --project openmina ./dist/frontend/browser", "copy-env": "cp dist/frontend/browser/assets/environments/webnode.js dist/frontend/browser/assets/environments/env.js", "deploy": "npm run prebuild && npm run build:prod && npm run copy-env && firebase deploy", - "deploy:leaderboard": "npm run prebuild && npm run build:prod && cp dist/frontend/browser/assets/environments/leaderboard.js dist/frontend/browser/assets/environments/env.js && firebase deploy" + "deploy:leaderboard": "npm run prebuild && npm run build:prod && cp dist/frontend/browser/assets/environments/leaderboard.js dist/frontend/browser/assets/environments/env.js && firebase deploy", + "prettify": "make prettify", + "check-prettify": "make check-prettify" }, "private": true, "dependencies": { @@ -84,6 +86,7 @@ "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", + "prettier": "^3.6.2", "terser-webpack-plugin": "^5.3.10", "typescript": "~5.8.3", "webpack": "^5.88.2", From fe2ec3b981508ca2469a0d687bcb60cf9b455179 Mon Sep 17 00:00:00 2001 From: Danny Willems Date: Wed, 24 Sep 2025 11:20:32 +0200 Subject: [PATCH 2/5] frontend: run npx prettier --write 'src/**/*.{ts,js,html,scss,css,json}' src/app/app.actions.ts 51ms (unchanged) src/app/app.component.html 48ms (unchanged) src/app/app.component.scss 30ms (unchanged) src/app/app.component.ts 31ms (unchanged) src/app/app.config.ts 17ms (unchanged) src/app/app.effects.ts 14ms (unchanged) src/app/app.module.server.ts 1ms (unchanged) src/app/app.module.ts 3ms (unchanged) src/app/app.reducer.ts 11ms (unchanged) src/app/app.routing.ts 8ms (unchanged) src/app/app.service.ts 13ms (unchanged) src/app/app.setup.ts 4ms (unchanged) src/app/app.state.ts 3ms (unchanged) src/app/core/helpers/file-progress.helper.ts 8ms (unchanged) src/app/core/services/config.service.ts 3ms (unchanged) src/app/core/services/firestore.service.ts 2ms (unchanged) src/app/core/services/rust.service.ts 7ms (unchanged) src/app/core/services/sentry.service.ts 11ms (unchanged) src/app/core/services/web-node.service.ts 20ms (unchanged) src/app/features/benchmarks/benchmarks.component.html 1ms (unchanged) src/app/features/benchmarks/benchmarks.component.scss 0ms (unchanged) src/app/features/benchmarks/benchmarks.component.ts 2ms (unchanged) src/app/features/benchmarks/benchmarks.module.ts 1ms (unchanged) src/app/features/benchmarks/benchmarks.reducer.ts 1ms (unchanged) src/app/features/benchmarks/benchmarks.routing.ts 2ms (unchanged) src/app/features/benchmarks/benchmarks.state.ts 2ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets-table/benchmarks-wallets-table.component.html 9ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets-table/benchmarks-wallets-table.component.scss 2ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets-table/benchmarks-wallets-table.component.ts 3ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.html 16ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.scss 5ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.ts 16ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets-zk.service.ts 5ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.html 15ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.scss 4ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.ts 9ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets.actions.ts 6ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets.component.html 2ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets.component.scss 0ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets.component.ts 3ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets.effects.ts 6ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets.module.ts 1ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets.reducer.ts 18ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets.routing.ts 1ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets.service.ts 70ms (unchanged) src/app/features/benchmarks/wallets/benchmarks-wallets.state.ts 3ms (unchanged) src/app/features/block-production/block-production.actions.ts 1ms (unchanged) src/app/features/block-production/block-production.component.html 1ms (unchanged) src/app/features/block-production/block-production.component.scss 0ms (unchanged) src/app/features/block-production/block-production.component.ts 1ms (unchanged) src/app/features/block-production/block-production.guard.ts 3ms (unchanged) src/app/features/block-production/block-production.module.ts 1ms (unchanged) src/app/features/block-production/block-production.reducer.ts 1ms (unchanged) src/app/features/block-production/block-production.routing.ts 2ms (unchanged) src/app/features/block-production/block-production.state.ts 2ms (unchanged) src/app/features/block-production/overview/block-production-overview.actions.ts 3ms (unchanged) src/app/features/block-production/overview/block-production-overview.component.html 6ms (unchanged) src/app/features/block-production/overview/block-production-overview.component.scss 0ms (unchanged) src/app/features/block-production/overview/block-production-overview.component.ts 4ms (unchanged) src/app/features/block-production/overview/block-production-overview.effects.ts 6ms (unchanged) src/app/features/block-production/overview/block-production-overview.module.ts 1ms (unchanged) src/app/features/block-production/overview/block-production-overview.reducer.ts 4ms (unchanged) src/app/features/block-production/overview/block-production-overview.routing.ts 1ms (unchanged) src/app/features/block-production/overview/block-production-overview.service.ts 10ms (unchanged) src/app/features/block-production/overview/block-production-overview.state.ts 3ms (unchanged) src/app/features/block-production/overview/epoch-graphs/block-production-overview-epoch-graphs.component.html 14ms (unchanged) src/app/features/block-production/overview/epoch-graphs/block-production-overview-epoch-graphs.component.scss 4ms (unchanged) src/app/features/block-production/overview/epoch-graphs/block-production-overview-epoch-graphs.component.ts 4ms (unchanged) src/app/features/block-production/overview/side-panel/block-production-overview-side-panel.component.html 23ms (unchanged) src/app/features/block-production/overview/side-panel/block-production-overview-side-panel.component.scss 4ms (unchanged) src/app/features/block-production/overview/side-panel/block-production-overview-side-panel.component.ts 8ms (unchanged) src/app/features/block-production/overview/slot-details/block-production-overview-slot-details.component.html 6ms (unchanged) src/app/features/block-production/overview/slot-details/block-production-overview-slot-details.component.scss 0ms (unchanged) src/app/features/block-production/overview/slot-details/block-production-overview-slot-details.component.ts 2ms (unchanged) src/app/features/block-production/overview/slots/block-production-overview-slots.component.html 5ms (unchanged) src/app/features/block-production/overview/slots/block-production-overview-slots.component.scss 1ms (unchanged) src/app/features/block-production/overview/slots/block-production-overview-slots.component.ts 18ms (unchanged) src/app/features/block-production/overview/toolbar/block-production-overview-toolbar.component.html 13ms (unchanged) src/app/features/block-production/overview/toolbar/block-production-overview-toolbar.component.scss 1ms (unchanged) src/app/features/block-production/overview/toolbar/block-production-overview-toolbar.component.ts 6ms (unchanged) src/app/features/block-production/won-slots/block-production-won-slots-epoch/block-production-won-slots-epoch.component.html 3ms (unchanged) src/app/features/block-production/won-slots/block-production-won-slots-epoch/block-production-won-slots-epoch.component.scss 0ms (unchanged) src/app/features/block-production/won-slots/block-production-won-slots-epoch/block-production-won-slots-epoch.component.ts 3ms (unchanged) src/app/features/block-production/won-slots/block-production-won-slots.actions.ts 3ms (unchanged) src/app/features/block-production/won-slots/block-production-won-slots.component.html 8ms (unchanged) src/app/features/block-production/won-slots/block-production-won-slots.component.scss 2ms (unchanged) src/app/features/block-production/won-slots/block-production-won-slots.component.ts 5ms (unchanged) src/app/features/block-production/won-slots/block-production-won-slots.effects.ts 5ms (unchanged) src/app/features/block-production/won-slots/block-production-won-slots.module.ts 1ms (unchanged) src/app/features/block-production/won-slots/block-production-won-slots.reducer.ts 5ms (unchanged) src/app/features/block-production/won-slots/block-production-won-slots.routing.ts 1ms (unchanged) src/app/features/block-production/won-slots/block-production-won-slots.service.ts 10ms (unchanged) src/app/features/block-production/won-slots/block-production-won-slots.state.ts 2ms (unchanged) src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.html 6ms (unchanged) src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.scss 1ms (unchanged) src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.ts 6ms (unchanged) src/app/features/block-production/won-slots/filters/block-production-won-slots-filters.component.html 10ms (unchanged) src/app/features/block-production/won-slots/filters/block-production-won-slots-filters.component.scss 1ms (unchanged) src/app/features/block-production/won-slots/filters/block-production-won-slots-filters.component.ts 3ms (unchanged) src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.html 27ms (unchanged) src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.scss 4ms (unchanged) src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.ts 8ms (unchanged) src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.html 7ms (unchanged) src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.scss 3ms (unchanged) src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.ts 6ms (unchanged) src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.html 9ms (unchanged) src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.scss 2ms (unchanged) src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.ts 8ms (unchanged) src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.html 26ms (unchanged) src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.scss 4ms (unchanged) src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.ts 14ms (unchanged) src/app/features/dashboard/dashboard-network/dashboard-network.component.html 5ms (unchanged) src/app/features/dashboard/dashboard-network/dashboard-network.component.scss 1ms (unchanged) src/app/features/dashboard/dashboard-network/dashboard-network.component.ts 2ms (unchanged) src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.html 3ms (unchanged) src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.scss 1ms (unchanged) src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.ts 2ms (unchanged) src/app/features/dashboard/dashboard.actions.ts 2ms (unchanged) src/app/features/dashboard/dashboard.component.html 3ms (unchanged) src/app/features/dashboard/dashboard.component.scss 3ms (unchanged) src/app/features/dashboard/dashboard.component.ts 7ms (unchanged) src/app/features/dashboard/dashboard.effects.ts 4ms (unchanged) src/app/features/dashboard/dashboard.module.ts 1ms (unchanged) src/app/features/dashboard/dashboard.reducer.ts 3ms (unchanged) src/app/features/dashboard/dashboard.routing.ts 1ms (unchanged) src/app/features/dashboard/dashboard.service.ts 5ms (unchanged) src/app/features/dashboard/dashboard.state.ts 3ms (unchanged) src/app/features/fuzzing/fuzzing-code/fuzzing-code.component.html 7ms (unchanged) src/app/features/fuzzing/fuzzing-code/fuzzing-code.component.scss 3ms (unchanged) src/app/features/fuzzing/fuzzing-code/fuzzing-code.component.ts 6ms (unchanged) src/app/features/fuzzing/fuzzing-directories-table/fuzzing-directories-table.component.html 2ms (unchanged) src/app/features/fuzzing/fuzzing-directories-table/fuzzing-directories-table.component.scss 0ms (unchanged) src/app/features/fuzzing/fuzzing-directories-table/fuzzing-directories-table.component.ts 4ms (unchanged) src/app/features/fuzzing/fuzzing-files-table/fuzzing-files-table.component.html 2ms (unchanged) src/app/features/fuzzing/fuzzing-files-table/fuzzing-files-table.component.scss 1ms (unchanged) src/app/features/fuzzing/fuzzing-files-table/fuzzing-files-table.component.ts 5ms (unchanged) src/app/features/fuzzing/fuzzing-toolbar/fuzzing-toolbar.component.html 3ms (unchanged) src/app/features/fuzzing/fuzzing-toolbar/fuzzing-toolbar.component.scss 2ms (unchanged) src/app/features/fuzzing/fuzzing-toolbar/fuzzing-toolbar.component.ts 3ms (unchanged) src/app/features/fuzzing/fuzzing.actions.ts 3ms (unchanged) src/app/features/fuzzing/fuzzing.component.html 3ms (unchanged) src/app/features/fuzzing/fuzzing.component.scss 1ms (unchanged) src/app/features/fuzzing/fuzzing.component.ts 3ms (unchanged) src/app/features/fuzzing/fuzzing.effects.ts 4ms (unchanged) src/app/features/fuzzing/fuzzing.module.ts 1ms (unchanged) src/app/features/fuzzing/fuzzing.reducer.ts 3ms (unchanged) src/app/features/fuzzing/fuzzing.routing.ts 1ms (unchanged) src/app/features/fuzzing/fuzzing.service.ts 8ms (unchanged) src/app/features/fuzzing/fuzzing.state.ts 2ms (unchanged) src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.html 1ms (unchanged) src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.scss 2ms (unchanged) src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.ts 1ms (unchanged) src/app/features/leaderboard/leaderboard-details/leaderboard-details.component.html 1ms (unchanged) src/app/features/leaderboard/leaderboard-details/leaderboard-details.component.scss 2ms (unchanged) src/app/features/leaderboard/leaderboard-details/leaderboard-details.component.ts 1ms (unchanged) src/app/features/leaderboard/leaderboard-filters/leaderboard-filters.component.html 4ms (unchanged) src/app/features/leaderboard/leaderboard-filters/leaderboard-filters.component.scss 4ms (unchanged) src/app/features/leaderboard/leaderboard-filters/leaderboard-filters.component.ts 3ms (unchanged) src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.html 2ms (unchanged) src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.scss 2ms (unchanged) src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.ts 1ms (unchanged) src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.html 3ms (unchanged) src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.scss 2ms (unchanged) src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.ts 2ms (unchanged) src/app/features/leaderboard/leaderboard-impressum/leaderboard-impressum.component.html 1ms (unchanged) src/app/features/leaderboard/leaderboard-impressum/leaderboard-impressum.component.scss 2ms (unchanged) src/app/features/leaderboard/leaderboard-impressum/leaderboard-impressum.component.ts 1ms (unchanged) src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.html 5ms (unchanged) src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.scss 8ms (unchanged) src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.ts 2ms (unchanged) src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.html 6ms (unchanged) src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.scss 3ms (unchanged) src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.ts 4ms (unchanged) src/app/features/leaderboard/leaderboard-privacy-policy/leaderboard-privacy-policy.component.html 1ms (unchanged) src/app/features/leaderboard/leaderboard-privacy-policy/leaderboard-privacy-policy.component.scss 2ms (unchanged) src/app/features/leaderboard/leaderboard-privacy-policy/leaderboard-privacy-policy.component.ts 1ms (unchanged) src/app/features/leaderboard/leaderboard-table/leaderboard-table.component.html 8ms (unchanged) src/app/features/leaderboard/leaderboard-table/leaderboard-table.component.scss 3ms (unchanged) src/app/features/leaderboard/leaderboard-table/leaderboard-table.component.ts 3ms (unchanged) src/app/features/leaderboard/leaderboard-terms-and-conditions/leaderboard-terms-and-conditions.component.html 1ms (unchanged) src/app/features/leaderboard/leaderboard-terms-and-conditions/leaderboard-terms-and-conditions.component.scss 1ms (unchanged) src/app/features/leaderboard/leaderboard-terms-and-conditions/leaderboard-terms-and-conditions.component.ts 1ms (unchanged) src/app/features/leaderboard/leaderboard-title/leaderboard-title.component.html 1ms (unchanged) src/app/features/leaderboard/leaderboard-title/leaderboard-title.component.scss 1ms (unchanged) src/app/features/leaderboard/leaderboard-title/leaderboard-title.component.ts 2ms (unchanged) src/app/features/leaderboard/leaderboard.actions.ts 2ms (unchanged) src/app/features/leaderboard/leaderboard.effects.ts 2ms (unchanged) src/app/features/leaderboard/leaderboard.module.ts 1ms (unchanged) src/app/features/leaderboard/leaderboard.reducer.ts 3ms (unchanged) src/app/features/leaderboard/leaderboard.routing.ts 1ms (unchanged) src/app/features/leaderboard/leaderboard.service.ts 20ms (unchanged) src/app/features/leaderboard/leaderboard.state.ts 2ms (unchanged) src/app/features/mempool/add-transaction/mempool-add-transaction.component.html 1ms (unchanged) src/app/features/mempool/add-transaction/mempool-add-transaction.component.scss 0ms (unchanged) src/app/features/mempool/add-transaction/mempool-add-transaction.component.ts 1ms (unchanged) src/app/features/mempool/filters/mempool-filters.component.html 8ms (unchanged) src/app/features/mempool/filters/mempool-filters.component.scss 2ms (unchanged) src/app/features/mempool/filters/mempool-filters.component.ts 4ms (unchanged) src/app/features/mempool/mempool.actions.ts 2ms (unchanged) src/app/features/mempool/mempool.component.html 2ms (unchanged) src/app/features/mempool/mempool.component.scss 0ms (unchanged) src/app/features/mempool/mempool.component.ts 2ms (unchanged) src/app/features/mempool/mempool.effects.ts 3ms (unchanged) src/app/features/mempool/mempool.module.ts 1ms (unchanged) src/app/features/mempool/mempool.reducer.ts 3ms (unchanged) src/app/features/mempool/mempool.routing.ts 1ms (unchanged) src/app/features/mempool/mempool.service.ts 4ms (unchanged) src/app/features/mempool/mempool.state.ts 2ms (unchanged) src/app/features/mempool/side-panel/mempool-side-panel.component.html 4ms (unchanged) src/app/features/mempool/side-panel/mempool-side-panel.component.scss 0ms (unchanged) src/app/features/mempool/side-panel/mempool-side-panel.component.ts 3ms (unchanged) src/app/features/mempool/table/mempool-table.component.html 7ms (unchanged) src/app/features/mempool/table/mempool-table.component.scss 2ms (unchanged) src/app/features/mempool/table/mempool-table.component.ts 5ms (unchanged) src/app/features/mempool/warnings/mempool-warnings.component.html 1ms (unchanged) src/app/features/mempool/warnings/mempool-warnings.component.scss 0ms (unchanged) src/app/features/mempool/warnings/mempool-warnings.component.ts 1ms (unchanged) src/app/features/network/blocks/network-blocks-graph/network-blocks-graph.component.html 0ms (unchanged) src/app/features/network/blocks/network-blocks-graph/network-blocks-graph.component.scss 0ms (unchanged) src/app/features/network/blocks/network-blocks-graph/network-blocks-graph.component.ts 3ms (unchanged) src/app/features/network/blocks/network-blocks-side-panel/network-blocks-side-panel.component.html 2ms (unchanged) src/app/features/network/blocks/network-blocks-side-panel/network-blocks-side-panel.component.scss 1ms (unchanged) src/app/features/network/blocks/network-blocks-side-panel/network-blocks-side-panel.component.ts 2ms (unchanged) src/app/features/network/blocks/network-blocks-table/network-blocks-table.component.html 8ms (unchanged) src/app/features/network/blocks/network-blocks-table/network-blocks-table.component.scss 1ms (unchanged) src/app/features/network/blocks/network-blocks-table/network-blocks-table.component.ts 3ms (unchanged) src/app/features/network/blocks/network-blocks-toolbar/network-blocks-toolbar.component.html 7ms (unchanged) src/app/features/network/blocks/network-blocks-toolbar/network-blocks-toolbar.component.scss 1ms (unchanged) src/app/features/network/blocks/network-blocks-toolbar/network-blocks-toolbar.component.ts 3ms (unchanged) src/app/features/network/blocks/network-blocks.actions.ts 3ms (unchanged) src/app/features/network/blocks/network-blocks.component.html 2ms (unchanged) src/app/features/network/blocks/network-blocks.component.scss 0ms (unchanged) src/app/features/network/blocks/network-blocks.component.ts 3ms (unchanged) src/app/features/network/blocks/network-blocks.effects.ts 7ms (unchanged) src/app/features/network/blocks/network-blocks.module.ts 1ms (unchanged) src/app/features/network/blocks/network-blocks.reducer.ts 4ms (unchanged) src/app/features/network/blocks/network-blocks.routing.ts 1ms (unchanged) src/app/features/network/blocks/network-blocks.service.ts 4ms (unchanged) src/app/features/network/blocks/network-blocks.state.ts 2ms (unchanged) src/app/features/network/bootstrap-stats/network-bootstrap-stats.actions.ts 2ms (unchanged) src/app/features/network/bootstrap-stats/network-bootstrap-stats.component.html 2ms (unchanged) src/app/features/network/bootstrap-stats/network-bootstrap-stats.component.scss 0ms (unchanged) src/app/features/network/bootstrap-stats/network-bootstrap-stats.component.ts 2ms (unchanged) src/app/features/network/bootstrap-stats/network-bootstrap-stats.effects.ts 3ms (unchanged) src/app/features/network/bootstrap-stats/network-bootstrap-stats.module.ts 1ms (unchanged) src/app/features/network/bootstrap-stats/network-bootstrap-stats.reducer.ts 2ms (unchanged) src/app/features/network/bootstrap-stats/network-bootstrap-stats.routing.ts 1ms (unchanged) src/app/features/network/bootstrap-stats/network-bootstrap-stats.service.ts 3ms (unchanged) src/app/features/network/bootstrap-stats/network-bootstrap-stats.state.ts 2ms (unchanged) src/app/features/network/bootstrap-stats/side-panel/network-bootstrap-stats-side-panel.component.html 8ms (unchanged) src/app/features/network/bootstrap-stats/side-panel/network-bootstrap-stats-side-panel.component.scss 2ms (unchanged) src/app/features/network/bootstrap-stats/side-panel/network-bootstrap-stats-side-panel.component.ts 3ms (unchanged) src/app/features/network/bootstrap-stats/table/network-bootstrap-stats-table.component.html 8ms (unchanged) src/app/features/network/bootstrap-stats/table/network-bootstrap-stats-table.component.scss 0ms (unchanged) src/app/features/network/bootstrap-stats/table/network-bootstrap-stats-table.component.ts 4ms (unchanged) src/app/features/network/connections/network-connections-side-panel/network-connections-side-panel.component.html 4ms (unchanged) src/app/features/network/connections/network-connections-side-panel/network-connections-side-panel.component.scss 0ms (unchanged) src/app/features/network/connections/network-connections-side-panel/network-connections-side-panel.component.ts 2ms (unchanged) src/app/features/network/connections/network-connections-table/network-connections-table.component.html 5ms (unchanged) src/app/features/network/connections/network-connections-table/network-connections-table.component.scss 0ms (unchanged) src/app/features/network/connections/network-connections-table/network-connections-table.component.ts 4ms (unchanged) src/app/features/network/connections/network-connections.actions.ts 2ms (unchanged) src/app/features/network/connections/network-connections.component.html 2ms (unchanged) src/app/features/network/connections/network-connections.component.scss 0ms (unchanged) src/app/features/network/connections/network-connections.component.ts 2ms (unchanged) src/app/features/network/connections/network-connections.effects.ts 4ms (unchanged) src/app/features/network/connections/network-connections.module.ts 1ms (unchanged) src/app/features/network/connections/network-connections.reducer.ts 2ms (unchanged) src/app/features/network/connections/network-connections.routing.ts 2ms (unchanged) src/app/features/network/connections/network-connections.service.ts 3ms (unchanged) src/app/features/network/connections/network-connections.state.ts 1ms (unchanged) src/app/features/network/dht-graph/dht-graph.component.html 0ms (unchanged) src/app/features/network/dht-graph/dht-graph.component.scss 0ms (unchanged) src/app/features/network/dht-graph/dht-graph.component.ts 1ms (unchanged) src/app/features/network/dht-graph/dht-graph.module.ts 1ms (unchanged) src/app/features/network/dht-graph/dht-graph.routing.ts 1ms (unchanged) src/app/features/network/dht-graph/network-dht-graph-binary-tree/equal-distance-algorithm.ts 8ms (unchanged) src/app/features/network/dht-graph/network-dht-graph-binary-tree/minimum-distance-algorithm.ts 4ms (unchanged) src/app/features/network/dht-graph/network-dht-graph-binary-tree/network-dht-graph-binary-tree.component.html 1ms (unchanged) src/app/features/network/dht-graph/network-dht-graph-binary-tree/network-dht-graph-binary-tree.component.scss 1ms (unchanged) src/app/features/network/dht-graph/network-dht-graph-binary-tree/network-dht-graph-binary-tree.component.ts 15ms (unchanged) src/app/features/network/messages/network-messages-filters/network-messages-filters.component.html 9ms (unchanged) src/app/features/network/messages/network-messages-filters/network-messages-filters.component.scss 2ms (unchanged) src/app/features/network/messages/network-messages-filters/network-messages-filters.component.ts 10ms (unchanged) src/app/features/network/messages/network-messages-side-panel/network-messages-side-panel.component.html 13ms (unchanged) src/app/features/network/messages/network-messages-side-panel/network-messages-side-panel.component.scss 1ms (unchanged) src/app/features/network/messages/network-messages-side-panel/network-messages-side-panel.component.ts 6ms (unchanged) src/app/features/network/messages/network-messages-table-footer/network-messages-table-footer.component.html 7ms (unchanged) src/app/features/network/messages/network-messages-table-footer/network-messages-table-footer.component.scss 1ms (unchanged) src/app/features/network/messages/network-messages-table-footer/network-messages-table-footer.component.ts 10ms (unchanged) src/app/features/network/messages/network-messages-table/network-messages-table.component.html 5ms (unchanged) src/app/features/network/messages/network-messages-table/network-messages-table.component.scss 1ms (unchanged) src/app/features/network/messages/network-messages-table/network-messages-table.component.ts 10ms (unchanged) src/app/features/network/messages/network-messages.actions.ts 5ms (unchanged) src/app/features/network/messages/network-messages.component.html 3ms (unchanged) src/app/features/network/messages/network-messages.component.scss 0ms (unchanged) src/app/features/network/messages/network-messages.component.ts 3ms (unchanged) src/app/features/network/messages/network-messages.effects.ts 9ms (unchanged) src/app/features/network/messages/network-messages.module.ts 1ms (unchanged) src/app/features/network/messages/network-messages.reducer.ts 5ms (unchanged) src/app/features/network/messages/network-messages.routing.ts 1ms (unchanged) src/app/features/network/messages/network-messages.service.ts 6ms (unchanged) src/app/features/network/messages/network-messages.state.ts 2ms (unchanged) src/app/features/network/network.component.html 0ms (unchanged) src/app/features/network/network.component.scss 0ms (unchanged) src/app/features/network/network.component.ts 1ms (unchanged) src/app/features/network/network.guard.ts 2ms (unchanged) src/app/features/network/network.module.ts 1ms (unchanged) src/app/features/network/network.reducer.ts 1ms (unchanged) src/app/features/network/network.routing.ts 2ms (unchanged) src/app/features/network/network.state.ts 2ms (unchanged) src/app/features/network/node-dht/network-node-dht-line/network-node-dht-line.component.html 5ms (unchanged) src/app/features/network/node-dht/network-node-dht-line/network-node-dht-line.component.scss 3ms (unchanged) src/app/features/network/node-dht/network-node-dht-line/network-node-dht-line.component.ts 6ms (unchanged) src/app/features/network/node-dht/network-node-dht-side-panel/network-node-dht-side-panel.component.html 4ms (unchanged) src/app/features/network/node-dht/network-node-dht-side-panel/network-node-dht-side-panel.component.scss 0ms (unchanged) src/app/features/network/node-dht/network-node-dht-side-panel/network-node-dht-side-panel.component.ts 3ms (unchanged) src/app/features/network/node-dht/network-node-dht-table/network-node-dht-table.component.html 5ms (unchanged) src/app/features/network/node-dht/network-node-dht-table/network-node-dht-table.component.scss 1ms (unchanged) src/app/features/network/node-dht/network-node-dht-table/network-node-dht-table.component.ts 4ms (unchanged) src/app/features/network/node-dht/network-node-dht.actions.ts 2ms (unchanged) src/app/features/network/node-dht/network-node-dht.component.html 2ms (unchanged) src/app/features/network/node-dht/network-node-dht.component.scss 0ms (unchanged) src/app/features/network/node-dht/network-node-dht.component.ts 2ms (unchanged) src/app/features/network/node-dht/network-node-dht.effects.ts 3ms (unchanged) src/app/features/network/node-dht/network-node-dht.module.ts 1ms (unchanged) src/app/features/network/node-dht/network-node-dht.reducer.ts 2ms (unchanged) src/app/features/network/node-dht/network-node-dht.routing.ts 1ms (unchanged) src/app/features/network/node-dht/network-node-dht.service.ts 4ms (unchanged) src/app/features/network/node-dht/network-node-dht.state.ts 2ms (unchanged) src/app/features/network/splits/dashboard-splits-graph/dashboard-splits-graph.component.html 2ms (unchanged) src/app/features/network/splits/dashboard-splits-graph/dashboard-splits-graph.component.scss 1ms (unchanged) src/app/features/network/splits/dashboard-splits-graph/dashboard-splits-graph.component.ts 31ms (unchanged) src/app/features/network/splits/dashboard-splits-side-panel-table/dashboard-splits-side-panel-table.component.html 3ms (unchanged) src/app/features/network/splits/dashboard-splits-side-panel-table/dashboard-splits-side-panel-table.component.scss 1ms (unchanged) src/app/features/network/splits/dashboard-splits-side-panel-table/dashboard-splits-side-panel-table.component.ts 3ms (unchanged) src/app/features/network/splits/dashboard-splits-side-panel/dashboard-splits-side-panel.component.html 5ms (unchanged) src/app/features/network/splits/dashboard-splits-side-panel/dashboard-splits-side-panel.component.scss 0ms (unchanged) src/app/features/network/splits/dashboard-splits-side-panel/dashboard-splits-side-panel.component.ts 5ms (unchanged) src/app/features/network/splits/dashboard-splits-toolbar/dashboard-splits-toolbar.component.html 6ms (unchanged) src/app/features/network/splits/dashboard-splits-toolbar/dashboard-splits-toolbar.component.scss 0ms (unchanged) src/app/features/network/splits/dashboard-splits-toolbar/dashboard-splits-toolbar.component.ts 3ms (unchanged) src/app/features/network/splits/dashboard-splits.actions.ts 3ms (unchanged) src/app/features/network/splits/dashboard-splits.component.html 2ms (unchanged) src/app/features/network/splits/dashboard-splits.component.scss 0ms (unchanged) src/app/features/network/splits/dashboard-splits.component.ts 2ms (unchanged) src/app/features/network/splits/dashboard-splits.effects.ts 3ms (unchanged) src/app/features/network/splits/dashboard-splits.module.ts 1ms (unchanged) src/app/features/network/splits/dashboard-splits.reducer.ts 9ms (unchanged) src/app/features/network/splits/dashboard-splits.routing.ts 1ms (unchanged) src/app/features/network/splits/dashboard-splits.service.ts 18ms (unchanged) src/app/features/network/splits/dashboard-splits.state.ts 3ms (unchanged) src/app/features/network/splits/mock.ts 2ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap-blocks/nodes-bootstrap-blocks.component.html 5ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap-blocks/nodes-bootstrap-blocks.component.scss 2ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap-blocks/nodes-bootstrap-blocks.component.ts 3ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap-overview/nodes-bootstrap-overview.component.html 4ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap-overview/nodes-bootstrap-overview.component.scss 1ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap-overview/nodes-bootstrap-overview.component.ts 5ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap-side-panel/nodes-bootstrap-side-panel.component.html 5ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap-side-panel/nodes-bootstrap-side-panel.component.scss 1ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap-side-panel/nodes-bootstrap-side-panel.component.ts 3ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap-table/nodes-bootstrap-table.component.html 6ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap-table/nodes-bootstrap-table.component.scss 2ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap-table/nodes-bootstrap-table.component.ts 5ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap.actions.ts 2ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap.component.html 2ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap.component.scss 0ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap.component.ts 2ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap.effects.ts 3ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap.module.ts 1ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap.reducer.ts 2ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap.routing.ts 1ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap.service.ts 3ms (unchanged) src/app/features/nodes/bootstrap/nodes-bootstrap.state.ts 2ms (unchanged) src/app/features/nodes/live/nodes-live-blocks-map/nodes-live-blocks-map.component.html 4ms (unchanged) src/app/features/nodes/live/nodes-live-blocks-map/nodes-live-blocks-map.component.scss 4ms (unchanged) src/app/features/nodes/live/nodes-live-blocks-map/nodes-live-blocks-map.component.ts 2ms (unchanged) src/app/features/nodes/live/nodes-live-events-table/nodes-live-events-table.component.html 3ms (unchanged) src/app/features/nodes/live/nodes-live-events-table/nodes-live-events-table.component.scss 1ms (unchanged) src/app/features/nodes/live/nodes-live-events-table/nodes-live-events-table.component.ts 2ms (unchanged) src/app/features/nodes/live/nodes-live-filters/nodes-live-filters.component.html 2ms (unchanged) src/app/features/nodes/live/nodes-live-filters/nodes-live-filters.component.scss 1ms (unchanged) src/app/features/nodes/live/nodes-live-filters/nodes-live-filters.component.ts 2ms (unchanged) src/app/features/nodes/live/nodes-live-status-counts/nodes-live-status-counts.component.html 3ms (unchanged) src/app/features/nodes/live/nodes-live-status-counts/nodes-live-status-counts.component.scss 1ms (unchanged) src/app/features/nodes/live/nodes-live-status-counts/nodes-live-status-counts.component.ts 2ms (unchanged) src/app/features/nodes/live/nodes-live-toolbar/nodes-live-toolbar.component.html 6ms (unchanged) src/app/features/nodes/live/nodes-live-toolbar/nodes-live-toolbar.component.scss 1ms (unchanged) src/app/features/nodes/live/nodes-live-toolbar/nodes-live-toolbar.component.ts 3ms (unchanged) src/app/features/nodes/live/nodes-live.actions.ts 3ms (unchanged) src/app/features/nodes/live/nodes-live.component.html 2ms (unchanged) src/app/features/nodes/live/nodes-live.component.scss 0ms (unchanged) src/app/features/nodes/live/nodes-live.component.ts 2ms (unchanged) src/app/features/nodes/live/nodes-live.effects.ts 3ms (unchanged) src/app/features/nodes/live/nodes-live.module.ts 1ms (unchanged) src/app/features/nodes/live/nodes-live.reducer.ts 3ms (unchanged) src/app/features/nodes/live/nodes-live.routing.ts 1ms (unchanged) src/app/features/nodes/live/nodes-live.service.ts 3ms (unchanged) src/app/features/nodes/live/nodes-live.state.ts 2ms (unchanged) src/app/features/nodes/nodes.component.html 1ms (unchanged) src/app/features/nodes/nodes.component.scss 0ms (unchanged) src/app/features/nodes/nodes.component.ts 1ms (unchanged) src/app/features/nodes/nodes.module.ts 1ms (unchanged) src/app/features/nodes/nodes.reducer.ts 1ms (unchanged) src/app/features/nodes/nodes.routing.ts 2ms (unchanged) src/app/features/nodes/nodes.state.ts 1ms (unchanged) src/app/features/nodes/overview/nodes-overview-ledgers/nodes-overview-ledgers.component.html 19ms (unchanged) src/app/features/nodes/overview/nodes-overview-ledgers/nodes-overview-ledgers.component.scss 3ms (unchanged) src/app/features/nodes/overview/nodes-overview-ledgers/nodes-overview-ledgers.component.ts 3ms (unchanged) src/app/features/nodes/overview/nodes-overview-side-panel/nodes-overview-side-panel.component.html 5ms (unchanged) src/app/features/nodes/overview/nodes-overview-side-panel/nodes-overview-side-panel.component.scss 3ms (unchanged) src/app/features/nodes/overview/nodes-overview-side-panel/nodes-overview-side-panel.component.ts 4ms (unchanged) src/app/features/nodes/overview/nodes-overview-table/nodes-overview-table.component.html 7ms (unchanged) src/app/features/nodes/overview/nodes-overview-table/nodes-overview-table.component.scss 1ms (unchanged) src/app/features/nodes/overview/nodes-overview-table/nodes-overview-table.component.ts 4ms (unchanged) src/app/features/nodes/overview/nodes-overview-toolbar/nodes-overview-toolbar.component.html 3ms (unchanged) src/app/features/nodes/overview/nodes-overview-toolbar/nodes-overview-toolbar.component.scss 1ms (unchanged) src/app/features/nodes/overview/nodes-overview-toolbar/nodes-overview-toolbar.component.ts 1ms (unchanged) src/app/features/nodes/overview/nodes-overview.actions.ts 2ms (unchanged) src/app/features/nodes/overview/nodes-overview.component.html 2ms (unchanged) src/app/features/nodes/overview/nodes-overview.component.scss 0ms (unchanged) src/app/features/nodes/overview/nodes-overview.component.ts 2ms (unchanged) src/app/features/nodes/overview/nodes-overview.effects.ts 3ms (unchanged) src/app/features/nodes/overview/nodes-overview.module.ts 1ms (unchanged) src/app/features/nodes/overview/nodes-overview.reducer.ts 2ms (unchanged) src/app/features/nodes/overview/nodes-overview.routing.ts 1ms (unchanged) src/app/features/nodes/overview/nodes-overview.service.ts 8ms (unchanged) src/app/features/nodes/overview/nodes-overview.state.ts 1ms (unchanged) src/app/features/resources/memory/memory-resources-table/memory-resources-table.component.html 7ms (unchanged) src/app/features/resources/memory/memory-resources-table/memory-resources-table.component.scss 2ms (unchanged) src/app/features/resources/memory/memory-resources-table/memory-resources-table.component.ts 4ms (unchanged) src/app/features/resources/memory/memory-resources-toolbar/memory-resources-toolbar.component.html 6ms (unchanged) src/app/features/resources/memory/memory-resources-toolbar/memory-resources-toolbar.component.scss 1ms (unchanged) src/app/features/resources/memory/memory-resources-toolbar/memory-resources-toolbar.component.ts 4ms (unchanged) src/app/features/resources/memory/memory-resources-treemap/memory-resources-treemap.component.html 0ms (unchanged) src/app/features/resources/memory/memory-resources-treemap/memory-resources-treemap.component.scss 2ms (unchanged) src/app/features/resources/memory/memory-resources-treemap/memory-resources-treemap.component.ts 23ms (unchanged) src/app/features/resources/memory/memory-resources.actions.ts 2ms (unchanged) src/app/features/resources/memory/memory-resources.component.html 3ms (unchanged) src/app/features/resources/memory/memory-resources.component.scss 1ms (unchanged) src/app/features/resources/memory/memory-resources.component.ts 2ms (unchanged) src/app/features/resources/memory/memory-resources.effects.ts 2ms (unchanged) src/app/features/resources/memory/memory-resources.module.ts 1ms (unchanged) src/app/features/resources/memory/memory-resources.pipe.ts 1ms (unchanged) src/app/features/resources/memory/memory-resources.reducer.ts 4ms (unchanged) src/app/features/resources/memory/memory-resources.routing.ts 1ms (unchanged) src/app/features/resources/memory/memory-resources.service.ts 4ms (unchanged) src/app/features/resources/memory/memory-resources.state.ts 2ms (unchanged) src/app/features/resources/resources.component.html 1ms (unchanged) src/app/features/resources/resources.component.scss 0ms (unchanged) src/app/features/resources/resources.component.ts 1ms (unchanged) src/app/features/resources/resources.module.ts 1ms (unchanged) src/app/features/resources/resources.reducer.ts 1ms (unchanged) src/app/features/resources/resources.routing.ts 1ms (unchanged) src/app/features/resources/resources.state.ts 1ms (unchanged) src/app/features/snarks/scan-state/scan-state-details/scan-state-details.component.html 1ms (unchanged) src/app/features/snarks/scan-state/scan-state-details/scan-state-details.component.scss 0ms (unchanged) src/app/features/snarks/scan-state/scan-state-details/scan-state-details.component.ts 1ms (unchanged) src/app/features/snarks/scan-state/scan-state-job-details/scan-state-job-details.component.html 1ms (unchanged) src/app/features/snarks/scan-state/scan-state-job-details/scan-state-job-details.component.scss 0ms (unchanged) src/app/features/snarks/scan-state/scan-state-job-details/scan-state-job-details.component.ts 2ms (unchanged) src/app/features/snarks/scan-state/scan-state-side-panel/scan-state-side-panel.component.html 16ms (unchanged) src/app/features/snarks/scan-state/scan-state-side-panel/scan-state-side-panel.component.scss 1ms (unchanged) src/app/features/snarks/scan-state/scan-state-side-panel/scan-state-side-panel.component.ts 5ms (unchanged) src/app/features/snarks/scan-state/scan-state-toolbar/scan-state-toolbar.component.html 11ms (unchanged) src/app/features/snarks/scan-state/scan-state-toolbar/scan-state-toolbar.component.scss 3ms (unchanged) src/app/features/snarks/scan-state/scan-state-toolbar/scan-state-toolbar.component.ts 6ms (unchanged) src/app/features/snarks/scan-state/scan-state-tree-chart/scan-state-tree-chart.component.html 2ms (unchanged) src/app/features/snarks/scan-state/scan-state-tree-chart/scan-state-tree-chart.component.scss 1ms (unchanged) src/app/features/snarks/scan-state/scan-state-tree-chart/scan-state-tree-chart.component.ts 26ms (unchanged) src/app/features/snarks/scan-state/scan-state-tree-list/scan-state-tree-list.component.html 14ms (unchanged) src/app/features/snarks/scan-state/scan-state-tree-list/scan-state-tree-list.component.scss 2ms (unchanged) src/app/features/snarks/scan-state/scan-state-tree-list/scan-state-tree-list.component.ts 7ms (unchanged) src/app/features/snarks/scan-state/scan-state.actions.ts 3ms (unchanged) src/app/features/snarks/scan-state/scan-state.component.html 3ms (unchanged) src/app/features/snarks/scan-state/scan-state.component.scss 0ms (unchanged) src/app/features/snarks/scan-state/scan-state.component.ts 4ms (unchanged) src/app/features/snarks/scan-state/scan-state.effects.ts 4ms (unchanged) src/app/features/snarks/scan-state/scan-state.module.ts 1ms (unchanged) src/app/features/snarks/scan-state/scan-state.reducer.ts 3ms (unchanged) src/app/features/snarks/scan-state/scan-state.routing.ts 1ms (unchanged) src/app/features/snarks/scan-state/scan-state.service.ts 6ms (unchanged) src/app/features/snarks/scan-state/scan-state.state.ts 2ms (unchanged) src/app/features/snarks/snarks.component.html 1ms (unchanged) src/app/features/snarks/snarks.component.scss 0ms (unchanged) src/app/features/snarks/snarks.component.ts 1ms (unchanged) src/app/features/snarks/snarks.module.ts 1ms (unchanged) src/app/features/snarks/snarks.reducer.ts 1ms (unchanged) src/app/features/snarks/snarks.routing.ts 2ms (unchanged) src/app/features/snarks/snarks.state.ts 1ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-details-accounts/snarks-work-pool-details-accounts.component.html 3ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-details-accounts/snarks-work-pool-details-accounts.component.scss 1ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-details-accounts/snarks-work-pool-details-accounts.component.ts 3ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-details-overview/snarks-work-pool-details-overview.component.html 1ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-details-overview/snarks-work-pool-details-overview.component.scss 0ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-details-overview/snarks-work-pool-details-overview.component.ts 1ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-details-specs/snarks-work-pool-details-specs.component.html 1ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-details-specs/snarks-work-pool-details-specs.component.scss 0ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-details-specs/snarks-work-pool-details-specs.component.ts 2ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-details/snarks-work-pool-details.component.html 4ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-details/snarks-work-pool-details.component.scss 1ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-details/snarks-work-pool-details.component.ts 4ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-side-panel/snarks-work-pool-side-panel.component.html 4ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-side-panel/snarks-work-pool-side-panel.component.scss 0ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-side-panel/snarks-work-pool-side-panel.component.ts 4ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-statistics/snarks-work-pool-statistics.component.html 2ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-statistics/snarks-work-pool-statistics.component.scss 0ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-statistics/snarks-work-pool-statistics.component.ts 3ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-table/snarks-work-pool-table.component.html 8ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-table/snarks-work-pool-table.component.scss 2ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-table/snarks-work-pool-table.component.ts 5ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-toolbar/snarks-work-pool-toolbar.component.html 4ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-toolbar/snarks-work-pool-toolbar.component.scss 1ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool-toolbar/snarks-work-pool-toolbar.component.ts 2ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool.actions.ts 3ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool.component.html 2ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool.component.scss 0ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool.component.ts 2ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool.effects.ts 5ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool.module.ts 1ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool.reducer.ts 3ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool.routing.ts 1ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool.service.ts 4ms (unchanged) src/app/features/snarks/work-pool/snarks-work-pool.state.ts 2ms (unchanged) src/app/features/state/actions/state-actions-graph-list/state-actions-graph-list.component.html 6ms (unchanged) src/app/features/state/actions/state-actions-graph-list/state-actions-graph-list.component.scss 1ms (unchanged) src/app/features/state/actions/state-actions-graph-list/state-actions-graph-list.component.ts 3ms (unchanged) src/app/features/state/actions/state-actions-side-panel/state-actions-side-panel.component.html 7ms (unchanged) src/app/features/state/actions/state-actions-side-panel/state-actions-side-panel.component.scss 1ms (unchanged) src/app/features/state/actions/state-actions-side-panel/state-actions-side-panel.component.ts 4ms (unchanged) src/app/features/state/actions/state-actions-toolbar/state-actions-toolbar.component.html 10ms (unchanged) src/app/features/state/actions/state-actions-toolbar/state-actions-toolbar.component.scss 2ms (unchanged) src/app/features/state/actions/state-actions-toolbar/state-actions-toolbar.component.ts 4ms (unchanged) src/app/features/state/actions/state-actions.actions.ts 3ms (unchanged) src/app/features/state/actions/state-actions.component.html 2ms (unchanged) src/app/features/state/actions/state-actions.component.scss 0ms (unchanged) src/app/features/state/actions/state-actions.component.ts 3ms (unchanged) src/app/features/state/actions/state-actions.effects.ts 4ms (unchanged) src/app/features/state/actions/state-actions.module.ts 1ms (unchanged) src/app/features/state/actions/state-actions.reducer.ts 3ms (unchanged) src/app/features/state/actions/state-actions.routing.ts 1ms (unchanged) src/app/features/state/actions/state-actions.service.ts 11ms (unchanged) src/app/features/state/actions/state-actions.state.ts 3ms (unchanged) src/app/features/state/state.component.html 0ms (unchanged) src/app/features/state/state.component.scss 0ms (unchanged) src/app/features/state/state.component.ts 1ms (unchanged) src/app/features/state/state.module.ts 1ms (unchanged) src/app/features/state/state.reducer.ts 1ms (unchanged) src/app/features/state/state.routing.ts 1ms (unchanged) src/app/features/state/state.state.ts 1ms (unchanged) src/app/features/web-node/web-node-file-upload/web-node-file-upload.component.html 8ms (unchanged) src/app/features/web-node/web-node-file-upload/web-node-file-upload.component.scss 2ms (unchanged) src/app/features/web-node/web-node-file-upload/web-node-file-upload.component.ts 6ms (unchanged) src/app/features/web-node/web-node-initialization/web-node-initialization.component.html 6ms (unchanged) src/app/features/web-node/web-node-initialization/web-node-initialization.component.scss 3ms (unchanged) src/app/features/web-node/web-node-initialization/web-node-initialization.component.ts 16ms (unchanged) src/app/features/web-node/web-node-not-supported/web-node-not-supported.component.html 5ms (unchanged) src/app/features/web-node/web-node-not-supported/web-node-not-supported.component.scss 2ms (unchanged) src/app/features/web-node/web-node-not-supported/web-node-not-supported.component.ts 3ms (unchanged) src/app/features/web-node/web-node.component.html 2ms (unchanged) src/app/features/web-node/web-node.component.scss 0ms (unchanged) src/app/features/web-node/web-node.component.ts 3ms (unchanged) src/app/features/web-node/web-node.module.ts 1ms (unchanged) src/app/features/web-node/web-node.routing.ts 1ms (unchanged) src/app/layout/block-production-pill/block-production-pill.component.html 3ms (unchanged) src/app/layout/block-production-pill/block-production-pill.component.scss 5ms (unchanged) src/app/layout/block-production-pill/block-production-pill.component.ts 4ms (unchanged) src/app/layout/env-build-modal/env-build-modal.component.html 2ms (unchanged) src/app/layout/env-build-modal/env-build-modal.component.scss 0ms (unchanged) src/app/layout/env-build-modal/env-build-modal.component.ts 1ms (unchanged) src/app/layout/error-preview/error-list/error-list.component.html 4ms (unchanged) src/app/layout/error-preview/error-list/error-list.component.scss 1ms (unchanged) src/app/layout/error-preview/error-list/error-list.component.ts 2ms (unchanged) src/app/layout/error-preview/error-preview.actions.ts 1ms (unchanged) src/app/layout/error-preview/error-preview.component.html 3ms (unchanged) src/app/layout/error-preview/error-preview.component.scss 1ms (unchanged) src/app/layout/error-preview/error-preview.component.ts 4ms (unchanged) src/app/layout/error-preview/error-preview.reducer.ts 1ms (unchanged) src/app/layout/error-preview/error-preview.state.ts 1ms (unchanged) src/app/layout/menu-tabs/menu-tabs.component.html 9ms (unchanged) src/app/layout/menu-tabs/menu-tabs.component.scss 1ms (unchanged) src/app/layout/menu-tabs/menu-tabs.component.ts 6ms (unchanged) src/app/layout/menu/menu.component.html 13ms (unchanged) src/app/layout/menu/menu.component.scss 6ms (unchanged) src/app/layout/menu/menu.component.ts 7ms (unchanged) src/app/layout/new-node/new-node.component.html 8ms (unchanged) src/app/layout/new-node/new-node.component.scss 1ms (unchanged) src/app/layout/new-node/new-node.component.ts 7ms (unchanged) src/app/layout/node-picker/node-picker.component.html 8ms (unchanged) src/app/layout/node-picker/node-picker.component.scss 2ms (unchanged) src/app/layout/node-picker/node-picker.component.ts 4ms (unchanged) src/app/layout/server-status/server-status.component.html 18ms (unchanged) src/app/layout/server-status/server-status.component.scss 5ms (unchanged) src/app/layout/server-status/server-status.component.ts 8ms (unchanged) src/app/layout/submenu-tabs/submenu-tabs.component.html 4ms (unchanged) src/app/layout/submenu-tabs/submenu-tabs.component.scss 1ms (unchanged) src/app/layout/submenu-tabs/submenu-tabs.component.ts 4ms (unchanged) src/app/layout/toolbar/loading.reducer.ts 4ms (unchanged) src/app/layout/toolbar/toolbar.component.html 4ms (unchanged) src/app/layout/toolbar/toolbar.component.scss 2ms (unchanged) src/app/layout/toolbar/toolbar.component.ts 4ms (unchanged) src/app/layout/uptime-pill/uptime-pill.component.html 2ms (unchanged) src/app/layout/uptime-pill/uptime-pill.component.scss 2ms (unchanged) src/app/layout/uptime-pill/uptime-pill.component.ts 2ms (unchanged) src/app/layout/web-node-landing-page/web-node-landing-page.component.html 4ms (unchanged) src/app/layout/web-node-landing-page/web-node-landing-page.component.scss 6ms (unchanged) src/app/layout/web-node-landing-page/web-node-landing-page.component.ts 2ms (unchanged) src/app/shared/base-classes/mina-rust-base.effect.ts 2ms (unchanged) src/app/shared/base-classes/mina-table-rust-wrapper.class.ts 1ms (unchanged) src/app/shared/base-classes/mina-table-wrapper.class.ts 2ms (unchanged) src/app/shared/base-classes/store-dispatcher.class.ts 1ms (unchanged) src/app/shared/components/mina-card/mina-card.component.html 3ms (unchanged) src/app/shared/components/mina-card/mina-card.component.scss 1ms (unchanged) src/app/shared/components/mina-card/mina-card.component.ts 1ms (unchanged) src/app/shared/components/mina-table/mina-table.component.html 9ms (unchanged) src/app/shared/components/mina-table/mina-table.component.scss 6ms (unchanged) src/app/shared/components/mina-table/mina-table.component.ts 8ms (unchanged) src/app/shared/constants/config.ts 3ms (unchanged) src/app/shared/constants/mina.ts 0ms (unchanged) src/app/shared/constants/store-functions.ts 5ms (unchanged) src/app/shared/enums/routes.enum.ts 1ms (unchanged) src/app/shared/guards/landing-page.guard.ts 2ms (unchanged) src/app/shared/helpers/date.helper.ts 4ms (unchanged) src/app/shared/helpers/ledger.helper.ts 11ms (unchanged) src/app/shared/helpers/mina.helper.ts 1ms (unchanged) src/app/shared/helpers/transaction.helper.ts 2ms (unchanged) src/app/shared/helpers/webnode.helper.ts 2ms (unchanged) src/app/shared/loading-spinner/loading-spinner.component.html 1ms (unchanged) src/app/shared/loading-spinner/loading-spinner.component.scss 1ms (unchanged) src/app/shared/loading-spinner/loading-spinner.component.ts 1ms (unchanged) src/app/shared/pagination/pagination.component.html 6ms (unchanged) src/app/shared/pagination/pagination.component.scss 1ms (unchanged) src/app/shared/pagination/pagination.component.ts 3ms (unchanged) src/app/shared/shared.module.ts 1ms (unchanged) src/app/shared/types/app/app-env-build.type.ts 1ms (unchanged) src/app/shared/types/app/app-menu.type.ts 1ms (unchanged) src/app/shared/types/app/app-node-details.type.ts 1ms (unchanged) src/app/shared/types/benchmarks/transactions/benchmarks-transaction.type.ts 1ms (unchanged) src/app/shared/types/benchmarks/transactions/benchmarks-zkapp.type.ts 1ms (unchanged) src/app/shared/types/benchmarks/wallets/benchmarks-mempool-tx.type.ts 1ms (unchanged) src/app/shared/types/benchmarks/wallets/benchmarks-wallet-transaction.type.ts 1ms (unchanged) src/app/shared/types/benchmarks/wallets/benchmarks-wallet.type.ts 1ms (unchanged) src/app/shared/types/benchmarks/wallets/sent-transactions-stats.type.ts 1ms (unchanged) src/app/shared/types/block-production/overview/block-production-overview-all-stats.type.ts 1ms (unchanged) src/app/shared/types/block-production/overview/block-production-overview-epoch-details.type.ts 1ms (unchanged) src/app/shared/types/block-production/overview/block-production-overview-epoch.type.ts 1ms (unchanged) src/app/shared/types/block-production/overview/block-production-overview-filters.type.ts 1ms (unchanged) src/app/shared/types/block-production/overview/block-production-overview-slot.type.ts 1ms (unchanged) src/app/shared/types/block-production/overview/block-production-overview-window.type.ts 1ms (unchanged) src/app/shared/types/block-production/won-slots/block-production-won-slots-epoch.type.ts 1ms (unchanged) src/app/shared/types/block-production/won-slots/block-production-won-slots-filters.type.ts 1ms (unchanged) src/app/shared/types/block-production/won-slots/block-production-won-slots-slot.type.ts 2ms (unchanged) src/app/shared/types/core/environment/mina-env.type.ts 2ms (unchanged) src/app/shared/types/core/mina/mina.type.ts 1ms (unchanged) src/app/shared/types/dashboard/dashboard-peers-stats.type.ts 1ms (unchanged) src/app/shared/types/dashboard/dashboard-rpc-stats.type.ts 1ms (unchanged) src/app/shared/types/dashboard/dashboard.peer.ts 1ms (unchanged) src/app/shared/types/error-preview/mina-error-type.enum.ts 1ms (unchanged) src/app/shared/types/error-preview/mina-error.type.ts 1ms (unchanged) src/app/shared/types/fuzzing/fuzzing-directory.type.ts 1ms (unchanged) src/app/shared/types/fuzzing/fuzzing-file-details.type.ts 1ms (unchanged) src/app/shared/types/fuzzing/fuzzing-file.type.ts 1ms (unchanged) src/app/shared/types/fuzzing/fuzzing-line-counter.type.ts 1ms (unchanged) src/app/shared/types/fuzzing/fuzzing-line.type.ts 1ms (unchanged) src/app/shared/types/leaderboard/heartbeat-summary.type.ts 1ms (unchanged) src/app/shared/types/leaderboard/heartbeat.type.ts 1ms (unchanged) src/app/shared/types/ledger/ledger.type.ts 2ms (unchanged) src/app/shared/types/mempool/mempool-filters.type.ts 1ms (unchanged) src/app/shared/types/mempool/mempool-transaction.type.ts 4ms (unchanged) src/app/shared/types/network/blocks-ipc/network-block-ipc.type.ts 1ms (unchanged) src/app/shared/types/network/blocks/network-block.type.ts 1ms (unchanged) src/app/shared/types/network/bootstrap-stats/network-bootstrap-stats-request.type.ts 1ms (unchanged) src/app/shared/types/network/connections/network-connection.type.ts 1ms (unchanged) src/app/shared/types/network/messages/network-message.type.ts 1ms (unchanged) src/app/shared/types/network/messages/network-messages-connection.type.ts 1ms (unchanged) src/app/shared/types/network/messages/network-messages-direction.enum.ts 1ms (unchanged) src/app/shared/types/network/messages/network-messages-filter-group.type.ts 1ms (unchanged) src/app/shared/types/network/messages/network-messages-filter-types.enum.ts 1ms (unchanged) src/app/shared/types/network/messages/network-messages-filter.type.ts 1ms (unchanged) src/app/shared/types/network/node-dht/network-node-dht-bucket.type.ts 1ms (unchanged) src/app/shared/types/network/node-dht/network-node-dht.type.ts 1ms (unchanged) src/app/shared/types/network/splits/dashboard-node-count.type.ts 1ms (unchanged) src/app/shared/types/network/splits/dashboard-splits-link.type.ts 1ms (unchanged) src/app/shared/types/network/splits/dashboard-splits-peer.type.ts 1ms (unchanged) src/app/shared/types/network/splits/dashboard-splits-set.type.ts 1ms (unchanged) src/app/shared/types/network/splits/dashboard-splits.type.ts 1ms (unchanged) src/app/shared/types/nodes/bootstrap/nodes-bootstrap-node.type.ts 1ms (unchanged) src/app/shared/types/nodes/dashboard/nodes-overview-block.type.ts 1ms (unchanged) src/app/shared/types/nodes/dashboard/nodes-overview-ledger.type.ts 1ms (unchanged) src/app/shared/types/nodes/dashboard/nodes-overview-node.type.ts 2ms (unchanged) src/app/shared/types/nodes/live/nodes-live-block-event.type.ts 1ms (unchanged) src/app/shared/types/nodes/live/nodes-live-node.type.ts 1ms (unchanged) src/app/shared/types/resources/memory/memory-resource.type.ts 1ms (unchanged) src/app/shared/types/resources/memory/memory-resources-name.type.ts 1ms (unchanged) src/app/shared/types/resources/memory/treemap-view.type.ts 1ms (unchanged) src/app/shared/types/snarks/scan-state/scan-state-block.type.ts 1ms (unchanged) src/app/shared/types/snarks/scan-state/scan-state-leaf.type.ts 1ms (unchanged) src/app/shared/types/snarks/scan-state/scan-state-transaction.type.ts 1ms (unchanged) src/app/shared/types/snarks/scan-state/scan-state-tree.type.ts 1ms (unchanged) src/app/shared/types/snarks/scan-state/scan-state-working-snarker.type.ts 1ms (unchanged) src/app/shared/types/snarks/work-pool/work-pool-commitment.type.ts 1ms (unchanged) src/app/shared/types/snarks/work-pool/work-pool-detail.type.ts 0ms (unchanged) src/app/shared/types/snarks/work-pool/work-pool-snark.type.ts 1ms (unchanged) src/app/shared/types/snarks/work-pool/work-pool-specs.type.ts 1ms (unchanged) src/app/shared/types/snarks/work-pool/work-pool.type.ts 1ms (unchanged) src/app/shared/types/state/actions/state-action-column.type.ts 1ms (unchanged) src/app/shared/types/state/actions/state-action-group-action.type.ts 1ms (unchanged) src/app/shared/types/state/actions/state-action-group.type.ts 1ms (unchanged) src/app/shared/types/state/actions/state-actions-stats.type.ts 1ms (unchanged) src/assets/environments/block-producers.js 19ms (unchanged) src/assets/environments/compose-producer.js 2ms (unchanged) src/assets/environments/compose.js 1ms (unchanged) src/assets/environments/env.js 1ms (unchanged) src/assets/environments/leaderboard.js 2ms (unchanged) src/assets/environments/producer.js 1ms (unchanged) src/assets/environments/staging.js 1ms (unchanged) src/assets/environments/webnode.js 1ms (unchanged) src/assets/o1js/bootstrap.js 2ms (unchanged) src/assets/o1js/coi-serviceworker.js 9ms (unchanged) src/assets/o1js/dist/o1js-wrapper.js 238ms (unchanged) src/assets/o1js/package-lock.json 54ms (unchanged) src/assets/o1js/package.json 1ms (unchanged) src/assets/o1js/replace-assertion.js 2ms (unchanged) src/assets/o1js/src/index.ts 1ms (unchanged) src/assets/o1js/src/zk-app/zk-app.ts 8ms (unchanged) src/assets/o1js/tsconfig.json 1ms (unchanged) src/assets/o1js/webpack.config.js 2ms (unchanged) src/assets/reports/index.json 0ms (unchanged) src/assets/styles/leaderboard-variables.scss 2ms (unchanged) src/assets/styles/openmina.scss 44ms (unchanged) src/environments/environment.fuzzing.ts 1ms (unchanged) src/environments/environment.local.ts 2ms (unchanged) src/environments/environment.prod.ts 1ms (unchanged) src/environments/environment.producer.ts 1ms (unchanged) src/environments/environment.ts 6ms (unchanged) src/environments/environment.webnodelocal.ts 1ms (unchanged) src/index.html 10ms (unchanged) src/main.server.ts 1ms (unchanged) src/main.ts 2ms (unchanged) src/styles.scss 3ms (unchanged) --- frontend/src/app/app.actions.ts | 40 +- frontend/src/app/app.component.html | 54 +- frontend/src/app/app.component.scss | 1 - frontend/src/app/app.component.ts | 70 +- frontend/src/app/app.config.ts | 111 +- frontend/src/app/app.effects.ts | 203 ++- frontend/src/app/app.module.server.ts | 5 +- frontend/src/app/app.reducer.ts | 55 +- frontend/src/app/app.routing.ts | 42 +- frontend/src/app/app.service.ts | 82 +- frontend/src/app/app.setup.ts | 28 +- frontend/src/app/app.state.ts | 8 +- .../app/core/helpers/file-progress.helper.ts | 5 +- .../src/app/core/services/config.service.ts | 11 +- .../app/core/services/firestore.service.ts | 28 +- .../src/app/core/services/rust.service.ts | 27 +- .../src/app/core/services/sentry.service.ts | 149 +- .../src/app/core/services/web-node.service.ts | 185 +- .../benchmarks/benchmarks.component.ts | 15 +- .../features/benchmarks/benchmarks.module.ts | 9 +- .../features/benchmarks/benchmarks.reducer.ts | 8 +- .../features/benchmarks/benchmarks.routing.ts | 5 +- .../features/benchmarks/benchmarks.state.ts | 21 +- .../benchmarks-wallets-table.component.html | 12 +- .../benchmarks-wallets-table.component.ts | 31 +- .../benchmarks-wallets-toolbar.component.html | 113 +- .../benchmarks-wallets-toolbar.component.scss | 10 +- .../benchmarks-wallets-toolbar.component.ts | 126 +- .../wallets/benchmarks-wallets-zk.service.ts | 39 +- ...marks-wallets-zkapp-toolbar.component.html | 110 +- ...marks-wallets-zkapp-toolbar.component.scss | 10 +- ...chmarks-wallets-zkapp-toolbar.component.ts | 96 +- .../wallets/benchmarks-wallets.actions.ts | 120 +- .../wallets/benchmarks-wallets.component.html | 3 +- .../wallets/benchmarks-wallets.component.ts | 57 +- .../wallets/benchmarks-wallets.effects.ts | 148 +- .../wallets/benchmarks-wallets.module.ts | 13 +- .../wallets/benchmarks-wallets.reducer.ts | 227 ++- .../wallets/benchmarks-wallets.service.ts | 89 +- .../wallets/benchmarks-wallets.state.ts | 51 +- .../block-production.component.ts | 13 +- .../block-production.guard.ts | 14 +- .../block-production.module.ts | 10 +- .../block-production.reducer.ts | 9 +- .../block-production.routing.ts | 10 +- .../block-production.state.ts | 27 +- .../block-production-overview.actions.ts | 81 +- .../block-production-overview.component.html | 23 +- .../block-production-overview.component.ts | 79 +- .../block-production-overview.effects.ts | 188 +- .../block-production-overview.module.ts | 20 +- .../block-production-overview.reducer.ts | 41 +- .../block-production-overview.routing.ts | 4 +- .../block-production-overview.service.ts | 247 +-- .../block-production-overview.state.ts | 53 +- ...ction-overview-epoch-graphs.component.html | 108 +- ...duction-overview-epoch-graphs.component.ts | 75 +- ...duction-overview-side-panel.component.html | 100 +- ...duction-overview-side-panel.component.scss | 11 +- ...roduction-overview-side-panel.component.ts | 141 +- ...ction-overview-slot-details.component.html | 15 +- ...duction-overview-slot-details.component.ts | 26 +- ...k-production-overview-slots.component.html | 14 +- ...ock-production-overview-slots.component.ts | 285 ++- ...production-overview-toolbar.component.html | 65 +- ...k-production-overview-toolbar.component.ts | 126 +- ...-production-won-slots-epoch.component.html | 2 +- ...ck-production-won-slots-epoch.component.ts | 57 +- .../block-production-won-slots.actions.ts | 48 +- .../block-production-won-slots.component.html | 41 +- .../block-production-won-slots.component.scss | 8 +- .../block-production-won-slots.component.ts | 89 +- .../block-production-won-slots.effects.ts | 163 +- .../block-production-won-slots.module.ts | 23 +- .../block-production-won-slots.reducer.ts | 57 +- .../block-production-won-slots.service.ts | 236 ++- .../block-production-won-slots.state.ts | 21 +- ...-production-won-slots-cards.component.html | 72 +- ...ck-production-won-slots-cards.component.ts | 165 +- ...roduction-won-slots-filters.component.html | 47 +- ...-production-won-slots-filters.component.ts | 54 +- ...uction-won-slots-side-panel.component.html | 137 +- ...uction-won-slots-side-panel.component.scss | 22 +- ...oduction-won-slots-side-panel.component.ts | 165 +- ...-production-won-slots-table.component.html | 34 +- ...-production-won-slots-table.component.scss | 4 +- ...ck-production-won-slots-table.component.ts | 157 +- .../dashboard-blocks-sync.component.html | 90 +- .../dashboard-blocks-sync.component.scss | 13 +- .../dashboard-blocks-sync.component.ts | 182 +- .../dashboard-ledger.component.html | 184 +- .../dashboard-ledger.component.scss | 13 +- .../dashboard-ledger.component.ts | 419 +++-- .../dashboard-network.component.html | 41 +- .../dashboard-network.component.scss | 14 +- .../dashboard-network.component.ts | 30 +- ...shboard-peers-minimal-table.component.html | 8 +- ...shboard-peers-minimal-table.component.scss | 4 +- ...dashboard-peers-minimal-table.component.ts | 29 +- .../features/dashboard/dashboard.actions.ts | 21 +- .../dashboard/dashboard.component.html | 19 +- .../dashboard/dashboard.component.scss | 13 +- .../features/dashboard/dashboard.component.ts | 244 ++- .../features/dashboard/dashboard.effects.ts | 110 +- .../features/dashboard/dashboard.module.ts | 1 - .../features/dashboard/dashboard.reducer.ts | 43 +- .../features/dashboard/dashboard.routing.ts | 6 +- .../features/dashboard/dashboard.service.ts | 113 +- .../app/features/dashboard/dashboard.state.ts | 47 +- .../fuzzing-code/fuzzing-code.component.html | 57 +- .../fuzzing-code/fuzzing-code.component.ts | 100 +- .../fuzzing-directories-table.component.ts | 91 +- .../fuzzing-files-table.component.html | 1 - .../fuzzing-files-table.component.ts | 92 +- .../fuzzing-toolbar.component.html | 34 +- .../fuzzing-toolbar.component.ts | 43 +- .../app/features/fuzzing/fuzzing.actions.ts | 35 +- .../features/fuzzing/fuzzing.component.html | 33 +- .../features/fuzzing/fuzzing.component.scss | 12 +- .../app/features/fuzzing/fuzzing.component.ts | 48 +- .../app/features/fuzzing/fuzzing.effects.ts | 108 +- .../app/features/fuzzing/fuzzing.module.ts | 6 +- .../app/features/fuzzing/fuzzing.reducer.ts | 28 +- .../app/features/fuzzing/fuzzing.service.ts | 91 +- .../src/app/features/fuzzing/fuzzing.state.ts | 41 +- .../leaderboard-apply.component.scss | 5 +- .../leaderboard-apply.component.ts | 14 +- .../leaderboard-details.component.scss | 2 +- .../leaderboard-details.component.ts | 14 +- .../leaderboard-filters.component.html | 44 +- .../leaderboard-filters.component.scss | 3 +- .../leaderboard-filters.component.ts | 59 +- .../leaderboard-footer.component.html | 19 +- .../leaderboard-footer.component.scss | 4 +- .../leaderboard-footer.component.ts | 14 +- .../leaderboard-header.component.html | 46 +- .../leaderboard-header.component.scss | 2 +- .../leaderboard-header.component.ts | 66 +- .../leaderboard-impressum.component.scss | 2 +- .../leaderboard-impressum.component.ts | 14 +- .../leaderboard-landing-page.component.html | 111 +- .../leaderboard-landing-page.component.scss | 13 +- .../leaderboard-landing-page.component.ts | 31 +- .../leaderboard-page.component.html | 45 +- .../leaderboard-page.component.scss | 2 +- .../leaderboard-page.component.ts | 94 +- .../leaderboard-privacy-policy.component.scss | 2 +- .../leaderboard-privacy-policy.component.ts | 14 +- .../leaderboard-table.component.html | 55 +- .../leaderboard-table.component.scss | 10 +- .../leaderboard-table.component.ts | 49 +- ...rboard-terms-and-conditions.component.scss | 2 +- ...derboard-terms-and-conditions.component.ts | 14 +- .../leaderboard-title.component.scss | 2 +- .../leaderboard-title.component.ts | 29 +- .../leaderboard/leaderboard.actions.ts | 22 +- .../leaderboard/leaderboard.effects.ts | 30 +- .../leaderboard/leaderboard.module.ts | 5 +- .../leaderboard/leaderboard.reducer.ts | 44 +- .../leaderboard/leaderboard.service.ts | 156 +- .../features/leaderboard/leaderboard.state.ts | 19 +- .../mempool-add-transaction.component.ts | 14 +- .../filters/mempool-filters.component.html | 61 +- .../filters/mempool-filters.component.scss | 1 - .../filters/mempool-filters.component.ts | 68 +- .../app/features/mempool/mempool.actions.ts | 22 +- .../features/mempool/mempool.component.html | 17 +- .../app/features/mempool/mempool.component.ts | 30 +- .../app/features/mempool/mempool.effects.ts | 44 +- .../app/features/mempool/mempool.module.ts | 5 +- .../app/features/mempool/mempool.reducer.ts | 31 +- .../app/features/mempool/mempool.service.ts | 36 +- .../src/app/features/mempool/mempool.state.ts | 15 +- .../mempool-side-panel.component.html | 26 +- .../mempool-side-panel.component.ts | 44 +- .../table/mempool-table.component.html | 41 +- .../table/mempool-table.component.scss | 4 +- .../mempool/table/mempool-table.component.ts | 78 +- .../warnings/mempool-warnings.component.ts | 14 +- .../network-blocks-graph.component.ts | 35 +- .../network-blocks-side-panel.component.html | 10 +- .../network-blocks-side-panel.component.scss | 3 +- .../network-blocks-side-panel.component.ts | 26 +- .../network-blocks-table.component.html | 53 +- .../network-blocks-table.component.ts | 35 +- .../network-blocks-toolbar.component.html | 64 +- .../network-blocks-toolbar.component.ts | 39 +- .../network/blocks/network-blocks.actions.ts | 43 +- .../blocks/network-blocks.component.html | 15 +- .../blocks/network-blocks.component.ts | 58 +- .../network/blocks/network-blocks.effects.ts | 150 +- .../network/blocks/network-blocks.module.ts | 10 +- .../network/blocks/network-blocks.reducer.ts | 47 +- .../network/blocks/network-blocks.service.ts | 63 +- .../network/blocks/network-blocks.state.ts | 36 +- .../network-bootstrap-stats.actions.ts | 46 +- .../network-bootstrap-stats.component.html | 15 +- .../network-bootstrap-stats.component.ts | 53 +- .../network-bootstrap-stats.effects.ts | 76 +- .../network-bootstrap-stats.module.ts | 9 +- .../network-bootstrap-stats.reducer.ts | 20 +- .../network-bootstrap-stats.service.ts | 33 +- .../network-bootstrap-stats.state.ts | 28 +- ...-bootstrap-stats-side-panel.component.html | 67 +- ...rk-bootstrap-stats-side-panel.component.ts | 92 +- ...twork-bootstrap-stats-table.component.html | 34 +- ...network-bootstrap-stats-table.component.ts | 102 +- ...work-connections-side-panel.component.html | 26 +- ...etwork-connections-side-panel.component.ts | 55 +- .../network-connections-table.component.html | 32 +- .../network-connections-table.component.ts | 70 +- .../network-connections.actions.ts | 39 +- .../network-connections.component.html | 15 +- .../network-connections.component.ts | 66 +- .../network-connections.effects.ts | 122 +- .../connections/network-connections.module.ts | 6 +- .../network-connections.reducer.ts | 6 +- .../network-connections.service.ts | 35 +- .../connections/network-connections.state.ts | 16 +- .../network/dht-graph/dht-graph.component.ts | 28 +- .../network/dht-graph/dht-graph.module.ts | 15 +- .../equal-distance-algorithm.ts | 57 +- .../minimum-distance-algorithm.ts | 44 +- ...twork-dht-graph-binary-tree.component.html | 7 +- ...network-dht-graph-binary-tree.component.ts | 100 +- .../network-messages-filters.component.html | 82 +- .../network-messages-filters.component.ts | 260 ++- ...network-messages-side-panel.component.html | 99 +- .../network-messages-side-panel.component.ts | 161 +- ...twork-messages-table-footer.component.html | 71 +- ...network-messages-table-footer.component.ts | 166 +- .../network-messages-table.component.html | 27 +- .../network-messages-table.component.ts | 148 +- .../messages/network-messages.actions.ts | 107 +- .../messages/network-messages.component.html | 23 +- .../messages/network-messages.component.ts | 46 +- .../messages/network-messages.effects.ts | 326 ++-- .../messages/network-messages.module.ts | 31 +- .../messages/network-messages.reducer.ts | 79 +- .../messages/network-messages.service.ts | 108 +- .../messages/network-messages.state.ts | 42 +- .../app/features/network/network.component.ts | 13 +- .../src/app/features/network/network.guard.ts | 5 +- .../app/features/network/network.module.ts | 10 +- .../app/features/network/network.reducer.ts | 59 +- .../app/features/network/network.routing.ts | 36 +- .../src/app/features/network/network.state.ts | 41 +- .../network-node-dht-line.component.html | 32 +- .../network-node-dht-line.component.ts | 132 +- ...network-node-dht-side-panel.component.html | 34 +- .../network-node-dht-side-panel.component.ts | 55 +- .../network-node-dht-table.component.html | 29 +- .../network-node-dht-table.component.ts | 94 +- .../node-dht/network-node-dht.actions.ts | 40 +- .../node-dht/network-node-dht.component.html | 15 +- .../node-dht/network-node-dht.component.ts | 49 +- .../node-dht/network-node-dht.effects.ts | 85 +- .../node-dht/network-node-dht.module.ts | 5 +- .../node-dht/network-node-dht.reducer.ts | 36 +- .../node-dht/network-node-dht.routing.ts | 3 +- .../node-dht/network-node-dht.service.ts | 47 +- .../node-dht/network-node-dht.state.ts | 32 +- .../dashboard-splits-graph.component.html | 6 +- .../dashboard-splits-graph.component.ts | 531 ++++-- ...ard-splits-side-panel-table.component.html | 6 +- ...board-splits-side-panel-table.component.ts | 57 +- ...dashboard-splits-side-panel.component.html | 36 +- .../dashboard-splits-side-panel.component.ts | 108 +- .../dashboard-splits-toolbar.component.html | 47 +- .../dashboard-splits-toolbar.component.ts | 53 +- .../splits/dashboard-splits.actions.ts | 44 +- .../splits/dashboard-splits.component.html | 14 +- .../splits/dashboard-splits.component.ts | 30 +- .../splits/dashboard-splits.effects.ts | 98 +- .../network/splits/dashboard-splits.module.ts | 7 +- .../splits/dashboard-splits.reducer.ts | 97 +- .../splits/dashboard-splits.service.ts | 147 +- .../network/splits/dashboard-splits.state.ts | 74 +- .../src/app/features/network/splits/mock.ts | 126 +- .../nodes-bootstrap-blocks.component.html | 39 +- .../nodes-bootstrap-blocks.component.ts | 74 +- .../nodes-bootstrap-overview.component.html | 2 +- .../nodes-bootstrap-overview.component.ts | 110 +- .../nodes-bootstrap-side-panel.component.html | 38 +- .../nodes-bootstrap-side-panel.component.scss | 11 +- .../nodes-bootstrap-side-panel.component.ts | 63 +- .../nodes-bootstrap-table.component.html | 13 +- .../nodes-bootstrap-table.component.ts | 85 +- .../bootstrap/nodes-bootstrap.actions.ts | 35 +- .../bootstrap/nodes-bootstrap.component.html | 15 +- .../bootstrap/nodes-bootstrap.component.ts | 40 +- .../bootstrap/nodes-bootstrap.effects.ts | 55 +- .../nodes/bootstrap/nodes-bootstrap.module.ts | 7 +- .../bootstrap/nodes-bootstrap.reducer.ts | 15 +- .../bootstrap/nodes-bootstrap.service.ts | 94 +- .../nodes/bootstrap/nodes-bootstrap.state.ts | 24 +- .../nodes-live-blocks-map.component.html | 39 +- .../nodes-live-blocks-map.component.scss | 4 +- .../nodes-live-blocks-map.component.ts | 21 +- .../nodes-live-events-table.component.html | 3 +- .../nodes-live-events-table.component.scss | 1 - .../nodes-live-events-table.component.ts | 41 +- .../nodes-live-filters.component.html | 12 +- .../nodes-live-filters.component.scss | 1 - .../nodes-live-filters.component.ts | 18 +- .../nodes-live-status-counts.component.html | 6 +- .../nodes-live-status-counts.component.ts | 18 +- .../nodes-live-toolbar.component.html | 56 +- .../nodes-live-toolbar.component.ts | 85 +- .../features/nodes/live/nodes-live.actions.ts | 28 +- .../nodes/live/nodes-live.component.html | 17 +- .../nodes/live/nodes-live.component.ts | 46 +- .../features/nodes/live/nodes-live.effects.ts | 57 +- .../features/nodes/live/nodes-live.module.ts | 6 +- .../features/nodes/live/nodes-live.reducer.ts | 63 +- .../features/nodes/live/nodes-live.service.ts | 42 +- .../features/nodes/live/nodes-live.state.ts | 32 +- .../src/app/features/nodes/nodes.component.ts | 14 +- .../src/app/features/nodes/nodes.module.ts | 10 +- .../src/app/features/nodes/nodes.reducer.ts | 42 +- .../src/app/features/nodes/nodes.routing.ts | 15 +- .../src/app/features/nodes/nodes.state.ts | 25 +- .../nodes-overview-ledgers.component.html | 207 ++- .../nodes-overview-ledgers.component.ts | 56 +- .../nodes-overview-side-panel.component.html | 30 +- .../nodes-overview-side-panel.component.scss | 4 +- .../nodes-overview-side-panel.component.ts | 82 +- .../nodes-overview-table.component.html | 14 +- .../nodes-overview-table.component.ts | 104 +- .../nodes-overview-toolbar.component.html | 37 +- .../nodes-overview-toolbar.component.ts | 22 +- .../nodes/overview/nodes-overview.actions.ts | 37 +- .../overview/nodes-overview.component.html | 15 +- .../overview/nodes-overview.component.ts | 45 +- .../nodes/overview/nodes-overview.effects.ts | 77 +- .../nodes/overview/nodes-overview.module.ts | 41 +- .../nodes/overview/nodes-overview.reducer.ts | 37 +- .../nodes/overview/nodes-overview.service.ts | 242 ++- .../nodes/overview/nodes-overview.state.ts | 20 +- .../memory-resources-table.component.html | 51 +- .../memory-resources-table.component.ts | 61 +- .../memory-resources-toolbar.component.html | 54 +- .../memory-resources-toolbar.component.ts | 118 +- .../memory-resources-treemap.component.scss | 4 +- .../memory-resources-treemap.component.ts | 391 ++-- .../memory/memory-resources.actions.ts | 25 +- .../memory/memory-resources.component.html | 27 +- .../memory/memory-resources.component.ts | 57 +- .../memory/memory-resources.effects.ts | 53 +- .../memory/memory-resources.module.ts | 9 +- .../resources/memory/memory-resources.pipe.ts | 4 +- .../memory/memory-resources.reducer.ts | 18 +- .../memory/memory-resources.service.ts | 67 +- .../memory/memory-resources.state.ts | 28 +- .../features/resources/resources.component.ts | 14 +- .../features/resources/resources.module.ts | 13 +- .../features/resources/resources.reducer.ts | 20 +- .../features/resources/resources.routing.ts | 5 +- .../app/features/resources/resources.state.ts | 21 +- .../scan-state-details.component.ts | 14 +- .../scan-state-job-details.component.html | 5 +- .../scan-state-job-details.component.ts | 34 +- .../scan-state-side-panel.component.html | 156 +- .../scan-state-side-panel.component.ts | 101 +- .../scan-state-toolbar.component.html | 138 +- .../scan-state-toolbar.component.ts | 98 +- .../scan-state-tree-chart.component.html | 10 +- .../scan-state-tree-chart.component.scss | 14 +- .../scan-state-tree-chart.component.ts | 275 ++- .../scan-state-tree-list.component.html | 192 +- .../scan-state-tree-list.component.scss | 4 +- .../scan-state-tree-list.component.ts | 119 +- .../snarks/scan-state/scan-state.actions.ts | 27 +- .../scan-state/scan-state.component.html | 17 +- .../snarks/scan-state/scan-state.component.ts | 75 +- .../snarks/scan-state/scan-state.effects.ts | 87 +- .../snarks/scan-state/scan-state.module.ts | 10 +- .../snarks/scan-state/scan-state.reducer.ts | 27 +- .../snarks/scan-state/scan-state.routing.ts | 4 +- .../snarks/scan-state/scan-state.service.ts | 94 +- .../snarks/scan-state/scan-state.state.ts | 40 +- .../app/features/snarks/snarks.component.ts | 14 +- .../src/app/features/snarks/snarks.module.ts | 12 +- .../src/app/features/snarks/snarks.reducer.ts | 29 +- .../src/app/features/snarks/snarks.routing.ts | 10 +- .../src/app/features/snarks/snarks.state.ts | 22 +- ...-work-pool-details-accounts.component.html | 28 +- ...ks-work-pool-details-accounts.component.ts | 29 +- ...-work-pool-details-overview.component.html | 5 +- ...ks-work-pool-details-overview.component.ts | 27 +- ...rks-work-pool-details-specs.component.html | 10 +- ...narks-work-pool-details-specs.component.ts | 49 +- .../snarks-work-pool-details.component.html | 28 +- .../snarks-work-pool-details.component.ts | 69 +- ...snarks-work-pool-side-panel.component.html | 77 +- .../snarks-work-pool-side-panel.component.ts | 71 +- ...snarks-work-pool-statistics.component.html | 6 +- .../snarks-work-pool-statistics.component.ts | 50 +- .../snarks-work-pool-table.component.html | 55 +- .../snarks-work-pool-table.component.scss | 2 - .../snarks-work-pool-table.component.ts | 63 +- .../snarks-work-pool-toolbar.component.html | 24 +- .../snarks-work-pool-toolbar.component.scss | 1 - .../snarks-work-pool-toolbar.component.ts | 33 +- .../work-pool/snarks-work-pool.actions.ts | 53 +- .../work-pool/snarks-work-pool.component.html | 15 +- .../work-pool/snarks-work-pool.component.ts | 30 +- .../work-pool/snarks-work-pool.effects.ts | 127 +- .../work-pool/snarks-work-pool.module.ts | 15 +- .../work-pool/snarks-work-pool.reducer.ts | 42 +- .../work-pool/snarks-work-pool.routing.ts | 1 - .../work-pool/snarks-work-pool.service.ts | 58 +- .../work-pool/snarks-work-pool.state.ts | 36 +- .../state-actions-graph-list.component.html | 49 +- .../state-actions-graph-list.component.scss | 4 +- .../state-actions-graph-list.component.ts | 68 +- .../state-actions-side-panel.component.html | 32 +- .../state-actions-side-panel.component.ts | 74 +- .../state-actions-toolbar.component.html | 106 +- .../state-actions-toolbar.component.ts | 99 +- .../state/actions/state-actions.actions.ts | 36 +- .../actions/state-actions.component.html | 15 +- .../state/actions/state-actions.component.ts | 35 +- .../state/actions/state-actions.effects.ts | 96 +- .../state/actions/state-actions.module.ts | 3 +- .../state/actions/state-actions.reducer.ts | 50 +- .../state/actions/state-actions.routing.ts | 4 +- .../state/actions/state-actions.service.ts | 183 +- .../state/actions/state-actions.state.ts | 56 +- .../app/features/state/state.component.html | 2 +- .../src/app/features/state/state.component.ts | 14 +- .../src/app/features/state/state.module.ts | 12 +- .../src/app/features/state/state.reducer.ts | 20 +- .../src/app/features/state/state.routing.ts | 9 +- .../src/app/features/state/state.state.ts | 17 +- .../web-node-file-upload.component.html | 136 +- .../web-node-file-upload.component.scss | 7 +- .../web-node-file-upload.component.ts | 88 +- .../web-node-initialization.component.html | 46 +- .../web-node-initialization.component.scss | 4 +- .../web-node-initialization.component.ts | 269 +-- .../web-node-not-supported.component.html | 61 +- .../web-node-not-supported.component.ts | 30 +- .../features/web-node/web-node.component.html | 9 +- .../features/web-node/web-node.component.ts | 61 +- .../app/features/web-node/web-node.module.ts | 6 +- .../block-production-pill.component.html | 11 +- .../block-production-pill.component.scss | 20 +- .../block-production-pill.component.ts | 102 +- .../env-build-modal.component.html | 10 +- .../env-build-modal.component.ts | 20 +- .../error-list/error-list.component.html | 15 +- .../error-list/error-list.component.ts | 20 +- .../error-preview/error-preview.actions.ts | 8 +- .../error-preview.component.html | 30 +- .../error-preview/error-preview.component.ts | 67 +- .../error-preview/error-preview.reducer.ts | 12 +- .../error-preview/error-preview.state.ts | 3 +- .../layout/menu-tabs/menu-tabs.component.html | 60 +- .../layout/menu-tabs/menu-tabs.component.scss | 10 +- .../layout/menu-tabs/menu-tabs.component.ts | 115 +- .../src/app/layout/menu/menu.component.html | 137 +- .../src/app/layout/menu/menu.component.scss | 42 +- .../src/app/layout/menu/menu.component.ts | 68 +- .../layout/new-node/new-node.component.html | 104 +- .../layout/new-node/new-node.component.scss | 4 +- .../app/layout/new-node/new-node.component.ts | 65 +- .../node-picker/node-picker.component.html | 97 +- .../node-picker/node-picker.component.scss | 4 +- .../node-picker/node-picker.component.ts | 71 +- .../server-status.component.html | 126 +- .../server-status.component.scss | 14 +- .../server-status/server-status.component.ts | 231 ++- .../submenu-tabs/submenu-tabs.component.html | 20 +- .../submenu-tabs/submenu-tabs.component.ts | 57 +- .../src/app/layout/toolbar/loading.reducer.ts | 59 +- .../app/layout/toolbar/toolbar.component.html | 21 +- .../app/layout/toolbar/toolbar.component.ts | 65 +- .../uptime-pill/uptime-pill.component.html | 15 +- .../uptime-pill/uptime-pill.component.scss | 1 - .../uptime-pill/uptime-pill.component.ts | 44 +- .../web-node-landing-page.component.html | 61 +- .../web-node-landing-page.component.scss | 10 +- .../web-node-landing-page.component.ts | 24 +- .../base-classes/mina-rust-base.effect.ts | 35 +- .../mina-table-rust-wrapper.class.ts | 6 +- .../base-classes/mina-table-wrapper.class.ts | 31 +- .../base-classes/store-dispatcher.class.ts | 7 +- .../mina-card/mina-card.component.html | 16 +- .../mina-card/mina-card.component.ts | 14 +- .../mina-table/mina-table.component.html | 71 +- .../mina-table/mina-table.component.scss | 7 +- .../mina-table/mina-table.component.ts | 85 +- frontend/src/app/shared/constants/config.ts | 43 +- .../app/shared/constants/store-functions.ts | 115 +- .../app/shared/guards/landing-page.guard.ts | 7 +- .../src/app/shared/helpers/date.helper.ts | 13 +- .../src/app/shared/helpers/ledger.helper.ts | 59 +- .../src/app/shared/helpers/mina.helper.ts | 10 +- .../app/shared/helpers/transaction.helper.ts | 8 +- .../src/app/shared/helpers/webnode.helper.ts | 7 +- .../loading-spinner.component.html | 10 +- .../pagination/pagination.component.html | 64 +- .../shared/pagination/pagination.component.ts | 23 +- frontend/src/app/shared/shared.module.ts | 23 +- .../block-production-overview-epoch.type.ts | 12 +- .../block-production-won-slots-slot.type.ts | 2 +- .../types/core/environment/mina-env.type.ts | 18 +- .../fuzzing/fuzzing-line-counter.type.ts | 6 +- .../app/shared/types/ledger/ledger.type.ts | 1 - .../types/mempool/mempool-transaction.type.ts | 1 - .../snarks/scan-state/scan-state-leaf.type.ts | 2 +- .../work-pool/work-pool-commitment.type.ts | 2 +- .../snarks/work-pool/work-pool-detail.type.ts | 2 +- .../snarks/work-pool/work-pool-snark.type.ts | 2 +- .../assets/environments/block-producers.js | 8 +- .../src/assets/environments/leaderboard.js | 13 +- frontend/src/assets/environments/producer.js | 2 +- frontend/src/assets/environments/staging.js | 14 +- frontend/src/assets/environments/webnode.js | 22 +- frontend/src/assets/o1js/bootstrap.js | 2 +- frontend/src/assets/o1js/coi-serviceworker.js | 79 +- frontend/src/assets/o1js/dist/o1js-wrapper.js | 251 +-- frontend/src/assets/o1js/replace-assertion.js | 4 +- frontend/src/assets/o1js/src/index.ts | 5 +- frontend/src/assets/o1js/src/zk-app/zk-app.ts | 49 +- frontend/src/assets/o1js/tsconfig.json | 2 +- frontend/src/assets/o1js/webpack.config.js | 10 +- frontend/src/assets/reports/index.json | 4 +- .../assets/styles/leaderboard-variables.scss | 37 +- frontend/src/assets/styles/openmina.scss | 1599 ++++++++--------- .../src/environments/environment.fuzzing.ts | 1 - .../src/environments/environment.local.ts | 1 - frontend/src/environments/environment.ts | 11 +- .../environments/environment.webnodelocal.ts | 1 - frontend/src/index.html | 168 +- frontend/src/main.ts | 10 +- frontend/src/styles.scss | 9 +- 538 files changed, 18505 insertions(+), 10193 deletions(-) diff --git a/frontend/src/app/app.actions.ts b/frontend/src/app/app.actions.ts index 59afd73900..9a1c1d0584 100644 --- a/frontend/src/app/app.actions.ts +++ b/frontend/src/app/app.actions.ts @@ -10,19 +10,43 @@ export const APP_PREFIX = 'App'; const type = (type: T) => createType(APP_PREFIX, null, type); const init = createAction(type('Init')); -const initSuccess = createAction(type('Init Success'), props<{ activeNode: MinaNode, nodes: MinaNode[] }>()); +const initSuccess = createAction( + type('Init Success'), + props<{ activeNode: MinaNode; nodes: MinaNode[] }>(), +); -const changeActiveNode = createAction(type('Change Active Node'), props<{ node: MinaNode }>()); +const changeActiveNode = createAction( + type('Change Active Node'), + props<{ node: MinaNode }>(), +); const getNodeDetails = createAction(type('Get Node Details')); -const getNodeDetailsSuccess = createAction(type('Get Node Details Success'), props<{ details: AppNodeDetails }>()); +const getNodeDetailsSuccess = createAction( + type('Get Node Details Success'), + props<{ details: AppNodeDetails }>(), +); const getNodeEnvBuild = createAction(type('Get Node Env Build')); -const getNodeEnvBuildSuccess = createAction(type('Get Node Env Build Success'), props<{ envBuild: AppEnvBuild }>()); -const deleteNode = createAction(type('Delete Node'), props<{ node: MinaNode }>()); +const getNodeEnvBuildSuccess = createAction( + type('Get Node Env Build Success'), + props<{ envBuild: AppEnvBuild }>(), +); +const deleteNode = createAction( + type('Delete Node'), + props<{ node: MinaNode }>(), +); const addNode = createAction(type('Add Node'), props<{ node: MinaNode }>()); -const changeMenuCollapsing = createAction(type('Change Menu Collapsing'), props<{ isCollapsing: boolean }>()); -const changeSubMenus = createAction(type('Change Sub Menus'), props<{ subMenus: string[] }>()); -const toggleMobile = createAction(type('Toggle Mobile'), props<{ isMobile: boolean }>()); +const changeMenuCollapsing = createAction( + type('Change Menu Collapsing'), + props<{ isCollapsing: boolean }>(), +); +const changeSubMenus = createAction( + type('Change Sub Menus'), + props<{ subMenus: string[] }>(), +); +const toggleMobile = createAction( + type('Toggle Mobile'), + props<{ isMobile: boolean }>(), +); const toggleMenuOpening = createAction(type('Toggle Menu Opening')); export const AppActions = { diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index e8ff3c4ce6..f7193b287c 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -3,44 +3,56 @@ } @else { - + } } @else if (showLoadingWebNodePage$ | async) { } @else if (showLeaderboardPage$ | async) { } @else if (loaded) { - + @if (isDesktop) { - +
} - + @if (!hideToolbar) { } -
+
@if (!isDesktop) { - + } diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss index 06dc34f8aa..97f171f072 100644 --- a/frontend/src/app/app.component.scss +++ b/frontend/src/app/app.component.scss @@ -79,7 +79,6 @@ mat-sidenav-content { margin-bottom: 4px; border-top-right-radius: 6px; - &.uptime { $toolbar: 130px; height: calc(100% - #{$toolbar} - #{$subMenus} - #{$tabs}); diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 7e9e464969..2a49da7c64 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -57,11 +57,29 @@ declare var AOS: any; ], }) export class AppComponent extends StoreDispatcher implements OnInit { - readonly menu$: Observable = this.select$(AppSelectors.menu); - readonly showLandingPage$: Observable = this.select$(getMergedRoute).pipe(filter(Boolean), map((route: MergedRoute) => route.url === '/' || route.url.startsWith('/?'))); - readonly showLoadingWebNodePage$: Observable = this.select$(getMergedRoute).pipe(filter(Boolean), map((route: MergedRoute) => route.url.startsWith(`/${Routes.LOADING_WEB_NODE}`))); - readonly showLeaderboardPage$: Observable = this.select$(getMergedRoute).pipe(filter(Boolean), map((route: MergedRoute) => route.url.startsWith(`/${Routes.LEADERBOARD}`))); + readonly showLandingPage$: Observable = this.select$( + getMergedRoute, + ).pipe( + filter(Boolean), + map( + (route: MergedRoute) => route.url === '/' || route.url.startsWith('/?'), + ), + ); + readonly showLoadingWebNodePage$: Observable = this.select$( + getMergedRoute, + ).pipe( + filter(Boolean), + map((route: MergedRoute) => + route.url.startsWith(`/${Routes.LOADING_WEB_NODE}`), + ), + ); + readonly showLeaderboardPage$: Observable = this.select$( + getMergedRoute, + ).pipe( + filter(Boolean), + map((route: MergedRoute) => route.url.startsWith(`/${Routes.LEADERBOARD}`)), + ); subMenusLength: number = 0; hideToolbar: boolean = CONFIG.hideToolbar; showLeaderboard: boolean = CONFIG.showLeaderboard; @@ -70,9 +88,11 @@ export class AppComponent extends StoreDispatcher implements OnInit { private nodeUpdateSubscription: Subscription | null = null; - constructor(private breakpointObserver: BreakpointObserver, - private router: Router, - private webNodeService: WebNodeService) { + constructor( + private breakpointObserver: BreakpointObserver, + private router: Router, + private webNodeService: WebNodeService, + ) { AOS.init(); super(); @@ -91,17 +111,28 @@ export class AppComponent extends StoreDispatcher implements OnInit { localStorage.setItem('webnodeArgs', args); } } - this.select(getMergedRoute, () => { - this.loaded = true; - this.detect(); - }, filter(Boolean), take(1)); + this.select( + getMergedRoute, + () => { + this.loaded = true; + this.detect(); + }, + filter(Boolean), + take(1), + ); if (CONFIG.showLeaderboard && CONFIG.showWebNodeLandingPage) { /* frontend with some landing page */ - this.select(getMergedRoute, () => { - this.initAppFunctionalities(); - }, filter((route: MergedRoute) => route?.url.startsWith('/loading-web-node')), take(1)); - + this.select( + getMergedRoute, + () => { + this.initAppFunctionalities(); + }, + filter((route: MergedRoute) => + route?.url.startsWith('/loading-web-node'), + ), + take(1), + ); } else if (!CONFIG.showLeaderboard && !CONFIG.showWebNodeLandingPage) { /* normal frontend (no landing pages) */ this.initAppFunctionalities(); @@ -114,9 +145,14 @@ export class AppComponent extends StoreDispatcher implements OnInit { } private initAppFunctionalities(): void { - if (this.webNodeService.hasWebNodeConfig() && !this.webNodeService.isWebNodeLoaded()) { + if ( + this.webNodeService.hasWebNodeConfig() && + !this.webNodeService.isWebNodeLoaded() + ) { if (!getWindow()?.location.href.includes(`/${Routes.LOADING_WEB_NODE}`)) { - this.router.navigate([Routes.LOADING_WEB_NODE], { queryParamsHandling: 'preserve' }); + this.router.navigate([Routes.LOADING_WEB_NODE], { + queryParamsHandling: 'preserve', + }); } } this.dispatch2(AppActions.init()); diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts index d0d7107dd4..d9a400cff0 100644 --- a/frontend/src/app/app.config.ts +++ b/frontend/src/app/app.config.ts @@ -1,19 +1,44 @@ -import { ApplicationConfig, ErrorHandler, importProvidersFrom, Injectable, LOCALE_ID } from '@angular/core'; +import { + ApplicationConfig, + ErrorHandler, + importProvidersFrom, + Injectable, + LOCALE_ID, +} from '@angular/core'; import { provideRouter, Router } from '@angular/router'; import { provideAnimations } from '@angular/platform-browser/animations'; -import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; -import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser'; +import { + provideHttpClient, + withInterceptorsFromDi, +} from '@angular/common/http'; +import { + provideClientHydration, + withIncrementalHydration, +} from '@angular/platform-browser'; import { provideStore } from '@ngrx/store'; import { EffectsModule, provideEffects } from '@ngrx/effects'; -import { provideRouterStore, routerReducer, RouterStateSerializer } from '@ngrx/router-store'; +import { + provideRouterStore, + routerReducer, + RouterStateSerializer, +} from '@ngrx/router-store'; import { provideStoreDevtools } from '@ngrx/store-devtools'; import * as Sentry from '@sentry/angular'; import { registerLocaleData } from '@angular/common'; -import { GlobalErrorHandlerService, MergedRouterStateSerializer, safelyExecuteInBrowser, THEME_PROVIDER } from '@openmina/shared'; +import { + GlobalErrorHandlerService, + MergedRouterStateSerializer, + safelyExecuteInBrowser, + THEME_PROVIDER, +} from '@openmina/shared'; import { SETTINGS } from '@angular/fire/compat/firestore'; import { initializeApp, provideFirebaseApp } from '@angular/fire/app'; import { CONFIG } from '@shared/constants/config'; -import { getAnalytics, provideAnalytics, ScreenTrackingService } from '@angular/fire/analytics'; +import { + getAnalytics, + provideAnalytics, + ScreenTrackingService, +} from '@angular/fire/analytics'; import { getPerformance, providePerformance } from '@angular/fire/performance'; import { getFirestore, provideFirestore } from '@angular/fire/firestore'; import localeFr from '@angular/common/locales/fr'; @@ -53,17 +78,20 @@ export class AppGlobalErrorhandler implements ErrorHandler { }; // Regular error listener - window.addEventListener('error', (event: ErrorEvent) => { - event.preventDefault(); - this.handleError(event.error); - }, { capture: true }); + window.addEventListener( + 'error', + (event: ErrorEvent) => { + event.preventDefault(); + this.handleError(event.error); + }, + { capture: true }, + ); // Override console.error with proper error extraction const originalConsoleError = console.error; console.error = (...args) => { // Find the actual error object in the arguments - const error = args.find(arg => arg instanceof Error) || - args.join(' '); + const error = args.find(arg => arg instanceof Error) || args.join(' '); this.handleError(error); originalConsoleError.apply(console, args); @@ -75,9 +103,16 @@ export class AppGlobalErrorhandler implements ErrorHandler { const originalInstantiateStreaming = WebAssembly.instantiateStreaming; if (originalInstantiateStreaming) { - WebAssembly.instantiateStreaming = async function (response: any, importObject?: any): Promise { + WebAssembly.instantiateStreaming = async function ( + response: any, + importObject?: any, + ): Promise { try { - return await originalInstantiateStreaming.call(WebAssembly, response, importObject); + return await originalInstantiateStreaming.call( + WebAssembly, + response, + importObject, + ); } catch (error) { self.handleError(error); throw error; @@ -86,9 +121,16 @@ export class AppGlobalErrorhandler implements ErrorHandler { } const originalInstantiate = WebAssembly.instantiate; - WebAssembly.instantiate = async function (moduleObject: any, importObject?: any): Promise { + WebAssembly.instantiate = async function ( + moduleObject: any, + importObject?: any, + ): Promise { try { - return await originalInstantiate.call(WebAssembly, moduleObject, importObject); + return await originalInstantiate.call( + WebAssembly, + moduleObject, + importObject, + ); } catch (error) { self.handleError(error); throw error; @@ -123,38 +165,47 @@ const firebaseProviders = [ provideFirestore(() => getFirestore()), ]; - export const appConfig: ApplicationConfig = { providers: [ provideRouter(generateRoutes()), provideAnimations(), provideClientHydration(withIncrementalHydration()), provideHttpClient(withInterceptorsFromDi()), - provideStore({ - ...reducers, - router: routerReducer, - } as any, { - metaReducers, - runtimeChecks: { - strictStateImmutability: true, - strictActionImmutability: true, - strictActionWithinNgZone: true, - strictStateSerializability: true, + provideStore( + { + ...reducers, + router: routerReducer, + } as any, + { + metaReducers, + runtimeChecks: { + strictStateImmutability: true, + strictActionImmutability: true, + strictActionWithinNgZone: true, + strictStateSerializability: true, + }, }, - }), + ), provideRouterStore({ stateKey: 'router' }), { provide: RouterStateSerializer, useClass: MergedRouterStateSerializer, }, provideEffects(AppEffects), - !CONFIG.production ? provideStoreDevtools({ maxAge: 150, connectInZone: true }) : [], + !CONFIG.production + ? provideStoreDevtools({ maxAge: 150, connectInZone: true }) + : [], importProvidersFrom(EffectsModule.forRoot()), // Your custom providers THEME_PROVIDER, { provide: LOCALE_ID, useValue: 'en' }, { provide: ErrorHandler, useValue: Sentry.createErrorHandler() }, - { provide: ErrorHandler, useClass: AppGlobalErrorhandler, deps: [GlobalErrorHandlerService], multi: false }, + { + provide: ErrorHandler, + useClass: AppGlobalErrorhandler, + deps: [GlobalErrorHandlerService], + multi: false, + }, { provide: Sentry.TraceService, deps: [Router] }, ...(CONFIG.globalConfig.firebase ? firebaseProviders : []), ], diff --git a/frontend/src/app/app.effects.ts b/frontend/src/app/app.effects.ts index 26fbade7ec..3313d02ab6 100644 --- a/frontend/src/app/app.effects.ts +++ b/frontend/src/app/app.effects.ts @@ -2,11 +2,18 @@ import { Injectable } from '@angular/core'; import { MinaState, selectMinaState } from '@app/app.setup'; import { Actions, createEffect, ofType } from '@ngrx/effects'; import { Store } from '@ngrx/store'; -import { createNonDispatchableEffect, Effect, removeParamsFromURL } from '@openmina/shared'; +import { + createNonDispatchableEffect, + Effect, + removeParamsFromURL, +} from '@openmina/shared'; import { filter, map, mergeMap, of, switchMap, tap } from 'rxjs'; import { AppActions } from '@app/app.actions'; import { Router } from '@angular/router'; -import { FeatureType, MinaNode } from '@shared/types/core/environment/mina-env.type'; +import { + FeatureType, + MinaNode, +} from '@shared/types/core/environment/mina-env.type'; import { AppService } from '@app/app.service'; import { getFirstFeature, isFeatureEnabled } from '@shared/constants/config'; import { RustService } from '@core/services/rust.service'; @@ -18,7 +25,6 @@ import { AppNodeStatus } from '@shared/types/app/app-node-details.type'; @Injectable() export class AppEffects extends BaseEffect { - readonly init$: Effect; readonly initSuccess$: Effect; readonly onNodeChange$: Effect; @@ -27,92 +33,121 @@ export class AppEffects extends BaseEffect { private requestInProgress: boolean = false; - constructor(private actions$: Actions, - private appService: AppService, - private rustNode: RustService, - private router: Router, - private webNodeService: WebNodeService, - store: Store) { + constructor( + private actions$: Actions, + private appService: AppService, + private rustNode: RustService, + private router: Router, + private webNodeService: WebNodeService, + store: Store, + ) { super(store, selectMinaState); - this.init$ = createEffect(() => this.actions$.pipe( - ofType(AppActions.init), - switchMap(() => this.appService.getNodes()), - switchMap((nodes: MinaNode[]) => this.appService.getActiveNode(nodes).pipe( - tap((activeNode: MinaNode) => this.rustNode.changeRustNode(activeNode)), - map((activeNode: MinaNode) => ({ activeNode, nodes })), - )), - map((payload: { activeNode: MinaNode, nodes: MinaNode[] }) => AppActions.initSuccess(payload)), - )); + this.init$ = createEffect(() => + this.actions$.pipe( + ofType(AppActions.init), + switchMap(() => this.appService.getNodes()), + switchMap((nodes: MinaNode[]) => + this.appService.getActiveNode(nodes).pipe( + tap((activeNode: MinaNode) => + this.rustNode.changeRustNode(activeNode), + ), + map((activeNode: MinaNode) => ({ activeNode, nodes })), + ), + ), + map((payload: { activeNode: MinaNode; nodes: MinaNode[] }) => + AppActions.initSuccess(payload), + ), + ), + ); - this.initSuccess$ = createEffect(() => this.actions$.pipe( - ofType(AppActions.initSuccess), - this.latestActionState(), - switchMap(({ state }) => { - if (state.app.activeNode.isWebNode) { - return this.webNodeService.loadWasm$().pipe( - switchMap(() => this.webNodeService.startWasm$()), - ); - } - return of({}); - }), - map(() => AppActions.getNodeEnvBuild()), - )); + this.initSuccess$ = createEffect(() => + this.actions$.pipe( + ofType(AppActions.initSuccess), + this.latestActionState(), + switchMap(({ state }) => { + if (state.app.activeNode.isWebNode) { + return this.webNodeService + .loadWasm$() + .pipe(switchMap(() => this.webNodeService.startWasm$())); + } + return of({}); + }), + map(() => AppActions.getNodeEnvBuild()), + ), + ); - this.onNodeChange$ = createNonDispatchableEffect(() => this.actions$.pipe( - ofType(AppActions.changeActiveNode), - this.latestActionState(), - tap(({ state }) => { - this.rustNode.changeRustNode(state.app.activeNode); - const activePage = removeParamsFromURL(this.router.url.split('/')[1]) as FeatureType; - this.router.navigate([], { - queryParams: { node: state.app.activeNode.name }, - queryParamsHandling: 'merge', - }); - if (!isFeatureEnabled(state.app.activeNode, activePage)) { - this.router.navigate([getFirstFeature(state.app.activeNode)]); - } - }), - switchMap(({ state }) => { - if (state.app.activeNode.isWebNode) { - return this.webNodeService.loadWasm$().pipe( - switchMap(() => this.webNodeService.startWasm$()), - ); - } - return of({}); - }), - switchMap(() => [AppActions.getNodeDetails(), AppActions.getNodeEnvBuild()]), - )); + this.onNodeChange$ = createNonDispatchableEffect(() => + this.actions$.pipe( + ofType(AppActions.changeActiveNode), + this.latestActionState(), + tap(({ state }) => { + this.rustNode.changeRustNode(state.app.activeNode); + const activePage = removeParamsFromURL( + this.router.url.split('/')[1], + ) as FeatureType; + this.router.navigate([], { + queryParams: { node: state.app.activeNode.name }, + queryParamsHandling: 'merge', + }); + if (!isFeatureEnabled(state.app.activeNode, activePage)) { + this.router.navigate([getFirstFeature(state.app.activeNode)]); + } + }), + switchMap(({ state }) => { + if (state.app.activeNode.isWebNode) { + return this.webNodeService + .loadWasm$() + .pipe(switchMap(() => this.webNodeService.startWasm$())); + } + return of({}); + }), + switchMap(() => [ + AppActions.getNodeDetails(), + AppActions.getNodeEnvBuild(), + ]), + ), + ); - this.getNodeEnvBuild$ = createEffect(() => this.actions$.pipe( - ofType(AppActions.getNodeEnvBuild), - mergeMap(() => this.appService.getEnvBuild()), - map(envBuild => AppActions.getNodeEnvBuildSuccess({ envBuild })), - catchErrorAndRepeat2(MinaErrorType.RUST, AppActions.getNodeEnvBuildSuccess({ envBuild: undefined })), - )); + this.getNodeEnvBuild$ = createEffect(() => + this.actions$.pipe( + ofType(AppActions.getNodeEnvBuild), + mergeMap(() => this.appService.getEnvBuild()), + map(envBuild => AppActions.getNodeEnvBuildSuccess({ envBuild })), + catchErrorAndRepeat2( + MinaErrorType.RUST, + AppActions.getNodeEnvBuildSuccess({ envBuild: undefined }), + ), + ), + ); - this.getNodeDetails$ = createEffect(() => this.actions$.pipe( - ofType(AppActions.getNodeDetails), - filter(() => !this.requestInProgress), - tap(() => this.requestInProgress = true), - switchMap(() => this.appService.getActiveNodeDetails()), - map(details => AppActions.getNodeDetailsSuccess({ details })), - catchErrorAndRepeat2(MinaErrorType.GENERIC, AppActions.getNodeDetailsSuccess({ - details: { - status: AppNodeStatus.OFFLINE, - blockHeight: null, - blockTime: null, - peersConnected: 0, - peersDisconnected: 0, - peersConnecting: 0, - transactions: 0, - snarks: 0, - producingBlockAt: null, - producingBlockGlobalSlot: null, - producingBlockStatus: null, - }, - })), - tap(() => this.requestInProgress = false), - )); + this.getNodeDetails$ = createEffect(() => + this.actions$.pipe( + ofType(AppActions.getNodeDetails), + filter(() => !this.requestInProgress), + tap(() => (this.requestInProgress = true)), + switchMap(() => this.appService.getActiveNodeDetails()), + map(details => AppActions.getNodeDetailsSuccess({ details })), + catchErrorAndRepeat2( + MinaErrorType.GENERIC, + AppActions.getNodeDetailsSuccess({ + details: { + status: AppNodeStatus.OFFLINE, + blockHeight: null, + blockTime: null, + peersConnected: 0, + peersDisconnected: 0, + peersConnecting: 0, + transactions: 0, + snarks: 0, + producingBlockAt: null, + producingBlockGlobalSlot: null, + producingBlockStatus: null, + }, + }), + ), + tap(() => (this.requestInProgress = false)), + ), + ); } } diff --git a/frontend/src/app/app.module.server.ts b/frontend/src/app/app.module.server.ts index 416f4bcd02..637413dfa5 100644 --- a/frontend/src/app/app.module.server.ts +++ b/frontend/src/app/app.module.server.ts @@ -5,10 +5,7 @@ import { appConfig } from '@app/app.config'; const serverConfig = { ...appConfig, - providers: [ - ...appConfig.providers, - provideServerRendering(), - ], + providers: [...appConfig.providers, provideServerRendering()], }; export default () => bootstrapApplication(AppComponent, serverConfig); diff --git a/frontend/src/app/app.reducer.ts b/frontend/src/app/app.reducer.ts index de4c8bb694..430b3982a7 100644 --- a/frontend/src/app/app.reducer.ts +++ b/frontend/src/app/app.reducer.ts @@ -7,7 +7,9 @@ import { getLocalStorage } from '@openmina/shared'; const initialState: AppState = { menu: { - collapsed: JSON.parse(getLocalStorage()?.getItem('menu_collapsed') ?? 'false') || false, + collapsed: + JSON.parse(getLocalStorage()?.getItem('menu_collapsed') ?? 'false') || + false, isMobile: false, open: true, }, @@ -31,9 +33,19 @@ const initialState: AppState = { export const appReducer = createReducer( initialState, - on(AppActions.initSuccess, (state, { activeNode, nodes }) => ({ ...state, activeNode, nodes })), - on(AppActions.changeActiveNode, (state, { node }) => ({ ...state, activeNode: node })), - on(AppActions.getNodeDetailsSuccess, (state, { details }) => ({ ...state, activeNodeDetails: details })), + on(AppActions.initSuccess, (state, { activeNode, nodes }) => ({ + ...state, + activeNode, + nodes, + })), + on(AppActions.changeActiveNode, (state, { node }) => ({ + ...state, + activeNode: node, + })), + on(AppActions.getNodeDetailsSuccess, (state, { details }) => ({ + ...state, + activeNodeDetails: details, + })), on(AppActions.changeMenuCollapsing, (state, { isCollapsing }) => { getLocalStorage()?.setItem('menu_collapsed', JSON.stringify(isCollapsing)); return { ...state, menu: { ...state.menu, collapsed: isCollapsing } }; @@ -42,17 +54,38 @@ export const appReducer = createReducer( ...state, menu: { ...state.menu, isMobile, open: !isMobile }, })), - on(AppActions.toggleMenuOpening, (state) => ({ ...state, menu: { ...state.menu, open: !state.menu.open } })), + on(AppActions.toggleMenuOpening, state => ({ + ...state, + menu: { ...state.menu, open: !state.menu.open }, + })), on(AppActions.addNode, (state, { node }) => { - const customNodes = JSON.parse(getLocalStorage()?.getItem('custom_nodes') ?? '[]'); - getLocalStorage()?.setItem('custom_nodes', JSON.stringify([node, ...customNodes])); + const customNodes = JSON.parse( + getLocalStorage()?.getItem('custom_nodes') ?? '[]', + ); + getLocalStorage()?.setItem( + 'custom_nodes', + JSON.stringify([node, ...customNodes]), + ); return { ...state, nodes: [node, ...state.nodes] }; }), on(AppActions.deleteNode, (state, { node }) => { - const customNodes = JSON.parse(getLocalStorage()?.getItem('custom_nodes') ?? '[]'); - getLocalStorage()?.setItem('custom_nodes', JSON.stringify(customNodes.filter((n: MinaNode) => n.name !== node.name))); + const customNodes = JSON.parse( + getLocalStorage()?.getItem('custom_nodes') ?? '[]', + ); + getLocalStorage()?.setItem( + 'custom_nodes', + JSON.stringify(customNodes.filter((n: MinaNode) => n.name !== node.name)), + ); const nodes = state.nodes.filter(n => n.name !== node.name); - return { ...state, nodes, activeNode: state.activeNode?.name === node.name ? nodes[0] : state.activeNode }; + return { + ...state, + nodes, + activeNode: + state.activeNode?.name === node.name ? nodes[0] : state.activeNode, + }; }), - on(AppActions.getNodeEnvBuildSuccess, (state, { envBuild }) => ({ ...state, envBuild })), + on(AppActions.getNodeEnvBuildSuccess, (state, { envBuild }) => ({ + ...state, + envBuild, + })), ); diff --git a/frontend/src/app/app.routing.ts b/frontend/src/app/app.routing.ts index 449caad3fc..1a099baeb4 100644 --- a/frontend/src/app/app.routing.ts +++ b/frontend/src/app/app.routing.ts @@ -20,68 +20,80 @@ export const BENCHMARKS_TITLE: string = APP_TITLE + ' - Benchmarks'; export const WEBNODE_TITLE: string = APP_TITLE + ' - Web Node'; export const FUZZING_TITLE: string = APP_TITLE + ' - Fuzzing'; - export function generateRoutes(): Routes { const routes: Routes = [ { path: 'dashboard', - loadChildren: () => import('@dashboard/dashboard.module').then(m => m.DashboardModule), + loadChildren: () => + import('@dashboard/dashboard.module').then(m => m.DashboardModule), title: DASHBOARD_TITLE, canActivate: [landingPageGuard], }, { path: 'nodes', - loadChildren: () => import('@nodes/nodes.module').then(m => m.NodesModule), + loadChildren: () => + import('@nodes/nodes.module').then(m => m.NodesModule), title: NODES_TITLE, // canActivate: [FeatureGuard], }, { path: 'resources', - loadChildren: () => import('@resources/resources.module').then(m => m.ResourcesModule), + loadChildren: () => + import('@resources/resources.module').then(m => m.ResourcesModule), title: RESOURCES_TITLE, }, { path: 'network', - loadChildren: () => import('@network/network.module').then(m => m.NetworkModule), + loadChildren: () => + import('@network/network.module').then(m => m.NetworkModule), title: NETWORK_TITLE, }, { path: 'state', - loadChildren: () => import('@state/state.module').then(m => m.StateModule), + loadChildren: () => + import('@state/state.module').then(m => m.StateModule), title: STATE_TITLE, canActivate: [landingPageGuard], }, { path: 'snarks', - loadChildren: () => import('@snarks/snarks.module').then(m => m.SnarksModule), + loadChildren: () => + import('@snarks/snarks.module').then(m => m.SnarksModule), title: SNARKS_TITLE, }, { path: 'block-production', - loadChildren: () => import('@block-production/block-production.module').then(m => m.BlockProductionModule), + loadChildren: () => + import('@block-production/block-production.module').then( + m => m.BlockProductionModule, + ), title: BLOCK_PRODUCTION_TITLE, canActivate: [landingPageGuard], }, { path: 'mempool', - loadChildren: () => import('@mempool/mempool.module').then(m => m.MempoolModule), + loadChildren: () => + import('@mempool/mempool.module').then(m => m.MempoolModule), title: MEMPOOL_TITLE, canActivate: [landingPageGuard], }, { path: 'benchmarks', - loadChildren: () => import('@benchmarks/benchmarks.module').then(m => m.BenchmarksModule), + loadChildren: () => + import('@benchmarks/benchmarks.module').then(m => m.BenchmarksModule), title: BENCHMARKS_TITLE, canActivate: [landingPageGuard], }, { path: 'fuzzing', - loadChildren: () => import('@fuzzing/fuzzing.module').then(m => m.FuzzingModule), + loadChildren: () => + import('@fuzzing/fuzzing.module').then(m => m.FuzzingModule), title: FUZZING_TITLE, }, { path: 'loading-web-node', - loadChildren: () => import('@web-node/web-node.module').then(m => m.WebNodeModule), + loadChildren: () => + import('@web-node/web-node.module').then(m => m.WebNodeModule), title: WEBNODE_TITLE, canActivate: [landingPageGuard], }, @@ -89,7 +101,10 @@ export function generateRoutes(): Routes { if (CONFIG.showLeaderboard) { routes.push({ path: '', - loadChildren: () => import('@leaderboard/leaderboard.module').then(m => m.LeaderboardModule), + loadChildren: () => + import('@leaderboard/leaderboard.module').then( + m => m.LeaderboardModule, + ), }); } else if (CONFIG.showWebNodeLandingPage) { routes.push({ @@ -108,7 +123,6 @@ export function generateRoutes(): Routes { ]; } - @NgModule({ imports: [ RouterModule.forRoot(generateRoutes(), { diff --git a/frontend/src/app/app.service.ts b/frontend/src/app/app.service.ts index 9694db4997..ccdc34f929 100644 --- a/frontend/src/app/app.service.ts +++ b/frontend/src/app/app.service.ts @@ -3,12 +3,13 @@ import { map, Observable, of, tap } from 'rxjs'; import { MinaNode } from '@shared/types/core/environment/mina-env.type'; import { CONFIG } from '@shared/constants/config'; import { RustService } from '@core/services/rust.service'; -import { AppNodeDetails, AppNodeStatus } from '@shared/types/app/app-node-details.type'; +import { + AppNodeDetails, + AppNodeStatus, +} from '@shared/types/app/app-node-details.type'; import { getNetwork } from '@shared/helpers/mina.helper'; import { getLocalStorage, nanOrElse, ONE_MILLION } from '@openmina/shared'; -import { - BlockProductionWonSlotsStatus, -} from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type'; +import { BlockProductionWonSlotsStatus } from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type'; import { AppEnvBuild } from '@shared/types/app/app-env-build.type'; import { SentryService } from '@core/services/sentry.service'; import { WebNodeService } from '@core/services/web-node.service'; @@ -17,13 +18,13 @@ import { WebNodeService } from '@core/services/web-node.service'; providedIn: 'root', }) export class AppService { - private previousProducedBlock: BlockProductionAttempt; - constructor(private rust: RustService, - private sentryService: SentryService, - private webnodeService: WebNodeService) { - } + constructor( + private rust: RustService, + private sentryService: SentryService, + private webnodeService: WebNodeService, + ) {} getActiveNode(nodes: MinaNode[]): Observable { const nodeName = new URL(location.href).searchParams.get('node'); @@ -44,25 +45,38 @@ export class AppService { } getActiveNodeDetails(): Observable { - return this.rust.get('/status') - .pipe( - tap((data: NodeDetailsResponse) => this.notifyPrevBlockChanged(data)), - map((data: NodeDetailsResponse): AppNodeDetails => ({ - status: this.getStatus(data), - blockHeight: data.transition_frontier.best_tip?.height, - blockTime: data.transition_frontier.sync.time, - peersConnected: data.peers.filter(p => p.connection_status === 'Connected').length, - peersDisconnected: data.peers.filter(p => p.connection_status === 'Disconnected').length, - peersConnecting: data.peers.filter(p => p.connection_status === 'Connecting').length, - snarks: data.snark_pool.snarks, - transactions: data.transaction_pool.transactions, - chainId: data.chain_id, - network: getNetwork(data.chain_id), - producingBlockAt: nanOrElse(data.current_block_production_attempt?.won_slot.slot_time / ONE_MILLION, null), - producingBlockGlobalSlot: data.current_block_production_attempt?.won_slot.global_slot, - producingBlockStatus: data.current_block_production_attempt?.status, - } as AppNodeDetails)), - ); + return this.rust.get('/status').pipe( + tap((data: NodeDetailsResponse) => this.notifyPrevBlockChanged(data)), + map( + (data: NodeDetailsResponse): AppNodeDetails => + ({ + status: this.getStatus(data), + blockHeight: data.transition_frontier.best_tip?.height, + blockTime: data.transition_frontier.sync.time, + peersConnected: data.peers.filter( + p => p.connection_status === 'Connected', + ).length, + peersDisconnected: data.peers.filter( + p => p.connection_status === 'Disconnected', + ).length, + peersConnecting: data.peers.filter( + p => p.connection_status === 'Connecting', + ).length, + snarks: data.snark_pool.snarks, + transactions: data.transaction_pool.transactions, + chainId: data.chain_id, + network: getNetwork(data.chain_id), + producingBlockAt: nanOrElse( + data.current_block_production_attempt?.won_slot.slot_time / + ONE_MILLION, + null, + ), + producingBlockGlobalSlot: + data.current_block_production_attempt?.won_slot.global_slot, + producingBlockStatus: data.current_block_production_attempt?.status, + }) as AppNodeDetails, + ), + ); } private notifyPrevBlockChanged(data: NodeDetailsResponse): void { @@ -78,10 +92,15 @@ export class AppService { ].includes(status); if ( - this.previousProducedBlock && data.previous_block_production_attempt - && isInProduction(this.previousProducedBlock.status) !== isInProduction(data.previous_block_production_attempt.status) + this.previousProducedBlock && + data.previous_block_production_attempt && + isInProduction(this.previousProducedBlock.status) !== + isInProduction(data.previous_block_production_attempt.status) ) { - this.sentryService.updateProducedBlock(data.previous_block_production_attempt, this.webnodeService.publicKey); + this.sentryService.updateProducedBlock( + data.previous_block_production_attempt, + this.webnodeService.publicKey, + ); } this.previousProducedBlock = data.previous_block_production_attempt; } @@ -138,7 +157,6 @@ export interface Times { discarded: any; } - interface TransitionFrontier { best_tip: BestTip; sync: Sync; diff --git a/frontend/src/app/app.setup.ts b/frontend/src/app/app.setup.ts index 252fba90f8..76f2103041 100644 --- a/frontend/src/app/app.setup.ts +++ b/frontend/src/app/app.setup.ts @@ -8,7 +8,10 @@ import { appReducer } from '@app/app.reducer'; import { APP_KEY } from '@app/app.actions'; import { AppState } from '@app/app.state'; -import { loadingReducer, LoadingState } from '@app/layout/toolbar/loading.reducer'; +import { + loadingReducer, + LoadingState, +} from '@app/layout/toolbar/loading.reducer'; import { dashboardReducer } from '@dashboard/dashboard.reducer'; import { DashboardAction } from '@dashboard/dashboard.actions'; @@ -26,7 +29,10 @@ import { StateState } from '@state/state.state'; import { SnarksAction, snarksReducer } from '@snarks/snarks.reducer'; import { SnarksState } from '@snarks/snarks.state'; -import { ResourcesAction, resourcesReducer } from '@resources/resources.reducer'; +import { + ResourcesAction, + resourcesReducer, +} from '@resources/resources.reducer'; import { ResourcesState } from '@resources/resources.state'; import { blockProductionReducer } from '@block-production/block-production.reducer'; @@ -58,16 +64,14 @@ export interface MinaState { leaderboard: LeaderboardState; } -type MinaAction = - & ErrorPreviewAction - & DashboardAction - & NetworkAction - & NodesAction - & ResourcesAction - & StateAction - & SnarksAction - & FuzzingAction - ; +type MinaAction = ErrorPreviewAction & + DashboardAction & + NetworkAction & + NodesAction & + ResourcesAction & + StateAction & + SnarksAction & + FuzzingAction; export const reducers: ActionReducerMap = { [APP_KEY]: appReducer, diff --git a/frontend/src/app/app.state.ts b/frontend/src/app/app.state.ts index 5899469521..419cb33976 100644 --- a/frontend/src/app/app.state.ts +++ b/frontend/src/app/app.state.ts @@ -13,10 +13,10 @@ export interface AppState { envBuild: AppEnvBuild | undefined; } -const select = (selector: (state: AppState) => T): MemoizedSelector => createSelector( - (state: MinaState): AppState => state.app, - selector, -); +const select = ( + selector: (state: AppState) => T, +): MemoizedSelector => + createSelector((state: MinaState): AppState => state.app, selector); const menu = select(state => state.menu); const nodes = select(state => state.nodes); diff --git a/frontend/src/app/core/helpers/file-progress.helper.ts b/frontend/src/app/core/helpers/file-progress.helper.ts index fed9a8d31f..869d1c4da1 100644 --- a/frontend/src/app/core/helpers/file-progress.helper.ts +++ b/frontend/src/app/core/helpers/file-progress.helper.ts @@ -57,7 +57,8 @@ class AssetMonitor { } receivedLength += value.length; - downloadInfo.progress = (receivedLength / downloadInfo.totalSize) * 100; + downloadInfo.progress = + (receivedLength / downloadInfo.totalSize) * 100; self.emitProgress(downloadInfo); } catch (error) { downloadInfo.status = 'error'; @@ -88,7 +89,7 @@ class AssetMonitor { duration: downloadInfo.duration, startTime: downloadInfo.startTime, endTime: downloadInfo.endTime, - downloaded: downloadInfo.progress * downloadInfo.totalSize / 100, + downloaded: (downloadInfo.progress * downloadInfo.totalSize) / 100, }); } } diff --git a/frontend/src/app/core/services/config.service.ts b/frontend/src/app/core/services/config.service.ts index 3b5e6080a4..b492f80484 100644 --- a/frontend/src/app/core/services/config.service.ts +++ b/frontend/src/app/core/services/config.service.ts @@ -9,19 +9,20 @@ import { filter } from 'rxjs'; providedIn: 'root', }) export class ConfigService { - private node: MinaNode; - constructor(private store: Store) { this.listenToNodeChanging(); } + constructor(private store: Store) { + this.listenToNodeChanging(); + } private listenToNodeChanging(): void { - this.store.select(AppSelectors.activeNode) + this.store + .select(AppSelectors.activeNode) .pipe(filter(Boolean)) - .subscribe((node: MinaNode) => this.node = node); + .subscribe((node: MinaNode) => (this.node = node)); } get DEBUGGER(): string { return this.node.debugger; } - } diff --git a/frontend/src/app/core/services/firestore.service.ts b/frontend/src/app/core/services/firestore.service.ts index 9f3f6e047f..9fe6639497 100644 --- a/frontend/src/app/core/services/firestore.service.ts +++ b/frontend/src/app/core/services/firestore.service.ts @@ -7,22 +7,24 @@ import { SentryService } from '@core/services/sentry.service'; providedIn: 'root', }) export class FirestoreService { - private cloudFunctionUrl = 'https://us-central1-webnode-gtm-test.cloudfunctions.net/handleValidationAndStore'; + private cloudFunctionUrl = + 'https://us-central1-webnode-gtm-test.cloudfunctions.net/handleValidationAndStore'; - constructor(private sentryService: SentryService, - private http: HttpClient) { } + constructor( + private sentryService: SentryService, + private http: HttpClient, + ) {} addHeartbeat(data: any): Observable { console.log('Posting to cloud function:', data); - return this.http.post(this.cloudFunctionUrl, { data }) - .pipe( - // tap(() => { - // this.sentryService.updateHeartbeat(data, data.submitter); - // }), - catchError(error => { - console.error('Error while posting heartbeat', error); - return of(null); - }), - ); + return this.http.post(this.cloudFunctionUrl, { data }).pipe( + // tap(() => { + // this.sentryService.updateHeartbeat(data, data.submitter); + // }), + catchError(error => { + console.error('Error while posting heartbeat', error); + return of(null); + }), + ); } } diff --git a/frontend/src/app/core/services/rust.service.ts b/frontend/src/app/core/services/rust.service.ts index 4a3fe69be5..2d10401d67 100644 --- a/frontend/src/app/core/services/rust.service.ts +++ b/frontend/src/app/core/services/rust.service.ts @@ -8,11 +8,12 @@ import { WebNodeService } from '@core/services/web-node.service'; providedIn: 'root', }) export class RustService { - private node: MinaNode; - constructor(private http: HttpClient, - private webNodeService: WebNodeService) {} + constructor( + private http: HttpClient, + private webNodeService: WebNodeService, + ) {} changeRustNode(node: MinaNode): void { this.node = node; @@ -32,20 +33,24 @@ export class RustService { get(path: string): Observable { if (this.node.isWebNode) { - return this.getFromWebNode(path).pipe(map((response: any) => { - // console.log(path, response); - return response; - })); + return this.getFromWebNode(path).pipe( + map((response: any) => { + // console.log(path, response); + return response; + }), + ); } return this.http.get(this.URL + path); } post(path: string, body: B): Observable { if (this.node.isWebNode) { - return this.postToWebNode(path, body).pipe(map((response: any) => { - // console.log(path, response); - return response; - })); + return this.postToWebNode(path, body).pipe( + map((response: any) => { + // console.log(path, response); + return response; + }), + ); } return this.http.post(this.URL + path, body); } diff --git a/frontend/src/app/core/services/sentry.service.ts b/frontend/src/app/core/services/sentry.service.ts index 2007879b57..7949b0f028 100644 --- a/frontend/src/app/core/services/sentry.service.ts +++ b/frontend/src/app/core/services/sentry.service.ts @@ -1,25 +1,22 @@ import { Injectable } from '@angular/core'; import { NodesOverviewLedger, - NodesOverviewLedgerStepState + NodesOverviewLedgerStepState, } from '@shared/types/nodes/dashboard/nodes-overview-ledger.type'; import * as Sentry from '@sentry/angular'; import { NodesOverviewBlock, - NodesOverviewNodeBlockStatus + NodesOverviewNodeBlockStatus, } from '@shared/types/nodes/dashboard/nodes-overview-block.type'; import { lastItem, ONE_BILLION } from '@openmina/shared'; import { getElapsedTime } from '@shared/helpers/date.helper'; -import { - BlockProductionWonSlotsSlot -} from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type'; +import { BlockProductionWonSlotsSlot } from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type'; import { BlockProductionAttempt } from '@app/app.service'; @Injectable({ providedIn: 'root', }) export class SentryService { - private ledgerIsSynced: boolean = false; private blockIsSynced: boolean = false; private ledgerSyncedTime: number; @@ -34,7 +31,8 @@ export class SentryService { const syncDetails = { stakingLedger: { fetchHashes: ledger.stakingEpoch.snarked.fetchHashesDuration + 's', - fetchAccounts: ledger.stakingEpoch.snarked.fetchAccountsDuration + 's', + fetchAccounts: + ledger.stakingEpoch.snarked.fetchAccountsDuration + 's', }, nextEpochLedger: { fetchHashes: ledger.nextEpoch.snarked.fetchHashesDuration + 's', @@ -50,13 +48,20 @@ export class SentryService { }, }; - const syncedIn = Math.round((ledger.rootStaged.staged.reconstructEnd - ledger.stakingEpoch.snarked.fetchHashesStart) / ONE_BILLION); + const syncedIn = Math.round( + (ledger.rootStaged.staged.reconstructEnd - + ledger.stakingEpoch.snarked.fetchHashesStart) / + ONE_BILLION, + ); this.ledgerSyncedTime = syncedIn; Sentry.captureMessage(`Ledger synced in ${getElapsedTime(syncedIn)}`, { level: 'info', tags: { - type: 'webnode', subType: 'sync.ledger', publicKey, duration: syncedIn + type: 'webnode', + subType: 'sync.ledger', + publicKey, + duration: syncedIn, }, contexts: { ledger: syncDetails }, fingerprint: this.fingerprint, @@ -64,36 +69,54 @@ export class SentryService { } } - updateBlockSyncStatus(blocks: NodesOverviewBlock[], startTime: number, publicKey: string): void { + updateBlockSyncStatus( + blocks: NodesOverviewBlock[], + startTime: number, + publicKey: string, + ): void { if (this.blockIsSynced) { return; } - const blocksSynced = blocks.every(b => b.status === NodesOverviewNodeBlockStatus.APPLIED); + const blocksSynced = blocks.every( + b => b.status === NodesOverviewNodeBlockStatus.APPLIED, + ); if (blocksSynced && blocks[0]) { this.blockIsSynced = true; blocks = blocks.slice(1); const bestTipBlock = blocks[0].height; const root = lastItem(blocks).height; this.blockSyncedTime = Math.round((Date.now() - startTime) / 1000); - Sentry.captureMessage(`Last 290 blocks synced in ${getElapsedTime(this.blockSyncedTime)}`, { - level: 'info', - tags: { - type: 'webnode', subType: 'sync.block', publicKey, duration: this.blockSyncedTime + Sentry.captureMessage( + `Last 290 blocks synced in ${getElapsedTime(this.blockSyncedTime)}`, + { + level: 'info', + tags: { + type: 'webnode', + subType: 'sync.block', + publicKey, + duration: this.blockSyncedTime, + }, + contexts: { blocks: { bestTipBlock, root } }, + fingerprint: this.fingerprint, }, - contexts: { blocks: { bestTipBlock, root } }, - fingerprint: this.fingerprint, - }); + ); const syncTotal = this.ledgerSyncedTime + this.blockSyncedTime; setTimeout(() => { - Sentry.captureMessage(`Web Node Synced in ${getElapsedTime(syncTotal)}`, { - level: 'info', - tags: { - type: 'webnode', subType: 'sync.total', publicKey, duration: syncTotal + Sentry.captureMessage( + `Web Node Synced in ${getElapsedTime(syncTotal)}`, + { + level: 'info', + tags: { + type: 'webnode', + subType: 'sync.total', + publicKey, + duration: syncTotal, + }, + fingerprint: this.fingerprint, }, - fingerprint: this.fingerprint, - }); + ); }, 2000); } } @@ -101,43 +124,87 @@ export class SentryService { updatePeersConnected(seconds: number, publicKey: string): void { Sentry.captureMessage(`Web Node connected in ${seconds.toFixed(1)}s`, { level: 'info', - tags: { type: 'webnode', subType: 'sync.peers', publicKey, duration: seconds }, + tags: { + type: 'webnode', + subType: 'sync.peers', + publicKey, + duration: seconds, + }, fingerprint: this.fingerprint, }); } - updateProducedBlock(attempt: BlockProductionAttempt, publicKey: string): void { + updateProducedBlock( + attempt: BlockProductionAttempt, + publicKey: string, + ): void { const times = { - stagedLedgerDiffCreate: !attempt.times.staged_ledger_diff_create_end || !attempt.times.staged_ledger_diff_create_start - ? 0 : (attempt.times.staged_ledger_diff_create_end - attempt.times.staged_ledger_diff_create_start) / ONE_BILLION, - produced: !attempt.times.produced || !attempt.times.staged_ledger_diff_create_end - ? 0 : (attempt.times.produced - attempt.times.staged_ledger_diff_create_end) / ONE_BILLION, - proofCreate: !attempt.times.proof_create_end || !attempt.times.proof_create_start - ? 0 : (attempt.times.proof_create_end - attempt.times.proof_create_start) / ONE_BILLION, + stagedLedgerDiffCreate: + !attempt.times.staged_ledger_diff_create_end || + !attempt.times.staged_ledger_diff_create_start + ? 0 + : (attempt.times.staged_ledger_diff_create_end - + attempt.times.staged_ledger_diff_create_start) / + ONE_BILLION, + produced: + !attempt.times.produced || !attempt.times.staged_ledger_diff_create_end + ? 0 + : (attempt.times.produced - + attempt.times.staged_ledger_diff_create_end) / + ONE_BILLION, + proofCreate: + !attempt.times.proof_create_end || !attempt.times.proof_create_start + ? 0 + : (attempt.times.proof_create_end - + attempt.times.proof_create_start) / + ONE_BILLION, }; - Sentry.captureMessage(`Block Production Finished (${attempt.status}) - ` + attempt.block?.height, { - level: 'info', - tags: { type: 'webnode', subType: 'block.production', publicKey, duration: times.stagedLedgerDiffCreate + times.produced + times.proofCreate }, - fingerprint: this.fingerprint, - contexts: { block: this.flattenObject(attempt) }, - }); + Sentry.captureMessage( + `Block Production Finished (${attempt.status}) - ` + + attempt.block?.height, + { + level: 'info', + tags: { + type: 'webnode', + subType: 'block.production', + publicKey, + duration: + times.stagedLedgerDiffCreate + times.produced + times.proofCreate, + }, + fingerprint: this.fingerprint, + contexts: { block: this.flattenObject(attempt) }, + }, + ); } updateHeartbeat(data: any, publicKey: string): void { Sentry.captureMessage('Heartbeat', { level: 'info', tags: { type: 'webnode', subType: 'heartbeat', publicKey }, - contexts: { heartbeat: { payload: data.payload, signatureField: data.signature.field, signatureScalar: data.signature.scalar } }, + contexts: { + heartbeat: { + payload: data.payload, + signatureField: data.signature.field, + signatureScalar: data.signature.scalar, + }, + }, fingerprint: this.fingerprint, }); } - private flattenObject(obj: Record, prefix: string = ''): Record { + private flattenObject( + obj: Record, + prefix: string = '', + ): Record { return Object.keys(obj).reduce((acc: Record, key: string) => { const prefixedKey = prefix ? `${prefix}.${key}` : key; - if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) { + if ( + typeof obj[key] === 'object' && + obj[key] !== null && + !Array.isArray(obj[key]) + ) { const nestedObj = this.flattenObject(obj[key], prefixedKey); Object.assign(acc, nestedObj); } else { diff --git a/frontend/src/app/core/services/web-node.service.ts b/frontend/src/app/core/services/web-node.service.ts index df2f81057e..597153e6c2 100644 --- a/frontend/src/app/core/services/web-node.service.ts +++ b/frontend/src/app/core/services/web-node.service.ts @@ -1,7 +1,27 @@ import { Injectable } from '@angular/core'; -import { BehaviorSubject, catchError, EMPTY, filter, from, fromEvent, map, merge, Observable, of, switchMap, tap, throwError, timer } from 'rxjs'; +import { + BehaviorSubject, + catchError, + EMPTY, + filter, + from, + fromEvent, + map, + merge, + Observable, + of, + switchMap, + tap, + throwError, + timer, +} from 'rxjs'; import base from 'base-x'; -import { any, isBrowser, safelyExecuteInBrowser, getLocalStorage } from '@openmina/shared'; +import { + any, + isBrowser, + safelyExecuteInBrowser, + getLocalStorage, +} from '@openmina/shared'; import { HttpClient } from '@angular/common/http'; import { sendSentryEvent } from '@shared/helpers/webnode.helper'; import { DashboardPeerStatus } from '@shared/types/dashboard/dashboard.peer'; @@ -21,26 +41,32 @@ export interface PrivateStake { providedIn: 'root', }) export class WebNodeService { - - private readonly webnode$: BehaviorSubject = new BehaviorSubject(null); + private readonly webnode$: BehaviorSubject = new BehaviorSubject( + null, + ); private readonly wasm$: BehaviorSubject = new BehaviorSubject(null); - private webNodeKeyPair: { publicKey: string, privateKey: string }; + private webNodeKeyPair: { publicKey: string; privateKey: string }; private webNodeNetwork: String; private webNodeStartTime: number; private sentryEvents: any = {}; - readonly webnodeProgress$: BehaviorSubject = new BehaviorSubject(''); + readonly webnodeProgress$: BehaviorSubject = + new BehaviorSubject(''); memory: WebAssembly.MemoryDescriptor; privateStake: PrivateStake; noBlockProduction: boolean = false; - constructor(private http: HttpClient, - private firestore: FirestoreService, - private sentryService: SentryService) { + constructor( + private http: HttpClient, + private firestore: FirestoreService, + private sentryService: SentryService, + ) { FileProgressHelper.initDownloadProgress(); - const basex = base('123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz'); + const basex = base( + '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz', + ); safelyExecuteInBrowser(() => { any(window).bs58btc = { encode: (buffer: Uint8Array | number[]) => 'z' + basex.encode(buffer), @@ -82,10 +108,22 @@ export class WebNodeService { switchMap(() => { const DEFAULT_NETWORK = 'devnet'; if (!args) { - return this.http.get<{ publicKey: string, privateKey: string }>('assets/webnode/web-node-secrets.json') - .pipe(map(blockProducer => ({ blockProducer, network: DEFAULT_NETWORK }))); + return this.http + .get<{ + publicKey: string; + privateKey: string; + }>('assets/webnode/web-node-secrets.json') + .pipe( + map(blockProducer => ({ + blockProducer, + network: DEFAULT_NETWORK, + })), + ); } - const data = { network: args['network'] || DEFAULT_NETWORK, blockProducer: {} as any }; + const data = { + network: args['network'] || DEFAULT_NETWORK, + blockProducer: {} as any, + }; if (!!args['block_producer']) { data['blockProducer'] = { privateKey: args['block_producer'].sec_key, @@ -106,55 +144,63 @@ export class WebNodeService { startWasm$(): Observable { if (isBrowser()) { - return of(any(window).webnode) - .pipe( - switchMap((wasm: any) => { - this.wasm$.next(wasm); - return from(wasm.default(undefined, new WebAssembly.Memory(this.memory))) - .pipe(map(() => wasm)); - }), - switchMap((wasm) => { - this.webnodeProgress$.next('Loaded'); - const urls = (() => { - if (typeof this.webNodeNetwork === 'number') { - const url = `${window.location.origin}/clusters/${this.webNodeNetwork}/`; - return { - seeds: url + 'seeds', - genesisConfig: url + 'genesis/config', - }; - } else { - return { - seeds: 'https://bootnodes.minaprotocol.com/networks/devnet-webrtc.txt', - }; - } - })(); - console.log('webnode config:', !!this.webNodeKeyPair.privateKey, this.webNodeNetwork, urls); - let privateKey = this.privateStake ? [this.privateStake.stake, this.privateStake.password] : this.webNodeKeyPair.privateKey; - if (this.noBlockProduction) { - privateKey = null; + return of(any(window).webnode).pipe( + switchMap((wasm: any) => { + this.wasm$.next(wasm); + return from( + wasm.default(undefined, new WebAssembly.Memory(this.memory)), + ).pipe(map(() => wasm)); + }), + switchMap(wasm => { + this.webnodeProgress$.next('Loaded'); + const urls = (() => { + if (typeof this.webNodeNetwork === 'number') { + const url = `${window.location.origin}/clusters/${this.webNodeNetwork}/`; + return { + seeds: url + 'seeds', + genesisConfig: url + 'genesis/config', + }; + } else { + return { + seeds: + 'https://bootnodes.minaprotocol.com/networks/devnet-webrtc.txt', + }; } + })(); + console.log( + 'webnode config:', + !!this.webNodeKeyPair.privateKey, + this.webNodeNetwork, + urls, + ); + let privateKey = this.privateStake + ? [this.privateStake.stake, this.privateStake.password] + : this.webNodeKeyPair.privateKey; + if (this.noBlockProduction) { + privateKey = null; + } - return from(wasm.run(privateKey, urls.seeds, urls.genesisConfig)); - }), - tap((webnode: any) => { - any(window).webnode = webnode; - this.webnode$.next(webnode); - this.webnodeProgress$.next('Started'); - }), - catchError((error) => { - sendSentryEvent('WebNode failed to start: ' + error.message); - return throwError(() => new Error(error.message)); - }), - switchMap(() => this.webnode$.asObservable()), - filter(() => CONFIG.globalConfig.heartbeats), - switchMap(() => timer(0, 60000)), - switchMap(() => this.heartBeat$), - switchMap(heartBeat => this.firestore.addHeartbeat(heartBeat)), - catchError(error => { - console.log('Error from heartbeat api:', error); - return of(null); - }), - ); + return from(wasm.run(privateKey, urls.seeds, urls.genesisConfig)); + }), + tap((webnode: any) => { + any(window).webnode = webnode; + this.webnode$.next(webnode); + this.webnodeProgress$.next('Started'); + }), + catchError(error => { + sendSentryEvent('WebNode failed to start: ' + error.message); + return throwError(() => new Error(error.message)); + }), + switchMap(() => this.webnode$.asObservable()), + filter(() => CONFIG.globalConfig.heartbeats), + switchMap(() => timer(0, 60000)), + switchMap(() => this.heartBeat$), + switchMap(heartBeat => this.firestore.addHeartbeat(heartBeat)), + catchError(error => { + console.log('Error from heartbeat api:', error); + return of(null); + }), + ); } return EMPTY; } @@ -185,7 +231,12 @@ export class WebNodeService { // if (!this.sentryEvents.sentPeersEvent && peers.length > 0) { // this.sentryEvents.sentPeersEvent = true; // } - if (!this.sentryEvents.firstPeerConnected && peers.some((p: any) => p.connection_status === DashboardPeerStatus.CONNECTED)) { + if ( + !this.sentryEvents.firstPeerConnected && + peers.some( + (p: any) => p.connection_status === DashboardPeerStatus.CONNECTED, + ) + ) { const seconds = (Date.now() - this.webNodeStartTime) / 1000; this.sentryService.updatePeersConnected(seconds, this.publicKey); this.sentryEvents.firstPeerConnected = true; @@ -212,21 +263,27 @@ export class WebNodeService { get accounts$(): Observable { return this.webnode$.asObservable().pipe( filter(Boolean), - switchMap(webnode => from(any(webnode).ledger().latest().accounts().all())), + switchMap(webnode => + from(any(webnode).ledger().latest().accounts().all()), + ), ); } get bestChainUserCommands$(): Observable { return this.webnode$.asObservable().pipe( filter(Boolean), - switchMap(webnode => from(any(webnode).transition_frontier().best_chain().user_commands())), + switchMap(webnode => + from(any(webnode).transition_frontier().best_chain().user_commands()), + ), ); } sendPayment$(payment: any): Observable { return this.webnode$.asObservable().pipe( filter(Boolean), - switchMap(webnode => from(any(webnode).transaction_pool().inject().payment(payment))), + switchMap(webnode => + from(any(webnode).transaction_pool().inject().payment(payment)), + ), ); } diff --git a/frontend/src/app/features/benchmarks/benchmarks.component.ts b/frontend/src/app/features/benchmarks/benchmarks.component.ts index 18690b913e..40063835c4 100644 --- a/frontend/src/app/features/benchmarks/benchmarks.component.ts +++ b/frontend/src/app/features/benchmarks/benchmarks.component.ts @@ -3,16 +3,15 @@ import { BenchmarksWalletsService } from '@benchmarks/wallets/benchmarks-wallets import { ONE_BILLION } from '@openmina/shared'; @Component({ - selector: 'mina-benchmarks', - templateUrl: './benchmarks.component.html', - styleUrls: ['./benchmarks.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column h-100' }, - standalone: false + selector: 'mina-benchmarks', + templateUrl: './benchmarks.component.html', + styleUrls: ['./benchmarks.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column h-100' }, + standalone: false, }) export class BenchmarksComponent implements OnInit { - - constructor(private service: BenchmarksWalletsService) { } + constructor(private service: BenchmarksWalletsService) {} ngOnInit(): void { // setTimeout(() => { diff --git a/frontend/src/app/features/benchmarks/benchmarks.module.ts b/frontend/src/app/features/benchmarks/benchmarks.module.ts index 1be959d280..77e9d794f8 100644 --- a/frontend/src/app/features/benchmarks/benchmarks.module.ts +++ b/frontend/src/app/features/benchmarks/benchmarks.module.ts @@ -2,13 +2,8 @@ import { NgModule } from '@angular/core'; import { BenchmarksComponent } from './benchmarks.component'; import { BenchmarksRouting } from '@benchmarks/benchmarks.routing'; - @NgModule({ - declarations: [ - BenchmarksComponent, - ], - imports: [ - BenchmarksRouting, - ], + declarations: [BenchmarksComponent], + imports: [BenchmarksRouting], }) export class BenchmarksModule {} diff --git a/frontend/src/app/features/benchmarks/benchmarks.reducer.ts b/frontend/src/app/features/benchmarks/benchmarks.reducer.ts index 2827ee169d..1fbae32193 100644 --- a/frontend/src/app/features/benchmarks/benchmarks.reducer.ts +++ b/frontend/src/app/features/benchmarks/benchmarks.reducer.ts @@ -3,7 +3,7 @@ import { ActionReducer, combineReducers } from '@ngrx/store'; import * as fromWallets from '@benchmarks/wallets/benchmarks-wallets.reducer'; - -export const benchmarksReducer: ActionReducer = combineReducers({ - wallets: fromWallets.reducer, -}); +export const benchmarksReducer: ActionReducer = + combineReducers({ + wallets: fromWallets.reducer, + }); diff --git a/frontend/src/app/features/benchmarks/benchmarks.routing.ts b/frontend/src/app/features/benchmarks/benchmarks.routing.ts index 3e1f4a637f..492f268231 100644 --- a/frontend/src/app/features/benchmarks/benchmarks.routing.ts +++ b/frontend/src/app/features/benchmarks/benchmarks.routing.ts @@ -10,7 +10,10 @@ const routes: Routes = [ children: [ { path: 'wallets', - loadChildren: () => import('@benchmarks/wallets/benchmarks-wallets.module').then(m => m.BenchmarksWalletsModule), + loadChildren: () => + import('@benchmarks/wallets/benchmarks-wallets.module').then( + m => m.BenchmarksWalletsModule, + ), title: BENCHMARKS_TITLE, }, { diff --git a/frontend/src/app/features/benchmarks/benchmarks.state.ts b/frontend/src/app/features/benchmarks/benchmarks.state.ts index b11f7cb100..8e35594a2b 100644 --- a/frontend/src/app/features/benchmarks/benchmarks.state.ts +++ b/frontend/src/app/features/benchmarks/benchmarks.state.ts @@ -1,4 +1,8 @@ -import { createFeatureSelector, createSelector, MemoizedSelector } from '@ngrx/store'; +import { + createFeatureSelector, + createSelector, + MemoizedSelector, +} from '@ngrx/store'; import { MinaState } from '@app/app.setup'; import { BenchmarksWalletsState } from '@benchmarks/wallets/benchmarks-wallets.state'; @@ -6,10 +10,13 @@ export interface BenchmarksState { wallets: BenchmarksWalletsState; } -const select = (selector: (state: BenchmarksState) => T): MemoizedSelector => createSelector( - selectBenchmarksState, - selector, -); +const select = ( + selector: (state: BenchmarksState) => T, +): MemoizedSelector => + createSelector(selectBenchmarksState, selector); -export const selectBenchmarksState = createFeatureSelector('benchmarks'); -export const selectBenchmarksWalletsState = select((state: BenchmarksState): BenchmarksWalletsState => state.wallets); +export const selectBenchmarksState = + createFeatureSelector('benchmarks'); +export const selectBenchmarksWalletsState = select( + (state: BenchmarksState): BenchmarksWalletsState => state.wallets, +); diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-table/benchmarks-wallets-table.component.html b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-table/benchmarks-wallets-table.component.html index fe75965322..29c2793a27 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-table/benchmarks-wallets-table.component.html +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-table/benchmarks-wallets-table.component.html @@ -2,15 +2,19 @@ - + - {{ row.minaTokens | number:'1.0-3':'fr' }} + {{ row.minaTokens | number: '1.0-3' : 'fr' }} {{ row.nonce }} {{ row.lastTxTime || '-' }} {{ row.lastTxMemo || '-' | truncateMid }} - {{ row.lastTxStatus || '-' }} + + {{ row.lastTxStatus || '-' }} + {{ row.successTx }} success, {{ row.failedTx }} failed diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-table/benchmarks-wallets-table.component.ts b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-table/benchmarks-wallets-table.component.ts index c9e75cb3db..de6dc9a931 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-table/benchmarks-wallets-table.component.ts +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-table/benchmarks-wallets-table.component.ts @@ -6,15 +6,17 @@ import { TableColumnList } from '@openmina/shared'; import { MinaTableRustWrapper } from '@shared/base-classes/mina-table-rust-wrapper.class'; @Component({ - selector: 'mina-benchmarks-wallets-table', - templateUrl: './benchmarks-wallets-table.component.html', - styleUrls: ['./benchmarks-wallets-table.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column h-100' }, - standalone: false + selector: 'mina-benchmarks-wallets-table', + templateUrl: './benchmarks-wallets-table.component.html', + styleUrls: ['./benchmarks-wallets-table.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column h-100' }, + standalone: false, }) -export class BenchmarksWalletsTableComponent extends MinaTableRustWrapper implements OnInit { - +export class BenchmarksWalletsTableComponent + extends MinaTableRustWrapper + implements OnInit +{ protected readonly tableHeads: TableColumnList = [ { name: 'public key' }, { name: 'balance' }, @@ -35,10 +37,13 @@ export class BenchmarksWalletsTableComponent extends MinaTableRustWrapper { - this.table.rows = wallets; - this.table.detect(); - }, filter(wallets => wallets.length > 0)); + this.select( + selectBenchmarksWallets, + (wallets: BenchmarksWallet[]) => { + this.table.rows = wallets; + this.table.detect(); + }, + filter(wallets => wallets.length > 0), + ); } } - diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.html b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.html index 099ebdc2ba..5ff1851f69 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.html +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.html @@ -1,66 +1,109 @@
-
- - +
transactions with
- +
MINA amount and
- +
MINA fee from
- -
-
-
Sent Tx. overview: {{ successSentTransactions }} - success, {{ failSentTransactions }} failed +
+ Sent Tx. overview: {{ successSentTransactions }} success, + {{ failSentTransactions }} failed
-
+
-
+
check_small - {{ wallet.minaTokens | number:'1.0-3':'fr' }} MINA - {{ wallet.publicKey | truncateMid }} + + {{ wallet.minaTokens | number: '1.0-3' : 'fr' }} MINA + + + {{ wallet.publicKey | truncateMid }} +
diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.scss b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.scss index 4826f7e28b..4b2516e1e1 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.scss +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.scss @@ -41,7 +41,8 @@ color: openmina.$base-tertiary; box-sizing: border-box; - span:nth-child(2), span:nth-child(4):hover { + span:nth-child(2), + span:nth-child(4):hover { color: openmina.$base-primary; } @@ -52,11 +53,14 @@ &.active { background-color: openmina.$selected-container; - span:nth-child(1), span:nth-child(2), span:nth-child(4):hover { + span:nth-child(1), + span:nth-child(2), + span:nth-child(4):hover { color: openmina.$selected-primary; } - span:nth-child(3), span:nth-child(4) { + span:nth-child(3), + span:nth-child(4) { color: openmina.$selected-secondary; } } diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.ts b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.ts index 56cc3f853a..956f375ffa 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.ts +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component.ts @@ -49,15 +49,17 @@ interface TransactionForm { @UntilDestroy() @Component({ - selector: 'mina-benchmarks-wallets-toolbar', - templateUrl: './benchmarks-wallets-toolbar.component.html', - styleUrls: ['./benchmarks-wallets-toolbar.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column h-xl border-bottom' }, - standalone: false + selector: 'mina-benchmarks-wallets-toolbar', + templateUrl: './benchmarks-wallets-toolbar.component.html', + styleUrls: ['./benchmarks-wallets-toolbar.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column h-xl border-bottom' }, + standalone: false, }) -export class BenchmarksWalletsToolbarComponent extends ManualDetection implements OnInit { - +export class BenchmarksWalletsToolbarComponent + extends ManualDetection + implements OnInit +{ formGroup: FormGroup; streamSending: boolean; successSentTransactions: number; @@ -72,12 +74,17 @@ export class BenchmarksWalletsToolbarComponent extends ManualDetection implement private overlayRef: OverlayRef; @ViewChild('walletDropdown') private walletDropdown: TemplateRef; - @ViewChild('dropdownTrigger') private dropdownTrigger: ElementRef; + @ViewChild('dropdownTrigger') + private dropdownTrigger: ElementRef; - constructor(private store: Store, - private formBuilder: FormBuilder, - private overlay: Overlay, - private viewContainerRef: ViewContainerRef) { super(); } + constructor( + private store: Store, + private formBuilder: FormBuilder, + private overlay: Overlay, + private viewContainerRef: ViewContainerRef, + ) { + super(); + } ngOnInit(): void { this.initForm(); @@ -90,14 +97,16 @@ export class BenchmarksWalletsToolbarComponent extends ManualDetection implement } private listenToWalletsChanges(): void { - this.store.select(selectBenchmarksWallets) + this.store + .select(selectBenchmarksWallets) .pipe(untilDestroyed(this)) .subscribe(wallets => { this.wallets = wallets; this.walletsLength = wallets.length; this.detect(); }); - this.store.select(selectBenchmarksActiveWallet) + this.store + .select(selectBenchmarksActiveWallet) .pipe(untilDestroyed(this)) .subscribe(activeWallet => { this.activeWallet = activeWallet; @@ -106,7 +115,8 @@ export class BenchmarksWalletsToolbarComponent extends ManualDetection implement } private listenToTransactionChanges(): void { - this.store.select(selectBenchmarksSentTransactionsStats) + this.store + .select(selectBenchmarksSentTransactionsStats) .pipe(untilDestroyed(this)) .subscribe(stats => { this.successSentTransactions = stats.success; @@ -116,7 +126,8 @@ export class BenchmarksWalletsToolbarComponent extends ManualDetection implement } private listenToBatchChange(): void { - this.store.select(selectBenchmarksSendingBatch) + this.store + .select(selectBenchmarksSendingBatch) .pipe(untilDestroyed(this)) .subscribe(batch => { this.currentBatch = batch; @@ -126,7 +137,8 @@ export class BenchmarksWalletsToolbarComponent extends ManualDetection implement } private listenToFeeChange(): void { - this.store.select(selectBenchmarksSendingFee) + this.store + .select(selectBenchmarksSendingFee) .pipe(untilDestroyed(this)) .subscribe(fee => { this.formGroup.get('fee').setValue(Math.abs(fee)); @@ -135,7 +147,8 @@ export class BenchmarksWalletsToolbarComponent extends ManualDetection implement } private listenToAmountChange(): void { - this.store.select(selectBenchmarksSendingAmount) + this.store + .select(selectBenchmarksSendingAmount) .pipe(untilDestroyed(this)) .subscribe(amount => { this.formGroup.get('amount').setValue(Math.abs(amount)); @@ -144,13 +157,15 @@ export class BenchmarksWalletsToolbarComponent extends ManualDetection implement } private listenToStressingSendStreaming(): void { - this.store.select(selectBenchmarksBlockSending) + this.store + .select(selectBenchmarksBlockSending) .pipe(untilDestroyed(this)) .subscribe(streamSending => { this.streamSending = streamSending; this.detect(); }); - this.store.select(selectBenchmarksRandomWallet) + this.store + .select(selectBenchmarksRandomWallet) .pipe(untilDestroyed(this)) .subscribe(randomWallet => { this.randomWallet = randomWallet; @@ -165,9 +180,9 @@ export class BenchmarksWalletsToolbarComponent extends ManualDetection implement fee: new FormControl(0), }); - this.formGroup.get('batch') - .valueChanges - .pipe( + this.formGroup + .get('batch') + .valueChanges.pipe( distinctUntilChanged(), filter(v => v !== null), untilDestroyed(this), @@ -175,7 +190,9 @@ export class BenchmarksWalletsToolbarComponent extends ManualDetection implement .subscribe((value: number) => { let payload = Math.ceil(value || 1); if (payload > this.walletsLength) { - payload = this.randomWallet ? this.walletsLength : (this.walletsLength - 1); + payload = this.randomWallet + ? this.walletsLength + : this.walletsLength - 1; } this.formGroup.get('batch').patchValue(payload); if (this.currentBatch !== payload) { @@ -185,40 +202,53 @@ export class BenchmarksWalletsToolbarComponent extends ManualDetection implement }); } }); - this.formGroup.get('amount') - .valueChanges - .pipe( + this.formGroup + .get('amount') + .valueChanges.pipe( distinctUntilChanged(), filter(v => v !== null), untilDestroyed(this), ) .subscribe((value: number) => { - this.store.dispatch({ type: BENCHMARKS_WALLETS_CHANGE_AMOUNT, payload: value }); + this.store.dispatch({ + type: BENCHMARKS_WALLETS_CHANGE_AMOUNT, + payload: value, + }); }); - this.formGroup.get('fee') - .valueChanges - .pipe( + this.formGroup + .get('fee') + .valueChanges.pipe( distinctUntilChanged(), filter(v => v !== null), untilDestroyed(this), ) .subscribe((value: number) => { - this.store.dispatch({ type: BENCHMARKS_WALLETS_CHANGE_FEE, payload: value }); + this.store.dispatch({ + type: BENCHMARKS_WALLETS_CHANGE_FEE, + payload: value, + }); }); } send(): void { if (!this.streamSending) { - this.store.dispatch({ type: BENCHMARKS_WALLETS_SEND_TXS }); + this.store.dispatch({ + type: BENCHMARKS_WALLETS_SEND_TXS, + }); } } toggleRandomWallet(): void { - this.store.dispatch({ type: BENCHMARKS_WALLETS_TOGGLE_RANDOM_WALLET }); + this.store.dispatch({ + type: BENCHMARKS_WALLETS_TOGGLE_RANDOM_WALLET, + }); } changeWallet(wallet: BenchmarksWallet) { - this.store.dispatch({ type: BENCHMARKS_WALLETS_SELECT_WALLET, payload: wallet }); + this.store.dispatch({ + type: BENCHMARKS_WALLETS_SELECT_WALLET, + payload: wallet, + }); this.detachOverlay(); } @@ -232,19 +262,25 @@ export class BenchmarksWalletsToolbarComponent extends ManualDetection implement hasBackdrop: false, width: isMobile() ? '100%' : undefined, height: isMobile() ? '100%' : '350px', - positionStrategy: this.overlay.position() + positionStrategy: this.overlay + .position() .flexibleConnectedTo(this.dropdownTrigger.nativeElement) - .withPositions([{ - originX: 'start', - originY: 'top', - overlayX: 'start', - overlayY: 'top', - offsetY: 35, - }]), + .withPositions([ + { + originX: 'start', + originY: 'top', + overlayX: 'start', + overlayY: 'top', + offsetY: 35, + }, + ]), }); event.stopPropagation(); - const portal = new TemplatePortal(this.walletDropdown, this.viewContainerRef); + const portal = new TemplatePortal( + this.walletDropdown, + this.viewContainerRef, + ); this.overlayRef.attach(portal); } diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zk.service.ts b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zk.service.ts index f1896a2c64..ab61ef1b77 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zk.service.ts +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zk.service.ts @@ -1,5 +1,13 @@ import { inject, Injectable } from '@angular/core'; -import { BehaviorSubject, catchError, filter, map, Observable, of, switchMap } from 'rxjs'; +import { + BehaviorSubject, + catchError, + filter, + map, + Observable, + of, + switchMap, +} from 'rxjs'; import { BenchmarksZkapp } from '@shared/types/benchmarks/transactions/benchmarks-zkapp.type'; import { fromPromise } from 'rxjs/internal/observable/innerFrom'; import { CONFIG } from '@shared/constants/config'; @@ -8,9 +16,12 @@ import { DOCUMENT } from '@angular/common'; @Injectable() export class BenchmarksWalletsZkService { - - private readonly updates = new BehaviorSubject<{ step: string, duration: number }>(null); - private readonly o1jsInterface: BehaviorSubject = new BehaviorSubject(null); + private readonly updates = new BehaviorSubject<{ + step: string; + duration: number; + }>(null); + private readonly o1jsInterface: BehaviorSubject = + new BehaviorSubject(null); private readonly document: Document = inject(DOCUMENT); readonly updates$ = this.updates.asObservable(); @@ -21,17 +32,23 @@ export class BenchmarksWalletsZkService { }); } - sendZkApp(zkApps: BenchmarksZkapp[]): Observable> { + sendZkApp(zkApps: BenchmarksZkapp[]): Observable< + Partial<{ + zkApps: BenchmarksZkapp[]; + error: Error; + }> + > { return this.o1jsInterface.pipe( filter(Boolean), switchMap((o1js: any) => { const executeSequentially = async (): Promise => { const results: any[] = []; for (const zkApp of zkApps) { - const response = await o1js.updateZkApp(CONFIG.globalConfig?.graphQL, zkApp, this.updates); + const response = await o1js.updateZkApp( + CONFIG.globalConfig?.graphQL, + zkApp, + this.updates, + ); results.push(response); } return results; @@ -40,7 +57,9 @@ export class BenchmarksWalletsZkService { return fromPromise(executeSequentially()); }), map((responses: any[]) => { - const errors = responses.filter(response => response.errors && response.errors[0]); + const errors = responses.filter( + response => response.errors && response.errors[0], + ); if (errors.length > 0) { let error = new Error(errors[0].errors[0]); error.name = errors[0].status; diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.html b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.html index 2abbc809a2..34fb2519d9 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.html +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.html @@ -1,49 +1,81 @@
-
- - +
transactions with
- +
MINA fee from
- -
- -
+
- {{ updates.step }} {{ updates.duration }}s + {{ updates.step }} + + {{ updates.duration }} + s +
@@ -51,17 +83,25 @@ -
+
-
+
check_small - {{ wallet.minaTokens | number:'1.0-3':'fr' }} MINA - {{ wallet.publicKey | truncateMid }} + + {{ wallet.minaTokens | number: '1.0-3' : 'fr' }} MINA + + + {{ wallet.publicKey | truncateMid }} +
diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.scss b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.scss index 2c940143f4..3aa63fd0dd 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.scss +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.scss @@ -37,7 +37,8 @@ color: openmina.$base-tertiary; box-sizing: border-box; - span:nth-child(2), span:nth-child(4):hover { + span:nth-child(2), + span:nth-child(4):hover { color: openmina.$base-primary; } @@ -48,11 +49,14 @@ &.active { background-color: openmina.$selected-container; - span:nth-child(1), span:nth-child(2), span:nth-child(4):hover { + span:nth-child(1), + span:nth-child(2), + span:nth-child(4):hover { color: openmina.$selected-primary; } - span:nth-child(3), span:nth-child(4) { + span:nth-child(3), + span:nth-child(4) { color: openmina.$selected-secondary; } } diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.ts b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.ts index 9821fb4faa..7e21d30c35 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.ts +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component.ts @@ -52,8 +52,10 @@ interface TransactionForm { host: { class: 'flex-column h-xl border-bottom' }, standalone: false, }) -export class BenchmarksWalletsZkappToolbarComponent extends ManualDetection implements OnInit { - +export class BenchmarksWalletsZkappToolbarComponent + extends ManualDetection + implements OnInit +{ protected readonly updates$ = this.zkService.updates$; formGroup: FormGroup; @@ -68,13 +70,18 @@ export class BenchmarksWalletsZkappToolbarComponent extends ManualDetection impl private overlayRef: OverlayRef; @ViewChild('walletDropdown') private walletDropdown: TemplateRef; - @ViewChild('dropdownTrigger') private dropdownTrigger: ElementRef; - - constructor(private store: Store, - private formBuilder: FormBuilder, - private overlay: Overlay, - private viewContainerRef: ViewContainerRef, - private zkService: BenchmarksWalletsZkService) { super(); } + @ViewChild('dropdownTrigger') + private dropdownTrigger: ElementRef; + + constructor( + private store: Store, + private formBuilder: FormBuilder, + private overlay: Overlay, + private viewContainerRef: ViewContainerRef, + private zkService: BenchmarksWalletsZkService, + ) { + super(); + } ngOnInit(): void { this.initForm(); @@ -85,14 +92,16 @@ export class BenchmarksWalletsZkappToolbarComponent extends ManualDetection impl } private listenToWalletsChanges(): void { - this.store.select(selectBenchmarksWallets) + this.store + .select(selectBenchmarksWallets) .pipe(untilDestroyed(this)) .subscribe(wallets => { this.wallets = wallets; this.walletsLength = wallets.length; this.detect(); }); - this.store.select(selectBenchmarksActiveWallet) + this.store + .select(selectBenchmarksActiveWallet) .pipe(untilDestroyed(this)) .subscribe(activeWallet => { this.activeWallet = activeWallet; @@ -101,7 +110,8 @@ export class BenchmarksWalletsZkappToolbarComponent extends ManualDetection impl } private listenToBatchChange(): void { - this.store.select(selectBenchmarksZkappsSendingBatch) + this.store + .select(selectBenchmarksZkappsSendingBatch) .pipe(untilDestroyed(this)) .subscribe(batch => { this.currentBatch = batch; @@ -111,7 +121,8 @@ export class BenchmarksWalletsZkappToolbarComponent extends ManualDetection impl } private listenToFeeChange(): void { - this.store.select(selectBenchmarksSendingFeeZkapps) + this.store + .select(selectBenchmarksSendingFeeZkapps) .pipe(untilDestroyed(this)) .subscribe(fee => { this.formGroup.get('fee').setValue(Math.abs(fee)); @@ -120,13 +131,15 @@ export class BenchmarksWalletsZkappToolbarComponent extends ManualDetection impl } private listenToStressingSendStreaming(): void { - this.store.select(selectBenchmarksBlockSending) + this.store + .select(selectBenchmarksBlockSending) .pipe(untilDestroyed(this)) .subscribe(streamSending => { this.streamSending = streamSending; this.detect(); }); - this.store.select(selectBenchmarksRandomWallet) + this.store + .select(selectBenchmarksRandomWallet) .pipe(untilDestroyed(this)) .subscribe(randomWallet => { this.randomWallet = randomWallet; @@ -140,9 +153,9 @@ export class BenchmarksWalletsZkappToolbarComponent extends ManualDetection impl fee: new FormControl(0), }); - this.formGroup.get('batch') - .valueChanges - .pipe( + this.formGroup + .get('batch') + .valueChanges.pipe( distinctUntilChanged(), filter(v => v !== null), untilDestroyed(this), @@ -150,7 +163,9 @@ export class BenchmarksWalletsZkappToolbarComponent extends ManualDetection impl .subscribe((value: number) => { let payload = Math.ceil(value || 1); if (payload > this.walletsLength) { - payload = this.randomWallet ? this.walletsLength : (this.walletsLength - 1); + payload = this.randomWallet + ? this.walletsLength + : this.walletsLength - 1; } this.formGroup.get('batch').patchValue(payload); if (this.currentBatch !== payload) { @@ -160,9 +175,9 @@ export class BenchmarksWalletsZkappToolbarComponent extends ManualDetection impl }); } }); - this.formGroup.get('fee') - .valueChanges - .pipe( + this.formGroup + .get('fee') + .valueChanges.pipe( distinctUntilChanged(), filter(v => v !== null), untilDestroyed(this), @@ -177,16 +192,23 @@ export class BenchmarksWalletsZkappToolbarComponent extends ManualDetection impl send(): void { if (!this.streamSending) { - this.store.dispatch({ type: BENCHMARKS_WALLETS_SEND_ZKAPPS }); + this.store.dispatch({ + type: BENCHMARKS_WALLETS_SEND_ZKAPPS, + }); } } toggleRandomWallet(): void { - this.store.dispatch({ type: BENCHMARKS_WALLETS_TOGGLE_RANDOM_WALLET }); + this.store.dispatch({ + type: BENCHMARKS_WALLETS_TOGGLE_RANDOM_WALLET, + }); } changeWallet(wallet: BenchmarksWallet) { - this.store.dispatch({ type: BENCHMARKS_WALLETS_SELECT_WALLET, payload: wallet }); + this.store.dispatch({ + type: BENCHMARKS_WALLETS_SELECT_WALLET, + payload: wallet, + }); this.detachOverlay(); } @@ -200,19 +222,25 @@ export class BenchmarksWalletsZkappToolbarComponent extends ManualDetection impl hasBackdrop: false, width: isMobile() ? '100%' : undefined, height: isMobile() ? '100%' : '350px', - positionStrategy: this.overlay.position() + positionStrategy: this.overlay + .position() .flexibleConnectedTo(this.dropdownTrigger.nativeElement) - .withPositions([{ - originX: 'start', - originY: 'top', - overlayX: 'start', - overlayY: 'top', - offsetY: 35, - }]), + .withPositions([ + { + originX: 'start', + originY: 'top', + overlayX: 'start', + overlayY: 'top', + offsetY: 35, + }, + ]), }); event.stopPropagation(); - const portal = new TemplatePortal(this.walletDropdown, this.viewContainerRef); + const portal = new TemplatePortal( + this.walletDropdown, + this.viewContainerRef, + ); this.overlayRef.attach(portal); } diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.actions.ts b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.actions.ts index a8151a007d..29bb843a2c 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.actions.ts +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.actions.ts @@ -24,25 +24,43 @@ enum BenchmarksWalletsActionTypes { BENCHMARKS_WALLETS_GET_ALL_TXS_SUCCESS = 'BENCHMARKS_GET_ALL_TXS_SUCCESS', } -export const BENCHMARKS_WALLETS_CLOSE = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_CLOSE; -export const BENCHMARKS_WALLETS_GET_WALLETS = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_GET_WALLETS; -export const BENCHMARKS_WALLETS_GET_WALLETS_SUCCESS = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_GET_WALLETS_SUCCESS; -export const BENCHMARKS_WALLETS_UPDATE_WALLETS_SUCCESS = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_UPDATE_WALLETS_SUCCESS; -export const BENCHMARKS_WALLETS_CHANGE_TRANSACTION_BATCH = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_CHANGE_TRANSACTION_BATCH; -export const BENCHMARKS_WALLETS_CHANGE_ZKAPPS_BATCH = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_CHANGE_ZKAPPS_BATCH; -export const BENCHMARKS_WALLETS_SEND_TXS = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_SEND_TXS; -export const BENCHMARKS_WALLETS_SEND_TX_SUCCESS = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_SEND_TX_SUCCESS; -export const BENCHMARKS_WALLETS_SEND_ZKAPPS = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_SEND_ZKAPPS; -export const BENCHMARKS_WALLETS_SEND_ZKAPPS_SUCCESS = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_SEND_ZKAPPS_SUCCESS; -export const BENCHMARKS_WALLETS_TOGGLE_RANDOM_WALLET = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_TOGGLE_RANDOM_WALLET; -export const BENCHMARKS_WALLETS_SELECT_WALLET = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_SELECT_WALLET; -export const BENCHMARKS_WALLETS_CHANGE_AMOUNT = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_CHANGE_AMOUNT; -export const BENCHMARKS_WALLETS_CHANGE_FEE = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_CHANGE_FEE; -export const BENCHMARKS_WALLETS_CHANGE_FEE_ZKAPPS = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_CHANGE_FEE_ZKAPPS; -export const BENCHMARKS_WALLETS_GET_ALL_TXS = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_GET_ALL_TXS; -export const BENCHMARKS_WALLETS_GET_ALL_TXS_SUCCESS = BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_GET_ALL_TXS_SUCCESS; - -export interface BenchmarksWalletsAction extends FeatureAction { +export const BENCHMARKS_WALLETS_CLOSE = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_CLOSE; +export const BENCHMARKS_WALLETS_GET_WALLETS = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_GET_WALLETS; +export const BENCHMARKS_WALLETS_GET_WALLETS_SUCCESS = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_GET_WALLETS_SUCCESS; +export const BENCHMARKS_WALLETS_UPDATE_WALLETS_SUCCESS = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_UPDATE_WALLETS_SUCCESS; +export const BENCHMARKS_WALLETS_CHANGE_TRANSACTION_BATCH = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_CHANGE_TRANSACTION_BATCH; +export const BENCHMARKS_WALLETS_CHANGE_ZKAPPS_BATCH = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_CHANGE_ZKAPPS_BATCH; +export const BENCHMARKS_WALLETS_SEND_TXS = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_SEND_TXS; +export const BENCHMARKS_WALLETS_SEND_TX_SUCCESS = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_SEND_TX_SUCCESS; +export const BENCHMARKS_WALLETS_SEND_ZKAPPS = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_SEND_ZKAPPS; +export const BENCHMARKS_WALLETS_SEND_ZKAPPS_SUCCESS = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_SEND_ZKAPPS_SUCCESS; +export const BENCHMARKS_WALLETS_TOGGLE_RANDOM_WALLET = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_TOGGLE_RANDOM_WALLET; +export const BENCHMARKS_WALLETS_SELECT_WALLET = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_SELECT_WALLET; +export const BENCHMARKS_WALLETS_CHANGE_AMOUNT = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_CHANGE_AMOUNT; +export const BENCHMARKS_WALLETS_CHANGE_FEE = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_CHANGE_FEE; +export const BENCHMARKS_WALLETS_CHANGE_FEE_ZKAPPS = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_CHANGE_FEE_ZKAPPS; +export const BENCHMARKS_WALLETS_GET_ALL_TXS = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_GET_ALL_TXS; +export const BENCHMARKS_WALLETS_GET_ALL_TXS_SUCCESS = + BenchmarksWalletsActionTypes.BENCHMARKS_WALLETS_GET_ALL_TXS_SUCCESS; + +export interface BenchmarksWalletsAction + extends FeatureAction { readonly type: BenchmarksWalletsActionTypes; } @@ -56,25 +74,38 @@ export class BenchmarksWalletsGetWallets implements BenchmarksWalletsAction { constructor(public payload?: { initialRequest: boolean }) {} } -export class BenchmarksWalletsGetWalletsSuccess implements BenchmarksWalletsAction { +export class BenchmarksWalletsGetWalletsSuccess + implements BenchmarksWalletsAction +{ readonly type = BENCHMARKS_WALLETS_GET_WALLETS_SUCCESS; - constructor(public payload: Pick[]) {} + constructor( + public payload: Pick< + BenchmarksWallet, + 'publicKey' | 'privateKey' | 'minaTokens' | 'nonce' + >[], + ) {} } -export class BenchmarksWalletsUpdateWalletsSuccess implements BenchmarksWalletsAction { +export class BenchmarksWalletsUpdateWalletsSuccess + implements BenchmarksWalletsAction +{ readonly type = BENCHMARKS_WALLETS_UPDATE_WALLETS_SUCCESS; constructor(public payload: BenchmarksWallet[]) {} } -export class BenchmarksWalletsChangeTransactionBatch implements BenchmarksWalletsAction { +export class BenchmarksWalletsChangeTransactionBatch + implements BenchmarksWalletsAction +{ readonly type = BENCHMARKS_WALLETS_CHANGE_TRANSACTION_BATCH; constructor(public payload: number) {} } -export class BenchmarksWalletsChangeZkAppsBatch implements BenchmarksWalletsAction { +export class BenchmarksWalletsChangeZkAppsBatch + implements BenchmarksWalletsAction +{ readonly type = BENCHMARKS_WALLETS_CHANGE_ZKAPPS_BATCH; constructor(public payload: number) {} @@ -87,20 +118,31 @@ export class BenchmarksWalletsSendTxs implements BenchmarksWalletsAction { export class BenchmarksWalletsSendTxSuccess implements BenchmarksWalletsAction { readonly type = BENCHMARKS_WALLETS_SEND_TX_SUCCESS; - constructor(public payload: Partial<{ transactions: BenchmarksWalletTransaction[], error: Error }>) {} + constructor( + public payload: Partial<{ + transactions: BenchmarksWalletTransaction[]; + error: Error; + }>, + ) {} } export class BenchmarksWalletsSendZkApps implements BenchmarksWalletsAction { readonly type = BENCHMARKS_WALLETS_SEND_ZKAPPS; } -export class BenchmarksWalletsSendZkAppsSuccess implements BenchmarksWalletsAction { +export class BenchmarksWalletsSendZkAppsSuccess + implements BenchmarksWalletsAction +{ readonly type = BENCHMARKS_WALLETS_SEND_ZKAPPS_SUCCESS; - constructor(public payload: Partial<{ zkApps: BenchmarksZkapp[], error: Error }>) {} + constructor( + public payload: Partial<{ zkApps: BenchmarksZkapp[]; error: Error }>, + ) {} } -export class BenchmarksWalletsToggleRandomWallet implements BenchmarksWalletsAction { +export class BenchmarksWalletsToggleRandomWallet + implements BenchmarksWalletsAction +{ readonly type = BENCHMARKS_WALLETS_TOGGLE_RANDOM_WALLET; } @@ -122,7 +164,9 @@ export class BenchmarksWalletsChangeFee implements BenchmarksWalletsAction { constructor(public payload: number) {} } -export class BenchmarksWalletsChangeFeeZkApps implements BenchmarksWalletsAction { +export class BenchmarksWalletsChangeFeeZkApps + implements BenchmarksWalletsAction +{ readonly type = BENCHMARKS_WALLETS_CHANGE_FEE_ZKAPPS; constructor(public payload: number) {} @@ -132,16 +176,19 @@ export class BenchmarksWalletsGetAllTxs implements BenchmarksWalletsAction { readonly type = BENCHMARKS_WALLETS_GET_ALL_TXS; } -export class BenchmarksWalletsGetAllTxsSuccess implements BenchmarksWalletsAction { +export class BenchmarksWalletsGetAllTxsSuccess + implements BenchmarksWalletsAction +{ readonly type = BENCHMARKS_WALLETS_GET_ALL_TXS_SUCCESS; - constructor(public payload: { - mempoolTxs: MempoolTransaction[], - includedTxs: MempoolTransaction[], - }) {} + constructor( + public payload: { + mempoolTxs: MempoolTransaction[]; + includedTxs: MempoolTransaction[]; + }, + ) {} } - export type BenchmarksWalletsActions = | BenchmarksWalletsClose | BenchmarksWalletsGetWallets @@ -159,5 +206,4 @@ export type BenchmarksWalletsActions = | BenchmarksWalletsChangeFee | BenchmarksWalletsChangeFeeZkApps | BenchmarksWalletsGetAllTxs - | BenchmarksWalletsGetAllTxsSuccess - ; + | BenchmarksWalletsGetAllTxsSuccess; diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.component.html b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.component.html index a7a94c8d55..277ec95e6e 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.component.html +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.component.html @@ -3,8 +3,7 @@ @if (!isWebNode) { } -
+
diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.component.ts b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.component.ts index a8fb4909f0..a7bce47a6c 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.component.ts +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.component.ts @@ -1,5 +1,13 @@ -import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; -import { BenchmarksWalletsClose, BenchmarksWalletsGetWallets } from '@benchmarks/wallets/benchmarks-wallets.actions'; +import { + ChangeDetectionStrategy, + Component, + OnDestroy, + OnInit, +} from '@angular/core'; +import { + BenchmarksWalletsClose, + BenchmarksWalletsGetWallets, +} from '@benchmarks/wallets/benchmarks-wallets.actions'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { AppSelectors } from '@app/app.state'; import { filter, skip } from 'rxjs'; @@ -7,18 +15,22 @@ import { BenchmarksWalletsZkService } from '@benchmarks/wallets/benchmarks-walle import { MinaNode } from '@shared/types/core/environment/mina-env.type'; @Component({ - selector: 'mina-benchmarks-wallets', - templateUrl: './benchmarks-wallets.component.html', - styleUrls: ['./benchmarks-wallets.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'h-100' }, - standalone: false + selector: 'mina-benchmarks-wallets', + templateUrl: './benchmarks-wallets.component.html', + styleUrls: ['./benchmarks-wallets.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'h-100' }, + standalone: false, }) -export class BenchmarksWalletsComponent extends StoreDispatcher implements OnInit, OnDestroy { - +export class BenchmarksWalletsComponent + extends StoreDispatcher + implements OnInit, OnDestroy +{ isWebNode: boolean = false; - constructor(private zkService: BenchmarksWalletsZkService) { super(); } + constructor(private zkService: BenchmarksWalletsZkService) { + super(); + } ngOnInit(): void { this.zkService.loadO1js(); @@ -27,13 +39,22 @@ export class BenchmarksWalletsComponent extends StoreDispatcher implements OnIni } private listenToActiveNodeChange(): void { - this.select(AppSelectors.activeNode, (node: MinaNode) => { - this.isWebNode = node.isWebNode; - this.detect(); - }, filter(Boolean)); - this.select(AppSelectors.activeNode, () => { - this.dispatch(BenchmarksWalletsGetWallets, { initialRequest: true }); - }, filter(Boolean), skip(1)); + this.select( + AppSelectors.activeNode, + (node: MinaNode) => { + this.isWebNode = node.isWebNode; + this.detect(); + }, + filter(Boolean), + ); + this.select( + AppSelectors.activeNode, + () => { + this.dispatch(BenchmarksWalletsGetWallets, { initialRequest: true }); + }, + filter(Boolean), + skip(1), + ); } override ngOnDestroy(): void { diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.effects.ts b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.effects.ts index d831c35149..7905d74ef4 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.effects.ts +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.effects.ts @@ -30,73 +30,111 @@ import { BenchmarksWalletsZkService } from '@benchmarks/wallets/benchmarks-walle providedIn: 'root', }) export class BenchmarksWalletsEffects extends MinaRustBaseEffect { - readonly getWallets$: Effect; readonly sendTxs$: Effect; readonly sendTxSuccess$: Effect; readonly getAllTxs$: Effect; readonly sendZkApps$: Effect; - constructor(private actions$: Actions, - private benchmarksService: BenchmarksWalletsService, - private zkService: BenchmarksWalletsZkService, - private mempoolService: MempoolService, - store: Store) { + constructor( + private actions$: Actions, + private benchmarksService: BenchmarksWalletsService, + private zkService: BenchmarksWalletsZkService, + private mempoolService: MempoolService, + store: Store, + ) { super(store, selectMinaState); - this.getWallets$ = createEffect(() => this.actions$.pipe( - ofType(BENCHMARKS_WALLETS_GET_WALLETS, BENCHMARKS_WALLETS_CLOSE), - this.latestActionState(), - switchMap(({ action }) => action.type === BENCHMARKS_WALLETS_CLOSE - ? EMPTY - : this.benchmarksService.getAccounts().pipe( - switchMap(payload => { - const actions = []; - if (action.payload?.initialRequest) { - actions.push({ type: BENCHMARKS_WALLETS_GET_ALL_TXS }); - } - actions.push({ type: BENCHMARKS_WALLETS_GET_WALLETS_SUCCESS, payload }); - return actions; - }), - )), - catchErrorAndRepeat(MinaErrorType.GENERIC, BENCHMARKS_WALLETS_GET_WALLETS_SUCCESS, []), - )); + this.getWallets$ = createEffect(() => + this.actions$.pipe( + ofType(BENCHMARKS_WALLETS_GET_WALLETS, BENCHMARKS_WALLETS_CLOSE), + this.latestActionState< + BenchmarksWalletsGetWallets | BenchmarksWalletsClose + >(), + switchMap(({ action }) => + action.type === BENCHMARKS_WALLETS_CLOSE + ? EMPTY + : this.benchmarksService.getAccounts().pipe( + switchMap(payload => { + const actions = []; + if (action.payload?.initialRequest) { + actions.push({ type: BENCHMARKS_WALLETS_GET_ALL_TXS }); + } + actions.push({ + type: BENCHMARKS_WALLETS_GET_WALLETS_SUCCESS, + payload, + }); + return actions; + }), + ), + ), + catchErrorAndRepeat( + MinaErrorType.GENERIC, + BENCHMARKS_WALLETS_GET_WALLETS_SUCCESS, + [], + ), + ), + ); - this.sendTxs$ = createEffect(() => this.actions$.pipe( - ofType(BENCHMARKS_WALLETS_SEND_TXS), - this.latestActionState(), - switchMap(({ state }) => this.benchmarksService.sendTransactions(state.benchmarks.wallets.txsToSend)), - map(payload => ({ type: BENCHMARKS_WALLETS_SEND_TX_SUCCESS, payload })), - )); + this.sendTxs$ = createEffect(() => + this.actions$.pipe( + ofType(BENCHMARKS_WALLETS_SEND_TXS), + this.latestActionState(), + switchMap(({ state }) => + this.benchmarksService.sendTransactions( + state.benchmarks.wallets.txsToSend, + ), + ), + map(payload => ({ type: BENCHMARKS_WALLETS_SEND_TX_SUCCESS, payload })), + ), + ); - this.sendTxSuccess$ = createEffect(() => this.actions$.pipe( - ofType(BENCHMARKS_WALLETS_SEND_TX_SUCCESS, BENCHMARKS_WALLETS_SEND_ZKAPPS_SUCCESS), - map(() => ({ type: BENCHMARKS_WALLETS_GET_WALLETS })), - )); + this.sendTxSuccess$ = createEffect(() => + this.actions$.pipe( + ofType( + BENCHMARKS_WALLETS_SEND_TX_SUCCESS, + BENCHMARKS_WALLETS_SEND_ZKAPPS_SUCCESS, + ), + map(() => ({ type: BENCHMARKS_WALLETS_GET_WALLETS })), + ), + ); - this.getAllTxs$ = createEffect(() => this.actions$.pipe( - ofType(BENCHMARKS_WALLETS_GET_ALL_TXS), - switchMap(() => - combineLatest([ - this.mempoolService.getTransactionPool(), - this.benchmarksService.getAllIncludedTransactions(), - ]), + this.getAllTxs$ = createEffect(() => + this.actions$.pipe( + ofType(BENCHMARKS_WALLETS_GET_ALL_TXS), + switchMap(() => + combineLatest([ + this.mempoolService.getTransactionPool(), + this.benchmarksService.getAllIncludedTransactions(), + ]), + ), + map(([{ txs }, includedTxs]) => ({ + type: BENCHMARKS_WALLETS_GET_ALL_TXS_SUCCESS, + payload: { mempoolTxs: txs, includedTxs }, + })), + catchErrorAndRepeat( + MinaErrorType.GENERIC, + BENCHMARKS_WALLETS_GET_ALL_TXS_SUCCESS, + { + memPoolTxs: [], + includedTxs: [], + }, + ), ), - map(([{ txs }, includedTxs]) => ({ - type: BENCHMARKS_WALLETS_GET_ALL_TXS_SUCCESS, - payload: { mempoolTxs: txs, includedTxs }, - })), - catchErrorAndRepeat(MinaErrorType.GENERIC, BENCHMARKS_WALLETS_GET_ALL_TXS_SUCCESS, { - memPoolTxs: [], - includedTxs: [], - }), - )); + ); - this.sendZkApps$ = createEffect(() => this.actions$.pipe( - ofType(BENCHMARKS_WALLETS_SEND_ZKAPPS), - this.latestActionState(), - switchMap(({ state }) => this.zkService.sendZkApp(state.benchmarks.wallets.zkAppsToSend)), - map(payload => ({ type: BENCHMARKS_WALLETS_SEND_ZKAPPS_SUCCESS, payload })), - )); + this.sendZkApps$ = createEffect(() => + this.actions$.pipe( + ofType(BENCHMARKS_WALLETS_SEND_ZKAPPS), + this.latestActionState(), + switchMap(({ state }) => + this.zkService.sendZkApp(state.benchmarks.wallets.zkAppsToSend), + ), + map(payload => ({ + type: BENCHMARKS_WALLETS_SEND_ZKAPPS_SUCCESS, + payload, + })), + ), + ); } } diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.module.ts b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.module.ts index c0f2cfd5ce..6f73c2a94c 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.module.ts +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.module.ts @@ -5,20 +5,13 @@ import { BenchmarksWalletsComponent } from './benchmarks-wallets.component'; import { SharedModule } from '@shared/shared.module'; import { EffectsModule } from '@ngrx/effects'; import { BenchmarksWalletsEffects } from '@benchmarks/wallets/benchmarks-wallets.effects'; -import { - BenchmarksWalletsTableComponent, -} from '@benchmarks/wallets/benchmarks-wallets-table/benchmarks-wallets-table.component'; -import { - BenchmarksWalletsToolbarComponent, -} from '@benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component'; +import { BenchmarksWalletsTableComponent } from '@benchmarks/wallets/benchmarks-wallets-table/benchmarks-wallets-table.component'; +import { BenchmarksWalletsToolbarComponent } from '@benchmarks/wallets/benchmarks-wallets-toolbar/benchmarks-wallets-toolbar.component'; import { BenchmarksWalletsRouting } from '@benchmarks/wallets/benchmarks-wallets.routing'; import { CopyComponent, HorizontalMenuComponent } from '@openmina/shared'; -import { - BenchmarksWalletsZkappToolbarComponent, -} from './benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component'; +import { BenchmarksWalletsZkappToolbarComponent } from './benchmarks-wallets-zkapp-toolbar/benchmarks-wallets-zkapp-toolbar.component'; import { BenchmarksWalletsZkService } from '@benchmarks/wallets/benchmarks-wallets-zk.service'; - @NgModule({ declarations: [ BenchmarksWalletsComponent, diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.reducer.ts b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.reducer.ts index 6c6aadad29..7ca2fd4e15 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.reducer.ts +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.reducer.ts @@ -11,7 +11,8 @@ import { BENCHMARKS_WALLETS_SELECT_WALLET, BENCHMARKS_WALLETS_SEND_TX_SUCCESS, BENCHMARKS_WALLETS_SEND_TXS, - BENCHMARKS_WALLETS_SEND_ZKAPPS, BENCHMARKS_WALLETS_SEND_ZKAPPS_SUCCESS, + BENCHMARKS_WALLETS_SEND_ZKAPPS, + BENCHMARKS_WALLETS_SEND_ZKAPPS_SUCCESS, BENCHMARKS_WALLETS_TOGGLE_RANDOM_WALLET, BENCHMARKS_WALLETS_UPDATE_WALLETS_SUCCESS, BenchmarksWalletsActions, @@ -21,7 +22,12 @@ import { BenchmarksWalletTransactionStatus, } from '@shared/types/benchmarks/wallets/benchmarks-wallet.type'; import { BenchmarksWalletTransaction } from '@shared/types/benchmarks/wallets/benchmarks-wallet-transaction.type'; -import { getLocalStorage, hasValue, lastItem, ONE_BILLION } from '@openmina/shared'; +import { + getLocalStorage, + hasValue, + lastItem, + ONE_BILLION, +} from '@openmina/shared'; import { BenchmarksWalletsState } from '@benchmarks/wallets/benchmarks-wallets.state'; import { getTimeFromMemo } from '@shared/helpers/transaction.helper'; import { BenchmarksZkapp } from '@shared/types/benchmarks/transactions/benchmarks-zkapp.type'; @@ -45,9 +51,11 @@ const initialState: BenchmarksWalletsState = { zkAppsSendingBatch: 1, }; -export function reducer(state: BenchmarksWalletsState = initialState, action: BenchmarksWalletsActions): BenchmarksWalletsState { +export function reducer( + state: BenchmarksWalletsState = initialState, + action: BenchmarksWalletsActions, +): BenchmarksWalletsState { switch (action.type) { - case BENCHMARKS_WALLETS_GET_WALLETS_SUCCESS: { const wallets = action.payload.map((wallet, i: number) => ({ successTx: 0, @@ -59,7 +67,9 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be ...state, wallets, blockSending: false, - txSendingBatch: !hasValue(state.txSendingBatch) ? action.payload.length : state.txSendingBatch, + txSendingBatch: !hasValue(state.txSendingBatch) + ? action.payload.length + : state.txSendingBatch, activeWallet: state.activeWallet ?? wallets[0], }; } @@ -110,7 +120,13 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be .map((wallet: BenchmarksWallet, i: number) => { const nonce = getNonceForWallet(wallet, state).toString(); const counter = state.sentTxCount + i; - const memo = 'S.T.' + Date.now() + ',' + (counter + 1) + ',' + getLocalStorage()?.getItem('browserId'); + const memo = + 'S.T.' + + Date.now() + + ',' + + (counter + 1) + + ',' + + getLocalStorage()?.getItem('browserId'); const payment = { from: wallet.publicKey, nonce, @@ -131,33 +147,43 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be const wallet = state.activeWallet; let nonce = getNonceForWallet(wallet, state); - txsToSend = Array(state.txSendingBatch).fill(void 0).map((_, i: number) => { - const counter = state.sentTxCount + i; - const memo = 'S.T.' + Date.now() + ',' + (counter + 1) + ',' + getLocalStorage()?.getItem('browserId'); - const payment = { - from: wallet.publicKey, - nonce: nonce.toString(), - to: state.wallets[i].publicKey, - fee: (state.sendingFee * ONE_BILLION).toString(), - amount: (state.sendingAmount * ONE_BILLION).toString(), - memo, - validUntil: '4294967295', - }; - nonce++; + txsToSend = Array(state.txSendingBatch) + .fill(void 0) + .map((_, i: number) => { + const counter = state.sentTxCount + i; + const memo = + 'S.T.' + + Date.now() + + ',' + + (counter + 1) + + ',' + + getLocalStorage()?.getItem('browserId'); + const payment = { + from: wallet.publicKey, + nonce: nonce.toString(), + to: state.wallets[i].publicKey, + fee: (state.sendingFee * ONE_BILLION).toString(), + amount: (state.sendingAmount * ONE_BILLION).toString(), + memo, + validUntil: '4294967295', + }; + nonce++; - return { - ...payment, - privateKey: wallet.privateKey, - blockSending: true, - }; - }); + return { + ...payment, + privateKey: wallet.privateKey, + blockSending: true, + }; + }); } return { ...state, txsToSend, wallets: state.wallets.map((w: BenchmarksWallet) => { - const transactionFromThisWallet = txsToSend.find(tx => tx.from === w.publicKey); + const transactionFromThisWallet = txsToSend.find( + tx => tx.from === w.publicKey, + ); if (!transactionFromThisWallet) { return w; } @@ -176,24 +202,41 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be ...state, txsToSend: [], wallets: state.wallets.map((w: BenchmarksWallet) => { - const transactionsFromThisWallet = action.payload.transactions.filter(tx => tx.from === w.publicKey); + const transactionsFromThisWallet = action.payload.transactions.filter( + tx => tx.from === w.publicKey, + ); if (transactionsFromThisWallet.length === 0) { return w; } return { ...w, - lastTxCount: lastItem(transactionsFromThisWallet).memo.split(',')[1], - lastTxStatus: action.payload.error ? BenchmarksWalletTransactionStatus.ERROR : BenchmarksWalletTransactionStatus.GENERATED, + lastTxCount: lastItem(transactionsFromThisWallet).memo.split( + ',', + )[1], + lastTxStatus: action.payload.error + ? BenchmarksWalletTransactionStatus.ERROR + : BenchmarksWalletTransactionStatus.GENERATED, lastTxTime: lastItem(transactionsFromThisWallet).dateTime, - lastTxMemo: lastItem(transactionsFromThisWallet).memo.replace('S.T.', ''), - successTx: w.successTx + (!action.payload.error ? transactionsFromThisWallet.length : 0), - failedTx: w.failedTx + (action.payload.error ? transactionsFromThisWallet.length : 0), + lastTxMemo: lastItem(transactionsFromThisWallet).memo.replace( + 'S.T.', + '', + ), + successTx: + w.successTx + + (!action.payload.error ? transactionsFromThisWallet.length : 0), + failedTx: + w.failedTx + + (action.payload.error ? transactionsFromThisWallet.length : 0), errorReason: action.payload.error?.message, }; }), sentTransactions: { - success: state.sentTransactions.success + (!action.payload.error ? action.payload.transactions.length : 0), - fail: state.sentTransactions.fail + (action.payload.error ? action.payload.transactions.length : 0), + success: + state.sentTransactions.success + + (!action.payload.error ? action.payload.transactions.length : 0), + fail: + state.sentTransactions.fail + + (action.payload.error ? action.payload.transactions.length : 0), }, }; } @@ -203,50 +246,76 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be ...state, zkAppsToSend: [], wallets: state.wallets.map((w: BenchmarksWallet) => { - const zkAppsFromThisWallet = action.payload.zkApps.filter(tx => tx.payerPublicKey === w.publicKey); + const zkAppsFromThisWallet = action.payload.zkApps.filter( + tx => tx.payerPublicKey === w.publicKey, + ); if (!zkAppsFromThisWallet.length) { return w; } return { ...w, lastTxCount: lastItem(zkAppsFromThisWallet).memo.split(',')[1], - lastTxStatus: action.payload.error?.name ?? BenchmarksWalletTransactionStatus.GENERATED, + lastTxStatus: + action.payload.error?.name ?? + BenchmarksWalletTransactionStatus.GENERATED, lastTxTime: getTimeFromMemo(lastItem(zkAppsFromThisWallet).memo), lastTxMemo: lastItem(zkAppsFromThisWallet).memo, - successTx: w.successTx + (!action.payload.error ? zkAppsFromThisWallet.length : 0), - failedTx: w.failedTx + (action.payload.error ? zkAppsFromThisWallet.length : 0), + successTx: + w.successTx + + (!action.payload.error ? zkAppsFromThisWallet.length : 0), + failedTx: + w.failedTx + + (action.payload.error ? zkAppsFromThisWallet.length : 0), errorReason: action.payload.error?.message, }; }), sentTransactions: { - success: state.sentTransactions.success + (!action.payload.error ? action.payload.zkApps.length : 0), - fail: state.sentTransactions.fail + (action.payload.error ? action.payload.zkApps.length : 0), + success: + state.sentTransactions.success + + (!action.payload.error ? action.payload.zkApps.length : 0), + fail: + state.sentTransactions.fail + + (action.payload.error ? action.payload.zkApps.length : 0), }, }; } case BENCHMARKS_WALLETS_GET_ALL_TXS_SUCCESS: { - const allTxs = [...action.payload.mempoolTxs, ...action.payload.includedTxs]; + const allTxs = [ + ...action.payload.mempoolTxs, + ...action.payload.includedTxs, + ]; return { ...state, wallets: state.wallets.map((w: BenchmarksWallet) => { - const transactionsFromThisWallet = allTxs.filter(tx => tx.sender === w.publicKey); + const transactionsFromThisWallet = allTxs.filter( + tx => tx.sender === w.publicKey, + ); if (transactionsFromThisWallet.length === 0) { return w; } - const lastTransaction = transactionsFromThisWallet.reduce((acc, tx) => { - if (parseInt(tx.memo.split(',')[1], 10) > parseInt(acc.memo.split(',')[1], 10)) { - return tx; - } - return acc; - }); + const lastTransaction = transactionsFromThisWallet.reduce( + (acc, tx) => { + if ( + parseInt(tx.memo.split(',')[1], 10) > + parseInt(acc.memo.split(',')[1], 10) + ) { + return tx; + } + return acc; + }, + ); return { ...w, lastTxMemo: lastTransaction.memo.replace('S.T.', ''), - lastTxStatus: action.payload.mempoolTxs.includes(lastTransaction) ? BenchmarksWalletTransactionStatus.GENERATED : BenchmarksWalletTransactionStatus.INCLUDED, + lastTxStatus: action.payload.mempoolTxs.includes(lastTransaction) + ? BenchmarksWalletTransactionStatus.GENERATED + : BenchmarksWalletTransactionStatus.INCLUDED, lastTxCount: lastTransaction.memo.split(',')[1], lastTxTime: getTimeFromMemo(lastTransaction.memo), - successTx: allTxs.filter(tx => tx.sender === w.publicKey && tx.memo.includes('S.T.')).length, + successTx: allTxs.filter( + tx => tx.sender === w.publicKey && tx.memo.includes('S.T.'), + ).length, }; }), sentTransactions: { @@ -299,7 +368,13 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be .map((wallet: BenchmarksWallet, i: number) => { const nonce = getNonceForWallet(wallet, state).toString(); const counter = state.sentTxCount + i; - const memo = 'S.T.' + Date.now() + ',' + (counter + 1) + ',' + getLocalStorage()?.getItem('browserId'); + const memo = + 'S.T.' + + Date.now() + + ',' + + (counter + 1) + + ',' + + getLocalStorage()?.getItem('browserId'); return { payerPublicKey: wallet.publicKey, payerPrivateKey: wallet.privateKey, @@ -313,28 +388,38 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be const wallet = state.activeWallet; let nonce = getNonceForWallet(wallet, state); - zkAppsToSend = Array(state.zkAppsSendingBatch).fill(void 0).map((_, i: number) => { - const counter = state.sentTxCount + i; - const memo = 'S.T.' + Date.now() + ',' + (counter + 1) + ',' + getLocalStorage()?.getItem('browserId'); - const payment = { - payerPublicKey: wallet.publicKey, - payerPrivateKey: wallet.privateKey, - fee: state.sendingFeeZkapps, - nonce: nonce.toString(), - memo, - accountUpdates: 2, - }; - nonce++; + zkAppsToSend = Array(state.zkAppsSendingBatch) + .fill(void 0) + .map((_, i: number) => { + const counter = state.sentTxCount + i; + const memo = + 'S.T.' + + Date.now() + + ',' + + (counter + 1) + + ',' + + getLocalStorage()?.getItem('browserId'); + const payment = { + payerPublicKey: wallet.publicKey, + payerPrivateKey: wallet.privateKey, + fee: state.sendingFeeZkapps, + nonce: nonce.toString(), + memo, + accountUpdates: 2, + }; + nonce++; - return payment; - }); + return payment; + }); } return { ...state, zkAppsToSend: zkAppsToSend, wallets: state.wallets.map((w: BenchmarksWallet) => { - const transactionFromThisWallet = zkAppsToSend.find(tx => tx.payerPublicKey === w.publicKey); + const transactionFromThisWallet = zkAppsToSend.find( + tx => tx.payerPublicKey === w.publicKey, + ); if (!transactionFromThisWallet) { return w; } @@ -354,7 +439,10 @@ export function reducer(state: BenchmarksWalletsState = initialState, action: Be } } -function getRandomReceiver(currentWallet: BenchmarksWallet, wallets: BenchmarksWallet[]): string { +function getRandomReceiver( + currentWallet: BenchmarksWallet, + wallets: BenchmarksWallet[], +): string { const index = Math.floor(Math.random() * wallets.length); if (wallets[index].publicKey === currentWallet.publicKey) { return getRandomReceiver(currentWallet, wallets); @@ -362,7 +450,10 @@ function getRandomReceiver(currentWallet: BenchmarksWallet, wallets: BenchmarksW return wallets[index].publicKey; } -function getNonceForWallet(wallet: BenchmarksWallet, state: BenchmarksWalletsState): number { +function getNonceForWallet( + wallet: BenchmarksWallet, + state: BenchmarksWalletsState, +): number { // const txsInMempool = state.mempoolTxs.filter(tx => tx.from === wallet.publicKey).map(tx => tx.nonce); return Math.max(wallet.nonce, 0); } diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.service.ts b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.service.ts index b91a1462b6..1cd4ce97ae 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.service.ts +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.service.ts @@ -10,11 +10,15 @@ import { SignedCommand, ZkappCommand, } from '@shared/types/mempool/mempool-transaction.type'; -import { decodeMemo, getTimeFromMemo, removeUnicodeEscapes } from '@shared/helpers/transaction.helper'; +import { + decodeMemo, + getTimeFromMemo, + removeUnicodeEscapes, +} from '@shared/helpers/transaction.helper'; import { getLocalStorage, ONE_BILLION } from '@openmina/shared'; import { MempoolTransactionResponseKind } from '@app/features/mempool/mempool.service'; -export const WALLETS: { privateKey: string, publicKey: string }[] = [ +export const WALLETS: { privateKey: string; publicKey: string }[] = [ { privateKey: 'EKEQGWy4TjbVeqKjbe7TW81DKQM34min5FNmXpKArHKLyGVd3KSP', publicKey: 'B62qpD75xH5R19wxZG2uz8whNsHPTioVoYcPV3zfjjSbzTmaHQHKKEV', @@ -4025,28 +4029,40 @@ export const WALLETS: { privateKey: string, publicKey: string }[] = [ providedIn: 'root', }) export class BenchmarksWalletsService { - private client: Client = new Client({ network: 'testnet' }); constructor(private rust: RustService) { if (!getLocalStorage()?.getItem('browserId')) { - getLocalStorage()?.setItem('browserId', Math.floor(Math.random() * 999999999).toString()); + getLocalStorage()?.setItem( + 'browserId', + Math.floor(Math.random() * 999999999).toString(), + ); } } - getAccounts(): Observable[]> { + getAccounts(): Observable< + Pick< + BenchmarksWallet, + 'publicKey' | 'privateKey' | 'minaTokens' | 'nonce' + >[] + > { return this.rust.get('/accounts').pipe( - map(wallets => wallets.map(wallet => { - return ({ - privateKey: WALLETS.find(w => w.publicKey === wallet.public_key)?.privateKey, - publicKey: wallet.public_key, - minaTokens: wallet.balance / ONE_BILLION, - nonce: wallet.nonce, - }); - })), + map(wallets => + wallets.map(wallet => { + return { + privateKey: WALLETS.find(w => w.publicKey === wallet.public_key) + ?.privateKey, + publicKey: wallet.public_key, + minaTokens: wallet.balance / ONE_BILLION, + nonce: wallet.nonce, + }; + }), + ), map(wallets => { return [ - ...wallets.filter(w => WALLETS.map(w => w.publicKey).includes(w.publicKey)), + ...wallets.filter(w => + WALLETS.map(w => w.publicKey).includes(w.publicKey), + ), // ...wallets // .filter(w => { // let foundW = WALLETS.find(wa => wa.publicKey === w.publicKey); @@ -4063,10 +4079,12 @@ export class BenchmarksWalletsService { ); } - sendTransactions(transactions: BenchmarksWalletTransaction[]): Observable> { + sendTransactions(transactions: BenchmarksWalletTransaction[]): Observable< + Partial<{ + transactions: BenchmarksWalletTransaction[]; + error: Error; + }> + > { const signedPayments = transactions.map(transaction => { return this.client.signPayment(transaction, transaction.privateKey); }); @@ -4088,7 +4106,7 @@ export class BenchmarksWalletsService { dateTime: getTimeFromMemo(tx.memo), })), })), - catchError((err) => { + catchError(err => { const error = new Error(err.message); (error as any).data = transactions.map(tx => ({ ...tx, @@ -4100,14 +4118,23 @@ export class BenchmarksWalletsService { } getAllIncludedTransactions(): Observable { - return this.rust.get>('/best-chain-user-commands').pipe( - map(data => this.mapTxPoolResponse(data)), - ); + return this.rust + .get< + Array<[MempoolTransactionResponseKind, SignedCommand | ZkappCommand]> + >('/best-chain-user-commands') + .pipe(map(data => this.mapTxPoolResponse(data))); } - private mapTxPoolResponse(response: Array<[MempoolTransactionResponseKind, SignedCommand | ZkappCommand]>): MempoolTransaction[] { - return response - .map(([kind, command]: [MempoolTransactionResponseKind, SignedCommand | ZkappCommand]) => { + private mapTxPoolResponse( + response: Array< + [MempoolTransactionResponseKind, SignedCommand | ZkappCommand] + >, + ): MempoolTransaction[] { + return response.map( + ([kind, command]: [ + MempoolTransactionResponseKind, + SignedCommand | ZkappCommand, + ]) => { switch (kind) { case MempoolTransactionResponseKind.SignedCommand: const tx = command as SignedCommand; @@ -4120,7 +4147,9 @@ export class BenchmarksWalletsService { memo: removeUnicodeEscapes(memo), transactionData: tx, sentFromStressingTool: memo.includes('S.T.'), - sentByMyBrowser: memo.includes(getLocalStorage()?.getItem('browserId')), + sentByMyBrowser: memo.includes( + getLocalStorage()?.getItem('browserId'), + ), } as MempoolTransaction; case MempoolTransactionResponseKind.ZkappCommand: const zkTx = command as ZkappCommand; @@ -4133,11 +4162,13 @@ export class BenchmarksWalletsService { memo: removeUnicodeEscapes(zkMemo), transactionData: zkTx, sentFromStressingTool: zkMemo.includes('S.T.'), - sentByMyBrowser: zkMemo.includes(getLocalStorage()?.getItem('browserId')), + sentByMyBrowser: zkMemo.includes( + getLocalStorage()?.getItem('browserId'), + ), } as MempoolTransaction; } - - }); + }, + ); } } diff --git a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.state.ts b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.state.ts index e18c9e64a4..bfb2015263 100644 --- a/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.state.ts +++ b/frontend/src/app/features/benchmarks/wallets/benchmarks-wallets.state.ts @@ -6,7 +6,6 @@ import { BenchmarksWalletTransaction } from '@shared/types/benchmarks/wallets/be import { selectBenchmarksWalletsState } from '@benchmarks/benchmarks.state'; import { BenchmarksZkapp } from '@shared/types/benchmarks/transactions/benchmarks-zkapp.type'; - export interface BenchmarksWalletsState { wallets: BenchmarksWallet[]; blockSending: boolean; @@ -23,18 +22,40 @@ export interface BenchmarksWalletsState { sendingFeeZkapps: number; } -const select = (selector: (state: BenchmarksWalletsState) => T): MemoizedSelector => createSelector( - selectBenchmarksWalletsState, - selector, -); +const select = ( + selector: (state: BenchmarksWalletsState) => T, +): MemoizedSelector => + createSelector(selectBenchmarksWalletsState, selector); -export const selectBenchmarksWallets = select((state: BenchmarksWalletsState): BenchmarksWallet[] => state.wallets); -export const selectBenchmarksBlockSending = select((state: BenchmarksWalletsState): boolean => state.blockSending || state.txsToSend.length > 0); -export const selectBenchmarksSentTransactionsStats = select((state: BenchmarksWalletsState): SentTransactionsStats => state.sentTransactions); -export const selectBenchmarksSendingBatch = select((state: BenchmarksWalletsState): number => state.txSendingBatch); -export const selectBenchmarksSendingFee = select((state: BenchmarksWalletsState): number => state.sendingFee); -export const selectBenchmarksSendingAmount = select((state: BenchmarksWalletsState): number => state.sendingAmount); -export const selectBenchmarksRandomWallet = select((state: BenchmarksWalletsState): boolean => state.randomWallet); -export const selectBenchmarksActiveWallet = select((state: BenchmarksWalletsState): BenchmarksWallet => state.activeWallet); -export const selectBenchmarksSendingFeeZkapps = select((state: BenchmarksWalletsState): number => state.sendingFeeZkapps); -export const selectBenchmarksZkappsSendingBatch = select((state: BenchmarksWalletsState): number => state.zkAppsSendingBatch); +export const selectBenchmarksWallets = select( + (state: BenchmarksWalletsState): BenchmarksWallet[] => state.wallets, +); +export const selectBenchmarksBlockSending = select( + (state: BenchmarksWalletsState): boolean => + state.blockSending || state.txsToSend.length > 0, +); +export const selectBenchmarksSentTransactionsStats = select( + (state: BenchmarksWalletsState): SentTransactionsStats => + state.sentTransactions, +); +export const selectBenchmarksSendingBatch = select( + (state: BenchmarksWalletsState): number => state.txSendingBatch, +); +export const selectBenchmarksSendingFee = select( + (state: BenchmarksWalletsState): number => state.sendingFee, +); +export const selectBenchmarksSendingAmount = select( + (state: BenchmarksWalletsState): number => state.sendingAmount, +); +export const selectBenchmarksRandomWallet = select( + (state: BenchmarksWalletsState): boolean => state.randomWallet, +); +export const selectBenchmarksActiveWallet = select( + (state: BenchmarksWalletsState): BenchmarksWallet => state.activeWallet, +); +export const selectBenchmarksSendingFeeZkapps = select( + (state: BenchmarksWalletsState): number => state.sendingFeeZkapps, +); +export const selectBenchmarksZkappsSendingBatch = select( + (state: BenchmarksWalletsState): number => state.zkAppsSendingBatch, +); diff --git a/frontend/src/app/features/block-production/block-production.component.ts b/frontend/src/app/features/block-production/block-production.component.ts index d36825035f..456bcef296 100644 --- a/frontend/src/app/features/block-production/block-production.component.ts +++ b/frontend/src/app/features/block-production/block-production.component.ts @@ -1,11 +1,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ - selector: 'mina-block-production', - templateUrl: './block-production.component.html', - styleUrls: ['./block-production.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false + selector: 'mina-block-production', + templateUrl: './block-production.component.html', + styleUrls: ['./block-production.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: false, }) -export class BlockProductionComponent { -} +export class BlockProductionComponent {} diff --git a/frontend/src/app/features/block-production/block-production.guard.ts b/frontend/src/app/features/block-production/block-production.guard.ts index 4d0dd2ae11..111665f210 100644 --- a/frontend/src/app/features/block-production/block-production.guard.ts +++ b/frontend/src/app/features/block-production/block-production.guard.ts @@ -5,10 +5,15 @@ import { MinaState } from '@app/app.setup'; import { AppSelectors } from '@app/app.state'; import { filter, map } from 'rxjs'; import { Routes } from '@shared/enums/routes.enum'; -import { FeaturesConfig, MinaNode } from '@shared/types/core/environment/mina-env.type'; +import { + FeaturesConfig, + MinaNode, +} from '@shared/types/core/environment/mina-env.type'; import { getFeaturesConfig, getFirstFeature } from '@shared/constants/config'; -export const blockProductionGuard: CanActivateFn = (route: ActivatedRouteSnapshot) => { +export const blockProductionGuard: CanActivateFn = ( + route: ActivatedRouteSnapshot, +) => { const store: Store = inject>(Store); const router: Router = inject(Router); return store.select(AppSelectors.activeNode).pipe( @@ -22,7 +27,10 @@ export const blockProductionGuard: CanActivateFn = (route: ActivatedRouteSnapsho router.navigate([getFirstFeature(node)]); return false; } - router.navigate([Routes.BLOCK_PRODUCTION, getFeaturesConfig(node)['block-production'][0]]); + router.navigate([ + Routes.BLOCK_PRODUCTION, + getFeaturesConfig(node)['block-production'][0], + ]); return false; }), ); diff --git a/frontend/src/app/features/block-production/block-production.module.ts b/frontend/src/app/features/block-production/block-production.module.ts index 171c80a248..1c8489ffff 100644 --- a/frontend/src/app/features/block-production/block-production.module.ts +++ b/frontend/src/app/features/block-production/block-production.module.ts @@ -4,14 +4,8 @@ import { CommonModule } from '@angular/common'; import { BlockProductionRouting } from './block-production.routing'; import { BlockProductionComponent } from './block-production.component'; - @NgModule({ - declarations: [ - BlockProductionComponent, - ], - imports: [ - CommonModule, - BlockProductionRouting, - ], + declarations: [BlockProductionComponent], + imports: [CommonModule, BlockProductionRouting], }) export class BlockProductionModule {} diff --git a/frontend/src/app/features/block-production/block-production.reducer.ts b/frontend/src/app/features/block-production/block-production.reducer.ts index fc6b109ab6..c67b27c567 100644 --- a/frontend/src/app/features/block-production/block-production.reducer.ts +++ b/frontend/src/app/features/block-production/block-production.reducer.ts @@ -6,7 +6,8 @@ import { BLOCK_PRODUCTION_OVERVIEW_KEY } from '@block-production/overview/block- import { blockProductionWonSlotsReducer } from '@block-production/won-slots/block-production-won-slots.reducer'; import { BLOCK_PRODUCTION_WON_SLOTS_KEY } from '@block-production/won-slots/block-production-won-slots.actions'; -export const blockProductionReducer: ActionReducer = combineReducers({ - [BLOCK_PRODUCTION_OVERVIEW_KEY]: blockProductionOverviewReducer, - [BLOCK_PRODUCTION_WON_SLOTS_KEY]: blockProductionWonSlotsReducer, -}); +export const blockProductionReducer: ActionReducer = + combineReducers({ + [BLOCK_PRODUCTION_OVERVIEW_KEY]: blockProductionOverviewReducer, + [BLOCK_PRODUCTION_WON_SLOTS_KEY]: blockProductionWonSlotsReducer, + }); diff --git a/frontend/src/app/features/block-production/block-production.routing.ts b/frontend/src/app/features/block-production/block-production.routing.ts index 295ce9e899..bf96a6673d 100644 --- a/frontend/src/app/features/block-production/block-production.routing.ts +++ b/frontend/src/app/features/block-production/block-production.routing.ts @@ -13,12 +13,18 @@ const routes: Routes = [ { path: 'overview', canActivate: [blockProductionGuard], - loadChildren: () => import('./overview/block-production-overview.module').then(m => m.BlockProductionOverviewModule), + loadChildren: () => + import('./overview/block-production-overview.module').then( + m => m.BlockProductionOverviewModule, + ), }, { path: 'won-slots', canActivate: [blockProductionGuard], - loadChildren: () => import('./won-slots/block-production-won-slots.module').then(m => m.BlockProductionWonSlotsModule), + loadChildren: () => + import('./won-slots/block-production-won-slots.module').then( + m => m.BlockProductionWonSlotsModule, + ), }, { path: '', diff --git a/frontend/src/app/features/block-production/block-production.state.ts b/frontend/src/app/features/block-production/block-production.state.ts index 05bed6afdb..36b0626ba7 100644 --- a/frontend/src/app/features/block-production/block-production.state.ts +++ b/frontend/src/app/features/block-production/block-production.state.ts @@ -1,18 +1,31 @@ import { MinaState } from '@app/app.setup'; -import { createFeatureSelector, createSelector, MemoizedSelector } from '@ngrx/store'; +import { + createFeatureSelector, + createSelector, + MemoizedSelector, +} from '@ngrx/store'; import { BlockProductionOverviewState } from '@block-production/overview/block-production-overview.state'; import { BLOCK_PRODUCTION_OVERVIEW_KEY } from '@block-production/overview/block-production-overview.actions'; import { BLOCK_PRODUCTION_WON_SLOTS_KEY } from '@block-production/won-slots/block-production-won-slots.actions'; import { BlockProductionWonSlotsState } from '@block-production/won-slots/block-production-won-slots.state'; import { BLOCK_PRODUCTION_KEY } from '@block-production/block-production.actions'; -const select = (selector: (state: BlockProductionState) => T): MemoizedSelector => createSelector( - createFeatureSelector(BLOCK_PRODUCTION_KEY), - selector, -); +const select = ( + selector: (state: BlockProductionState) => T, +): MemoizedSelector => + createSelector( + createFeatureSelector(BLOCK_PRODUCTION_KEY), + selector, + ); -const overview = select((state: BlockProductionState): BlockProductionOverviewState => state[BLOCK_PRODUCTION_OVERVIEW_KEY]); -const wonSlots = select((state: BlockProductionState): BlockProductionWonSlotsState => state[BLOCK_PRODUCTION_WON_SLOTS_KEY]); +const overview = select( + (state: BlockProductionState): BlockProductionOverviewState => + state[BLOCK_PRODUCTION_OVERVIEW_KEY], +); +const wonSlots = select( + (state: BlockProductionState): BlockProductionWonSlotsState => + state[BLOCK_PRODUCTION_WON_SLOTS_KEY], +); export const BlockProductionSelectors = { overview, wonSlots, diff --git a/frontend/src/app/features/block-production/overview/block-production-overview.actions.ts b/frontend/src/app/features/block-production/overview/block-production-overview.actions.ts index ee68ae5929..aee770510c 100644 --- a/frontend/src/app/features/block-production/overview/block-production-overview.actions.ts +++ b/frontend/src/app/features/block-production/overview/block-production-overview.actions.ts @@ -1,43 +1,64 @@ -import { - BlockProductionOverviewEpoch, -} from '@shared/types/block-production/overview/block-production-overview-epoch.type'; -import { - BlockProductionOverviewEpochDetails, -} from '@shared/types/block-production/overview/block-production-overview-epoch-details.type'; -import { - BlockProductionOverviewFilters, -} from '@shared/types/block-production/overview/block-production-overview-filters.type'; -import { - BlockProductionOverviewSlot, -} from '@shared/types/block-production/overview/block-production-overview-slot.type'; -import { - BlockProductionOverviewAllStats, -} from '@shared/types/block-production/overview/block-production-overview-all-stats.type'; +import { BlockProductionOverviewEpoch } from '@shared/types/block-production/overview/block-production-overview-epoch.type'; +import { BlockProductionOverviewEpochDetails } from '@shared/types/block-production/overview/block-production-overview-epoch-details.type'; +import { BlockProductionOverviewFilters } from '@shared/types/block-production/overview/block-production-overview-filters.type'; +import { BlockProductionOverviewSlot } from '@shared/types/block-production/overview/block-production-overview-slot.type'; +import { BlockProductionOverviewAllStats } from '@shared/types/block-production/overview/block-production-overview-all-stats.type'; import { createAction, props } from '@ngrx/store'; import { createType } from '@shared/constants/store-functions'; import { BLOCK_PRODUCTION_PREFIX } from '@block-production/block-production.actions'; export const BLOCK_PRODUCTION_OVERVIEW_KEY = 'overview'; -const type = (type: T) => createType(BLOCK_PRODUCTION_PREFIX, 'Overview', type); +const type = (type: T) => + createType(BLOCK_PRODUCTION_PREFIX, 'Overview', type); const init = createAction(type('Init')); const close = createAction(type('Close')); -const getEpochs = createAction(type('Get Epochs'), props<{ epochNumber: number }>()); -const getEpochsSuccess = createAction(type('Get Epochs Success'), props<{ epochs: BlockProductionOverviewEpoch[] }>()); -const getSlots = createAction(type('Get Slots'), props<{ epochNumber: number }>()); -const getSlotsSuccess = createAction(type('Get Slots Success'), props<{ slots: BlockProductionOverviewSlot[] }>()); -const getEpochDetails = createAction(type('Get Epoch Details'), props<{ epochNumber: number }>()); -const getEpochDetailsSuccess = createAction(type('Get Epoch Details Success'), props<{ - details: BlockProductionOverviewEpochDetails -}>()); +const getEpochs = createAction( + type('Get Epochs'), + props<{ epochNumber: number }>(), +); +const getEpochsSuccess = createAction( + type('Get Epochs Success'), + props<{ epochs: BlockProductionOverviewEpoch[] }>(), +); +const getSlots = createAction( + type('Get Slots'), + props<{ epochNumber: number }>(), +); +const getSlotsSuccess = createAction( + type('Get Slots Success'), + props<{ slots: BlockProductionOverviewSlot[] }>(), +); +const getEpochDetails = createAction( + type('Get Epoch Details'), + props<{ epochNumber: number }>(), +); +const getEpochDetailsSuccess = createAction( + type('Get Epoch Details Success'), + props<{ + details: BlockProductionOverviewEpochDetails; + }>(), +); const getRewardsStats = createAction(type('Get Rewards Stats')); -const getRewardsStatsSuccess = createAction(type('Get Rewards Stats Success'), props<{ - stats: BlockProductionOverviewAllStats -}>()); -const changeFilters = createAction(type('Change Filters'), props<{ filters: BlockProductionOverviewFilters }>()); -const changeScale = createAction(type('Change Scale'), props<{ scale: 'linear' | 'adaptive' }>()); -const setActiveSlot = createAction(type('Set Active Slot'), props<{ slot: number }>()); +const getRewardsStatsSuccess = createAction( + type('Get Rewards Stats Success'), + props<{ + stats: BlockProductionOverviewAllStats; + }>(), +); +const changeFilters = createAction( + type('Change Filters'), + props<{ filters: BlockProductionOverviewFilters }>(), +); +const changeScale = createAction( + type('Change Scale'), + props<{ scale: 'linear' | 'adaptive' }>(), +); +const setActiveSlot = createAction( + type('Set Active Slot'), + props<{ slot: number }>(), +); export const BlockProductionOverviewActions = { init, diff --git a/frontend/src/app/features/block-production/overview/block-production-overview.component.html b/frontend/src/app/features/block-production/overview/block-production-overview.component.html index 9d908d0051..7672465ebc 100644 --- a/frontend/src/app/features/block-production/overview/block-production-overview.component.html +++ b/frontend/src/app/features/block-production/overview/block-production-overview.component.html @@ -2,21 +2,26 @@
-
Calculating Block Producing Rights
+
+ Calculating Block Producing Rights +
- Epoch {{ epoch?.epochNumber }} - Slot {{ epoch?.slots?.length }}/{{ SLOTS_PER_EPOCH }} + Epoch {{ epoch?.epochNumber }} - Slot {{ epoch?.slots?.length }}/{{ + SLOTS_PER_EPOCH + }}
- - + diff --git a/frontend/src/app/features/block-production/overview/block-production-overview.component.ts b/frontend/src/app/features/block-production/overview/block-production-overview.component.ts index 5258953c5a..6ae46f2d82 100644 --- a/frontend/src/app/features/block-production/overview/block-production-overview.component.ts +++ b/frontend/src/app/features/block-production/overview/block-production-overview.component.ts @@ -1,7 +1,18 @@ -import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + OnDestroy, + OnInit, +} from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { BlockProductionOverviewActions } from '@block-production/overview/block-production-overview.actions'; -import { getMergedRoute, isDesktop, MergedRoute, safelyExecuteInBrowser } from '@openmina/shared'; +import { + getMergedRoute, + isDesktop, + MergedRoute, + safelyExecuteInBrowser, +} from '@openmina/shared'; import { debounceTime, filter, fromEvent, take } from 'rxjs'; import { isNaN } from 'mathjs'; import { untilDestroyed } from '@ngneat/until-destroy'; @@ -11,21 +22,25 @@ import { BlockProductionOverviewEpoch } from '@shared/types/block-production/ove import { AppSelectors } from '@app/app.state'; @Component({ - selector: 'mina-block-production-overview', - templateUrl: './block-production-overview.component.html', - styleUrls: ['./block-production-overview.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false + selector: 'mina-block-production-overview', + templateUrl: './block-production-overview.component.html', + styleUrls: ['./block-production-overview.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: false, }) -export class BlockProductionOverviewComponent extends StoreDispatcher implements OnInit, OnDestroy { - +export class BlockProductionOverviewComponent + extends StoreDispatcher + implements OnInit, OnDestroy +{ readonly SLOTS_PER_EPOCH = SLOTS_PER_EPOCH; showSidePanel: boolean = isDesktop(); isLoading: boolean = true; isCalculatingVRF: boolean = false; epoch: BlockProductionOverviewEpoch; - constructor(protected el: ElementRef) { super(); } + constructor(protected el: ElementRef) { + super(); + } ngOnInit(): void { this.listenToLoading(); @@ -41,24 +56,38 @@ export class BlockProductionOverviewComponent extends StoreDispatcher implements } private listenToLoading(): void { - this.select(BlockProductionOverviewSelectors.loading, ({ isLoading, isCalculatingVRF }) => { - this.isLoading = isLoading; - this.isCalculatingVRF = isCalculatingVRF; - this.detect(); - }); - this.select(BlockProductionOverviewSelectors.activeEpoch, (activeEpoch: BlockProductionOverviewEpoch) => { - this.epoch = activeEpoch; - this.detect(); - }); + this.select( + BlockProductionOverviewSelectors.loading, + ({ isLoading, isCalculatingVRF }) => { + this.isLoading = isLoading; + this.isCalculatingVRF = isCalculatingVRF; + this.detect(); + }, + ); + this.select( + BlockProductionOverviewSelectors.activeEpoch, + (activeEpoch: BlockProductionOverviewEpoch) => { + this.epoch = activeEpoch; + this.detect(); + }, + ); } private listenToRoute(): void { - this.select(getMergedRoute, (route: MergedRoute) => { - const epoch = Number(route.params['epoch']); - const slot = Number(route.params['slot']); - this.dispatch2(BlockProductionOverviewActions.setActiveSlot({ slot })); - this.dispatch2(BlockProductionOverviewActions.getEpochDetails({ epochNumber: isNaN(epoch) ? undefined : epoch })); - }, take(1)); + this.select( + getMergedRoute, + (route: MergedRoute) => { + const epoch = Number(route.params['epoch']); + const slot = Number(route.params['slot']); + this.dispatch2(BlockProductionOverviewActions.setActiveSlot({ slot })); + this.dispatch2( + BlockProductionOverviewActions.getEpochDetails({ + epochNumber: isNaN(epoch) ? undefined : epoch, + }), + ); + }, + take(1), + ); } private listenToResize(): void { diff --git a/frontend/src/app/features/block-production/overview/block-production-overview.effects.ts b/frontend/src/app/features/block-production/overview/block-production-overview.effects.ts index c146f4327e..94e544d34f 100644 --- a/frontend/src/app/features/block-production/overview/block-production-overview.effects.ts +++ b/frontend/src/app/features/block-production/overview/block-production-overview.effects.ts @@ -13,93 +13,147 @@ import { BlockProductionOverviewActions, } from '@block-production/overview/block-production-overview.actions'; import { BlockProductionOverviewService } from '@block-production/overview/block-production-overview.service'; -import { - BlockProductionOverviewEpoch, -} from '@shared/types/block-production/overview/block-production-overview-epoch.type'; -import { - BlockProductionOverviewEpochDetails, -} from '@shared/types/block-production/overview/block-production-overview-epoch-details.type'; +import { BlockProductionOverviewEpoch } from '@shared/types/block-production/overview/block-production-overview-epoch.type'; +import { BlockProductionOverviewEpochDetails } from '@shared/types/block-production/overview/block-production-overview-epoch-details.type'; import { Routes } from '@shared/enums/routes.enum'; -import { - BlockProductionOverviewSlot, -} from '@shared/types/block-production/overview/block-production-overview-slot.type'; +import { BlockProductionOverviewSlot } from '@shared/types/block-production/overview/block-production-overview-slot.type'; import { BlockProductionModule } from '@block-production/block-production.module'; @Injectable({ providedIn: BlockProductionModule, }) export class BlockProductionOverviewEffects extends BaseEffect { - readonly getActiveEpochDetails$: Effect; readonly getEpochs$: Effect; readonly getActiveEpochSlots$: Effect; readonly getRewardsStats$: Effect; - constructor(private router: Router, - private actions$: Actions, - private bpOverviewService: BlockProductionOverviewService, - store: Store) { + constructor( + private router: Router, + private actions$: Actions, + private bpOverviewService: BlockProductionOverviewService, + store: Store, + ) { super(store, selectMinaState); - this.getActiveEpochDetails$ = createEffect(() => this.actions$.pipe( - ofType(BlockProductionOverviewActions.getEpochDetails, BlockProductionOverviewActions.close), - this.latestActionState(), - switchMap(({ action, state }) => - action.type === BlockProductionOverviewActions.close.type - ? EMPTY - : this.bpOverviewService.getEpochDetails(action.epochNumber).pipe( - tap(response => { - let routes = [Routes.BLOCK_PRODUCTION, Routes.OVERVIEW, response.epochNumber]; - if (state.blockProduction[BLOCK_PRODUCTION_OVERVIEW_KEY].activeSlotRoute) { - routes = [...routes, state.blockProduction[BLOCK_PRODUCTION_OVERVIEW_KEY].activeSlotRoute]; - } - return this.router.navigate(routes, { queryParamsHandling: 'merge' }); - }), - ), + this.getActiveEpochDetails$ = createEffect(() => + this.actions$.pipe( + ofType( + BlockProductionOverviewActions.getEpochDetails, + BlockProductionOverviewActions.close, + ), + this.latestActionState(), + switchMap(({ action, state }) => + action.type === BlockProductionOverviewActions.close.type + ? EMPTY + : this.bpOverviewService.getEpochDetails(action.epochNumber).pipe( + tap(response => { + let routes = [ + Routes.BLOCK_PRODUCTION, + Routes.OVERVIEW, + response.epochNumber, + ]; + if ( + state.blockProduction[BLOCK_PRODUCTION_OVERVIEW_KEY] + .activeSlotRoute + ) { + routes = [ + ...routes, + state.blockProduction[BLOCK_PRODUCTION_OVERVIEW_KEY] + .activeSlotRoute, + ]; + } + return this.router.navigate(routes, { + queryParamsHandling: 'merge', + }); + }), + ), + ), + switchMap((payload: BlockProductionOverviewEpochDetails) => [ + BlockProductionOverviewActions.getEpochDetailsSuccess({ + details: payload, + }), + BlockProductionOverviewActions.getEpochs({ + epochNumber: payload.epochNumber, + }), + BlockProductionOverviewActions.getSlots({ + epochNumber: payload.epochNumber, + }), + ]), + catchErrorAndRepeat2( + MinaErrorType.GENERIC, + BlockProductionOverviewActions.getEpochDetailsSuccess(undefined), + ), ), - switchMap((payload: BlockProductionOverviewEpochDetails) => [ - BlockProductionOverviewActions.getEpochDetailsSuccess({ details: payload }), - BlockProductionOverviewActions.getEpochs({ epochNumber: payload.epochNumber }), - BlockProductionOverviewActions.getSlots({ epochNumber: payload.epochNumber }), - ]), - catchErrorAndRepeat2(MinaErrorType.GENERIC, BlockProductionOverviewActions.getEpochDetailsSuccess(undefined)), - )); + ); - this.getEpochs$ = createEffect(() => this.actions$.pipe( - ofType(BlockProductionOverviewActions.getEpochs, BlockProductionOverviewActions.close), - this.latestActionState(), - switchMap(({ action }) => - action.type === BlockProductionOverviewActions.close.type - ? EMPTY - : this.bpOverviewService.getEpochs(action.epochNumber), + this.getEpochs$ = createEffect(() => + this.actions$.pipe( + ofType( + BlockProductionOverviewActions.getEpochs, + BlockProductionOverviewActions.close, + ), + this.latestActionState(), + switchMap(({ action }) => + action.type === BlockProductionOverviewActions.close.type + ? EMPTY + : this.bpOverviewService.getEpochs(action.epochNumber), + ), + map((epochs: BlockProductionOverviewEpoch[]) => + BlockProductionOverviewActions.getEpochsSuccess({ epochs }), + ), + catchErrorAndRepeat2( + MinaErrorType.GENERIC, + BlockProductionOverviewActions.getEpochsSuccess({ epochs: [] }), + ), ), - map((epochs: BlockProductionOverviewEpoch[]) => BlockProductionOverviewActions.getEpochsSuccess({ epochs })), - catchErrorAndRepeat2(MinaErrorType.GENERIC, BlockProductionOverviewActions.getEpochsSuccess({ epochs: [] })), - )); + ); - this.getActiveEpochSlots$ = createEffect(() => this.actions$.pipe( - ofType(BlockProductionOverviewActions.getSlots, BlockProductionOverviewActions.close), - this.latestActionState(), - switchMap(({ state, action }) => - action.type === BlockProductionOverviewActions.close.type - ? EMPTY - : this.bpOverviewService.getSlots(state.blockProduction.overview.activeEpochNumber).pipe( - map((slots: BlockProductionOverviewSlot[]) => BlockProductionOverviewActions.getSlotsSuccess({ slots })), - ), + this.getActiveEpochSlots$ = createEffect(() => + this.actions$.pipe( + ofType( + BlockProductionOverviewActions.getSlots, + BlockProductionOverviewActions.close, + ), + this.latestActionState(), + switchMap(({ state, action }) => + action.type === BlockProductionOverviewActions.close.type + ? EMPTY + : this.bpOverviewService + .getSlots(state.blockProduction.overview.activeEpochNumber) + .pipe( + map((slots: BlockProductionOverviewSlot[]) => + BlockProductionOverviewActions.getSlotsSuccess({ slots }), + ), + ), + ), + catchErrorAndRepeat2( + MinaErrorType.GENERIC, + BlockProductionOverviewActions.getSlotsSuccess({ slots: [] }), + ), ), - catchErrorAndRepeat2(MinaErrorType.GENERIC, BlockProductionOverviewActions.getSlotsSuccess({ slots: [] })), - )); + ); - this.getRewardsStats$ = createEffect(() => this.actions$.pipe( - ofType(BlockProductionOverviewActions.getRewardsStats, BlockProductionOverviewActions.close), - this.latestActionState(), - switchMap(({ action }) => - action.type === BlockProductionOverviewActions.close.type - ? EMPTY - : this.bpOverviewService.getRewardsAllTimeStats(), + this.getRewardsStats$ = createEffect(() => + this.actions$.pipe( + ofType( + BlockProductionOverviewActions.getRewardsStats, + BlockProductionOverviewActions.close, + ), + this.latestActionState(), + switchMap(({ action }) => + action.type === BlockProductionOverviewActions.close.type + ? EMPTY + : this.bpOverviewService.getRewardsAllTimeStats(), + ), + map(stats => + BlockProductionOverviewActions.getRewardsStatsSuccess({ stats }), + ), + catchErrorAndRepeat2( + MinaErrorType.GENERIC, + BlockProductionOverviewActions.getRewardsStatsSuccess(undefined), + ), ), - map(stats => BlockProductionOverviewActions.getRewardsStatsSuccess({ stats })), - catchErrorAndRepeat2(MinaErrorType.GENERIC, BlockProductionOverviewActions.getRewardsStatsSuccess(undefined)), - )); + ); } } diff --git a/frontend/src/app/features/block-production/overview/block-production-overview.module.ts b/frontend/src/app/features/block-production/overview/block-production-overview.module.ts index 606e28fb50..6bf47624ad 100644 --- a/frontend/src/app/features/block-production/overview/block-production-overview.module.ts +++ b/frontend/src/app/features/block-production/overview/block-production-overview.module.ts @@ -9,25 +9,15 @@ import { MinaJsonViewerComponent, } from '@openmina/shared'; import { SharedModule } from '@shared/shared.module'; -import { - BlockProductionOverviewSlotsComponent, -} from '@block-production/overview/slots/block-production-overview-slots.component'; -import { - BlockProductionOverviewToolbarComponent, -} from '@block-production/overview/toolbar/block-production-overview-toolbar.component'; -import { - BlockProductionOverviewSidePanelComponent, -} from '@block-production/overview/side-panel/block-production-overview-side-panel.component'; +import { BlockProductionOverviewSlotsComponent } from '@block-production/overview/slots/block-production-overview-slots.component'; +import { BlockProductionOverviewToolbarComponent } from '@block-production/overview/toolbar/block-production-overview-toolbar.component'; +import { BlockProductionOverviewSidePanelComponent } from '@block-production/overview/side-panel/block-production-overview-side-panel.component'; import { PaginationComponent } from '@shared/pagination/pagination.component'; import { EffectsModule } from '@ngrx/effects'; import { BlockProductionOverviewEffects } from '@block-production/overview/block-production-overview.effects'; -import { - BlockProductionOverviewEpochGraphsComponent, -} from '@block-production/overview/epoch-graphs/block-production-overview-epoch-graphs.component'; +import { BlockProductionOverviewEpochGraphsComponent } from '@block-production/overview/epoch-graphs/block-production-overview-epoch-graphs.component'; import { LoadingSpinnerComponent } from '@shared/loading-spinner/loading-spinner.component'; -import { - BlockProductionOverviewSlotDetailsComponent, -} from '@block-production/overview/slot-details/block-production-overview-slot-details.component'; +import { BlockProductionOverviewSlotDetailsComponent } from '@block-production/overview/slot-details/block-production-overview-slot-details.component'; @NgModule({ declarations: [ diff --git a/frontend/src/app/features/block-production/overview/block-production-overview.reducer.ts b/frontend/src/app/features/block-production/overview/block-production-overview.reducer.ts index 60c64909ba..69704fd3f8 100644 --- a/frontend/src/app/features/block-production/overview/block-production-overview.reducer.ts +++ b/frontend/src/app/features/block-production/overview/block-production-overview.reducer.ts @@ -31,18 +31,24 @@ export const blockProductionOverviewReducer = createReducer( ...epochs.find(e => e.epochNumber === state.activeEpochNumber), }, })), - on(BlockProductionOverviewActions.getEpochDetails, (state, { epochNumber }) => ({ - ...state, - activeEpochNumber: epochNumber, - })), - on(BlockProductionOverviewActions.getEpochDetailsSuccess, (state, { details }) => ({ - ...state, - activeEpoch: { - ...state.activeEpoch, - details, - }, - activeEpochNumber: state.activeEpochNumber || details?.epochNumber, - })), + on( + BlockProductionOverviewActions.getEpochDetails, + (state, { epochNumber }) => ({ + ...state, + activeEpochNumber: epochNumber, + }), + ), + on( + BlockProductionOverviewActions.getEpochDetailsSuccess, + (state, { details }) => ({ + ...state, + activeEpoch: { + ...state.activeEpoch, + details, + }, + activeEpochNumber: state.activeEpochNumber || details?.epochNumber, + }), + ), on(BlockProductionOverviewActions.getSlotsSuccess, (state, { slots }) => ({ ...state, activeEpoch: { @@ -57,10 +63,13 @@ export const blockProductionOverviewReducer = createReducer( ...state, filters, })), - on(BlockProductionOverviewActions.getRewardsStatsSuccess, (state, { stats }) => ({ - ...state, - allTimeStats: stats, - })), + on( + BlockProductionOverviewActions.getRewardsStatsSuccess, + (state, { stats }) => ({ + ...state, + allTimeStats: stats, + }), + ), on(BlockProductionOverviewActions.changeScale, (state, { scale }) => ({ ...state, scale, diff --git a/frontend/src/app/features/block-production/overview/block-production-overview.routing.ts b/frontend/src/app/features/block-production/overview/block-production-overview.routing.ts index 8c5d8364c2..a381f192b5 100644 --- a/frontend/src/app/features/block-production/overview/block-production-overview.routing.ts +++ b/frontend/src/app/features/block-production/overview/block-production-overview.routing.ts @@ -1,8 +1,6 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { - BlockProductionOverviewComponent, -} from '@app/features/block-production/overview/block-production-overview.component'; +import { BlockProductionOverviewComponent } from '@app/features/block-production/overview/block-production-overview.component'; import { BLOCK_PRODUCTION_TITLE } from '@app/app.routing'; const routes: Routes = [ diff --git a/frontend/src/app/features/block-production/overview/block-production-overview.service.ts b/frontend/src/app/features/block-production/overview/block-production-overview.service.ts index 5736184e10..21e0c0cc52 100644 --- a/frontend/src/app/features/block-production/overview/block-production-overview.service.ts +++ b/frontend/src/app/features/block-production/overview/block-production-overview.service.ts @@ -1,86 +1,95 @@ import { Injectable } from '@angular/core'; import { BlockProductionModule } from '@app/features/block-production/block-production.module'; import { delay, forkJoin, map, Observable } from 'rxjs'; -import { - BlockProductionOverviewEpoch, -} from '@shared/types/block-production/overview/block-production-overview-epoch.type'; -import { - BlockProductionOverviewEpochDetails, -} from '@shared/types/block-production/overview/block-production-overview-epoch-details.type'; +import { BlockProductionOverviewEpoch } from '@shared/types/block-production/overview/block-production-overview-epoch.type'; +import { BlockProductionOverviewEpochDetails } from '@shared/types/block-production/overview/block-production-overview-epoch-details.type'; import { hasValue, ONE_BILLION } from '@openmina/shared'; import { RustService } from '@core/services/rust.service'; -import { - BlockProductionOverviewSlot, -} from '@shared/types/block-production/overview/block-production-overview-slot.type'; -import { - BlockProductionOverviewAllStats, -} from '@shared/types/block-production/overview/block-production-overview-all-stats.type'; - +import { BlockProductionOverviewSlot } from '@shared/types/block-production/overview/block-production-overview-slot.type'; +import { BlockProductionOverviewAllStats } from '@shared/types/block-production/overview/block-production-overview-all-stats.type'; @Injectable({ providedIn: BlockProductionModule, }) export class BlockProductionOverviewService { + constructor(private rust: RustService) {} - constructor(private rust: RustService) { } - - getEpochDetails(epochNumber?: number): Observable { - return this.rust.get(`/epoch/summary/${epochNumber ?? 'latest'}`).pipe( - map((response: BlockProductionEpochPaginationResponse | BlockProductionEpochPaginationResponse[]) => { - if (Array.isArray(response)) { - response = response[0]; - } - if (!response.summary) { - return { - epochNumber: response.epoch_number, - totalSlots: 0, - wonSlots: 0, - canonical: 0, - orphaned: 0, - missed: 0, - futureRights: 0, - slotStart: 0, - slotEnd: 0, - expectedRewards: null, - earnedRewards: null, - balanceDelegated: null, - balanceProducer: null, - balanceStaked: null, - }; - } - return { - epochNumber: response.epoch_number, - totalSlots: response.summary.canonical + response.summary.orphaned + response.summary.missed + response.summary.future_rights, - wonSlots: response.summary.won_slots, - canonical: response.summary.canonical, - orphaned: response.summary.orphaned, - missed: response.summary.missed, - futureRights: response.summary.future_rights, - slotStart: response.summary.slot_start, - slotEnd: response.summary.slot_end, - expectedRewards: new Intl.NumberFormat('en-US', { - maximumFractionDigits: 2, - useGrouping: false, - }).format(Number(response.summary.expected_rewards) / ONE_BILLION), - earnedRewards: new Intl.NumberFormat('en-US', { - maximumFractionDigits: 2, - useGrouping: false, - }).format(Number(response.summary.earned_rewards) / ONE_BILLION), - balanceDelegated: new Intl.NumberFormat('en-US', { - maximumFractionDigits: 2, - useGrouping: false, - }).format(Number(response.balance_delegated) / ONE_BILLION), - balanceProducer: new Intl.NumberFormat('en-US', { - maximumFractionDigits: 2, - useGrouping: false, - }).format(Number(response.balance_producer) / ONE_BILLION), - balanceStaked: new Intl.NumberFormat('en-US', { - maximumFractionDigits: 2, - useGrouping: false, - }).format(Number(response.balance_staked) / ONE_BILLION), - }; - }), - ); + getEpochDetails( + epochNumber?: number, + ): Observable { + return this.rust + .get< + | BlockProductionEpochPaginationResponse + | BlockProductionEpochPaginationResponse[] + >(`/epoch/summary/${epochNumber ?? 'latest'}`) + .pipe( + map( + ( + response: + | BlockProductionEpochPaginationResponse + | BlockProductionEpochPaginationResponse[], + ) => { + if (Array.isArray(response)) { + response = response[0]; + } + if (!response.summary) { + return { + epochNumber: response.epoch_number, + totalSlots: 0, + wonSlots: 0, + canonical: 0, + orphaned: 0, + missed: 0, + futureRights: 0, + slotStart: 0, + slotEnd: 0, + expectedRewards: null, + earnedRewards: null, + balanceDelegated: null, + balanceProducer: null, + balanceStaked: null, + }; + } + return { + epochNumber: response.epoch_number, + totalSlots: + response.summary.canonical + + response.summary.orphaned + + response.summary.missed + + response.summary.future_rights, + wonSlots: response.summary.won_slots, + canonical: response.summary.canonical, + orphaned: response.summary.orphaned, + missed: response.summary.missed, + futureRights: response.summary.future_rights, + slotStart: response.summary.slot_start, + slotEnd: response.summary.slot_end, + expectedRewards: new Intl.NumberFormat('en-US', { + maximumFractionDigits: 2, + useGrouping: false, + }).format( + Number(response.summary.expected_rewards) / ONE_BILLION, + ), + earnedRewards: new Intl.NumberFormat('en-US', { + maximumFractionDigits: 2, + useGrouping: false, + }).format(Number(response.summary.earned_rewards) / ONE_BILLION), + balanceDelegated: new Intl.NumberFormat('en-US', { + maximumFractionDigits: 2, + useGrouping: false, + }).format(Number(response.balance_delegated) / ONE_BILLION), + balanceProducer: new Intl.NumberFormat('en-US', { + maximumFractionDigits: 2, + useGrouping: false, + }).format(Number(response.balance_producer) / ONE_BILLION), + balanceStaked: new Intl.NumberFormat('en-US', { + maximumFractionDigits: 2, + useGrouping: false, + }).format(Number(response.balance_staked) / ONE_BILLION), + }; + }, + ), + ); } getSlots(epochNumber?: number): Observable { @@ -89,26 +98,39 @@ export class BlockProductionOverviewService { this.rust.get(`/node/current_slot`), ]).pipe( map(([response, currentSlot]: [SlotResponse[], CurrentSlotResponse]) => { - const activeSlotIndex = response.findIndex(slot => slot.global_slot === currentSlot.global_slot); - return response.map((slot: SlotResponse, i: number) => ({ - slot: slot.slot, - globalSlot: slot.global_slot, - height: slot.height, - time: slot.timestamp, - finished: i < activeSlotIndex && slot.block_status !== BlockStatus.Empty, - canonical: slot.block_status === BlockStatus.Canonical || slot.block_status === BlockStatus.CanonicalPending, - orphaned: slot.block_status === BlockStatus.Orphaned || slot.block_status === BlockStatus.OrphanedPending, - missed: slot.block_status === BlockStatus.Missed, - futureRights: slot.block_status === BlockStatus.ToBeProduced, - status: slot.block_status, - active: activeSlotIndex === i, - hash: slot.state_hash, - } as BlockProductionOverviewSlot)); + const activeSlotIndex = response.findIndex( + slot => slot.global_slot === currentSlot.global_slot, + ); + return response.map( + (slot: SlotResponse, i: number) => + ({ + slot: slot.slot, + globalSlot: slot.global_slot, + height: slot.height, + time: slot.timestamp, + finished: + i < activeSlotIndex && slot.block_status !== BlockStatus.Empty, + canonical: + slot.block_status === BlockStatus.Canonical || + slot.block_status === BlockStatus.CanonicalPending, + orphaned: + slot.block_status === BlockStatus.Orphaned || + slot.block_status === BlockStatus.OrphanedPending, + missed: slot.block_status === BlockStatus.Missed, + futureRights: slot.block_status === BlockStatus.ToBeProduced, + status: slot.block_status, + active: activeSlotIndex === i, + hash: slot.state_hash, + }) as BlockProductionOverviewSlot, + ); }), ); } - getEpochs(epochNumber?: number, limit: number = 5): Observable { + getEpochs( + epochNumber?: number, + limit: number = 5, + ): Observable { if (hasValue(epochNumber)) { epochNumber = epochNumber + 3; epochNumber = Math.max(epochNumber, 6); @@ -116,24 +138,31 @@ export class BlockProductionOverviewService { } else { limit = limit + 2; } - return this.rust.get(`/epoch/summary/${epochNumber}?limit=${limit}`).pipe( - map((response: BlockProductionEpochPaginationResponse[]) => - response.reverse().map((epoch: BlockProductionEpochPaginationResponse) => ({ - epochNumber: epoch.epoch_number, - isLastEpoch: epoch.sub_windows.some(w => w.future_rights > 0), - finishedWindows: epoch.sub_windows.findIndex(w => w.is_current) + 1, - windows: epoch.sub_windows.map(w => ({ - start: w.slot_start, - end: w.slot_end, - canonical: w.canonical, - orphaned: w.orphaned, - missed: w.missed, - futureRights: w.future_rights, - interval: [w.slot_start, w.slot_end], - })), - })), - ), - ); + return this.rust + .get< + BlockProductionEpochPaginationResponse[] + >(`/epoch/summary/${epochNumber}?limit=${limit}`) + .pipe( + map((response: BlockProductionEpochPaginationResponse[]) => + response + .reverse() + .map((epoch: BlockProductionEpochPaginationResponse) => ({ + epochNumber: epoch.epoch_number, + isLastEpoch: epoch.sub_windows.some(w => w.future_rights > 0), + finishedWindows: + epoch.sub_windows.findIndex(w => w.is_current) + 1, + windows: epoch.sub_windows.map(w => ({ + start: w.slot_start, + end: w.slot_end, + canonical: w.canonical, + orphaned: w.orphaned, + missed: w.missed, + futureRights: w.future_rights, + interval: [w.slot_start, w.slot_end], + })), + })), + ), + ); } getRewardsAllTimeStats(): Observable { @@ -144,7 +173,11 @@ export class BlockProductionOverviewService { orphaned: response.orphaned, missed: response.missed, futureRights: response.future_rights, - totalSlots: response.canonical + response.orphaned + response.missed + response.future_rights, + totalSlots: + response.canonical + + response.orphaned + + response.missed + + response.future_rights, expectedRewards: new Intl.NumberFormat('en-US', { maximumFractionDigits: 2, useGrouping: false, diff --git a/frontend/src/app/features/block-production/overview/block-production-overview.state.ts b/frontend/src/app/features/block-production/overview/block-production-overview.state.ts index dceae6d3f1..65945f0c3e 100644 --- a/frontend/src/app/features/block-production/overview/block-production-overview.state.ts +++ b/frontend/src/app/features/block-production/overview/block-production-overview.state.ts @@ -1,18 +1,10 @@ import { createSelector, MemoizedSelector } from '@ngrx/store'; import { MinaState } from '@app/app.setup'; -import { - BlockProductionOverviewEpoch, -} from '@shared/types/block-production/overview/block-production-overview-epoch.type'; +import { BlockProductionOverviewEpoch } from '@shared/types/block-production/overview/block-production-overview-epoch.type'; import { BlockProductionSelectors } from '@block-production/block-production.state'; -import { - BlockProductionOverviewFilters, -} from '@shared/types/block-production/overview/block-production-overview-filters.type'; -import { - BlockProductionOverviewAllStats, -} from '@shared/types/block-production/overview/block-production-overview-all-stats.type'; -import { - BlockProductionOverviewSlot, -} from '@shared/types/block-production/overview/block-production-overview-slot.type'; +import { BlockProductionOverviewFilters } from '@shared/types/block-production/overview/block-production-overview-filters.type'; +import { BlockProductionOverviewAllStats } from '@shared/types/block-production/overview/block-production-overview-all-stats.type'; +import { BlockProductionOverviewSlot } from '@shared/types/block-production/overview/block-production-overview-slot.type'; export interface BlockProductionOverviewState { epochs: BlockProductionOverviewEpoch[]; @@ -27,22 +19,39 @@ export interface BlockProductionOverviewState { isCalculatingVRF: boolean; } +const select = ( + selector: (state: BlockProductionOverviewState) => T, +): MemoizedSelector => + createSelector(BlockProductionSelectors.overview, selector); -const select = (selector: (state: BlockProductionOverviewState) => T): MemoizedSelector => createSelector( - BlockProductionSelectors.overview, - selector, +const epochs = select( + (state: BlockProductionOverviewState): BlockProductionOverviewEpoch[] => + state.epochs, +); +const activeEpoch = select( + (state: BlockProductionOverviewState): BlockProductionOverviewEpoch => + state.activeEpoch, +); +const allTimeStats = select( + (state: BlockProductionOverviewState): BlockProductionOverviewAllStats => + state.allTimeStats, +); +const filters = select( + (state: BlockProductionOverviewState): BlockProductionOverviewFilters => + state.filters, +); +const scale = select( + (state: BlockProductionOverviewState): 'linear' | 'adaptive' => state.scale, ); - -const epochs = select((state: BlockProductionOverviewState): BlockProductionOverviewEpoch[] => state.epochs); -const activeEpoch = select((state: BlockProductionOverviewState): BlockProductionOverviewEpoch => state.activeEpoch); -const allTimeStats = select((state: BlockProductionOverviewState): BlockProductionOverviewAllStats => state.allTimeStats); -const filters = select((state: BlockProductionOverviewState): BlockProductionOverviewFilters => state.filters); -const scale = select((state: BlockProductionOverviewState): 'linear' | 'adaptive' => state.scale); const loading = select((state: BlockProductionOverviewState) => ({ isLoading: state.isLoading, isCalculatingVRF: state.isCalculatingVRF, })); -const activeSlot = select((state: BlockProductionOverviewState): BlockProductionOverviewSlot | undefined => state.activeSlot); +const activeSlot = select( + ( + state: BlockProductionOverviewState, + ): BlockProductionOverviewSlot | undefined => state.activeSlot, +); export const BlockProductionOverviewSelectors = { epochs, diff --git a/frontend/src/app/features/block-production/overview/epoch-graphs/block-production-overview-epoch-graphs.component.html b/frontend/src/app/features/block-production/overview/epoch-graphs/block-production-overview-epoch-graphs.component.html index 744c97c163..ee2974f6cb 100644 --- a/frontend/src/app/features/block-production/overview/epoch-graphs/block-production-overview-epoch-graphs.component.html +++ b/frontend/src/app/features/block-production/overview/epoch-graphs/block-production-overview-epoch-graphs.component.html @@ -1,41 +1,97 @@ -
+
- Epoch {{ epoch.epochNumber }} + Epoch + {{ epoch.epochNumber }}
+ *ngFor="let w of epoch.windows; let i = index" + >
-
-
-
+
+
+
-
+
diff --git a/frontend/src/app/features/block-production/overview/epoch-graphs/block-production-overview-epoch-graphs.component.ts b/frontend/src/app/features/block-production/overview/epoch-graphs/block-production-overview-epoch-graphs.component.ts index d820aae94b..8c1719d7bc 100644 --- a/frontend/src/app/features/block-production/overview/epoch-graphs/block-production-overview-epoch-graphs.component.ts +++ b/frontend/src/app/features/block-production/overview/epoch-graphs/block-production-overview-epoch-graphs.component.ts @@ -1,21 +1,21 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { BlockProductionOverviewSelectors } from '@block-production/overview/block-production-overview.state'; -import { - BlockProductionOverviewEpoch, -} from '@shared/types/block-production/overview/block-production-overview-epoch.type'; +import { BlockProductionOverviewEpoch } from '@shared/types/block-production/overview/block-production-overview-epoch.type'; import { filter } from 'rxjs'; @Component({ - selector: 'mina-block-production-overview-epoch-graphs', - templateUrl: './block-production-overview-epoch-graphs.component.html', - styleUrls: ['./block-production-overview-epoch-graphs.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-row pl-12 mr-16' }, - standalone: false + selector: 'mina-block-production-overview-epoch-graphs', + templateUrl: './block-production-overview-epoch-graphs.component.html', + styleUrls: ['./block-production-overview-epoch-graphs.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-row pl-12 mr-16' }, + standalone: false, }) -export class BlockProductionOverviewEpochGraphsComponent extends StoreDispatcher implements OnInit { - +export class BlockProductionOverviewEpochGraphsComponent + extends StoreDispatcher + implements OnInit +{ epochs: BlockProductionOverviewEpoch[] = []; activeEpoch: BlockProductionOverviewEpoch; private max: number; @@ -27,34 +27,51 @@ export class BlockProductionOverviewEpochGraphsComponent extends StoreDispatcher } private listenToScale(): void { - this.select(BlockProductionOverviewSelectors.scale, (scale: 'linear' | 'adaptive') => { - this.scale = scale; - this.detect(); - }); + this.select( + BlockProductionOverviewSelectors.scale, + (scale: 'linear' | 'adaptive') => { + this.scale = scale; + this.detect(); + }, + ); } private listenToEpochs(): void { - this.select(BlockProductionOverviewSelectors.epochs, (epochs: BlockProductionOverviewEpoch[]) => { - this.epochs = epochs; - this.max = Math.max(...this.epochs.map(e => { - return Math.max( - ...e.windows.map(w => { - return Math.max(w.canonical, w.orphaned, w.missed, w.futureRights); + this.select( + BlockProductionOverviewSelectors.epochs, + (epochs: BlockProductionOverviewEpoch[]) => { + this.epochs = epochs; + this.max = Math.max( + ...this.epochs.map(e => { + return Math.max( + ...e.windows.map(w => { + return Math.max( + w.canonical, + w.orphaned, + w.missed, + w.futureRights, + ); + }), + ); }), ); - })); - this.detect(); - }, filter(epochs => epochs.length > 0)); + this.detect(); + }, + filter(epochs => epochs.length > 0), + ); - this.select(BlockProductionOverviewSelectors.activeEpoch, (activeEpoch: BlockProductionOverviewEpoch) => { - this.activeEpoch = activeEpoch; - this.detect(); - }); + this.select( + BlockProductionOverviewSelectors.activeEpoch, + (activeEpoch: BlockProductionOverviewEpoch) => { + this.activeEpoch = activeEpoch; + this.detect(); + }, + ); } getHeight(data: number): number { if (this.scale === 'linear') { - return data * 100 / 238; + return (data * 100) / 238; } const base = Math.ceil(Math.log10(this.max)); diff --git a/frontend/src/app/features/block-production/overview/side-panel/block-production-overview-side-panel.component.html b/frontend/src/app/features/block-production/overview/side-panel/block-production-overview-side-panel.component.html index 61312aeb0d..88168f0686 100644 --- a/frontend/src/app/features/block-production/overview/side-panel/block-production-overview-side-panel.component.html +++ b/frontend/src/app/features/block-production/overview/side-panel/block-production-overview-side-panel.component.html @@ -1,12 +1,16 @@
-
+
-
+
@@ -17,21 +21,33 @@
- -
- - - - + +
@@ -40,21 +56,25 @@
Blocks
-
-
-
-
+
+
+
+
- circle + + circle + Canonical
{{ d.canonical }}
- circle + + circle + Orphaned
{{ d.orphaned }} @@ -78,13 +98,15 @@
Expected
- {{ d.expectedRewards }} Mina + {{ d.expectedRewards }} + Mina
Earned
- {{ d.earnedRewards }} Mina + {{ d.earnedRewards }} + Mina
@@ -92,19 +114,22 @@
Producer
- {{ extras.balanceProducer }} Mina + {{ extras.balanceProducer }} + Mina
Delegated
- {{ extras.balanceDelegated }} Mina + {{ extras.balanceDelegated }} + Mina
Staked
- {{ extras.balanceStaked }} Mina + {{ extras.balanceStaked }} + Mina
Epoch
@@ -127,15 +152,22 @@
- arrow_back + + arrow_back
{{ activeSlotStatus }}
-
+
- + diff --git a/frontend/src/app/features/block-production/overview/side-panel/block-production-overview-side-panel.component.scss b/frontend/src/app/features/block-production/overview/side-panel/block-production-overview-side-panel.component.scss index 49d40004fd..ba2ba994cd 100644 --- a/frontend/src/app/features/block-production/overview/side-panel/block-production-overview-side-panel.component.scss +++ b/frontend/src/app/features/block-production/overview/side-panel/block-production-overview-side-panel.component.scss @@ -5,12 +5,17 @@ &.active { left: 0; opacity: 1; - transition: left 300ms cubic-bezier(0.25, 1, 0.5, 1), opacity 200ms linear; + transition: + left 300ms cubic-bezier(0.25, 1, 0.5, 1), + opacity 200ms linear; } - &.after, &.before { + &.after, + &.before { opacity: 0; - transition: left 300ms cubic-bezier(0.5, 0, 0.75, 0), opacity 200ms linear; + transition: + left 300ms cubic-bezier(0.5, 0, 0.75, 0), + opacity 200ms linear; } &.before { diff --git a/frontend/src/app/features/block-production/overview/side-panel/block-production-overview-side-panel.component.ts b/frontend/src/app/features/block-production/overview/side-panel/block-production-overview-side-panel.component.ts index 3f1929642b..b005bc4651 100644 --- a/frontend/src/app/features/block-production/overview/side-panel/block-production-overview-side-panel.component.ts +++ b/frontend/src/app/features/block-production/overview/side-panel/block-production-overview-side-panel.component.ts @@ -1,33 +1,27 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { BlockProductionOverviewSelectors } from '@block-production/overview/block-production-overview.state'; -import { - BlockProductionOverviewEpoch, -} from '@shared/types/block-production/overview/block-production-overview-epoch.type'; +import { BlockProductionOverviewEpoch } from '@shared/types/block-production/overview/block-production-overview-epoch.type'; import { filter } from 'rxjs'; import { noMillisFormat, ONE_THOUSAND, toReadableDate } from '@openmina/shared'; -import { - BlockProductionOverviewAllStats, -} from '@shared/types/block-production/overview/block-production-overview-all-stats.type'; +import { BlockProductionOverviewAllStats } from '@shared/types/block-production/overview/block-production-overview-all-stats.type'; import { BlockProductionOverviewActions } from '@block-production/overview/block-production-overview.actions'; -import { - BlockProductionOverviewSlot, -} from '@shared/types/block-production/overview/block-production-overview-slot.type'; +import { BlockProductionOverviewSlot } from '@shared/types/block-production/overview/block-production-overview-slot.type'; import { Routes } from '@shared/enums/routes.enum'; import { Router } from '@angular/router'; -import { - BlockProductionOverviewSlotsComponent, -} from '@block-production/overview/slots/block-production-overview-slots.component'; +import { BlockProductionOverviewSlotsComponent } from '@block-production/overview/slots/block-production-overview-slots.component'; @Component({ - selector: 'mina-block-production-overview-side-panel', - templateUrl: './block-production-overview-side-panel.component.html', - styleUrls: ['./block-production-overview-side-panel.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false + selector: 'mina-block-production-overview-side-panel', + templateUrl: './block-production-overview-side-panel.component.html', + styleUrls: ['./block-production-overview-side-panel.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: false, }) -export class BlockProductionOverviewSidePanelComponent extends StoreDispatcher implements OnInit { - +export class BlockProductionOverviewSidePanelComponent + extends StoreDispatcher + implements OnInit +{ activeScreen: number = 0; activeTab: number = 1; activeEpoch: BlockProductionOverviewEpoch; @@ -55,7 +49,9 @@ export class BlockProductionOverviewSidePanelComponent extends StoreDispatcher i }; allTimeStats: BlockProductionOverviewAllStats; - constructor(private router: Router) {super();} + constructor(private router: Router) { + super(); + } ngOnInit(): void { this.listenToActiveEpoch(); @@ -64,39 +60,63 @@ export class BlockProductionOverviewSidePanelComponent extends StoreDispatcher i } private listenToActiveEpoch(): void { - this.select(BlockProductionOverviewSelectors.activeEpoch, (epoch: BlockProductionOverviewEpoch) => { - this.activeEpoch = epoch; + this.select( + BlockProductionOverviewSelectors.activeEpoch, + (epoch: BlockProductionOverviewEpoch) => { + this.activeEpoch = epoch; - this.singleEpochStats = { - totalSlots: epoch.details.totalSlots, - wonSlots: epoch.details.wonSlots, - canonical: epoch.details.canonical, - orphaned: epoch.details.orphaned, - missed: epoch.details.missed, - futureRights: epoch.details.futureRights, - earnedRewards: epoch.details.earnedRewards, - expectedRewards: epoch.details.expectedRewards, - }; + this.singleEpochStats = { + totalSlots: epoch.details.totalSlots, + wonSlots: epoch.details.wonSlots, + canonical: epoch.details.canonical, + orphaned: epoch.details.orphaned, + missed: epoch.details.missed, + futureRights: epoch.details.futureRights, + earnedRewards: epoch.details.earnedRewards, + expectedRewards: epoch.details.expectedRewards, + }; - const startSlot = epoch.slots.find(slot => slot.globalSlot === epoch.details.slotStart); - const endSlot = epoch.slots.find(slot => slot.globalSlot === epoch.details.slotEnd); - this.extras = { - balanceProducer: epoch.details.balanceProducer, - balanceDelegated: epoch.details.balanceDelegated, - balanceStaked: epoch.details.balanceStaked, - epochStarted: startSlot ? toReadableDate(startSlot.time * ONE_THOUSAND, noMillisFormat) : '-', - epochEnds: endSlot ? toReadableDate(endSlot.time * ONE_THOUSAND, noMillisFormat) : '-', - slotsUsed: Math.round((epoch.details.canonical + epoch.details.orphaned + epoch.details.missed) / epoch.details.totalSlots * 100) + '%', - }; - this.detect(); - }, filter(Boolean), filter(epoch => epoch.slots?.length > 0 && !!epoch.details)); + const startSlot = epoch.slots.find( + slot => slot.globalSlot === epoch.details.slotStart, + ); + const endSlot = epoch.slots.find( + slot => slot.globalSlot === epoch.details.slotEnd, + ); + this.extras = { + balanceProducer: epoch.details.balanceProducer, + balanceDelegated: epoch.details.balanceDelegated, + balanceStaked: epoch.details.balanceStaked, + epochStarted: startSlot + ? toReadableDate(startSlot.time * ONE_THOUSAND, noMillisFormat) + : '-', + epochEnds: endSlot + ? toReadableDate(endSlot.time * ONE_THOUSAND, noMillisFormat) + : '-', + slotsUsed: + Math.round( + ((epoch.details.canonical + + epoch.details.orphaned + + epoch.details.missed) / + epoch.details.totalSlots) * + 100, + ) + '%', + }; + this.detect(); + }, + filter(Boolean), + filter(epoch => epoch.slots?.length > 0 && !!epoch.details), + ); } private listenToAllTimeStats(): void { - this.select(BlockProductionOverviewSelectors.allTimeStats, (stats: BlockProductionOverviewAllStats) => { - this.allTimeStats = stats; - this.detect(); - }, filter(Boolean)); + this.select( + BlockProductionOverviewSelectors.allTimeStats, + (stats: BlockProductionOverviewAllStats) => { + this.allTimeStats = stats; + this.detect(); + }, + filter(Boolean), + ); } private listenToActiveSlot(): void { @@ -104,13 +124,15 @@ export class BlockProductionOverviewSidePanelComponent extends StoreDispatcher i this.activeSlot = slot; if (slot) { this.activeScreen = 1; - this.activeSlotStatus = BlockProductionOverviewSlotsComponent.getSlotText(this.activeSlot); - this.activeSlotColor = BlockProductionOverviewSlotsComponent.getSlotColor(this.activeSlot, { - canonical: true, - orphaned: true, - future: true, - missed: true, - }); + this.activeSlotStatus = + BlockProductionOverviewSlotsComponent.getSlotText(this.activeSlot); + this.activeSlotColor = + BlockProductionOverviewSlotsComponent.getSlotColor(this.activeSlot, { + canonical: true, + orphaned: true, + future: true, + missed: true, + }); } else { this.activeScreen = 0; } @@ -123,7 +145,12 @@ export class BlockProductionOverviewSidePanelComponent extends StoreDispatcher i } removeActiveSlot(): void { - this.dispatch2(BlockProductionOverviewActions.setActiveSlot({ slot: undefined })); - this.router.navigate([Routes.BLOCK_PRODUCTION, Routes.OVERVIEW, this.activeEpoch.epochNumber], { queryParamsHandling: 'merge' }); + this.dispatch2( + BlockProductionOverviewActions.setActiveSlot({ slot: undefined }), + ); + this.router.navigate( + [Routes.BLOCK_PRODUCTION, Routes.OVERVIEW, this.activeEpoch.epochNumber], + { queryParamsHandling: 'merge' }, + ); } } diff --git a/frontend/src/app/features/block-production/overview/slot-details/block-production-overview-slot-details.component.html b/frontend/src/app/features/block-production/overview/slot-details/block-production-overview-slot-details.component.html index 9485b4e681..f016238257 100644 --- a/frontend/src/app/features/block-production/overview/slot-details/block-production-overview-slot-details.component.html +++ b/frontend/src/app/features/block-production/overview/slot-details/block-production-overview-slot-details.component.html @@ -18,8 +18,11 @@
State Hash - - + +
Height
@@ -28,9 +31,11 @@
Minascan
- diff --git a/frontend/src/app/features/block-production/overview/slot-details/block-production-overview-slot-details.component.ts b/frontend/src/app/features/block-production/overview/slot-details/block-production-overview-slot-details.component.ts index 0c8c5b9621..86bac93778 100644 --- a/frontend/src/app/features/block-production/overview/slot-details/block-production-overview-slot-details.component.ts +++ b/frontend/src/app/features/block-production/overview/slot-details/block-production-overview-slot-details.component.ts @@ -1,7 +1,5 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; -import { - BlockProductionOverviewSlot, -} from '@shared/types/block-production/overview/block-production-overview-slot.type'; +import { BlockProductionOverviewSlot } from '@shared/types/block-production/overview/block-production-overview-slot.type'; import { AppSelectors } from '@app/app.state'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { AppNodeDetails } from '@shared/types/app/app-node-details.type'; @@ -9,12 +7,12 @@ import { filter } from 'rxjs'; import { safelyExecuteInBrowser } from '@openmina/shared'; @Component({ - selector: 'mina-block-production-overview-slot-details', - templateUrl: './block-production-overview-slot-details.component.html', - styleUrls: ['./block-production-overview-slot-details.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'h-minus-xl flex-column' }, - standalone: false + selector: 'mina-block-production-overview-slot-details', + templateUrl: './block-production-overview-slot-details.component.html', + styleUrls: ['./block-production-overview-slot-details.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'h-minus-xl flex-column' }, + standalone: false, }) export class BlockProductionOverviewSlotDetailsComponent extends StoreDispatcher { @Input({ required: true }) activeSlot: BlockProductionOverviewSlot; @@ -26,9 +24,13 @@ export class BlockProductionOverviewSlotDetailsComponent extends StoreDispatcher } private listenToActiveNode(): void { - this.select(AppSelectors.activeNodeDetails, (node: AppNodeDetails) => { - this.network = node.network?.toLowerCase(); - }, filter(Boolean)); + this.select( + AppSelectors.activeNodeDetails, + (node: AppNodeDetails) => { + this.network = node.network?.toLowerCase(); + }, + filter(Boolean), + ); } viewInMinaScan(): void { diff --git a/frontend/src/app/features/block-production/overview/slots/block-production-overview-slots.component.html b/frontend/src/app/features/block-production/overview/slots/block-production-overview-slots.component.html index 815d1ceab5..f9fe407e73 100644 --- a/frontend/src/app/features/block-production/overview/slots/block-production-overview-slots.component.html +++ b/frontend/src/app/features/block-production/overview/slots/block-production-overview-slots.component.html @@ -1,13 +1,13 @@ -
+
Slots {{ slots[0].globalSlot }} - {{ slots[slots.length - 1].globalSlot }}
-
+
- + diff --git a/frontend/src/app/features/block-production/overview/slots/block-production-overview-slots.component.ts b/frontend/src/app/features/block-production/overview/slots/block-production-overview-slots.component.ts index 9a16ef8cbc..8bdc531b90 100644 --- a/frontend/src/app/features/block-production/overview/slots/block-production-overview-slots.component.ts +++ b/frontend/src/app/features/block-production/overview/slots/block-production-overview-slots.component.ts @@ -1,36 +1,44 @@ -import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, NgZone, ViewChild } from '@angular/core'; +import { + AfterViewInit, + ChangeDetectionStrategy, + Component, + ElementRef, + NgZone, + ViewChild, +} from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import * as d3 from 'd3'; -import { - BlockProductionOverviewSlot, -} from '@shared/types/block-production/overview/block-production-overview-slot.type'; +import { BlockProductionOverviewSlot } from '@shared/types/block-production/overview/block-production-overview-slot.type'; import { BlockProductionOverviewSelectors } from '@block-production/overview/block-production-overview.state'; -import { - BlockProductionOverviewEpoch, -} from '@shared/types/block-production/overview/block-production-overview-epoch.type'; +import { BlockProductionOverviewEpoch } from '@shared/types/block-production/overview/block-production-overview-epoch.type'; import { debounceTime, filter, fromEvent, tap } from 'rxjs'; -import { - BlockProductionOverviewFilters, -} from '@shared/types/block-production/overview/block-production-overview-filters.type'; +import { BlockProductionOverviewFilters } from '@shared/types/block-production/overview/block-production-overview-filters.type'; import { untilDestroyed } from '@ngneat/until-destroy'; -import { ONE_THOUSAND, safelyExecuteInBrowser, toReadableDate } from '@openmina/shared'; +import { + ONE_THOUSAND, + safelyExecuteInBrowser, + toReadableDate, +} from '@openmina/shared'; import { BlockProductionOverviewActions } from '@block-production/overview/block-production-overview.actions'; import { Router } from '@angular/router'; import { Routes } from '@shared/enums/routes.enum'; type MouseEventWithTarget = MouseEvent & { - target: HTMLElement + target: HTMLElement; }; @Component({ - selector: 'mina-block-production-overview-slots', - templateUrl: './block-production-overview-slots.component.html', - styleUrls: ['./block-production-overview-slots.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column flex-grow pb-5 pl-12 p-relative' }, - standalone: false + selector: 'mina-block-production-overview-slots', + templateUrl: './block-production-overview-slots.component.html', + styleUrls: ['./block-production-overview-slots.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column flex-grow pb-5 pl-12 p-relative' }, + standalone: false, }) -export class BlockProductionOverviewSlotsComponent extends StoreDispatcher implements AfterViewInit { +export class BlockProductionOverviewSlotsComponent + extends StoreDispatcher + implements AfterViewInit +{ @ViewChild('graph') private svgHolder: ElementRef; @ViewChild('tooltip') private tooltipRef: ElementRef; @@ -39,9 +47,19 @@ export class BlockProductionOverviewSlotsComponent extends StoreDispatcher imple private activeEpoch: BlockProductionOverviewEpoch; private activeSlot: BlockProductionOverviewSlot; - private tooltip: d3.Selection; + private tooltip: d3.Selection< + HTMLDivElement, + unknown, + HTMLElement, + undefined + >; private svg: d3.Selection; - private slotsGroup: d3.Selection; + private slotsGroup: d3.Selection< + SVGGElement, + unknown, + HTMLElement, + undefined + >; private slotWidth: number = 8; private slotHeight: number = 8; private slotMargin: number = 1; @@ -49,8 +67,12 @@ export class BlockProductionOverviewSlotsComponent extends StoreDispatcher imple private filters: BlockProductionOverviewFilters; private hideTooltipTimeout: any; - constructor(private zone: NgZone, - private router: Router) { super(); } + constructor( + private zone: NgZone, + private router: Router, + ) { + super(); + } ngAfterViewInit(): void { this.zone.runOutsideAngular(() => { @@ -63,65 +85,87 @@ export class BlockProductionOverviewSlotsComponent extends StoreDispatcher imple } private listenToEpochs(): void { - this.select(BlockProductionOverviewSelectors.activeEpoch, (epoch: BlockProductionOverviewEpoch) => { - this.slots = epoch.slots; - - const slotsRectExist = !this.slotsGroup - .selectAll('rect') - .empty(); - if (slotsRectExist) { - if (this.slots?.length) { - this.changeSlotsColors(); + this.select( + BlockProductionOverviewSelectors.activeEpoch, + (epoch: BlockProductionOverviewEpoch) => { + this.slots = epoch.slots; + + const slotsRectExist = !this.slotsGroup + .selectAll('rect') + .empty(); + if (slotsRectExist) { + if (this.slots?.length) { + this.changeSlotsColors(); + } else { + this.slotsGroup + .selectAll('rect') + .remove(); + } } else { - this.slotsGroup.selectAll('rect').remove(); + this.initSlots(); } - } else { - this.initSlots(); - } - this.detect(); - }, filter(epoch => !!epoch?.slots)); + this.detect(); + }, + filter(epoch => !!epoch?.slots), + ); } private listenToActiveSlot(): void { - this.select(BlockProductionOverviewSelectors.activeSlot, (slot: BlockProductionOverviewSlot) => { - this.activeSlot = slot; - this.slotsGroup - .selectAll('rect') - .filter((d: BlockProductionOverviewSlot) => d.slot === this.activeSlot?.slot) - .attr('stroke', 'var(--selected-primary)'); - }); - this.select(BlockProductionOverviewSelectors.activeEpoch, (epoch: BlockProductionOverviewEpoch) => { - this.activeEpoch = epoch; - }); + this.select( + BlockProductionOverviewSelectors.activeSlot, + (slot: BlockProductionOverviewSlot) => { + this.activeSlot = slot; + this.slotsGroup + .selectAll('rect') + .filter( + (d: BlockProductionOverviewSlot) => + d.slot === this.activeSlot?.slot, + ) + .attr('stroke', 'var(--selected-primary)'); + }, + ); + this.select( + BlockProductionOverviewSelectors.activeEpoch, + (epoch: BlockProductionOverviewEpoch) => { + this.activeEpoch = epoch; + }, + ); } private listenToFilters(): void { - this.select(BlockProductionOverviewSelectors.filters, (filters: BlockProductionOverviewFilters) => { - this.filters = filters; - if (this.slots?.length) { - this.changeSlotsColors(); - } - }); + this.select( + BlockProductionOverviewSelectors.filters, + (filters: BlockProductionOverviewFilters) => { + this.filters = filters; + if (this.slots?.length) { + this.changeSlotsColors(); + } + }, + ); } private listenToElWidthChange(): void { this.width = this.svgHolder.nativeElement.clientWidth; const widthChange = 'width-change'; - const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => { - for (const entry of entries) { - const widthChangeEvent = new CustomEvent(widthChange); - entry.target.dispatchEvent(widthChangeEvent); - } - }); + const resizeObserver = new ResizeObserver( + (entries: ResizeObserverEntry[]) => { + for (const entry of entries) { + const widthChangeEvent = new CustomEvent(widthChange); + entry.target.dispatchEvent(widthChangeEvent); + } + }, + ); resizeObserver.observe(this.svgHolder.nativeElement); - fromEvent(this.svgHolder.nativeElement, widthChange).pipe( - tap(() => this.handleElementResizing()), - debounceTime(400), - filter(() => this.width !== this.svgHolder.nativeElement.clientWidth), - tap(() => this.handleElementResizing()), - untilDestroyed(this), - ).subscribe(); + fromEvent(this.svgHolder.nativeElement, widthChange) + .pipe( + tap(() => this.handleElementResizing()), + debounceTime(400), + filter(() => this.width !== this.svgHolder.nativeElement.clientWidth), + tap(() => this.handleElementResizing()), + untilDestroyed(this), + ) + .subscribe(); } private handleElementResizing(): void { @@ -139,7 +183,8 @@ export class BlockProductionOverviewSlotsComponent extends StoreDispatcher imple this.width = this.svgHolder.nativeElement.clientWidth; this.tooltip = d3.select(this.tooltipRef.nativeElement); - this.svg = d3.select(this.svgHolder.nativeElement) + this.svg = d3 + .select(this.svgHolder.nativeElement) .append('svg') .attr('width', this.width); @@ -148,32 +193,53 @@ export class BlockProductionOverviewSlotsComponent extends StoreDispatcher imple private initSlots(): void { const slotsPerRow = this.slotsPerRow; - this.slotsGroup.selectAll('rect') + this.slotsGroup + .selectAll('rect') .data(this.slots) .enter() .append('rect') .attr('x', this.setX(slotsPerRow)) .attr('y', this.setY(slotsPerRow)) - .attr('fill', (d: BlockProductionOverviewSlot) => BlockProductionOverviewSlotsComponent.getSlotColor(d, this.filters)) - .on('click', (_: MouseEventWithTarget, d: BlockProductionOverviewSlot) => this.onSlotClick(d)) - .on('mouseover', (event: MouseEventWithTarget, d: BlockProductionOverviewSlot) => this.mouseOverHandle(event, d)) - .on('mouseout', (event: MouseEventWithTarget, d: BlockProductionOverviewSlot) => { - if (d.slot !== this.activeSlot?.slot) { - d3.select(event.target).attr('stroke', undefined); - } - this.hideTooltipTimeout = setTimeout(() => this.tooltip.style('display', 'none'), 100); - }); + .attr('fill', (d: BlockProductionOverviewSlot) => + BlockProductionOverviewSlotsComponent.getSlotColor(d, this.filters), + ) + .on('click', (_: MouseEventWithTarget, d: BlockProductionOverviewSlot) => + this.onSlotClick(d), + ) + .on( + 'mouseover', + (event: MouseEventWithTarget, d: BlockProductionOverviewSlot) => + this.mouseOverHandle(event, d), + ) + .on( + 'mouseout', + (event: MouseEventWithTarget, d: BlockProductionOverviewSlot) => { + if (d.slot !== this.activeSlot?.slot) { + d3.select(event.target).attr('stroke', undefined); + } + this.hideTooltipTimeout = setTimeout( + () => this.tooltip.style('display', 'none'), + 100, + ); + }, + ); // after everything is added, bind the new height to the svg this.svg.attr('height', this.slotsGroup.node().getBBox().height); } - private setY(slotsPerRow: number): (d: BlockProductionOverviewSlot, i: number) => number { - return (_: BlockProductionOverviewSlot, i: number) => Math.floor(i / slotsPerRow) * (this.slotHeight + this.slotMargin); + private setY( + slotsPerRow: number, + ): (d: BlockProductionOverviewSlot, i: number) => number { + return (_: BlockProductionOverviewSlot, i: number) => + Math.floor(i / slotsPerRow) * (this.slotHeight + this.slotMargin); } - private setX(slotsPerRow: number): (d: BlockProductionOverviewSlot, i: number) => number { - return (_: BlockProductionOverviewSlot, i: number) => (i % slotsPerRow) * (this.slotWidth + this.slotMargin); + private setX( + slotsPerRow: number, + ): (d: BlockProductionOverviewSlot, i: number) => number { + return (_: BlockProductionOverviewSlot, i: number) => + (i % slotsPerRow) * (this.slotWidth + this.slotMargin); } private get slotsPerRow(): number { @@ -184,21 +250,39 @@ export class BlockProductionOverviewSlotsComponent extends StoreDispatcher imple this.zone.run(() => { this.slotsGroup .selectAll('rect') - .filter((d: BlockProductionOverviewSlot) => d.slot === this.activeSlot?.slot) + .filter( + (d: BlockProductionOverviewSlot) => d.slot === this.activeSlot?.slot, + ) .attr('stroke', undefined); - this.dispatch2(BlockProductionOverviewActions.setActiveSlot({ slot: slot.slot })); - this.router.navigate([Routes.BLOCK_PRODUCTION, Routes.OVERVIEW, this.activeEpoch.epochNumber, slot.slot], { queryParamsHandling: 'merge' }); + this.dispatch2( + BlockProductionOverviewActions.setActiveSlot({ slot: slot.slot }), + ); + this.router.navigate( + [ + Routes.BLOCK_PRODUCTION, + Routes.OVERVIEW, + this.activeEpoch.epochNumber, + slot.slot, + ], + { queryParamsHandling: 'merge' }, + ); }); } - private mouseOverHandle(event: MouseEventWithTarget, d: BlockProductionOverviewSlot): void { + private mouseOverHandle( + event: MouseEventWithTarget, + d: BlockProductionOverviewSlot, + ): void { clearTimeout(this.hideTooltipTimeout); d3.select(event.target).attr('stroke', 'var(--selected-primary)'); - const selection = this.tooltip.html(` + const selection = this.tooltip + .html( + `
Slot ${d.globalSlot}, ${toReadableDate(d.time * ONE_THOUSAND, 'dd MMM, HH:mm')}
${BlockProductionOverviewSlotsComponent.getSlotText(d)}
- `) + `, + ) .style('display', 'flex'); const nodeRect = event.target.getBoundingClientRect(); @@ -206,11 +290,15 @@ export class BlockProductionOverviewSlotsComponent extends StoreDispatcher imple const tooltipWidth = tooltipBoundingClientRect.width; const tooltipHeight = tooltipBoundingClientRect.height; - const svgHolderBoundingClientRect = this.svgHolder.nativeElement.getBoundingClientRect(); + const svgHolderBoundingClientRect = + this.svgHolder.nativeElement.getBoundingClientRect(); const chartLeft = svgHolderBoundingClientRect.left; const chartBottom = svgHolderBoundingClientRect.bottom; - let desiredLeft = Math.min(nodeRect.left + nodeRect.width / 2 - tooltipWidth / 2, chartLeft + this.width - tooltipWidth); + let desiredLeft = Math.min( + nodeRect.left + nodeRect.width / 2 - tooltipWidth / 2, + chartLeft + this.width - tooltipWidth, + ); desiredLeft = Math.max(desiredLeft, chartLeft); let desiredTop = 0; safelyExecuteInBrowser(() => { @@ -220,19 +308,22 @@ export class BlockProductionOverviewSlotsComponent extends StoreDispatcher imple desiredTop = nodeRect.top - tooltipHeight - 12; } - selection - .style('left', `${desiredLeft}px`) - .style('top', `${desiredTop}px`); + selection.style('left', `${desiredLeft}px`).style('top', `${desiredTop}px`); } private changeSlotsColors(): void { this.slotsGroup ?.selectAll('rect') .data(this.slots) - .attr('fill', (d: BlockProductionOverviewSlot) => BlockProductionOverviewSlotsComponent.getSlotColor(d, this.filters)); + .attr('fill', (d: BlockProductionOverviewSlot) => + BlockProductionOverviewSlotsComponent.getSlotColor(d, this.filters), + ); } - public static getSlotColor(d: BlockProductionOverviewSlot, filters?: BlockProductionOverviewFilters): string { + public static getSlotColor( + d: BlockProductionOverviewSlot, + filters?: BlockProductionOverviewFilters, + ): string { const prefix = 'var(--'; const suffix = ')'; let color = 'base-container'; @@ -243,7 +334,9 @@ export class BlockProductionOverviewSlotsComponent extends StoreDispatcher imple if (d.canonical) { color = 'success-' + (filters?.canonical ? 'primary' : 'tertiary'); } else if (d.orphaned) { - color = 'special-selected-alt-1-' + (filters?.orphaned ? 'primary' : 'tertiary'); + color = + 'special-selected-alt-1-' + + (filters?.orphaned ? 'primary' : 'tertiary'); } else if (d.missed) { color = 'warn-' + (filters?.missed ? 'primary' : 'tertiary'); } else if (d.futureRights) { diff --git a/frontend/src/app/features/block-production/overview/toolbar/block-production-overview-toolbar.component.html b/frontend/src/app/features/block-production/overview/toolbar/block-production-overview-toolbar.component.html index 22a602439f..f2dcbc10ce 100644 --- a/frontend/src/app/features/block-production/overview/toolbar/block-production-overview-toolbar.component.html +++ b/frontend/src/app/features/block-production/overview/toolbar/block-production-overview-toolbar.component.html @@ -18,42 +18,63 @@ > -
+
{{ totalCanonical }} Canonical Blocks
+ [ngClass]=" + filters.orphaned + ? 'bg-special-selected-alt-1-container special-alt-1-primary' + : 'bg-container tertiary' + " + (click)="changeFilter('orphaned', !filters.orphaned)" + > {{ totalOrphaned }} Orphaned Blocks
+ [ngClass]=" + filters.missed + ? 'bg-warn-container warn-primary' + : 'bg-container tertiary' + " + (click)="changeFilter('missed', !filters.missed)" + > {{ totalMissed }} Missed Blocks
+ [ngClass]=" + filters.future ? 'bg-container primary' : 'bg-container tertiary' + " + (click)="changeFilter('future', !filters.future)" + > {{ totalFuture }} Future Rights
-
+
{{ scale }} Scale
arrow_drop_down
@@ -61,13 +82,21 @@ -
-
Adaptive +
+
+ Adaptive
-
Linear +
+ Linear
diff --git a/frontend/src/app/features/block-production/overview/toolbar/block-production-overview-toolbar.component.ts b/frontend/src/app/features/block-production/overview/toolbar/block-production-overview-toolbar.component.ts index 2dc4ec01e8..779552ad4e 100644 --- a/frontend/src/app/features/block-production/overview/toolbar/block-production-overview-toolbar.component.ts +++ b/frontend/src/app/features/block-production/overview/toolbar/block-production-overview-toolbar.component.ts @@ -1,27 +1,32 @@ -import { ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + OnInit, + TemplateRef, + ViewChild, + ViewContainerRef, +} from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { BlockProductionOverviewSelectors } from '@block-production/overview/block-production-overview.state'; -import { - BlockProductionOverviewFilters, -} from '@shared/types/block-production/overview/block-production-overview-filters.type'; +import { BlockProductionOverviewFilters } from '@shared/types/block-production/overview/block-production-overview-filters.type'; import { BlockProductionOverviewActions } from '@block-production/overview/block-production-overview.actions'; -import { - BlockProductionOverviewEpoch, -} from '@shared/types/block-production/overview/block-production-overview-epoch.type'; +import { BlockProductionOverviewEpoch } from '@shared/types/block-production/overview/block-production-overview-epoch.type'; import { filter } from 'rxjs'; import { TemplatePortal } from '@angular/cdk/portal'; import { Overlay, OverlayRef } from '@angular/cdk/overlay'; @Component({ - selector: 'mina-block-production-overview-toolbar', - templateUrl: './block-production-overview-toolbar.component.html', - styleUrls: ['./block-production-overview-toolbar.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'fx-row-vert-cent h-xl pl-12 f-600' }, - standalone: false + selector: 'mina-block-production-overview-toolbar', + templateUrl: './block-production-overview-toolbar.component.html', + styleUrls: ['./block-production-overview-toolbar.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'fx-row-vert-cent h-xl pl-12 f-600' }, + standalone: false, }) -export class BlockProductionOverviewToolbarComponent extends StoreDispatcher implements OnInit { - +export class BlockProductionOverviewToolbarComponent + extends StoreDispatcher + implements OnInit +{ filters: BlockProductionOverviewFilters; activeEpoch: BlockProductionOverviewEpoch; totalCanonical: number; @@ -33,8 +38,12 @@ export class BlockProductionOverviewToolbarComponent extends StoreDispatcher imp @ViewChild('scaleDropdown') private dropdown: TemplateRef; private overlayRef: OverlayRef; - constructor(private overlay: Overlay, - private viewContainerRef: ViewContainerRef) {super();} + constructor( + private overlay: Overlay, + private viewContainerRef: ViewContainerRef, + ) { + super(); + } ngOnInit(): void { this.listenToScale(); @@ -43,28 +52,39 @@ export class BlockProductionOverviewToolbarComponent extends StoreDispatcher imp } private listenToFilters(): void { - this.select(BlockProductionOverviewSelectors.filters, (filters: BlockProductionOverviewFilters) => { - this.filters = filters; - this.detect(); - }); + this.select( + BlockProductionOverviewSelectors.filters, + (filters: BlockProductionOverviewFilters) => { + this.filters = filters; + this.detect(); + }, + ); } private listenToActiveEpoch(): void { - this.select(BlockProductionOverviewSelectors.activeEpoch, (activeEpoch: BlockProductionOverviewEpoch) => { - this.activeEpoch = activeEpoch; - if (activeEpoch?.slots) { - this.totalCanonical = activeEpoch.slots.filter(s => s.canonical).length; - this.totalOrphaned = activeEpoch.slots.filter(s => s.orphaned).length; - this.totalMissed = activeEpoch.slots.filter(s => s.missed).length; - this.totalFuture = activeEpoch.slots.filter(s => s.futureRights).length; - } else { - this.totalCanonical = 0; - this.totalOrphaned = 0; - this.totalMissed = 0; - this.totalFuture = 0; - } - this.detect(); - }, filter(epoch => !!epoch?.slots)); + this.select( + BlockProductionOverviewSelectors.activeEpoch, + (activeEpoch: BlockProductionOverviewEpoch) => { + this.activeEpoch = activeEpoch; + if (activeEpoch?.slots) { + this.totalCanonical = activeEpoch.slots.filter( + s => s.canonical, + ).length; + this.totalOrphaned = activeEpoch.slots.filter(s => s.orphaned).length; + this.totalMissed = activeEpoch.slots.filter(s => s.missed).length; + this.totalFuture = activeEpoch.slots.filter( + s => s.futureRights, + ).length; + } else { + this.totalCanonical = 0; + this.totalOrphaned = 0; + this.totalMissed = 0; + this.totalFuture = 0; + } + this.detect(); + }, + filter(epoch => !!epoch?.slots), + ); } private listenToScale(): void { @@ -74,12 +94,21 @@ export class BlockProductionOverviewToolbarComponent extends StoreDispatcher imp }); } - changeFilter(filter: keyof BlockProductionOverviewFilters, value: boolean): void { - this.dispatch2(BlockProductionOverviewActions.changeFilters({ filters: { ...this.filters, [filter]: value } })); + changeFilter( + filter: keyof BlockProductionOverviewFilters, + value: boolean, + ): void { + this.dispatch2( + BlockProductionOverviewActions.changeFilters({ + filters: { ...this.filters, [filter]: value }, + }), + ); } changeActiveEpoch(newEpoch: number): void { - this.dispatch2(BlockProductionOverviewActions.getEpochDetails({ epochNumber: newEpoch })); + this.dispatch2( + BlockProductionOverviewActions.getEpochDetails({ epochNumber: newEpoch }), + ); } changeScale(scale: 'linear' | 'adaptive'): void { @@ -96,15 +125,18 @@ export class BlockProductionOverviewToolbarComponent extends StoreDispatcher imp this.overlayRef = this.overlay.create({ hasBackdrop: false, width: target.offsetWidth, - positionStrategy: this.overlay.position() + positionStrategy: this.overlay + .position() .flexibleConnectedTo(target) - .withPositions([{ - originX: 'start', - originY: 'bottom', - overlayX: 'start', - overlayY: 'top', - offsetY: 10, - }]), + .withPositions([ + { + originX: 'start', + originY: 'bottom', + overlayX: 'start', + overlayY: 'top', + offsetY: 10, + }, + ]), }); const portal = new TemplatePortal(this.dropdown, this.viewContainerRef); diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots-epoch/block-production-won-slots-epoch.component.html b/frontend/src/app/features/block-production/won-slots/block-production-won-slots-epoch/block-production-won-slots-epoch.component.html index 0639833c41..72557c12a4 100644 --- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots-epoch/block-production-won-slots-epoch.component.html +++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots-epoch/block-production-won-slots-epoch.component.html @@ -1,7 +1,7 @@ {{ epoch }} @if (isMobile) { - {{ publicKey | truncateMid: 6: 6 }} + {{ publicKey | truncateMid: 6 : 6 }} content_copy } diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots-epoch/block-production-won-slots-epoch.component.ts b/frontend/src/app/features/block-production/won-slots/block-production-won-slots-epoch/block-production-won-slots-epoch.component.ts index 4aad35f64d..defa476102 100644 --- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots-epoch/block-production-won-slots-epoch.component.ts +++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots-epoch/block-production-won-slots-epoch.component.ts @@ -8,14 +8,19 @@ import { isMobile, ONE_BILLION, ONE_THOUSAND } from '@openmina/shared'; import { getTimeDiff } from '@shared/helpers/date.helper'; @Component({ - selector: 'mina-block-production-won-slots-epoch', - templateUrl: './block-production-won-slots-epoch.component.html', - styleUrl: './block-production-won-slots-epoch.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'h-lg pl-12 pr-12 f-600 fx-row-vert-cent border-bottom flex-between' }, - standalone: false + selector: 'mina-block-production-won-slots-epoch', + templateUrl: './block-production-won-slots-epoch.component.html', + styleUrl: './block-production-won-slots-epoch.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + class: 'h-lg pl-12 pr-12 f-600 fx-row-vert-cent border-bottom flex-between', + }, + standalone: false, }) -export class BlockProductionWonSlotsEpochComponent extends StoreDispatcher implements OnInit { +export class BlockProductionWonSlotsEpochComponent + extends StoreDispatcher + implements OnInit +{ readonly isMobile = isMobile(); epoch: string; @@ -28,22 +33,38 @@ export class BlockProductionWonSlotsEpochComponent extends StoreDispatcher imple } private listenToEpoch(): void { - this.select(BlockProductionWonSlotsSelectors.slots, (slots: BlockProductionWonSlotsSlot[]) => { - this.epoch = 'Epoch ' + slots[0].epoch; - this.detect(); - }, filter(slots => slots.length > 0)); + this.select( + BlockProductionWonSlotsSelectors.slots, + (slots: BlockProductionWonSlotsSlot[]) => { + this.epoch = 'Epoch ' + slots[0].epoch; + this.detect(); + }, + filter(slots => slots.length > 0), + ); } private listenToEpoch2(): void { - this.select(BlockProductionWonSlotsSelectors.epoch, (epoch: BlockProductionWonSlotsEpoch) => { - const epochStartTime = this.addMinutesToTimestamp(Math.floor(epoch.currentTime / ONE_BILLION), -(epoch.currentGlobalSlot - epoch.start) * 3); - this.startedAgo = getTimeDiff(Math.floor(epochStartTime * ONE_THOUSAND)).diff; - this.publicKey = epoch.publicKey; - this.detect(); - }, filter(Boolean)); + this.select( + BlockProductionWonSlotsSelectors.epoch, + (epoch: BlockProductionWonSlotsEpoch) => { + const epochStartTime = this.addMinutesToTimestamp( + Math.floor(epoch.currentTime / ONE_BILLION), + -(epoch.currentGlobalSlot - epoch.start) * 3, + ); + this.startedAgo = getTimeDiff( + Math.floor(epochStartTime * ONE_THOUSAND), + ).diff; + this.publicKey = epoch.publicKey; + this.detect(); + }, + filter(Boolean), + ); } - private addMinutesToTimestamp(timestampInSeconds: number, minutesToAdd: number): number { + private addMinutesToTimestamp( + timestampInSeconds: number, + minutesToAdd: number, + ): number { const secondsToAdd = minutesToAdd * 60; return timestampInSeconds + secondsToAdd; } diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.actions.ts b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.actions.ts index a027623765..74ca27ae60 100644 --- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.actions.ts +++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.actions.ts @@ -1,33 +1,43 @@ import { createAction, props } from '@ngrx/store'; import { createType } from '@shared/constants/store-functions'; import { BLOCK_PRODUCTION_PREFIX } from '@block-production/block-production.actions'; -import { - BlockProductionWonSlotsSlot, -} from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type'; -import { - BlockProductionWonSlotsFilters, -} from '@shared/types/block-production/won-slots/block-production-won-slots-filters.type'; +import { BlockProductionWonSlotsSlot } from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type'; +import { BlockProductionWonSlotsFilters } from '@shared/types/block-production/won-slots/block-production-won-slots-filters.type'; import { TableSort } from '@openmina/shared'; -import { - BlockProductionWonSlotsEpoch, -} from '@shared/types/block-production/won-slots/block-production-won-slots-epoch.type'; +import { BlockProductionWonSlotsEpoch } from '@shared/types/block-production/won-slots/block-production-won-slots-epoch.type'; export const BLOCK_PRODUCTION_WON_SLOTS_KEY = 'wonSlots'; -const type = (type: T) => createType(BLOCK_PRODUCTION_PREFIX, 'Won Slots', type); +const type = (type: T) => + createType(BLOCK_PRODUCTION_PREFIX, 'Won Slots', type); const init = createAction(type('Init'), props<{ activeSlotRoute: string }>()); const close = createAction(type('Close')); const getSlots = createAction(type('Get Slots')); -const getSlotsSuccess = createAction(type('Get Slots Success'), props<{ - slots: BlockProductionWonSlotsSlot[], - epoch: BlockProductionWonSlotsEpoch, - activeSlot: BlockProductionWonSlotsSlot, -}>()); -const changeFilters = createAction(type('Change Filters'), props<{ filters: BlockProductionWonSlotsFilters }>()); -const setActiveSlot = createAction(type('Set Active Slot'), props<{ slot: BlockProductionWonSlotsSlot }>()); -const setActiveSlotNumber = createAction(type('Set Active Slot Number'), props<{ slotNumber: number }>()); -const sort = createAction(type('Sort'), props<{ sort: TableSort }>()); +const getSlotsSuccess = createAction( + type('Get Slots Success'), + props<{ + slots: BlockProductionWonSlotsSlot[]; + epoch: BlockProductionWonSlotsEpoch; + activeSlot: BlockProductionWonSlotsSlot; + }>(), +); +const changeFilters = createAction( + type('Change Filters'), + props<{ filters: BlockProductionWonSlotsFilters }>(), +); +const setActiveSlot = createAction( + type('Set Active Slot'), + props<{ slot: BlockProductionWonSlotsSlot }>(), +); +const setActiveSlotNumber = createAction( + type('Set Active Slot Number'), + props<{ slotNumber: number }>(), +); +const sort = createAction( + type('Sort'), + props<{ sort: TableSort }>(), +); const toggleSidePanel = createAction(type('Toggle Side Panel')); export const BlockProductionWonSlotsActions = { diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.html b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.html index 811b8e7310..0ce65a560e 100644 --- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.html +++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.html @@ -1,30 +1,39 @@ -@if ((isPending || nodeIsBootstrapping || isCalculatingVRF || isLoading) && emptySlots) { -
+@if ( + (isPending || nodeIsBootstrapping || isCalculatingVRF || isLoading) && + emptySlots +) { +
@if (isPending || isLoading) {
Loading
} @else if (nodeIsBootstrapping) {
Waiting For Sync
-
Only a synced node can calculate block production rights
+
+ Only a synced node can calculate block production rights +
} @else { -
Calculating Block Producing Rights
+
+ Calculating Block Producing Rights +
- Epoch {{ epoch }} - Slot {{ vrfStats?.evaluated }}/{{ vrfStats?.total }} + Epoch {{ epoch }} - Slot {{ vrfStats?.evaluated }}/{{ + vrfStats?.total + }}
}
} @else { - - +
@@ -35,7 +44,9 @@
@if (!emptySlots) { - + } @else {
cancel_presentation diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.scss b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.scss index 053b423114..cdb18d9e3c 100644 --- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.scss +++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.scss @@ -1,7 +1,7 @@ @media (max-width: 767px) { :host ::ng-deep mina-horizontal-resizable-container aside { right: unset !important; - transition: left .4s cubic-bezier(.22, 1, .36, 1) !important; + transition: left 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important; &.in-view { left: 0; @@ -14,5 +14,9 @@ } .mina-icon { - font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' -25, 'opsz' 24 !important; + font-variation-settings: + 'FILL' 1, + 'wght' 400, + 'GRAD' -25, + 'opsz' 24 !important; } diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.ts b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.ts index f02df46376..e5954f8281 100644 --- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.ts +++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.ts @@ -1,4 +1,10 @@ -import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + OnDestroy, + OnInit, +} from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { getMergedRoute, isDesktop, MergedRoute } from '@openmina/shared'; import { take, timer } from 'rxjs'; @@ -6,29 +12,32 @@ import { untilDestroyed } from '@ngneat/until-destroy'; import { BlockProductionWonSlotsActions } from '@block-production/won-slots/block-production-won-slots.actions'; import { AppSelectors } from '@app/app.state'; import { BlockProductionWonSlotsSelectors } from '@block-production/won-slots/block-production-won-slots.state'; -import { AppNodeDetails, AppNodeStatus } from '@shared/types/app/app-node-details.type'; +import { + AppNodeDetails, + AppNodeStatus, +} from '@shared/types/app/app-node-details.type'; import { animate, style, transition, trigger } from '@angular/animations'; @Component({ - selector: 'mina-block-production-won-slots', - templateUrl: './block-production-won-slots.component.html', - styleUrls: ['./block-production-won-slots.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - animations: [ - trigger('fadeInOut', [ - transition(':enter', [ - style({ opacity: 0 }), - animate('400ms ease-in', style({ opacity: 1 })), - ]), - transition(':leave', [ - animate('400ms ease-out', style({ opacity: 0 })), - ]), - ]), - ], - standalone: false + selector: 'mina-block-production-won-slots', + templateUrl: './block-production-won-slots.component.html', + styleUrls: ['./block-production-won-slots.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + animations: [ + trigger('fadeInOut', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('400ms ease-in', style({ opacity: 1 })), + ]), + transition(':leave', [animate('400ms ease-out', style({ opacity: 0 }))]), + ]), + ], + standalone: false, }) -export class BlockProductionWonSlotsComponent extends StoreDispatcher implements OnInit, OnDestroy { - +export class BlockProductionWonSlotsComponent + extends StoreDispatcher + implements OnInit, OnDestroy +{ showSidePanel: boolean = isDesktop(); isDesktop: boolean = isDesktop(); nodeIsBootstrapping: boolean = false; @@ -42,7 +51,9 @@ export class BlockProductionWonSlotsComponent extends StoreDispatcher implements emptySlots: boolean = true; isLoading: boolean = true; - constructor(protected el: ElementRef) { super(); } + constructor(protected el: ElementRef) { + super(); + } ngOnInit(): void { this.listenToActiveNode(); @@ -67,38 +78,50 @@ export class BlockProductionWonSlotsComponent extends StoreDispatcher implements private listenToActiveNode(): void { this.select(AppSelectors.activeNode, () => { - this.select(getMergedRoute, (data: MergedRoute) => { - this.isLoading = true; - this.dispatch2(BlockProductionWonSlotsActions.init({ activeSlotRoute: data.params['id'] })); - }, take(1)); + this.select( + getMergedRoute, + (data: MergedRoute) => { + this.isLoading = true; + this.dispatch2( + BlockProductionWonSlotsActions.init({ + activeSlotRoute: data.params['id'], + }), + ); + }, + take(1), + ); }); } private listenToResize(): void { - this.select(BlockProductionWonSlotsSelectors.openSidePanel, (open: boolean) => { - this.showSidePanel = open; - this.detect(); - }); + this.select( + BlockProductionWonSlotsSelectors.openSidePanel, + (open: boolean) => { + this.showSidePanel = open; + this.detect(); + }, + ); } private listenToActiveEpoch(): void { - this.select(BlockProductionWonSlotsSelectors.epoch, (activeEpoch) => { + this.select(BlockProductionWonSlotsSelectors.epoch, activeEpoch => { this.epoch = activeEpoch?.epochNumber; this.vrfStats = activeEpoch?.vrfStats; - this.isCalculatingVRF = activeEpoch?.vrfStats?.evaluated < activeEpoch?.vrfStats?.total; + this.isCalculatingVRF = + activeEpoch?.vrfStats?.evaluated < activeEpoch?.vrfStats?.total; this.detect(); }); } private listenToSlots(): void { - this.select(BlockProductionWonSlotsSelectors.slots, (slots) => { + this.select(BlockProductionWonSlotsSelectors.slots, slots => { const emptySlots = slots.length === 0; if (emptySlots !== this.emptySlots) { this.emptySlots = emptySlots; this.detect(); } }); - this.select(BlockProductionWonSlotsSelectors.serverResponded, (responded) => { + this.select(BlockProductionWonSlotsSelectors.serverResponded, responded => { this.isLoading = !responded; this.detect(); }); diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.effects.ts b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.effects.ts index 71b703704f..d45a11eff1 100644 --- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.effects.ts +++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.effects.ts @@ -9,7 +9,10 @@ import { Store } from '@ngrx/store'; import { BaseEffect } from '@shared/base-classes/mina-rust-base.effect'; import { BlockProductionModule } from '@block-production/block-production.module'; import { BlockProductionWonSlotsService } from '@block-production/won-slots/block-production-won-slots.service'; -import { BLOCK_PRODUCTION_WON_SLOTS_KEY, BlockProductionWonSlotsActions } from '@block-production/won-slots/block-production-won-slots.actions'; +import { + BLOCK_PRODUCTION_WON_SLOTS_KEY, + BlockProductionWonSlotsActions, +} from '@block-production/won-slots/block-production-won-slots.actions'; import { BlockProductionWonSlotsStatus } from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type'; import { Router } from '@angular/router'; import { Routes } from '@shared/enums/routes.enum'; @@ -19,73 +22,113 @@ import { fromPromise } from 'rxjs/internal/observable/innerFrom'; providedIn: BlockProductionModule, }) export class BlockProductionWonSlotsEffects extends BaseEffect { - readonly init$: Effect; readonly getSlots$: Effect; readonly setActiveSlotNumber$: Effect; - constructor(private router: Router, - private actions$: Actions, - private wonSlotsService: BlockProductionWonSlotsService, - store: Store) { + constructor( + private router: Router, + private actions$: Actions, + private wonSlotsService: BlockProductionWonSlotsService, + store: Store, + ) { super(store, selectMinaState); - this.init$ = createEffect(() => this.actions$.pipe( - ofType(BlockProductionWonSlotsActions.init), - map(() => BlockProductionWonSlotsActions.getSlots()), - )); + this.init$ = createEffect(() => + this.actions$.pipe( + ofType(BlockProductionWonSlotsActions.init), + map(() => BlockProductionWonSlotsActions.getSlots()), + ), + ); - this.getSlots$ = createEffect(() => this.actions$.pipe( - ofType(BlockProductionWonSlotsActions.getSlots, BlockProductionWonSlotsActions.close), - this.latestActionState(), - switchMap(({ action, state }) => - action.type.includes('Close') - ? EMPTY - : this.wonSlotsService.getSlots().pipe( - switchMap(({ slots, epoch }) => { - const bpState = state.blockProduction[BLOCK_PRODUCTION_WON_SLOTS_KEY]; - const activeSlotRoute = bpState.activeSlotRoute; - let newActiveSlot = slots.find(s => s.globalSlot.toString() === activeSlotRoute); - if ( - (isDesktop() && !activeSlotRoute) - || (activeSlotRoute && !newActiveSlot) - || (isMobile() && !activeSlotRoute && bpState.slots.length === 0) - ) { - newActiveSlot = slots.find(s => s.active) - ?? slots.find(s => s.status === BlockProductionWonSlotsStatus.Committed) - ?? slots.find(s => s.status === BlockProductionWonSlotsStatus.Scheduled) - ?? slots.find(s => !s.status); - } - const routes: string[] = [Routes.BLOCK_PRODUCTION, Routes.WON_SLOTS]; - if ( - newActiveSlot && isDesktop() - || (activeSlotRoute && !bpState.activeSlot) - || (activeSlotRoute && bpState.openSidePanel) - ) { - routes.push(newActiveSlot?.globalSlot.toString() ?? ''); - } - return fromPromise(this.router.navigate(routes, { queryParamsHandling: 'merge' })).pipe(map(() => ({ - slots, - epoch, - activeSlot: newActiveSlot, - }))); - }), - map(data => BlockProductionWonSlotsActions.getSlotsSuccess(data)), - ), + this.getSlots$ = createEffect(() => + this.actions$.pipe( + ofType( + BlockProductionWonSlotsActions.getSlots, + BlockProductionWonSlotsActions.close, + ), + this.latestActionState(), + switchMap(({ action, state }) => + action.type.includes('Close') + ? EMPTY + : this.wonSlotsService.getSlots().pipe( + switchMap(({ slots, epoch }) => { + const bpState = + state.blockProduction[BLOCK_PRODUCTION_WON_SLOTS_KEY]; + const activeSlotRoute = bpState.activeSlotRoute; + let newActiveSlot = slots.find( + s => s.globalSlot.toString() === activeSlotRoute, + ); + if ( + (isDesktop() && !activeSlotRoute) || + (activeSlotRoute && !newActiveSlot) || + (isMobile() && + !activeSlotRoute && + bpState.slots.length === 0) + ) { + newActiveSlot = + slots.find(s => s.active) ?? + slots.find( + s => + s.status === BlockProductionWonSlotsStatus.Committed, + ) ?? + slots.find( + s => + s.status === BlockProductionWonSlotsStatus.Scheduled, + ) ?? + slots.find(s => !s.status); + } + const routes: string[] = [ + Routes.BLOCK_PRODUCTION, + Routes.WON_SLOTS, + ]; + if ( + (newActiveSlot && isDesktop()) || + (activeSlotRoute && !bpState.activeSlot) || + (activeSlotRoute && bpState.openSidePanel) + ) { + routes.push(newActiveSlot?.globalSlot.toString() ?? ''); + } + return fromPromise( + this.router.navigate(routes, { + queryParamsHandling: 'merge', + }), + ).pipe( + map(() => ({ + slots, + epoch, + activeSlot: newActiveSlot, + })), + ); + }), + map(data => + BlockProductionWonSlotsActions.getSlotsSuccess(data), + ), + ), + ), + catchErrorAndRepeat2( + MinaErrorType.GENERIC, + BlockProductionWonSlotsActions.getSlotsSuccess({ + slots: [], + epoch: undefined, + activeSlot: undefined, + }), + ), ), - catchErrorAndRepeat2(MinaErrorType.GENERIC, BlockProductionWonSlotsActions.getSlotsSuccess({ - slots: [], - epoch: undefined, - activeSlot: undefined, - })), - )); + ); - this.setActiveSlotNumber$ = createEffect(() => this.actions$.pipe( - ofType(BlockProductionWonSlotsActions.setActiveSlotNumber), - this.latestActionState(), - map(({ action, state }) => BlockProductionWonSlotsActions.setActiveSlot({ - slot: state.blockProduction[BLOCK_PRODUCTION_WON_SLOTS_KEY].slots.find(s => s.globalSlot === action.slotNumber), - })), - )); + this.setActiveSlotNumber$ = createEffect(() => + this.actions$.pipe( + ofType(BlockProductionWonSlotsActions.setActiveSlotNumber), + this.latestActionState(), + map(({ action, state }) => + BlockProductionWonSlotsActions.setActiveSlot({ + slot: state.blockProduction[ + BLOCK_PRODUCTION_WON_SLOTS_KEY + ].slots.find(s => s.globalSlot === action.slotNumber), + }), + ), + ), + ); } } diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.module.ts b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.module.ts index ce1b55df9c..a68e9d6dfb 100644 --- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.module.ts +++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.module.ts @@ -3,26 +3,21 @@ import { CommonModule } from '@angular/common'; import { BlockProductionWonSlotsComponent } from '@block-production/won-slots/block-production-won-slots.component'; import { BlockProductionWonSlotsRouting } from '@block-production/won-slots/block-production-won-slots.routing'; -import { - BlockProductionWonSlotsTableComponent, -} from '@block-production/won-slots/table/block-production-won-slots-table.component'; -import { - BlockProductionWonSlotsSidePanelComponent, -} from '@block-production/won-slots/side-panel/block-production-won-slots-side-panel.component'; +import { BlockProductionWonSlotsTableComponent } from '@block-production/won-slots/table/block-production-won-slots-table.component'; +import { BlockProductionWonSlotsSidePanelComponent } from '@block-production/won-slots/side-panel/block-production-won-slots-side-panel.component'; import { EffectsModule } from '@ngrx/effects'; import { BlockProductionWonSlotsEffects } from '@block-production/won-slots/block-production-won-slots.effects'; -import { CopyComponent, HorizontalMenuComponent, HorizontalResizableContainerComponent } from '@openmina/shared'; -import { LoadingSpinnerComponent } from '@shared/loading-spinner/loading-spinner.component'; import { - BlockProductionWonSlotsFiltersComponent, -} from '@block-production/won-slots/filters/block-production-won-slots-filters.component'; -import { - BlockProductionWonSlotsCardsComponent, -} from '@block-production/won-slots/cards/block-production-won-slots-cards.component'; + CopyComponent, + HorizontalMenuComponent, + HorizontalResizableContainerComponent, +} from '@openmina/shared'; +import { LoadingSpinnerComponent } from '@shared/loading-spinner/loading-spinner.component'; +import { BlockProductionWonSlotsFiltersComponent } from '@block-production/won-slots/filters/block-production-won-slots-filters.component'; +import { BlockProductionWonSlotsCardsComponent } from '@block-production/won-slots/cards/block-production-won-slots-cards.component'; import { SharedModule } from '@shared/shared.module'; import { BlockProductionWonSlotsEpochComponent } from '@block-production/won-slots/block-production-won-slots-epoch/block-production-won-slots-epoch.component'; - @NgModule({ declarations: [ BlockProductionWonSlotsComponent, diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.reducer.ts b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.reducer.ts index 8cd720605e..fba4a56db1 100644 --- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.reducer.ts +++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.reducer.ts @@ -1,6 +1,12 @@ import { createReducer, on } from '@ngrx/store'; import { BlockProductionWonSlotsState } from '@block-production/won-slots/block-production-won-slots.state'; -import { isDesktop, isMobile, sort, SortDirection, TableSort } from '@openmina/shared'; +import { + isDesktop, + isMobile, + sort, + SortDirection, + TableSort, +} from '@openmina/shared'; import { BlockProductionWonSlotsActions } from '@block-production/won-slots/block-production-won-slots.actions'; import { BlockProductionWonSlotsSlot, @@ -34,15 +40,18 @@ export const blockProductionWonSlotsReducer = createReducer( activeSlotRoute, serverResponded: false, })), - on(BlockProductionWonSlotsActions.getSlotsSuccess, (state, { slots, epoch, activeSlot }) => ({ - ...state, - slots, - epoch, - filteredSlots: filterSlots(sortSlots(slots, state.sort), state.filters), - activeSlot, - openSidePanel: state.activeSlot ? state.openSidePanel : isDesktop(), - serverResponded: true, - })), + on( + BlockProductionWonSlotsActions.getSlotsSuccess, + (state, { slots, epoch, activeSlot }) => ({ + ...state, + slots, + epoch, + filteredSlots: filterSlots(sortSlots(slots, state.sort), state.filters), + activeSlot, + openSidePanel: state.activeSlot ? state.openSidePanel : isDesktop(), + serverResponded: true, + }), + ), on(BlockProductionWonSlotsActions.setActiveSlot, (state, { slot }) => ({ ...state, activeSlot: slot, @@ -68,21 +77,33 @@ export const blockProductionWonSlotsReducer = createReducer( on(BlockProductionWonSlotsActions.close, () => initialState), ); -function sortSlots(node: BlockProductionWonSlotsSlot[], tableSort: TableSort): BlockProductionWonSlotsSlot[] { +function sortSlots( + node: BlockProductionWonSlotsSlot[], + tableSort: TableSort, +): BlockProductionWonSlotsSlot[] { return sort(node, tableSort, ['message']); } -function filterSlots(slots: BlockProductionWonSlotsSlot[], filters: BlockProductionWonSlotsState['filters']): BlockProductionWonSlotsSlot[] { +function filterSlots( + slots: BlockProductionWonSlotsSlot[], + filters: BlockProductionWonSlotsState['filters'], +): BlockProductionWonSlotsSlot[] { return slots.filter(slot => { if ( - (filters.accepted && slot.status === BlockProductionWonSlotsStatus.Canonical) - || (filters.orphaned && slot.status === BlockProductionWonSlotsStatus.Orphaned) - || (filters.discarded && slot.status === BlockProductionWonSlotsStatus.Discarded) - || slot.active - || slot.status === BlockProductionWonSlotsStatus.Committed + (filters.accepted && + slot.status === BlockProductionWonSlotsStatus.Canonical) || + (filters.orphaned && + slot.status === BlockProductionWonSlotsStatus.Orphaned) || + (filters.discarded && + slot.status === BlockProductionWonSlotsStatus.Discarded) || + slot.active || + slot.status === BlockProductionWonSlotsStatus.Committed ) { return true; } - return filters.upcoming && !slot.status || slot.status === BlockProductionWonSlotsStatus.Scheduled; + return ( + (filters.upcoming && !slot.status) || + slot.status === BlockProductionWonSlotsStatus.Scheduled + ); }); } diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.service.ts b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.service.ts index a10d21f215..164b8e1861 100644 --- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.service.ts +++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.service.ts @@ -5,7 +5,13 @@ import { BlockProductionWonSlotsSlot, BlockProductionWonSlotsStatus, } from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type'; -import { hasValue, isDesktop, nanOrElse, ONE_BILLION, ONE_MILLION } from '@openmina/shared'; +import { + hasValue, + isDesktop, + nanOrElse, + ONE_BILLION, + ONE_MILLION, +} from '@openmina/shared'; import { getTimeDiff } from '@shared/helpers/date.helper'; import { RustService } from '@core/services/rust.service'; import { BlockProductionWonSlotsEpoch } from '@shared/types/block-production/won-slots/block-production-won-slots-epoch.type'; @@ -14,77 +20,116 @@ import { BlockProductionWonSlotsEpoch } from '@shared/types/block-production/won providedIn: 'root', }) export class BlockProductionWonSlotsService { + constructor(private rust: RustService) {} - constructor(private rust: RustService) { } - - getSlots(): Observable<{ slots: BlockProductionWonSlotsSlot[], epoch: BlockProductionWonSlotsEpoch }> { - return this.rust.get('/stats/block_producer') - .pipe( - map((response: WonSlotResponse) => { - if (!response) { - return { slots: [], epoch: undefined }; - } - const attemptsSlots = response.attempts.map((attempt: Attempt) => { - attempt.won_slot.slot_time = Math.floor(attempt.won_slot.slot_time / ONE_MILLION); // converted to milliseconds - attempt.active = this.getActive(attempt); - let slot = { - epoch: attempt.won_slot.epoch, - message: this.getMessage(attempt), - age: this.calculateTimeAgo(attempt), - slotTime: attempt.won_slot.slot_time, - globalSlot: attempt.won_slot.global_slot, - slotInEpoch: attempt.won_slot.global_slot % 7140, - vrfValueWithThreshold: attempt.won_slot.value_with_threshold, - active: attempt.active, - - height: attempt.block?.height, - hash: attempt.block?.hash, - transactionsTotal: nanOrElse(attempt.block?.transactions.payments + attempt.block?.transactions.delegations + attempt.block?.transactions.zkapps, 0), - zkapps: nanOrElse(attempt.block?.transactions.zkapps, 0), - payments: nanOrElse(attempt.block?.transactions.payments, 0), - delegations: nanOrElse(attempt.block?.transactions.delegations, 0), - completedWorksCount: nanOrElse(attempt.block?.completed_works_count, 0), - snarkFees: attempt.block ? attempt.block.snark_fees / ONE_BILLION : undefined, - coinbaseRewards: attempt.block ? attempt.block.coinbase / ONE_BILLION : undefined, - txFeesRewards: attempt.block ? attempt.block.fees / ONE_BILLION : undefined, - - status: attempt.status, - discardReason: attempt.discard_reason, - lastObservedConfirmations: attempt.last_observed_confirmations, - orphanedBy: attempt.orphaned_by, - - times: { - scheduled: attempt.times.scheduled, - stagedLedgerDiffCreate: !attempt.times.staged_ledger_diff_create_end || !attempt.times.staged_ledger_diff_create_start - ? null : (attempt.times.staged_ledger_diff_create_end - attempt.times.staged_ledger_diff_create_start) / ONE_BILLION, - produced: !attempt.times.produced || !attempt.times.staged_ledger_diff_create_end - ? null : (attempt.times.produced - attempt.times.staged_ledger_diff_create_end) / ONE_BILLION, - proofCreate: !attempt.times.proof_create_end || !attempt.times.proof_create_start - ? null : (attempt.times.proof_create_end - attempt.times.proof_create_start) / ONE_BILLION, - blockApply: !attempt.times.block_apply_end || !attempt.times.block_apply_start - ? null : (attempt.times.block_apply_end - attempt.times.block_apply_start) / ONE_BILLION, - discarded: attempt.times.discarded || null, - committed: attempt.times.committed || null, - stagedLedgerDiffCreateEnd: attempt.times.staged_ledger_diff_create_end, - producedEnd: attempt.times.produced, - proofCreateEnd: attempt.times.proof_create_end, - blockApplyEnd: attempt.times.block_apply_end, - }, - } as BlockProductionWonSlotsSlot; + getSlots(): Observable<{ + slots: BlockProductionWonSlotsSlot[]; + epoch: BlockProductionWonSlotsEpoch; + }> { + return this.rust.get('/stats/block_producer').pipe( + map((response: WonSlotResponse) => { + if (!response) { + return { slots: [], epoch: undefined }; + } + const attemptsSlots = response.attempts.map((attempt: Attempt) => { + attempt.won_slot.slot_time = Math.floor( + attempt.won_slot.slot_time / ONE_MILLION, + ); // converted to milliseconds + attempt.active = this.getActive(attempt); + let slot = { + epoch: attempt.won_slot.epoch, + message: this.getMessage(attempt), + age: this.calculateTimeAgo(attempt), + slotTime: attempt.won_slot.slot_time, + globalSlot: attempt.won_slot.global_slot, + slotInEpoch: attempt.won_slot.global_slot % 7140, + vrfValueWithThreshold: attempt.won_slot.value_with_threshold, + active: attempt.active, + + height: attempt.block?.height, + hash: attempt.block?.hash, + transactionsTotal: nanOrElse( + attempt.block?.transactions.payments + + attempt.block?.transactions.delegations + + attempt.block?.transactions.zkapps, + 0, + ), + zkapps: nanOrElse(attempt.block?.transactions.zkapps, 0), + payments: nanOrElse(attempt.block?.transactions.payments, 0), + delegations: nanOrElse(attempt.block?.transactions.delegations, 0), + completedWorksCount: nanOrElse( + attempt.block?.completed_works_count, + 0, + ), + snarkFees: attempt.block + ? attempt.block.snark_fees / ONE_BILLION + : undefined, + coinbaseRewards: attempt.block + ? attempt.block.coinbase / ONE_BILLION + : undefined, + txFeesRewards: attempt.block + ? attempt.block.fees / ONE_BILLION + : undefined, + + status: attempt.status, + discardReason: attempt.discard_reason, + lastObservedConfirmations: attempt.last_observed_confirmations, + orphanedBy: attempt.orphaned_by, - slot.percentage = slot.active - ? [ - slot.times?.stagedLedgerDiffCreate, - slot.times?.produced, - slot.times?.proofCreate, - slot.times?.blockApply, - slot.times?.committed, - ].filter(t => hasValue(t)).length * 20 - : undefined; - return slot; - }); - - const futureWonSlots = response.future_won_slots.map((slot: WonSlot) => { + times: { + scheduled: attempt.times.scheduled, + stagedLedgerDiffCreate: + !attempt.times.staged_ledger_diff_create_end || + !attempt.times.staged_ledger_diff_create_start + ? null + : (attempt.times.staged_ledger_diff_create_end - + attempt.times.staged_ledger_diff_create_start) / + ONE_BILLION, + produced: + !attempt.times.produced || + !attempt.times.staged_ledger_diff_create_end + ? null + : (attempt.times.produced - + attempt.times.staged_ledger_diff_create_end) / + ONE_BILLION, + proofCreate: + !attempt.times.proof_create_end || + !attempt.times.proof_create_start + ? null + : (attempt.times.proof_create_end - + attempt.times.proof_create_start) / + ONE_BILLION, + blockApply: + !attempt.times.block_apply_end || + !attempt.times.block_apply_start + ? null + : (attempt.times.block_apply_end - + attempt.times.block_apply_start) / + ONE_BILLION, + discarded: attempt.times.discarded || null, + committed: attempt.times.committed || null, + stagedLedgerDiffCreateEnd: + attempt.times.staged_ledger_diff_create_end, + producedEnd: attempt.times.produced, + proofCreateEnd: attempt.times.proof_create_end, + blockApplyEnd: attempt.times.block_apply_end, + }, + } as BlockProductionWonSlotsSlot; + + slot.percentage = slot.active + ? [ + slot.times?.stagedLedgerDiffCreate, + slot.times?.produced, + slot.times?.proofCreate, + slot.times?.blockApply, + slot.times?.committed, + ].filter(t => hasValue(t)).length * 20 + : undefined; + return slot; + }); + + const futureWonSlots = response.future_won_slots.map( + (slot: WonSlot) => { slot.slot_time = Math.floor(slot.slot_time / ONE_MILLION); return { message: this.getMessage({ won_slot: slot } as Attempt), @@ -94,31 +139,36 @@ export class BlockProductionWonSlotsService { vrfValueWithThreshold: slot.value_with_threshold, active: false, } as BlockProductionWonSlotsSlot; - }); - - return { - slots: [...attemptsSlots, ...futureWonSlots], - epoch: { - epochNumber: response.current_epoch, - start: response.epoch_start, - end: response.epoch_end, - currentGlobalSlot: response.current_global_slot, - currentTime: response.current_time, - vrfStats: { - evaluated: response.current_epoch_vrf_stats?.evaluated_slots, - total: response.current_epoch_vrf_stats?.total_slots, - }, - publicKey: response.public_key, + }, + ); + + return { + slots: [...attemptsSlots, ...futureWonSlots], + epoch: { + epochNumber: response.current_epoch, + start: response.epoch_start, + end: response.epoch_end, + currentGlobalSlot: response.current_global_slot, + currentTime: response.current_time, + vrfStats: { + evaluated: response.current_epoch_vrf_stats?.evaluated_slots, + total: response.current_epoch_vrf_stats?.total_slots, }, - }; - }), - ); + publicKey: response.public_key, + }, + }; + }), + ); } private getActive(attempt: Attempt): boolean { const slotTime = attempt.won_slot.slot_time; const now = Date.now(); - return slotTime <= now && (now < 3 * 60 * 1000 + slotTime) && !attempt.times?.discarded; + return ( + slotTime <= now && + now < 3 * 60 * 1000 + slotTime && + !attempt.times?.discarded + ); } private getMessage(attempt: Attempt): string { @@ -139,7 +189,13 @@ export class BlockProductionWonSlotsService { return (isDesktop() ? 'Upcoming ' : '') + 'Won Slot'; } - private calculateTimeAgo({ active, won_slot }: { active?: boolean; won_slot: WonSlot }): string { + private calculateTimeAgo({ + active, + won_slot, + }: { + active?: boolean; + won_slot: WonSlot; + }): string { if (active) { return 'Now'; } diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.state.ts b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.state.ts index f97282a156..ff1158b2cd 100644 --- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.state.ts +++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.state.ts @@ -1,16 +1,10 @@ import { createSelector, MemoizedSelector } from '@ngrx/store'; import { MinaState } from '@app/app.setup'; import { BlockProductionSelectors } from '@block-production/block-production.state'; -import { - BlockProductionWonSlotsFilters, -} from '@shared/types/block-production/won-slots/block-production-won-slots-filters.type'; -import { - BlockProductionWonSlotsSlot, -} from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type'; +import { BlockProductionWonSlotsFilters } from '@shared/types/block-production/won-slots/block-production-won-slots-filters.type'; +import { BlockProductionWonSlotsSlot } from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type'; import { TableSort } from '@openmina/shared'; -import { - BlockProductionWonSlotsEpoch, -} from '@shared/types/block-production/won-slots/block-production-won-slots-epoch.type'; +import { BlockProductionWonSlotsEpoch } from '@shared/types/block-production/won-slots/block-production-won-slots-epoch.type'; export interface BlockProductionWonSlotsState { epoch: BlockProductionWonSlotsEpoch; @@ -24,11 +18,10 @@ export interface BlockProductionWonSlotsState { serverResponded: boolean; } - -const select = (selector: (state: BlockProductionWonSlotsState) => T): MemoizedSelector => createSelector( - BlockProductionSelectors.wonSlots, - selector, -); +const select = ( + selector: (state: BlockProductionWonSlotsState) => T, +): MemoizedSelector => + createSelector(BlockProductionSelectors.wonSlots, selector); const epoch = select(state => state.epoch); const slots = select(state => state.slots); diff --git a/frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.html b/frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.html index 70316db46c..823649a095 100644 --- a/frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.html +++ b/frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.html @@ -2,35 +2,55 @@
- - - - -
+ + + + +
Public Key
- {{ card5.publicKey | truncateMid: 4: 4 }} - content_copy + {{ card5.publicKey | truncateMid: 4 : 4 }} + + content_copy +
-
+
open_in_new Open in Minascan
diff --git a/frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.ts b/frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.ts index 9b9c09ada5..bd9f51b676 100644 --- a/frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.ts +++ b/frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.ts @@ -1,30 +1,55 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { BlockProductionWonSlotsSelectors } from '@block-production/won-slots/block-production-won-slots.state'; -import { lastItem, ONE_BILLION, ONE_THOUSAND, safelyExecuteInBrowser } from '@openmina/shared'; +import { + lastItem, + ONE_BILLION, + ONE_THOUSAND, + safelyExecuteInBrowser, +} from '@openmina/shared'; import { getTimeDiff } from '@shared/helpers/date.helper'; import { filter } from 'rxjs'; -import { BlockProductionWonSlotsSlot, BlockProductionWonSlotsStatus, } from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type'; -import { BlockProductionWonSlotsEpoch, } from '@shared/types/block-production/won-slots/block-production-won-slots-epoch.type'; +import { + BlockProductionWonSlotsSlot, + BlockProductionWonSlotsStatus, +} from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type'; +import { BlockProductionWonSlotsEpoch } from '@shared/types/block-production/won-slots/block-production-won-slots-epoch.type'; import { BlockProductionWonSlotsActions } from '@block-production/won-slots/block-production-won-slots.actions'; import { AppSelectors } from '@app/app.state'; import { AppNodeDetails } from '@shared/types/app/app-node-details.type'; @Component({ - selector: 'mina-block-production-won-slots-cards', - templateUrl: './block-production-won-slots-cards.component.html', - styleUrls: ['./block-production-won-slots-cards.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column' }, - standalone: false + selector: 'mina-block-production-won-slots-cards', + templateUrl: './block-production-won-slots-cards.component.html', + styleUrls: ['./block-production-won-slots-cards.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column' }, + standalone: false, }) -export class BlockProductionWonSlotsCardsComponent extends StoreDispatcher implements OnInit { - - card1: { nextWonSlot: string; slot: number; } = { nextWonSlot: '-', slot: null }; - card2: { wonSlots: number; slotsUsed: number; } = { wonSlots: null, slotsUsed: null }; - card3: { acceptedBlocks: number; lastBlockTime: string; } = { acceptedBlocks: null, lastBlockTime: null }; - card4: { epochProgress: string; endIn: string; } = { epochProgress: '-', endIn: null }; - card5: { publicKey: string; totalRewards: string } = { publicKey: null, totalRewards: null }; +export class BlockProductionWonSlotsCardsComponent + extends StoreDispatcher + implements OnInit +{ + card1: { nextWonSlot: string; slot: number } = { + nextWonSlot: '-', + slot: null, + }; + card2: { wonSlots: number; slotsUsed: number } = { + wonSlots: null, + slotsUsed: null, + }; + card3: { acceptedBlocks: number; lastBlockTime: string } = { + acceptedBlocks: null, + lastBlockTime: null, + }; + card4: { epochProgress: string; endIn: string } = { + epochProgress: '-', + endIn: null, + }; + card5: { publicKey: string; totalRewards: string } = { + publicKey: null, + totalRewards: null, + }; private network: string; @@ -35,51 +60,95 @@ export class BlockProductionWonSlotsCardsComponent extends StoreDispatcher imple } private listenToActiveNode(): void { - this.select(AppSelectors.activeNodeDetails, (node: AppNodeDetails) => { - this.network = node.network?.toLowerCase(); - }, filter(Boolean)); + this.select( + AppSelectors.activeNodeDetails, + (node: AppNodeDetails) => { + this.network = node.network?.toLowerCase(); + }, + filter(Boolean), + ); } private listenToEpoch(): void { - this.select(BlockProductionWonSlotsSelectors.epoch, (epoch: BlockProductionWonSlotsEpoch) => { - const epochEndTime = this.addMinutesToTimestamp(epoch.currentTime / ONE_BILLION, (epoch.end - epoch.currentGlobalSlot) * 3); - this.card4.endIn = getTimeDiff(epochEndTime * ONE_THOUSAND).diff; - this.card4.epochProgress = Math.floor((epoch.currentGlobalSlot - epoch.start) / (epoch.end - epoch.start) * 100) + '%'; - this.card5.publicKey = epoch.publicKey; + this.select( + BlockProductionWonSlotsSelectors.epoch, + (epoch: BlockProductionWonSlotsEpoch) => { + const epochEndTime = this.addMinutesToTimestamp( + epoch.currentTime / ONE_BILLION, + (epoch.end - epoch.currentGlobalSlot) * 3, + ); + this.card4.endIn = getTimeDiff(epochEndTime * ONE_THOUSAND).diff; + this.card4.epochProgress = + Math.floor( + ((epoch.currentGlobalSlot - epoch.start) / + (epoch.end - epoch.start)) * + 100, + ) + '%'; + this.card5.publicKey = epoch.publicKey; - this.detect(); - }, filter(Boolean)); + this.detect(); + }, + filter(Boolean), + ); } private listenToSlots(): void { - this.select(BlockProductionWonSlotsSelectors.slots, (slots: BlockProductionWonSlotsSlot[]) => { - const nextSlot = slots.find(s => s.status === BlockProductionWonSlotsStatus.Scheduled || !s.status); - if (nextSlot) { - this.card1.nextWonSlot = getTimeDiff(nextSlot.slotTime).diff; - this.card1.slot = nextSlot.globalSlot; - } else { - this.card1.nextWonSlot = 'Now'; - this.card1.slot = slots.find(s => s.active)?.globalSlot; - } + this.select( + BlockProductionWonSlotsSelectors.slots, + (slots: BlockProductionWonSlotsSlot[]) => { + const nextSlot = slots.find( + s => + s.status === BlockProductionWonSlotsStatus.Scheduled || !s.status, + ); + if (nextSlot) { + this.card1.nextWonSlot = getTimeDiff(nextSlot.slotTime).diff; + this.card1.slot = nextSlot.globalSlot; + } else { + this.card1.nextWonSlot = 'Now'; + this.card1.slot = slots.find(s => s.active)?.globalSlot; + } - this.card2.wonSlots = slots.length; - this.card2.slotsUsed = slots.filter( - s => [BlockProductionWonSlotsStatus.Canonical, BlockProductionWonSlotsStatus.Orphaned, BlockProductionWonSlotsStatus.Discarded].includes(s.status), - ).length; + this.card2.wonSlots = slots.length; + this.card2.slotsUsed = slots.filter(s => + [ + BlockProductionWonSlotsStatus.Canonical, + BlockProductionWonSlotsStatus.Orphaned, + BlockProductionWonSlotsStatus.Discarded, + ].includes(s.status), + ).length; - this.card3.acceptedBlocks = slots.filter(s => s.status === BlockProductionWonSlotsStatus.Canonical).length; - this.card3.lastBlockTime = getTimeDiff(lastItem(slots.filter(s => s.status === BlockProductionWonSlotsStatus.Canonical))?.slotTime).diff; + this.card3.acceptedBlocks = slots.filter( + s => s.status === BlockProductionWonSlotsStatus.Canonical, + ).length; + this.card3.lastBlockTime = getTimeDiff( + lastItem( + slots.filter( + s => s.status === BlockProductionWonSlotsStatus.Canonical, + ), + )?.slotTime, + ).diff; - this.card5.totalRewards = slots - .filter(s => [BlockProductionWonSlotsStatus.Canonical].includes(s.status)) - .map(s => s.coinbaseRewards + s.txFeesRewards).reduce((a, b) => a + b, 0).toFixed(0); + this.card5.totalRewards = slots + .filter(s => + [BlockProductionWonSlotsStatus.Canonical].includes(s.status), + ) + .map(s => s.coinbaseRewards + s.txFeesRewards) + .reduce((a, b) => a + b, 0) + .toFixed(0); - this.card5.totalRewards = isNaN(+this.card5.totalRewards) ? '0' : this.card5.totalRewards; - this.detect(); - }, filter(slots => slots.length > 0)); + this.card5.totalRewards = isNaN(+this.card5.totalRewards) + ? '0' + : this.card5.totalRewards; + this.detect(); + }, + filter(slots => slots.length > 0), + ); } - private addMinutesToTimestamp(timestampInSeconds: number, minutesToAdd: number): number { + private addMinutesToTimestamp( + timestampInSeconds: number, + minutesToAdd: number, + ): number { const secondsToAdd = minutesToAdd * 60; return timestampInSeconds + secondsToAdd; } diff --git a/frontend/src/app/features/block-production/won-slots/filters/block-production-won-slots-filters.component.html b/frontend/src/app/features/block-production/won-slots/filters/block-production-won-slots-filters.component.html index 0740b702c7..ff7c44ff0d 100644 --- a/frontend/src/app/features/block-production/won-slots/filters/block-production-won-slots-filters.component.html +++ b/frontend/src/app/features/block-production/won-slots/filters/block-production-won-slots-filters.component.html @@ -1,14 +1,22 @@ - +
{{ totalWonSlots }} Won slots
-
+
{{ totalCanonical }} Produced
@@ -16,8 +24,13 @@
+ [ngClass]=" + filters.orphaned && totalOrphaned !== 0 + ? 'bg-aware-container aware-primary' + : 'bg-container tertiary' + " + (click)="changeFilter('orphaned', !filters.orphaned)" + > {{ totalOrphaned }} Orphaned
@@ -25,8 +38,13 @@
+ [ngClass]=" + filters.discarded && totalDiscarded !== 0 + ? 'bg-aware-container aware-primary' + : 'bg-container tertiary' + " + (click)="changeFilter('discarded', !filters.discarded)" + > {{ totalDiscarded }} Discarded
@@ -34,8 +52,13 @@
+ [ngClass]=" + filters.upcoming && totalFuture !== 0 + ? 'bg-container primary' + : 'bg-container tertiary' + " + (click)="changeFilter('upcoming', !filters.upcoming)" + > {{ totalFuture }} Upcoming
diff --git a/frontend/src/app/features/block-production/won-slots/filters/block-production-won-slots-filters.component.ts b/frontend/src/app/features/block-production/won-slots/filters/block-production-won-slots-filters.component.ts index e546080797..2c7740727c 100644 --- a/frontend/src/app/features/block-production/won-slots/filters/block-production-won-slots-filters.component.ts +++ b/frontend/src/app/features/block-production/won-slots/filters/block-production-won-slots-filters.component.ts @@ -1,25 +1,23 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { BlockProductionWonSlotsActions } from '@block-production/won-slots/block-production-won-slots.actions'; -import { - BlockProductionWonSlotsFilters, -} from '@shared/types/block-production/won-slots/block-production-won-slots-filters.type'; +import { BlockProductionWonSlotsFilters } from '@shared/types/block-production/won-slots/block-production-won-slots-filters.type'; import { BlockProductionWonSlotsSelectors } from '@block-production/won-slots/block-production-won-slots.state'; import { isMobile } from '@openmina/shared'; -import { - BlockProductionWonSlotsStatus, -} from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type'; +import { BlockProductionWonSlotsStatus } from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type'; @Component({ - selector: 'mina-block-production-won-slots-filters', - templateUrl: './block-production-won-slots-filters.component.html', - styleUrls: ['./block-production-won-slots-filters.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'h-xl w-100 flex-row border-top border-bottom' }, - standalone: false + selector: 'mina-block-production-won-slots-filters', + templateUrl: './block-production-won-slots-filters.component.html', + styleUrls: ['./block-production-won-slots-filters.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'h-xl w-100 flex-row border-top border-bottom' }, + standalone: false, }) -export class BlockProductionWonSlotsFiltersComponent extends StoreDispatcher implements OnInit { - +export class BlockProductionWonSlotsFiltersComponent + extends StoreDispatcher + implements OnInit +{ protected readonly isMobile = isMobile(); filters: BlockProductionWonSlotsFilters; @@ -44,16 +42,30 @@ export class BlockProductionWonSlotsFiltersComponent extends StoreDispatcher imp private listenToActiveEpoch(): void { this.select(BlockProductionWonSlotsSelectors.slots, slots => { this.totalWonSlots = slots.length; - this.totalCanonical = slots.filter(s => s.status === BlockProductionWonSlotsStatus.Canonical).length; - this.totalOrphaned = slots.filter(s => s.status === BlockProductionWonSlotsStatus.Orphaned).length; - this.totalFuture = slots.filter(s => !s.status || s.status === BlockProductionWonSlotsStatus.Scheduled).length; - this.totalDiscarded = slots.filter(s => s.status === BlockProductionWonSlotsStatus.Discarded).length; + this.totalCanonical = slots.filter( + s => s.status === BlockProductionWonSlotsStatus.Canonical, + ).length; + this.totalOrphaned = slots.filter( + s => s.status === BlockProductionWonSlotsStatus.Orphaned, + ).length; + this.totalFuture = slots.filter( + s => !s.status || s.status === BlockProductionWonSlotsStatus.Scheduled, + ).length; + this.totalDiscarded = slots.filter( + s => s.status === BlockProductionWonSlotsStatus.Discarded, + ).length; this.detect(); }); } - changeFilter(filter: keyof BlockProductionWonSlotsFilters, value: boolean): void { - this.dispatch2(BlockProductionWonSlotsActions.changeFilters({ filters: { ...this.filters, [filter]: value } })); + changeFilter( + filter: keyof BlockProductionWonSlotsFilters, + value: boolean, + ): void { + this.dispatch2( + BlockProductionWonSlotsActions.changeFilters({ + filters: { ...this.filters, [filter]: value }, + }), + ); } - } diff --git a/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.html b/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.html index 505fdcd56b..1dae52addf 100644 --- a/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.html +++ b/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.html @@ -1,10 +1,14 @@ -
+
@if (isMobile) {
- arrow_back + + arrow_back +
} @@ -15,8 +19,11 @@
{{ percentage }}%
}
-
+
@@ -28,7 +35,9 @@ {{ slot?.globalSlot }}
- Slot {{ slotStartedAlready ? 'started' : 'scheduled' }} + + Slot {{ slotStartedAlready ? 'started' : 'scheduled' }} + {{ scheduled }}
@@ -40,13 +49,17 @@
{{ vrfText }}
- check_circle + + check_circle + VRF Value  / Threshold
{{ vrf[0]?.toString().slice(0, 9) }} -  / {{ vrf[1]?.toString().slice(0, 9) }} + +  / {{ vrf[1]?.toString().slice(0, 9) }} +
@@ -57,103 +70,135 @@ {{ slot?.status ?? 'Waiting' }}
-
+
check_circle Created Staged Ledger Diff
- in {{ slot?.times?.stagedLedgerDiffCreate | secDuration: config }} + in + {{ slot?.times?.stagedLedgerDiffCreate | secDuration: config }}
-
+
check_circle Produced Block
- in {{ slot?.times?.produced | secDuration: config }} + in + {{ slot?.times?.produced | secDuration: config }}
-
+
check_circle Proof Created
- in {{ slot?.times?.proofCreate | secDuration: config }} + in + {{ slot?.times?.proofCreate | secDuration: config }}
-
+
check_circle Applied Block
- in {{ slot?.times?.blockApply | secDuration: config }} + in + {{ slot?.times?.blockApply | secDuration: config }}
-
+
check_circle Commited Block
- on {{ slot?.times?.committed | readableDate }} + on + {{ slot?.times?.committed | readableDate }}
Minascan -
Consensus - +
Included  in Main Chain
- +
Dropped  from Main Chain
Not observed + *ngIf=" + slot?.status !== BlockProductionWonSlotsStatus.Orphaned && + slot?.status !== BlockProductionWonSlotsStatus.Canonical + " + > + Not observed +
-
+
Confirmations {{ slot.lastObservedConfirmations }}
-
+
Dropped in favor - +
-
@@ -161,20 +206,28 @@ -
+
error Block Discarded
- unfold_{{ discardedOpen ? 'less' : 'more' }} + + unfold_{{ discardedOpen ? 'less' : 'more' }} +
-
+
{{ slot.discardReason }}
-
on {{ slot.times.discarded | readableDate: noMillisFormat }}
+
+ on {{ slot.times.discarded | readableDate: noMillisFormat }} +
diff --git a/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.scss b/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.scss index 032e1b635c..dcb8017fab 100644 --- a/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.scss +++ b/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.scss @@ -6,7 +6,12 @@ $orange: #ff833d; :host { //linear-gradient(64deg, rgba(87, 215, 255, 0.15) 10%, rgba(253, 162, 255, 0.15) 60%, rgba(255, 131, 61, 0.15) 82%) - background: linear-gradient(70deg, rgba($blue, .15) 5%, rgba($pink, .15) 45%, rgba($orange, .15) 90%); + background: linear-gradient( + 70deg, + rgba($blue, 0.15) 5%, + rgba($pink, 0.15) 45%, + rgba($orange, 0.15) 90% + ); } .top { @@ -26,7 +31,13 @@ $orange: #ff833d; top: 1px; left: -50px; width: 50px; - background: radial-gradient(openmina.$success-primary, openmina.$success-primary, openmina.$success-primary, transparent, transparent); + background: radial-gradient( + openmina.$success-primary, + openmina.$success-primary, + openmina.$success-primary, + transparent, + transparent + ); border-radius: 20px; animation: move 9s linear infinite; } @@ -55,7 +66,11 @@ $orange: #ff833d; } .mina-icon { - font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 20 !important; + font-variation-settings: + 'FILL' 1, + 'wght' 300, + 'GRAD' 0, + 'opsz' 20 !important; transition: none; color: openmina.$base-divider; @@ -81,7 +96,6 @@ $orange: #ff833d; } .bg-container { - &:hover { .step > .mina-icon { color: openmina.$base-primary !important; diff --git a/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.ts b/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.ts index 920d6d3248..069a39fbea 100644 --- a/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.ts +++ b/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.ts @@ -1,4 +1,12 @@ -import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + OnDestroy, + OnInit, + TemplateRef, + ViewChild, + ViewContainerRef, +} from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { BlockProductionWonSlotsSelectors } from '@block-production/won-slots/block-production-won-slots.state'; import { @@ -7,7 +15,17 @@ import { BlockProductionWonSlotTimes, } from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type'; import { getTimeDiff } from '@shared/helpers/date.helper'; -import { any, hasValue, isDesktop, isMobile, noMillisFormat, ONE_THOUSAND, safelyExecuteInBrowser, SecDurationConfig, toReadableDate } from '@openmina/shared'; +import { + any, + hasValue, + isDesktop, + isMobile, + noMillisFormat, + ONE_THOUSAND, + safelyExecuteInBrowser, + SecDurationConfig, + toReadableDate, +} from '@openmina/shared'; import { filter } from 'rxjs'; import { BlockProductionWonSlotsActions } from '@block-production/won-slots/block-production-won-slots.actions'; import { AppSelectors } from '@app/app.state'; @@ -16,16 +34,19 @@ import { Router } from '@angular/router'; import { Routes } from '@shared/enums/routes.enum'; @Component({ - selector: 'mina-block-production-won-slots-side-panel', - templateUrl: './block-production-won-slots-side-panel.component.html', - styleUrls: ['./block-production-won-slots-side-panel.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column h-100' }, - standalone: false + selector: 'mina-block-production-won-slots-side-panel', + templateUrl: './block-production-won-slots-side-panel.component.html', + styleUrls: ['./block-production-won-slots-side-panel.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column h-100' }, + standalone: false, }) -export class BlockProductionWonSlotsSidePanelComponent extends StoreDispatcher implements OnInit, OnDestroy { - - protected readonly BlockProductionWonSlotsStatus = BlockProductionWonSlotsStatus; +export class BlockProductionWonSlotsSidePanelComponent + extends StoreDispatcher + implements OnInit, OnDestroy +{ + protected readonly BlockProductionWonSlotsStatus = + BlockProductionWonSlotsStatus; protected readonly config: SecDurationConfig = { color: false, includeMinutes: true, @@ -47,18 +68,28 @@ export class BlockProductionWonSlotsSidePanelComponent extends StoreDispatcher i percentage: number; private timer: any; private stopTimer: boolean; - private stateWhenReachedZero: { globalSlot: number; status: BlockProductionWonSlotsStatus }; + private stateWhenReachedZero: { + globalSlot: number; + status: BlockProductionWonSlotsStatus; + }; private network: string; - @ViewChild('beforeLedger', { read: ViewContainerRef }) private beforeLedger: ViewContainerRef; - @ViewChild('ledger', { read: ViewContainerRef }) private ledger: ViewContainerRef; - @ViewChild('produced', { read: ViewContainerRef }) private produced: ViewContainerRef; - @ViewChild('proof', { read: ViewContainerRef }) private proof: ViewContainerRef; - @ViewChild('apply', { read: ViewContainerRef }) private apply: ViewContainerRef; + @ViewChild('beforeLedger', { read: ViewContainerRef }) + private beforeLedger: ViewContainerRef; + @ViewChild('ledger', { read: ViewContainerRef }) + private ledger: ViewContainerRef; + @ViewChild('produced', { read: ViewContainerRef }) + private produced: ViewContainerRef; + @ViewChild('proof', { read: ViewContainerRef }) + private proof: ViewContainerRef; + @ViewChild('apply', { read: ViewContainerRef }) + private apply: ViewContainerRef; @ViewChild('discarded') private discardedTemplate: TemplateRef; - constructor(private router: Router) {super();} + constructor(private router: Router) { + super(); + } ngOnInit(): void { this.listenToActiveSlot(); @@ -67,43 +98,53 @@ export class BlockProductionWonSlotsSidePanelComponent extends StoreDispatcher i } private listenToActiveNode(): void { - this.select(AppSelectors.activeNodeDetails, (node: AppNodeDetails) => { - this.network = node.network?.toLowerCase(); - }, filter(Boolean)); + this.select( + AppSelectors.activeNodeDetails, + (node: AppNodeDetails) => { + this.network = node.network?.toLowerCase(); + }, + filter(Boolean), + ); } private listenToActiveSlot(): void { - this.select(BlockProductionWonSlotsSelectors.activeSlot, (slot: BlockProductionWonSlotsSlot) => { - this.slot = slot; - this.title = slot.message; - this.percentage = [ - slot.times?.stagedLedgerDiffCreate, - slot.times?.produced, - slot.times?.proofCreate, - slot.times?.blockApply, - slot.times?.committed, - ].filter(t => hasValue(t)).length * 20; - - this.scheduled = toReadableDate(slot.slotTime); - this.slotStartedAlready = slot.slotTime < Date.now(); - - if ( - (this.stateWhenReachedZero?.globalSlot === slot.globalSlot && this.stateWhenReachedZero?.status !== slot.status) - || !this.stateWhenReachedZero - ) { - this.stopTimer = !this.slot.active; - this.stateWhenReachedZero = undefined; - } - - this.parse(); - - this.vrfText = this.getVrfText; - this.vrf = slot.vrfValueWithThreshold; - - this.createDiscardedView(); - - this.detect(); - }, filter(Boolean)); + this.select( + BlockProductionWonSlotsSelectors.activeSlot, + (slot: BlockProductionWonSlotsSlot) => { + this.slot = slot; + this.title = slot.message; + this.percentage = + [ + slot.times?.stagedLedgerDiffCreate, + slot.times?.produced, + slot.times?.proofCreate, + slot.times?.blockApply, + slot.times?.committed, + ].filter(t => hasValue(t)).length * 20; + + this.scheduled = toReadableDate(slot.slotTime); + this.slotStartedAlready = slot.slotTime < Date.now(); + + if ( + (this.stateWhenReachedZero?.globalSlot === slot.globalSlot && + this.stateWhenReachedZero?.status !== slot.status) || + !this.stateWhenReachedZero + ) { + this.stopTimer = !this.slot.active; + this.stateWhenReachedZero = undefined; + } + + this.parse(); + + this.vrfText = this.getVrfText; + this.vrf = slot.vrfValueWithThreshold; + + this.createDiscardedView(); + + this.detect(); + }, + filter(Boolean), + ); } viewInMinascan(): void { @@ -126,7 +167,10 @@ export class BlockProductionWonSlotsSidePanelComponent extends StoreDispatcher i private parse(): void { if (this.slot && !this.stopTimer) { - const remainingTime = getTimeDiff(this.addMinutesToTimestamp(this.slot.slotTime, 3), { withSecs: true }); + const remainingTime = getTimeDiff( + this.addMinutesToTimestamp(this.slot.slotTime, 3), + { withSecs: true }, + ); if (remainingTime.inFuture) { this.remainingTime = '-'; } @@ -134,7 +178,10 @@ export class BlockProductionWonSlotsSidePanelComponent extends StoreDispatcher i if (this.remainingTime === '0s') { /* when we reached 0s, we need to fetch data again because this slot is over and the user should see that in the table */ this.stopTimer = true; - this.stateWhenReachedZero = { globalSlot: this.slot.globalSlot, status: this.slot.status }; + this.stateWhenReachedZero = { + globalSlot: this.slot.globalSlot, + status: this.slot.status, + }; this.remainingTime = '-'; } this.detect(); @@ -143,7 +190,10 @@ export class BlockProductionWonSlotsSidePanelComponent extends StoreDispatcher i } } - private addMinutesToTimestamp(timestampInMilliseconds: number, minutesToAdd: number): number { + private addMinutesToTimestamp( + timestampInMilliseconds: number, + minutesToAdd: number, + ): number { return timestampInMilliseconds + minutesToAdd * ONE_THOUSAND * 60; } @@ -171,7 +221,9 @@ export class BlockProductionWonSlotsSidePanelComponent extends StoreDispatcher i if (times.discarded >= times.blockApplyEnd) { locationName = 'apply'; } - (any(this)[locationName] as ViewContainerRef)?.createEmbeddedView(this.discardedTemplate); + (any(this)[locationName] as ViewContainerRef)?.createEmbeddedView( + this.discardedTemplate, + ); } } @@ -184,5 +236,4 @@ export class BlockProductionWonSlotsSidePanelComponent extends StoreDispatcher i super.ngOnDestroy(); clearInterval(this.timer); } - } diff --git a/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.html b/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.html index 1c4d6d44ca..0e4eb4bc33 100644 --- a/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.html +++ b/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.html @@ -3,15 +3,27 @@ + *ngIf=" + row.active || row.status === BlockProductionWonSlotsStatus.Committed; + else icon + " + > - schedule + + schedule + circle - {{ row.percentage !== undefined ? row.percentage + '%' : '' }} {{ row.message }} + {{ row.percentage !== undefined ? row.percentage + '%' : '' }} + {{ row.message }} {{ row.age }} {{ row.height ?? '-' }} @@ -19,11 +31,19 @@ {{ row.slotInEpoch ?? '-' }} {{ row.transactionsTotal ?? '-' }} + [tooltip]=" + row.payments + + ' payments, ' + + row.delegations + + ' delegations, ' + + row.zkapps + + ' zkapps' + " + > + {{ row.transactionsTotal ?? '-' }} + {{ row.completedWorksCount ?? '-' }} {{ row.snarkFees ?? '-' }} {{ row.coinbaseRewards ?? '-' }} {{ row.txFeesRewards ?? '-' }} - diff --git a/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.scss b/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.scss index 3fd4ae9ca6..caedcd92e2 100644 --- a/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.scss +++ b/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.scss @@ -5,7 +5,9 @@ $pink: #fda2ff; $orange: #ff833d; .mina-icon.f-big { - font-variation-settings: 'FILL' 1, 'wght' 400 !important; + font-variation-settings: + 'FILL' 1, + 'wght' 400 !important; } .mina-icon.f-20 { diff --git a/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.ts b/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.ts index bf18d335bf..4623e55667 100644 --- a/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.ts +++ b/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.ts @@ -1,12 +1,25 @@ -import { ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + OnInit, + TemplateRef, + ViewChild, +} from '@angular/core'; import { MinaTableRustWrapper } from '@shared/base-classes/mina-table-rust-wrapper.class'; -import { getMergedRoute, isDesktop, MergedRoute, SecDurationConfig, TableColumnList } from '@openmina/shared'; +import { + getMergedRoute, + isDesktop, + MergedRoute, + SecDurationConfig, + TableColumnList, +} from '@openmina/shared'; import { Router } from '@angular/router'; import { SnarksWorkPoolToggleSidePanel } from '@snarks/work-pool/snarks-work-pool.actions'; import { filter, take } from 'rxjs'; import { Routes } from '@shared/enums/routes.enum'; import { - BlockProductionWonSlotsSlot, BlockProductionWonSlotsStatus, + BlockProductionWonSlotsSlot, + BlockProductionWonSlotsStatus, } from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type'; import { BlockProductionWonSlotsSelectors } from '@block-production/won-slots/block-production-won-slots.state'; import { BlockProductionWonSlotsActions } from '@block-production/won-slots/block-production-won-slots.actions'; @@ -14,16 +27,19 @@ import { SentryService } from '@core/services/sentry.service'; import { WebNodeService } from '@core/services/web-node.service'; @Component({ - selector: 'mina-block-production-won-slots-table', - templateUrl: './block-production-won-slots-table.component.html', - styleUrls: ['./block-production-won-slots-table.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column' }, - standalone: false + selector: 'mina-block-production-won-slots-table', + templateUrl: './block-production-won-slots-table.component.html', + styleUrls: ['./block-production-won-slots-table.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column' }, + standalone: false, }) -export class BlockProductionWonSlotsTableComponent extends MinaTableRustWrapper implements OnInit { - - protected readonly BlockProductionWonSlotsStatus = BlockProductionWonSlotsStatus; +export class BlockProductionWonSlotsTableComponent + extends MinaTableRustWrapper + implements OnInit +{ + protected readonly BlockProductionWonSlotsStatus = + BlockProductionWonSlotsStatus; protected readonly secConfig: SecDurationConfig = { color: true, undefinedAlternative: '-', @@ -31,18 +47,23 @@ export class BlockProductionWonSlotsTableComponent extends MinaTableRustWrapper< warn: 500, severe: 1000, }; - protected readonly tableHeads: TableColumnList = [ - { name: 'status', sort: 'message' }, - { name: 'age', sort: 'slotTime' }, - { name: 'height' }, - { name: 'global slot', sort: 'globalSlot', tooltip: 'Global slot since hard fork' }, - { name: 'epoch slot', sort: 'slotInEpoch' }, - { name: 'transactions', sort: 'transactionsTotal' }, - { name: 'SNARKs', sort: 'completedWorksCount' }, - { name: 'SNARK fees', sort: 'snarkFees' }, - { name: 'coinbase reward', sort: 'coinbaseRewards' }, - { name: 'tx fees reward', sort: 'txFeesRewards' }, - ]; + protected readonly tableHeads: TableColumnList = + [ + { name: 'status', sort: 'message' }, + { name: 'age', sort: 'slotTime' }, + { name: 'height' }, + { + name: 'global slot', + sort: 'globalSlot', + tooltip: 'Global slot since hard fork', + }, + { name: 'epoch slot', sort: 'slotInEpoch' }, + { name: 'transactions', sort: 'transactionsTotal' }, + { name: 'SNARKs', sort: 'completedWorksCount' }, + { name: 'SNARK fees', sort: 'snarkFees' }, + { name: 'coinbase reward', sort: 'coinbaseRewards' }, + { name: 'tx fees reward', sort: 'txFeesRewards' }, + ]; openSidePanel: boolean; @@ -50,9 +71,11 @@ export class BlockProductionWonSlotsTableComponent extends MinaTableRustWrapper< private fromRoute: string; - constructor(private router: Router, - private sentryService: SentryService, - private webnodeService: WebNodeService) { + constructor( + private router: Router, + private sentryService: SentryService, + private webnodeService: WebNodeService, + ) { super(); } @@ -64,7 +87,6 @@ export class BlockProductionWonSlotsTableComponent extends MinaTableRustWrapper< this.listenToActiveSlotChange(); this.listenToNodesChanges(); - // this.select(BlockProductionWonSlotsSelectors.filteredSlots, (slots: BlockProductionWonSlotsSlot[]) => { // const blockProductionWonSlotsSlot = slots.find(d => d.message.includes('Confirm') || d.message.includes('Producing')); // @@ -77,16 +99,23 @@ export class BlockProductionWonSlotsTableComponent extends MinaTableRustWrapper< // } // this.detect(); // }, filter((slots: BlockProductionWonSlotsSlot[]) => slots.length > 0)); - } protected override setupTable(): void { - this.table.gridTemplateColumns = isDesktop() ? [210, 140, 90, 142, 120, 120, 120, 124, 159, 150] : [150, 100, 90, 130, 100, 105, 100, 114, 139, 130]; + this.table.gridTemplateColumns = isDesktop() + ? [210, 140, 90, 142, 120, 120, 120, 124, 159, 150] + : [150, 100, 90, 130, 100, 105, 100, 114, 139, 130]; this.table.propertyForActiveCheck = 'globalSlot'; this.table.thGroupsTemplate = this.thGroupsTemplate; this.table.sortAction = BlockProductionWonSlotsActions.sort; this.table.sortSelector = BlockProductionWonSlotsSelectors.sort; - this.table.trackByFn = (_: number, item: BlockProductionWonSlotsSlot) => item.message + item.slotTime + item.transactionsTotal + item.snarkFees + item.coinbaseRewards + item.txFeesRewards; + this.table.trackByFn = (_: number, item: BlockProductionWonSlotsSlot) => + item.message + + item.slotTime + + item.transactionsTotal + + item.snarkFees + + item.coinbaseRewards + + item.txFeesRewards; } toggleSidePanel(): void { @@ -94,50 +123,68 @@ export class BlockProductionWonSlotsTableComponent extends MinaTableRustWrapper< } private listenToRouteChange(): void { - this.select(getMergedRoute, (route: MergedRoute) => { - if (route.params['id'] && this.table.rows.length === 0) { - this.fromRoute = route.params['id']; - } - }, take(1)); + this.select( + getMergedRoute, + (route: MergedRoute) => { + if (route.params['id'] && this.table.rows.length === 0) { + this.fromRoute = route.params['id']; + } + }, + take(1), + ); } private listenToNodesChanges(): void { - this.select(BlockProductionWonSlotsSelectors.filteredSlots, (slots: BlockProductionWonSlotsSlot[]) => { - this.table.rows = slots; - this.table.detect(); - if (this.fromRoute && slots.length > 0) { - this.scrollToElement(); - } - this.detect(); - }, filter((slots: BlockProductionWonSlotsSlot[]) => slots.length > 0)); + this.select( + BlockProductionWonSlotsSelectors.filteredSlots, + (slots: BlockProductionWonSlotsSlot[]) => { + this.table.rows = slots; + this.table.detect(); + if (this.fromRoute && slots.length > 0) { + this.scrollToElement(); + } + this.detect(); + }, + filter((slots: BlockProductionWonSlotsSlot[]) => slots.length > 0), + ); } private listenToActiveSlotChange(): void { - this.select(BlockProductionWonSlotsSelectors.activeSlot, (slot: BlockProductionWonSlotsSlot) => { - if (!this.table.activeRow) { - this.fromRoute = slot.globalSlot.toString(); - } - this.table.activeRow = slot; - this.table.detect(); - this.detect(); - }); + this.select( + BlockProductionWonSlotsSelectors.activeSlot, + (slot: BlockProductionWonSlotsSlot) => { + if (!this.table.activeRow) { + this.fromRoute = slot.globalSlot.toString(); + } + this.table.activeRow = slot; + this.table.detect(); + this.detect(); + }, + ); } private scrollToElement(): void { - const finder = (node: BlockProductionWonSlotsSlot) => node.globalSlot.toString() === this.fromRoute; + const finder = (node: BlockProductionWonSlotsSlot) => + node.globalSlot.toString() === this.fromRoute; const i = this.table.rows.findIndex(finder); this.table.scrollToElement(finder); delete this.fromRoute; this.onRowClick(this.table.rows[i]); } - protected override onRowClick(slot: BlockProductionWonSlotsSlot, isRealClick?: boolean): void { + protected override onRowClick( + slot: BlockProductionWonSlotsSlot, + isRealClick?: boolean, + ): void { if (!slot) { return; } if (this.table.activeRow?.globalSlot !== slot?.globalSlot || isRealClick) { this.dispatch2(BlockProductionWonSlotsActions.setActiveSlot({ slot })); - this.router.navigate([Routes.BLOCK_PRODUCTION, Routes.WON_SLOTS, slot.globalSlot], { queryParamsHandling: 'merge' }); + this.router.navigate( + [Routes.BLOCK_PRODUCTION, Routes.WON_SLOTS, slot.globalSlot], + { queryParamsHandling: 'merge' }, + ); } } } diff --git a/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.html b/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.html index b68bab1a95..1cdeaa1be5 100644 --- a/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.html +++ b/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.html @@ -1,5 +1,10 @@ -
-
+
+
@if (appliedPercentage === 100) { check_circle @@ -8,45 +13,68 @@ }
@if (lengthWithoutRoot) { - {{ appliedPercentage < 100 ? 'Syncing Last' : 'Last' }} {{ lengthWithoutRoot }} blocks + {{ appliedPercentage < 100 ? 'Syncing Last' : 'Last' }} + {{ lengthWithoutRoot }} blocks } @else { Waiting to sync ledgers }
-
{{ remaining ? 'ETA ~' + remaining + 's' : syncProgress }}
+
+ {{ remaining ? 'ETA ~' + remaining + 's' : syncProgress }} +
- - + + @if (isDesktop) { - + } - + @if (isDesktop) { - + }
diff --git a/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.scss b/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.scss index 67484968b0..ca3ee01ea1 100644 --- a/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.scss +++ b/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.scss @@ -2,11 +2,20 @@ :host { .mina-icon { - font-variation-settings: 'FILL' 1, 'wght' 300 !important; + font-variation-settings: + 'FILL' 1, + 'wght' 300 !important; } .background-gradient { - background: linear-gradient(145deg, openmina.$base-background 0%, openmina.$base-background 50%, openmina.$success-container 60%, openmina.$base-surface 85%, openmina.$base-surface 100%); + background: linear-gradient( + 145deg, + openmina.$base-background 0%, + openmina.$base-background 50%, + openmina.$success-container 60%, + openmina.$base-surface 85%, + openmina.$base-surface 100% + ); background-size: 500%; background-position: 0 50%; transition: background-position 0.7s ease; diff --git a/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.ts b/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.ts index 2edbf4a63b..c20bcd8d8e 100644 --- a/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.ts +++ b/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.ts @@ -1,27 +1,29 @@ -import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core'; -import {StoreDispatcher} from '@shared/base-classes/store-dispatcher.class'; -import {selectDashboardNodesAndPeers} from '@dashboard/dashboard.state'; -import {NodesOverviewNode} from '@shared/types/nodes/dashboard/nodes-overview-node.type'; -import {NodesOverviewNodeBlockStatus} from '@shared/types/nodes/dashboard/nodes-overview-block.type'; -import {isDesktop, lastItem, ONE_MILLION} from '@openmina/shared'; -import {DashboardPeer} from '@shared/types/dashboard/dashboard.peer'; -import {SentryService} from '@core/services/sentry.service'; -import {AppActions} from '@app/app.actions'; -import {WebNodeService} from "@core/services/web-node.service"; -import {RustService} from "@core/services/rust.service"; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; +import { selectDashboardNodesAndPeers } from '@dashboard/dashboard.state'; +import { NodesOverviewNode } from '@shared/types/nodes/dashboard/nodes-overview-node.type'; +import { NodesOverviewNodeBlockStatus } from '@shared/types/nodes/dashboard/nodes-overview-block.type'; +import { isDesktop, lastItem, ONE_MILLION } from '@openmina/shared'; +import { DashboardPeer } from '@shared/types/dashboard/dashboard.peer'; +import { SentryService } from '@core/services/sentry.service'; +import { AppActions } from '@app/app.actions'; +import { WebNodeService } from '@core/services/web-node.service'; +import { RustService } from '@core/services/rust.service'; const PENDING = 'Pending'; const SYNCED = 'Synced'; @Component({ - selector: 'mina-dashboard-blocks-sync', - templateUrl: './dashboard-blocks-sync.component.html', - styleUrls: ['./dashboard-blocks-sync.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false + selector: 'mina-dashboard-blocks-sync', + templateUrl: './dashboard-blocks-sync.component.html', + styleUrls: ['./dashboard-blocks-sync.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: false, }) -export class DashboardBlocksSyncComponent extends StoreDispatcher implements OnInit { - +export class DashboardBlocksSyncComponent + extends StoreDispatcher + implements OnInit +{ fetched: number; fetchedPercentage: string = '-'; applied: number; @@ -38,9 +40,11 @@ export class DashboardBlocksSyncComponent extends StoreDispatcher implements OnI private syncStartTime: number = Date.now(); - constructor(private sentryService: SentryService, - private webNodeService: WebNodeService, - private rustService: RustService) { + constructor( + private sentryService: SentryService, + private webNodeService: WebNodeService, + private rustService: RustService, + ) { super(); } @@ -49,63 +53,75 @@ export class DashboardBlocksSyncComponent extends StoreDispatcher implements OnI } private listenToNodesChanges(): void { - this.select(selectDashboardNodesAndPeers, ([nodes, peers]: [NodesOverviewNode[], DashboardPeer[]]) => { - if (nodes.length === 0) { - this.fetched = undefined; - this.fetchedPercentage = '-'; - this.applied = undefined; - this.appliedPercentage = undefined; - this.root = undefined; - this.rootText = PENDING; - this.bestTipBlock = undefined; - this.bestTipBlockSyncedText = PENDING; - this.targetBlock = undefined; - this.syncProgress = undefined; - } else { - const blocks = nodes[0].blocks; - - const blocksFetched = blocks.filter(b => b.fetchEnd).length; - const blocksApplied = blocks.filter(b => b.applyEnd).length; - if (blocksApplied < 291) { - - const syncStart = Math.min(...blocks.map(b => b.fetchStart).filter(Boolean)) / ONE_MILLION; - const now = Date.now(); - const secondsPassed = (now - syncStart) / 1000; - - const fetchWeight = 1; - const applyWeight = 5; - - // Apply weights: 1 for each fetched block, and 5 for each applied block - const weightedBlocksTotal = (blocksFetched * fetchWeight) + (blocksApplied * applyWeight); - const blocksPerSecond = weightedBlocksTotal / secondsPassed; - - if (blocksPerSecond > 0) { - const weightedBlocksRemaining = (291 * fetchWeight) + (291 * applyWeight) - weightedBlocksTotal; - const secondsRemaining = weightedBlocksRemaining / blocksPerSecond; - this.remaining = Math.ceil(secondsRemaining); - } + this.select( + selectDashboardNodesAndPeers, + ([nodes, peers]: [NodesOverviewNode[], DashboardPeer[]]) => { + if (nodes.length === 0) { + this.fetched = undefined; + this.fetchedPercentage = '-'; + this.applied = undefined; + this.appliedPercentage = undefined; + this.root = undefined; + this.rootText = PENDING; + this.bestTipBlock = undefined; + this.bestTipBlockSyncedText = PENDING; + this.targetBlock = undefined; + this.syncProgress = undefined; } else { - this.remaining = null; - } + const blocks = nodes[0].blocks; + + const blocksFetched = blocks.filter(b => b.fetchEnd).length; + const blocksApplied = blocks.filter(b => b.applyEnd).length; + if (blocksApplied < 291) { + const syncStart = + Math.min(...blocks.map(b => b.fetchStart).filter(Boolean)) / + ONE_MILLION; + const now = Date.now(); + const secondsPassed = (now - syncStart) / 1000; + + const fetchWeight = 1; + const applyWeight = 5; + + // Apply weights: 1 for each fetched block, and 5 for each applied block + const weightedBlocksTotal = + blocksFetched * fetchWeight + blocksApplied * applyWeight; + const blocksPerSecond = weightedBlocksTotal / secondsPassed; + + if (blocksPerSecond > 0) { + const weightedBlocksRemaining = + 291 * fetchWeight + 291 * applyWeight - weightedBlocksTotal; + const secondsRemaining = + weightedBlocksRemaining / blocksPerSecond; + this.remaining = Math.ceil(secondsRemaining); + } + } else { + this.remaining = null; + } - this.extractNodesData(nodes); - this.extractPeersData(peers); + this.extractNodesData(nodes); + this.extractPeersData(peers); - if (this.rustService.activeNodeIsWebNode) { - this.sentryService.updateBlockSyncStatus(nodes[0].blocks, this.syncStartTime, this.webNodeService.publicKey); - } + if (this.rustService.activeNodeIsWebNode) { + this.sentryService.updateBlockSyncStatus( + nodes[0].blocks, + this.syncStartTime, + this.webNodeService.publicKey, + ); + } - if (this.appliedPercentage === 100) { - this.dispatch2(AppActions.getNodeDetails()); + if (this.appliedPercentage === 100) { + this.dispatch2(AppActions.getNodeDetails()); + } } - } - this.detect(); - }); + this.detect(); + }, + ); } private extractPeersData(peers: DashboardPeer[]): void { const highestHeightPeer = peers.reduce( - (acc: DashboardPeer, peer: DashboardPeer) => peer.height > acc.height ? peer : acc, + (acc: DashboardPeer, peer: DashboardPeer) => + peer.height > acc.height ? peer : acc, { height: 0 } as DashboardPeer, ); this.targetBlock = highestHeightPeer.height; @@ -116,7 +132,11 @@ export class DashboardBlocksSyncComponent extends StoreDispatcher implements OnI if (blocks.length > 0) { this.bestTipBlock = blocks[0].height; - this.bestTipBlockSyncedText = 'Fetched ' + this.calculateProgressTime(nodes[0].bestTipReceivedTimestamp * ONE_MILLION).slice(7); + this.bestTipBlockSyncedText = + 'Fetched ' + + this.calculateProgressTime( + nodes[0].bestTipReceivedTimestamp * ONE_MILLION, + ).slice(7); this.syncProgress = this.bestTipBlockSyncedText.slice(8); if (lastItem(blocks).status !== NodesOverviewNodeBlockStatus.APPLIED) { this.syncProgress = 'Pending'; @@ -127,7 +147,8 @@ export class DashboardBlocksSyncComponent extends StoreDispatcher implements OnI this.root = lastItem(blocks).height; this.rootText = this.calculateProgressTime(lastItem(blocks).applyEnd); if (blocks[0].status === NodesOverviewNodeBlockStatus.APPLIED) { - this.bestTipBlockSyncedText = SYNCED + ' ' + this.bestTipBlockSyncedText.slice(7); + this.bestTipBlockSyncedText = + SYNCED + ' ' + this.bestTipBlockSyncedText.slice(7); } } else { this.root = null; @@ -138,10 +159,21 @@ export class DashboardBlocksSyncComponent extends StoreDispatcher implements OnI this.lengthWithoutRoot = blocks.length ?? null; // 290 or 291 - this.fetched = blocks.filter(b => ![NodesOverviewNodeBlockStatus.MISSING, NodesOverviewNodeBlockStatus.FETCHING].includes(b.status)).length; - this.applied = blocks.filter(b => b.status === NodesOverviewNodeBlockStatus.APPLIED).length; - this.fetchedPercentage = Math.floor(this.fetched * 100 / (this.lengthWithoutRoot || 100)) + '%'; - this.appliedPercentage = Math.floor(this.applied * 100 / (this.lengthWithoutRoot || 100)); + this.fetched = blocks.filter( + b => + ![ + NodesOverviewNodeBlockStatus.MISSING, + NodesOverviewNodeBlockStatus.FETCHING, + ].includes(b.status), + ).length; + this.applied = blocks.filter( + b => b.status === NodesOverviewNodeBlockStatus.APPLIED, + ).length; + this.fetchedPercentage = + Math.floor((this.fetched * 100) / (this.lengthWithoutRoot || 100)) + '%'; + this.appliedPercentage = Math.floor( + (this.applied * 100) / (this.lengthWithoutRoot || 100), + ); } private calculateProgressTime(timestamp: number): string { diff --git a/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.html b/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.html index 7e4e9379c1..b48de76273 100644 --- a/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.html +++ b/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.html @@ -1,20 +1,31 @@ -
-
+
+
@if (totalProgress === 100) { check_circle } @else { } -
Ledgers
+
+ Ledgers +
{{ progress }}
-
+
- + Staking ledger
@if (stakingProgress === 100) { @@ -25,12 +36,20 @@
+ *ngTemplateOutlet=" + snarkedSteps; + context: { + snarked: ledgers.stakingEpoch.snarked, + config: configMap.stakingEpoch, + } + " + >
-
+
- + Next epoch ledger
@if (nextProgress === 100) { @@ -41,12 +60,23 @@
+ *ngTemplateOutlet=" + snarkedSteps; + context: { + snarked: ledgers.nextEpoch.snarked, + config: configMap.nextEpoch, + } + " + >
-
+
- + Snarked ledger at the root
@if (rootSnarkedProgress === 100) { @@ -57,38 +87,89 @@
+ *ngTemplateOutlet=" + snarkedSteps; + context: { + snarked: ledgers.rootSnarked.snarked, + config: configMap.rootSnarked, + } + " + >
-
+
- + Staged ledger at the root
- @if ((rootStagedProgress === 100 || !isWebNode) && rootSnarkedProgress === 100) { -
{{ rootStagedProgress }}%
- } @else if (remainingReconstruct && remainingRootStagedLedgerFetchParts + remainingReconstruct) { -
ETA ~{{ remainingRootStagedLedgerFetchParts + remainingReconstruct }}s
+ @if ( + (rootStagedProgress === 100 || !isWebNode) && + rootSnarkedProgress === 100 + ) { +
+ {{ rootStagedProgress }}% +
+ } @else if ( + remainingReconstruct && + remainingRootStagedLedgerFetchParts + remainingReconstruct + ) { +
+ ETA ~{{ + remainingRootStagedLedgerFetchParts + remainingReconstruct + }}s +
}
-
+
Fetch parts @if (fetchedParts.total) { {{ fetchedParts.current }}/{{ fetchedParts.total }} }
-
{{ ledgers.rootStaged.staged.fetchPartsDuration ?? ledgers.rootStaged.staged.fetchPassedTime | secDuration: configMap.rootStaged }}
+
+ {{ + ledgers.rootStaged.staged.fetchPartsDuration ?? + ledgers.rootStaged.staged.fetchPassedTime + | secDuration: configMap.rootStaged + }} +
-
+
Reconstruct
-
{{ ledgers.rootStaged.staged.reconstructDuration ?? ledgers.rootStaged.staged.reconstructPassedTime | secDuration: configMap.rootStaged }}
+
+ {{ + ledgers.rootStaged.staged.reconstructDuration ?? + ledgers.rootStaged.staged.reconstructPassedTime + | secDuration: configMap.rootStaged + }} +
@@ -97,17 +178,35 @@
-
+
Fetch hashes
-
{{ snarked.fetchHashesDuration ?? snarked.fetchHashesPassedTime | secDuration: config }}
+
+ {{ + snarked.fetchHashesDuration ?? snarked.fetchHashesPassedTime + | secDuration: config + }} +
-
+
Fetch accounts
-
{{ snarked.fetchAccountsDuration ?? snarked.fetchAccountsPassedTime | secDuration: config }}
+
+ {{ + snarked.fetchAccountsDuration ?? snarked.fetchAccountsPassedTime + | secDuration: config + }} +
@@ -120,7 +219,10 @@ - + @@ -131,7 +233,9 @@ -
+
Start: {{ start | readableDate }} diff --git a/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.scss b/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.scss index 15ba85ce57..bded86c5c0 100644 --- a/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.scss +++ b/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.scss @@ -1,7 +1,9 @@ @use 'openmina'; .mina-icon { - font-variation-settings: 'FILL' 1, 'wght' 300 !important; + font-variation-settings: + 'FILL' 1, + 'wght' 300 !important; } .bg-base { @@ -9,7 +11,14 @@ } .background-gradient { - background: linear-gradient(125deg, openmina.$base-background 0%, openmina.$base-background 50%, openmina.$success-container 60%, openmina.$base-surface 85%, openmina.$base-surface 100%); + background: linear-gradient( + 125deg, + openmina.$base-background 0%, + openmina.$base-background 50%, + openmina.$success-container 60%, + openmina.$base-surface 85%, + openmina.$base-surface 100% + ); background-size: 500%; background-position: 0 50%; transition: background-position 0.7s ease; diff --git a/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.ts b/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.ts index 4ec29ef7fc..52b5b53542 100644 --- a/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.ts +++ b/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.ts @@ -1,4 +1,12 @@ -import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + OnDestroy, + OnInit, + TemplateRef, + ViewChild, + ViewContainerRef, +} from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { selectDashboardNodesAndRpcStats } from '@dashboard/dashboard.state'; import { @@ -19,17 +27,17 @@ import { take } from 'rxjs'; import { WebNodeService } from '@core/services/web-node.service'; type LedgerConfigMap = { - stakingEpoch: SecDurationConfig, - nextEpoch: SecDurationConfig, - rootSnarked: SecDurationConfig, - rootStaged: SecDurationConfig, + stakingEpoch: SecDurationConfig; + nextEpoch: SecDurationConfig; + rootSnarked: SecDurationConfig; + rootStaged: SecDurationConfig; }; type DetailsProgress = { - staking: { fetchHashes: number, fetchAccounts: number }, - next: { fetchHashes: number, fetchAccounts: number }, - rootSnarked: { fetchHashes: number, fetchAccounts: number }, - rootStaged: { fetchParts: number, reconstruct: number }, + staking: { fetchHashes: number; fetchAccounts: number }; + next: { fetchHashes: number; fetchAccounts: number }; + rootSnarked: { fetchHashes: number; fetchAccounts: number }; + rootStaged: { fetchParts: number; reconstruct: number }; }; const initialSnarked: NodesOverviewLedgerEpochStep = { @@ -63,14 +71,16 @@ const initialStaged: NodesOverviewRootStagedLedgerStep = { }; @Component({ - selector: 'mina-dashboard-ledger', - templateUrl: './dashboard-ledger.component.html', - styleUrls: ['./dashboard-ledger.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false + selector: 'mina-dashboard-ledger', + templateUrl: './dashboard-ledger.component.html', + styleUrls: ['./dashboard-ledger.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: false, }) -export class DashboardLedgerComponent extends StoreDispatcher implements OnInit, OnDestroy { - +export class DashboardLedgerComponent + extends StoreDispatcher + implements OnInit, OnDestroy +{ ledgers: NodesOverviewLedger = { stakingEpoch: initialSnarked, nextEpoch: initialSnarked, @@ -91,7 +101,7 @@ export class DashboardLedgerComponent extends StoreDispatcher implements OnInit, totalProgress: number; isWebNode: boolean; - fetchedParts: { current: number, total: number } = { current: 0, total: 0 }; + fetchedParts: { current: number; total: number } = { current: 0, total: 0 }; remainingStakingLedger: number; private previousStakingLedgerDownloaded: number; @@ -104,13 +114,20 @@ export class DashboardLedgerComponent extends StoreDispatcher implements OnInit, remainingReconstruct: number = 20; private reconstructTimer: any; - @ViewChild('tooltipRef') private tooltipRef: TemplateRef<{ start: number, end: number }>; + @ViewChild('tooltipRef') private tooltipRef: TemplateRef<{ + start: number; + end: number; + }>; private overlayRef: OverlayRef; - constructor(private overlay: Overlay, - private viewContainerRef: ViewContainerRef, - private sentryService: SentryService, - private webNodeService: WebNodeService) { super() } + constructor( + private overlay: Overlay, + private viewContainerRef: ViewContainerRef, + private sentryService: SentryService, + private webNodeService: WebNodeService, + ) { + super(); + } ngOnInit(): void { this.listenToActiveNode(); @@ -124,135 +141,210 @@ export class DashboardLedgerComponent extends StoreDispatcher implements OnInit, } private listenToNodesChanges(): void { - this.select(selectDashboardNodesAndRpcStats, ([nodes, rpcStats]: [NodesOverviewNode[], DashboardRpcStats]) => { - if (nodes.length === 0) { - this.ledgers = { - stakingEpoch: initialSnarked, - nextEpoch: initialSnarked, - rootSnarked: initialSnarked, - rootStaged: initialStaged, - }; - this.configMap = { - stakingEpoch: this.emptyConfig, - nextEpoch: this.emptyConfig, - rootSnarked: this.emptyConfig, - rootStaged: this.emptyConfig, - }; - this.progress = undefined; - this.stakingProgress = 0; - this.nextProgress = 0; - this.rootSnarkedProgress = 0; - this.rootStagedProgress = 0; - this.totalProgress = 0; - this.fetchedParts = { current: 0, total: 0 }; - } else { - this.ledgers = nodes[0].ledgers; - - const getConfig = (state: NodesOverviewLedgerStepState): SecDurationConfig => - state === NodesOverviewLedgerStepState.LOADING ? this.undefinedConfig : this.emptyConfig; - - this.configMap = { - stakingEpoch: getConfig(this.ledgers.stakingEpoch.state), - nextEpoch: getConfig(this.ledgers.nextEpoch.state), - rootSnarked: getConfig(this.ledgers.rootSnarked.state), - rootStaged: getConfig(this.ledgers.rootStaged.state), - }; - this.setProgressTime(); - - const stakingLedgerStartTime = this.ledgers.stakingEpoch.snarked.fetchHashesStart / ONE_MILLION; - const currentStakingLedgerDownloaded = rpcStats.stakingLedger?.fetched; - if ( - this.previousStakingLedgerDownloaded && currentStakingLedgerDownloaded && - stakingLedgerStartTime < Date.now() - ) { - const timeSinceDownloadStarted = Date.now() - stakingLedgerStartTime; - const remaining = rpcStats.stakingLedger?.estimation - currentStakingLedgerDownloaded; - const remainingTime = (remaining / currentStakingLedgerDownloaded) * timeSinceDownloadStarted; - this.remainingStakingLedger = Math.floor(remainingTime / 1000); - } - this.previousStakingLedgerDownloaded = currentStakingLedgerDownloaded; - - const nextLedgerStartTime = this.ledgers.nextEpoch.snarked.fetchHashesStart / ONE_MILLION; - const currentNextLedgerDownloaded = rpcStats.nextLedger?.fetched; - if ( - this.previousNextLedgerDownloaded && currentNextLedgerDownloaded && - nextLedgerStartTime < Date.now() - ) { - const timeSinceDownloadStarted = Date.now() - nextLedgerStartTime; - const remaining = rpcStats.nextLedger?.estimation - currentNextLedgerDownloaded; - const remainingTime = (remaining / currentNextLedgerDownloaded) * timeSinceDownloadStarted; - this.remainingNextLedger = Math.floor(remainingTime / 1000); - } - this.previousNextLedgerDownloaded = currentNextLedgerDownloaded; - - const rootSnarkedLedgerStartTime = this.ledgers.rootSnarked.snarked.fetchHashesStart / ONE_MILLION; - const currentRootSnarkedLedgerDownloaded = rpcStats.snarkedRootLedger?.fetched; - if ( - this.previousRootSnarkedLedgerDownloaded && currentRootSnarkedLedgerDownloaded && - rootSnarkedLedgerStartTime < Date.now() - ) { - const timeSinceDownloadStarted = Date.now() - rootSnarkedLedgerStartTime; - const remaining = rpcStats.snarkedRootLedger?.estimation - currentRootSnarkedLedgerDownloaded; - const remainingTime = (remaining / currentRootSnarkedLedgerDownloaded) * timeSinceDownloadStarted; - this.remainingRootSnarkedLedger = Math.floor(remainingTime / 1000); - } - this.previousRootSnarkedLedgerDownloaded = currentRootSnarkedLedgerDownloaded; - - if (this.isWebNode) { - const rootStagedLedgerStartTime = this.ledgers.rootStaged.staged.fetchPartsStart / ONE_MILLION; - const currentRootStagedLedgerDownloaded = rpcStats.stagedRootLedger?.fetched; + this.select( + selectDashboardNodesAndRpcStats, + ([nodes, rpcStats]: [NodesOverviewNode[], DashboardRpcStats]) => { + if (nodes.length === 0) { + this.ledgers = { + stakingEpoch: initialSnarked, + nextEpoch: initialSnarked, + rootSnarked: initialSnarked, + rootStaged: initialStaged, + }; + this.configMap = { + stakingEpoch: this.emptyConfig, + nextEpoch: this.emptyConfig, + rootSnarked: this.emptyConfig, + rootStaged: this.emptyConfig, + }; + this.progress = undefined; + this.stakingProgress = 0; + this.nextProgress = 0; + this.rootSnarkedProgress = 0; + this.rootStagedProgress = 0; + this.totalProgress = 0; + this.fetchedParts = { current: 0, total: 0 }; + } else { + this.ledgers = nodes[0].ledgers; + + const getConfig = ( + state: NodesOverviewLedgerStepState, + ): SecDurationConfig => + state === NodesOverviewLedgerStepState.LOADING + ? this.undefinedConfig + : this.emptyConfig; + + this.configMap = { + stakingEpoch: getConfig(this.ledgers.stakingEpoch.state), + nextEpoch: getConfig(this.ledgers.nextEpoch.state), + rootSnarked: getConfig(this.ledgers.rootSnarked.state), + rootStaged: getConfig(this.ledgers.rootStaged.state), + }; + this.setProgressTime(); + + const stakingLedgerStartTime = + this.ledgers.stakingEpoch.snarked.fetchHashesStart / ONE_MILLION; + const currentStakingLedgerDownloaded = + rpcStats.stakingLedger?.fetched; if ( - this.previousRootStagedLedgerDownloaded && currentRootStagedLedgerDownloaded && - rootStagedLedgerStartTime < Date.now() + this.previousStakingLedgerDownloaded && + currentStakingLedgerDownloaded && + stakingLedgerStartTime < Date.now() ) { - const timeSinceDownloadStarted = Date.now() - rootStagedLedgerStartTime; - const remaining = rpcStats.stagedRootLedger?.estimation - currentRootStagedLedgerDownloaded; - const remainingTime = (remaining / currentRootStagedLedgerDownloaded) * timeSinceDownloadStarted; - this.remainingRootStagedLedgerFetchParts = Math.floor(remainingTime / 1000); + const timeSinceDownloadStarted = + Date.now() - stakingLedgerStartTime; + const remaining = + rpcStats.stakingLedger?.estimation - + currentStakingLedgerDownloaded; + const remainingTime = + (remaining / currentStakingLedgerDownloaded) * + timeSinceDownloadStarted; + this.remainingStakingLedger = Math.floor(remainingTime / 1000); } - this.previousRootStagedLedgerDownloaded = currentRootStagedLedgerDownloaded; - } + this.previousStakingLedgerDownloaded = currentStakingLedgerDownloaded; - this.stakingProgress = rpcStats.stakingLedger?.fetched / rpcStats.stakingLedger?.estimation * 100 || 0; - this.nextProgress = rpcStats.nextLedger?.fetched / rpcStats.nextLedger?.estimation * 100 || 0; - this.rootSnarkedProgress = rpcStats.snarkedRootLedger?.fetched / rpcStats.snarkedRootLedger?.estimation * 100 || 0; + const nextLedgerStartTime = + this.ledgers.nextEpoch.snarked.fetchHashesStart / ONE_MILLION; + const currentNextLedgerDownloaded = rpcStats.nextLedger?.fetched; + if ( + this.previousNextLedgerDownloaded && + currentNextLedgerDownloaded && + nextLedgerStartTime < Date.now() + ) { + const timeSinceDownloadStarted = Date.now() - nextLedgerStartTime; + const remaining = + rpcStats.nextLedger?.estimation - currentNextLedgerDownloaded; + const remainingTime = + (remaining / currentNextLedgerDownloaded) * + timeSinceDownloadStarted; + this.remainingNextLedger = Math.floor(remainingTime / 1000); + } + this.previousNextLedgerDownloaded = currentNextLedgerDownloaded; - if (rpcStats.stagedRootLedger?.estimation) { - this.fetchedParts = { current: rpcStats.stagedRootLedger?.fetched, total: rpcStats.stagedRootLedger?.estimation }; - } + const rootSnarkedLedgerStartTime = + this.ledgers.rootSnarked.snarked.fetchHashesStart / ONE_MILLION; + const currentRootSnarkedLedgerDownloaded = + rpcStats.snarkedRootLedger?.fetched; + if ( + this.previousRootSnarkedLedgerDownloaded && + currentRootSnarkedLedgerDownloaded && + rootSnarkedLedgerStartTime < Date.now() + ) { + const timeSinceDownloadStarted = + Date.now() - rootSnarkedLedgerStartTime; + const remaining = + rpcStats.snarkedRootLedger?.estimation - + currentRootSnarkedLedgerDownloaded; + const remainingTime = + (remaining / currentRootSnarkedLedgerDownloaded) * + timeSinceDownloadStarted; + this.remainingRootSnarkedLedger = Math.floor(remainingTime / 1000); + } + this.previousRootSnarkedLedgerDownloaded = + currentRootSnarkedLedgerDownloaded; + + if (this.isWebNode) { + const rootStagedLedgerStartTime = + this.ledgers.rootStaged.staged.fetchPartsStart / ONE_MILLION; + const currentRootStagedLedgerDownloaded = + rpcStats.stagedRootLedger?.fetched; + if ( + this.previousRootStagedLedgerDownloaded && + currentRootStagedLedgerDownloaded && + rootStagedLedgerStartTime < Date.now() + ) { + const timeSinceDownloadStarted = + Date.now() - rootStagedLedgerStartTime; + const remaining = + rpcStats.stagedRootLedger?.estimation - + currentRootStagedLedgerDownloaded; + const remainingTime = + (remaining / currentRootStagedLedgerDownloaded) * + timeSinceDownloadStarted; + this.remainingRootStagedLedgerFetchParts = Math.floor( + remainingTime / 1000, + ); + } + this.previousRootStagedLedgerDownloaded = + currentRootStagedLedgerDownloaded; + } - this.rootStagedProgress = 0; - if (this.ledgers.rootStaged.staged.fetchPartsEnd) { - this.rootStagedProgress += 50; - } - if (this.ledgers.rootStaged.staged.reconstructEnd) { - this.rootStagedProgress += 50; - } - if (this.rootStagedProgress < 100 && this.isWebNode && this.ledgers.rootStaged.staged.fetchPartsEnd && !this.reconstructTimer) { - this.startTimerForReconstruct(); - } else if (this.rootStagedProgress === 100) { - clearTimeout(this.reconstructTimer); - } + this.stakingProgress = + (rpcStats.stakingLedger?.fetched / + rpcStats.stakingLedger?.estimation) * + 100 || 0; + this.nextProgress = + (rpcStats.nextLedger?.fetched / rpcStats.nextLedger?.estimation) * + 100 || 0; + this.rootSnarkedProgress = + (rpcStats.snarkedRootLedger?.fetched / + rpcStats.snarkedRootLedger?.estimation) * + 100 || 0; + + if (rpcStats.stagedRootLedger?.estimation) { + this.fetchedParts = { + current: rpcStats.stagedRootLedger?.fetched, + total: rpcStats.stagedRootLedger?.estimation, + }; + } - if (this.ledgers.stakingEpoch.state === NodesOverviewLedgerStepState.SUCCESS) { - this.stakingProgress = 100; - } - if (this.ledgers.nextEpoch.state === NodesOverviewLedgerStepState.SUCCESS) { - this.nextProgress = 100; - } - if (this.ledgers.rootSnarked.state === NodesOverviewLedgerStepState.SUCCESS) { - this.rootSnarkedProgress = 100; - } - if (this.ledgers.rootStaged.state === NodesOverviewLedgerStepState.SUCCESS) { - this.rootStagedProgress = 100; + this.rootStagedProgress = 0; + if (this.ledgers.rootStaged.staged.fetchPartsEnd) { + this.rootStagedProgress += 50; + } + if (this.ledgers.rootStaged.staged.reconstructEnd) { + this.rootStagedProgress += 50; + } + if ( + this.rootStagedProgress < 100 && + this.isWebNode && + this.ledgers.rootStaged.staged.fetchPartsEnd && + !this.reconstructTimer + ) { + this.startTimerForReconstruct(); + } else if (this.rootStagedProgress === 100) { + clearTimeout(this.reconstructTimer); + } + if ( + this.ledgers.stakingEpoch.state === + NodesOverviewLedgerStepState.SUCCESS + ) { + this.stakingProgress = 100; + } + if ( + this.ledgers.nextEpoch.state === + NodesOverviewLedgerStepState.SUCCESS + ) { + this.nextProgress = 100; + } + if ( + this.ledgers.rootSnarked.state === + NodesOverviewLedgerStepState.SUCCESS + ) { + this.rootSnarkedProgress = 100; + } + if ( + this.ledgers.rootStaged.state === + NodesOverviewLedgerStepState.SUCCESS + ) { + this.rootStagedProgress = 100; + } + this.totalProgress = + (this.stakingProgress + + this.nextProgress + + this.rootSnarkedProgress + + this.rootStagedProgress) / + 4; + + this.sentryService.updateLedgerSyncStatus( + this.ledgers, + this.webNodeService.publicKey, + ); } - this.totalProgress = (this.stakingProgress + this.nextProgress + this.rootSnarkedProgress + this.rootStagedProgress) / 4; - - this.sentryService.updateLedgerSyncStatus(this.ledgers, this.webNodeService.publicKey); - } - this.detect(); - }); + this.detect(); + }, + ); } startTimerForReconstruct(): void { @@ -273,22 +365,27 @@ export class DashboardLedgerComponent extends StoreDispatcher implements OnInit, this.overlayRef = this.overlay.create({ hasBackdrop: false, - positionStrategy: this.overlay.position() + positionStrategy: this.overlay + .position() .flexibleConnectedTo(event.target as HTMLElement) - .withPositions([{ - originX: 'start', - originY: 'top', - overlayX: 'start', - overlayY: 'top', - offsetY: 35, - }]), + .withPositions([ + { + originX: 'start', + originY: 'top', + overlayX: 'start', + overlayY: 'top', + offsetY: 35, + }, + ]), }); event.stopPropagation(); - const context = this.tooltipRef - .createEmbeddedView({ start, end }) - .context; - const portal = new TemplatePortal(this.tooltipRef, this.viewContainerRef, context); + const context = this.tooltipRef.createEmbeddedView({ start, end }).context; + const portal = new TemplatePortal( + this.tooltipRef, + this.viewContainerRef, + context, + ); this.overlayRef.attach(portal); } @@ -317,10 +414,18 @@ export class DashboardLedgerComponent extends StoreDispatcher implements OnInit, if (!this.ledgers.stakingEpoch.snarked.fetchHashesStart) { return; } - if (this.ledgers.rootStaged.state === NodesOverviewLedgerStepState.SUCCESS) { - this.progress = this.calculateProgressTime(this.ledgers.rootStaged.staged.reconstructEnd, 'finished'); + if ( + this.ledgers.rootStaged.state === NodesOverviewLedgerStepState.SUCCESS + ) { + this.progress = this.calculateProgressTime( + this.ledgers.rootStaged.staged.reconstructEnd, + 'finished', + ); } else { - this.progress = this.calculateProgressTime(this.ledgers.stakingEpoch.snarked.fetchHashesStart, 'started'); + this.progress = this.calculateProgressTime( + this.ledgers.stakingEpoch.snarked.fetchHashesStart, + 'started', + ); } } diff --git a/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.html b/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.html index ec30f60a8f..200e9cecdd 100644 --- a/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.html +++ b/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.html @@ -1,4 +1,7 @@ -
+
@if (stats.connected) { check_circle @@ -8,21 +11,27 @@
Peers
- - - + + +
diff --git a/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.scss b/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.scss index 160c10c190..6dbfb0654d 100644 --- a/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.scss +++ b/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.scss @@ -1,7 +1,15 @@ @use 'openmina'; .background-gradient { - background: linear-gradient(120deg, openmina.$base-background 0%, openmina.$base-background 20%, openmina.$base-background 40%, openmina.$success-container 50%, openmina.$base-surface 80%, openmina.$base-surface 100%); + background: linear-gradient( + 120deg, + openmina.$base-background 0%, + openmina.$base-background 20%, + openmina.$base-background 40%, + openmina.$success-container 50%, + openmina.$base-surface 80%, + openmina.$base-surface 100% + ); background-size: 500%; background-position: 0 50%; transition: background-position 0.7s ease; @@ -12,5 +20,7 @@ } .mina-icon { - font-variation-settings: 'FILL' 1, 'wght' 300 !important; + font-variation-settings: + 'FILL' 1, + 'wght' 300 !important; } diff --git a/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.ts b/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.ts index 00caaaf6a5..58844c7a35 100644 --- a/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.ts +++ b/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.ts @@ -5,15 +5,17 @@ import { skip } from 'rxjs'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; @Component({ - selector: 'mina-dashboard-network', - templateUrl: './dashboard-network.component.html', - styleUrls: ['./dashboard-network.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column' }, - standalone: false + selector: 'mina-dashboard-network', + templateUrl: './dashboard-network.component.html', + styleUrls: ['./dashboard-network.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column' }, + standalone: false, }) -export class DashboardNetworkComponent extends StoreDispatcher implements OnInit { - +export class DashboardNetworkComponent + extends StoreDispatcher + implements OnInit +{ stats: DashboardPeersStats = { connected: 0, disconnected: 0, @@ -25,9 +27,13 @@ export class DashboardNetworkComponent extends StoreDispatcher implements OnInit } private listenToPeersChanges(): void { - this.select(selectDashboardPeersStats, (stats: DashboardPeersStats) => { - this.stats = stats; - this.detect(); - }, skip(1)); + this.select( + selectDashboardPeersStats, + (stats: DashboardPeersStats) => { + this.stats = stats; + this.detect(); + }, + skip(1), + ); } } diff --git a/frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.html b/frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.html index 1611a11c77..a7348ab4fa 100644 --- a/frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.html +++ b/frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.html @@ -2,8 +2,12 @@ - - circle + + + circle + {{ row.status }} {{ row.datetime }} diff --git a/frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.scss b/frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.scss index 1dd774ce0d..08f7dd9e0a 100644 --- a/frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.scss +++ b/frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.scss @@ -1,7 +1,9 @@ @use 'openmina'; .mina-icon { - font-variation-settings: 'FILL' 1, 'wght' 400 !important; + font-variation-settings: + 'FILL' 1, + 'wght' 400 !important; } .Connected { diff --git a/frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.ts b/frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.ts index 3e120bfac9..039c76b443 100644 --- a/frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.ts +++ b/frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.ts @@ -1,21 +1,26 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { MinaTableRustWrapper } from '@shared/base-classes/mina-table-rust-wrapper.class'; -import { DashboardPeer, DashboardPeerStatus } from '@shared/types/dashboard/dashboard.peer'; +import { + DashboardPeer, + DashboardPeerStatus, +} from '@shared/types/dashboard/dashboard.peer'; import { TableColumnList } from '@openmina/shared'; import { DashboardPeersSort } from '@dashboard/dashboard.actions'; -import { selectDashboardPeers, selectDashboardPeersSort } from '@dashboard/dashboard.state'; +import { + selectDashboardPeers, + selectDashboardPeersSort, +} from '@dashboard/dashboard.state'; import { filter } from 'rxjs'; @Component({ - selector: 'mina-dashboard-peers-minimal-table', - templateUrl: './dashboard-peers-minimal-table.component.html', - styleUrls: ['./dashboard-peers-minimal-table.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column h-100' }, - standalone: false + selector: 'mina-dashboard-peers-minimal-table', + templateUrl: './dashboard-peers-minimal-table.component.html', + styleUrls: ['./dashboard-peers-minimal-table.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column h-100' }, + standalone: false, }) export class DashboardPeersMinimalTableComponent extends MinaTableRustWrapper { - protected readonly DashboardPeerStatus = DashboardPeerStatus; protected readonly tableHeads: TableColumnList = [ { name: 'peer', sort: 'status' }, @@ -33,7 +38,8 @@ export class DashboardPeersMinimalTableComponent extends MinaTableRustWrapper row.peerId + row.status + row.bestTip + row.timestamp; + this.table.trackByFn = (_: number, row: DashboardPeer) => + row.peerId + row.status + row.bestTip + row.timestamp; } private listenToPeersChanges(): void { @@ -43,6 +49,5 @@ export class DashboardPeersMinimalTableComponent extends MinaTableRustWrapper) { } + constructor(public payload: TableSort) {} } export class DashboardClose implements DashboardAction { @@ -68,5 +76,4 @@ export type DashboardActions = | DashboardGetPeers | DashboardGetPeersSuccess | DashboardPeersSort - | DashboardClose - ; + | DashboardClose; diff --git a/frontend/src/app/features/dashboard/dashboard.component.html b/frontend/src/app/features/dashboard/dashboard.component.html index 7e2a718d84..d458b266aa 100644 --- a/frontend/src/app/features/dashboard/dashboard.component.html +++ b/frontend/src/app/features/dashboard/dashboard.component.html @@ -1,18 +1,25 @@ -
-
+
+
@if (connectedProgress + ledgerProgress + blockSyncProgress < 100) {
}
- {{ updateAction }}{{ updateDetail }} + {{ updateAction }} + {{ updateDetail }}
- +
diff --git a/frontend/src/app/features/dashboard/dashboard.component.scss b/frontend/src/app/features/dashboard/dashboard.component.scss index a0f829f511..8cd0355615 100644 --- a/frontend/src/app/features/dashboard/dashboard.component.scss +++ b/frontend/src/app/features/dashboard/dashboard.component.scss @@ -33,7 +33,9 @@ mina-dashboard-blocks-sync { } .header { - transition: height .6s ease-in, opacity .4s .4s ease-in; + transition: + height 0.6s ease-in, + opacity 0.4s 0.4s ease-in; &.hide { height: 0 !important; @@ -63,7 +65,14 @@ mina-dashboard-blocks-sync { top: 1px; left: -50px; width: 50px; - background: radial-gradient(openmina.$success-primary, openmina.$success-primary, openmina.$success-primary, openmina.$success-primary, transparent, transparent); + background: radial-gradient( + openmina.$success-primary, + openmina.$success-primary, + openmina.$success-primary, + openmina.$success-primary, + transparent, + transparent + ); border-radius: 20px; animation: move 9s linear infinite; } diff --git a/frontend/src/app/features/dashboard/dashboard.component.ts b/frontend/src/app/features/dashboard/dashboard.component.ts index 5a902f583d..1c43499b08 100644 --- a/frontend/src/app/features/dashboard/dashboard.component.ts +++ b/frontend/src/app/features/dashboard/dashboard.component.ts @@ -1,28 +1,42 @@ -import { ChangeDetectionStrategy, Component, Inject, OnDestroy, OnInit } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + Inject, + OnDestroy, + OnInit, +} from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { DashboardGetData, DashboardInit } from '@dashboard/dashboard.actions'; import { filter, skip, Subscription, tap, timer } from 'rxjs'; import { AppSelectors } from '@app/app.state'; -import { selectDashboardNodesAndRpcStats, selectDashboardPeersStats } from '@dashboard/dashboard.state'; +import { + selectDashboardNodesAndRpcStats, + selectDashboardPeersStats, +} from '@dashboard/dashboard.state'; import { DashboardPeersStats } from '@shared/types/dashboard/dashboard-peers-stats.type'; import { NodesOverviewNode } from '@shared/types/nodes/dashboard/nodes-overview-node.type'; import { DashboardRpcStats } from '@shared/types/dashboard/dashboard-rpc-stats.type'; import { NodesOverviewLedgerStepState } from '@shared/types/nodes/dashboard/nodes-overview-ledger.type'; import { NodesOverviewNodeBlockStatus } from '@shared/types/nodes/dashboard/nodes-overview-block.type'; -import { AppNodeDetails, AppNodeStatus } from '@shared/types/app/app-node-details.type'; +import { + AppNodeDetails, + AppNodeStatus, +} from '@shared/types/app/app-node-details.type'; import { untilDestroyed } from '@ngneat/until-destroy'; import { isBrowser } from '@openmina/shared'; @Component({ - selector: 'mina-dashboard', - templateUrl: './dashboard.component.html', - styleUrls: ['./dashboard.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'h-100 w-100 flex-column' }, - standalone: false + selector: 'mina-dashboard', + templateUrl: './dashboard.component.html', + styleUrls: ['./dashboard.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'h-100 w-100 flex-column' }, + standalone: false, }) -export class DashboardComponent extends StoreDispatcher implements OnInit, OnDestroy { - +export class DashboardComponent + extends StoreDispatcher + implements OnInit, OnDestroy +{ updateAction: string; updateDetail: string; connectedProgress: number = 0; @@ -53,9 +67,14 @@ export class DashboardComponent extends StoreDispatcher implements OnInit, OnDes } private listenToNodeChanging(): void { - this.select(AppSelectors.activeNode, () => { - this.dispatch(DashboardGetData, { force: true }); - }, filter(Boolean), skip(1)); + this.select( + AppSelectors.activeNode, + () => { + this.dispatch(DashboardGetData, { force: true }); + }, + filter(Boolean), + skip(1), + ); this.select(AppSelectors.activeNodeDetails, (details: AppNodeDetails) => { if (this.lastStatus !== details.status) { this.lastStatus = details.status; @@ -66,96 +85,139 @@ export class DashboardComponent extends StoreDispatcher implements OnInit, OnDes private resetTimer(): void { this.timer?.unsubscribe(); - const timerInterval = this.lastStatus === AppNodeStatus.SYNCED || this.lastStatus === AppNodeStatus.OFFLINE ? 5000 : 1000; + const timerInterval = + this.lastStatus === AppNodeStatus.SYNCED || + this.lastStatus === AppNodeStatus.OFFLINE + ? 5000 + : 1000; this.timer = timer(timerInterval, timerInterval) .pipe( tap(() => this.dispatch(DashboardGetData)), untilDestroyed(this), - ).subscribe(); + ) + .subscribe(); } private listenToPeersChanges(): void { - this.select(selectDashboardPeersStats, (stats: DashboardPeersStats) => { - if (this.connected && stats.connected === 0 || !this.connected) { - if (stats.connected > 0) { - this.updateAction = 'Downloading Staking Epoch Ledger'; - } else if (stats.connecting > 0) { - this.updateAction = `Connecting to ${stats.connecting} peer${stats.connecting !== 1 ? 's' : ''}`; - } else { - this.updateAction = 'Looking for peers'; - } - if (stats.connected) { - this.connectedProgress = 33; - } else { - this.connectedProgress = 0; - this.ledgerProgress = 0; - this.blockSyncProgress = 0; + this.select( + selectDashboardPeersStats, + (stats: DashboardPeersStats) => { + if ((this.connected && stats.connected === 0) || !this.connected) { + if (stats.connected > 0) { + this.updateAction = 'Downloading Staking Epoch Ledger'; + } else if (stats.connecting > 0) { + this.updateAction = `Connecting to ${stats.connecting} peer${stats.connecting !== 1 ? 's' : ''}`; + } else { + this.updateAction = 'Looking for peers'; + } + if (stats.connected) { + this.connectedProgress = 33; + } else { + this.connectedProgress = 0; + this.ledgerProgress = 0; + this.blockSyncProgress = 0; + } + this.detect(); } - this.detect(); - } - this.connected = stats.connected > 0; - }, skip(1)); + this.connected = stats.connected > 0; + }, + skip(1), + ); } private listenToNodesChanges(): void { - this.select(selectDashboardNodesAndRpcStats, ([nodes, rpcStats]: [NodesOverviewNode[], DashboardRpcStats]) => { - if (nodes.length !== 0) { - const ledgers = nodes[0].ledgers; - - let stakingProgress = rpcStats.stakingLedger?.fetched / rpcStats.stakingLedger?.estimation * 100 || 0; - let nextProgress = rpcStats.nextLedger?.fetched / rpcStats.nextLedger?.estimation * 100 || 0; - let rootSnarkedProgress = rpcStats.snarkedRootLedger?.fetched / rpcStats.snarkedRootLedger?.estimation * 100 || 0; - let rootStagedProgress = rpcStats.stagedRootLedger?.fetched / rpcStats.stagedRootLedger?.estimation * 100 || 0; - - if (ledgers.stakingEpoch.state === NodesOverviewLedgerStepState.SUCCESS) { - stakingProgress = 100; - this.updateAction = 'Downloading Next Epoch Ledger'; - } - if (ledgers.nextEpoch.state === NodesOverviewLedgerStepState.SUCCESS) { - nextProgress = 100; - this.updateAction = 'Downloading Root Snarked Ledger'; - } - if (ledgers.rootSnarked.state === NodesOverviewLedgerStepState.SUCCESS) { - rootSnarkedProgress = 100; - this.updateAction = 'Downloading Root Staged Ledger'; - } - if (ledgers.rootStaged.state === NodesOverviewLedgerStepState.SUCCESS) { - rootStagedProgress = 100; - this.updateAction = 'Fetching Blocks'; - } - const ledgerProgressTotal = (stakingProgress + nextProgress + rootSnarkedProgress + rootStagedProgress) / 4; - this.ledgerProgress = ledgerProgressTotal * 0.33; - if (ledgerProgressTotal !== 100) { - this.blockSyncProgress = 0; - this.detect(); - return; - } - - let blocks = nodes[0].blocks; - - blocks = blocks.slice(1); - - const fetched = blocks.filter(b => ![NodesOverviewNodeBlockStatus.MISSING, NodesOverviewNodeBlockStatus.FETCHING].includes(b.status)).length; - const fetchedPercentage = Math.round(fetched * 100 / 291); - - const applied = blocks.filter(b => b.status === NodesOverviewNodeBlockStatus.APPLIED).length; - const appliedPercentage = Math.round(applied * 100 / 291); - this.blockSyncProgress = appliedPercentage * 0.34; - - if (fetchedPercentage < 100) { - this.updateAction = `Fetching Blocks (${fetchedPercentage}%)`; - } else if (appliedPercentage < 100) { - this.updateAction = `Applying Blocks (${appliedPercentage}%)`; + this.select( + selectDashboardNodesAndRpcStats, + ([nodes, rpcStats]: [NodesOverviewNode[], DashboardRpcStats]) => { + if (nodes.length !== 0) { + const ledgers = nodes[0].ledgers; + + let stakingProgress = + (rpcStats.stakingLedger?.fetched / + rpcStats.stakingLedger?.estimation) * + 100 || 0; + let nextProgress = + (rpcStats.nextLedger?.fetched / rpcStats.nextLedger?.estimation) * + 100 || 0; + let rootSnarkedProgress = + (rpcStats.snarkedRootLedger?.fetched / + rpcStats.snarkedRootLedger?.estimation) * + 100 || 0; + let rootStagedProgress = + (rpcStats.stagedRootLedger?.fetched / + rpcStats.stagedRootLedger?.estimation) * + 100 || 0; + + if ( + ledgers.stakingEpoch.state === NodesOverviewLedgerStepState.SUCCESS + ) { + stakingProgress = 100; + this.updateAction = 'Downloading Next Epoch Ledger'; + } + if ( + ledgers.nextEpoch.state === NodesOverviewLedgerStepState.SUCCESS + ) { + nextProgress = 100; + this.updateAction = 'Downloading Root Snarked Ledger'; + } + if ( + ledgers.rootSnarked.state === NodesOverviewLedgerStepState.SUCCESS + ) { + rootSnarkedProgress = 100; + this.updateAction = 'Downloading Root Staged Ledger'; + } + if ( + ledgers.rootStaged.state === NodesOverviewLedgerStepState.SUCCESS + ) { + rootStagedProgress = 100; + this.updateAction = 'Fetching Blocks'; + } + const ledgerProgressTotal = + (stakingProgress + + nextProgress + + rootSnarkedProgress + + rootStagedProgress) / + 4; + this.ledgerProgress = ledgerProgressTotal * 0.33; + if (ledgerProgressTotal !== 100) { + this.blockSyncProgress = 0; + this.detect(); + return; + } + + let blocks = nodes[0].blocks; + + blocks = blocks.slice(1); + + const fetched = blocks.filter( + b => + ![ + NodesOverviewNodeBlockStatus.MISSING, + NodesOverviewNodeBlockStatus.FETCHING, + ].includes(b.status), + ).length; + const fetchedPercentage = Math.round((fetched * 100) / 291); + + const applied = blocks.filter( + b => b.status === NodesOverviewNodeBlockStatus.APPLIED, + ).length; + const appliedPercentage = Math.round((applied * 100) / 291); + this.blockSyncProgress = appliedPercentage * 0.34; + + if (fetchedPercentage < 100) { + this.updateAction = `Fetching Blocks (${fetchedPercentage}%)`; + } else if (appliedPercentage < 100) { + this.updateAction = `Applying Blocks (${appliedPercentage}%)`; + } else { + this.updateAction = ''; + } } else { - this.updateAction = ''; + this.ledgerProgress = 0; + this.blockSyncProgress = 0; } - - } else { - this.ledgerProgress = 0; - this.blockSyncProgress = 0; - } - this.detect(); - }); + this.detect(); + }, + ); } override ngOnDestroy(): void { diff --git a/frontend/src/app/features/dashboard/dashboard.effects.ts b/frontend/src/app/features/dashboard/dashboard.effects.ts index adc3a62f6d..c7ca19d34b 100644 --- a/frontend/src/app/features/dashboard/dashboard.effects.ts +++ b/frontend/src/app/features/dashboard/dashboard.effects.ts @@ -3,7 +3,17 @@ import { Effect } from '@openmina/shared'; import { Actions, createEffect, ofType } from '@ngrx/effects'; import { Store } from '@ngrx/store'; import { MinaState, selectMinaState } from '@app/app.setup'; -import { catchError, combineLatest, EMPTY, filter, forkJoin, map, mergeMap, switchMap, tap } from 'rxjs'; +import { + catchError, + combineLatest, + EMPTY, + filter, + forkJoin, + map, + mergeMap, + switchMap, + tap, +} from 'rxjs'; import { catchErrorAndRepeat } from '@shared/constants/store-functions'; import { MinaErrorType } from '@shared/types/error-preview/mina-error-type.enum'; import { MinaRustBaseEffect } from '@shared/base-classes/mina-rust-base.effect'; @@ -25,52 +35,74 @@ import { DashboardRpcStats } from '@shared/types/dashboard/dashboard-rpc-stats.t providedIn: 'root', }) export class DashboardEffects extends MinaRustBaseEffect { - readonly init$: Effect; readonly getData$: Effect; private pendingRequest: boolean; - constructor(private actions$: Actions, - private dashboardService: DashboardService, - store: Store) { + constructor( + private actions$: Actions, + private dashboardService: DashboardService, + store: Store, + ) { super(store, selectMinaState); - this.init$ = createEffect(() => this.actions$.pipe( - ofType(DASHBOARD_INIT), - map(() => ({ type: DASHBOARD_GET_DATA })), - )); + this.init$ = createEffect(() => + this.actions$.pipe( + ofType(DASHBOARD_INIT), + map(() => ({ type: DASHBOARD_GET_DATA })), + ), + ); - this.getData$ = createEffect(() => this.actions$.pipe( - ofType(DASHBOARD_GET_DATA, DASHBOARD_CLOSE), - this.latestActionState(), - filter(({ action }) => (action as DashboardGetData).payload?.force || !this.pendingRequest), - tap(({ action }) => { - if (action.type === DASHBOARD_GET_DATA) { - this.pendingRequest = true; - } - }), - switchMap(({ action, state }) => - action.type === DASHBOARD_CLOSE - ? EMPTY - : combineLatest([ - this.dashboardService.getPeers(), - this.dashboardService.getTips({ - url: state.app.activeNode.url, - name: state.app.activeNode.name, - }), - this.dashboardService.getRpcCalls(), - ]), + this.getData$ = createEffect(() => + this.actions$.pipe( + ofType(DASHBOARD_GET_DATA, DASHBOARD_CLOSE), + this.latestActionState(), + filter( + ({ action }) => + (action as DashboardGetData).payload?.force || !this.pendingRequest, + ), + tap(({ action }) => { + if (action.type === DASHBOARD_GET_DATA) { + this.pendingRequest = true; + } + }), + switchMap(({ action, state }) => + action.type === DASHBOARD_CLOSE + ? EMPTY + : combineLatest([ + this.dashboardService.getPeers(), + this.dashboardService.getTips({ + url: state.app.activeNode.url, + name: state.app.activeNode.name, + }), + this.dashboardService.getRpcCalls(), + ]), + ), + map( + ( + payload: [DashboardPeer[], NodesOverviewNode[], DashboardRpcStats], + ) => ({ + type: DASHBOARD_GET_DATA_SUCCESS, + payload: { + peers: payload[0], + ledger: payload[1], + rpcStats: payload[2], + }, + }), + ), + catchErrorAndRepeat(MinaErrorType.GENERIC, DASHBOARD_GET_DATA_SUCCESS, { + peers: [], + ledger: [], + rpcStats: { + peerResponses: [], + stakingLedger: null, + nextLedger: null, + rootLedger: null, + }, + }), + tap(() => (this.pendingRequest = false)), ), - map((payload: [DashboardPeer[], NodesOverviewNode[], DashboardRpcStats]) => ({ - type: DASHBOARD_GET_DATA_SUCCESS, payload: { peers: payload[0], ledger: payload[1], rpcStats: payload[2] }, - })), - catchErrorAndRepeat(MinaErrorType.GENERIC, DASHBOARD_GET_DATA_SUCCESS, { - peers: [], - ledger: [], - rpcStats: { peerResponses: [], stakingLedger: null, nextLedger: null, rootLedger: null }, - }), - tap(() => this.pendingRequest = false), - )); + ); } } diff --git a/frontend/src/app/features/dashboard/dashboard.module.ts b/frontend/src/app/features/dashboard/dashboard.module.ts index ed91563182..39339e81bf 100644 --- a/frontend/src/app/features/dashboard/dashboard.module.ts +++ b/frontend/src/app/features/dashboard/dashboard.module.ts @@ -13,7 +13,6 @@ import { DashboardBlocksSyncComponent } from './dashboard-blocks-sync/dashboard- import { DashboardPeersMinimalTableComponent } from './dashboard-peers-minimal-table/dashboard-peers-minimal-table.component'; import { BlockProductionPillComponent } from '@app/layout/block-production-pill/block-production-pill.component'; - @NgModule({ declarations: [ DashboardComponent, diff --git a/frontend/src/app/features/dashboard/dashboard.reducer.ts b/frontend/src/app/features/dashboard/dashboard.reducer.ts index 0d9a23b56d..90c06ce3b4 100644 --- a/frontend/src/app/features/dashboard/dashboard.reducer.ts +++ b/frontend/src/app/features/dashboard/dashboard.reducer.ts @@ -1,11 +1,15 @@ import { DashboardState } from '@dashboard/dashboard.state'; import { - DASHBOARD_CLOSE, DASHBOARD_GET_DATA, + DASHBOARD_CLOSE, + DASHBOARD_GET_DATA, DASHBOARD_GET_DATA_SUCCESS, DASHBOARD_PEERS_SORT, DashboardActions, } from '@dashboard/dashboard.actions'; -import { DashboardPeer, DashboardPeerStatus } from '@shared/types/dashboard/dashboard.peer'; +import { + DashboardPeer, + DashboardPeerStatus, +} from '@shared/types/dashboard/dashboard.peer'; import { sort, SortDirection, TableSort } from '@openmina/shared'; const initialState: DashboardState = { @@ -36,9 +40,11 @@ const initialState: DashboardState = { receivedSnarks: 0, }; -export function dashboardReducer(state: DashboardState = initialState, action: DashboardActions): DashboardState { +export function dashboardReducer( + state: DashboardState = initialState, + action: DashboardActions, +): DashboardState { switch (action.type) { - case DASHBOARD_GET_DATA: { if (action.payload?.force) { return { @@ -59,16 +65,25 @@ export function dashboardReducer(state: DashboardState = initialState, action: D case DASHBOARD_GET_DATA_SUCCESS: { let peers = action.payload.peers.map(peer => ({ ...peer, - requests: action.payload.rpcStats.peerResponses.find(r => r.peerId === peer.peerId)?.requestsMade || 0, + requests: + action.payload.rpcStats.peerResponses.find( + r => r.peerId === peer.peerId, + )?.requestsMade || 0, })); peers = sortPeers(peers, state.peersSort); return { ...state, peers, peersStats: { - connected: peers.filter(peer => peer.status === DashboardPeerStatus.CONNECTED).length, - connecting: peers.filter(peer => peer.status === DashboardPeerStatus.CONNECTING).length, - disconnected: peers.filter(peer => peer.status === DashboardPeerStatus.DISCONNECTED).length, + connected: peers.filter( + peer => peer.status === DashboardPeerStatus.CONNECTED, + ).length, + connecting: peers.filter( + peer => peer.status === DashboardPeerStatus.CONNECTING, + ).length, + disconnected: peers.filter( + peer => peer.status === DashboardPeerStatus.DISCONNECTED, + ).length, }, nodes: action.payload.ledger, rpcStats: action.payload.rpcStats, @@ -83,6 +98,14 @@ export function dashboardReducer(state: DashboardState = initialState, action: D } } -function sortPeers(node: DashboardPeer[], tableSort: TableSort): DashboardPeer[] { - return sort(node, tableSort, ['peerId', 'status', 'bestTip', 'address']); +function sortPeers( + node: DashboardPeer[], + tableSort: TableSort, +): DashboardPeer[] { + return sort(node, tableSort, [ + 'peerId', + 'status', + 'bestTip', + 'address', + ]); } diff --git a/frontend/src/app/features/dashboard/dashboard.routing.ts b/frontend/src/app/features/dashboard/dashboard.routing.ts index 3c123e9f0f..38fe94b7f8 100644 --- a/frontend/src/app/features/dashboard/dashboard.routing.ts +++ b/frontend/src/app/features/dashboard/dashboard.routing.ts @@ -6,11 +6,11 @@ const routes: Routes = [ { path: '', component: DashboardComponent, - } + }, ]; @NgModule({ imports: [RouterModule.forChild(routes)], - exports: [RouterModule] + exports: [RouterModule], }) -export class DashboardRouting { } +export class DashboardRouting {} diff --git a/frontend/src/app/features/dashboard/dashboard.service.ts b/frontend/src/app/features/dashboard/dashboard.service.ts index 507f5c89c3..a4077765d4 100644 --- a/frontend/src/app/features/dashboard/dashboard.service.ts +++ b/frontend/src/app/features/dashboard/dashboard.service.ts @@ -1,64 +1,99 @@ import { Injectable } from '@angular/core'; import { catchError, map, Observable, tap } from 'rxjs'; -import { DashboardPeer, DashboardPeerStatus } from '@shared/types/dashboard/dashboard.peer'; +import { + DashboardPeer, + DashboardPeerStatus, +} from '@shared/types/dashboard/dashboard.peer'; import { RustService } from '@core/services/rust.service'; import { ONE_MILLION, toReadableDate } from '@openmina/shared'; -import { DashboardPeerRpcResponses, DashboardRpcStats } from '@shared/types/dashboard/dashboard-rpc-stats.type'; +import { + DashboardPeerRpcResponses, + DashboardRpcStats, +} from '@shared/types/dashboard/dashboard-rpc-stats.type'; import { NodesOverviewNode } from '@shared/types/nodes/dashboard/nodes-overview-node.type'; import { NodesOverviewService } from '@nodes/overview/nodes-overview.service'; @Injectable({ providedIn: 'root' }) export class DashboardService { - - constructor(private rust: RustService, - private nodesOverviewService: NodesOverviewService) { } + constructor( + private rust: RustService, + private nodesOverviewService: NodesOverviewService, + ) {} getPeers(): Observable { return this.rust.get('/state/peers').pipe( map((response: PeersResponse[]) => - response.map((peer: PeersResponse) => ({ - peerId: peer.peer_id, - bestTip: peer.best_tip, - globalSlot: peer.best_tip_global_slot, - bestTipDatetime: peer.best_tip_timestamp ? toReadableDate(peer.best_tip_timestamp / ONE_MILLION) : '-', - bestTipTimestamp: peer.best_tip_timestamp, - datetime: toReadableDate(peer.time / ONE_MILLION), - timestamp: peer.time, - height: peer.best_tip_height, - status: peer.connection_status, - address: peer.address, - requests: 0, - } as DashboardPeer)), + response.map( + (peer: PeersResponse) => + ({ + peerId: peer.peer_id, + bestTip: peer.best_tip, + globalSlot: peer.best_tip_global_slot, + bestTipDatetime: peer.best_tip_timestamp + ? toReadableDate(peer.best_tip_timestamp / ONE_MILLION) + : '-', + bestTipTimestamp: peer.best_tip_timestamp, + datetime: toReadableDate(peer.time / ONE_MILLION), + timestamp: peer.time, + height: peer.best_tip_height, + status: peer.connection_status, + address: peer.address, + requests: 0, + }) as DashboardPeer, + ), ), ); } - getTips({ url, name }: { url: string, name: string }): Observable { + getTips({ + url, + name, + }: { + url: string; + name: string; + }): Observable { return this.rust.get('/stats/sync?limit=1').pipe( - map((response: NodesOverviewNode[]) => this.nodesOverviewService.mapNodeTipsResponse([response, undefined], { - name, - url, - })), - catchError(() => this.nodesOverviewService.mapNodeTipsErrorResponse({ - name, - url, - })), + map((response: NodesOverviewNode[]) => + this.nodesOverviewService.mapNodeTipsResponse([response, undefined], { + name, + url, + }), + ), + catchError(() => + this.nodesOverviewService.mapNodeTipsErrorResponse({ + name, + url, + }), + ), ); } getRpcCalls(): Observable { - return this.rust.get('/state/message-progress').pipe( - map((response: MessageProgressResponse) => this.mapMessageProgressResponse(response)), - ); + return this.rust + .get('/state/message-progress') + .pipe( + map((response: MessageProgressResponse) => + this.mapMessageProgressResponse(response), + ), + ); } - private mapMessageProgressResponse(progress: MessageProgressResponse): DashboardRpcStats { - const peerResponses = Object.keys(progress.messages_stats).map(peerId => ({ - peerId, - requestsMade: Object - .keys(progress.messages_stats[peerId].responses) - .reduce((sum: number, curr: string) => sum + progress.messages_stats[peerId].responses[curr], 0), - } as DashboardPeerRpcResponses)); + private mapMessageProgressResponse( + progress: MessageProgressResponse, + ): DashboardRpcStats { + const peerResponses = Object.keys(progress.messages_stats).map( + peerId => + ({ + peerId, + requestsMade: Object.keys( + progress.messages_stats[peerId].responses, + ).reduce( + (sum: number, curr: string) => + sum + progress.messages_stats[peerId].responses[curr], + 0, + ), + }) as DashboardPeerRpcResponses, + ); return { peerResponses, @@ -92,7 +127,7 @@ export interface MessageProgressResponse { staged: { fetched: number; total: number; - } + }; }; } @@ -101,7 +136,7 @@ export interface MessagesStats { current_request: unknown; responses: { [rpcName: string]: number; - } + }; }; } diff --git a/frontend/src/app/features/dashboard/dashboard.state.ts b/frontend/src/app/features/dashboard/dashboard.state.ts index f84b91456c..d80d3c6159 100644 --- a/frontend/src/app/features/dashboard/dashboard.state.ts +++ b/frontend/src/app/features/dashboard/dashboard.state.ts @@ -1,5 +1,9 @@ import { DashboardPeer } from '@shared/types/dashboard/dashboard.peer'; -import { createFeatureSelector, createSelector, MemoizedSelector } from '@ngrx/store'; +import { + createFeatureSelector, + createSelector, + MemoizedSelector, +} from '@ngrx/store'; import { MinaState } from '@app/app.setup'; import { DashboardPeersStats } from '@shared/types/dashboard/dashboard-peers-stats.type'; import { TableSort } from '@openmina/shared'; @@ -21,15 +25,34 @@ export interface DashboardState { receivedSnarks: number; } -const select = (selector: (state: DashboardState) => T): MemoizedSelector => createSelector( - selectDashboardState, - selector, -); +const select = ( + selector: (state: DashboardState) => T, +): MemoizedSelector => + createSelector(selectDashboardState, selector); -export const selectDashboardState = createFeatureSelector('dashboard'); -export const selectDashboardPeers = select((state: DashboardState): DashboardPeer[] => state.peers); -export const selectDashboardPeersStats = select((state: DashboardState): DashboardPeersStats => state.peersStats); -export const selectDashboardPeersSort = select((state: DashboardState): TableSort => state.peersSort); -export const selectDashboardNodes = select((state: DashboardState): NodesOverviewNode[] => state.nodes); -export const selectDashboardNodesAndPeers = select((state: DashboardState): [NodesOverviewNode[], DashboardPeer[]] => [state.nodes, state.peers]); -export const selectDashboardNodesAndRpcStats = select((state: DashboardState): [NodesOverviewNode[], DashboardRpcStats] => [state.nodes, state.rpcStats]); +export const selectDashboardState = + createFeatureSelector('dashboard'); +export const selectDashboardPeers = select( + (state: DashboardState): DashboardPeer[] => state.peers, +); +export const selectDashboardPeersStats = select( + (state: DashboardState): DashboardPeersStats => state.peersStats, +); +export const selectDashboardPeersSort = select( + (state: DashboardState): TableSort => state.peersSort, +); +export const selectDashboardNodes = select( + (state: DashboardState): NodesOverviewNode[] => state.nodes, +); +export const selectDashboardNodesAndPeers = select( + (state: DashboardState): [NodesOverviewNode[], DashboardPeer[]] => [ + state.nodes, + state.peers, + ], +); +export const selectDashboardNodesAndRpcStats = select( + (state: DashboardState): [NodesOverviewNode[], DashboardRpcStats] => [ + state.nodes, + state.rpcStats, + ], +); diff --git a/frontend/src/app/features/fuzzing/fuzzing-code/fuzzing-code.component.html b/frontend/src/app/features/fuzzing/fuzzing-code/fuzzing-code.component.html index 749ed9cc59..c740d4a7e5 100644 --- a/frontend/src/app/features/fuzzing/fuzzing-code/fuzzing-code.component.html +++ b/frontend/src/app/features/fuzzing/fuzzing-code/fuzzing-code.component.html @@ -1,21 +1,30 @@ -
+
Source Code - close + + close
-
+
Total lines {{ fileDetails?.lines?.length }} Hit lines {{ fileDetails?.executedLines }}
-
@@ -25,15 +34,29 @@ Line Rust Code
-
-
- {{ i + 1 }} - +
+
+ + {{ i + 1 }} + +
diff --git a/frontend/src/app/features/fuzzing/fuzzing-code/fuzzing-code.component.ts b/frontend/src/app/features/fuzzing/fuzzing-code/fuzzing-code.component.ts index 3f6b961a21..efa4decda7 100644 --- a/frontend/src/app/features/fuzzing/fuzzing-code/fuzzing-code.component.ts +++ b/frontend/src/app/features/fuzzing/fuzzing-code/fuzzing-code.component.ts @@ -1,26 +1,44 @@ -import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core'; +import { + AfterViewInit, + ChangeDetectionStrategy, + Component, + ElementRef, + Inject, + OnInit, + ViewChild, +} from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { FuzzingFile } from '@shared/types/fuzzing/fuzzing-file.type'; import { FuzzingFileDetails } from '@shared/types/fuzzing/fuzzing-file-details.type'; -import { selectFuzzingActiveFile, selectFuzzingActiveFileDetails } from '@fuzzing/fuzzing.state'; +import { + selectFuzzingActiveFile, + selectFuzzingActiveFileDetails, +} from '@fuzzing/fuzzing.state'; import { debounceTime, filter, fromEvent, tap, zip } from 'rxjs'; import { Routes } from '@shared/enums/routes.enum'; import { ActivatedRoute, Router } from '@angular/router'; import { FuzzingGetFileDetails } from '@fuzzing/fuzzing.actions'; import { untilDestroyed } from '@ngneat/until-destroy'; -import { getMergedRoute, MergedRoute, MinaTooltipDirective, TooltipPosition } from '@openmina/shared'; +import { + getMergedRoute, + MergedRoute, + MinaTooltipDirective, + TooltipPosition, +} from '@openmina/shared'; import { DOCUMENT } from '@angular/common'; @Component({ - selector: 'mina-fuzzing-code', - templateUrl: './fuzzing-code.component.html', - styleUrls: ['./fuzzing-code.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'h-100 border-left flex-column' }, - standalone: false + selector: 'mina-fuzzing-code', + templateUrl: './fuzzing-code.component.html', + styleUrls: ['./fuzzing-code.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'h-100 border-left flex-column' }, + standalone: false, }) -export class FuzzingCodeComponent extends StoreDispatcher implements OnInit, AfterViewInit { - +export class FuzzingCodeComponent + extends StoreDispatcher + implements OnInit, AfterViewInit +{ file: FuzzingFile; fileDetails: FuzzingFileDetails; codeHighlighted: boolean = true; @@ -32,9 +50,13 @@ export class FuzzingCodeComponent extends StoreDispatcher implements OnInit, Aft @ViewChild('codeHolder') private codeHolder: ElementRef; @ViewChild('codeContainer') private codeContainer: ElementRef; - constructor(@Inject(DOCUMENT) private document: Document, - private router: Router, - private activatedRoute: ActivatedRoute) { super(); } + constructor( + @Inject(DOCUMENT) private document: Document, + private router: Router, + private activatedRoute: ActivatedRoute, + ) { + super(); + } ngOnInit(): void { this.listenToFileChanges(); @@ -53,12 +75,12 @@ export class FuzzingCodeComponent extends StoreDispatcher implements OnInit, Aft private listenToFileChanges(): void { zip( - this.store.select(selectFuzzingActiveFile).pipe( - filter(file => this.file !== file), - ), - this.store.select(selectFuzzingActiveFileDetails).pipe( - filter(file => this.fileDetails !== file), - ), + this.store + .select(selectFuzzingActiveFile) + .pipe(filter(file => this.file !== file)), + this.store + .select(selectFuzzingActiveFileDetails) + .pipe(filter(file => this.fileDetails !== file)), ) .pipe(untilDestroyed(this)) .subscribe(([file, details]) => { @@ -67,7 +89,10 @@ export class FuzzingCodeComponent extends StoreDispatcher implements OnInit, Aft this.codeHolder.nativeElement.scrollTo(0, 0); if (this.lineToScroll) { this.detect(); - this.codeHolder.nativeElement.scrollTo(0, (Number(this.lineToScroll) - 1) * 24); + this.codeHolder.nativeElement.scrollTo( + 0, + (Number(this.lineToScroll) - 1) * 24, + ); delete this.lineToScroll; } this.link = `${window.location.origin}${window.location.pathname}${window.location.hash}?line=`; @@ -80,16 +105,24 @@ export class FuzzingCodeComponent extends StoreDispatcher implements OnInit, Aft } private listenToMouseMove(): void { - fromEvent(this.codeContainer.nativeElement, 'mousemove').pipe( - untilDestroyed(this), - tap(() => MinaTooltipDirective.hideTooltip(this.popup)), - debounceTime(200), - ).subscribe((ev: Event) => { - const target = ev.target as HTMLSpanElement; - if (target.hasAttribute('h')) { - MinaTooltipDirective.showTooltip(this.popup, target, 'Hits: ' + target.getAttribute('h'), 500, TooltipPosition.BOTTOM); - } - }); + fromEvent(this.codeContainer.nativeElement, 'mousemove') + .pipe( + untilDestroyed(this), + tap(() => MinaTooltipDirective.hideTooltip(this.popup)), + debounceTime(200), + ) + .subscribe((ev: Event) => { + const target = ev.target as HTMLSpanElement; + if (target.hasAttribute('h')) { + MinaTooltipDirective.showTooltip( + this.popup, + target, + 'Hits: ' + target.getAttribute('h'), + 500, + TooltipPosition.BOTTOM, + ); + } + }); } private listenToRouteChange(): void { @@ -103,6 +136,9 @@ export class FuzzingCodeComponent extends StoreDispatcher implements OnInit, Aft } onRowClick(line: number): void { - this.router.navigate([], { queryParams: { line: line.toString() }, queryParamsHandling: 'merge' }); + this.router.navigate([], { + queryParams: { line: line.toString() }, + queryParamsHandling: 'merge', + }); } } diff --git a/frontend/src/app/features/fuzzing/fuzzing-directories-table/fuzzing-directories-table.component.ts b/frontend/src/app/features/fuzzing/fuzzing-directories-table/fuzzing-directories-table.component.ts index 547d31e849..5cd1d16e34 100644 --- a/frontend/src/app/features/fuzzing/fuzzing-directories-table/fuzzing-directories-table.component.ts +++ b/frontend/src/app/features/fuzzing/fuzzing-directories-table/fuzzing-directories-table.component.ts @@ -1,6 +1,9 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; -import { selectFuzzingActiveDirectory, selectFuzzingDirectories } from '@fuzzing/fuzzing.state'; +import { + selectFuzzingActiveDirectory, + selectFuzzingDirectories, +} from '@fuzzing/fuzzing.state'; import { FuzzingSetActiveDirectory } from '@fuzzing/fuzzing.actions'; import { filter, take } from 'rxjs'; import { Routes } from '@shared/enums/routes.enum'; @@ -9,15 +12,17 @@ import { getMergedRoute, MergedRoute, TableColumnList } from '@openmina/shared'; import { MinaTableRustWrapper } from '@shared/base-classes/mina-table-rust-wrapper.class'; @Component({ - selector: 'mina-fuzzing-directories-table', - templateUrl: './fuzzing-directories-table.component.html', - styleUrls: ['./fuzzing-directories-table.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column h-100 border-right' }, - standalone: false + selector: 'mina-fuzzing-directories-table', + templateUrl: './fuzzing-directories-table.component.html', + styleUrls: ['./fuzzing-directories-table.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column h-100 border-right' }, + standalone: false, }) -export class FuzzingDirectoriesTableComponent extends MinaTableRustWrapper implements OnInit { - +export class FuzzingDirectoriesTableComponent + extends MinaTableRustWrapper + implements OnInit +{ protected readonly tableHeads: TableColumnList = [ { name: 'datetime' }, { name: 'directory name' }, @@ -28,7 +33,9 @@ export class FuzzingDirectoriesTableComponent extends MinaTableRustWrapper { await super.ngOnInit(); @@ -44,38 +51,52 @@ export class FuzzingDirectoriesTableComponent extends MinaTableRustWrapper { - if (route.params['dir'] && this.directories.length === 0) { - this.pathFromRoute = route.params['dir']; - } - }, take(1)); + this.select( + getMergedRoute, + (route: MergedRoute) => { + if (route.params['dir'] && this.directories.length === 0) { + this.pathFromRoute = route.params['dir']; + } + }, + take(1), + ); } private listenToDirectories(): void { - this.select(selectFuzzingDirectories, (directories: FuzzingDirectory[]) => { - this.directories = directories; - this.table.rows = directories; - if (this.pathFromRoute) { - const payload = directories.find(dir => dir.fullName === this.pathFromRoute); - delete this.pathFromRoute; - if (payload) { - this.dispatch(FuzzingSetActiveDirectory, payload); + this.select( + selectFuzzingDirectories, + (directories: FuzzingDirectory[]) => { + this.directories = directories; + this.table.rows = directories; + if (this.pathFromRoute) { + const payload = directories.find( + dir => dir.fullName === this.pathFromRoute, + ); + delete this.pathFromRoute; + if (payload) { + this.dispatch(FuzzingSetActiveDirectory, payload); + } + } else if (!this.activeDirectory) { + this.onRowClick(directories[0]); } - } else if (!this.activeDirectory) { - this.onRowClick(directories[0]); - } - this.table.detect(); - this.detect(); - }, filter(d => d.length > 0)); + this.table.detect(); + this.detect(); + }, + filter(d => d.length > 0), + ); } private listenToActiveDirectory(): void { - this.select(selectFuzzingActiveDirectory, (directory: FuzzingDirectory) => { - this.activeDirectory = directory; - this.table.activeRow = directory; - this.table.detect(); - this.detect(); - }, filter(directory => this.activeDirectory !== directory)); + this.select( + selectFuzzingActiveDirectory, + (directory: FuzzingDirectory) => { + this.activeDirectory = directory; + this.table.activeRow = directory; + this.table.detect(); + this.detect(); + }, + filter(directory => this.activeDirectory !== directory), + ); } protected override onRowClick(dir: FuzzingDirectory): void { diff --git a/frontend/src/app/features/fuzzing/fuzzing-files-table/fuzzing-files-table.component.html b/frontend/src/app/features/fuzzing/fuzzing-files-table/fuzzing-files-table.component.html index f99b9df95f..f10ebd4c7f 100644 --- a/frontend/src/app/features/fuzzing/fuzzing-files-table/fuzzing-files-table.component.html +++ b/frontend/src/app/features/fuzzing/fuzzing-files-table/fuzzing-files-table.component.html @@ -11,4 +11,3 @@ - diff --git a/frontend/src/app/features/fuzzing/fuzzing-files-table/fuzzing-files-table.component.ts b/frontend/src/app/features/fuzzing/fuzzing-files-table/fuzzing-files-table.component.ts index 55983a0283..3cdeac0b9f 100644 --- a/frontend/src/app/features/fuzzing/fuzzing-files-table/fuzzing-files-table.component.ts +++ b/frontend/src/app/features/fuzzing/fuzzing-files-table/fuzzing-files-table.component.ts @@ -1,25 +1,37 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { FuzzingFile } from '@shared/types/fuzzing/fuzzing-file.type'; -import { selectFuzzingActiveDirectory, selectFuzzingActiveFile, selectFuzzingFiles, selectFuzzingFilesSorting } from '@fuzzing/fuzzing.state'; +import { + selectFuzzingActiveDirectory, + selectFuzzingActiveFile, + selectFuzzingFiles, + selectFuzzingFilesSorting, +} from '@fuzzing/fuzzing.state'; import { FuzzingGetFileDetails, FuzzingSort } from '@fuzzing/fuzzing.actions'; import { filter, take, timer } from 'rxjs'; import { Routes } from '@shared/enums/routes.enum'; import { untilDestroyed } from '@ngneat/until-destroy'; import { FuzzingDirectory } from '@shared/types/fuzzing/fuzzing-directory.type'; -import { getMergedRoute, MergedRoute, TableColumnList, TableSort } from '@openmina/shared'; +import { + getMergedRoute, + MergedRoute, + TableColumnList, + TableSort, +} from '@openmina/shared'; import { MinaTableRustWrapper } from '@shared/base-classes/mina-table-rust-wrapper.class'; @Component({ - selector: 'mina-fuzzing-files-table', - templateUrl: './fuzzing-files-table.component.html', - styleUrls: ['./fuzzing-files-table.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column h-100' }, - standalone: false + selector: 'mina-fuzzing-files-table', + templateUrl: './fuzzing-files-table.component.html', + styleUrls: ['./fuzzing-files-table.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column h-100' }, + standalone: false, }) -export class FuzzingFilesTableComponent extends MinaTableRustWrapper implements OnInit { - +export class FuzzingFilesTableComponent + extends MinaTableRustWrapper + implements OnInit +{ protected readonly tableHeads: TableColumnList = [ { name: 'coverage', sort: 'coverage' }, { name: 'path', sort: 'path' }, @@ -32,7 +44,9 @@ export class FuzzingFilesTableComponent extends MinaTableRustWrapper { await super.ngOnInit(); @@ -60,11 +74,15 @@ export class FuzzingFilesTableComponent extends MinaTableRustWrapper { - if (route.params['file'] && this.files.length === 0) { - this.pathFromRoute = route.params['file']; - } - }, take(1)); + this.select( + getMergedRoute, + (route: MergedRoute) => { + if (route.params['file'] && this.files.length === 0) { + this.pathFromRoute = route.params['file']; + } + }, + take(1), + ); } private listenToFiles(): void { @@ -88,18 +106,26 @@ export class FuzzingFilesTableComponent extends MinaTableRustWrapper { - this.activeFile = file; - this.table.activeRow = file; - this.table.detect(); - this.detect(); - }, filter(file => this.activeFile !== file)); + this.select( + selectFuzzingActiveFile, + (file: FuzzingFile) => { + this.activeFile = file; + this.table.activeRow = file; + this.table.detect(); + this.detect(); + }, + filter(file => this.activeFile !== file), + ); } private listenToActiveDirectory(): void { - this.select(selectFuzzingActiveDirectory, (directory: FuzzingDirectory) => { - this.activeDirectory = directory; - }, filter(directory => this.activeDirectory !== directory)); + this.select( + selectFuzzingActiveDirectory, + (directory: FuzzingDirectory) => { + this.activeDirectory = directory; + }, + filter(directory => this.activeDirectory !== directory), + ); } private listenToSortingChanges(): void { @@ -113,8 +139,14 @@ export class FuzzingFilesTableComponent extends MinaTableRustWrapper file.path === this.pathFromRoute) - topElements; + const topElements = Math.floor( + this.table.virtualScroll.elementRef.nativeElement.offsetHeight / + 2 / + this.table.rowSize, + ); + const index = + this.files.findIndex(file => file.path === this.pathFromRoute) - + topElements; this.table.virtualScroll.scrollToIndex(index); } @@ -122,6 +154,10 @@ export class FuzzingFilesTableComponent extends MinaTableRustWrapper - {{ overallCoverage || 0 | number: '.2-2' }}% +
+ + {{ overallCoverage || 0 | number: '.2-2' }}% + Overall coverage
-
+ search - - close + + + close +
diff --git a/frontend/src/app/features/fuzzing/fuzzing-toolbar/fuzzing-toolbar.component.ts b/frontend/src/app/features/fuzzing/fuzzing-toolbar/fuzzing-toolbar.component.ts index c1e558d93a..b569485738 100644 --- a/frontend/src/app/features/fuzzing/fuzzing-toolbar/fuzzing-toolbar.component.ts +++ b/frontend/src/app/features/fuzzing/fuzzing-toolbar/fuzzing-toolbar.component.ts @@ -8,20 +8,21 @@ import { FuzzingFilterFiles } from '@fuzzing/fuzzing.actions'; import { debounceTime } from 'rxjs'; @Component({ - selector: 'mina-fuzzing-toolbar', - templateUrl: './fuzzing-toolbar.component.html', - styleUrls: ['./fuzzing-toolbar.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-row align-center h-xl pl-12 border-bottom' }, - standalone: false + selector: 'mina-fuzzing-toolbar', + templateUrl: './fuzzing-toolbar.component.html', + styleUrls: ['./fuzzing-toolbar.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-row align-center h-xl pl-12 border-bottom' }, + standalone: false, }) export class FuzzingToolbarComponent extends StoreDispatcher implements OnInit { - overallCoverage: number; coverageColor: string; formGroup: FormGroup; - constructor(private fb: FormBuilder) { super(); } + constructor(private fb: FormBuilder) { + super(); + } ngOnInit(): void { this.initForm(); @@ -33,20 +34,28 @@ export class FuzzingToolbarComponent extends StoreDispatcher implements OnInit { search: [''], }); - this.formGroup.get('search').valueChanges.pipe( - untilDestroyed(this), - debounceTime(150), - ).subscribe((value: string) => { - this.dispatch(FuzzingFilterFiles, value.trim().toLowerCase()); - }); + this.formGroup + .get('search') + .valueChanges.pipe(untilDestroyed(this), debounceTime(150)) + .subscribe((value: string) => { + this.dispatch(FuzzingFilterFiles, value.trim().toLowerCase()); + }); } private listenToFiles(): void { this.select(selectFuzzingFiles, (files: FuzzingFile[]) => { - this.overallCoverage = files.reduce((acc: number, file: FuzzingFile) => acc + file.coverage, 0) / files.length; - this.coverageColor = this.overallCoverage > 80 ? 'success' : this.overallCoverage > 50 ? 'aware' : 'warn'; + this.overallCoverage = + files.reduce( + (acc: number, file: FuzzingFile) => acc + file.coverage, + 0, + ) / files.length; + this.coverageColor = + this.overallCoverage > 80 + ? 'success' + : this.overallCoverage > 50 + ? 'aware' + : 'warn'; this.detect(); }); - } } diff --git a/frontend/src/app/features/fuzzing/fuzzing.actions.ts b/frontend/src/app/features/fuzzing/fuzzing.actions.ts index 8222570af8..90fc6ef8a6 100644 --- a/frontend/src/app/features/fuzzing/fuzzing.actions.ts +++ b/frontend/src/app/features/fuzzing/fuzzing.actions.ts @@ -19,13 +19,19 @@ enum FuzzingActionTypes { export const FUZZING_INIT = FuzzingActionTypes.FUZZING_INIT; export const FUZZING_CLOSE = FuzzingActionTypes.FUZZING_CLOSE; -export const FUZZING_GET_DIRECTORIES = FuzzingActionTypes.FUZZING_GET_DIRECTORIES; -export const FUZZING_GET_DIRECTORIES_SUCCESS = FuzzingActionTypes.FUZZING_GET_DIRECTORIES_SUCCESS; -export const FUZZING_SET_ACTIVE_DIRECTORY = FuzzingActionTypes.FUZZING_SET_ACTIVE_DIRECTORY; +export const FUZZING_GET_DIRECTORIES = + FuzzingActionTypes.FUZZING_GET_DIRECTORIES; +export const FUZZING_GET_DIRECTORIES_SUCCESS = + FuzzingActionTypes.FUZZING_GET_DIRECTORIES_SUCCESS; +export const FUZZING_SET_ACTIVE_DIRECTORY = + FuzzingActionTypes.FUZZING_SET_ACTIVE_DIRECTORY; export const FUZZING_GET_FILES = FuzzingActionTypes.FUZZING_GET_FILES; -export const FUZZING_GET_FILES_SUCCESS = FuzzingActionTypes.FUZZING_GET_FILES_SUCCESS; -export const FUZZING_GET_FILE_DETAILS = FuzzingActionTypes.FUZZING_GET_FILE_DETAILS; -export const FUZZING_GET_FILE_DETAILS_SUCCESS = FuzzingActionTypes.FUZZING_GET_FILE_DETAILS_SUCCESS; +export const FUZZING_GET_FILES_SUCCESS = + FuzzingActionTypes.FUZZING_GET_FILES_SUCCESS; +export const FUZZING_GET_FILE_DETAILS = + FuzzingActionTypes.FUZZING_GET_FILE_DETAILS; +export const FUZZING_GET_FILE_DETAILS_SUCCESS = + FuzzingActionTypes.FUZZING_GET_FILE_DETAILS_SUCCESS; export const FUZZING_SORT = FuzzingActionTypes.FUZZING_SORT; export const FUZZING_FILTER = FuzzingActionTypes.FUZZING_FILTER; @@ -48,13 +54,13 @@ export class FuzzingGetDirectories implements FuzzingAction { export class FuzzingGetDirectoriesSuccess implements FuzzingAction { readonly type = FUZZING_GET_DIRECTORIES_SUCCESS; - constructor(public payload: FuzzingDirectory[]) { } + constructor(public payload: FuzzingDirectory[]) {} } export class FuzzingSetActiveDirectory implements FuzzingAction { readonly type = FUZZING_SET_ACTIVE_DIRECTORY; - constructor(public payload: FuzzingDirectory) { } + constructor(public payload: FuzzingDirectory) {} } export class FuzzingGetFiles implements FuzzingAction { @@ -64,31 +70,31 @@ export class FuzzingGetFiles implements FuzzingAction { export class FuzzingGetFilesSuccess implements FuzzingAction { readonly type = FUZZING_GET_FILES_SUCCESS; - constructor(public payload: FuzzingFile[]) { } + constructor(public payload: FuzzingFile[]) {} } export class FuzzingGetFileDetails implements FuzzingAction { readonly type = FUZZING_GET_FILE_DETAILS; - constructor(public payload: FuzzingFile) { } + constructor(public payload: FuzzingFile) {} } export class FuzzingGetFileDetailsSuccess implements FuzzingAction { readonly type = FUZZING_GET_FILE_DETAILS_SUCCESS; - constructor(public payload: FuzzingFileDetails) { } + constructor(public payload: FuzzingFileDetails) {} } export class FuzzingSort implements FuzzingAction { readonly type = FUZZING_SORT; - constructor(public payload: TableSort) { } + constructor(public payload: TableSort) {} } export class FuzzingFilterFiles implements FuzzingAction { readonly type = FUZZING_FILTER; - constructor(public payload: string) { } + constructor(public payload: string) {} } export type FuzzingActions = @@ -102,5 +108,4 @@ export type FuzzingActions = | FuzzingGetFileDetails | FuzzingGetFileDetailsSuccess | FuzzingSort - | FuzzingFilterFiles - ; + | FuzzingFilterFiles; diff --git a/frontend/src/app/features/fuzzing/fuzzing.component.html b/frontend/src/app/features/fuzzing/fuzzing.component.html index 82930b2c62..1ad7db54b3 100644 --- a/frontend/src/app/features/fuzzing/fuzzing.component.html +++ b/frontend/src/app/features/fuzzing/fuzzing.component.html @@ -1,21 +1,22 @@
- - + - -
- - -
- + +
+ + +
+ - - - + + +
diff --git a/frontend/src/app/features/fuzzing/fuzzing.component.scss b/frontend/src/app/features/fuzzing/fuzzing.component.scss index ccae1f9997..26220a0717 100644 --- a/frontend/src/app/features/fuzzing/fuzzing.component.scss +++ b/frontend/src/app/features/fuzzing/fuzzing.component.scss @@ -1,9 +1,9 @@ .tables-container { - mina-fuzzing-directories-table { - width: 35%; - } + mina-fuzzing-directories-table { + width: 35%; + } - mina-fuzzing-files-table { - width: 65%; - } + mina-fuzzing-files-table { + width: 65%; + } } diff --git a/frontend/src/app/features/fuzzing/fuzzing.component.ts b/frontend/src/app/features/fuzzing/fuzzing.component.ts index 75887f2c6e..cbe2ade6de 100644 --- a/frontend/src/app/features/fuzzing/fuzzing.component.ts +++ b/frontend/src/app/features/fuzzing/fuzzing.component.ts @@ -1,6 +1,13 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; -import { FuzzingClose, FuzzingGetDirectories, FuzzingGetFiles } from '@fuzzing/fuzzing.actions'; -import { selectFuzzingActiveDirectory, selectFuzzingActiveFile } from '@fuzzing/fuzzing.state'; +import { + FuzzingClose, + FuzzingGetDirectories, + FuzzingGetFiles, +} from '@fuzzing/fuzzing.actions'; +import { + selectFuzzingActiveDirectory, + selectFuzzingActiveFile, +} from '@fuzzing/fuzzing.state'; import { take, timer } from 'rxjs'; import { untilDestroyed } from '@ngneat/until-destroy'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; @@ -8,15 +15,14 @@ import { getMergedRoute } from '@openmina/shared'; import { FuzzingFile } from '@shared/types/fuzzing/fuzzing-file.type'; @Component({ - selector: 'mina-fuzzing', - templateUrl: './fuzzing.component.html', - styleUrls: ['./fuzzing.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column w-100 h-100' }, - standalone: false + selector: 'mina-fuzzing', + templateUrl: './fuzzing.component.html', + styleUrls: ['./fuzzing.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column w-100 h-100' }, + standalone: false, }) export class FuzzingComponent extends StoreDispatcher implements OnInit { - isActiveRow: boolean; private activeDirectory: string; @@ -28,16 +34,20 @@ export class FuzzingComponent extends StoreDispatcher implements OnInit { } private listenToRouteChange(): void { - this.select(getMergedRoute, () => { - timer(0, 5000) - .pipe(untilDestroyed(this)) - .subscribe(() => { - this.dispatch(FuzzingGetDirectories); - if (this.activeDirectory) { - this.dispatch(FuzzingGetFiles); - } - }); - }, take(1)); + this.select( + getMergedRoute, + () => { + timer(0, 5000) + .pipe(untilDestroyed(this)) + .subscribe(() => { + this.dispatch(FuzzingGetDirectories); + if (this.activeDirectory) { + this.dispatch(FuzzingGetFiles); + } + }); + }, + take(1), + ); } private listenToActiveDirectory(): void { diff --git a/frontend/src/app/features/fuzzing/fuzzing.effects.ts b/frontend/src/app/features/fuzzing/fuzzing.effects.ts index 6684286a7a..0289009d8b 100644 --- a/frontend/src/app/features/fuzzing/fuzzing.effects.ts +++ b/frontend/src/app/features/fuzzing/fuzzing.effects.ts @@ -28,51 +28,83 @@ import { BaseEffect } from '@shared/base-classes/mina-rust-base.effect'; providedIn: 'root', }) export class FuzzingEffects extends BaseEffect { - readonly getDirectories$: Effect; readonly getFiles$: Effect; readonly getFileDetails$: Effect; - constructor(private actions$: Actions, - private fuzzingService: FuzzingService, - store: Store) { - + constructor( + private actions$: Actions, + private fuzzingService: FuzzingService, + store: Store, + ) { super(store, selectMinaState); - this.getDirectories$ = createEffect(() => this.actions$.pipe( - ofType(FUZZING_GET_DIRECTORIES), - switchMap(() => this.fuzzingService.getRootDirectoryContent()), - map((payload: FuzzingDirectory[]) => ({ type: FUZZING_GET_DIRECTORIES_SUCCESS, payload })), - catchError((error: Error) => [ - addError(error, MinaErrorType.GENERIC), - { type: FUZZING_GET_DIRECTORIES_SUCCESS, payload: [] as FuzzingDirectory[] }, - ]), - repeat(), - )); + this.getDirectories$ = createEffect(() => + this.actions$.pipe( + ofType(FUZZING_GET_DIRECTORIES), + switchMap(() => this.fuzzingService.getRootDirectoryContent()), + map((payload: FuzzingDirectory[]) => ({ + type: FUZZING_GET_DIRECTORIES_SUCCESS, + payload, + })), + catchError((error: Error) => [ + addError(error, MinaErrorType.GENERIC), + { + type: FUZZING_GET_DIRECTORIES_SUCCESS, + payload: [] as FuzzingDirectory[], + }, + ]), + repeat(), + ), + ); - this.getFiles$ = createEffect(() => this.actions$.pipe( - ofType(FUZZING_GET_FILES, FUZZING_SET_ACTIVE_DIRECTORY), - this.latestActionState(), - switchMap(({ state }) => this.fuzzingService.getFiles(state.fuzzing.activeDirectory.fullName)), - map((payload: FuzzingFile[]) => ({ type: FUZZING_GET_FILES_SUCCESS, payload })), - catchError((error: Error) => [ - addError(error, MinaErrorType.GENERIC), - { type: FUZZING_GET_FILES_SUCCESS, payload: [] as FuzzingFile[] }, - ]), - repeat(), - )); + this.getFiles$ = createEffect(() => + this.actions$.pipe( + ofType(FUZZING_GET_FILES, FUZZING_SET_ACTIVE_DIRECTORY), + this.latestActionState(), + switchMap(({ state }) => + this.fuzzingService.getFiles(state.fuzzing.activeDirectory.fullName), + ), + map((payload: FuzzingFile[]) => ({ + type: FUZZING_GET_FILES_SUCCESS, + payload, + })), + catchError((error: Error) => [ + addError(error, MinaErrorType.GENERIC), + { type: FUZZING_GET_FILES_SUCCESS, payload: [] as FuzzingFile[] }, + ]), + repeat(), + ), + ); - this.getFileDetails$ = createEffect(() => this.actions$.pipe( - ofType(FUZZING_GET_FILE_DETAILS), - this.latestActionState(), - filter(({ action }) => !!action.payload), - switchMap(({ action, state }) => this.fuzzingService.getFileDetails(state.fuzzing.activeDirectory.fullName, action.payload.name)), - map((payload: FuzzingFileDetails) => ({ type: FUZZING_GET_FILE_DETAILS_SUCCESS, payload })), - catchError((error: Error) => [ - addError(error, MinaErrorType.GENERIC), - { type: FUZZING_GET_FILE_DETAILS_SUCCESS, payload: { lines: [], executedLines: 0, filename: '' } as FuzzingFileDetails }, - ]), - repeat(), - )); + this.getFileDetails$ = createEffect(() => + this.actions$.pipe( + ofType(FUZZING_GET_FILE_DETAILS), + this.latestActionState(), + filter(({ action }) => !!action.payload), + switchMap(({ action, state }) => + this.fuzzingService.getFileDetails( + state.fuzzing.activeDirectory.fullName, + action.payload.name, + ), + ), + map((payload: FuzzingFileDetails) => ({ + type: FUZZING_GET_FILE_DETAILS_SUCCESS, + payload, + })), + catchError((error: Error) => [ + addError(error, MinaErrorType.GENERIC), + { + type: FUZZING_GET_FILE_DETAILS_SUCCESS, + payload: { + lines: [], + executedLines: 0, + filename: '', + } as FuzzingFileDetails, + }, + ]), + repeat(), + ), + ); } } diff --git a/frontend/src/app/features/fuzzing/fuzzing.module.ts b/frontend/src/app/features/fuzzing/fuzzing.module.ts index e7687390ab..66c12236c5 100644 --- a/frontend/src/app/features/fuzzing/fuzzing.module.ts +++ b/frontend/src/app/features/fuzzing/fuzzing.module.ts @@ -9,10 +9,12 @@ import { EffectsModule } from '@ngrx/effects'; import { FuzzingEffects } from '@fuzzing/fuzzing.effects'; import { FuzzingToolbarComponent } from '@fuzzing/fuzzing-toolbar/fuzzing-toolbar.component'; import { FuzzingDirectoriesTableComponent } from '@fuzzing/fuzzing-directories-table/fuzzing-directories-table.component'; -import { CopyComponent, HorizontalResizableContainerComponent } from '@openmina/shared'; +import { + CopyComponent, + HorizontalResizableContainerComponent, +} from '@openmina/shared'; import { LoadingSpinnerComponent } from '@shared/loading-spinner/loading-spinner.component'; - @NgModule({ declarations: [ FuzzingComponent, diff --git a/frontend/src/app/features/fuzzing/fuzzing.reducer.ts b/frontend/src/app/features/fuzzing/fuzzing.reducer.ts index 5b5edb4825..742f8be0eb 100644 --- a/frontend/src/app/features/fuzzing/fuzzing.reducer.ts +++ b/frontend/src/app/features/fuzzing/fuzzing.reducer.ts @@ -27,11 +27,15 @@ const initialState: FuzzingState = { filterText: undefined, }; -export function fuzzingReducer(state: FuzzingState = initialState, action: FuzzingActions): FuzzingState { +export function fuzzingReducer( + state: FuzzingState = initialState, + action: FuzzingActions, +): FuzzingState { switch (action.type) { - case FUZZING_GET_DIRECTORIES_SUCCESS: { - if (JSON.stringify(action.payload) === JSON.stringify(state.directories)) { + if ( + JSON.stringify(action.payload) === JSON.stringify(state.directories) + ) { return state; } return { @@ -55,7 +59,9 @@ export function fuzzingReducer(state: FuzzingState = initialState, action: Fuzzi case FUZZING_GET_FILES_SUCCESS: { const files = sortFiles(action.payload, state.sort); const filteredFiles = filterFiles(files, state.filterText); - if (JSON.stringify(filteredFiles) === JSON.stringify(state.filteredFiles)) { + if ( + JSON.stringify(filteredFiles) === JSON.stringify(state.filteredFiles) + ) { return state; } return { @@ -73,7 +79,10 @@ export function fuzzingReducer(state: FuzzingState = initialState, action: Fuzzi } case FUZZING_GET_FILE_DETAILS_SUCCESS: { - if (JSON.stringify(action.payload) === JSON.stringify(state.activeFileDetails)) { + if ( + JSON.stringify(action.payload) === + JSON.stringify(state.activeFileDetails) + ) { return state; } return { @@ -110,9 +119,14 @@ export function fuzzingReducer(state: FuzzingState = initialState, action: Fuzzi } function filterFiles(files: FuzzingFile[], filterText: string): FuzzingFile[] { - return files.filter(file => !filterText || file.path.toLowerCase().includes(filterText)); + return files.filter( + file => !filterText || file.path.toLowerCase().includes(filterText), + ); } -function sortFiles(files: FuzzingFile[], tableSort: TableSort): FuzzingFile[] { +function sortFiles( + files: FuzzingFile[], + tableSort: TableSort, +): FuzzingFile[] { return sort(files, tableSort, ['path']); } diff --git a/frontend/src/app/features/fuzzing/fuzzing.service.ts b/frontend/src/app/features/fuzzing/fuzzing.service.ts index 44fd38e6a0..cc5f94735d 100644 --- a/frontend/src/app/features/fuzzing/fuzzing.service.ts +++ b/frontend/src/app/features/fuzzing/fuzzing.service.ts @@ -10,8 +10,7 @@ import { noMillisFormat, toReadableDate } from '@openmina/shared'; @Injectable({ providedIn: 'root' }) export class FuzzingService { - - constructor(private http: HttpClient) { } + constructor(private http: HttpClient) {} getRootDirectoryContent(): Observable { // const url = CONFIG.server.includes(origin) @@ -38,12 +37,16 @@ export class FuzzingService { } return { fullName: directory, - name: directory.includes('_') ? directory.split('_').slice(1).join('_') : directory, + name: directory.includes('_') + ? directory.split('_').slice(1).join('_') + : directory, date, dateNumber, }; }); - return directories.sort((a: FuzzingDirectory, b: FuzzingDirectory) => b.dateNumber - a.dateNumber); + return directories.sort( + (a: FuzzingDirectory, b: FuzzingDirectory) => b.dateNumber - a.dateNumber, + ); } getFiles(activeDir: string): Observable { @@ -51,41 +54,56 @@ export class FuzzingService { // ? `assets/reports/${activeDir}/${type}index.json` // : `${CONFIG.server}/${type}index.json?path=${encodeURIComponent(CONFIG.parentDirectoryAbsolutePath + '/' + activeDir)}`; const url = `assets/reports/${activeDir}/rustindex.json`; - return this.http.get(url).pipe(delay(100)) + return this.http + .get(url) + .pipe(delay(100)) .pipe( - map((files: any[]) => files.map((file: any) => ({ - name: file[0], - coverage: file[1], - path: file[2], - }))), + map((files: any[]) => + files.map((file: any) => ({ + name: file[0], + coverage: file[1], + path: file[2], + })), + ), ); } - getFileDetails(activeDir: string, name: string): Observable { + getFileDetails( + activeDir: string, + name: string, + ): Observable { // const url = CONFIG.server.includes(origin) // ? `assets/reports/${activeDir}/${name}` // : `${CONFIG.server}/${name}?path=${encodeURIComponent(CONFIG.parentDirectoryAbsolutePath + '/' + activeDir)}`; const url = `assets/reports/${activeDir}/${name}`; - return this.http.get(url).pipe(delay(100)) + return this.http + .get(url) + .pipe(delay(100)) .pipe( - map((file: any) => ({ - filename: file.filename, - executedLines: file.lines.filter((line: any) => line.counters[0]).length, - lines: file.lines.map((line: any) => { - const counters = line.counters.map((counter: any) => ({ - colStart: counter.col_start, - colEnd: counter.col_end, - count: Math.abs(counter.count), - })); - return { - line: line.line, - lineColor: this.getLineColor(line), - html: this.colorLineCounters(line.line, counters), - lineHits: counters.length ? Math.max(...counters.map((counter: any) => counter.count)) : undefined, - counters, - }; - }), - } as FuzzingFileDetails)), + map( + (file: any) => + ({ + filename: file.filename, + executedLines: file.lines.filter((line: any) => line.counters[0]) + .length, + lines: file.lines.map((line: any) => { + const counters = line.counters.map((counter: any) => ({ + colStart: counter.col_start, + colEnd: counter.col_end, + count: Math.abs(counter.count), + })); + return { + line: line.line, + lineColor: this.getLineColor(line), + html: this.colorLineCounters(line.line, counters), + lineHits: counters.length + ? Math.max(...counters.map((counter: any) => counter.count)) + : undefined, + counters, + }; + }), + }) as FuzzingFileDetails, + ), ); } @@ -114,7 +132,10 @@ export class FuzzingService { return lineColor; } - private colorLineCounters(line: string, counters: FuzzingLineCounter[]): string { + private colorLineCounters( + line: string, + counters: FuzzingLineCounter[], + ): string { let result = ''; if (counters.length === 0) { return line.replace(//g, '>'); @@ -123,14 +144,18 @@ export class FuzzingService { for (let i = 0; i < line.length; i++) { const column = i; const c = line.charAt(i); - const counter = counters.find((counter: FuzzingLineCounter) => counter.colStart <= column && counter.colEnd >= column); + const counter = counters.find( + (counter: FuzzingLineCounter) => + counter.colStart <= column && counter.colEnd >= column, + ); if (counter && column === counter.colStart) { const colorCode: string = `var(--${counter.count === 0 ? 'warn' : 'success'}-secondary)`; result += ``; } - result += c === ' ' ? ' ' : (c === '<' ? '<' : c === '>' ? '>' : c); + result += + c === ' ' ? ' ' : c === '<' ? '<' : c === '>' ? '>' : c; if (counter && column === counter.colEnd) { result += ''; diff --git a/frontend/src/app/features/fuzzing/fuzzing.state.ts b/frontend/src/app/features/fuzzing/fuzzing.state.ts index 470255df1b..8634e17f4d 100644 --- a/frontend/src/app/features/fuzzing/fuzzing.state.ts +++ b/frontend/src/app/features/fuzzing/fuzzing.state.ts @@ -1,4 +1,8 @@ -import { createFeatureSelector, createSelector, MemoizedSelector } from '@ngrx/store'; +import { + createFeatureSelector, + createSelector, + MemoizedSelector, +} from '@ngrx/store'; import { MinaState } from '@app/app.setup'; import { FuzzingFile } from '@shared/types/fuzzing/fuzzing-file.type'; import { FuzzingFileDetails } from '@shared/types/fuzzing/fuzzing-file-details.type'; @@ -16,15 +20,28 @@ export interface FuzzingState { filterText: string; } -const select = (selector: (state: FuzzingState) => T): MemoizedSelector => createSelector( - selectFuzzingState, - selector, -); +const select = ( + selector: (state: FuzzingState) => T, +): MemoizedSelector => + createSelector(selectFuzzingState, selector); -export const selectFuzzingState = createFeatureSelector('fuzzing'); -export const selectFuzzingDirectories = select((state: FuzzingState): FuzzingDirectory[] => state.directories); -export const selectFuzzingActiveDirectory = select((state: FuzzingState): FuzzingDirectory => state.activeDirectory); -export const selectFuzzingFiles = select((state: FuzzingState): FuzzingFile[] => state.filteredFiles); -export const selectFuzzingActiveFile = select((state: FuzzingState): FuzzingFile => state.activeFile); -export const selectFuzzingActiveFileDetails = select((state: FuzzingState): FuzzingFileDetails => state.activeFileDetails); -export const selectFuzzingFilesSorting = select((state: FuzzingState): TableSort => state.sort); +export const selectFuzzingState = + createFeatureSelector('fuzzing'); +export const selectFuzzingDirectories = select( + (state: FuzzingState): FuzzingDirectory[] => state.directories, +); +export const selectFuzzingActiveDirectory = select( + (state: FuzzingState): FuzzingDirectory => state.activeDirectory, +); +export const selectFuzzingFiles = select( + (state: FuzzingState): FuzzingFile[] => state.filteredFiles, +); +export const selectFuzzingActiveFile = select( + (state: FuzzingState): FuzzingFile => state.activeFile, +); +export const selectFuzzingActiveFileDetails = select( + (state: FuzzingState): FuzzingFileDetails => state.activeFileDetails, +); +export const selectFuzzingFilesSorting = select( + (state: FuzzingState): TableSort => state.sort, +); diff --git a/frontend/src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.scss b/frontend/src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.scss index a263ea3581..30cd803ad8 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.scss +++ b/frontend/src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.scss @@ -1,7 +1,8 @@ @use 'leaderboard-variables'; @keyframes bounceLeftToRight { - 0%, 100% { + 0%, + 100% { transform: translateX(0); } 50% { @@ -14,7 +15,7 @@ background: leaderboard-variables.$mina-brand-gradient; top: 0; left: 0; - font-family: "IBM Plex Mono", sans-serif; + font-family: 'IBM Plex Mono', sans-serif; font-size: 16px; font-weight: 400; color: leaderboard-variables.$mina-base-primary; diff --git a/frontend/src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.ts b/frontend/src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.ts index 7f2406339b..d216a300ff 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.ts +++ b/frontend/src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.ts @@ -1,12 +1,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ - selector: 'mina-leaderboard-apply', - templateUrl: './leaderboard-apply.component.html', - styleUrl: './leaderboard-apply.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false + selector: 'mina-leaderboard-apply', + templateUrl: './leaderboard-apply.component.html', + styleUrl: './leaderboard-apply.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: false, }) -export class LeaderboardApplyComponent { - -} +export class LeaderboardApplyComponent {} diff --git a/frontend/src/app/features/leaderboard/leaderboard-details/leaderboard-details.component.scss b/frontend/src/app/features/leaderboard/leaderboard-details/leaderboard-details.component.scss index 18afb8dd00..1e18e917ab 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-details/leaderboard-details.component.scss +++ b/frontend/src/app/features/leaderboard/leaderboard-details/leaderboard-details.component.scss @@ -6,7 +6,7 @@ padding-top: 52px; background-color: leaderboard-variables.$mina-cta-primary; color: leaderboard-variables.$mina-base-primary; - font-family: "IBM Plex Sans", sans-serif; + font-family: 'IBM Plex Sans', sans-serif; } main, diff --git a/frontend/src/app/features/leaderboard/leaderboard-details/leaderboard-details.component.ts b/frontend/src/app/features/leaderboard/leaderboard-details/leaderboard-details.component.ts index b0c68ea115..f892f78e0c 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-details/leaderboard-details.component.ts +++ b/frontend/src/app/features/leaderboard/leaderboard-details/leaderboard-details.component.ts @@ -1,12 +1,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ - selector: 'mina-leaderboard-details', - templateUrl: './leaderboard-details.component.html', - styleUrl: './leaderboard-details.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false + selector: 'mina-leaderboard-details', + templateUrl: './leaderboard-details.component.html', + styleUrl: './leaderboard-details.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: false, }) -export class LeaderboardDetailsComponent { - -} +export class LeaderboardDetailsComponent {} diff --git a/frontend/src/app/features/leaderboard/leaderboard-filters/leaderboard-filters.component.html b/frontend/src/app/features/leaderboard/leaderboard-filters/leaderboard-filters.component.html index 0f9db55bdb..e95305e6c7 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-filters/leaderboard-filters.component.html +++ b/frontend/src/app/features/leaderboard/leaderboard-filters/leaderboard-filters.component.html @@ -1,26 +1,50 @@
-
+
- arrow_upward + + arrow_upward + Uptime
-
+
- arrow_upward + + arrow_upward + Block Production
-
+
search - +
diff --git a/frontend/src/app/features/leaderboard/leaderboard-filters/leaderboard-filters.component.scss b/frontend/src/app/features/leaderboard/leaderboard-filters/leaderboard-filters.component.scss index eddc774b48..642cead335 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-filters/leaderboard-filters.component.scss +++ b/frontend/src/app/features/leaderboard/leaderboard-filters/leaderboard-filters.component.scss @@ -4,7 +4,7 @@ @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200..1000&display=swap'); :host { - font-family: "IBM Plex Sans", sans-serif; + font-family: 'IBM Plex Sans', sans-serif; section { width: 100%; @@ -111,4 +111,3 @@ } } } - diff --git a/frontend/src/app/features/leaderboard/leaderboard-filters/leaderboard-filters.component.ts b/frontend/src/app/features/leaderboard/leaderboard-filters/leaderboard-filters.component.ts index 31a54b3e7b..d75f7bfd31 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-filters/leaderboard-filters.component.ts +++ b/frontend/src/app/features/leaderboard/leaderboard-filters/leaderboard-filters.component.ts @@ -1,4 +1,12 @@ -import { AfterViewInit, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { + AfterViewInit, + ChangeDetectionStrategy, + Component, + DestroyRef, + ElementRef, + OnInit, + ViewChild, +} from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { SortDirection, TableSort } from '@openmina/shared'; import { HeartbeatSummary } from '@shared/types/leaderboard/heartbeat-summary.type'; @@ -8,22 +16,26 @@ import { fromEvent } from 'rxjs'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ - selector: 'mina-leaderboard-filters', - templateUrl: './leaderboard-filters.component.html', - styleUrl: './leaderboard-filters.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-row flex-center w-100' }, - standalone: false + selector: 'mina-leaderboard-filters', + templateUrl: './leaderboard-filters.component.html', + styleUrl: './leaderboard-filters.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-row flex-center w-100' }, + standalone: false, }) -export class LeaderboardFiltersComponent extends StoreDispatcher implements OnInit, AfterViewInit { - +export class LeaderboardFiltersComponent + extends StoreDispatcher + implements OnInit, AfterViewInit +{ protected readonly SortDirection = SortDirection; @ViewChild('inputElement') private inputElement: ElementRef; currentSort: TableSort; - constructor(private destroyRef: DestroyRef) {super();} + constructor(private destroyRef: DestroyRef) { + super(); + } ngOnInit(): void { this.listenToSort(); @@ -33,23 +45,32 @@ export class LeaderboardFiltersComponent extends StoreDispatcher implements OnIn fromEvent(this.inputElement.nativeElement, 'keyup') .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe(() => { - this.dispatch2(LeaderboardActions.changeFilters({ filters: { search: this.inputElement.nativeElement.value } })); + this.dispatch2( + LeaderboardActions.changeFilters({ + filters: { search: this.inputElement.nativeElement.value }, + }), + ); }); } private listenToSort(): void { - this.select(LeaderboardSelectors.sortBy, (sort: TableSort) => { - this.currentSort = sort; - this.detect(); - }); + this.select( + LeaderboardSelectors.sortBy, + (sort: TableSort) => { + this.currentSort = sort; + this.detect(); + }, + ); } sortBy(sortBy: string): void { - const sortDirection = sortBy !== this.currentSort.sortBy - ? this.currentSort.sortDirection - : this.currentSort.sortDirection === SortDirection.ASC ? SortDirection.DSC : SortDirection.ASC; + const sortDirection = + sortBy !== this.currentSort.sortBy + ? this.currentSort.sortDirection + : this.currentSort.sortDirection === SortDirection.ASC + ? SortDirection.DSC + : SortDirection.ASC; const sort = { sortBy: sortBy as keyof HeartbeatSummary, sortDirection }; this.dispatch2(LeaderboardActions.sort({ sort })); } - } diff --git a/frontend/src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.html b/frontend/src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.html index 8459c0a98f..31482ba8d6 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.html +++ b/frontend/src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.html @@ -1,8 +1,19 @@ -
+
© 2025 Mina Foundation. All rights reserved.
- Terms and Conditions - Privacy Policy - Impressum + + Terms and Conditions + + + Privacy Policy + + + Impressum +
diff --git a/frontend/src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.scss b/frontend/src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.scss index ec9258383a..d82db1d4f1 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.scss +++ b/frontend/src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.scss @@ -1,7 +1,7 @@ @use 'leaderboard-variables'; :host { - font-family: "IBM Plex Sans", sans-serif; + font-family: 'IBM Plex Sans', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; @@ -26,7 +26,7 @@ a { color: leaderboard-variables.$mina-base-primary; cursor: pointer; - transition: .15s ease; + transition: 0.15s ease; &:hover { color: leaderboard-variables.$mina-access-primary; diff --git a/frontend/src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.ts b/frontend/src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.ts index 8d30fdc15b..0552d1c2c1 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.ts +++ b/frontend/src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.ts @@ -1,12 +1,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ - selector: 'mina-leaderboard-footer', - templateUrl: './leaderboard-footer.component.html', - styleUrl: './leaderboard-footer.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false + selector: 'mina-leaderboard-footer', + templateUrl: './leaderboard-footer.component.html', + styleUrl: './leaderboard-footer.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: false, }) -export class LeaderboardFooterComponent { - -} +export class LeaderboardFooterComponent {} diff --git a/frontend/src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.html b/frontend/src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.html index 9e091faf5a..1a788661f0 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.html +++ b/frontend/src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.html @@ -1,14 +1,40 @@
- - {{ isMenuOpen ? 'close' : 'menu' }} + + + {{ isMenuOpen ? 'close' : 'menu' }} + -
- Prize results - Program Details - Prize Draw & Tie-Break - Process +
+ + Prize results + + + Program Details + + + Prize Draw & Tie-Break Process +
diff --git a/frontend/src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.scss b/frontend/src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.scss index 7451b0fc09..d493a9e243 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.scss +++ b/frontend/src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.scss @@ -2,7 +2,7 @@ .menu { height: 58px; - font-family: "IBM Plex Mono", sans-serif; + font-family: 'IBM Plex Mono', sans-serif; font-size: 16px; font-weight: 400; color: leaderboard-variables.$mina-base-primary; diff --git a/frontend/src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.ts b/frontend/src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.ts index 1a300f88ed..0de05b06fc 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.ts +++ b/frontend/src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.ts @@ -1,37 +1,47 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { getMergedRoute, isDesktop, MergedRoute } from '@openmina/shared'; -import { animate, state, style, transition, trigger } from '@angular/animations'; +import { + animate, + state, + style, + transition, + trigger, +} from '@angular/animations'; @Component({ - selector: 'mina-leaderboard-header', - templateUrl: './leaderboard-header.component.html', - styleUrl: './leaderboard-header.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column' }, - animations: [ - trigger('dropdownAnimation', [ - state('closed', style({ - height: '0', - opacity: '0', - overflow: 'hidden', - })), - state('open', style({ - height: '*', - opacity: '1', - })), - transition('closed => open', [ - animate('300ms ease-out'), - ]), - transition('open => closed', [ - animate('200ms ease-in'), - ]), - ]), - ], - standalone: false + selector: 'mina-leaderboard-header', + templateUrl: './leaderboard-header.component.html', + styleUrl: './leaderboard-header.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column' }, + animations: [ + trigger('dropdownAnimation', [ + state( + 'closed', + style({ + height: '0', + opacity: '0', + overflow: 'hidden', + }), + ), + state( + 'open', + style({ + height: '*', + opacity: '1', + }), + ), + transition('closed => open', [animate('300ms ease-out')]), + transition('open => closed', [animate('200ms ease-in')]), + ]), + ], + standalone: false, }) -export class LeaderboardHeaderComponent extends StoreDispatcher implements OnInit { - +export class LeaderboardHeaderComponent + extends StoreDispatcher + implements OnInit +{ route: string; isMenuOpen: boolean = isDesktop(); diff --git a/frontend/src/app/features/leaderboard/leaderboard-impressum/leaderboard-impressum.component.scss b/frontend/src/app/features/leaderboard/leaderboard-impressum/leaderboard-impressum.component.scss index 18afb8dd00..1e18e917ab 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-impressum/leaderboard-impressum.component.scss +++ b/frontend/src/app/features/leaderboard/leaderboard-impressum/leaderboard-impressum.component.scss @@ -6,7 +6,7 @@ padding-top: 52px; background-color: leaderboard-variables.$mina-cta-primary; color: leaderboard-variables.$mina-base-primary; - font-family: "IBM Plex Sans", sans-serif; + font-family: 'IBM Plex Sans', sans-serif; } main, diff --git a/frontend/src/app/features/leaderboard/leaderboard-impressum/leaderboard-impressum.component.ts b/frontend/src/app/features/leaderboard/leaderboard-impressum/leaderboard-impressum.component.ts index 5322e55238..36e5f50c44 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-impressum/leaderboard-impressum.component.ts +++ b/frontend/src/app/features/leaderboard/leaderboard-impressum/leaderboard-impressum.component.ts @@ -1,12 +1,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ - selector: 'mina-leaderboard-impressum', - templateUrl: './leaderboard-impressum.component.html', - styleUrl: './leaderboard-impressum.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false + selector: 'mina-leaderboard-impressum', + templateUrl: './leaderboard-impressum.component.html', + styleUrl: './leaderboard-impressum.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: false, }) -export class LeaderboardImpressumComponent { - -} +export class LeaderboardImpressumComponent {} diff --git a/frontend/src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.html b/frontend/src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.html index 043b0cf0ea..cb7a080603 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.html +++ b/frontend/src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.html @@ -14,60 +14,121 @@
-

We Node
Do You?

+

+ We Node +
+ Do You? +

- Apply Now + + Apply Now +

Round 1 is limited to 100 seats

-
+
- +

Don't Trust, Verify

-

Every piece of data comes from verified sources. Produce, check and confirm blocks right from your device.

+

+ Every piece of data comes from verified sources. Produce, check and + confirm blocks right from your device. +

- +

Start in One Click

-

A tab in your everyday browser lets you operate and verify the blockchain. No complex setup needed.

+

+ A tab in your everyday browser lets you operate and verify the + blockchain. No complex setup needed. +

- +

Node-To-Earn

-

Keep a browser tab open to earn rewards while supporting a fairer blockchain system. Testing now live.

+

+ Keep a browser tab open to earn rewards while supporting a fairer + blockchain system. Testing now live. +

-
-

Run a web node on Testnet and enter a 1000 MINA lottery

+
+

+ Run a web node + on Testnet and enter a + 1000 MINA lottery +

- Apply Now -

Apply by DATE. Not Selected? You're first in line next time.

+ + Apply Now + +

+ Apply by DATE. Not Selected? You're first in line next time. +

- +
- -
- + +
+

Join the Mina Web Node Testing Program

-

Discover all the details about Mina's Web Node Testing Program. Learn how to apply, participate, and earn rewards in Mina Web Node Testing Round - 1.

+

+ Discover all the details about Mina's Web Node Testing Program. Learn + how to apply, participate, and earn rewards in Mina Web Node Testing + Round 1. +

- Learn more arrow_right_alt + + Learn more + arrow_right_alt +
diff --git a/frontend/src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.scss b/frontend/src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.scss index 2e37db75f5..826d4dafc3 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.scss +++ b/frontend/src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.scss @@ -2,11 +2,10 @@ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200..1000&display=swap'); - :host { background-color: leaderboard-variables.$mina-cta-primary; color: leaderboard-variables.$mina-base-primary; - font-family: "IBM Plex Sans", sans-serif; + font-family: 'IBM Plex Sans', sans-serif; } .floating-banner { @@ -47,7 +46,7 @@ mina-leaderboard-footer { font-size: 20px; line-height: 20px; font-weight: 300; - transition: .15s ease; + transition: 0.15s ease; min-width: 240px; &:hover { @@ -123,7 +122,7 @@ section { background: leaderboard-variables.$mina-base-container; border-radius: 20px; border: 1px solid #b7cdd8; - box-shadow: 0 11.614px 24.121px -4.467px rgba(183, 205, 216, 0.20); + box-shadow: 0 11.614px 24.121px -4.467px rgba(183, 205, 216, 0.2); backdrop-filter: blur(20.777027130126953px); padding: 40px; @@ -188,10 +187,10 @@ section { padding: 48px; min-height: 336px; gap: 40px; - background: rgba(239, 244, 246, 0.30); + background: rgba(239, 244, 246, 0.3); border-radius: 20px; border: 1px solid #b7cdd8; - box-shadow: 0 11.614px 24.121px -4.467px rgba(183, 205, 216, 0.20); + box-shadow: 0 11.614px 24.121px -4.467px rgba(183, 205, 216, 0.2); backdrop-filter: blur(20.777027130126953px); max-width: 90%; margin: 48px auto 0; @@ -209,7 +208,7 @@ section { } .text { - font-family: "IBM Plex Sans", sans-serif; + font-family: 'IBM Plex Sans', sans-serif; h4 { margin-bottom: 14px; diff --git a/frontend/src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.ts b/frontend/src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.ts index fb617a0412..6a4ae8ad66 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.ts +++ b/frontend/src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.ts @@ -1,17 +1,27 @@ -import { AfterViewInit, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, ViewChild } from '@angular/core'; +import { + AfterViewInit, + ChangeDetectionStrategy, + Component, + DestroyRef, + ElementRef, + ViewChild, +} from '@angular/core'; import { ManualDetection } from '@openmina/shared'; import { debounceTime, fromEvent } from 'rxjs'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ - selector: 'mina-leaderboard-landing-page', - templateUrl: './leaderboard-landing-page.component.html', - styleUrl: './leaderboard-landing-page.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column h-100 align-center' }, - standalone: false + selector: 'mina-leaderboard-landing-page', + templateUrl: './leaderboard-landing-page.component.html', + styleUrl: './leaderboard-landing-page.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column h-100 align-center' }, + standalone: false, }) -export class LeaderboardLandingPageComponent extends ManualDetection implements AfterViewInit { +export class LeaderboardLandingPageComponent + extends ManualDetection + implements AfterViewInit +{ showBanner: boolean = false; private readonly SCROLL_THRESHOLD = 100; @@ -25,10 +35,7 @@ export class LeaderboardLandingPageComponent extends ManualDetection implements const container = this.scrollContainer.nativeElement; fromEvent(container, 'scroll') - .pipe( - debounceTime(100), - takeUntilDestroyed(this.destroyRef), - ) + .pipe(debounceTime(100), takeUntilDestroyed(this.destroyRef)) .subscribe(() => { const scrollPosition = container.scrollTop; diff --git a/frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.html b/frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.html index 33feef8be9..c896f29e51 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.html +++ b/frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.html @@ -21,21 +21,33 @@
info - Live results are not final because blockchain finality takes time + + Live results are not final because blockchain finality takes time +
- chevron_right + + chevron_right +
  • New blocks can reorganize the chain, changing past data
  • Network nodes need time to reach consensus
  • Block confirmations become more certain over time
    • -
  • Final results will be published after the program ends and complete chain verification
    • +
  • + Final results will be published after the program ends and complete + chain verification +
-

To learn more about how uptime is tracked, please refer to the How - Uptime Tracking Works section in the - program details.

+

+ To learn more about how uptime is tracked, please refer to the + + How Uptime Tracking Works + + section in the program details. +

@@ -53,17 +65,28 @@
-

Download Public Keys that qualify for the following Prizes:

+

+ Download Public Keys that qualify for the following Prizes: +

- - - diff --git a/frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.scss b/frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.scss index 001fecfbfa..191f6e0b82 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.scss +++ b/frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.scss @@ -76,7 +76,7 @@ main { color: leaderboard-variables.$mina-base-primary; font-size: 16px; font-weight: 600; - background: rgba(248, 214, 17, 0.10); + background: rgba(248, 214, 17, 0.1); cursor: pointer; padding: 16px; } diff --git a/frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.ts b/frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.ts index 05c98a4b51..6607615035 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.ts +++ b/frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.ts @@ -1,45 +1,64 @@ -import { AfterViewInit, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { + AfterViewInit, + ChangeDetectionStrategy, + Component, + DestroyRef, + ElementRef, + OnInit, + ViewChild, +} from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { LeaderboardActions } from '@leaderboard/leaderboard.actions'; import { debounceTime, fromEvent, timer } from 'rxjs'; import { untilDestroyed } from '@ngneat/until-destroy'; -import { trigger, state, style, animate, transition } from '@angular/animations'; +import { + trigger, + state, + style, + animate, + transition, +} from '@angular/animations'; import { ManualDetection } from '@openmina/shared'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { LeaderboardService } from '@leaderboard/leaderboard.service'; @Component({ - selector: 'mina-leaderboard-page', - templateUrl: './leaderboard-page.component.html', - styleUrl: './leaderboard-page.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column h-100' }, - animations: [ - trigger('expandCollapse', [ - state('false', style({ - height: '0', - overflow: 'hidden', - opacity: '0', - })), - state('true', style({ - height: '*', - opacity: '1', - })), - transition('false <=> true', [ - animate('200ms ease-in-out'), - ]), - ]), - trigger('rotateIcon', [ - state('false', style({ transform: 'rotate(0)' })), - state('true', style({ transform: 'rotate(90deg)' })), - transition('false <=> true', [ - animate('200ms'), - ]), - ]), - ], - standalone: false + selector: 'mina-leaderboard-page', + templateUrl: './leaderboard-page.component.html', + styleUrl: './leaderboard-page.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column h-100' }, + animations: [ + trigger('expandCollapse', [ + state( + 'false', + style({ + height: '0', + overflow: 'hidden', + opacity: '0', + }), + ), + state( + 'true', + style({ + height: '*', + opacity: '1', + }), + ), + transition('false <=> true', [animate('200ms ease-in-out')]), + ]), + trigger('rotateIcon', [ + state('false', style({ transform: 'rotate(0)' })), + state('true', style({ transform: 'rotate(90deg)' })), + transition('false <=> true', [animate('200ms')]), + ]), + ], + standalone: false, }) -export class LeaderboardPageComponent extends StoreDispatcher implements OnInit, AfterViewInit { +export class LeaderboardPageComponent + extends StoreDispatcher + implements OnInit, AfterViewInit +{ isExpanded = false; showBanner: boolean = false; // canDownloadCSV = localStorage.getItem('download_leaderboard') === 'true'; @@ -47,8 +66,10 @@ export class LeaderboardPageComponent extends StoreDispatcher implements OnInit, private readonly SCROLL_THRESHOLD = 100; @ViewChild('scrollContainer') private scrollContainer!: ElementRef; - constructor(private destroyRef: DestroyRef, - private leaderboardService: LeaderboardService) { + constructor( + private destroyRef: DestroyRef, + private leaderboardService: LeaderboardService, + ) { super(); } @@ -64,10 +85,7 @@ export class LeaderboardPageComponent extends StoreDispatcher implements OnInit, const container = this.scrollContainer.nativeElement; fromEvent(container, 'scroll') - .pipe( - debounceTime(100), - takeUntilDestroyed(this.destroyRef), - ) + .pipe(debounceTime(100), takeUntilDestroyed(this.destroyRef)) .subscribe(() => { const scrollPosition = container.scrollTop; diff --git a/frontend/src/app/features/leaderboard/leaderboard-privacy-policy/leaderboard-privacy-policy.component.scss b/frontend/src/app/features/leaderboard/leaderboard-privacy-policy/leaderboard-privacy-policy.component.scss index 18afb8dd00..1e18e917ab 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-privacy-policy/leaderboard-privacy-policy.component.scss +++ b/frontend/src/app/features/leaderboard/leaderboard-privacy-policy/leaderboard-privacy-policy.component.scss @@ -6,7 +6,7 @@ padding-top: 52px; background-color: leaderboard-variables.$mina-cta-primary; color: leaderboard-variables.$mina-base-primary; - font-family: "IBM Plex Sans", sans-serif; + font-family: 'IBM Plex Sans', sans-serif; } main, diff --git a/frontend/src/app/features/leaderboard/leaderboard-privacy-policy/leaderboard-privacy-policy.component.ts b/frontend/src/app/features/leaderboard/leaderboard-privacy-policy/leaderboard-privacy-policy.component.ts index ca5abcf280..0cd2f83a0b 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-privacy-policy/leaderboard-privacy-policy.component.ts +++ b/frontend/src/app/features/leaderboard/leaderboard-privacy-policy/leaderboard-privacy-policy.component.ts @@ -1,12 +1,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ - selector: 'mina-leaderboard-privacy-policy', - templateUrl: './leaderboard-privacy-policy.component.html', - styleUrl: './leaderboard-privacy-policy.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false + selector: 'mina-leaderboard-privacy-policy', + templateUrl: './leaderboard-privacy-policy.component.html', + styleUrl: './leaderboard-privacy-policy.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: false, }) -export class LeaderboardPrivacyPolicyComponent { - -} +export class LeaderboardPrivacyPolicyComponent {} diff --git a/frontend/src/app/features/leaderboard/leaderboard-table/leaderboard-table.component.html b/frontend/src/app/features/leaderboard/leaderboard-table/leaderboard-table.component.html index 30826d9f06..47ba426920 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-table/leaderboard-table.component.html +++ b/frontend/src/app/features/leaderboard/leaderboard-table/leaderboard-table.component.html @@ -8,38 +8,65 @@
@if (!isLoading) { @for (row of rows; track $index) { -
+
- {{ row.publicKey | truncateMid: (desktop ? 15 : 6): 6 }} + {{ row.publicKey | truncateMid: (desktop ? 15 : 6) : 6 }} - {{ row.uptimePercentage }}% + + {{ row.uptimePercentage }}% + @if (!row.isWhale && row.uptimePercentage > 33.33) { - circle + + circle + } @if (row.uptimePrize) { - circle + + circle + } {{ row.blocksProduced ?? 0 }} @if (row.blocksPrize) { - circle + + circle + }
} } @else { -
- +
+
Loading
} diff --git a/frontend/src/app/features/leaderboard/leaderboard-table/leaderboard-table.component.scss b/frontend/src/app/features/leaderboard/leaderboard-table/leaderboard-table.component.scss index 98faf8463f..7614cb1ffa 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-table/leaderboard-table.component.scss +++ b/frontend/src/app/features/leaderboard/leaderboard-table/leaderboard-table.component.scss @@ -1,7 +1,9 @@ @use 'leaderboard-variables'; .mina-icon { - font-variation-settings: 'FILL' 1, 'wght' 400 !important; + font-variation-settings: + 'FILL' 1, + 'wght' 400 !important; } .row.head span { @@ -21,7 +23,7 @@ .row { margin: 0 auto; - font-family: "IBM Plex Sans", sans-serif; + font-family: 'IBM Plex Sans', sans-serif; } } @@ -36,7 +38,7 @@ width: 100%; height: 40px; line-height: 40px; - font-family: "IBM Plex Mono", sans-serif; + font-family: 'IBM Plex Mono', sans-serif; font-size: 16px; @media (max-width: 480px) { @@ -114,6 +116,6 @@ } mina-loading-spinner + div { - font-family: "IBM Plex Sans", sans-serif; + font-family: 'IBM Plex Sans', sans-serif; color: leaderboard-variables.$mina-base-primary; } diff --git a/frontend/src/app/features/leaderboard/leaderboard-table/leaderboard-table.component.ts b/frontend/src/app/features/leaderboard/leaderboard-table/leaderboard-table.component.ts index b621079ed1..bab8f43846 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-table/leaderboard-table.component.ts +++ b/frontend/src/app/features/leaderboard/leaderboard-table/leaderboard-table.component.ts @@ -6,26 +6,26 @@ import { isDesktop, TooltipPosition } from '@openmina/shared'; import { animate, style, transition, trigger } from '@angular/animations'; @Component({ - selector: 'mina-leaderboard-table', - templateUrl: './leaderboard-table.component.html', - styleUrl: './leaderboard-table.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column w-100 h-100' }, - animations: [ - trigger('fadeInOut', [ - transition(':enter', [ - style({ opacity: 0 }), - animate('400ms linear', style({ opacity: 1 })), - ]), - transition(':leave', [ - animate('400ms linear', style({ opacity: 0 })), - ]), - ]), - ], - standalone: false + selector: 'mina-leaderboard-table', + templateUrl: './leaderboard-table.component.html', + styleUrl: './leaderboard-table.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column w-100 h-100' }, + animations: [ + trigger('fadeInOut', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('400ms linear', style({ opacity: 1 })), + ]), + transition(':leave', [animate('400ms linear', style({ opacity: 0 }))]), + ]), + ], + standalone: false, }) -export class LeaderboardTableComponent extends StoreDispatcher implements OnInit { - +export class LeaderboardTableComponent + extends StoreDispatcher + implements OnInit +{ isLoading: boolean = true; rows: HeartbeatSummary[] = []; desktop: boolean = isDesktop(); @@ -43,10 +43,13 @@ export class LeaderboardTableComponent extends StoreDispatcher implements OnInit } private listenToHeartbeatsChanges(): void { - this.select(LeaderboardSelectors.filteredHeartbeatSummaries, (rows: HeartbeatSummary[]) => { - this.rows = rows; - this.detect(); - }); + this.select( + LeaderboardSelectors.filteredHeartbeatSummaries, + (rows: HeartbeatSummary[]) => { + this.rows = rows; + this.detect(); + }, + ); } protected readonly TooltipPosition = TooltipPosition; diff --git a/frontend/src/app/features/leaderboard/leaderboard-terms-and-conditions/leaderboard-terms-and-conditions.component.scss b/frontend/src/app/features/leaderboard/leaderboard-terms-and-conditions/leaderboard-terms-and-conditions.component.scss index 18afb8dd00..1e18e917ab 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-terms-and-conditions/leaderboard-terms-and-conditions.component.scss +++ b/frontend/src/app/features/leaderboard/leaderboard-terms-and-conditions/leaderboard-terms-and-conditions.component.scss @@ -6,7 +6,7 @@ padding-top: 52px; background-color: leaderboard-variables.$mina-cta-primary; color: leaderboard-variables.$mina-base-primary; - font-family: "IBM Plex Sans", sans-serif; + font-family: 'IBM Plex Sans', sans-serif; } main, diff --git a/frontend/src/app/features/leaderboard/leaderboard-terms-and-conditions/leaderboard-terms-and-conditions.component.ts b/frontend/src/app/features/leaderboard/leaderboard-terms-and-conditions/leaderboard-terms-and-conditions.component.ts index 604c510e9e..c26b9d559b 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-terms-and-conditions/leaderboard-terms-and-conditions.component.ts +++ b/frontend/src/app/features/leaderboard/leaderboard-terms-and-conditions/leaderboard-terms-and-conditions.component.ts @@ -1,12 +1,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ - selector: 'mina-leaderboard-terms-and-conditions', - templateUrl: './leaderboard-terms-and-conditions.component.html', - styleUrl: './leaderboard-terms-and-conditions.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false + selector: 'mina-leaderboard-terms-and-conditions', + templateUrl: './leaderboard-terms-and-conditions.component.html', + styleUrl: './leaderboard-terms-and-conditions.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: false, }) -export class LeaderboardTermsAndConditionsComponent { - -} +export class LeaderboardTermsAndConditionsComponent {} diff --git a/frontend/src/app/features/leaderboard/leaderboard-title/leaderboard-title.component.scss b/frontend/src/app/features/leaderboard/leaderboard-title/leaderboard-title.component.scss index 2135732966..567c6499b8 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-title/leaderboard-title.component.scss +++ b/frontend/src/app/features/leaderboard/leaderboard-title/leaderboard-title.component.scss @@ -7,7 +7,7 @@ } h1 { - font-family: "IBM Plex Sans", sans-serif; + font-family: 'IBM Plex Sans', sans-serif; font-weight: 300; font-size: 80px; color: leaderboard-variables.$black6; diff --git a/frontend/src/app/features/leaderboard/leaderboard-title/leaderboard-title.component.ts b/frontend/src/app/features/leaderboard/leaderboard-title/leaderboard-title.component.ts index f6332d49cf..f62c39e53a 100644 --- a/frontend/src/app/features/leaderboard/leaderboard-title/leaderboard-title.component.ts +++ b/frontend/src/app/features/leaderboard/leaderboard-title/leaderboard-title.component.ts @@ -4,15 +4,17 @@ import { HeartbeatSummary } from '@shared/types/leaderboard/heartbeat-summary.ty import { LeaderboardSelectors } from '@leaderboard/leaderboard.state'; @Component({ - selector: 'mina-leaderboard-title', - templateUrl: './leaderboard-title.component.html', - styleUrl: './leaderboard-title.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column' }, - standalone: false + selector: 'mina-leaderboard-title', + templateUrl: './leaderboard-title.component.html', + styleUrl: './leaderboard-title.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column' }, + standalone: false, }) -export class LeaderboardTitleComponent extends StoreDispatcher implements OnInit { - +export class LeaderboardTitleComponent + extends StoreDispatcher + implements OnInit +{ rows: HeartbeatSummary[] = []; ngOnInit(): void { @@ -20,9 +22,12 @@ export class LeaderboardTitleComponent extends StoreDispatcher implements OnInit } private listenToHeartbeatsChanges(): void { - this.select(LeaderboardSelectors.filteredHeartbeatSummaries, (rows: HeartbeatSummary[]) => { - this.rows = rows; - this.detect(); - }); + this.select( + LeaderboardSelectors.filteredHeartbeatSummaries, + (rows: HeartbeatSummary[]) => { + this.rows = rows; + this.detect(); + }, + ); } } diff --git a/frontend/src/app/features/leaderboard/leaderboard.actions.ts b/frontend/src/app/features/leaderboard/leaderboard.actions.ts index e89de21b15..90e3df6fb7 100644 --- a/frontend/src/app/features/leaderboard/leaderboard.actions.ts +++ b/frontend/src/app/features/leaderboard/leaderboard.actions.ts @@ -6,16 +6,26 @@ import { TableSort } from '@openmina/shared'; export const LEADERBOARD_KEY = 'leaderboard'; export const LEADERBOARD_PREFIX = 'Leaderboard'; -const type = (type: T) => createType(LEADERBOARD_PREFIX, null, type); +const type = (type: T) => + createType(LEADERBOARD_PREFIX, null, type); const init = createAction(type('Init')); const close = createAction(type('Close')); const getHeartbeats = createAction(type('Get Heartbeats')); -const getHeartbeatsSuccess = createAction(type('Get Heartbeats Success'), props<{ - heartbeatSummaries: HeartbeatSummary[], -}>()); -const changeFilters = createAction(type('Change Filters'), props<{ filters: any }>()); -const sort = createAction(type('Sort'), props<{ sort: TableSort }>()); +const getHeartbeatsSuccess = createAction( + type('Get Heartbeats Success'), + props<{ + heartbeatSummaries: HeartbeatSummary[]; + }>(), +); +const changeFilters = createAction( + type('Change Filters'), + props<{ filters: any }>(), +); +const sort = createAction( + type('Sort'), + props<{ sort: TableSort }>(), +); export const LeaderboardActions = { init, diff --git a/frontend/src/app/features/leaderboard/leaderboard.effects.ts b/frontend/src/app/features/leaderboard/leaderboard.effects.ts index bc784019b9..1f8b149027 100644 --- a/frontend/src/app/features/leaderboard/leaderboard.effects.ts +++ b/frontend/src/app/features/leaderboard/leaderboard.effects.ts @@ -14,20 +14,28 @@ import { LeaderboardService } from '@leaderboard/leaderboard.service'; providedIn: 'root', }) export class LeaderboardEffects extends BaseEffect { - readonly getHeartbeats$: Effect; - constructor(private actions$: Actions, - private leaderboardService: LeaderboardService, - store: Store) { + constructor( + private actions$: Actions, + private leaderboardService: LeaderboardService, + store: Store, + ) { super(store, selectMinaState); - this.getHeartbeats$ = createEffect(() => this.actions$.pipe( - ofType(LeaderboardActions.getHeartbeats), - this.latestActionState(), - switchMap(() => this.leaderboardService.getHeartbeatsSummaries()), - map(heartbeatSummaries => LeaderboardActions.getHeartbeatsSuccess({ heartbeatSummaries })), - catchErrorAndRepeat2(MinaErrorType.GENERIC, LeaderboardActions.getHeartbeatsSuccess({ heartbeatSummaries: [] })), - )); + this.getHeartbeats$ = createEffect(() => + this.actions$.pipe( + ofType(LeaderboardActions.getHeartbeats), + this.latestActionState(), + switchMap(() => this.leaderboardService.getHeartbeatsSummaries()), + map(heartbeatSummaries => + LeaderboardActions.getHeartbeatsSuccess({ heartbeatSummaries }), + ), + catchErrorAndRepeat2( + MinaErrorType.GENERIC, + LeaderboardActions.getHeartbeatsSuccess({ heartbeatSummaries: [] }), + ), + ), + ); } } diff --git a/frontend/src/app/features/leaderboard/leaderboard.module.ts b/frontend/src/app/features/leaderboard/leaderboard.module.ts index 44c318a2f0..0b814e88d9 100644 --- a/frontend/src/app/features/leaderboard/leaderboard.module.ts +++ b/frontend/src/app/features/leaderboard/leaderboard.module.ts @@ -19,7 +19,6 @@ import { LeaderboardImpressumComponent } from '@leaderboard/leaderboard-impressu import { LeaderboardPrivacyPolicyComponent } from '@leaderboard/leaderboard-privacy-policy/leaderboard-privacy-policy.component'; import { LeaderboardApplyComponent } from '@leaderboard/leaderboard-apply/leaderboard-apply.component'; - @NgModule({ declarations: [ LeaderboardPageComponent, @@ -43,8 +42,6 @@ import { LeaderboardApplyComponent } from '@leaderboard/leaderboard-apply/leader LoadingSpinnerComponent, EffectsModule.forFeature(LeaderboardEffects), ], - exports: [ - LeaderboardLandingPageComponent, - ], + exports: [LeaderboardLandingPageComponent], }) export class LeaderboardModule {} diff --git a/frontend/src/app/features/leaderboard/leaderboard.reducer.ts b/frontend/src/app/features/leaderboard/leaderboard.reducer.ts index bc90f3941e..f81901948a 100644 --- a/frontend/src/app/features/leaderboard/leaderboard.reducer.ts +++ b/frontend/src/app/features/leaderboard/leaderboard.reducer.ts @@ -4,7 +4,6 @@ import { LeaderboardActions } from '@leaderboard/leaderboard.actions'; import { HeartbeatSummary } from '@shared/types/leaderboard/heartbeat-summary.type'; import { sort, SortDirection, TableSort } from '@openmina/shared'; - const initialState: LeaderboardState = { filteredHeartbeatSummaries: [], heartbeatSummaries: [], @@ -20,33 +19,52 @@ const initialState: LeaderboardState = { export const leaderboardReducer = createReducer( initialState, - on(LeaderboardActions.getHeartbeatsSuccess, (state, { heartbeatSummaries }) => ({ - ...state, - isLoading: false, - heartbeatSummaries, - filteredHeartbeatSummaries: sortHeartbeats(filterHeartbeats(heartbeatSummaries, state.filters), state.sortBy), - })), + on( + LeaderboardActions.getHeartbeatsSuccess, + (state, { heartbeatSummaries }) => ({ + ...state, + isLoading: false, + heartbeatSummaries, + filteredHeartbeatSummaries: sortHeartbeats( + filterHeartbeats(heartbeatSummaries, state.filters), + state.sortBy, + ), + }), + ), on(LeaderboardActions.changeFilters, (state, { filters }) => ({ ...state, filters, - filteredHeartbeatSummaries: sortHeartbeats(filterHeartbeats(state.heartbeatSummaries, filters), state.sortBy), + filteredHeartbeatSummaries: sortHeartbeats( + filterHeartbeats(state.heartbeatSummaries, filters), + state.sortBy, + ), })), on(LeaderboardActions.sort, (state, { sort }) => ({ ...state, sortBy: sort, - filteredHeartbeatSummaries: sortHeartbeats(state.filteredHeartbeatSummaries, sort), + filteredHeartbeatSummaries: sortHeartbeats( + state.filteredHeartbeatSummaries, + sort, + ), })), ); - -function sortHeartbeats(node: HeartbeatSummary[], tableSort: TableSort): HeartbeatSummary[] { +function sortHeartbeats( + node: HeartbeatSummary[], + tableSort: TableSort, +): HeartbeatSummary[] { const data = sort(node, tableSort, []); - const whales = data.filter(d => d.isWhale).sort((a, b) => b.uptimePercentage - a.uptimePercentage); + const whales = data + .filter(d => d.isWhale) + .sort((a, b) => b.uptimePercentage - a.uptimePercentage); const nonWhales = data.filter(d => !d.isWhale); return [...nonWhales, ...whales]; } -function filterHeartbeats(summaries: HeartbeatSummary[], filters: any): HeartbeatSummary[] { +function filterHeartbeats( + summaries: HeartbeatSummary[], + filters: any, +): HeartbeatSummary[] { return summaries.filter(summary => { if (filters.search?.length) { const searchTerm = filters.search.toLowerCase(); diff --git a/frontend/src/app/features/leaderboard/leaderboard.service.ts b/frontend/src/app/features/leaderboard/leaderboard.service.ts index 24a47e6471..b4f8ef54e5 100644 --- a/frontend/src/app/features/leaderboard/leaderboard.service.ts +++ b/frontend/src/app/features/leaderboard/leaderboard.service.ts @@ -1,7 +1,13 @@ import { Injectable, Optional } from '@angular/core'; import { combineLatest, map, Observable } from 'rxjs'; import { HeartbeatSummary } from '@shared/types/leaderboard/heartbeat-summary.type'; -import { collection, collectionData, CollectionReference, Firestore, getDocs } from '@angular/fire/firestore'; +import { + collection, + collectionData, + CollectionReference, + Firestore, + getDocs, +} from '@angular/fire/firestore'; import { WebNodeService } from '@core/services/web-node.service'; import { getElapsedTimeInMinsAndHours } from '@shared/helpers/date.helper'; import { ONE_THOUSAND, toReadableDate } from '@openmina/shared'; @@ -10,14 +16,15 @@ import { ONE_THOUSAND, toReadableDate } from '@openmina/shared'; providedIn: 'root', }) export class LeaderboardService { - private scoresCollection: CollectionReference; private maxScoreCollection: CollectionReference; private maxScoreRightNow: number; - constructor(@Optional() private firestore: Firestore, - private webnodeService: WebNodeService) { + constructor( + @Optional() private firestore: Firestore, + private webnodeService: WebNodeService, + ) { if (this.firestore) { this.scoresCollection = collection(this.firestore, 'scores'); this.maxScoreCollection = collection(this.firestore, 'maxScore'); @@ -34,21 +41,33 @@ export class LeaderboardService { const maxScoreNow: any = maxScore.find(c => c.id === 'current'); this.maxScoreRightNow = maxScoreNow ? maxScoreNow['value'] : 0; const items = scores.map(score => { - const isWhale = score['publicKey'].includes('B62qkiqPXFDayJV8JutYvjerERZ35EKrdmdcXh3j1rDUHRs1bJkFFcX') || score['publicKey'].includes('B62qpQT46XiGQs7KhcczifvvYcnx7fbTzKj8a83UcT2BhPEs5mYnzdp'); - return ({ + const isWhale = + score['publicKey'].includes( + 'B62qkiqPXFDayJV8JutYvjerERZ35EKrdmdcXh3j1rDUHRs1bJkFFcX', + ) || + score['publicKey'].includes( + 'B62qpQT46XiGQs7KhcczifvvYcnx7fbTzKj8a83UcT2BhPEs5mYnzdp', + ); + return { publicKey: score['publicKey'], blocksProduced: score['blocksProduced'], isWhale, - uptimePercentage: this.getUptimePercentage(score['score'], this.maxScoreRightNow), + uptimePercentage: this.getUptimePercentage( + score['score'], + this.maxScoreRightNow, + ), uptimePrize: false, blocksPrize: false, score: score['score'], maxScore: this.maxScoreRightNow, - } as HeartbeatSummary); + } as HeartbeatSummary; }); - const sortedItemsByUptime = [...items].filter(i => !i.isWhale).sort((a, b) => b.uptimePercentage - a.uptimePercentage); - const fifthPlacePercentageByUptime = sortedItemsByUptime[4]?.uptimePercentage ?? 0; + const sortedItemsByUptime = [...items] + .filter(i => !i.isWhale) + .sort((a, b) => b.uptimePercentage - a.uptimePercentage); + const fifthPlacePercentageByUptime = + sortedItemsByUptime[4]?.uptimePercentage ?? 0; const highestProducedBlocks = Math.max( ...items .filter(i => !i.isWhale) @@ -57,8 +76,12 @@ export class LeaderboardService { ); return items.map(item => ({ ...item, - uptimePrize: item.isWhale ? false : (item.uptimePercentage >= fifthPlacePercentageByUptime), - blocksPrize: item.isWhale ? false : (item.blocksProduced === highestProducedBlocks), + uptimePrize: item.isWhale + ? false + : item.uptimePercentage >= fifthPlacePercentageByUptime, + blocksPrize: item.isWhale + ? false + : item.blocksProduced === highestProducedBlocks, })); }), ); @@ -73,28 +96,43 @@ export class LeaderboardService { this.one = 1; // Sort the heartbeats by createTime (oldest first) const sortedHeartbeats = [...heartbeats].sort((a, b) => { - const timeA = a.createTime.seconds * 1000 + a.createTime.nanoseconds / 1000000; - const timeB = b.createTime.seconds * 1000 + b.createTime.nanoseconds / 1000000; + const timeA = + a.createTime.seconds * 1000 + a.createTime.nanoseconds / 1000000; + const timeB = + b.createTime.seconds * 1000 + b.createTime.nanoseconds / 1000000; return timeA - timeB; }); // Create an array of {time, publicKey} objects const formattedData = sortedHeartbeats.map(heartbeat => { // Convert seconds and nanoseconds to milliseconds for Date constructor - const milliseconds = heartbeat.createTime.seconds * 1000 + heartbeat.createTime.nanoseconds / 1000000; + const milliseconds = + heartbeat.createTime.seconds * 1000 + + heartbeat.createTime.nanoseconds / 1000000; const date = new Date(milliseconds); // Get full day name - const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + const dayNames = [ + 'Sunday', + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday', + ]; const fullDayName = dayNames[date.getUTCDay()]; // Format in UTC with full day name const utcString = date.toUTCString(); - const formattedTime = utcString.replace(/^[A-Za-z]{3},/, `${fullDayName},`); + const formattedTime = utcString.replace( + /^[A-Za-z]{3},/, + `${fullDayName},`, + ); return { time: formattedTime, - 'Public Key': heartbeat.submitter + 'Public Key': heartbeat.submitter, }; }); @@ -105,7 +143,7 @@ export class LeaderboardService { csvRows.push(headers.join(',')); // Map rows by accessing properties directly - formattedData.forEach((row) => { + formattedData.forEach(row => { // Make sure to escape any commas within the values const publicKey = `"${row['Public Key']}"`; const time = `"${row['time']}"`; @@ -126,15 +164,20 @@ export class LeaderboardService { URL.revokeObjectURL(url); } - getUptime(): Observable<{ uptimePercentage: number, uptimeTime: string }> { - const publicKey = this.webnodeService.privateStake?.publicKey?.replace('\n', ''); + getUptime(): Observable<{ uptimePercentage: number; uptimeTime: string }> { + const publicKey = this.webnodeService.privateStake?.publicKey?.replace( + '\n', + '', + ); return combineLatest([ collectionData(this.scoresCollection, { idField: 'id' }), collectionData(this.maxScoreCollection, { idField: 'id' }), ]).pipe( map(([scores, maxScore]) => { - const activeEntry = scores.find(score => score['publicKey'] === publicKey); + const activeEntry = scores.find( + score => score['publicKey'] === publicKey, + ); if (!activeEntry) { return { @@ -144,7 +187,10 @@ export class LeaderboardService { } return { - uptimePercentage: this.getUptimePercentage(activeEntry['score'], maxScore[0]['value']), + uptimePercentage: this.getUptimePercentage( + activeEntry['score'], + maxScore[0]['value'], + ), uptimeTime: getElapsedTimeInMinsAndHours(activeEntry['score'] * 5), }; }), @@ -169,7 +215,7 @@ export class LeaderboardService { const querySnapshot = await getDocs(this.scoresCollection); const scoresData: any[] = []; - querySnapshot.forEach((doc) => { + querySnapshot.forEach(doc => { scoresData.push({ id: doc.id, ...doc.data() }); }); @@ -183,7 +229,9 @@ export class LeaderboardService { .filter(row => row.score > 0.3333 * this.maxScoreRightNow); filteredData = [...filteredData].sort((a, b) => b.score - a.score); - const headers = ['publicKey', 'score'].map(header => this.camelCaseToTitle(header)); + const headers = ['publicKey', 'score'].map(header => + this.camelCaseToTitle(header), + ); csvRows.push(headers.join(',')); filteredData.forEach((row: any) => { @@ -211,7 +259,7 @@ export class LeaderboardService { const querySnapshot = await getDocs(this.scoresCollection); const scoresData: any[] = []; - querySnapshot.forEach((doc) => { + querySnapshot.forEach(doc => { scoresData.push({ id: doc.id, ...doc.data() }); }); @@ -225,12 +273,16 @@ export class LeaderboardService { .filter(row => row.score > 0.3333 * this.maxScoreRightNow); filteredData = [...filteredData].sort((a, b) => b.score - a.score); - const sortedItemsByUptime = [...filteredData].sort((a, b) => b.score - a.score); + const sortedItemsByUptime = [...filteredData].sort( + (a, b) => b.score - a.score, + ); const fifthPlaceByUptime = sortedItemsByUptime[4]?.score ?? 0; filteredData = filteredData.filter(row => row.score >= fifthPlaceByUptime); // Convert camelCase headers to Title Case with spaces - const headers = ['publicKey', 'score'].map(header => this.camelCaseToTitle(header)); + const headers = ['publicKey', 'score'].map(header => + this.camelCaseToTitle(header), + ); csvRows.push(headers.join(',')); filteredData.forEach((row: any) => { @@ -258,7 +310,7 @@ export class LeaderboardService { const querySnapshot = await getDocs(this.scoresCollection); const scoresData: any[] = []; - querySnapshot.forEach((doc) => { + querySnapshot.forEach(doc => { scoresData.push({ id: doc.id, ...doc.data() }); }); @@ -270,12 +322,20 @@ export class LeaderboardService { publicKey: row.publicKey, blocksProduced: row.blocksProduced, })); - filteredData = [...filteredData].sort((a, b) => b.blocksProduced - a.blocksProduced); + filteredData = [...filteredData].sort( + (a, b) => b.blocksProduced - a.blocksProduced, + ); - const highestProducedBlocks = Math.max(...filteredData.map(row => row.blocksProduced)); - filteredData = filteredData.filter(row => row.blocksProduced === highestProducedBlocks); + const highestProducedBlocks = Math.max( + ...filteredData.map(row => row.blocksProduced), + ); + filteredData = filteredData.filter( + row => row.blocksProduced === highestProducedBlocks, + ); - const headers = ['publicKey', 'blocksProduced'].map(header => this.camelCaseToTitle(header)); + const headers = ['publicKey', 'blocksProduced'].map(header => + this.camelCaseToTitle(header), + ); csvRows.push(headers.join(',')); filteredData.forEach((row: any) => { @@ -303,24 +363,30 @@ export class LeaderboardService { const querySnapshot = await getDocs(this.scoresCollection); const scoresData: any[] = []; - querySnapshot.forEach((doc) => { + querySnapshot.forEach(doc => { scoresData.push({ id: doc.id, ...doc.data() }); }); const csvRows = []; - let filteredData = scoresData - .map(row => ({ - publicKey: row.publicKey, - score: row.score + ' / ' + this.maxScoreRightNow, - uptime: this.getUptimePercentage(row.score, this.maxScoreRightNow) + '%', - uptimeTime: row.score, - producedBlocks: row.blocksProduced, - lastUpdated: toReadableDate(row.lastUpdated * ONE_THOUSAND), - })); - filteredData = [...filteredData].sort((a, b) => b.uptimeTime - a.uptimeTime); + let filteredData = scoresData.map(row => ({ + publicKey: row.publicKey, + score: row.score + ' / ' + this.maxScoreRightNow, + uptime: this.getUptimePercentage(row.score, this.maxScoreRightNow) + '%', + uptimeTime: row.score, + producedBlocks: row.blocksProduced, + lastUpdated: toReadableDate(row.lastUpdated * ONE_THOUSAND), + })); + filteredData = [...filteredData].sort( + (a, b) => b.uptimeTime - a.uptimeTime, + ); - const headers = ['publicKey', 'score', 'uptime', /*'lastUpdated',*/ 'producedBlocks'].map(header => this.camelCaseToTitle(header)); + const headers = [ + 'publicKey', + 'score', + 'uptime', + /*'lastUpdated',*/ 'producedBlocks', + ].map(header => this.camelCaseToTitle(header)); csvRows.push(headers.join(',')); // Map rows diff --git a/frontend/src/app/features/leaderboard/leaderboard.state.ts b/frontend/src/app/features/leaderboard/leaderboard.state.ts index 32eb9257ff..8c6d1089f0 100644 --- a/frontend/src/app/features/leaderboard/leaderboard.state.ts +++ b/frontend/src/app/features/leaderboard/leaderboard.state.ts @@ -1,4 +1,8 @@ -import { createFeatureSelector, createSelector, MemoizedSelector } from '@ngrx/store'; +import { + createFeatureSelector, + createSelector, + MemoizedSelector, +} from '@ngrx/store'; import { MinaState } from '@app/app.setup'; import { HeartbeatSummary } from '@shared/types/leaderboard/heartbeat-summary.type'; import { LEADERBOARD_KEY } from '@leaderboard/leaderboard.actions'; @@ -12,11 +16,16 @@ export interface LeaderboardState { isLoading: boolean; } -const select = (selector: (state: LeaderboardState) => T): MemoizedSelector => createSelector( - createFeatureSelector(LEADERBOARD_KEY), - selector, +const select = ( + selector: (state: LeaderboardState) => T, +): MemoizedSelector => + createSelector( + createFeatureSelector(LEADERBOARD_KEY), + selector, + ); +const filteredHeartbeatSummaries = select( + state => state.filteredHeartbeatSummaries, ); -const filteredHeartbeatSummaries = select(state => state.filteredHeartbeatSummaries); const filters = select(state => state.filters); const sortBy = select(state => state.sortBy); const isLoading = select(state => state.isLoading); diff --git a/frontend/src/app/features/mempool/add-transaction/mempool-add-transaction.component.ts b/frontend/src/app/features/mempool/add-transaction/mempool-add-transaction.component.ts index c15f526d19..6b9666944c 100644 --- a/frontend/src/app/features/mempool/add-transaction/mempool-add-transaction.component.ts +++ b/frontend/src/app/features/mempool/add-transaction/mempool-add-transaction.component.ts @@ -1,12 +1,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ - selector: 'mina-mempool-add-transaction', - templateUrl: './mempool-add-transaction.component.html', - styleUrls: ['./mempool-add-transaction.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false + selector: 'mina-mempool-add-transaction', + templateUrl: './mempool-add-transaction.component.html', + styleUrls: ['./mempool-add-transaction.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: false, }) -export class MempoolAddTransactionComponent { - -} +export class MempoolAddTransactionComponent {} diff --git a/frontend/src/app/features/mempool/filters/mempool-filters.component.html b/frontend/src/app/features/mempool/filters/mempool-filters.component.html index d662b24efb..bdeab310f2 100644 --- a/frontend/src/app/features/mempool/filters/mempool-filters.component.html +++ b/frontend/src/app/features/mempool/filters/mempool-filters.component.html @@ -1,19 +1,32 @@
Search
-
+ search - - close + + + close +
- +
Filter
@@ -22,8 +35,13 @@
+ [ngClass]=" + filters.zkApp && zkApps !== 0 + ? 'bg-special-selected-alt-1-container special-alt-1-primary' + : 'bg-container tertiary' + " + (click)="changeFilter('zkApp', !filters.zkApp)" + > {{ zkApps }} ZKApp command
@@ -31,8 +49,13 @@
+ [ngClass]=" + filters.payment && payments !== 0 + ? 'bg-special-selected-alt-3-container special-alt-3-primary' + : 'bg-container tertiary' + " + (click)="changeFilter('payment', !filters.payment)" + > {{ payments }} Payment
@@ -40,12 +63,16 @@
+ [ngClass]=" + filters.delegation && delegations !== 0 + ? 'bg-container primary' + : 'bg-container tertiary' + " + (click)="changeFilter('delegation', !filters.delegation)" + > {{ delegations }} Delegation
-
diff --git a/frontend/src/app/features/mempool/filters/mempool-filters.component.scss b/frontend/src/app/features/mempool/filters/mempool-filters.component.scss index e6fd8a7285..4e40ca31a7 100644 --- a/frontend/src/app/features/mempool/filters/mempool-filters.component.scss +++ b/frontend/src/app/features/mempool/filters/mempool-filters.component.scss @@ -10,7 +10,6 @@ span.mr-5 { border-radius: 2px; } - form { width: 200px; background-color: openmina.$base-container; diff --git a/frontend/src/app/features/mempool/filters/mempool-filters.component.ts b/frontend/src/app/features/mempool/filters/mempool-filters.component.ts index 59ebfb003b..2d098aca20 100644 --- a/frontend/src/app/features/mempool/filters/mempool-filters.component.ts +++ b/frontend/src/app/features/mempool/filters/mempool-filters.component.ts @@ -10,23 +10,25 @@ import { untilDestroyed } from '@ngneat/until-destroy'; import { debounceTime, distinctUntilChanged, filter } from 'rxjs'; @Component({ - selector: 'mina-mempool-filters', - templateUrl: './mempool-filters.component.html', - styleUrls: ['./mempool-filters.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false + selector: 'mina-mempool-filters', + templateUrl: './mempool-filters.component.html', + styleUrls: ['./mempool-filters.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: false, }) export class MempoolFiltersComponent extends StoreDispatcher implements OnInit { - protected readonly isMobile = isMobile(); - protected readonly formGroup: FormGroup<{ search: FormControl }> = this.fb.group({ search: [''] }); + protected readonly formGroup: FormGroup<{ search: FormControl }> = + this.fb.group({ search: [''] }); filters: MempoolFilters; zkApps: number = 0; payments: number = 0; delegations: number = 0; - constructor(private fb: FormBuilder) { super(); } + constructor(private fb: FormBuilder) { + super(); + } ngOnInit(): void { this.listenToFilters(); @@ -35,20 +37,23 @@ export class MempoolFiltersComponent extends StoreDispatcher implements OnInit { } private listenToSearchChanges(): void { - this.formGroup.get('search').valueChanges.pipe( - distinctUntilChanged(), - debounceTime(200), - filter((value: string) => { - if (value.length <= 2) { - this.changeFilter('search', value.trim()); - return false; - } - return true; - }), - untilDestroyed(this), - ).subscribe((value: string) => { - this.changeFilter('search', value.trim()); - }); + this.formGroup + .get('search') + .valueChanges.pipe( + distinctUntilChanged(), + debounceTime(200), + filter((value: string) => { + if (value.length <= 2) { + this.changeFilter('search', value.trim()); + return false; + } + return true; + }), + untilDestroyed(this), + ) + .subscribe((value: string) => { + this.changeFilter('search', value.trim()); + }); } private listenToFilters(): void { @@ -64,15 +69,24 @@ export class MempoolFiltersComponent extends StoreDispatcher implements OnInit { private listenToActiveEpoch(): void { this.select(MempoolSelectors.allTxs, txs => { - this.zkApps = txs.filter(tx => tx.kind === MempoolTransactionKind.ZK_APP).length; - this.payments = txs.filter(tx => tx.kind === MempoolTransactionKind.PAYMENT).length; - this.delegations = txs.filter(tx => tx.kind === MempoolTransactionKind.DELEGATION).length; + this.zkApps = txs.filter( + tx => tx.kind === MempoolTransactionKind.ZK_APP, + ).length; + this.payments = txs.filter( + tx => tx.kind === MempoolTransactionKind.PAYMENT, + ).length; + this.delegations = txs.filter( + tx => tx.kind === MempoolTransactionKind.DELEGATION, + ).length; this.detect(); }); } changeFilter(filter: keyof MempoolFilters, value: boolean | string): void { - this.dispatch2(MempoolActions.changeFilters({ filters: { ...this.filters, [filter]: value } })); + this.dispatch2( + MempoolActions.changeFilters({ + filters: { ...this.filters, [filter]: value }, + }), + ); } - } diff --git a/frontend/src/app/features/mempool/mempool.actions.ts b/frontend/src/app/features/mempool/mempool.actions.ts index 1d3cf08d98..a86423d5ae 100644 --- a/frontend/src/app/features/mempool/mempool.actions.ts +++ b/frontend/src/app/features/mempool/mempool.actions.ts @@ -6,16 +6,26 @@ import { MempoolFilters } from '@shared/types/mempool/mempool-filters.type'; export const MEMPOOL_KEY = 'mempool'; export const MEMPOOL_PREFIX = 'Mempool'; -const type = (type: T) => createType(MEMPOOL_PREFIX, null, type); +const type = (type: T) => + createType(MEMPOOL_PREFIX, null, type); const init = createAction(type('Init')); const close = createAction(type('Close')); const getTxs = createAction(type('Get Txs')); -const getTxsSuccess = createAction(type('Get Txs Success'), props<{ - txs: MempoolTransaction[], -}>()); -const changeFilters = createAction(type('Change Filters'), props<{ filters: MempoolFilters }>()); -const setActiveTx = createAction(type('Set Active Tx'), props<{ tx: MempoolTransaction }>()); +const getTxsSuccess = createAction( + type('Get Txs Success'), + props<{ + txs: MempoolTransaction[]; + }>(), +); +const changeFilters = createAction( + type('Change Filters'), + props<{ filters: MempoolFilters }>(), +); +const setActiveTx = createAction( + type('Set Active Tx'), + props<{ tx: MempoolTransaction }>(), +); const toggleSidePanel = createAction(type('Toggle Side Panel')); export const MempoolActions = { diff --git a/frontend/src/app/features/mempool/mempool.component.html b/frontend/src/app/features/mempool/mempool.component.html index a8550d0a6e..201b6c367a 100644 --- a/frontend/src/app/features/mempool/mempool.component.html +++ b/frontend/src/app/features/mempool/mempool.component.html @@ -1,12 +1,13 @@ - - + diff --git a/frontend/src/app/features/mempool/mempool.component.ts b/frontend/src/app/features/mempool/mempool.component.ts index 6c6185f677..89078ab8c6 100644 --- a/frontend/src/app/features/mempool/mempool.component.ts +++ b/frontend/src/app/features/mempool/mempool.component.ts @@ -1,4 +1,10 @@ -import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + OnDestroy, + OnInit, +} from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; import { timer } from 'rxjs'; import { untilDestroyed } from '@ngneat/until-destroy'; @@ -7,18 +13,22 @@ import { MempoolSelectors } from '@app/features/mempool/mempool.state'; import { MempoolActions } from '@app/features/mempool/mempool.actions'; @Component({ - selector: 'mina-mempool', - templateUrl: './mempool.component.html', - styleUrls: ['./mempool.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'flex-column h-100' }, - standalone: false + selector: 'mina-mempool', + templateUrl: './mempool.component.html', + styleUrls: ['./mempool.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'flex-column h-100' }, + standalone: false, }) -export class MempoolComponent extends StoreDispatcher implements OnInit, OnDestroy { - +export class MempoolComponent + extends StoreDispatcher + implements OnInit, OnDestroy +{ isActiveRow: boolean; - constructor(protected el: ElementRef) { super(); } + constructor(protected el: ElementRef) { + super(); + } ngOnInit(): void { this.listenToActiveNode(); diff --git a/frontend/src/app/features/mempool/mempool.effects.ts b/frontend/src/app/features/mempool/mempool.effects.ts index 9600283158..67f9e1d125 100644 --- a/frontend/src/app/features/mempool/mempool.effects.ts +++ b/frontend/src/app/features/mempool/mempool.effects.ts @@ -14,30 +14,38 @@ import { MempoolService } from '@app/features/mempool/mempool.service'; providedIn: 'root', }) export class MempoolEffects extends BaseEffect { - readonly init$: Effect; readonly getTxs$: Effect; - constructor(private actions$: Actions, - private mempoolService: MempoolService, - store: Store) { + constructor( + private actions$: Actions, + private mempoolService: MempoolService, + store: Store, + ) { super(store, selectMinaState); - this.init$ = createEffect(() => this.actions$.pipe( - ofType(MempoolActions.init), - map(() => MempoolActions.getTxs()), - )); + this.init$ = createEffect(() => + this.actions$.pipe( + ofType(MempoolActions.init), + map(() => MempoolActions.getTxs()), + ), + ); - this.getTxs$ = createEffect(() => this.actions$.pipe( - ofType(MempoolActions.getTxs, MempoolActions.close), - this.latestActionState(), - switchMap(({ action }) => - action.type === MempoolActions.close.type - ? EMPTY - : this.mempoolService.getTransactionPool(), + this.getTxs$ = createEffect(() => + this.actions$.pipe( + ofType(MempoolActions.getTxs, MempoolActions.close), + this.latestActionState(), + switchMap(({ action }) => + action.type === MempoolActions.close.type + ? EMPTY + : this.mempoolService.getTransactionPool(), + ), + map(data => MempoolActions.getTxsSuccess(data)), + catchErrorAndRepeat2( + MinaErrorType.GENERIC, + MempoolActions.getTxsSuccess({ txs: [] }), + ), ), - map(data => MempoolActions.getTxsSuccess(data)), - catchErrorAndRepeat2(MinaErrorType.GENERIC, MempoolActions.getTxsSuccess({ txs: [] })), - )); + ); } } diff --git a/frontend/src/app/features/mempool/mempool.module.ts b/frontend/src/app/features/mempool/mempool.module.ts index 537b366c88..be78d23fd6 100644 --- a/frontend/src/app/features/mempool/mempool.module.ts +++ b/frontend/src/app/features/mempool/mempool.module.ts @@ -11,15 +11,12 @@ import { import { MempoolTableComponent } from '@app/features/mempool/table/mempool-table.component'; import { MempoolFiltersComponent } from '@app/features/mempool/filters/mempool-filters.component'; import { MempoolWarningsComponent } from '@app/features/mempool/warnings/mempool-warnings.component'; -import { - MempoolAddTransactionComponent, -} from '@app/features/mempool/add-transaction/mempool-add-transaction.component'; +import { MempoolAddTransactionComponent } from '@app/features/mempool/add-transaction/mempool-add-transaction.component'; import { MempoolSidePanelComponent } from '@app/features/mempool/side-panel/mempool-side-panel.component'; import { EffectsModule } from '@ngrx/effects'; import { MempoolEffects } from '@app/features/mempool/mempool.effects'; import { SharedModule } from '@shared/shared.module'; - @NgModule({ declarations: [ MempoolComponent, diff --git a/frontend/src/app/features/mempool/mempool.reducer.ts b/frontend/src/app/features/mempool/mempool.reducer.ts index 69950d6d8a..7213d3556d 100644 --- a/frontend/src/app/features/mempool/mempool.reducer.ts +++ b/frontend/src/app/features/mempool/mempool.reducer.ts @@ -1,7 +1,10 @@ import { createReducer, on } from '@ngrx/store'; import { MempoolState } from '@app/features/mempool/mempool.state'; import { MempoolActions } from '@app/features/mempool/mempool.actions'; -import { MempoolTransaction, MempoolTransactionKind } from '@shared/types/mempool/mempool-transaction.type'; +import { + MempoolTransaction, + MempoolTransactionKind, +} from '@shared/types/mempool/mempool-transaction.type'; import { MempoolFilters } from '@shared/types/mempool/mempool-filters.type'; const initialState: MempoolState = { @@ -32,19 +35,33 @@ export const mempoolReducer = createReducer( filters, txs: filterTxs(state.allTxs, filters), })), - on(MempoolActions.setActiveTx, (state, { tx }) => ({ ...state, activeTx: tx })), + on(MempoolActions.setActiveTx, (state, { tx }) => ({ + ...state, + activeTx: tx, + })), on(MempoolActions.close, () => initialState), ); -function filterTxs(txs: MempoolTransaction[], filters: MempoolFilters): MempoolTransaction[] { +function filterTxs( + txs: MempoolTransaction[], + filters: MempoolFilters, +): MempoolTransaction[] { return txs.filter(tx => { - if (filters.delegation === false && tx.kind === MempoolTransactionKind.DELEGATION) return false; - if (filters.payment === false && tx.kind === MempoolTransactionKind.PAYMENT) return false; - if (filters.zkApp === false && tx.kind === MempoolTransactionKind.ZK_APP) return false; + if ( + filters.delegation === false && + tx.kind === MempoolTransactionKind.DELEGATION + ) + return false; + if (filters.payment === false && tx.kind === MempoolTransactionKind.PAYMENT) + return false; + if (filters.zkApp === false && tx.kind === MempoolTransactionKind.ZK_APP) + return false; if (filters.search?.length > 2) { const searchTerm = filters.search.toLowerCase(); - const searchMatch = tx.txHash.toLowerCase().includes(searchTerm) || tx.sender.toLowerCase().includes(searchTerm); + const searchMatch = + tx.txHash.toLowerCase().includes(searchTerm) || + tx.sender.toLowerCase().includes(searchTerm); if (!searchMatch) return false; } diff --git a/frontend/src/app/features/mempool/mempool.service.ts b/frontend/src/app/features/mempool/mempool.service.ts index 94f302a8fb..e07d353123 100644 --- a/frontend/src/app/features/mempool/mempool.service.ts +++ b/frontend/src/app/features/mempool/mempool.service.ts @@ -7,24 +7,33 @@ import { SignedCommand, ZkappCommand, } from '@shared/types/mempool/mempool-transaction.type'; -import { decodeMemo, removeUnicodeEscapes } from '@shared/helpers/transaction.helper'; +import { + decodeMemo, + removeUnicodeEscapes, +} from '@shared/helpers/transaction.helper'; import { getLocalStorage, ONE_BILLION } from '@openmina/shared'; @Injectable({ providedIn: 'root', }) export class MempoolService { + constructor(private rust: RustService) {} - constructor(private rust: RustService) { } - - getTransactionPool(limit?: number, from?: number): Observable<{ txs: MempoolTransaction[] }> { - return this.rust.get('/transaction-pool').pipe( - map(data => ({ txs: this.mapTxPoolResponse(data) })), - map(({ txs }: { txs: any }) => ({ txs: [...txs] })), - ); + getTransactionPool( + limit?: number, + from?: number, + ): Observable<{ txs: MempoolTransaction[] }> { + return this.rust + .get('/transaction-pool') + .pipe( + map(data => ({ txs: this.mapTxPoolResponse(data) })), + map(({ txs }: { txs: any }) => ({ txs: [...txs] })), + ); } - private mapTxPoolResponse(response: MempoolTransactionResponse[]): MempoolTransaction[] { + private mapTxPoolResponse( + response: MempoolTransactionResponse[], + ): MempoolTransaction[] { return response.map((tx: MempoolTransactionResponse) => { switch (tx.data[0]) { case MempoolTransactionResponseKind.SignedCommand: @@ -39,7 +48,9 @@ export class MempoolService { memo: removeUnicodeEscapes(memo), transactionData: tx.data[1], sentFromStressingTool: memo.includes('S.T.'), - sentByMyBrowser: memo.includes(getLocalStorage()?.getItem('browserId')), + sentByMyBrowser: memo.includes( + getLocalStorage()?.getItem('browserId'), + ), } as MempoolTransaction; case MempoolTransactionResponseKind.ZkappCommand: const zkapp = tx.data[1] as ZkappCommand; @@ -54,14 +65,15 @@ export class MempoolService { memo: removeUnicodeEscapes(zkMemo), transactionData: tx.data[1], sentFromStressingTool: zkMemo.includes('S.T.'), - sentByMyBrowser: zkMemo.includes(getLocalStorage()?.getItem('browserId')), + sentByMyBrowser: zkMemo.includes( + getLocalStorage()?.getItem('browserId'), + ), } as MempoolTransaction; } }); } } - export interface MempoolTransactionResponse { data: [MempoolTransactionResponseKind, SignedCommand | ZkappCommand]; hash: string; diff --git a/frontend/src/app/features/mempool/mempool.state.ts b/frontend/src/app/features/mempool/mempool.state.ts index db1a9e0455..0f175eaad9 100644 --- a/frontend/src/app/features/mempool/mempool.state.ts +++ b/frontend/src/app/features/mempool/mempool.state.ts @@ -1,4 +1,8 @@ -import { createFeatureSelector, createSelector, MemoizedSelector } from '@ngrx/store'; +import { + createFeatureSelector, + createSelector, + MemoizedSelector, +} from '@ngrx/store'; import { MinaState } from '@app/app.setup'; import { MempoolTransaction } from '@shared/types/mempool/mempool-transaction.type'; import { MempoolFilters } from '@shared/types/mempool/mempool-filters.type'; @@ -13,11 +17,10 @@ export interface MempoolState { isLoading: boolean; } - -const select = (selector: (state: MempoolState) => T): MemoizedSelector => createSelector( - createFeatureSelector(MEMPOOL_KEY), - selector, -); +const select = ( + selector: (state: MempoolState) => T, +): MemoizedSelector => + createSelector(createFeatureSelector(MEMPOOL_KEY), selector); const filteredTxs = select(state => state.txs); const allTxs = select(state => state.allTxs); diff --git a/frontend/src/app/features/mempool/side-panel/mempool-side-panel.component.html b/frontend/src/app/features/mempool/side-panel/mempool-side-panel.component.html index 45cc18ef1b..881c279e18 100644 --- a/frontend/src/app/features/mempool/side-panel/mempool-side-panel.component.html +++ b/frontend/src/app/features/mempool/side-panel/mempool-side-panel.component.html @@ -1,18 +1,30 @@
Transaction Details - close + + close
- - - + + +
- +
diff --git a/frontend/src/app/features/mempool/side-panel/mempool-side-panel.component.ts b/frontend/src/app/features/mempool/side-panel/mempool-side-panel.component.ts index aa4c49f8ab..8f6585821f 100644 --- a/frontend/src/app/features/mempool/side-panel/mempool-side-panel.component.ts +++ b/frontend/src/app/features/mempool/side-panel/mempool-side-panel.component.ts @@ -1,29 +1,47 @@ -import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + OnInit, + ViewChild, +} from '@angular/core'; import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class'; -import { downloadJson, ExpandTracking, MinaJsonViewerComponent } from '@openmina/shared'; +import { + downloadJson, + ExpandTracking, + MinaJsonViewerComponent, +} from '@openmina/shared'; import { Router } from '@angular/router'; import { Routes } from '@shared/enums/routes.enum'; import { MempoolActions } from '@app/features/mempool/mempool.actions'; import { MempoolSelectors } from '@app/features/mempool/mempool.state'; -import { MempoolTransaction, SignedCommand, ZkappCommand } from '@shared/types/mempool/mempool-transaction.type'; +import { + MempoolTransaction, + SignedCommand, + ZkappCommand, +} from '@shared/types/mempool/mempool-transaction.type'; @Component({ - selector: 'mina-mempool-side-panel', - templateUrl: './mempool-side-panel.component.html', - styleUrls: ['./mempool-side-panel.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: 'h-100 flex-column' }, - standalone: false + selector: 'mina-mempool-side-panel', + templateUrl: './mempool-side-panel.component.html', + styleUrls: ['./mempool-side-panel.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'h-100 flex-column' }, + standalone: false, }) -export class MempoolSidePanelComponent extends StoreDispatcher implements OnInit { - +export class MempoolSidePanelComponent + extends StoreDispatcher + implements OnInit +{ tx: SignedCommand | ZkappCommand; jsonString: string; expandingTracking: ExpandTracking = {}; - @ViewChild(MinaJsonViewerComponent) private minaJsonViewer: MinaJsonViewerComponent; + @ViewChild(MinaJsonViewerComponent) + private minaJsonViewer: MinaJsonViewerComponent; - constructor(private router: Router) { super(); } + constructor(private router: Router) { + super(); + } ngOnInit(): void { this.listenToActiveRowChange(); diff --git a/frontend/src/app/features/mempool/table/mempool-table.component.html b/frontend/src/app/features/mempool/table/mempool-table.component.html index fee090f2b3..3604a9cb2e 100644 --- a/frontend/src/app/features/mempool/table/mempool-table.component.html +++ b/frontend/src/app/features/mempool/table/mempool-table.component.html @@ -2,8 +2,7 @@ - {{ row.kind }} + {{ row.kind }} {{ row.txHash | truncateMid }} {{ row.sender | truncateMid }} @@ -12,22 +11,29 @@ {{ row.nonce }} {{ row.memo }} -
+
dynamic_form
-