New Tool: Block explorer GUI

srinjoyc commented 3 years ago

👋 If you are interested in working on this issue, please check out the Getting Started guide on HackerEarth!

Description/Problem

There are no easy ways to inspect the current state of the Flow blockchain when running the emulator locally. This means it can be difficult to verify your smart contract logic during your development workflow. To solve this, we'd like to have a graphical user interface (GUI) that simplifies the network state into visual elements, allows for simple interactions, and is optimized for debugging and inspecting the Flow blockchain state.

Extension: This explorer should be able to connect to the emulator as well as any Flow network (Testnet, Mainnet, Canarynet) and be deployable.

Experience Required

Familiarity with Go - able to parse and read emulator codebase
High-level understanding of Flow's architecture (block production, transaction states, etc.)
Good understanding of design principles and UI/UX for developer tools
Good understanding of Cadence and its storage model

Minimum Feature Set (Acceptance Criteria)

Explorer

View and search through all accounts, blocks and transactions on the network state.

Searchable logs

View and easily search through the log output of the emulator.

Emulator controls

Enable dynamically setting configurations on the emulator settings (ie. block times, system time, etc.).

Extension (Optional) Feature Set

Account & contract storage state

View the resources, capabilities, and storage paths for any account that has been created.

Extended usage to other networks

Deploy a hosted version that can offer the same feature set but on any Flow network..

REST API

For the deployed version, create restful endpoints to serve data.

Milestone Requirements

Create wireframes and an architectural software diagram for your potential implementation of the minimum feature set.
Implement an MVP of the GUI that is able to demonstrate at least one of the items on the minimum feature set.
Implement the remaining minimum feature set to be fully functional in a bare-bones UI.
Improve and optimize the UI/UX of the final product and optionally implement the items from the extensive feature set.

Software Requirements

Maintainability

The tools or libraries used to construct the solution should be well vetted and well maintained
Code should be written in a way that can be extended with new functionality and clear enough for open-source developers to contribute to.

Testing

All core logic should have unit tests.
Each feature implemented should be tested by an end-to-end (E2E) test.

Other Requirements

Documentation

The following pieces of documentation needs to be completed alongside the code for a successful submission:
- Installation Guide: How to get this application up and running.
- Usage Guide: A highlight of all the features available and how to use them.
- Contribution Guide: A thorough explanation of the codebase, where features are located, a diagram explaining complex interactions, etc. This is intended to be a primer for new contributors that would like to add or modify features.

Code standards or guidelines

Follow the general contribution guidelines.

Judging Criteria

For all projects, technical & high-level judging criteria apply.
How effectively does the tool help developers in the building process by making it easier for them to debug, inspect, and verify their on-chain logic?

Resources

General Resource Guide
Emulator
- Repository
- Documentation
Inspiration:
- Ganache on Ethereum: https://www.trufflesuite.com/ganache

janezpodhostnik commented 3 years ago

Hi!

I'm an engineer from the Flow team. I work with the Flow virtual machine (FVM) and I can be you point of contact on any changes needed to the emulator to achieve your goal and as general guidance.

Feel free to ask me any questions, and once you start I can help you with the implementation and review.

You can reach me here or on discord (TheOneSock#1135 JanezP on the flow discord).

10thfloor commented 3 years ago

Hello there. Mackenzie here. 🏄🏼‍♂️ I'm part of the Developer Experience team at Flow. Glad you're checking out this issue. I can help answer any questions you might have about what you see here, and if you decide to take this on, I'll be a point of contact for you or your team.

Please add your comments/questions here, or find me(mack) or @janezpodhostnik (Discord nick above ☝️) on the Flow Discord server.

Happy hacking! 🚀

10thfloor commented 3 years ago

A note about this issue: It could also include the dev-wallet service mentioned here.

blockpinetwork commented 3 years ago

Team name: BlockPI Team link on HackerEarth: https://www.hackerearth.com/challenges/hackathon/flip-fest/dashboard/61e364a/team/ Team member: culmore2015, blockpilabs First milestone:

Explorer UI and technical architectural design (09-28)

First Explorer DEMO

Function Improvment

UI optimization and user docs

The specific functions and technical solutions are under working, If there are any updates, we will post them here.

bartolomej commented 3 years ago

Team name: flippers Team link: https://www.hackerearth.com/challenges/hackathon/flip-fest/dashboard/fb756cc/team Team members: bartolomej, jgololicic, monikaxh Milestones:

Wireframes, list of minimum feature set, list of optional features set, technical architecture overview
Dummy UI Implementation
Complete functional MVP covering all of the minimum feature set
Improvements of UI/UX, implementation of optional features, user documentation, production-ready product

kimcodeashian commented 3 years ago

Good day @bartolomej, @blockpilabs!

Thanks so much for all your hardwork & participation. In order to finalize winners & prepare for prize payout, we'll need the following actions from your end.

Please provide the following information by Nov 17, 2021, (in this GH Issue is fine):

1. Team Information

Team Members Information - Github Username + Email Contact + Percentage of prize allocation (total should = 100%)
All mentioned members MUST react to the post with a 👍 which will act as confirmation that the information is correct, or a 👎 to indicate that the information is not correct.
We will be reaching out via e-mail

🎖IMPORTANT: We will only proceed with prize payouts once all members have confirmed with 👍 on the post.

2. Video Demo (optional)

Please provide a 5-minute video demo to be featured & showcased in the FLIP Fest Closing Ceremonies
Link format & Downloadable (eg. Google Drive, Vimeo)
Content Format (Problem Statement, your work / how you solved it, final outcome)

We will be hosting Closing Ceremonies on November 23rd, 8AM PT where we'll having closing remarks from Dete & will be announcing the winners! I'll share the details here before Nov 17.

kimcodeashian commented 3 years ago

Hey folks,

We've received and reviewed over 82 submissions! What an amazing community on Flow! To commemorate all the hard work done, we have finalized winners and will be announcing them during our Closing Ceremony on Nov 23rd, 8AM PT. Be sure to join us - there may be some attendance prizes & a keynote from our CTO, Dete 😉!

RSVP here so you don't miss out! See you then!

bartolomej commented 3 years ago

Hey @kimcodeashian, that's awesome!

Our team info:

monikaxh (monika.hribersek@gmail.com): 18%
jgololicic (jernej.gololicic@gmail.com): 45.5%
bartolomej (bartolomej.kozorog@gmail.com): 36.5%

onflow / flip-fest