@ -5,6 +5,7 @@ import Web3 from 'web3'
import { ContractGUIProps } from '../types' import { ContractGUIProps } from '../types'
import { CopyToClipboard } from '@remix-ui/clipboard' import { CopyToClipboard } from '@remix-ui/clipboard'
import { OverlayTrigger , Tooltip } from 'react-bootstrap' import { OverlayTrigger , Tooltip } from 'react-bootstrap'
import { CustomTooltip } from '@remix-ui/helper'
const txFormat = remixLib . execution . txFormat const txFormat = remixLib . execution . txFormat
const txHelper = remixLib . execution . txHelper const txHelper = remixLib . execution . txHelper
@ -269,16 +270,11 @@ export function ContractGUI (props: ContractGUIProps) {
className = "udapp_contractActionsContainerSingle pt-2" className = "udapp_contractActionsContainerSingle pt-2"
style = { { display : toggleContainer ? "none" : "flex" } } style = { { display : toggleContainer ? "none" : "flex" } }
> >
< OverlayTrigger < CustomTooltip
placement = { "right-start" } placement = { "right-start" }
overlay = { tooltipClasses = "text-wrap"
< Tooltip tooltipId = "remixUdappInstanceButtonTooltip"
className = "text-wrap" tooltipText = { buttonOptions . title }
id = "remixUdappInstanceButtonTooltip"
>
< span > { buttonOptions . title } < / span >
< / Tooltip >
}
> >
< button < button
onClick = { handleActionClick } onClick = { handleActionClick }
@ -288,19 +284,13 @@ export function ContractGUI (props: ContractGUIProps) {
> >
{ title } { title }
< / button > < / button >
< / OverlayTrigger > < / CustomTooltip >
< OverlayTrigger < CustomTooltip
placement = { "right" } placement = { "right" }
overlay = { tooltipClasses = "text-nowrap"
< Tooltip className = "text-nowrap" id = "remixContractGuiTooltip" > tooltipId = "remixContractGuiTooltip"
< span > tooltipText = { props . funcABI . type === "fallback" || props . funcABI . type === "receive" ? ` '( ${ props . funcABI . type } ') `
{ props . funcABI . type === "fallback" || : props . inputs }
props . funcABI . type === "receive"
? ` '( ${ props . funcABI . type } ') `
: props . inputs }
< / span >
< / Tooltip >
}
> >
< input < input
className = "form-control" className = "form-control"
@ -329,19 +319,26 @@ export function ContractGUI (props: ContractGUIProps) {
: "visible" , : "visible" ,
} } } }
/ > / >
< / OverlayTrigger > < / CustomTooltip >
< i < CustomTooltip
className = "fas fa-angle-down udapp_methCaret" tooltipText = { title }
onClick = { switchMethodViewOn } tooltipClasses = "text-nowrap"
title = { title } placement = "bottom"
style = { { tooltipId = "switchMethodViewOnTooltip"
visibility : ! ( >
props . funcABI . inputs && props . funcABI . inputs . length > 0 < i
) className = "fas fa-angle-down udapp_methCaret"
? "hidden" onClick = { switchMethodViewOn }
: "visible" , title = { title }
} } style = { {
> < / i > visibility : ! (
props . funcABI . inputs && props . funcABI . inputs . length > 0
)
? "hidden"
: "visible" ,
} }
> < / i >
< / CustomTooltip >
< / div > < / div >
< div < div
className = "udapp_contractActionsContainerMulti" className = "udapp_contractActionsContainerMulti"
@ -359,13 +356,11 @@ export function ContractGUI (props: ContractGUIProps) {
return ( return (
< div className = "udapp_multiArg" key = { index } > < div className = "udapp_multiArg" key = { index } >
< label htmlFor = { inp . name } > { inp . name } : < / label > < label htmlFor = { inp . name } > { inp . name } : < / label >
< OverlayTrigger < CustomTooltip
placement = "left-end" placement = "left-end"
overlay = { tooltipId = "udappContractActionsTooltip"
< Tooltip id = "udappContractActionsTooltip" className = "text-nowrap" > tooltipClasses = "text-nowrap"
< span > { inp . name } < / span > tooltipText = { inp . name }
< / Tooltip >
}
> >
< input < input
ref = { ( el ) = > { ref = { ( el ) = > {
@ -375,7 +370,7 @@ export function ContractGUI (props: ContractGUIProps) {
placeholder = { inp . type } placeholder = { inp . type }
data - id = { ` multiParamManagerInput ${ inp . name } ` } data - id = { ` multiParamManagerInput ${ inp . name } ` }
/ > / >
< / OverlayTrigger > < / CustomTooltip >
< / div > < / div >
) ; ) ;
} ) } } ) }
@ -411,16 +406,11 @@ export function ContractGUI (props: ContractGUIProps) {
< label htmlFor = "copyParameters" > Parameters < / label > < label htmlFor = "copyParameters" > Parameters < / label >
< / button > < / button >
< / CopyToClipboard > < / CopyToClipboard >
< OverlayTrigger < CustomTooltip
placement = { "right" } placement = { "right" }
overlay = { tooltipClasses = "text-nowrap"
< Tooltip tooltipId = "remixUdappInstanceButtonTooltip"
className = "text-nowrap" tooltipText = { buttonOptions . title }
id = "remixUdappInstanceButtonTooltip"
>
< span > { buttonOptions . title } < / span >
< / Tooltip >
}
> >
< button < button
type = "button" type = "button"
@ -430,7 +420,7 @@ export function ContractGUI (props: ContractGUIProps) {
> >
{ buttonOptions . content } { buttonOptions . content }
< / button > < / button >
< / OverlayTrigger > < / CustomTooltip >
< / div > < / div >
< / div > < / div >
< / div > < / div >
@ -446,14 +436,20 @@ export function ContractGUI (props: ContractGUIProps) {
onChange = { ( e ) = > handleDeployProxySelect ( e . target . checked ) } onChange = { ( e ) = > handleDeployProxySelect ( e . target . checked ) }
checked = { deployState . deploy } checked = { deployState . deploy }
/ > / >
< label < CustomTooltip
htmlFor = "deployWithProxy " tooltipText = "An ERC1967 proxy contract will be deployed along with the selected implementation contract. "
data - id = "contractGUIDeployWithProxyLabel" placement = { "right" }
className = "m-0 form-check-label custom-control-label udapp_checkboxAlign " tooltipClasses = "text-nowrap "
title = "An ERC1967 proxy contract will be deployed along with the selected implementation contract. " tooltipId = "deployWithProxyTooltip "
> >
Deploy with Proxy < label
< / label > htmlFor = "deployWithProxy"
data - id = "contractGUIDeployWithProxyLabel"
className = "m-0 form-check-label custom-control-label udapp_checkboxAlign"
>
Deploy with Proxy
< / label >
< / CustomTooltip >
< / div > < / div >
< div > < div >
{ props . initializerOptions && { props . initializerOptions &&
@ -489,15 +485,21 @@ export function ContractGUI (props: ContractGUIProps) {
{ " " } { " " }
{ inp . name } : { " " } { inp . name } : { " " }
< / label > < / label >
< input < CustomTooltip
ref = { ( el ) = > { tooltipText = { inp . name }
initializeFields . current [ index ] = el ; tooltipClasses = "text-wrap"
} } tooltipId = "initializeFieldsTooltip"
style = { { height : 32 } } placement = "right"
className = "form-control udapp_input" >
placeholder = { inp . type } < input
title = { inp . name } ref = { ( el ) = > {
/ > initializeFields . current [ index ] = el ;
} }
style = { { height : 32 } }
className = "form-control udapp_input"
placeholder = { inp . type }
/ >
< / CustomTooltip >
< / div > < / div >
) ; ) ;
} ) } } ) }
@ -514,14 +516,20 @@ export function ContractGUI (props: ContractGUIProps) {
onChange = { ( e ) = > handleUpgradeImpSelect ( e . target . checked ) } onChange = { ( e ) = > handleUpgradeImpSelect ( e . target . checked ) }
checked = { deployState . upgrade } checked = { deployState . upgrade }
/ > / >
< label < CustomTooltip
htmlFor = "upgradeImplementation " tooltipText = "The implementation contract will be deployed and then the proxy contract will be updated with new implementation's address. "
data - id = "contractGUIUpgradeImplementationLabel " tooltipClasses = "text-wrap "
className = "m-0 form-check-label custom-control-label udapp_checkboxAlign " tooltipId = "upgradeImplementationTooltip "
title = "The implementation contract will be deployed and then the proxy contract will be updated with new implementation's address. " placement = "right "
> >
Upgrade with Proxy < label
< / label > htmlFor = "upgradeImplementation"
data - id = "contractGUIUpgradeImplementationLabel"
className = "m-0 form-check-label custom-control-label udapp_checkboxAlign"
>
Upgrade with Proxy
< / label >
< / CustomTooltip >
< / div > < / div >
< span onClick = { handleToggleUpgradeImp } > < span onClick = { handleToggleUpgradeImp } >
< i < i
@ -549,25 +557,52 @@ export function ContractGUI (props: ContractGUIProps) {
onChange = { handleUseLastProxySelect } onChange = { handleUseLastProxySelect }
checked = { useLastProxy } checked = { useLastProxy }
/ > / >
< label < CustomTooltip
htmlFor = "proxyAddress" tooltipText = "Select this option to use the last deployed ERC1967 contract on the current network."
data - id = "contractGUIProxyAddressLabel" tooltipId = "proxyAddressTooltip"
className = "m-0 form-check-label custom-control-label udapp_checkboxAlign" placement = "auto"
title = "Select this option to use the last deployed ERC1967 contract on the current network." tooltipClasses = "text-wrap"
style = { { fontSize : 12 } }
> >
Use last deployed ERC1967 contract < label
< / label > htmlFor = "proxyAddress"
data - id = "contractGUIProxyAddressLabel"
className = "m-0 form-check-label custom-control-label udapp_checkboxAlign"
style = { { fontSize : 12 } }
>
Use last deployed ERC1967 contract
< / label >
< / CustomTooltip >
< / div > < / div >
{ {
! useLastProxy ? ! useLastProxy ?
< div className = "mb-2" > < div className = "mb-2" >
< label className = 'mt-2 text-left d-block' > Proxy Address : < / label > < label className = "mt-2 text-left d-block" >
< input style = { { height : 32 } } className = "form-control udapp_input" data - id = "ERC1967AddressInput" placeholder = 'proxy address' title = 'Enter previously deployed proxy address on the selected network' onChange = { handleSetProxyAddress } onBlur = { ( ) = > validateProxyAddress ( proxyAddress ) } / > Proxy Address : { " " }
{ proxyAddressError && < span className = 'text-lowercase' data - id = "errorMsgProxyAddress" style = { { fontSize : '.8em' } } > { proxyAddressError } < / span > } < / label >
< / div > : < CustomTooltip
< span className = 'text-capitalize' data - id = "lastDeployedERC1967Address" style = { { fontSize : '.8em' } } > { proxyAddress || proxyAddressError } < / span > tooltipText = "Enter previously deployed proxy address on the selected network"
} placement = "left"
tooltipId = "ERC1967AddressInputTooltip"
tooltipClasses = "text-nowrap"
>
< input
style = { { height : 32 } }
className = "form-control udapp_input"
data - id = "ERC1967AddressInput"
placeholder = "proxy address"
onChange = { handleSetProxyAddress }
/ >
< / CustomTooltip >
< / div >
: (
< span
className = "text-capitalize"
data - id = "lastDeployedERC1967Address"
style = { { fontSize : ".8em" } }
>
{ proxyAddress || "No proxy address available" }
< / span >
) }
< / div > < / div >
< / div > < / div >
< / > < / >
Joseph Izang
2 years ago