@ -4,7 +4,8 @@ import { FormattedMessage, useIntl } from 'react-intl'
import * as remixLib from '@remix-project/remix-lib'
import { ContractGUIProps } from '../types'
import { CopyToClipboard } from '@remix-ui/clipboard'
import { CustomTooltip } from '@remix-ui/helper'
import { CustomTooltip , ProxyAddressToggle , ProxyDropdownMenu , shortenDate , shortenProxyAddress , unavailableProxyLayoutMsg , upgradeReportMsg } from '@remix-ui/helper'
import { Dropdown } from 'react-bootstrap'
const txFormat = remixLib . execution . txFormat
const txHelper = remixLib . execution . txHelper
@ -21,9 +22,9 @@ export function ContractGUI (props: ContractGUIProps) {
const [ toggleDeployProxy , setToggleDeployProxy ] = useState < boolean > ( false )
const [ toggleUpgradeImp , setToggleUpgradeImp ] = useState < boolean > ( false )
const [ deployState , setDeployState ] = useState < { deploy : boolean , upgrade : boolean } > ( { deploy : false , upgrade : false } )
const [ useLastProxy , setUseLastProxy ] = useState < boolean > ( false )
const [ proxyAddress , setProxyAddress ] = useState < string > ( '' )
const [ proxyAddressError , setProxyAddressError ] = useState < string > ( '' )
const [ showDropdown , setShowDropdown ] = useState < boolean > ( false )
const multiFields = useRef < Array < HTMLInputElement | null > > ( [ ] )
const initializeFields = useRef < Array < HTMLInputElement | null > > ( [ ] )
const basicInputRef = useRef < HTMLInputElement > ( )
@ -171,13 +172,38 @@ export function ContractGUI (props: ContractGUIProps) {
}
}
const handleActionClick = ( ) = > {
const handleActionClick = async ( ) = > {
if ( deployState . deploy ) {
const proxyInitializeString = getMultiValsString ( initializeFields . current )
props . clickCallBack ( props . initializerOptions . inputs . inputs , proxyInitializeString , [ 'Deploy with Proxy' ] )
} else if ( deployState . upgrade ) {
if ( proxyAddress === '' ) {
setProxyAddressError ( 'proxy address cannot be empty' )
} else {
const isValidProxyAddress = await props . isValidProxyAddress ( proxyAddress )
if ( isValidProxyAddress ) {
setProxyAddressError ( '' )
const upgradeReport : any = await props . isValidProxyUpgrade ( proxyAddress )
if ( upgradeReport . ok ) {
! proxyAddressError && props . clickCallBack ( props . funcABI . inputs , proxyAddress , [ 'Upgrade with Proxy' ] )
} else {
if ( upgradeReport . warning ) {
props . modal ( 'Proxy Upgrade Warning' , unavailableProxyLayoutMsg ( ) , 'Proceed' , ( ) = > {
! proxyAddressError && props . clickCallBack ( props . funcABI . inputs , proxyAddress , [ 'Upgrade with Proxy' ] )
} , 'Cancel' , ( ) = > { } , 'btn-warning' , 'btn-secondary' )
} else {
props . modal ( 'Proxy Upgrade Error' , upgradeReportMsg ( upgradeReport ) , 'Continue anyway ' , ( ) = > {
! proxyAddressError && props . clickCallBack ( props . funcABI . inputs , proxyAddress , [ 'Upgrade with Proxy' ] )
} , 'Cancel' , ( ) = > { } , 'btn-warning' , 'btn-secondary' )
}
}
} else {
setProxyAddressError ( 'not a valid contract address' )
}
}
} else {
props . clickCallBack ( props . funcABI . inputs , basicInput )
}
@ -217,43 +243,22 @@ export function ContractGUI (props: ContractGUIProps) {
setToggleUpgradeImp ( value )
if ( value ) {
setToggleDeployProxy ( false )
if ( useLastProxy ) setProxyAddress ( props . savedProxyAddress )
}
setDeployState ( { deploy : false , upgrade : value } )
}
const handleUseLastProxySelect = ( e ) = > {
const value = e . target . checked
const address = props . savedProxyAddress
if ( value ) {
if ( address ) {
const switchProxyAddress = ( address : string ) = > {
setProxyAddress ( address )
setProxyAddressError ( '' )
} else {
setProxyAddressError ( 'No proxy address available' )
setProxyAddress ( '' )
}
}
setUseLastProxy ( value )
}
const handleSetProxyAddress = ( e ) = > {
const value = e . target . value
setProxyAddress ( value )
const toggleDropdown = ( isOpen : boolean ) = > {
setShowDropdown ( isOpen )
}
const validateProxyAddress = async ( address : string ) = > {
if ( address === '' ) {
setProxyAddressError ( 'proxy address cannot be empty' )
} else {
if ( await props . isValidProxyAddress ( address ) ) {
setProxyAddressError ( '' )
} else {
setProxyAddressError ( 'not a valid contract address' )
}
}
const handleAddressChange = ( e : React.ChangeEvent < HTMLInputElement > ) = > {
const address = e . target . value
setProxyAddress ( address )
}
return (
@ -269,22 +274,23 @@ export function ContractGUI (props: ContractGUIProps) {
< div
className = "udapp_contractActionsContainerSingle pt-2"
style = { { display : toggleContainer ? "none" : "flex" } }
>
< CustomTooltip
placement = { "right-start" }
tooltipClasses = "text-wrap"
tooltipId = "remixUdappInstanceButtonTooltip"
tooltipText = { buttonOptions . title }
>
< button
onClick = { handleActionClick }
className = { ` udapp_instanceButton ${ props . widthClass } btn btn-sm ${ buttonOptions . classList } ` }
data - id = { buttonOptions . dataId }
data - title = { buttonOptions . title }
disabled = { toggleUpgradeImp && ! proxyAddress }
>
{ title }
< / button >
< CustomTooltip
placement = { "right-start" }
tooltipClasses = "text-wrap"
tooltipId = "remixUdappInstanceButtonTooltip"
tooltipText = { toggleUpgradeImp && ! proxyAddress ? 'Proxy address cannot be empty' : buttonOptions . title }
>
< div > { title } < / div >
< / CustomTooltip >
< / button >
< CustomTooltip
placement = { "right" }
tooltipClasses = "text-nowrap"
@ -518,45 +524,40 @@ export function ContractGUI (props: ContractGUIProps) {
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 }
/ >
< div data - id = "proxy-dropdown-items" >
< Dropdown onToggle = { toggleDropdown } show = { showDropdown } >
< Dropdown.Toggle id = "dropdown-custom-components" as = { ProxyAddressToggle } address = { proxyAddress } onChange = { handleAddressChange } className = "d-inline-block border border-dark bg-dark" / >
{ props . proxy . deployments . length > 0 &&
< Dropdown.Menu as = { ProxyDropdownMenu } className = 'w-100 custom-dropdown-items' style = { { overflow : 'hidden' } } >
{
props . proxy . deployments . map ( ( deployment , index ) = > (
< CustomTooltip
tooltipText = { < FormattedMessage id = 'udapp.proxyAddressTooltip' / > }
tooltipId = "proxyAddressToolti p"
placement = "auto"
tooltipClasses = "text-wrap"
placement = { "right" }
tooltipClasses = "text-nowra p"
tooltipId = { ` proxyAddressTooltip ${ index } ` }
tooltipText = { 'Deployed ' + shortenDate ( deployment . date ) }
>
< label
htmlFor = "proxyAddress"
data - id = "contractGUIProxyAddressLabel"
className = "m-0 form-check-label custom-control-label udapp_checkboxAlign"
style = { { fontSize : 12 } }
< Dropdown.Item
key = { index }
onClick = { ( ) = > {
switchProxyAddress ( deployment . address )
} }
data - id = { ` proxyAddress ${ index } ` }
>
< FormattedMessage id = 'udapp.useLastDeployedERC1967Contract' / >
< / label >
< span > { proxyAddress === deployment . address ? < span > & # 10003 ; { deployment . contractName + ' ' + shortenProxyAddress ( deployment . address ) } < / span > : < span className = "pl-3" > { deployment . contractName + ' ' + shortenProxyAddress ( deployment . address ) } < / span > } < / span >
< / Dropdown.Item >
< / CustomTooltip >
) )
}
< / Dropdown.Menu >
}
< / Dropdown >
< / div >
{
! useLastProxy ?
< div className = 'd-flex' >
< div className = "mb-2" >
< label className = "mt-2 text-left d-block" >
< FormattedMessage id = 'udapp.proxyAddressLabel' / > :
< / label >
< CustomTooltip placement = "right" tooltipText = { < FormattedMessage id = 'udapp.proxyAddressInputTooltip' / > } >
< input style = { { height : 32 } } className = "form-control udapp_input" data - id = "ERC1967AddressInput" placeholder = { intl . formatMessage ( { id : 'udapp.proxyAddressPlaceholder' } ) } onChange = { handleSetProxyAddress } onBlur = { ( ) = > validateProxyAddress ( proxyAddress ) } / >
< / CustomTooltip >
{ proxyAddressError && < span className = 'text-lowercase' data - id = "errorMsgProxyAddress" style = { { fontSize : '.8em' } } > { proxyAddressError } < / span > }
< / div > :
< span className = 'text-capitalize' data - id = "lastDeployedERC1967Address" style = { { fontSize : '.8em' } } > { proxyAddress || proxyAddressError } < / span >
}
{ proxyAddressError && < span className = 'text-lowercase text-danger' data - id = "errorMsgProxyAddress" style = { { fontSize : '.8em' } } > { proxyAddressError } < / span > }
< / div >
< / div >
< / div >
< / >
bunsenstraat
2 years ago
committed by
GitHub