New Tool: Block explorer GUI

[srinjoyc]

👋   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

1. Create wireframes and an architectural software diagram for your potential implementation of the minimum feature set.
2. Implement an MVP of the GUI that is able to demonstrate at least one of the items on the minimum feature set.
3. Implement the remaining minimum feature set to be fully functional in a bare-bones UI.
4. 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]

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]

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]

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

[blockpinetwork]

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

1. Explorer UI and technical architectural design (09-28)
2. First Explorer DEMO
3. Function Improvment
4. 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]

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

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

[kimcodeashian]

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]

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]

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%

Video demo

• Youtube video
• Dropbox download