@ -3,8 +3,6 @@ import React, { useEffect, useRef, useState } from 'react'
import * as remixLib from '@remix-project/remix-lib' import * as remixLib from '@remix-project/remix-lib'
import { ContractGUIProps } from '../types' import { ContractGUIProps } from '../types'
import { CopyToClipboard } from '@remix-ui/clipboard' import { CopyToClipboard } from '@remix-ui/clipboard'
import { MultiDeployInput } from './multiDeployInput'
import { DeployInput } from './deployInput'
const txFormat = remixLib . execution . txFormat const txFormat = remixLib . execution . txFormat
export function ContractGUI ( props : ContractGUIProps ) { export function ContractGUI ( props : ContractGUIProps ) {
@ -15,20 +13,15 @@ export function ContractGUI (props: ContractGUIProps) {
title : string , title : string ,
content : string , content : string ,
classList : string , classList : string ,
dataId : string , dataId : string
widthClass : string } > ( { title : '' , content : '' , classList : '' , dataId : '' } )
} > ( { title : '' , content : '' , classList : '' , dataId : '' , widthClass : '' } ) const [ toggleDeployProxy , setToggleDeployProxy ] = useState < boolean > ( false )
const [ selectedDeployIndex , setSelectedDeployIndex ] = useState < number > ( null ) const [ toggleUpgradeImp , setToggleUpgradeImp ] = useState < boolean > ( false )
const [ showOptions , setShowOptions ] = useState < boolean > ( false ) const [ deployState , setDeployState ] = useState < { deploy : boolean , upgrade : boolean } > ( { deploy : false , upgrade : false } )
const [ hasArgs , setHasArgs ] = useState < boolean > ( false ) const [ useLastProxy , setUseLastProxy ] = useState < boolean > ( false )
const [ isMultiField , setIsMultiField ] = useState < boolean > ( false ) const [ proxyAddress , setProxyAddress ] = useState < string > ( '' )
const [ deployInputs , setDeployInputs ] = useState < {
internalType? : string ,
name : string ,
type : string
} [ ] > ( [ ] )
const [ deployPlaceholder , setDeployPlaceholder ] = useState < string > ( '' )
const multiFields = useRef < Array < HTMLInputElement | null > > ( [ ] ) const multiFields = useRef < Array < HTMLInputElement | null > > ( [ ] )
const initializeFields = useRef < Array < HTMLInputElement | null > > ( [ ] )
const basicInputRef = useRef < HTMLInputElement > ( ) const basicInputRef = useRef < HTMLInputElement > ( )
useEffect ( ( ) = > { useEffect ( ( ) = > {
@ -41,7 +34,7 @@ export function ContractGUI (props: ContractGUIProps) {
} }
setBasicInput ( '' ) setBasicInput ( '' )
// we have the reset the fields before reseting the previous references.
// we have the reset the fields before reseting the previous references.
if ( basicInputRef . current ) basicInputRef . current . value = '' basicInputRef . current . value = ''
multiFields . current . filter ( ( el ) = > el !== null && el !== undefined ) . forEach ( ( el ) = > el . value = '' ) multiFields . current . filter ( ( el ) = > el !== null && el !== undefined ) . forEach ( ( el ) = > el . value = '' )
multiFields . current = [ ] multiFields . current = [ ]
} , [ props . title , props . funcABI ] ) } , [ props . title , props . funcABI ] )
@ -53,8 +46,7 @@ export function ContractGUI (props: ContractGUIProps) {
title : title + ' - call' , title : title + ' - call' ,
content : 'call' , content : 'call' ,
classList : 'btn-info' , classList : 'btn-info' ,
dataId : title + ' - call' , dataId : title + ' - call'
widthClass : props.widthClass
} ) } )
} else if ( props . funcABI . stateMutability === 'payable' || props . funcABI . payable ) { } else if ( props . funcABI . stateMutability === 'payable' || props . funcABI . payable ) {
// // transact. stateMutability = payable
// // transact. stateMutability = payable
@ -62,8 +54,7 @@ export function ContractGUI (props: ContractGUIProps) {
title : title + ' - transact (payable)' , title : title + ' - transact (payable)' ,
content : 'transact' , content : 'transact' ,
classList : 'btn-danger' , classList : 'btn-danger' ,
dataId : title + ' - transact (payable)' , dataId : title + ' - transact (payable)'
widthClass : props.widthClass
} ) } )
} else { } else {
// // transact. stateMutability = nonpayable
// // transact. stateMutability = nonpayable
@ -71,59 +62,13 @@ export function ContractGUI (props: ContractGUIProps) {
title : title + ' - transact (not payable)' , title : title + ' - transact (not payable)' ,
content : 'transact' , content : 'transact' ,
classList : 'btn-warning' , classList : 'btn-warning' ,
dataId : title + ' - transact (not payable)' , dataId : title + ' - transact (not payable)'
widthClass : props.widthClass
} ) } )
} }
} , [ props . lookupOnly , props . funcABI , title ] ) } , [ props . lookupOnly , props . funcABI , title ] )
useEffect ( ( ) = > { const getContentOnCTC = ( ) = > {
if ( props . deployOption && props . deployOption [ selectedDeployIndex ] ) { const multiString = getMultiValsString ( multiFields . current )
if ( props . deployOption [ selectedDeployIndex ] . title === 'Deploy with Proxy' ) {
if ( props . initializerOptions ) {
setDeployInputs ( props . initializerOptions . inputs . inputs )
setDeployPlaceholder ( props . initializerOptions . initializeInputs )
setHasArgs ( true )
if ( props . initializerOptions . inputs . inputs . length > 1 ) setIsMultiField ( true )
else setIsMultiField ( false )
} else {
setDeployInputs ( [ ] )
setDeployPlaceholder ( '' )
setHasArgs ( false )
setIsMultiField ( false )
}
} else {
if ( props . funcABI ) {
setDeployInputs ( props . funcABI . inputs )
setDeployPlaceholder ( props . inputs )
setHasArgs ( true )
if ( props . funcABI . inputs . length > 1 ) setIsMultiField ( true )
else setIsMultiField ( false )
} else {
setDeployInputs ( [ ] )
setDeployPlaceholder ( '' )
setHasArgs ( false )
setIsMultiField ( false )
}
}
} else {
if ( props . funcABI ) {
setDeployInputs ( props . funcABI . inputs )
setDeployPlaceholder ( props . inputs )
setHasArgs ( true )
if ( props . funcABI . inputs . length > 1 ) setIsMultiField ( true )
else setIsMultiField ( false )
} else {
setDeployInputs ( [ ] )
setDeployPlaceholder ( '' )
setHasArgs ( false )
setIsMultiField ( false )
}
}
} , [ selectedDeployIndex , props . funcABI , props . initializerOptions ] )
const getContentOnCTC = ( fields : HTMLInputElement [ ] ) = > {
const multiString = getMultiValsString ( fields )
// copy-to-clipboard icon is only visible for method requiring input params
// copy-to-clipboard icon is only visible for method requiring input params
if ( ! multiString ) { if ( ! multiString ) {
return 'cannot encode empty arguments' return 'cannot encode empty arguments'
@ -191,8 +136,7 @@ export function ContractGUI (props: ContractGUIProps) {
if ( inputString ) { if ( inputString ) {
inputString = inputString . replace ( /(^|,\s+|,)(\d+)(\s+,|,|$)/g , '$1"$2"$3' ) // replace non quoted number by quoted number
inputString = inputString . replace ( /(^|,\s+|,)(\d+)(\s+,|,|$)/g , '$1"$2"$3' ) // replace non quoted number by quoted number
inputString = inputString . replace ( /(^|,\s+|,)(0[xX][0-9a-fA-F]+)(\s+,|,|$)/g , '$1"$2"$3' ) // replace non quoted hex string by quoted hex string
inputString = inputString . replace ( /(^|,\s+|,)(0[xX][0-9a-fA-F]+)(\s+,|,|$)/g , '$1"$2"$3' ) // replace non quoted hex string by quoted hex string
inputString = JSON . stringify ( [ inputString ] ) const inputJSON = JSON . parse ( '[' + inputString + ']' )
const inputJSON = JSON . parse ( inputString )
const multiInputs = multiFields . current const multiInputs = multiFields . current
for ( let k = 0 ; k < multiInputs . length ; k ++ ) { for ( let k = 0 ; k < multiInputs . length ; k ++ ) {
@ -204,9 +148,15 @@ export function ContractGUI (props: ContractGUIProps) {
} }
const handleActionClick = ( ) = > { const handleActionClick = ( ) = > {
const deployMode = selectedDeployIndex !== null ? [ props . deployOption [ selectedDeployIndex ] . title ] : [ ] if ( deployState . deploy ) {
const proxyInitializeString = getMultiValsString ( initializeFields . current )
props . clickCallBack ( props . funcABI . inputs , basicInput , deployMode ) props . clickCallBack ( props . initializerOptions . inputs . inputs , proxyInitializeString , [ 'Deploy with Proxy' ] )
} else if ( deployState . upgrade ) {
props . clickCallBack ( props . funcABI . inputs , proxyAddress , [ 'Upgrade with Proxy' ] )
} else {
props . clickCallBack ( props . funcABI . inputs , basicInput )
}
} }
const handleBasicInput = ( e ) = > { const handleBasicInput = ( e ) = > {
@ -215,90 +165,197 @@ export function ContractGUI (props: ContractGUIProps) {
setBasicInput ( value ) setBasicInput ( value )
} }
const handleMultiValsSubmit = ( fields : HTMLInputElement [ ] ) = > { const handleExpandMultiClick = ( ) = > {
const valsString = getMultiValsString ( fields ) const valsString = getMultiValsString ( multiFields . current )
const deployMode = selectedDeployIndex !== null ? [ props . deployOption [ selectedDeployIndex ] . title ] : [ ]
if ( valsString ) { if ( valsString ) {
props . clickCallBack ( props . funcABI . inputs , valsString , deployMode ) props . clickCallBack ( props . funcABI . inputs , valsString )
} else { } else {
props . clickCallBack ( props . funcABI . inputs , '' , deployMode ) props . clickCallBack ( props . funcABI . inputs , '' )
} }
} }
const setSelectedDeploy = ( index : number ) = > { const handleToggleDeployProxy = ( ) = > {
setSelectedDeployIndex ( index !== selectedDeployIndex ? index : null ) setToggleDeployProxy ( ! toggleDeployProxy )
if ( basicInputRef . current ) basicInputRef . current . value = '' }
setBasicInput ( '' )
const handleDeployProxySelect = ( e ) = > {
const value = e . target . checked
if ( value ) setToggleUpgradeImp ( false )
setToggleDeployProxy ( value )
setDeployState ( { upgrade : false , deploy : value } )
}
const handleToggleUpgradeImp = ( ) = > {
setToggleUpgradeImp ( ! toggleUpgradeImp )
}
const handleUpgradeImpSelect = ( e ) = > {
const value = e . target . checked
setToggleUpgradeImp ( value )
if ( value ) {
setToggleDeployProxy ( false )
if ( useLastProxy ) setProxyAddress ( props . savedProxyAddress )
}
setDeployState ( { deploy : false , upgrade : value } )
} }
const toggleOptions = ( ) = > { const handleUseLastProxySelect = ( e ) = > {
setShowOptions ( ! showOptions ) const value = e . target . checked
const address = props . savedProxyAddress
setUseLastProxy ( value )
setProxyAddress ( address || '' )
}
const handleSetProxyAddress = ( e ) = > {
const value = e . target . value
setProxyAddress ( value )
} }
return ( return (
< div className = { ` udapp_contractProperty ${ hasArgs ? 'udapp_hasArgs' : '' } ` } > < div className = { ` udapp_contractProperty ${ ( props . funcABI . inputs && props . funcABI . inputs . length > 0 ) || ( props . funcABI . type === 'fallback' ) || ( props . funcABI . type === 'receive' ) ? 'udapp_hasArgs' : '' } ` } >
{ < div className = "udapp_contractActionsContainerSingle pt-2" style = { { display : toggleContainer ? 'none' : 'flex' } } >
props . isDeploy ? ! isMultiField ?
< button onClick = { handleActionClick } title = { buttonOptions . title } className = { ` udapp_instanceButton ${ props . widthClass } btn btn-sm ${ buttonOptions . classList } ` } data - id = { buttonOptions . dataId } > { title } < / button >
< DeployInput
< input
buttonOptions = { buttonOptions } className = "form-control"
funcABI = { props . initializerOptions ? props.initializerOptions.inputs : props.funcABI } data - id = { props . funcABI . type === 'fallback' || props . funcABI . type === 'receive' ? ` '( ${ props . funcABI . type } ') ` : 'multiParamManagerBasicInputField' }
inputs = { deployPlaceholder } placeholder = { props . inputs }
handleBasicInput = { handleBasicInput } title = { props . funcABI . type === 'fallback' || props . funcABI . type === 'receive' ? ` '( ${ props . funcABI . type } ') ` : props . inputs }
basicInputRef = { basicInputRef } onChange = { handleBasicInput }
selectedIndex = { selectedDeployIndex } ref = { basicInputRef }
setSelectedIndex = { setSelectedDeploy } style = { { visibility : ! ( ( props . funcABI . inputs && props . funcABI . inputs . length > 0 ) || ( props . funcABI . type === 'fallback' ) || ( props . funcABI . type === 'receive' ) ) ? 'hidden' : 'visible' } } / >
handleActionClick = { handleActionClick } < i
deployOptions = { props . deployOption } className = "fas fa-angle-down udapp_methCaret"
/ > : < M u l t i D e p l o y I n p u t onClick = { switchMethodViewOn }
buttonOptions = { buttonOptions } title = { title }
selectedIndex = { selectedDeployIndex } style = { { visibility : ! ( props . funcABI . inputs && props . funcABI . inputs . length > 0 ) ? 'hidden' : 'visible' } } > < / i >
setSelectedIndex = { setSelectedDeploy } < / div >
handleMultiValsSubmit = { handleMultiValsSubmit } < div className = "udapp_contractActionsContainerMulti" style = { { display : toggleContainer ? 'flex' : 'none' } } >
inputs = { deployInputs } < div className = "udapp_contractActionsContainerMultiInner text-dark" >
getMultiValsString = { getMultiValsString } < div onClick = { switchMethodViewOff } className = "udapp_multiHeader" >
deployOptions = { props . deployOption } < div className = "udapp_multiTitle run-instance-multi-title" > { title } < / div >
/ > : < i className = 'fas fa-angle-up udapp_methCaret' > < / i >
< > < / div >
< div className = "udapp_contractActionsContainerSingle pt-2" style = { { display : toggleContainer ? 'none' : 'flex' } } > < div >
< button onClick = { handleActionClick } title = { buttonOptions . title } className = { ` udapp_instanceButton ${ props . widthClass } btn btn-sm ${ buttonOptions . classList } ` } data - id = { buttonOptions . dataId } > { title } < / button > { props . funcABI . inputs . map ( ( inp , index ) = > {
< input return (
className = "form-control" < div className = "udapp_multiArg" key = { index } >
data - id = { props . funcABI . type === 'fallback' || props . funcABI . type === 'receive' ? ` '( ${ props . funcABI . type } ') ` : 'multiParamManagerBasicInputField' } < label htmlFor = { inp . name } > { inp . name } : < / label >
placeholder = { props . inputs } < input ref = { el = > { multiFields . current [ index ] = el } } className = "form-control" placeholder = { inp . type } title = { inp . name } data - id = { ` multiParamManagerInput ${ inp . name } ` } / >
title = { props . funcABI . type === 'fallback' || props . funcABI . type === 'receive' ? ` '( ${ props . funcABI . type } ') ` : props . inputs } < / div > )
onChange = { handleBasicInput } } ) }
ref = { basicInputRef } < / div >
style = { { visibility : ! ( ( props . funcABI . inputs && props . funcABI . inputs . length > 0 ) || ( props . funcABI . type === 'fallback' ) || ( props . funcABI . type === 'receive' ) ) ? 'hidden' : 'visible' } } / > < div className = "udapp_group udapp_multiArg" >
< i < CopyToClipboard tip = 'Encode values of input fields & copy to clipboard' icon = 'fa-clipboard' direction = { 'bottom' } getContent = { getContentOnCTC } / >
className = "fas fa-angle-down udapp_methCaret" < button onClick = { handleExpandMultiClick } title = { buttonOptions . title } data - id = { buttonOptions . dataId } className = { ` udapp_instanceButton ${ buttonOptions . classList } ` } > { buttonOptions . content } < / button >
onClick = { switchMethodViewOn } < / div >
title = { title }
style = { { visibility : ! ( props . funcABI . inputs && props . funcABI . inputs . length > 0 ) ? 'hidden' : 'visible' } } > < / i >
< / div > < / div >
< div className = "udapp_contractActionsContainerMulti" style = { { display : toggleContainer ? 'flex' : 'none' } } > < / div >
< div className = "udapp_contractActionsContainerMultiInner text-dark" > { props . deployOption && ( props . deployOption || [ ] ) . length > 0 ?
< div onClick = { switchMethodViewOff } className = "udapp_multiHeader" > < >
< div className = "udapp_multiTitle run-instance-multi-title" > { title } < / div > < div className = 'd-flex justify-content-between' >
< i className = 'fas fa-angle-up udapp_methCaret' > < / i > < div className = "d-flex py-1 align-items-center custom-control custom-checkbox" >
< input
id = "deployWithProxy"
data - id = "contractGUIDeployWithProxy"
className = "form-check-input custom-control-input"
type = "checkbox"
onChange = { handleDeployProxySelect }
checked = { deployState . deploy }
/ >
< label
htmlFor = "deployWithProxy"
data - id = "contractGUIDeployWithProxyLabel"
className = "m-0 form-check-label custom-control-label udapp_checkboxAlign"
title = "An ERC1967 proxy contract will be deployed along with the selected implementation contract."
>
Deploy with Proxy
< / label >
< / div > < / div >
< div > < div >
{ props . funcABI . inputs . map ( ( inp , index ) = > { {
return ( props . initializerOptions && props . initializerOptions . initializeInputs ?
< div className = "udapp_multiArg" key = { index } > < span onClick = { handleToggleDeployProxy } >
< label htmlFor = { inp . name } > { inp . name } : < / label > < i className = { ! toggleDeployProxy ? 'fas fa-angle-right pt-2' : 'fas fa-angle-down' } aria - hidden = "true" > < / i >
< input ref = { el = > { multiFields . current [ index ] = el } } className = "form-control" placeholder = { inp . type } title = { inp . name } data - id = { ` multiParamManagerInput ${ inp . name } ` } / > < / span > : null
< / div > ) }
} ) }
< / div > < / div >
< div className = "udapp_group udapp_multiArg" > < / div >
< CopyToClipboard tip = 'Encode values of input fields & copy to clipboard' icon = 'fa-clipboard' direction = { 'bottom' } getContent = { ( ) = > getContentOnCTC ( multiFields . current ) } / > {
< button onClick = { ( ) = > handleMultiValsSubmit ( multiFields . current ) } title = { buttonOptions . title } data - id = { buttonOptions . dataId } className = { ` udapp_instanceButton ${ buttonOptions . classList } ` } > { buttonOptions . content } < / button > props . initializerOptions && props . initializerOptions . initializeInputs ?
< div className = { ` pl-4 flex-column ${ toggleDeployProxy ? "d-flex" : "d-none" } ` } >
< div className = { ` flex-column 'd-flex'} ` } > {
props . initializerOptions . inputs . inputs . map ( ( inp , index ) = > {
return (
< div className = "mb-2" key = { index } >
< label className = 'mt-2 text-left d-block' htmlFor = { inp . name } > { inp . name } : < / label >
< input ref = { el = > { initializeFields . current [ index ] = el } } style = { { height : 32 } } className = "form-control udapp_input" placeholder = { inp . type } title = { inp . name } / >
< / div >
) } )
}
< / div >
< / div > : null
}
< div className = 'd-flex justify-content-between' >
< div className = "d-flex py-1 align-items-center custom-control custom-checkbox" >
< input
id = "upgradeImplementation"
data - id = "contractGUIUpgradeImplementation"
className = "form-check-input custom-control-input"
type = "checkbox"
onChange = { handleUpgradeImpSelect }
checked = { deployState . upgrade }
/ >
< label
htmlFor = "upgradeImplementation"
data - id = "contractGUIUpgradeImplementationLabel"
className = "m-0 form-check-label custom-control-label udapp_checkboxAlign"
title = "The implementation contract will be deployed and then the proxy contract will be updated with new implementation's address."
>
Upgrade with Proxy
< / label >
< / div > < / div >
< span onClick = { handleToggleUpgradeImp } >
< i className = { ! toggleUpgradeImp ? 'fas fa-angle-right pt-2' : 'fas fa-angle-down' } aria - hidden = "true" > < / i >
< / span >
< / div > < / div >
< / div > < div className = { ` pl-4 flex-column ${ toggleUpgradeImp ? "d-flex" : "d-none" } ` } >
< / > < div className = { ` flex-column 'd-flex'} ` } >
} < div className = "d-flex py-1 align-items-center custom-control custom-checkbox" >
< input
id = "proxyAddress"
data - id = "contractGUIProxyAddress"
className = "form-check-input custom-control-input"
type = "checkbox"
onChange = { handleUseLastProxySelect }
checked = { useLastProxy }
/ >
< label
htmlFor = "proxyAddress"
data - id = "contractGUIProxyAddressLabel"
className = "m-0 form-check-label custom-control-label udapp_checkboxAlign"
title = "Select this option to use the last deployed ERC1967 contract on the current network."
style = { { fontSize : 12 } }
>
Use last deployed ERC1967 contract
< / label >
< / div >
{
! useLastProxy ?
< div className = "mb-2" >
< label className = 'mt-2 text-left d-block' > Proxy Address : < / label >
< input style = { { height : 32 } } className = "form-control udapp_input" placeholder = 'proxy address' title = 'Enter previously deployed proxy address on the selected network' onChange = { handleSetProxyAddress } / >
< / div > :
< span className = 'text-capitalize' style = { { fontSize : '.8em' } } > { proxyAddress || 'No proxy address available' } < / span >
}
< / div >
< / div >
< / > : null
}
< / div > < / div >
) )
} }
drafish
3 years ago