diff --git a/applications/chainviz.md b/applications/chainviz.md new file mode 100644 index 00000000000..d82ba607d55 --- /dev/null +++ b/applications/chainviz.md @@ -0,0 +1,332 @@ +# ChainViz v1 + +- **Team Name:** Helikon Labs +- **Payment Address:** `bc1qxjy7sw0ffvpq86t6hj3mmqhnfz2hxt6pk7zdz0` (BTC) +- **Level:** 🐤 2 + +## Project Overview :page_facing_up: + +### Overview + +ChainViz Alpha web application, available at [alpha.chainviz.app](https://alpha.chainviz.app), is an [open-source](https://github.com/helikon-labs/chainviz) real-time 3D visualization of the Kusama relay chain block production process. + +![](https://raw.githubusercontent.com/helikon-labs/chainviz/development/readme_files/screenshot_01.png) + +Application in its current alpha version provides the following features: + +- Real-time 3D visualization of: + - Active validators, including paravalidation indication + - Block production by validators + - Block finalization +- Navigation of the 3D scene through zooming, panning and rotation +- Network status display +- Active validator list and search over identity/address +- Validator details panel upon click on a validator in the 3D model, or the validator list + +**This application is to fund the building of the first major version of ChainViz**, with the following features/visualizations: + +- Complete professional redesign of the application +- Additional support for Polkadot +- Parachains + - Assigned paravalidators + - XCM messages between parachains, or from parachains to relay chains +- Block content on click + - Extrinsics + - Events +- Generative sound effects for: + - Background sound + - Block production and finalization + - XCM messages + - Session and era changes + +With these additional features, ChainViz is going to become a **complete real-time visualization** of the Polkadot and Kusama relay chains and their parachains. + +### Project Details + +#### Organization + +ChainViz v1 upgrade is a collaboration between [Helikon Labs](https://helikon.io) and [Klad](https://klad.design), carried out under the management of Helikon Labs. + +#### System Architecture + +ChainViz Alpha currently utilizes both [SubVT backend services](https://github.com/helikon-labs/subvt-backend) for Kusama and Polkadot JS API as follows. + +- SubVT active validator list [service](https://github.com/helikon-labs/subvt-backend/tree/development/subvt-validator-list-server) + - List of all active validators + - For each validator, a summary including: + - Identity + - Validator preferences + - Self stake + - Nomination count and total amount, + - 1KV data if exists + - and more +- SubVT network status [service](https://github.com/helikon-labs/subvt-backend/tree/development/subvt-network-status-server) + - Era index + - Era reward points + - Total, minimum, maximum and average stake amounts +- Polkadot JS API + - Finalized block header subscription + - Utilized to mark finalized blocks + - Best block header subscription + - Utilized to display the block production animation + - Identify uncle blocks and visualize them + +ChainViz Alpha system architecture can be illustrated as follows. + +

+ +
+ Figure 1 ChainViz Alpha system architecture +

+ +Proposed upgrade to the first major version requires the following additional data: + +- Block details + - Extrinsic list and parameters + - XCM messages + - Event list and parameters +- Validator details + +Upgraded system architecture can be illustrated as follows, with newly added components colored in yellow: + +

+ +
+ Figure 2 ChainViz v1 proposed system architecture +

+ +Upgraded system utilizes the to-be-developed SubVT Block Details Service to access the block content, and the existing SubVT Validator Details Service for any necessary validator data that is not available through the validator list service. + +#### Redesign + +Redesign is a crucial part of the upgrade that aims for: + +- Improvement of the overall aesthetics and visual coherence of the application +- A better depiction of the block production process that's easier to comprehend for a wider range of users from the technically oriented to the newly-introduced +- Responsive design for a range of screen sizes +- A better utilization of the 3D space to allow for parachain visualization and preparation for future upgrades + +The redesign section consists of 4 core components: + +- Visual guidelines +- Application UI/UX +- 3D modelling +- Motion design and model animations + +

+ +
+ Figure 3 Validator details visualization redesign sample
(not representative of final work) +

