Fix Udapp Environment Label Dropdown bug

apps/remix-ide-e2e/src/tests/runAndDeploy.test.ts

@@ -30,10 +30,9 @@ module.exports = {
 
   'Should sign message using account key #group2': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="settingsRemixRunSignMsg"]')
-      .switchEnvironment('vm-paris')
-      .pause(2000)
+      .switchEnvironment('vm-cancun')
+      .waitForElementVisible('*[data-id="settingsRemixRunSignMsg"]')
       .click('*[data-id="settingsRemixRunSignMsg"]')
-      .pause(2000)
       .waitForElementVisible('*[data-id="signMessageTextarea"]', 120000)
       .click('*[data-id="signMessageTextarea"]')
       .setValue('*[data-id="signMessageTextarea"]', 'Remix is cool!')
@@ -110,7 +109,7 @@ module.exports = {
       // Consider adding tests to check return value of contract call
       // See: https://github.com/ethereum/remix-project/pull/1229
       .end()
-  },  
+  },
 
   'Should ensure that save environment state is checked by default #group4 #group5': function (browser: NightwatchBrowser) {
     browser.waitForElementPresent('*[data-id="remixIdeSidePanel"]')
@@ -211,11 +210,11 @@ const sources = [
       pragma solidity ^0.8.0;
       contract HelloWorld {
           string public message;
-          
+
           fallback () external {
               message = 'Hello World!';
           }
-          
+
           function greet(string memory _message) public {
               message = _message;
           }
@@ -229,7 +228,7 @@ const sources = [
         function sendSomeEther(uint256 num) public {
             payable(msg.sender).transfer(num);
         }
-    
+
     }`
     }
   }

apps/remix-ide/src/app/udapp/run-tab.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @nrwl/nx/enforce-module-boundaries */
 import React from 'react' // eslint-disable-line
 import { RunTabUI } from '@remix-ui/run-tab'
 import { ViewPlugin } from '@remixproject/engine-web'
@@ -12,8 +13,32 @@ import { ProviderConfig } from '@remix-ui/environment-explorer'
 import type { CompilerArtefacts } from '@remix-project/core-plugin'
 import { ForkedVMStateProvider } from '../providers/vm-provider'
 import { Recorder } from '../tabs/runTab/model/recorder'
+import { EnvDropdownLabelStateType } from 'libs/remix-ui/run-tab/src/lib/types'
 const _paq = (window._paq = window._paq || [])
 
+const selectedEnvs: EnvDropdownLabelStateType[] = [
+  { name: 'Remix VM (Cancun)', value: 'vm-cancun', chainId: 'vm-cancun' },
+  { name: 'Gnosis Mainnet - MetaMask', value: 'injected-metamask-gnosis', chainId: 100 },
+  { name: 'L2 - Optimism - MetaMask', value: 'injected-metamask-optimism', chainId: 10 },
+  { name: 'L2 - Arbitrum - MetaMask', value: 'injected-metamask-arbitrum', chainId: 42161 },
+  { name: 'Ephemery Testnet - MetaMask', value: 'injected-metamask-ephemery', chainId: 39438143 },
+  { name: 'Sepolia Testnet - MetaMask', value: 'injected-metamask-sepolia', chainId: 11155111 },
+  { name: 'L2 - Linea - MetaMask', value: 'injected-metamask-linea', chainId: 59144 },
+  { name: 'Injected Provider - MetaMask', value: 'injected-MetaMask' },
+  { name: 'WalletConnect', value: 'walletconnect' },
+  { name: 'Remix VM - Mainnet fork', value: 'vm-mainnet-fork', chainId: 'vm-mainnet-fork' },
+  { name: 'Remix VM - Sepolia fork', value: 'vm-sepolia-fork', chainId: 'vm-sepolia-fork' },
+  { name: 'Remix VM - Custom fork', value: 'vm-custom-fork', chainId: 'vm-custom-fork' },
+  { name: 'Remix VM (Shanghai)', value: 'vm-shanghai', chainId: 'vm-shanghai' },
+  { name: 'Remix VM (Paris)', value: 'vm-paris', chainId: 'vm-paris' },
+  { name: 'Remix VM (London)', value: 'vm-london', chainId: 'vm-london' },
+  { name: 'Remix VM (Berlin)', value: 'vm-berlin', chainId: 'vm-berlin' },
+  { name: 'Custom - External Http Provider', value: 'basic-http-provider', chainId: 1741104841094 },
+  { name: 'Dev - Hardhat Provider', value: 'hardhat-provider', chainId: 31337 },
+  { name: 'Dev - Foundry Provider', value: 'foundry-provider', chainId: 31337 },
+  { name: 'Dev - Ganache Provider', value: 'ganache-provider', chainId: 1741104841094 },
+]
+
 const profile = {
   name: 'udapp',
   displayName: 'Deploy & run transactions',
@@ -36,7 +61,8 @@ const profile = {
     'clearAllInstances',
     'addInstance',
     'resolveContractAndAddInstance',
-    'showPluginDetails'
+    'showPluginDetails',
+    'getEnvironmentDropdownLabels'
   ]
 }
 
@@ -53,6 +79,7 @@ export class RunTab extends ViewPlugin {
   fileProvider: any
   recorder: any
   REACT_API: any
+  envDropdownLabelState: EnvDropdownLabelStateType[]
   el: any
   constructor(blockchain: Blockchain, config: any, fileManager: any, editor: any, filePanel: any, compilersArtefacts: CompilerArtefacts, networkModule: any, fileProvider: any, engine: any) {
     super(profile)
@@ -68,6 +95,7 @@ export class RunTab extends ViewPlugin {
     this.fileProvider = fileProvider
     this.recorder = new Recorder(blockchain)
     this.REACT_API = {}
+    this.setEnvironmentDropdownLabels()
     this.setupEvents()
     this.el = document.createElement('div')
   }
@@ -112,6 +140,14 @@ export class RunTab extends ViewPlugin {
     return this.blockchain.createVMAccount(newAccount)
   }
 
+  setEnvironmentDropdownLabels() {
+    this.envDropdownLabelState = selectedEnvs
+  }
+
+  getEnvironmentDropdownLabels() {
+    return this.envDropdownLabelState
+  }
+
   sendTransaction(tx) {
     _paq.push(['trackEvent', 'udapp', 'sendTx', 'udappTransaction'])
     return this.blockchain.sendTransaction(tx)

apps/remix-ide/src/assets/list.json

@@ -1044,9 +1044,21 @@
       "urls": [
         "dweb:/ipfs/QmVtdNYdUC4aX6Uk5LrxDT55B7NgGLnLcA2wTecF5xUbSS"
       ]
+    },
+    {
+      "path": "soljson-v0.8.29+commit.ab55807c.js",
+      "version": "0.8.29",
+      "build": "commit.ab55807c",
+      "longVersion": "0.8.29+commit.ab55807c",
+      "keccak256": "0x9545790fce7fb78eba3b4af7f72d179cafd4b05ea9de6a3276e871f040736417",
+      "sha256": "0x87616a5fc7ab3551f4133bbd2c3e1be123eae219facc2a56f8f3a4366520c67b",
+      "urls": [
+        "dweb:/ipfs/QmRoJqB44QhLFfuLEK8axiuLw7V23tSJQkitz6qMPX9wT4"
+      ]
     }
   ],
   "releases": {
+    "0.8.29": "soljson-v0.8.29+commit.ab55807c.js",
     "0.8.28": "soljson-v0.8.28+commit.7893614a.js",
     "0.8.27": "soljson-v0.8.27+commit.40a35a09.js",
     "0.8.26": "soljson-v0.8.26+commit.8a97fa7a.js",
@@ -1143,5 +1155,5 @@
     "0.4.0": "soljson-v0.4.0+commit.acd334c9.js",
     "0.3.6": "soljson-v0.3.6+commit.3fc68da5.js"
   },
-  "latestRelease": "0.8.28"
+  "latestRelease": "0.8.29"
 }

libs/remix-ui/environment-explorer/src/lib/types/index.ts

@@ -53,5 +53,12 @@ export type Provider = {
   init: () => Promise<void>
   provider:{
     sendAsync: (payload: any) => Promise<void>
+    udapp?: {
+      REACT_API: {
+        chainId: number,
+        accounts: any,
+        selectExEnv: string
+      }
+    }
   }
-}
+}

libs/remix-ui/run-tab/src/lib/components/dropdownLabel.tsx

@@ -0,0 +1,60 @@
+import { Provider } from '@remix-ui/environment-explorer'
+import { CustomTooltip } from '@remix-ui/helper'
+import React, { useEffect, useState } from 'react'
+import { FormattedMessage } from 'react-intl'
+import { EnvDropdownLabelStateType, RunTabState } from '../types'
+import { current } from '@reduxjs/toolkit'
+
+export type DropDownLabelProps = {
+  label: string
+  bridges: any
+  currentProvider: any
+  chainId: string
+  runTabState: RunTabState
+  setExecutionEnv: (executionContext: {
+    context: string;
+  }) => void
+  isL2: (providerDisplayName: string) => boolean
+  plugin: any
+}
+
+export function DropdownLabel({ label, bridges, currentProvider, chainId, runTabState, setExecutionEnv, isL2, plugin }: DropDownLabelProps) {
+
+  const [renderLabel, setRenderLabel] = useState(label)
+  const [selectedEnvs, setSelectedEnvs] = useState<EnvDropdownLabelStateType[]>([])
+
+  useEffect(() => {
+    const checkEnvLabels = async () => {
+      if (selectedEnvs.length === 0) {
+        const envLabels = await plugin.call('udapp', 'getEnvironmentDropdownLabels')
+        setSelectedEnvs(envLabels)
+      }
+    }
+    checkEnvLabels()
+    const selectedEnv = selectedEnvs.find(env => (env.chainId === chainId && env.value === runTabState.selectExEnv) || (env.value === 'walletconnect' && env.value === currentProvider?.name) || env.chainId === chainId)
+    if (selectedEnv) {
+      setRenderLabel(selectedEnv.name)
+      setExecutionEnv({ context: selectedEnv.value })
+    } else {
+      setRenderLabel('Injected Provider - MetaMask')
+    }
+  }, [chainId])
+
+  return (
+    <>
+      <span>{renderLabel}</span>
+      {isL2(renderLabel) && bridges[renderLabel.substring(0, 13)] && (
+        <CustomTooltip placement={'auto-end'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText3" />}>
+          <i
+            style={{ fontSize: 'medium' }}
+            className={'ml-1 fa fa-rocket-launch'}
+            aria-hidden="true"
+            onClick={() => {
+              window.open(bridges[currentProvider.displayName.substring(0, 13)], '_blank')
+            }}
+          ></i>
+        </CustomTooltip>
+      )}
+    </>
+  )
+}

libs/remix-ui/run-tab/src/lib/components/environment.tsx

@@ -2,9 +2,11 @@
 import React, { useRef } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { EnvironmentProps } from '../types'
-import { Provider } from '@remix-ui/environment-explorer'
 import { Dropdown } from 'react-bootstrap'
 import { CustomMenu, CustomToggle, CustomTooltip } from '@remix-ui/helper'
+import { DropdownLabel } from './dropdownLabel'
+import { setExecutionContext } from '../actions/account'
+
 const _paq = (window._paq = window._paq || [])
 
 export function EnvironmentUI(props: EnvironmentProps) {
@@ -26,6 +28,8 @@ export function EnvironmentUI(props: EnvironmentProps) {
     'L2 - Arbitrum': 'https://bridge.arbitrum.io/'
   }
 
+  const isL2 = (providerDisplayName: string) => providerDisplayName && (providerDisplayName.startsWith('L2 - Optimism') || providerDisplayName.startsWith('L2 - Arbitrum'))
+
   const intl = useIntl()
   const isSaveEvmStateChecked = props.config.get('settings/save-evm-state')
 
@@ -136,7 +140,6 @@ export function EnvironmentUI(props: EnvironmentProps) {
     } else props.runTabPlugin.call('notification', 'toast', `State not available to reset, as no transactions have been made for selected environment & selected workspace.`)
   }
 
-  const isL2 = (providerDisplayName: string) => providerDisplayName && (providerDisplayName.startsWith('L2 - Optimism') || providerDisplayName.startsWith('L2 - Arbitrum'))
   return (
     <div className="udapp_crow">
       <label id="selectExEnv" className="udapp_settingsLabel w-100">
@@ -159,20 +162,8 @@ export function EnvironmentUI(props: EnvironmentProps) {
       <div className="udapp_environment" data-id={`selected-provider-${currentProvider && currentProvider.name}`}>
         <Dropdown id="selectExEnvOptions" data-id="settingsSelectEnvOptions" className="udapp_selectExEnvOptions">
           <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control" icon={null}>
-            {isL2(currentProvider && currentProvider.displayName)}
-            {currentProvider && currentProvider.displayName}
-            {currentProvider && bridges[currentProvider.displayName.substring(0, 13)] && (
-              <CustomTooltip placement={'auto-end'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText3" />}>
-                <i
-                  style={{ fontSize: 'medium' }}
-                  className={'ml-2 fa fa-rocket-launch'}
-                  aria-hidden="true"
-                  onClick={() => {
-                    window.open(bridges[currentProvider.displayName.substring(0, 13)], '_blank')
-                  }}
-                ></i>
-              </CustomTooltip>
-            )}
+            {/* {isL2(currentProvider && currentProvider.displayName)} */}
+            <DropdownLabel label={currentProvider && currentProvider.displayName} bridges={bridges} currentProvider={currentProvider} chainId={props.envLabel} runTabState={props.udappState} setExecutionEnv={props.setExecutionContext} isL2={isL2} plugin={props.runTabPlugin} />
           </Dropdown.Toggle>
           <Dropdown.Menu as={CustomMenu} className="w-100 custom-dropdown-items" data-id="custom-dropdown-items">
             {props.providers.providerList.length === 0 && <Dropdown.Item>

libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx

@@ -20,6 +20,8 @@ export function SettingsUI(props: SettingsProps) {
         checkSelectionCorrectness={props.EvaluateEnvironmentSelection}
         modal={props.modal}
         config={props.runTabPlugin.config}
+        udappState={props.udappState}
+        envLabel={props.envLabel}
       />
       <NetworkUI networkName={props.networkName} />
       <AccountUI

libs/remix-ui/run-tab/src/lib/reducers/runTab.ts

@@ -23,6 +23,7 @@ export const runTabInitialState: RunTabState = {
   personalMode: false,
   networkName: 'VM',
   chainId:'-',
+  displayName: 'Remix VM (Cancun)',
   providers: {
     providerList: [],
     isRequesting: false,
@@ -163,6 +164,7 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       ...state,
       selectExEnv: payload,
       networkName: state.selectExEnv === 'vm-cancun' ? 'VM' : state.networkName,
+      displayName: state.providers.providerList.find((env) => env.name === state.selectExEnv)?.displayName,
       accounts: {
         ...state.accounts,
         selectedAccount: '',
@@ -186,6 +188,7 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
     return {
       ...state,
       networkName: payload,
+      displayName: state.providers.providerList.find((env) => env.name === state.selectExEnv)?.displayName,
     }
   }
 
@@ -194,7 +197,8 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
 
     return {
       ...state,
-      chainId: payload
+      chainId: payload,
+      displayName: state.providers.providerList.find((env) => env.name === state.selectExEnv)?.displayName,
     }
   }
 

libs/remix-ui/run-tab/src/lib/run-tab.tsx

@@ -379,6 +379,8 @@ export function RunTabUI(props: RunTabProps) {
             tooltip={toast}
             signMessageWithAddress={signMessage}
             passphrase={runTab.passphrase}
+            udappState={runTab}
+            envLabel={runTab.chainId}
           />
           <ContractDropdownUI
             selectedAccount={runTab.accounts.selectedAccount}

libs/remix-ui/run-tab/src/lib/types/index.ts

@@ -23,6 +23,12 @@ export interface ContractList {
   [file: string]: Contract[]
 }
 
+export type EnvDropdownLabelStateType = {
+  name: string,
+  value: string,
+  chainId?: string | number
+}
+
 export interface RunTabState {
   accounts: {
     loadedAccounts: Record<string, string>,
@@ -37,7 +43,8 @@ export interface RunTabState {
   selectExEnv: string,
   personalMode: boolean,
   networkName: string,
-  chainId: string
+  chainId: string,
+  displayName: string,
   providers: {
     providerList: Provider[],
     isRequesting: boolean,
@@ -110,6 +117,9 @@ export interface RunTabState {
 
 export interface SettingsProps {
   runTabPlugin: RunTab,
+  udappState: RunTabState
+  envLabel: string,
+  currentSelectedEnv?: string,
   selectExEnv: string,
   EvaluateEnvironmentSelection: any
   accounts: {
@@ -148,6 +158,7 @@ export interface SettingsProps {
 export interface EnvironmentProps {
   checkSelectionCorrectness: any
   runTabPlugin: RunTab,
+  envLabel: string,
   selectedEnv: string,
   providers: {
     providerList: Provider[],
@@ -157,7 +168,9 @@ export interface EnvironmentProps {
   },
   setExecutionContext: (executionContext: { context: string }) => void
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void, okBtnClass?: string, cancelBtnClass?: string) => void,
-  config: any
+  config: any,
+  currentSelectedEnv?: string,
+  udappState: RunTabState
 }
 
 export interface NetworkProps {