Playground Feature: Improve the resource explorer

psiemens commented 3 years ago

👋 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:

Screenshot from 2021-09-14 18-38-08

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

Screenshot from 2021-09-14 18-39-39

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

Create wireframes for a new UI and interactions for the resource explorer.
Implement an updated UI for resource explorer with current set of features.
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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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

bluesign commented 3 years ago

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

hichana commented 3 years ago

@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 commented 3 years ago

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

psiemens commented 3 years ago

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

hichana commented 2 years ago

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 commented 2 years ago

Go, go, @hichana !

hichana commented 2 years ago

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

https://github.com/onflow/flip-fest/pull/55 https://github.com/onflow/flip-fest/pull/62 https://github.com/onflow/flip-fest/pull/75

MaxStalker commented 2 years ago

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

kimcodeashian commented 2 years ago

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 commented 2 years ago

Thank you :)

Team Information:

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

hichana commented 2 years ago

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 commented 2 years ago

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

onflow / flip-fest