@ -8,7 +8,7 @@ import { deployWithProxyMsg, upgradeWithProxyMsg } from '@remix-ui/helper'
import { OverlayTrigger , Tooltip } from 'react-bootstrap' import { OverlayTrigger , Tooltip } from 'react-bootstrap'
const _paq = window . _paq = window . _paq || [ ] const _paq = window . _paq = window . _paq || [ ]
export function ContractDropdownUI ( props : ContractDropdownProps ) { export function ContractDropdownUI ( props : ContractDropdownProps ) {
const [ abiLabel , setAbiLabel ] = useState < { const [ abiLabel , setAbiLabel ] = useState < {
display : string , display : string ,
content : string content : string
@ -16,18 +16,19 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
display : '' , display : '' ,
content : '' content : ''
} ) } )
const [ atAddressOptions , setAtAddressOptions ] = useState < { title : string , disabled : boolean } > ( { const [ atAddressOptions , setAtAddressOptions ] = useState < { title : string , disabled : boolean } > ( {
title : 'address of contract' , title : 'address of contract' ,
disabled : true disabled : true
} ) } )
const [ loadedAddress , setLoadedAddress ] = useState < string > ( '' ) 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' , title : 'Please compile *.sol file to deploy or access a contract' ,
disabled : true disabled : true
} ) } )
const [ loadedContractData , setLoadedContractData ] = useState < ContractData > ( null ) const [ loadedContractData , setLoadedContractData ] = useState < ContractData > ( null )
const [ constructorInterface , setConstructorInterface ] = useState < FuncABI > ( null ) const [ constructorInterface , setConstructorInterface ] = useState < FuncABI > ( null )
const [ constructorInputs , setConstructorInputs ] = useState ( null ) const [ constructorInputs , setConstructorInputs ] = useState ( null )
const [ compilerName , setCompilerName ] = useState < string > ( '' )
const contractsRef = useRef < HTMLSelectElement > ( null ) const contractsRef = useRef < HTMLSelectElement > ( null )
const atAddressValue = useRef < HTMLInputElement > ( null ) const atAddressValue = useRef < HTMLInputElement > ( null )
const { contractList , loadType , currentFile , compilationSource , currentContract , compilationCount , deployOptions , proxyKey } = props . contracts const { contractList , loadType , currentFile , compilationSource , currentContract , compilationCount , deployOptions , proxyKey } = props . contracts
@ -98,20 +99,23 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
useEffect ( ( ) = > { useEffect ( ( ) = > {
initSelectedContract ( ) initSelectedContract ( )
updateCompilerName ( )
} , [ contractList ] ) } , [ contractList ] )
useEffect ( ( ) = > { useEffect ( ( ) = > {
// if the file change the ui is already feed with another bunch of contracts.
// if the file change the ui is already feed with another bunch of contracts.
// we also need to update the state
// we also need to update the state
const contracts = contractList [ currentFile ]
const contracts = contractList [ currentFile ]
if ( contracts && contracts . length > 0 ) { if ( contracts && contracts . length > 0 ) {
props . setSelectedContract ( contracts [ 0 ] . alias ) props . setSelectedContract ( contracts [ 0 ] . alias )
} }
updateCompilerName ( )
} , [ currentFile ] ) } , [ currentFile ] )
const initSelectedContract = ( ) = > { const initSelectedContract = ( ) = > {
const contracts = contractList [ currentFile ] const contracts = contractList [ currentFile ]
if ( contracts && contracts . length > 0 ) { if ( contracts && contracts . length > 0 ) {
const contract = contracts . find ( contract = > contract . alias === currentContract ) const contract = contracts . find ( contract = > contract . alias === currentContract )
@ -123,9 +127,9 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
const isContractFile = ( file ) = > { const isContractFile = ( file ) = > {
return /.(.sol)$/ . exec ( file ) || return /.(.sol)$/ . exec ( file ) ||
/.(.vy)$/ . exec ( file ) || // vyper
/.(.vy)$/ . exec ( file ) || // vyper
/.(.lex)$/ . exec ( file ) || // lexon
/.(.lex)$/ . exec ( file ) || // lexon
/.(.contract)$/ . exec ( file ) /.(.contract)$/ . exec ( file )
} }
const enableAtAddress = ( enable : boolean ) = > { const enableAtAddress = ( enable : boolean ) = > {
@ -162,20 +166,20 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
const createInstance = ( selectedContract , args , deployMode? : DeployMode [ ] ) = > { const createInstance = ( selectedContract , args , deployMode? : DeployMode [ ] ) = > {
if ( selectedContract . bytecodeObject . length === 0 ) { 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 if ( ( selectedContract . name !== currentContract ) && ( selectedContract . name === 'ERC1967Proxy' ) ) selectedContract . name = currentContract
const isProxyDeployment = ( deployMode || [ ] ) . find ( mode = > mode === 'Deploy with Proxy' ) const isProxyDeployment = ( deployMode || [ ] ) . find ( mode = > mode === 'Deploy with Proxy' )
const isContractUpgrade = ( deployMode || [ ] ) . find ( mode = > mode === 'Upgrade with Proxy' ) const isContractUpgrade = ( deployMode || [ ] ) . find ( mode = > mode === 'Upgrade with Proxy' )
if ( isProxyDeployment ) { if ( isProxyDeployment ) {
props . modal ( 'Deploy Implementation & Proxy (ERC1967)' , deployWithProxyMsg ( ) , 'Proceed' , ( ) = > { props . modal ( 'Deploy Implementation & Proxy (ERC1967)' , deployWithProxyMsg ( ) , 'Proceed' , ( ) = > {
props . createInstance ( loadedContractData , props . gasEstimationPrompt , props . passphrasePrompt , props . publishToStorage , props . mainnetPrompt , isOverSizePrompt , args , deployMode ) props . createInstance ( loadedContractData , props . gasEstimationPrompt , props . passphrasePrompt , props . publishToStorage , props . mainnetPrompt , isOverSizePrompt , args , deployMode )
} , 'Cancel' , ( ) = > { } ) } , 'Cancel' , ( ) = > { } )
} else if ( isContractUpgrade ) { } else if ( isContractUpgrade ) {
props . modal ( 'Deploy Implementation & Update Proxy' , upgradeWithProxyMsg ( ) , 'Proceed' , ( ) = > { props . modal ( 'Deploy Implementation & Update Proxy' , upgradeWithProxyMsg ( ) , 'Proceed' , ( ) = > {
props . createInstance ( loadedContractData , props . gasEstimationPrompt , props . passphrasePrompt , props . publishToStorage , props . mainnetPrompt , isOverSizePrompt , args , deployMode ) props . createInstance ( loadedContractData , props . gasEstimationPrompt , props . passphrasePrompt , props . publishToStorage , props . mainnetPrompt , isOverSizePrompt , args , deployMode )
} , 'Cancel' , ( ) = > { } ) } , 'Cancel' , ( ) = > { } )
} else { } else {
props . createInstance ( loadedContractData , props . gasEstimationPrompt , props . passphrasePrompt , props . publishToStorage , props . mainnetPrompt , isOverSizePrompt , args , deployMode ) props . createInstance ( loadedContractData , props . gasEstimationPrompt , props . passphrasePrompt , props . publishToStorage , props . mainnetPrompt , isOverSizePrompt , args , deployMode )
} }
@ -212,9 +216,21 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
window . localStorage . setItem ( ` ipfs/ ${ props . exEnvironment } / ${ props . networkName } ` , checkedState . toString ( ) ) window . localStorage . setItem ( ` ipfs/ ${ props . exEnvironment } / ${ props . networkName } ` , checkedState . toString ( ) )
} }
const updateCompilerName = ( ) = > {
if ( contractsRef . current . value ) {
contractList [ currentFile ] . forEach ( contract = > {
if ( contract . alias === contractsRef . current . value ) {
setCompilerName ( contract . compilerName )
}
} )
} else {
setCompilerName ( '' )
}
}
const handleContractChange = ( e ) = > { const handleContractChange = ( e ) = > {
const value = e . target . value const value = e . target . value
updateCompilerName ( )
props . setSelectedContract ( value ) props . setSelectedContract ( value )
} }
@ -231,7 +247,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
const isOverSizePrompt = ( ) = > { const isOverSizePrompt = ( ) = > {
return ( return (
< div > Contract creation initialization returns data with length of more than 24576 bytes . The deployment will likely fails . < br / > < 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 > < / div >
) )
} }
@ -241,33 +257,37 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
< div className = 'd-flex justify-content-between' > < div className = 'd-flex justify-content-between' >
< div className = "d-flex justify-content-between align-items-end" > < div className = "d-flex justify-content-between align-items-end" >
< label className = "udapp_settingsLabel pr-1" > Contract < / label > < label className = "udapp_settingsLabel pr-1" > Contract < / label >
< div className = "d-flex" > { Object . keys ( props . contracts . contractList ) . length > 0 && compilationSourc e !== '' && < label className = "text-capitalize" style = { { maxHeight : '0.6rem' , lineHeight : '1rem' } } data - id = "udappCompiledBy" > ( Compiled by { compilationSourc e } ) < / label > } < / div > < div className = "d-flex" > { compilerName && compilerNam e!== '' && < label className = "text-capitalize" style = { { maxHeight : '0.6rem' , lineHeight : '1rem' } } data - id = "udappCompiledBy" > ( Compiled by { compilerNam e } ) < / label > } < / div >
< / div > < / div >
< OverlayTrigger placement = { 'right' } overlay = { { props . remixdActivated ?
< Tooltip className = "text-nowrap" id = "info-sync-compiled-contract" > < OverlayTrigger placement = { 'right' } overlay = {
< div > Click here to import contracts compiled from an external framework . < / div > < Tooltip className = "text-nowrap" id = "info-sync-compiled-contract" >
< div > This action is enabled when Remix is connected to an external framework ( hardhat , truffle , foundry ) through remixd . < / div >
< div > Click here to import contracts compiled from an external framework . < / div >
< / Tooltip > < 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 = { _ = > { } >
< button className = "btn d-flex py-0" onClick = { _ = > {
props . syncContracts ( ) props . syncContracts ( )
_paq . push ( [ 'trackEvent' , 'udapp' , 'syncContracts' , compilationSource ] ) _paq . push ( [ 'trackEvent' , 'udapp' , 'syncContracts' , compilationSource ] )
} } > } } >
< i style = { { cursor : 'pointer' } } className = "fa fa-refresh mr-2 mt-2" aria - hidden = "true" > < / i > < i style = { { cursor : 'pointer' } } className = "fa fa-refresh mr-2 mt-2" aria - hidden = "true" > < / i >
< / button > < / button >
< / OverlayTrigger > < / OverlayTrigger >
: null }
< / div > < / div >
< div className = "udapp_subcontainer" > < 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' } } > < 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 ) = > { { ( contractList [ currentFile ] || [ ] ) . map ( ( contract , index ) = > {
return < option key = { index } value = { contract . alias } > { contract . alias } - { contract . file } < / option > return < option key = { index } value = { contract . alias } >
} ) } { contract . alias } - { contract . file }
< / option >
} ) }
< / select > < / 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 > < div >
< div className = "udapp_deployDropdown" > < 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 > : loadedContractData ? < div >
< ContractGUI < ContractGUI
title = 'Deploy' title = 'Deploy'
bunsenstraat
2 years ago
committed by
GitHub