@@ -8,26 +8,27 @@ import { deployWithProxyMsg, upgradeWithProxyMsg } from '@remix-ui/helper'
88import { OverlayTrigger , Tooltip } from 'react-bootstrap'
99const _paq = window . _paq = window . _paq || [ ]
1010
11- export function ContractDropdownUI ( props : ContractDropdownProps ) {
11+ export function ContractDropdownUI ( props : ContractDropdownProps ) {
1212 const [ abiLabel , setAbiLabel ] = useState < {
1313 display : string ,
1414 content : string
1515 } > ( {
1616 display : '' ,
1717 content : ''
1818 } )
19- const [ atAddressOptions , setAtAddressOptions ] = useState < { title : string , disabled : boolean } > ( {
19+ const [ atAddressOptions , setAtAddressOptions ] = useState < { title : string , disabled : boolean } > ( {
2020 title : 'address of contract' ,
2121 disabled : true
2222 } )
2323 const [ loadedAddress , setLoadedAddress ] = useState < string > ( '' )
24- const [ contractOptions , setContractOptions ] = useState < { title : string , disabled : boolean } > ( {
24+ const [ contractOptions , setContractOptions ] = useState < { title : string , disabled : boolean } > ( {
2525 title : 'Please compile *.sol file to deploy or access a contract' ,
2626 disabled : true
2727 } )
2828 const [ loadedContractData , setLoadedContractData ] = useState < ContractData > ( null )
2929 const [ constructorInterface , setConstructorInterface ] = useState < FuncABI > ( null )
3030 const [ constructorInputs , setConstructorInputs ] = useState ( null )
31+ const [ compilerName , setCompilerName ] = useState < string > ( '' )
3132 const contractsRef = useRef < HTMLSelectElement > ( null )
3233 const atAddressValue = useRef < HTMLInputElement > ( null )
3334 const { contractList, loadType, currentFile, compilationSource, currentContract, compilationCount, deployOptions, proxyKey } = props . contracts
@@ -98,20 +99,23 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
9899
99100 useEffect ( ( ) => {
100101 initSelectedContract ( )
102+ updateCompilerName ( )
101103 } , [ contractList ] )
102104
103105 useEffect ( ( ) => {
104106 // if the file change the ui is already feed with another bunch of contracts.
105107 // we also need to update the state
106- const contracts = contractList [ currentFile ]
108+ const contracts = contractList [ currentFile ]
107109 if ( contracts && contracts . length > 0 ) {
108110 props . setSelectedContract ( contracts [ 0 ] . alias )
109111 }
112+ updateCompilerName ( )
110113 } , [ currentFile ] )
111114
112115 const initSelectedContract = ( ) => {
113116 const contracts = contractList [ currentFile ]
114-
117+
118+
115119 if ( contracts && contracts . length > 0 ) {
116120 const contract = contracts . find ( contract => contract . alias === currentContract )
117121
@@ -123,9 +127,9 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
123127
124128 const isContractFile = ( file ) => {
125129 return / .( .s o l ) $ / . exec ( file ) ||
126- / .( .v y ) $ / . exec ( file ) || // vyper
127- / .( .l e x ) $ / . exec ( file ) || // lexon
128- / .( .c o n t r a c t ) $ / . exec ( file )
130+ / .( .v y ) $ / . exec ( file ) || // vyper
131+ / .( .l e x ) $ / . exec ( file ) || // lexon
132+ / .( .c o n t r a c t ) $ / . exec ( file )
129133 }
130134
131135 const enableAtAddress = ( enable : boolean ) => {
@@ -162,20 +166,20 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
162166
163167 const createInstance = ( selectedContract , args , deployMode ?: DeployMode [ ] ) => {
164168 if ( selectedContract . bytecodeObject . length === 0 ) {
165- 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' , ( ) => { } )
169+ 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' , ( ) => { } )
166170 }
167171 if ( ( selectedContract . name !== currentContract ) && ( selectedContract . name === 'ERC1967Proxy' ) ) selectedContract . name = currentContract
168172 const isProxyDeployment = ( deployMode || [ ] ) . find ( mode => mode === 'Deploy with Proxy' )
169173 const isContractUpgrade = ( deployMode || [ ] ) . find ( mode => mode === 'Upgrade with Proxy' )
170-
174+
171175 if ( isProxyDeployment ) {
172176 props . modal ( 'Deploy Implementation & Proxy (ERC1967)' , deployWithProxyMsg ( ) , 'Proceed' , ( ) => {
173177 props . createInstance ( loadedContractData , props . gasEstimationPrompt , props . passphrasePrompt , props . publishToStorage , props . mainnetPrompt , isOverSizePrompt , args , deployMode )
174- } , 'Cancel' , ( ) => { } )
178+ } , 'Cancel' , ( ) => { } )
175179 } else if ( isContractUpgrade ) {
176180 props . modal ( 'Deploy Implementation & Update Proxy' , upgradeWithProxyMsg ( ) , 'Proceed' , ( ) => {
177181 props . createInstance ( loadedContractData , props . gasEstimationPrompt , props . passphrasePrompt , props . publishToStorage , props . mainnetPrompt , isOverSizePrompt , args , deployMode )
178- } , 'Cancel' , ( ) => { } )
182+ } , 'Cancel' , ( ) => { } )
179183 } else {
180184 props . createInstance ( loadedContractData , props . gasEstimationPrompt , props . passphrasePrompt , props . publishToStorage , props . mainnetPrompt , isOverSizePrompt , args , deployMode )
181185 }
@@ -212,9 +216,21 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
212216 window . localStorage . setItem ( `ipfs/${ props . exEnvironment } /${ props . networkName } ` , checkedState . toString ( ) )
213217 }
214218
219+ const updateCompilerName = ( ) => {
220+ if ( contractsRef . current . value ) {
221+ contractList [ currentFile ] . forEach ( contract => {
222+ if ( contract . alias === contractsRef . current . value ) {
223+ setCompilerName ( contract . compilerName )
224+ }
225+ } )
226+ } else {
227+ setCompilerName ( '' )
228+ }
229+ }
230+
215231 const handleContractChange = ( e ) => {
216232 const value = e . target . value
217-
233+ updateCompilerName ( )
218234 props . setSelectedContract ( value )
219235 }
220236
@@ -231,7 +247,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
231247 const isOverSizePrompt = ( ) => {
232248 return (
233249 < div > Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. < br />
234- More info: < a href = "https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target = "_blank" rel = "noreferrer" > eip-170</ a >
250+ More info: < a href = "https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target = "_blank" rel = "noreferrer" > eip-170</ a >
235251 </ div >
236252 )
237253 }
@@ -241,33 +257,37 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
241257 < div className = 'd-flex justify-content-between' >
242258 < div className = "d-flex justify-content-between align-items-end" >
243259 < label className = "udapp_settingsLabel pr-1" > Contract</ label >
244- < 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 >
260+ < div className = "d-flex" > { compilerName && compilerName !== '' && < label className = "text-capitalize" style = { { maxHeight : '0.6rem' , lineHeight : '1rem' } } data-id = "udappCompiledBy" > (Compiled by { compilerName } )</ label > } </ div >
245261 </ div >
246- < OverlayTrigger placement = { 'right' } overlay = {
247- < Tooltip className = "text-nowrap" id = "info-sync-compiled-contract" >
248- < div > Click here to import contracts compiled from an external framework.</ div >
249- < div > This action is enabled when Remix is connected to an external framework (hardhat, truffle, foundry) through remixd.</ div >
250- </ Tooltip >
251- } >
252- < button className = "btn d-flex py-0" onClick = { _ => {
262+ { props . remixdActivated ?
263+ < OverlayTrigger placement = { 'right' } overlay = {
264+ < Tooltip className = "text-nowrap" id = "info-sync-compiled-contract" >
265+ < div > Click here to import contracts compiled from an external framework.</ div >
266+ < div > This action is enabled when Remix is connected to an external framework (hardhat, truffle, foundry) through remixd.</ div >
267+ </ Tooltip >
268+ } >
269+ < button className = "btn d-flex py-0" onClick = { _ => {
253270 props . syncContracts ( )
254271 _paq . push ( [ 'trackEvent' , 'udapp' , 'syncContracts' , compilationSource ] )
255272 } } >
256- < i style = { { cursor : 'pointer' } } className = "fa fa-refresh mr-2 mt-2" aria-hidden = "true" > </ i >
257- </ button >
258- </ OverlayTrigger >
273+ < i style = { { cursor : 'pointer' } } className = "fa fa-refresh mr-2 mt-2" aria-hidden = "true" > </ i >
274+ </ button >
275+ </ OverlayTrigger >
276+ : null }
259277 </ div >
260278 < div className = "udapp_subcontainer" >
261- < 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' } } >
262- { ( contractList [ currentFile ] || [ ] ) . map ( ( contract , index ) => {
263- return < option key = { index } value = { contract . alias } > { contract . alias } - { contract . file } </ option >
264- } ) }
279+ < 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' } } >
280+ { ( contractList [ currentFile ] || [ ] ) . map ( ( contract , index ) => {
281+ return < option key = { index } value = { contract . alias } >
282+ { contract . alias } - { contract . file }
283+ </ option >
284+ } ) }
265285 </ select >
266- < span className = "py-1" style = { { display : abiLabel . display } } > { abiLabel . content } </ span >
286+ < span className = "py-1" style = { { display : abiLabel . display } } > { abiLabel . content } </ span >
267287 </ div >
268288 < div >
269289 < div className = "udapp_deployDropdown" >
270- { ( ( contractList [ currentFile ] && contractList [ currentFile ] . filter ( contract => contract ) ) || [ ] ) . length <= 0 ? 'No compiled contracts'
290+ { ( ( contractList [ currentFile ] && contractList [ currentFile ] . filter ( contract => contract ) ) || [ ] ) . length <= 0 ? 'No compiled contracts'
271291 : loadedContractData ? < div >
272292 < ContractGUI
273293 title = 'Deploy'
0 commit comments