Environment Explorer plugin and deploy&run environment list improvements

[LianaHus]

Deploy & Run: Environment drop down list

The Deploy & run plugin has an Environment list, which is currently quite long and unorganized.

I suggest the following changes:

1. make the list customizable. Users will pin/unpin the providers they want to use to the Environment drop down for fast access
2. to customize the list, the new Environment Explorer plugin will be used. The custom list should be saved in the browser localstorage
3. we will have the following pinned items by default:

• Connect to Metamask
• Connect to TrustWallet
• Connect to WalletConnect
• Javascript VM - Shanghai

Environment Explorer Plugin

Location: MainView. Icon <FontAwesomeIcon icon="fa-solid fa-globe" />

It contains:

1. search input
2. checkboxes to filter by tags
3. following groups of items:

• Remix Javascript VMs
• Connect to
• Dev providers
• Chain list

All pinned cards come first(left), and in the case of Remix Javascript VMs and Saved VMs, we will have a horizontally scrollable row. The networks for the chain list will be loaded from the directory in our github repo. The items format is:

{
      chainID: "",  // unique id
      currency: "", // currency abbreviation
      displayName:  "", // card title to display
      shortDescription: "", // very short description of the network 50-55 symbols
      iconURL: "", // the URL to the webp format logo for the card. It should have a transparent background
      tagList: {) // the list of the tags from the following list { "L2", "Mainnet", TO BE DISCUSSED}
}

Here is the wireframe for the plugin

Uploading Providers explorer.pdf…

Updated after UX call:

Buttons should be added to Deploy&run to save and reset state. Suggested position: under the Environment section. Once the state is saved, we will add an item in the Env dropdown, `Saved VMs,' with a second-level list of all saved VM states.

We must also add a new row after VM row for saved states.

• The list will take only one row and be horizontally scrollable if needed. The last saved states come first.
• Those cards will be removable but not pinnable.
• They will have a special, editable Name field, as an alias for id. to make it unique, we will attach the timestamp(creation date). Example "My State_01.01.23"
• Cards will contain: Name, timestamp, fork name (WHAT ELSE?)

[LianaHus]

• [ ] Save state https://github.com/ethereum/remix-project/issues/3382
• [ ] Reset state https://github.com/ethereum/remix-project/issues/184