Feacture/new explorer #260
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…r transactions, implement pagination in table components, and enhance animations in various pages
…and enhance transaction detail page with new analytics and styling features
…enhance routing with new pages, and improve styling across components
…ons, and enhance transaction detail and overview components with improved date formatting and transaction handling
…te transaction handling, and refactor data fetching for blocks
…ts, and implement block range filters in analytics and transaction pages
Collaborator
I don't think this should be commented out? |
Collaborator
|
Can you add the And add this: explorerStaticDir = "web/explorer-new/out" |
…he new explorer project
Collaborator
Author
|
Thanks for the feedback. I've made the following changes:
|
…ter component for improved navigation
Collaborator
|
Getting this @XJuanCarlosXD Curious why you didn't update the branch to use the new explorer in the makefile ## build/canopy-full: build the canopy binary and its wallet and explorer altogether
build/canopy-full: build/wallet build/explorer build/canopyAlso it seems like the branch is behind 
|
…feacture/new-explorer
… modify TypeScript configurations for improved flexibility
…roved data handling - Updated AnalyticsFilters to manage custom block ranges and selection states. - Refactored BlockProductionRate to calculate production rates based on filtered block data. - Integrated block group handling in NetworkActivity, StakingTrends, and TransactionTypes for better data visualization. - Enhanced FeeTrends to accept block groups for improved fee analysis. - Updated governance view to utilize dynamic configuration from JSON for better maintainability.
…xperience - Increased refetch interval in QueryClient to 1 minute for better data freshness. - Updated Footer component to reflect the new copyright year and added privacy and terms links. - Refactored Navbar to include a mobile menu state and improved search functionality. - Enhanced ExtraTables and OverviewCards to utilize new hooks for fetching data. - Improved pagination handling in TableCard for better mobile responsiveness. - Updated AccountsPage to include a search feature and improved data handling. - Enhanced AnalyticsFilters with error handling and search capabilities. - Refactored BlockProductionRate and NetworkActivity to improve data visualization. - Updated ValidatorsPage and ValidatorsTable to streamline data fetching and display. - General code cleanup and optimizations across various components.
…ication - Updated SearchResults component to include filters for type, date, and sorting. - Implemented deduplication logic for blocks, transactions, addresses, and validators in search results. - Refactored useSearch hook to streamline data fetching and error handling. - Enhanced Search page to retrieve filters from URL and update them dynamically. - Improved overall search experience by ensuring unique results and applying user-defined filters.
- Translated comments from Spanish to English for better accessibility. - Improved clarity of comments in Navbar, Stages, AccountsTable, BlockProductionRate, NetworkActivity, and other components. - Removed the README.md file from the analytics directory as it is no longer needed. - Enhanced code readability and maintainability by standardizing comment language.
…orer - Created .eslintignore to exclude build and configuration files from linting. - Added .nvmrc to specify Node.js version 20 for the project. - Updated netlify.toml to set NODE_VERSION to 20 and added NPM_FLAGS for legacy peer dependencies. - Modified package.json build script to allow emitting on error. - Enhanced TypeScript configuration in tsconfig.app.json with additional strictness options for better type safety.
- Added type annotations to the txCounts and blockGroups mapping functions in NetworkActivity for improved type safety. - Deleted the unused Block page component to streamline the codebase and reduce clutter.
…ompilation - Modified the build script in package.json to remove the --noEmitOnError flag, ensuring a more straightforward TypeScript compilation process.
…ctor based on environment - Modified the Navbar component to only display the NetworkSelector in development environments that are not set to 'development', enhancing clarity in the UI and preventing unnecessary elements from appearing.
…iable - Added VITE_NODE_ENV set to 'production' in netlify.toml to ensure the correct environment is used during the build process.
…rk switch - Added useNetworkChangeHandler hook to listen for network changes and invalidate relevant queries, ensuring data consistency across the application. - Updated useCardData to include RPC URL in the query key for better cache management. - Reduced stale time for card data to 5 seconds for more frequent updates and enabled refetching on window focus.
- Updated index.html to include Bootstrap icons for improved UI consistency. - Added a new route for delegators in App.tsx to enhance navigation. - Modified Navbar component to remove titles for blocks and transactions for a cleaner look. - Implemented dynamic icons for validators and transactions in ExtraTables component for better visual representation. - Enhanced OverviewCards with deterministic icons for addresses to improve user experience. - Updated Stages component to visually differentiate between staked and liquid portions in progress bars. - Improved KeyMetrics to accurately reflect active validators and their statuses. - Refactored NetworkAnalyticsPage to utilize active validators for more accurate metrics. - Enhanced TransactionDetailPage to display transaction fees in a user-friendly format. - Updated TransactionsPage and TransactionsTable to handle fees in micro denomination and improve display logic. - Added support for delegators in ValidatorsPage, allowing for better filtering and display of stakers. - General code cleanup and optimizations across various components for improved performance and maintainability.
… pages - Updated NetworkAnalyticsPage to streamline the retrieval of active validators by removing unnecessary checks. - Refined StakingPage to enhance the filtering of stakers, ensuring only relevant entries are considered for statistics calculations.
- Updated ExtraTables to include rank in the validator link for better navigation. - Refactored StakingPage to use address as the validator name and improved netAddress handling. - Enhanced ValidatorDetailHeader to support new status types and added deterministic icons based on address. - Updated ValidatorDetailPage to fetch and display real validator data, including committees and staking details. - Improved ValidatorMetrics to reflect real-time data and removed simulated metrics. - Adjusted ValidatorRewards to conditionally render reward information based on availability. - General code cleanup and optimizations for better performance and maintainability.
…rove display logic - Enhanced the rendering logic for 'Max Paused Height' and 'Unstaking Height' metrics to display a placeholder when the value is zero. - Integrated AnimatedNumber component for better visual representation of metric values, ensuring consistency in the display of numerical data.
…play - Removed unused properties 'maxPausedHeight' and 'unstakingHeight' from ValidatorDetailPage for improved clarity. - Standardized the subtitle display in ValidatorMetrics by removing conditional color logic, ensuring consistent styling.
…e display - Updated TransactionDetailPage to show minimum fee information based on transaction type, improving user clarity on fees. - Refactored TransactionsTable to include minimum fee logic, ensuring users are informed of applicable fees for each transaction. - Improved styling for fee displays to enhance visual distinction between minimum and priority fees.
- Updated Navbar to highlight active routes and improve mobile navigation experience. - Enhanced NetworkSelector for better display of selected network with truncation for long names. - Refactored ExtraTables and OverviewCards to convert amounts from micro to CNPY for clearer user understanding. - Improved TransactionDetailPage and TransactionsPage to display fees in both micro and CNPY formats, enhancing clarity on transaction costs. - General code cleanup and optimizations for better performance and maintainability.
…se CNPY - Changed fee display in AccountTransactionsTable, TransactionDetailPage, TransactionsPage, and TransactionsTable to show amounts in CNPY instead of micro denomination (uCNPY). - Simplified formatting functions to enhance clarity and consistency in fee representation. - Updated comments to reflect the changes in fee display logic.
…e ValidatorDetailHeader - Simplified the retrieval of active validators in KeyMetrics by removing unnecessary checks for validatorsData. - Added 'compound' property to ValidatorDetailHeader and implemented display logic for auto-compounding status, improving user clarity on validator features.
- Updated index.html to include additional meta tags and favicon for better SEO and user experience. - Enhanced Navbar component for improved layout and mobile responsiveness, including a search bar and network selector. - Added custom styles for select elements in index.css to improve usability. - Refactored ExtraTables and OverviewCards to conditionally display chain information based on transaction data. - Improved TableCard component to support compact footer display for better information presentation. - General code cleanup and optimizations for improved performance and maintainability.
…d display - Changed staking routes in App.tsx to simplify paths for Governance and Supply pages. - Enhanced ExtraTables component to include width specifications for table columns, improving layout consistency. - Added logic in Stages component to calculate total transactions from the latest block, enhancing data accuracy. - Updated TableCard component to support dynamic column widths for better responsiveness. - General code cleanup and optimizations for improved performance and maintainability.
…handling and UI - Removed unused functions and optimized the ExtraTables component for better column width management. - Updated AccountDetailHeader to streamline the display of account information and improve button styling. - Enhanced AccountsPage to include a new staking type mapping feature, improving data representation. - Refactored AccountsTable to display staking types alongside account balances, enhancing user clarity. - Improved various analytics components to utilize block data for more accurate time labeling and data representation. - General code cleanup and optimizations for better performance and maintainability.
…abeling - Modified block range filters to include recent time labels for better user understanding of block data. - Refactored logic to determine if blocks are recent, enhancing the accuracy of time range displays. - Cleaned up unused code related to time range calculations, streamlining the component's functionality.
…matting - Adjusted maximum fraction digits in AccountDetailHeader for clearer amount representation. - Enhanced AccountTransactionsTable by normalizing transaction types and improving age formatting with date-fns. - Added new transaction types for pause and unpause, along with corresponding color coding for better visual distinction. - Refactored time formatting logic to handle invalid timestamps gracefully, ensuring a more robust user experience.
…ents - Renamed and refactored time formatting functions in AccountTransactionsTable and TransactionsTable for consistency and clarity. - Enhanced handling of various timestamp formats, including strings and different units (seconds/microseconds), to ensure accurate age representation. - Improved error handling to gracefully return 'N/A' for invalid timestamps, enhancing user experience.
…feacture/new-explorer
- Updated BlockDetailInfo to improve the display of builder names with truncation and tooltips. - Modified BlockDetailPage to fetch and display validator information based on the proposer address. - Enhanced BlockSidebar to allow copying of proposer addresses and validator names. - Improved search functionality to allow searching for accounts even if they are validators, ensuring both can coexist in results. - Refactored logic in SearchResults to accurately count unique blocks, transactions, addresses, and validators.
- Adjusted padding and margin in TableCard, AccountDetailHeader, and AccountDetailPage for improved spacing. - Updated text sizes and classes for better readability across different screen sizes. - Enhanced the layout of the SearchResults component to support better display of results and pagination. - Introduced a mobile card view for transactions in AccountTransactionsTable for a more user-friendly experience on smaller screens. - Refined the Validator components to ensure consistent styling and improved information display.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🚀 Canopy Explorer v1.0 - First Stable Release
This PR introduces the first stable version of the Canopy blockchain explorer, a complete modern React application built with TypeScript, Vite, and Tailwind CSS. The explorer provides a comprehensive interface for exploring the Canopy network with real-time data integration from the blockchain node (port 50001). Key features include a responsive dashboard with network analytics, block explorer with filtering, transaction history, validator management, token swap interface, and export functionality. All components use real API data with no simulated content, featuring smooth animations, dark theme, and mobile-first responsive design. The application is production-ready with full TypeScript coverage, React Query for efficient data management, and complete error handling.
Closes #139