Playground Feature: Improve the resource explorer

[psiemens]

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

Problem

In the playground, the resource explorer is the tab the shows the resources inside each account. It is hidden initially and only shows up once you interact with an account's storage. But even then, it only shows up after you click an account, which usually decouples the view a transaction that updates the stored resources.

Furthermore, you can only see single account at once. If you want to view another account, you need to switch to it and probably lose the view, since second account doesn't have anything in its storage. Oops!

Example

Here we can see the resource explorer for account 0x02:

Account 0x03 doesn't have anything in its storage, so the view is not even rendered:

Solution

Create a better resource explorer! 😉

Here are some ideas for what you can do:

• Build a way to quickly inspect multiple accounts.
• Provide visual cues for different types of items in the storage(i.e. resources, capabilities, structs, etc). Maybe give them an icon, color, or both! 😎
• Show the user who resources have been created or updated after a transaction is execute.
• Autogenerate transaction or script templates for available capabilities, making it easier to write new interactions by simply clicking on a stored item and selecting the template.

Feel free to bring new ideas not listed above!

Experience Required

• Great proficiency with TypeScript and React (front-end)
• Good proficiency with GraphQL
• Good proficiency with Go (back-end)
• Good understanding of Cadence and its account and storage model
• Good UX/UI design ability

Milestone Requirements

1. Create wireframes for a new UI and interactions for the resource explorer.
2. Implement an updated UI for resource explorer with current set of features.
3. Add support for new features on both the frontend and backend.

Other Requirements

Code standards or guidelines

• Follow the general contribution guidelines.

Design guidelines

• New features should fit with the existing look and feel of the playground.

Judging Criteria

• For all projects, technical & high-level judging criteria apply.

Resources

• Playground frontend repository - https://github.com/onflow/flow-playground
• Playground API repository - https://github.com/onflow/flow-playground-api

[MaxStalker]

Hey, Flow Surfer!
My name is Max. I am core member of Developer Experience team and I will be your Point-of-Contact for this task.
If you stumble into any challenges with this task, feel free to contact me via replies to this issue or over Flow Discord (my handle is MaxStarka#5714).

Looking forward to work with you! :)

[hichana]

@MaxStalker I'm going to have a go at this task as a solo team.

My GH profile: https://github.com/hichana

Should I make a separate HackerEarth team? I'm not sure if that's possible as I've already created Team Exponential where I've invited another community member (j00lz).

2021.10.06 Edit:
I created a new hacker earth team here: https://www.hackerearth.com/challenges/hackathon/flip-fest/dashboard/ae2cb67/team/

[MaxStalker]

Should I make a separate HackerEarth team? I'm not sure if that's possible as I've already created Team Exponential where I've invited another community member (j00lz).

Probably, would be better if you can create another team - for proper billing and booking.
Sorry for inconvenience.

[10thfloor]

So stoked for this. Now, if we could have it in the emulator!

[bluesign]

@10thfloor you can even have with full change (revision) history in emulator.

[hichana]

@MaxStalker no problem. I've used my other email address to sign up and register for the flip fest on hacker earth. Team is here: https://www.hackerearth.com/challenges/hackathon/flip-fest/dashboard/ae2cb67/team/

I'll edit my original comment in this thread with that link as well.

[psiemens]

@hichana Whoops, sorry! Didn't mean to close this 😓

[psiemens]

@hichana Your solo team is officially confirmed! Looking forward to your solution