New Tool: Block explorer GUI - Milestone 4 - Flippers

[bartolomej]

New Tool: Block explorer GUI - Milestone 4

Description

This PR is for issue #2

This submission includes implementation of remaining minimum feature set to be fully functional in a bare-bones UI, additionally some optional features are included.

Features submitted

• Emulator configuration
  • add support for all config variables defined here
  • setup & manage multiple independant emulators from the Flowser UI
• Blockchain explorer:
  • accounts
  • transactions
  • contracts (cadence syntax highlighting)
  • keys
  • storage (nicely formatted & highlighted json view)
  • blocks
  • transactions
  • collections
  • transactions
  • script (cadence syntax highlighting)
  • signatures
  • events
  • contracts
  • code
  • events
  • data
• Emulator logs
  • View and easily search through the log output of the emulator.
  • Nicely highlighted & formatted log syntax
• Rest API (with online documentation at: app.flowser.dev/api)
• Common features
  • navigation with "count badges" (badges showing total number of items - accounts, contracts, transactions,... on the network)
  • filterable lists
• Support for other networks
  • "out of the box" support for other flow networks (currently testnet, possibly mainnet in the future)
  • app is containerised and is therefore easily deployable/portable to any server or cloud provider
• Native support for fcl-dev-wallet
  • log in with service account
  • send arbitrary transactions (tx arguments are also supported)
• Minimal test coverage
• Hosted app (BETA): app.flowser.dev
• Custom made project website: flowser.dev

Submission Links & Documents

• Project website: flowser.dev
• Hosted app (BETA): app.flowser.dev
• Source code
• Known issues + enhancement ideas
• Wireframes: Link to XD Adobe where wireframes can be seen. Use navigation arrows at the bottom of the screen to step through the wireframes.

Requirements Check

• Have have you met the milestone requirements? YES
• Have you included tests (if applicable)? YES (more to come)
• Have you met the contribution guidelines of the repos you have submitted code to (if applicable)? YES
• If this is the last milestone:
  • Demonstrate that you've met all the acceptance criteria (link to code, demos, instructions to run etc.) - check "Submission Links & Documents"
  • Demonstrate that you've met all milestone requirements and highlight any extensions or additional work done. - YES
  • Include a payout structure by percentage for each team member.
    • monikaxh: 18%
    • jgololicic: 45.5%
    • bartolomej: 36.5%

Other Details

• Is there anything specific you'd like the PoC to know or review for? NO
• Are there other references, documentation, or relevant artificats to mention for this PR (ie. external links to justify design decisions, etc.)?
  • CREDITS: @bluesign - provided a useful script for indexing flow emulator db

[kerrywei]

Hey @janezpodhostnik , I'm temporarily passing this to you given mac is off for two days + you are checking milestone 3. let me know if there's too much on your plate :)

[janezpodhostnik]

Good work!

I left related comments on milestone 3 https://github.com/onflow/flip-fest/pull/89#issuecomment-958118594

[10thfloor]

Hey all, just looked through the React code, overall really well done! I'm happy to accept all milestones up to and including 3. Do make an extra effort for the final milestone to make sure the UI is polished, and visually consistent. If we're going to feature your project in the community, you want to make sure to put your best foot forward.

[bartolomej]

@10thfloor Awesome, thank you! :sparkles: I agree, we will tweak the UI a bit, we have some inconsistencies defined in the issue #59, but we would like to hear if you noticed any other that we are missing. We are also in the process of finishing of a few more changes mentioned by janez in his comment here: #89 (comment).

[bartolomej]

@10thfloor Some inconsistencies, that were defined in https://github.com/onflow/flip-fest/pull/59 were fixed and merged into master. Let us know if you notice any other inconsistencies that should be fixed. 🙂

[kerrywei]

Great work @bartolomej ! I'm merging in this PR as the milestone has been achieved. Will leave the discussion of UI consistency between you and @10thfloor