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

[hichana]

Update -- Milestone 3 submission should be made this week or next, with possible improvements pushed right up until the deadline/close of the FLIP fest.

[MaxStalker]

Go, go, @hichana !

[hichana]

Hi @MaxStalker, I was reading through the submission requirements. Is it so that each milestone needs to be 'approved' by our POC in order to be considered? If so I'll post links to my three submissions corresponding to the three milestones for this FLIP issue here below for your consideration. I'm also open to feedback that you might have. Thanks

#55
#62
#75

[MaxStalker]

All 🎉 🎉 🎉 milestones has been achieved!
Congratulations! :)
Thank you for this valuable submission, @hichana ! 🙇

[kimcodeashian]

Good day @hichana!

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.

[hichana]

Thank you :)

Team Information:

• Github Username: hichana
• Email Contact: hichana@gmail.com
• Percentage of prize allocation: hichana 100%

[hichana]

Hi @kimcodeashian, I made a video, probably too long. Should I cut it down?
https://drive.google.com/file/d/1GM8iU3zpqt3icecdXfIEEfCReqOtgxJr/view?usp=sharing

At the end I made my homage to the funny commercial vid from NYC NFT

Edit: down to about 7 minutes: https://drive.google.com/file/d/1GSqR5bFG4SLrYpfrhdDJXdyv6Q-pp6Sc/view?usp=sharing

[kimcodeashian]

Thanks for the video @hichana ! I'll let you know if it's too long don't worry - thanks!