Playground Feature: Improve the resource explorer 29 - Milestone 1

[hichana]

Playground Feature: Improve the resource explorer 29 - Milestone 1

Description

This PR is for issue #29.

• this PR is for milestone requirement "1. Create wireframes for a new UI and interactions for the resource explorer."
• The screenshots demonstrate a way to quickly inspect multiple accounts, visual cues for different types of items in the storage(i.e. resources, capabilities, structs, etc), and shows a toast component to signal the user account storage that is updated after processing a transaction. Below is a summary of the two workflows:

"view storage workflow.png":

• Screen 1: initial load of the playground, a 'storage' icon sits next to the 'copy to clipboard' icon in the side panel area for account 0x01
• Screen 2: the 'storage' icon turns green after user has clicked on it, and the resource explorer has opened, showing visual cues for the different items in storage.
• Screen 3: the user has clicked on user account 0x03 in the side panel, rendering the background of 0x03's side panel component grey to indicate they are now the active/selected account. The resources explorer component persists data from account 0x01's storage. The 'storage' icon for account 0x01 remains green while account 0x03's icon is grey.
• Screen 4: user has clicked on the 'storage' icon for user account 0x03, which renders the button for 0x03 green (and flipping 0x01's button grey), and re-rendering the resources explorer to indicate storage is empty for account 0x03.

"execute tx workflow.png"

• Screen 1: shows account 0x03's empty storage before processing the transaction with account 0x01 as the signer before processing the transaction
• Screen 2: user has processed the transaction by clicking on the 'send' button. The resource explorer section for account 0x03 shows updated data (a 'MainVallt'), and a toast component appears telling who signed the transaction and which user account's storage has been updated.

Submission Links & Documents

N/A

Requirements Check

• Have have you met the milestone requirements?: I believe so, though auto generating script and transaction templates would necessitate more UI work, which should happen at a later time.
• Have you included tests (if applicable)?: N/A
• Have you met the contribution guidelines of the repos you have submitted code to (if applicable)?: Yes

[hichana]

I added a third workflow to account for autogenerating transaction and script templates for available capabilities that show up in the resource explorer. Please find below the description of this workflow

"add transaction template workflow.png"

• Screen 1: There is now a button-icon that shows up next to any given Capability that appears in the resource explorer.
• Screen 2: After clicking on the button-icon, a modal appears with a dropdown where you can select a given template, and a field where you can enter the name for the transaction template. Clicking 'Create Transaction Template' will run a mutation that creates the transaction template.
• Screen 3: In the left side panel, under the 'TRANSACTION TEMPLATES', a new template called "Deposit To User" that has been added by the user appears. I'm not showing what happens after you click this button, but like all buttons in this section it will render with a grey background and the template text will appear in the editor window.

[MaxStalker]

🎉 Milestone Achieved! 🎉