create label component. update reducer function.

joeizang · joeizang · commit 684fdae44d2e · 2025-03-07T10:10:45.000+01:00
diff --git a/libs/remix-ui/environment-explorer/src/lib/types/index.ts b/libs/remix-ui/environment-explorer/src/lib/types/index.ts
@@ -49,5 +49,12 @@ export type Provider = {
   init: () => Promise<void>
   provider:{
     sendAsync: (payload: any) => Promise<void>
+    udapp?: {
+      REACT_API: {
+        chainId: number,
+        accounts: any,
+        selectExEnv: string
+      }
+    }
   }
-}
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/dropdownLabel.tsx b/libs/remix-ui/run-tab/src/lib/components/dropdownLabel.tsx
@@ -0,0 +1,61 @@
+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 { RunTabState } from '../types'
+import { current } from '@reduxjs/toolkit'
+
+export function DropdownLabel({ label, bridges, currentProvider, chainId, runTabState }: { label: string, bridges: any, currentProvider: any, chainId: string, runTabState: RunTabState }) {
+
+  const [renderLabel, setRenderLabel] = useState(label)
+
+  const selectedEnvs = [
+    { 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 },
+  ]
+
+  useEffect(() => {
+    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)
+    } else {
+      setRenderLabel('Injected Provider - MetaMask')
+    }
+  }, [chainId])
+
+  return (
+    <>
+      <span>{renderLabel}</span>
+      {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-1 fa fa-rocket-launch'}
+            aria-hidden="true"
+            onClick={() => {
+              window.open(bridges[currentProvider.displayName.substring(0, 13)], '_blank')
+            }}
+          ></i>
+        </CustomTooltip>
+      )}
+    </>
+  )
+}
diff --git a/libs/remix-ui/run-tab/src/lib/components/environment.tsx b/libs/remix-ui/run-tab/src/lib/components/environment.tsx
@@ -2,9 +2,10 @@
 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'
+
 const _paq = (window._paq = window._paq || [])
 
 export function EnvironmentUI(props: EnvironmentProps) {
@@ -26,6 +27,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')
 
@@ -118,7 +121,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">
@@ -142,19 +144,7 @@ export function EnvironmentUI(props: EnvironmentProps) {
         <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>
-            )}
+            <DropdownLabel label={currentProvider && currentProvider.displayName} bridges={bridges} currentProvider={currentProvider} chainId={props.envLabel} runTabState={props.udappState} />
           </Dropdown.Toggle>
           <Dropdown.Menu as={CustomMenu} className="w-100 custom-dropdown-items" data-id="custom-dropdown-items">
             {props.providers.providerList.length === 0 && <Dropdown.Item>
@@ -166,6 +156,7 @@ export function EnvironmentUI(props: EnvironmentProps) {
               <Dropdown.Item
                 key={name}
                 onClick={async () => {
+                  console.log('name when switching selected env', name)
                   handleChangeExEnv(name)
                 }}
                 data-id={`dropdown-item-${name}`}
diff --git a/libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx b/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
diff --git a/libs/remix-ui/run-tab/src/lib/reducers/runTab.ts b/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,
     }
   }
 
diff --git a/libs/remix-ui/run-tab/src/lib/run-tab.tsx b/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}
diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts
@@ -37,7 +37,8 @@ export interface RunTabState {
   selectExEnv: string,
   personalMode: boolean,
   networkName: string,
-  chainId: string
+  chainId: string,
+  displayName: string,
   providers: {
     providerList: Provider[],
     isRequesting: boolean,
@@ -110,6 +111,9 @@ export interface RunTabState {
 
 export interface SettingsProps {
   runTabPlugin: RunTab,
+  udappState: RunTabState
+  envLabel: string,
+  currentSelectedEnv?: string,
   selectExEnv: string,
   EvaluateEnvironmentSelection: any
   accounts: {
@@ -148,6 +152,7 @@ export interface SettingsProps {
 export interface EnvironmentProps {
   checkSelectionCorrectness: any
   runTabPlugin: RunTab,
+  envLabel: string,
   selectedEnv: string,
   providers: {
     providerList: Provider[],
@@ -157,7 +162,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 {
