Datamine Network Launches High Performance Dashboard Beta
💡 AI Article Summary
The Datamine Network has released a new beta build of its decentralized dashboard, introducing a streamlined architectural foundation and optimized performance for the GameFi ecosystem.
Architectural Modernization and Tech Stack Upgrades
The latest update delivers a major overhaul of the application's underlying technologies to improve developer experience and frontend performance:
- Viem Migration: The deprecated web3.js library has been replaced with Viem, enabling native TypeScript type safety, immutability, and native bigints to phase out BN.js.
- Zustand State Management: Custom state management has been replaced with Zustand, bringing industry-standard patterns to the codebase. State interfaces have been consolidated, and Web3State is now unified as AppState.
- Library Replacements: The deprecated moment.js library has been replaced with Day.js, and WalletConnect has been removed in preparation for a future RainbowKit integration.
Performance Gains and UI Optimizations
By leveraging Zustand's useShallow hook, the dashboard significantly reduces unnecessary component pre-rendering, eliminating the legacy Render wrapper pattern. A split-out FindAccountState optimizes multicall operations. Collectively, these optimization efforts reduced the zipped dApp package size from 8.7MB to 7.7MB.
Additionally, the dashboard introduces a refreshed UI for the HODL Clicker GameFi ecosystem, incorporating average-based rewards to drive higher transaction throughput and validator yield.
Hey guys a new beta build of dashboard is out here: https://datamine-crypto.github.io/dashboard/ 
Please give it a test and let me know if you find any bugs. For a list of file changes: https://github.com/Datamine-Crypto/dashboard/pull/1/files
Here is a whole changelog:
- Replaced custom state management with Zustand (Want to get more developers with industry-leading state management)
- Migrated web3.js to Viem! (web3.js is deprecated, want immutability, and move to Rainbowkit in the future)
- moment.js -> dayjs replacement (moment.js is deprecated)
- replaced fontsource/roboto with fontsource-variable/roboto for multiple font variants
- removed Walletconnect (targeting to replace with RainbowKit down the line)
- New @/ path aliasing for import paths ()
- Cleaned up folder structure with a clear app/react/web3 split
- Improved side-effects reducer pattern with faster pendingQueries processing & documentation
- "Web3State" is now "AppState" for more consistent naming
- Merged state interface + initialState to avoid duplicate definition (type is implied by initialState)
- Split-out FindAccountState (large multicall to aggregate info to show that )
- Replaced web3 types with improved types (due to vim type safety and how it handles bigints. Idea is to migrate away from BN.js)
- Removed unfinished Onboarding flow and steps
- New useShallow usage across the app to improve prendering performance (Goal is to migrate away from extra <Render /> pattern which is now unnecessary. Check out <AccountBalancesCard> for example)
- New GameFI banners
- Fixed tsconfig.json```
Also new size for entire dapp: 7.7MB zipped vs 8.7MBFrequently Asked Questions
What are the key technical upgrades in the new Datamine dashboard beta?
The new beta migrates the frontend from web3.js to Viem for better type safety and immutability, replaces the deprecated moment.js with Day.js, and implements Zustand for streamlined state management.
How does the update improve the performance of the dApp?
The update integrates the useShallow hook to optimize component pre-rendering and splits out FindAccountState to streamline heavy multicall operations. These changes, alongside asset optimization, reduced the zipped application size from 8.7MB to 7.7MB.
What changes have been made to the GameFi interface?
The dashboard features a new UI for the HODL Clicker game, utilizing average-based rewards designed to maximize transactional throughput and increase yield for validators.
Why was Viem chosen to replace web3.js?
Viem offers native type safety, immutability, and seamless handling of bigints, allowing the ecosystem to migrate away from legacy libraries like BN.js.
· hodlforjesus · #announcements