refactor dropdown

Author: filip mertens

libs/remix-ui/run-tab/src/lib/actions/events.ts

@@ -2,10 +2,11 @@ import { envChangeNotification } from "@remix-ui/helper"
 import { RunTab } from "../types/run-tab"
 import { setExecutionContext, setFinalContext, updateAccountBalances } from "./account"
 import { addExternalProvider, addInstance, removeExternalProvider, setNetworkNameFromProvider } from "./actions"
-import { addDeployOption, clearAllInstances, clearRecorderCount, fetchContractListSuccess, resetUdapp, setCompilationSource, setCurrentContract, setCurrentFile, setLoadType, setProxyEnvAddress, setRecorderCount, setSendValue } from "./payload"
+import { addDeployOption, clearAllInstances, clearRecorderCount, fetchContractListSuccess, resetUdapp, setCompilationSource, setCurrentContract, setCurrentFile, setLoadType, setProxyEnvAddress, setRecorderCount, setRemixDActivated, setSendValue } from "./payload"
 import { CompilerAbstract } from '@remix-project/remix-solidity'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
+import { Plugin } from "@remixproject/engine"
 
 export const setupEvents = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
   plugin.blockchain.events.on('newTransaction', (tx, receipt) => {
@@ -73,6 +74,21 @@ export const setupEvents = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
   plugin.on('filePanel', 'setWorkspace', () => {
     dispatch(resetUdapp())
     resetAndInit(plugin)
+    plugin.call('manager', 'isActive', 'remixd').then((activated) => {
+      dispatch(setRemixDActivated(activated))
+    })
+  })
+
+  plugin.on('manager', 'pluginActivated', (plugin: Plugin) => {
+    if (plugin.name === 'remixd') {
+      dispatch(setRemixDActivated(true))
+    }
+  })
+
+  plugin.on('manager', 'pluginDeactivated', (plugin: Plugin) => {
+    if (plugin.name === 'remixd') {
+      dispatch(setRemixDActivated(false))
+    }
   })
 
   plugin.fileManager.events.on('currentFileChanged', (currentFile: string) => {
@@ -100,12 +116,13 @@ export const setupEvents = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
 
 const broadcastCompilationResult = async (compilerName: string, plugin: RunTab, dispatch: React.Dispatch<any>, file, source, languageVersion, data, input?) => {
   // TODO check whether the tab is configured
+  console.log('compilation finished', compilerName, file)
   const compiler = new CompilerAbstract(languageVersion, data, source, input)
   plugin.compilersArtefacts[languageVersion] = compiler
   plugin.compilersArtefacts.__last = compiler
 
   const contracts = getCompiledContracts(compiler).map((contract) => {
-    return { name: languageVersion, alias: contract.name, file: contract.file, compiler }
+    return { name: languageVersion, alias: contract.name, file: contract.file, compiler, compilerName }
   })
   if ((contracts.length > 0)) {
     const contractsInCompiledFile = contracts.filter(obj => obj.file === file)
@@ -125,7 +142,7 @@ const broadcastCompilationResult = async (compilerName: string, plugin: RunTab,
   }
   dispatch(fetchContractListSuccess({ [file]: contracts }))
   dispatch(setCurrentFile(file))
-  dispatch(setCompilationSource(compilerName))
+  // dispatch(setCompilationSource(compilerName))
   // TODO: set current contract
 }
 

libs/remix-ui/run-tab/src/lib/actions/payload.ts

@@ -1,6 +1,6 @@
 import { ContractList } from '../reducers/runTab'
 import { ContractData } from '@remix-project/core-plugin'
-import { ADD_DEPLOY_OPTION, ADD_INSTANCE, ADD_PROVIDER, CLEAR_INSTANCES, CLEAR_RECORDER_COUNT, DISPLAY_NOTIFICATION, DISPLAY_POPUP_MESSAGE, FETCH_ACCOUNTS_LIST_FAILED, FETCH_ACCOUNTS_LIST_REQUEST, FETCH_ACCOUNTS_LIST_SUCCESS, FETCH_CONTRACT_LIST_FAILED, FETCH_CONTRACT_LIST_REQUEST, FETCH_CONTRACT_LIST_SUCCESS, HIDE_NOTIFICATION, HIDE_POPUP_MESSAGE, REMOVE_DEPLOY_OPTION, REMOVE_INSTANCE, REMOVE_PROVIDER, RESET_STATE, SET_BASE_FEE_PER_GAS, SET_CONFIRM_SETTINGS, SET_CURRENT_CONTRACT, SET_CURRENT_FILE, SET_COMPILATION_SOURCE, SET_DECODED_RESPONSE, SET_DEPLOY_OPTIONS, SET_EXECUTION_ENVIRONMENT, SET_EXTERNAL_WEB3_ENDPOINT, SET_GAS_LIMIT, SET_GAS_PRICE, SET_GAS_PRICE_STATUS, SET_IPFS_CHECKED_STATE, SET_LOAD_TYPE, SET_MATCH_PASSPHRASE, SET_MAX_FEE, SET_MAX_PRIORITY_FEE, SET_NETWORK_NAME, SET_PASSPHRASE, SET_PATH_TO_SCENARIO, SET_PERSONAL_MODE, SET_PROXY_ENV_ADDRESS, SET_RECORDER_COUNT, SET_SELECTED_ACCOUNT, SET_SEND_UNIT, SET_SEND_VALUE } from '../constants'
+import { ADD_DEPLOY_OPTION, ADD_INSTANCE, ADD_PROVIDER, CLEAR_INSTANCES, CLEAR_RECORDER_COUNT, DISPLAY_NOTIFICATION, DISPLAY_POPUP_MESSAGE, FETCH_ACCOUNTS_LIST_FAILED, FETCH_ACCOUNTS_LIST_REQUEST, FETCH_ACCOUNTS_LIST_SUCCESS, FETCH_CONTRACT_LIST_FAILED, FETCH_CONTRACT_LIST_REQUEST, FETCH_CONTRACT_LIST_SUCCESS, HIDE_NOTIFICATION, HIDE_POPUP_MESSAGE, REMOVE_DEPLOY_OPTION, REMOVE_INSTANCE, REMOVE_PROVIDER, RESET_STATE, SET_BASE_FEE_PER_GAS, SET_CONFIRM_SETTINGS, SET_CURRENT_CONTRACT, SET_CURRENT_FILE, SET_COMPILATION_SOURCE, SET_DECODED_RESPONSE, SET_DEPLOY_OPTIONS, SET_EXECUTION_ENVIRONMENT, SET_EXTERNAL_WEB3_ENDPOINT, SET_GAS_LIMIT, SET_GAS_PRICE, SET_GAS_PRICE_STATUS, SET_IPFS_CHECKED_STATE, SET_LOAD_TYPE, SET_MATCH_PASSPHRASE, SET_MAX_FEE, SET_MAX_PRIORITY_FEE, SET_NETWORK_NAME, SET_PASSPHRASE, SET_PATH_TO_SCENARIO, SET_PERSONAL_MODE, SET_PROXY_ENV_ADDRESS, SET_RECORDER_COUNT, SET_SELECTED_ACCOUNT, SET_SEND_UNIT, SET_SEND_VALUE, SET_REMIXD_ACTIVATED } from '../constants'
 import { DeployMode, DeployOptions } from '../types'
 
 export const fetchAccountsListRequest = () => {
@@ -168,7 +168,7 @@ export const setCurrentFile = (file: string) => {
   }
 }
 
-export const setCompilationSource = (source: string) => {
+export const setCompilationSource = (source: { [file:string]: string} ) => {
   return {
     type: SET_COMPILATION_SOURCE,
     payload: source
@@ -315,3 +315,10 @@ export const setProxyEnvAddress = (key: string) => {
     type: SET_PROXY_ENV_ADDRESS
   }
 }
+
+export const setRemixDActivated = (activated: boolean) => {
+  return {
+    payload: activated,
+    type: SET_REMIXD_ACTIVATED
+  }
+}

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

@@ -5,28 +5,29 @@ import { ContractData, FuncABI } from '@remix-project/core-plugin'
 import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
 import { deployWithProxyMsg, upgradeWithProxyMsg } from '@remix-ui/helper'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { Dropdown, OverlayTrigger, Tooltip } from 'react-bootstrap'
 
-export function ContractDropdownUI (props: ContractDropdownProps) {
+export function ContractDropdownUI(props: ContractDropdownProps) {
   const [abiLabel, setAbiLabel] = useState<{
     display: string,
     content: string
   }>({
     display: '',
     content: ''
   })
-  const [atAddressOptions, setAtAddressOptions] = useState<{title: string, disabled: boolean}>({
+  const [atAddressOptions, setAtAddressOptions] = useState<{ title: string, disabled: boolean }>({
     title: 'address of contract',
     disabled: true
   })
   const [loadedAddress, setLoadedAddress] = useState<string>('')
-  const [contractOptions, setContractOptions] = useState<{title: string, disabled: boolean}>({
+  const [contractOptions, setContractOptions] = useState<{ title: string, disabled: boolean }>({
     title: 'Please compile *.sol file to deploy or access a contract',
     disabled: true
   })
   const [loadedContractData, setLoadedContractData] = useState<ContractData>(null)
   const [constructorInterface, setConstructorInterface] = useState<FuncABI>(null)
   const [constructorInputs, setConstructorInputs] = useState(null)
+  const [compilerName, setCompilerName] = useState<string>('')
   const contractsRef = useRef<HTMLSelectElement>(null)
   const atAddressValue = useRef<HTMLInputElement>(null)
   const { contractList, loadType, currentFile, compilationSource, currentContract, compilationCount, deployOptions, proxyKey } = props.contracts
@@ -97,20 +98,23 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
 
   useEffect(() => {
     initSelectedContract()
+    updateCompilerName()
   }, [contractList])
 
   useEffect(() => {
     // if the file change the ui is already feed with another bunch of contracts.
     // we also need to update the state
-    const contracts = contractList[currentFile]  
+    const contracts = contractList[currentFile]
     if (contracts && contracts.length > 0) {
       props.setSelectedContract(contracts[0].alias)
     }
+    updateCompilerName()
   }, [currentFile])
 
   const initSelectedContract = () => {
     const contracts = contractList[currentFile]
-  
+
+
     if (contracts && contracts.length > 0) {
       const contract = contracts.find(contract => contract.alias === currentContract)
 
@@ -122,9 +126,9 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
 
   const isContractFile = (file) => {
     return /.(.sol)$/.exec(file) ||
-        /.(.vy)$/.exec(file) || // vyper
-        /.(.lex)$/.exec(file) || // lexon
-        /.(.contract)$/.exec(file)
+      /.(.vy)$/.exec(file) || // vyper
+      /.(.lex)$/.exec(file) || // lexon
+      /.(.contract)$/.exec(file)
   }
 
   const enableAtAddress = (enable: boolean) => {
@@ -161,20 +165,20 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
 
   const createInstance = (selectedContract, args, deployMode?: DeployMode[]) => {
     if (selectedContract.bytecodeObject.length === 0) {
-      return props.modal('Alert', 'This contract may be abstract, it may not implement an abstract parent\'s methods completely or it may not invoke an inherited contract\'s constructor correctly.', 'OK', () => {})
+      return props.modal('Alert', 'This contract may be abstract, it may not implement an abstract parent\'s methods completely or it may not invoke an inherited contract\'s constructor correctly.', 'OK', () => { })
     }
     if ((selectedContract.name !== currentContract) && (selectedContract.name === 'ERC1967Proxy')) selectedContract.name = currentContract
     const isProxyDeployment = (deployMode || []).find(mode => mode === 'Deploy with Proxy')
     const isContractUpgrade = (deployMode || []).find(mode => mode === 'Upgrade with Proxy')
-  
+
     if (isProxyDeployment) {
       props.modal('Deploy Implementation & Proxy (ERC1967)', deployWithProxyMsg(), 'Proceed', () => {
         props.createInstance(loadedContractData, props.gasEstimationPrompt, props.passphrasePrompt, props.publishToStorage, props.mainnetPrompt, isOverSizePrompt, args, deployMode)
-      }, 'Cancel', () => {})
+      }, 'Cancel', () => { })
     } else if (isContractUpgrade) {
       props.modal('Deploy Implementation & Update Proxy', upgradeWithProxyMsg(), 'Proceed', () => {
         props.createInstance(loadedContractData, props.gasEstimationPrompt, props.passphrasePrompt, props.publishToStorage, props.mainnetPrompt, isOverSizePrompt, args, deployMode)
-      }, 'Cancel', () => {})
+      }, 'Cancel', () => { })
     } else {
       props.createInstance(loadedContractData, props.gasEstimationPrompt, props.passphrasePrompt, props.publishToStorage, props.mainnetPrompt, isOverSizePrompt, args, deployMode)
     }
@@ -211,9 +215,25 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     window.localStorage.setItem(`ipfs/${props.exEnvironment}/${props.networkName}`, checkedState.toString())
   }
 
+  const updateCompilerName = () => {
+    console.log('updateCompilerName', contractsRef.current.value)
+    if (contractsRef.current.value) {
+      console.log(contractsRef.current.value)
+      const compilerNames = [...new Set([...contractList[currentFile].map(contract => contract.compilerName)])]
+      console.log(compilerNames)
+      contractList[currentFile].forEach(contract => {
+        if (contract.alias === contractsRef.current.value) {
+          setCompilerName(contract.compilerName)
+        }
+      })
+    } else{
+      setCompilerName('')
+    }
+  }
+
   const handleContractChange = (e) => {
     const value = e.target.value
-
+    updateCompilerName()
     props.setSelectedContract(value)
   }
 
@@ -230,7 +250,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   const isOverSizePrompt = () => {
     return (
       <div>Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. <br />
-      More info: <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target="_blank" rel="noreferrer">eip-170</a>
+        More info: <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target="_blank" rel="noreferrer">eip-170</a>
       </div>
     )
   }
@@ -240,30 +260,34 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
       <div className='d-flex justify-content-between'>
         <div className="d-flex justify-content-between align-items-end">
           <label className="udapp_settingsLabel pr-1">Contract</label>
-          <div className="d-flex">{ Object.keys(props.contracts.contractList).length > 0 && compilationSource !== '' && <label className="text-capitalize" style={{maxHeight: '0.6rem', lineHeight: '1rem'}} data-id="udappCompiledBy">(Compiled by {compilationSource})</label>}</div>
+          <div className="d-flex">{compilerName && compilerName !== '' && <label className="text-capitalize" style={{ maxHeight: '0.6rem', lineHeight: '1rem' }} data-id="udappCompiledBy">(Compiled by {compilerName})</label>}</div>
         </div>
-        <OverlayTrigger placement={'right'} overlay={
-          <Tooltip className="text-nowrap" id="info-sync-compiled-contract">
-            <div>Click here to import contracts compiled from an external framework.</div>
-            <div>This action is enabled when Remix is connected to an external framework (hardhat, truffle, foundry) through remixd.</div>                  
-          </Tooltip>
-        }>
-          <button className="btn d-flex py-0" onClick={_ => props.syncContracts()}>
-            <i style={{ cursor: 'pointer' }} className="fa fa-refresh mr-2 mt-2" aria-hidden="true"></i>
-          </button>
-        </OverlayTrigger>
+        {props.remixdActivated ?
+          <OverlayTrigger placement={'right'} overlay={
+            <Tooltip className="text-nowrap" id="info-sync-compiled-contract">
+              <div>Click here to import contracts compiled from an external framework.</div>
+              <div>This action is enabled when Remix is connected to an external framework (hardhat, truffle, foundry) through remixd.</div>
+            </Tooltip>
+          }>
+            <button className="btn d-flex py-0" onClick={_ => props.syncContracts()}>
+              <i style={{ cursor: 'pointer' }} className="fa fa-refresh mr-2 mt-2" aria-hidden="true"></i>
+            </button>
+          </OverlayTrigger>
+          : null}
       </div>
       <div className="udapp_subcontainer">
-       <select ref={contractsRef} value={currentContract} onChange={handleContractChange} className="udapp_contractNames custom-select" disabled={contractOptions.disabled} title={contractOptions.title} style={{ display: loadType === 'abi' && !isContractFile(currentFile) ? 'none' : 'block' }}>
-          { (contractList[currentFile] || []).map((contract, index) => {
-            return <option key={index} value={contract.alias}>{contract.alias} - {contract.file}</option>
-          }) }
+        <select ref={contractsRef} value={currentContract} onChange={handleContractChange} className="udapp_contractNames custom-select" disabled={contractOptions.disabled} title={contractOptions.title} style={{ display: loadType === 'abi' && !isContractFile(currentFile) ? 'none' : 'block' }}>
+          {(contractList[currentFile] || []).map((contract, index) => {
+            return <option key={index} value={contract.alias}>
+              {contract.alias} - {contract.file}
+            </option>
+          })}
         </select>
-        <span className="py-1" style={{ display: abiLabel.display }}>{ abiLabel.content }</span>
+        <span className="py-1" style={{ display: abiLabel.display }}>{abiLabel.content}</span>
       </div>
       <div>
         <div className="udapp_deployDropdown">
-          { ((contractList[currentFile] && contractList[currentFile].filter(contract => contract)) || []).length <= 0 ? 'No compiled contracts'
+          {((contractList[currentFile] && contractList[currentFile].filter(contract => contract)) || []).length <= 0 ? 'No compiled contracts'
             : loadedContractData ? <div>
               <ContractGUI
                 title='Deploy'

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

@@ -46,3 +46,4 @@ export const REMOVE_DEPLOY_OPTION = 'REMOVE_DEPLOY_OPTION'
 export const SET_DEPLOY_OPTIONS = 'SET_DEPLOY_OPTIONS'
 export const SET_CURRENT_CONTRACT = 'SET_CURRENT_CONTRACT'
 export const SET_PROXY_ENV_ADDRESS = 'SET_PROXY_ENV_ADDRESS'
+export const SET_REMIXD_ACTIVATED = 'SET_REMIXD_ACTIVATED'

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

@@ -1,7 +1,7 @@
 import { CompilerAbstract } from '@remix-project/remix-solidity-ts'
 import { ContractData } from '@remix-project/core-plugin'
 import { DeployOptions } from '../types'
-import { ADD_INSTANCE, ADD_PROVIDER, CLEAR_INSTANCES, CLEAR_RECORDER_COUNT, DISPLAY_NOTIFICATION, DISPLAY_POPUP_MESSAGE, FETCH_ACCOUNTS_LIST_FAILED, FETCH_ACCOUNTS_LIST_REQUEST, FETCH_ACCOUNTS_LIST_SUCCESS, FETCH_CONTRACT_LIST_FAILED, FETCH_CONTRACT_LIST_REQUEST, FETCH_CONTRACT_LIST_SUCCESS, FETCH_PROVIDER_LIST_FAILED, FETCH_PROVIDER_LIST_REQUEST, FETCH_PROVIDER_LIST_SUCCESS, HIDE_NOTIFICATION, HIDE_POPUP_MESSAGE, REMOVE_INSTANCE, REMOVE_PROVIDER, RESET_STATE, SET_BASE_FEE_PER_GAS, SET_CONFIRM_SETTINGS, SET_CURRENT_CONTRACT, SET_CURRENT_FILE, SET_DECODED_RESPONSE, SET_DEPLOY_OPTIONS, SET_EXECUTION_ENVIRONMENT, SET_EXTERNAL_WEB3_ENDPOINT, SET_GAS_LIMIT, SET_GAS_PRICE, SET_GAS_PRICE_STATUS, SET_IPFS_CHECKED_STATE, SET_LOAD_TYPE, SET_MATCH_PASSPHRASE, SET_MAX_FEE, SET_MAX_PRIORITY_FEE, SET_NETWORK_NAME, SET_PASSPHRASE, SET_PATH_TO_SCENARIO, SET_PERSONAL_MODE, SET_RECORDER_COUNT, SET_SELECTED_ACCOUNT, SET_SEND_UNIT, SET_SEND_VALUE, SET_PROXY_ENV_ADDRESS, ADD_DEPLOY_OPTION, REMOVE_DEPLOY_OPTION, SET_COMPILATION_SOURCE } from '../constants'
+import { ADD_INSTANCE, ADD_PROVIDER, CLEAR_INSTANCES, CLEAR_RECORDER_COUNT, DISPLAY_NOTIFICATION, DISPLAY_POPUP_MESSAGE, FETCH_ACCOUNTS_LIST_FAILED, FETCH_ACCOUNTS_LIST_REQUEST, FETCH_ACCOUNTS_LIST_SUCCESS, FETCH_CONTRACT_LIST_FAILED, FETCH_CONTRACT_LIST_REQUEST, FETCH_CONTRACT_LIST_SUCCESS, FETCH_PROVIDER_LIST_FAILED, FETCH_PROVIDER_LIST_REQUEST, FETCH_PROVIDER_LIST_SUCCESS, HIDE_NOTIFICATION, HIDE_POPUP_MESSAGE, REMOVE_INSTANCE, REMOVE_PROVIDER, RESET_STATE, SET_BASE_FEE_PER_GAS, SET_CONFIRM_SETTINGS, SET_CURRENT_CONTRACT, SET_CURRENT_FILE, SET_DECODED_RESPONSE, SET_DEPLOY_OPTIONS, SET_EXECUTION_ENVIRONMENT, SET_EXTERNAL_WEB3_ENDPOINT, SET_GAS_LIMIT, SET_GAS_PRICE, SET_GAS_PRICE_STATUS, SET_IPFS_CHECKED_STATE, SET_LOAD_TYPE, SET_MATCH_PASSPHRASE, SET_MAX_FEE, SET_MAX_PRIORITY_FEE, SET_NETWORK_NAME, SET_PASSPHRASE, SET_PATH_TO_SCENARIO, SET_PERSONAL_MODE, SET_RECORDER_COUNT, SET_SELECTED_ACCOUNT, SET_SEND_UNIT, SET_SEND_VALUE, SET_PROXY_ENV_ADDRESS, ADD_DEPLOY_OPTION, REMOVE_DEPLOY_OPTION, SET_COMPILATION_SOURCE, SET_REMIXD_ACTIVATED } from '../constants'
 
 declare const window: any
 interface Action {
@@ -12,7 +12,8 @@ export interface Contract {
   name: string,
   alias: string,
   file: string,
-  compiler: CompilerAbstract
+  compiler: CompilerAbstract,
+  compilerName: string
 }
 
 export interface ContractList {
@@ -64,6 +65,7 @@ export interface RunTabState {
         alias: string,
         file: string,
         compiler: CompilerAbstract
+        compilerName: string
       }[]
     },
     deployOptions: { [file: string]: { [name: string]: DeployOptions } },
@@ -99,6 +101,7 @@ export interface RunTabState {
     pathToScenario: string,
     transactionCount: number
   }
+  remixdActivated: boolean
 }
 
 export const runTabInitialState: RunTabState = {
@@ -180,7 +183,8 @@ export const runTabInitialState: RunTabState = {
   recorder: {
     pathToScenario: 'scenario.json',
     transactionCount: 0
-  }
+  },
+  remixdActivated: false
 }
 
 type AddProvider = {
@@ -734,6 +738,14 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case SET_REMIXD_ACTIVATED: {
+      const payload: boolean = action.payload
+      return {
+        ...state,
+        remixdActivated: payload
+      }
+    }
+
     default:
       return state
   }