+ +Design of the **visual guidelines** is one of the integral parts of the redesign section, as it aims to bring visual coherency to the ChainViz design assets. From the product perspective, the design directives allow us to create the correct positioning to make the application visually appealing to the target audience. These factors strongly affect future user acquisition and retention. From the functional perspective, it serves as a core visual guide and foundation for all future design assets, including UI/UX, 3D modelling and motion graphics. + +UI/UX redesign aims to elevate the project from a draft to a user-appealing, scalable web application. Visually, it will be based on the current project aesthetics while ensuring its responsiveness and accessibility. From the UI/UX perspective, we aim to increase usability (also by considering a set of current [issues](https://github.com/helikon-labs/chainviz/issues) raised by the community), ensure application scalability in terms of functionality growth and create a visual system that would effectively reflect the validation and nomination processes. + +We're also going to develop several 3D models, including visuals for: + +- Active validator set +- Paravalidators +- Blocks +- Block generation process + +

+ +
+ Figure 4 Block details visualization redesign sample
(not representative of final work) +

+ +3D modelling and motion design in ChainViz faces a set of challenges that we aim to solve, including effective blockchain visualization. When we use the term effective visualization, we primarily mean one that: + +- Can show the depicted processes in a simple yet systematic manner +- Can be engaging and valuable for users with different levels of expertise + +#### Audio Development + +ChainViz is going to have an internal audio synthesizer, using the Web Audio API through [Pizzicato](https://github.com/alemangui/pizzicato) or a similar module, that generates parameterized audio for: + +- Background sound, parameterized by the blockchain state +- Block production +- XCM messages +- Offline offences +- Era and epoch changes + +Please view [ChainSynth Alpha](https://alpha.chainsynth.app) for a similar effort by us. You may find information on how the sound is generated in the [ChainSynth repository](https://github.com/helikon-labs/chainsynth) readme. + +### Ecosystem Fit + +There is currently no direct match in the Dotsama ecosystem of the features offered by ChainViz. ChainViz Alpha got [shared on Twitter](https://twitter.com/gavofyork/status/1491480880245874708) by Gavin Wood upon initial release, and received a lot of praise from various Dotsama ecosystem members. + +

+ +

+ +There are currently two other projects that visualize certain aspects of the Dotsama blockspace: + +1. [Kusamaverse by Odyssey](https://odyssey.org/kusamaverse), which is closer to a metaverse space for Kusama, focused more on the interaction of the actors in the ecosystem. +2. [XCM Dashboard](https://polkadot.subscan.io/xcm_dashboard) by the Subscan team, which is a visualization of the active cross-chain messaging channels between parachains. + +ChainViz is unique in that it focuses on a very clear real-time visualization of the internals of the Dotsama machine. As we're going to explain in the Future Plans section, it also has the potential to have educational, entertainment and functional value through future development. + +## Team :busts_in_silhouette: + +### Team members + +- **Team Lead & Full-Stack Developer:** Kutsal Kaan Bilgin +- **Product Manager:** Egor Zmaznev +- **Project Manager:** Daria Kravchenko +- **Backend Developer:** Ivaylo Hubanov +- **UI/UX Designer:** [Ksenia Leonteva](https://www.behance.net/markeer) +- **3D Designer:** [Lena Sivakova](https://www.behance.net/hypnosphere) + +### Contact + +- **Contact Name:** Kutsal Kaan Bilgin +- **Contact Email:** kutsal@helikon.io +- **Contact Element/Matrix:** @helikon:matrix.org +- **Website:** [helikon.io](https://helikon.io) + +### Legal Structure + +- **Registered Address:** Omer Avni Mah. Balcik Sok. 4/4 34427 Beyoglu Istanbul Turkey +- **Registered Legal Entity:** Helikon Teknoloji ve Medya Tic. Ltd. Sti. + +### Team's experience + +#### Helikon Labs + +A crypto-native software development company based in Istanbul. Founded by [Kutsal Kaan Bilgin](https://github.com/kukabi), Helikon Labs got introduced into the Dotsama ecosystem in January 2021. Currently focused on validator tooling, infrastructure support and creative coding projects for the Dotsama ecosystem. + +- Received a Kusama treasury grant ([M1-3](https://kusama.polkassembly.io/treasury/99), [M4-5](https://kusama.polkassembly.io/treasury/129)) for: + - Completed + - [SubVT Backend](https://github.com/helikon-labs/subvt-backend) + - [SubVT Data Swift](https://github.com/helikon-labs/subvt-data-swift) + - [SubVT Data Android](https://github.com/helikon-labs/subvt-data-android) + - Alpha Testing + - [SubVT iOS](https://github.com/helikon-labs/subvt-ios) + - Under Development + - [SubVT Android](https://github.com/helikon-labs/subvt-ios) +- [Received](https://github.com/w3f/Grants-Program/blob/master/applications/subvt-telegram-bot.md) and [delivered](https://github.com/w3f/Grant-Milestone-Delivery/blob/master/deliveries/subvt_telegram_bot-milestones-1-and-2.md) a W3F Level-1 Open Grant for the [SubVT Telegram Bot](https://github.com/helikon-labs/subvt-backend/tree/development/subvt-telegram-bot) for [Kusama](https://t.me/subvt_kusama_bot) and [Polkadot](https://t.me/subvt_polkadot_bot). +- Member of both Polkadot and Kusama Thousand Validators programs. +- Running two Kusama validators, and one Polkadot validator on owned hardware in a colocation center in Istanbul. +- Active governance participation. + +#### Kutsal Kaan Bilgin + +Founder of Helikon Labs. Software developer with a BS in Computer Science and 20 years of experience in software development and leadership in diverse fields such as fintech, defense industry, interactive art installations and GIS. Focusing on user-friendly, aesthetically pleasing and creative blockchain application development since late 2019. Dotsama native since early 2021. Developer of SubVT (please see above), [ChainViz Alpha](https://alpha.chainviz.app) and [ChainSynth Alpha](https://alpha.chainsynth.app). Presenter of a Substrate Seminar [episode](https://www.youtube.com/watch?v=e-o_hTj3UFk&t=6119s&ab_channel=ParityTech) on blockchain UI application development. + +#### Egor Zmaznev + +Egor comes from a business analytics background with an emphasis on DeFi and web3 business models. He is proficient in R and Python in applications to ML modelling, focusing primarily on textual analytics in business applications with research emphasis on DeFi and DAOs. One of the co-founders of Klad Syndicate, where he managed a set of crypto projects varying from smart contract analytics to NFT marketplaces. + +#### Daria Kravchenko + +Daria focuses on internal team management. Coming from a conflictological education background, she can effectively set up and organise all of the internal communications and carry task management. Together with the designers, Daria worked on and finalized over 35 design projects only in the past year as a Klad Syndicate co-founder. Previously, managed design processes for the SubVT implementation. + +#### Ivaylo Hubanov + +Ivaylo Hubanov is coming from a strong Information Security engineering background with more than 15 years of experience in the field. He spent the last 5 years growing his passion for development and writing crypto and forex trading bots, and took part in a project for developing a 3D Fair in Unity. Also a member of Polkadot and Kusama Thousand Validators programs, he developed a complex validator orchestrator system for running validators on GCP instances while maintaining lower costs by using spot instances with low specs while inactive and high specs while active. The orchestrator required collecting live information from the chain and Ivaylo became the first developer to utilize and take part in the improvement of the SubVT websocket services. Worked together with Kutsal on improving the SubVT backend and the Telegram bots. + +#### Ksenia Leonteva + +Ksenia is a co-founder and leading UI/UX designer at Klad. She has 15 years of experience in web and UI/UX design and worked on over five crypto and DeFi-related projects over the past year. Ksenia has developed UI/UX design for the SubVT application: from the user-flow map and the wireframes to the whole app UI design. Focuses on clean user-friendly solutions, and ensures that the development team always have convenient files to work with. In 2022, won over ten web-design awards. + +#### Lena Sivakova + +Lena is a co-founder and 3D & motion designer at Klad. She has over seven years of experience and has participated in various crypto projects providing supporting 3D materials, including interactive validator 3D models for SubVT. Lena brings volume and movement to brands, allowing for spectacular immersive digital experiences. + +### Team Code Repos + +- [Helikon Labs](https://github.com/helikon-labs) + - [ChainViz](github.com/helikon-labs/chainviz) + - [ChainSynth](github.com/helikon-labs/chainsynth) + - [SubVT Backend](github.com/helikon-labs/subvt-backend) + - [SubVT iOS](github.com/helikon-labs/subvt-ios) + - [SubVT Android](github.com/helikon-labs/subvt-android) + - [SubVT Data - Swift](github.com/helikon-labs/subvt-data-swift) + - [SubVT Data - Android](github.com/helikon-labs/subvt-data-android) +- Team Members + - Kutsal Kaan Bilgin [@kukabi](https://github.com/kukabi) + - Egor Zmaznev [@Zmaznevegor](https://github.com/Zmaznevegor) + +### Team LinkedIn Profiles + +- [Egor Zmaznev](https://www.linkedin.com/in/zmaznevegor/) +- [Daria Kravchenko](https://www.linkedin.com/in/kravchenko-daria/) +- [Ivaylo Hubanov](https://www.linkedin.com/in/ihubanov) + +### Team Behance Profiles + +- [Ksenia Leonteva](https://www.behance.net/markeer) +- [Lena Sivakova](https://www.behance.net/hypnosphere) + + +## Development Status :open_book: + +[Alpha version](https://alpha.chainviz.app) of ChainViz has been live since February 2022 as detailed under the Project Details section. There hasn't been any development for the first major version proposed by this document. + +## Development Roadmap :nut_and_bolt: + +### Overview + +- **Total Estimated Duration:** 2 months +- **Full-Time Equivalent (FTE):** 0.7 +- **Total Costs:** 30,000 USD + +### Milestone 1 — Backend Development, UI/UX Design + +- **Estimated duration:** 1 month +- **FTE:** 0.75 +- **Costs:** 15,000 USD + +| Number | Deliverable | Specification | +| -----: | ----------- | ------------- | +| 0a. | License | GPLv3 | +| 0b. | Documentation | Milestone progress report and inline code documentation. GitHub README that explains how to run an instance. | +| 0c. | Testing Guide | Separate markdown in the GitHub repository that documents the complete backend test cases and how to run them. | +| 0d. | Docker | Necessary Docker/compose files necessary to run the backend services. | +| 0e. | Video Article | A YouTube video accompanied by an article on Helikon website or another blog site that documents the milestone development/design process and the outcome. | +| 1. | UI and UX Design Output | Complete design output on Figma, and other design assets uploaded to the project repository. | +| 2. | Backend Services | Required backend services coded and ready to test in the SubVT repository. | + +### Milestone 2 - Audio Design, Application Development + +- **Estimated Duration:** 1 month +- **FTE:** 1.0 +- **Costs:** 15,000 USD + +| Number | Deliverable | Specification | +| -----: | ----------- | ------------- | +| 0a. | License | GPLv3 | +| 0b. | Documentation | Milestone progress report and inline code documentation. GitHub README that explains how to run an instance. | +| 0c. | Testing Guide | Separate markdown in the GitHub repository that documents the complete test cases and how to run them. | +| 0d. | Docker | Necessary Docker/compose files necessary to run the backend services and the ChainViz web application. | +| 0e. | Video Article | A YouTube video accompanied by an article on Helikon website or another blog site that documents the milestone development/design process and the outcome. | +| 1. | Web Application | Complete web application live at [chainviz.app](https://chainviz.app), and the complete source code in the project repositories. | + +## Future Plans + +- Add educational components and user guides. + - Replayable voice recordings attached to the various components and processes for the users who would like to learn more about the internals of the Dotsama machine. + - Text and visual augmentation. + - Animated explainers and hints that give better understanding of the technology and processes. +- Validator spaces and staking through ChainViz. Support for validators to claim and update their spaces. +- iOS and Android phone, table and watch applications. +- Exploration of VR and AR possibilities. +- Creating a wiki for validator operators, supporting pull requests. +- Adding indexes to provide insights for nominators (e.g. performance, telemetry data, reliability). +- Creating validator timeseries visualizations to provide insights on performance, reliability and stability. + +## Additional Information :heavy_plus_sign: + +**How did you hear about the Grants Program?** + +We have successfully [delivered](https://github.com/w3f/Grant-Milestone-Delivery/blob/master/deliveries/subvt_telegram_bot-milestones-1-and-2.md) a W3F Level-1 Open Grant. Please view the [application document](https://github.com/w3f/Grants-Program/blob/master/applications/subvt-telegram-bot.md) for the details of our first introduction to the Grants Program. + +**Awards Received** + +Some of the recent design awards that the design team have received: + +1. CSS Design awards https://www.cssdesignawards.com/sites/klad-syndicate/41871/ +2. Awwwards https://www.awwwards.com/Klad/ +3. Mindsparkle Mag https://mindsparklemag.com/website/klad-syndicate/ \ No newline at end of file