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