Skip to content

Commit 1c645dd

Browse files
joeizangjoeizang
authored
Merge pull request #5844 from ethereum/udapp-env-dropdown
Fix Udapp Environment Label Dropdown bug
2 parents 121c814 + 7aaa6ea commit 1c645dd

File tree

10 files changed

+155
-29
lines changed

10 files changed

+155
-29
lines changed

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,9 @@ module.exports = {
3030

3131
'Should sign message using account key #group2': function (browser: NightwatchBrowser) {
3232
browser.waitForElementVisible('*[data-id="settingsRemixRunSignMsg"]')
33-
.switchEnvironment('vm-paris')
34-
.pause(2000)
33+
.switchEnvironment('vm-cancun')
34+
.waitForElementVisible('*[data-id="settingsRemixRunSignMsg"]')
3535
.click('*[data-id="settingsRemixRunSignMsg"]')
36-
.pause(2000)
3736
.waitForElementVisible('*[data-id="signMessageTextarea"]', 120000)
3837
.click('*[data-id="signMessageTextarea"]')
3938
.setValue('*[data-id="signMessageTextarea"]', 'Remix is cool!')
@@ -110,7 +109,7 @@ module.exports = {
110109
// Consider adding tests to check return value of contract call
111110
// See: https://github.com/ethereum/remix-project/pull/1229
112111
.end()
113-
},
112+
},
114113

115114
'Should ensure that save environment state is checked by default #group4 #group5': function (browser: NightwatchBrowser) {
116115
browser.waitForElementPresent('*[data-id="remixIdeSidePanel"]')
@@ -211,11 +210,11 @@ const sources = [
211210
pragma solidity ^0.8.0;
212211
contract HelloWorld {
213212
string public message;
214-
213+
215214
fallback () external {
216215
message = 'Hello World!';
217216
}
218-
217+
219218
function greet(string memory _message) public {
220219
message = _message;
221220
}
@@ -229,7 +228,7 @@ const sources = [
229228
function sendSomeEther(uint256 num) public {
230229
payable(msg.sender).transfer(num);
231230
}
232-
231+
233232
}`
234233
}
235234
}

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

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable @nrwl/nx/enforce-module-boundaries */
12
import React from 'react' // eslint-disable-line
23
import { RunTabUI } from '@remix-ui/run-tab'
34
import { ViewPlugin } from '@remixproject/engine-web'
@@ -12,8 +13,32 @@ import { ProviderConfig } from '@remix-ui/environment-explorer'
1213
import type { CompilerArtefacts } from '@remix-project/core-plugin'
1314
import { ForkedVMStateProvider } from '../providers/vm-provider'
1415
import { Recorder } from '../tabs/runTab/model/recorder'
16+
import { EnvDropdownLabelStateType } from 'libs/remix-ui/run-tab/src/lib/types'
1517
const _paq = (window._paq = window._paq || [])
1618

19+
const selectedEnvs: EnvDropdownLabelStateType[] = [
20+
{ name: 'Remix VM (Cancun)', value: 'vm-cancun', chainId: 'vm-cancun' },
21+
{ name: 'Gnosis Mainnet - MetaMask', value: 'injected-metamask-gnosis', chainId: 100 },
22+
{ name: 'L2 - Optimism - MetaMask', value: 'injected-metamask-optimism', chainId: 10 },
23+
{ name: 'L2 - Arbitrum - MetaMask', value: 'injected-metamask-arbitrum', chainId: 42161 },
24+
{ name: 'Ephemery Testnet - MetaMask', value: 'injected-metamask-ephemery', chainId: 39438143 },
25+
{ name: 'Sepolia Testnet - MetaMask', value: 'injected-metamask-sepolia', chainId: 11155111 },
26+
{ name: 'L2 - Linea - MetaMask', value: 'injected-metamask-linea', chainId: 59144 },
27+
{ name: 'Injected Provider - MetaMask', value: 'injected-MetaMask' },
28+
{ name: 'WalletConnect', value: 'walletconnect' },
29+
{ name: 'Remix VM - Mainnet fork', value: 'vm-mainnet-fork', chainId: 'vm-mainnet-fork' },
30+
{ name: 'Remix VM - Sepolia fork', value: 'vm-sepolia-fork', chainId: 'vm-sepolia-fork' },
31+
{ name: 'Remix VM - Custom fork', value: 'vm-custom-fork', chainId: 'vm-custom-fork' },
32+
{ name: 'Remix VM (Shanghai)', value: 'vm-shanghai', chainId: 'vm-shanghai' },
33+
{ name: 'Remix VM (Paris)', value: 'vm-paris', chainId: 'vm-paris' },
34+
{ name: 'Remix VM (London)', value: 'vm-london', chainId: 'vm-london' },
35+
{ name: 'Remix VM (Berlin)', value: 'vm-berlin', chainId: 'vm-berlin' },
36+
{ name: 'Custom - External Http Provider', value: 'basic-http-provider', chainId: 1741104841094 },
37+
{ name: 'Dev - Hardhat Provider', value: 'hardhat-provider', chainId: 31337 },
38+
{ name: 'Dev - Foundry Provider', value: 'foundry-provider', chainId: 31337 },
39+
{ name: 'Dev - Ganache Provider', value: 'ganache-provider', chainId: 1741104841094 },
40+
]
41+
1742
const profile = {
1843
name: 'udapp',
1944
displayName: 'Deploy & run transactions',
@@ -36,7 +61,8 @@ const profile = {
3661
'clearAllInstances',
3762
'addInstance',
3863
'resolveContractAndAddInstance',
39-
'showPluginDetails'
64+
'showPluginDetails',
65+
'getEnvironmentDropdownLabels'
4066
]
4167
}
4268

@@ -53,6 +79,7 @@ export class RunTab extends ViewPlugin {
5379
fileProvider: any
5480
recorder: any
5581
REACT_API: any
82+
envDropdownLabelState: EnvDropdownLabelStateType[]
5683
el: any
5784
constructor(blockchain: Blockchain, config: any, fileManager: any, editor: any, filePanel: any, compilersArtefacts: CompilerArtefacts, networkModule: any, fileProvider: any, engine: any) {
5885
super(profile)
@@ -68,6 +95,7 @@ export class RunTab extends ViewPlugin {
6895
this.fileProvider = fileProvider
6996
this.recorder = new Recorder(blockchain)
7097
this.REACT_API = {}
98+
this.setEnvironmentDropdownLabels()
7199
this.setupEvents()
72100
this.el = document.createElement('div')
73101
}
@@ -112,6 +140,14 @@ export class RunTab extends ViewPlugin {
112140
return this.blockchain.createVMAccount(newAccount)
113141
}
114142

143+
setEnvironmentDropdownLabels() {
144+
this.envDropdownLabelState = selectedEnvs
145+
}
146+
147+
getEnvironmentDropdownLabels() {
148+
return this.envDropdownLabelState
149+
}
150+
115151
sendTransaction(tx) {
116152
_paq.push(['trackEvent', 'udapp', 'sendTx', 'udappTransaction'])
117153
return this.blockchain.sendTransaction(tx)

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1044,9 +1044,21 @@
10441044
"urls": [
10451045
"dweb:/ipfs/QmVtdNYdUC4aX6Uk5LrxDT55B7NgGLnLcA2wTecF5xUbSS"
10461046
]
1047+
},
1048+
{
1049+
"path": "soljson-v0.8.29+commit.ab55807c.js",
1050+
"version": "0.8.29",
1051+
"build": "commit.ab55807c",
1052+
"longVersion": "0.8.29+commit.ab55807c",
1053+
"keccak256": "0x9545790fce7fb78eba3b4af7f72d179cafd4b05ea9de6a3276e871f040736417",
1054+
"sha256": "0x87616a5fc7ab3551f4133bbd2c3e1be123eae219facc2a56f8f3a4366520c67b",
1055+
"urls": [
1056+
"dweb:/ipfs/QmRoJqB44QhLFfuLEK8axiuLw7V23tSJQkitz6qMPX9wT4"
1057+
]
10471058
}
10481059
],
10491060
"releases": {
1061+
"0.8.29": "soljson-v0.8.29+commit.ab55807c.js",
10501062
"0.8.28": "soljson-v0.8.28+commit.7893614a.js",
10511063
"0.8.27": "soljson-v0.8.27+commit.40a35a09.js",
10521064
"0.8.26": "soljson-v0.8.26+commit.8a97fa7a.js",
@@ -1143,5 +1155,5 @@
11431155
"0.4.0": "soljson-v0.4.0+commit.acd334c9.js",
11441156
"0.3.6": "soljson-v0.3.6+commit.3fc68da5.js"
11451157
},
1146-
"latestRelease": "0.8.28"
1158+
"latestRelease": "0.8.29"
11471159
}

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,12 @@ export type Provider = {
5353
init: () => Promise<void>
5454
provider:{
5555
sendAsync: (payload: any) => Promise<void>
56+
udapp?: {
57+
REACT_API: {
58+
chainId: number,
59+
accounts: any,
60+
selectExEnv: string
61+
}
62+
}
5663
}
57-
}
64+
}

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { Provider } from '@remix-ui/environment-explorer'
2+
import { CustomTooltip } from '@remix-ui/helper'
3+
import React, { useEffect, useState } from 'react'
4+
import { FormattedMessage } from 'react-intl'
5+
import { EnvDropdownLabelStateType, RunTabState } from '../types'
6+
import { current } from '@reduxjs/toolkit'
7+
8+
export type DropDownLabelProps = {
9+
label: string
10+
bridges: any
11+
currentProvider: any
12+
chainId: string
13+
runTabState: RunTabState
14+
setExecutionEnv: (executionContext: {
15+
context: string;
16+
}) => void
17+
isL2: (providerDisplayName: string) => boolean
18+
plugin: any
19+
}
20+
21+
export function DropdownLabel({ label, bridges, currentProvider, chainId, runTabState, setExecutionEnv, isL2, plugin }: DropDownLabelProps) {
22+
23+
const [renderLabel, setRenderLabel] = useState(label)
24+
const [selectedEnvs, setSelectedEnvs] = useState<EnvDropdownLabelStateType[]>([])
25+
26+
useEffect(() => {
27+
const checkEnvLabels = async () => {
28+
if (selectedEnvs.length === 0) {
29+
const envLabels = await plugin.call('udapp', 'getEnvironmentDropdownLabels')
30+
setSelectedEnvs(envLabels)
31+
}
32+
}
33+
checkEnvLabels()
34+
const selectedEnv = selectedEnvs.find(env => (env.chainId === chainId && env.value === runTabState.selectExEnv) || (env.value === 'walletconnect' && env.value === currentProvider?.name) || env.chainId === chainId)
35+
if (selectedEnv) {
36+
setRenderLabel(selectedEnv.name)
37+
setExecutionEnv({ context: selectedEnv.value })
38+
} else {
39+
setRenderLabel('Injected Provider - MetaMask')
40+
}
41+
}, [chainId])
42+
43+
return (
44+
<>
45+
<span>{renderLabel}</span>
46+
{isL2(renderLabel) && bridges[renderLabel.substring(0, 13)] && (
47+
<CustomTooltip placement={'auto-end'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText3" />}>
48+
<i
49+
style={{ fontSize: 'medium' }}
50+
className={'ml-1 fa fa-rocket-launch'}
51+
aria-hidden="true"
52+
onClick={() => {
53+
window.open(bridges[currentProvider.displayName.substring(0, 13)], '_blank')
54+
}}
55+
></i>
56+
</CustomTooltip>
57+
)}
58+
</>
59+
)
60+
}

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

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22
import React, { useRef } from 'react'
33
import { FormattedMessage, useIntl } from 'react-intl'
44
import { EnvironmentProps } from '../types'
5-
import { Provider } from '@remix-ui/environment-explorer'
65
import { Dropdown } from 'react-bootstrap'
76
import { CustomMenu, CustomToggle, CustomTooltip } from '@remix-ui/helper'
7+
import { DropdownLabel } from './dropdownLabel'
8+
import { setExecutionContext } from '../actions/account'
9+
810
const _paq = (window._paq = window._paq || [])
911

1012
export function EnvironmentUI(props: EnvironmentProps) {
@@ -26,6 +28,8 @@ export function EnvironmentUI(props: EnvironmentProps) {
2628
'L2 - Arbitrum': 'https://bridge.arbitrum.io/'
2729
}
2830

31+
const isL2 = (providerDisplayName: string) => providerDisplayName && (providerDisplayName.startsWith('L2 - Optimism') || providerDisplayName.startsWith('L2 - Arbitrum'))
32+
2933
const intl = useIntl()
3034
const isSaveEvmStateChecked = props.config.get('settings/save-evm-state')
3135

@@ -136,7 +140,6 @@ export function EnvironmentUI(props: EnvironmentProps) {
136140
} else props.runTabPlugin.call('notification', 'toast', `State not available to reset, as no transactions have been made for selected environment & selected workspace.`)
137141
}
138142

139-
const isL2 = (providerDisplayName: string) => providerDisplayName && (providerDisplayName.startsWith('L2 - Optimism') || providerDisplayName.startsWith('L2 - Arbitrum'))
140143
return (
141144
<div className="udapp_crow">
142145
<label id="selectExEnv" className="udapp_settingsLabel w-100">
@@ -159,20 +162,8 @@ export function EnvironmentUI(props: EnvironmentProps) {
159162
<div className="udapp_environment" data-id={`selected-provider-${currentProvider && currentProvider.name}`}>
160163
<Dropdown id="selectExEnvOptions" data-id="settingsSelectEnvOptions" className="udapp_selectExEnvOptions">
161164
<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}>
162-
{isL2(currentProvider && currentProvider.displayName)}
163-
{currentProvider && currentProvider.displayName}
164-
{currentProvider && bridges[currentProvider.displayName.substring(0, 13)] && (
165-
<CustomTooltip placement={'auto-end'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText3" />}>
166-
<i
167-
style={{ fontSize: 'medium' }}
168-
className={'ml-2 fa fa-rocket-launch'}
169-
aria-hidden="true"
170-
onClick={() => {
171-
window.open(bridges[currentProvider.displayName.substring(0, 13)], '_blank')
172-
}}
173-
></i>
174-
</CustomTooltip>
175-
)}
165+
{/* {isL2(currentProvider && currentProvider.displayName)} */}
166+
<DropdownLabel label={currentProvider && currentProvider.displayName} bridges={bridges} currentProvider={currentProvider} chainId={props.envLabel} runTabState={props.udappState} setExecutionEnv={props.setExecutionContext} isL2={isL2} plugin={props.runTabPlugin} />
176167
</Dropdown.Toggle>
177168
<Dropdown.Menu as={CustomMenu} className="w-100 custom-dropdown-items" data-id="custom-dropdown-items">
178169
{props.providers.providerList.length === 0 && <Dropdown.Item>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export function SettingsUI(props: SettingsProps) {
2020
checkSelectionCorrectness={props.EvaluateEnvironmentSelection}
2121
modal={props.modal}
2222
config={props.runTabPlugin.config}
23+
udappState={props.udappState}
24+
envLabel={props.envLabel}
2325
/>
2426
<NetworkUI networkName={props.networkName} />
2527
<AccountUI

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export const runTabInitialState: RunTabState = {
2323
personalMode: false,
2424
networkName: 'VM',
2525
chainId:'-',
26+
displayName: 'Remix VM (Cancun)',
2627
providers: {
2728
providerList: [],
2829
isRequesting: false,
@@ -163,6 +164,7 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
163164
...state,
164165
selectExEnv: payload,
165166
networkName: state.selectExEnv === 'vm-cancun' ? 'VM' : state.networkName,
167+
displayName: state.providers.providerList.find((env) => env.name === state.selectExEnv)?.displayName,
166168
accounts: {
167169
...state.accounts,
168170
selectedAccount: '',
@@ -186,6 +188,7 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
186188
return {
187189
...state,
188190
networkName: payload,
191+
displayName: state.providers.providerList.find((env) => env.name === state.selectExEnv)?.displayName,
189192
}
190193
}
191194

@@ -194,7 +197,8 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
194197

195198
return {
196199
...state,
197-
chainId: payload
200+
chainId: payload,
201+
displayName: state.providers.providerList.find((env) => env.name === state.selectExEnv)?.displayName,
198202
}
199203
}
200204

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -379,6 +379,8 @@ export function RunTabUI(props: RunTabProps) {
379379
tooltip={toast}
380380
signMessageWithAddress={signMessage}
381381
passphrase={runTab.passphrase}
382+
udappState={runTab}
383+
envLabel={runTab.chainId}
382384
/>
383385
<ContractDropdownUI
384386
selectedAccount={runTab.accounts.selectedAccount}

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@ export interface ContractList {
2323
[file: string]: Contract[]
2424
}
2525

26+
export type EnvDropdownLabelStateType = {
27+
name: string,
28+
value: string,
29+
chainId?: string | number
30+
}
31+
2632
export interface RunTabState {
2733
accounts: {
2834
loadedAccounts: Record<string, string>,
@@ -37,7 +43,8 @@ export interface RunTabState {
3743
selectExEnv: string,
3844
personalMode: boolean,
3945
networkName: string,
40-
chainId: string
46+
chainId: string,
47+
displayName: string,
4148
providers: {
4249
providerList: Provider[],
4350
isRequesting: boolean,
@@ -110,6 +117,9 @@ export interface RunTabState {
110117

111118
export interface SettingsProps {
112119
runTabPlugin: RunTab,
120+
udappState: RunTabState
121+
envLabel: string,
122+
currentSelectedEnv?: string,
113123
selectExEnv: string,
114124
EvaluateEnvironmentSelection: any
115125
accounts: {
@@ -148,6 +158,7 @@ export interface SettingsProps {
148158
export interface EnvironmentProps {
149159
checkSelectionCorrectness: any
150160
runTabPlugin: RunTab,
161+
envLabel: string,
151162
selectedEnv: string,
152163
providers: {
153164
providerList: Provider[],
@@ -157,7 +168,9 @@ export interface EnvironmentProps {
157168
},
158169
setExecutionContext: (executionContext: { context: string }) => void
159170
modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void, okBtnClass?: string, cancelBtnClass?: string) => void,
160-
config: any
171+
config: any,
172+
currentSelectedEnv?: string,
173+
udappState: RunTabState
161174
}
162175

163176
export interface NetworkProps {

0 commit comments

Comments
 (0)