@ -3,6 +3,7 @@ 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 { OverlayTrigger , Tooltip } from 'react-bootstrap'
const txFormat = remixLib . execution . txFormat const txFormat = remixLib . execution . txFormat
const txHelper = remixLib . execution . txHelper const txHelper = remixLib . execution . txHelper
@ -233,66 +234,187 @@ export function ContractGUI (props: ContractGUIProps) {
} }
return ( return (
< div className = { ` udapp_contractProperty ${ ( props . funcABI . inputs && props . funcABI . inputs . length > 0 ) || ( props . funcABI . type === 'fallback' ) || ( props . funcABI . type === 'receive' ) ? 'udapp_hasArgs' : '' } ` } > < div
< div className = "udapp_contractActionsContainerSingle pt-2" style = { { display : toggleContainer ? 'none' : 'flex' } } > className = { ` udapp_contractProperty ${
< 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 && 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" } }
>
< OverlayTrigger
placement = { "right-start" }
overlay = {
< Tooltip
className = "text-wrap"
id = "remixUdappInstanceButtonTooltip"
>
< span > { buttonOptions . title } < / span >
< / Tooltip >
}
>
< button
onClick = { handleActionClick }
className = { ` udapp_instanceButton ${ props . widthClass } btn btn-sm ${ buttonOptions . classList } ` }
data - id = { buttonOptions . dataId }
data - title = { buttonOptions . title }
>
{ title }
< / button >
< / OverlayTrigger >
< OverlayTrigger
placement = { "right" }
overlay = {
< Tooltip className = "text-nowrap" id = "remixContractGuiTooltip" >
< span >
{ props . funcABI . type === "fallback" ||
props . funcABI . type === "receive"
? ` '( ${ props . funcABI . type } ') `
: props . inputs }
< / span >
< / Tooltip >
}
>
< input < input
className = "form-control" className = "form-control"
data - id = { props . funcABI . type === 'fallback' || props . funcABI . type === 'receive' ? ` '( ${ props . funcABI . type } ') ` : 'multiParamManagerBasicInputField' } data - id = {
props . funcABI . type === "fallback" ||
props . funcABI . type === "receive"
? ` '( ${ props . funcABI . type } ') `
: "multiParamManagerBasicInputField"
}
placeholder = { props . inputs } placeholder = { props . inputs }
title = { props . funcABI . type === 'fallback' || props . funcABI . type === 'receive' ? ` '( ${ props . funcABI . type } ') ` : props . inputs }
onChange = { handleBasicInput } onChange = { handleBasicInput }
data - title = {
props . funcABI . type === "fallback" ||
props . funcABI . type === "receive"
? ` '( ${ props . funcABI . type } ') `
: props . inputs
}
ref = { basicInputRef } ref = { basicInputRef }
style = { { visibility : ! ( ( props . funcABI . inputs && props . funcABI . inputs . length > 0 ) || ( props . funcABI . type === 'fallback' ) || ( props . funcABI . type === 'receive' ) ) ? 'hidden' : 'visible' } } / > style = { {
visibility : ! (
( props . funcABI . inputs && props . funcABI . inputs . length > 0 ) ||
props . funcABI . type === "fallback" ||
props . funcABI . type === "receive"
)
? "hidden"
: "visible" ,
} }
/ >
< / OverlayTrigger >
< i < i
className = "fas fa-angle-down udapp_methCaret" className = "fas fa-angle-down udapp_methCaret"
onClick = { switchMethodViewOn } onClick = { switchMethodViewOn }
title = { title } title = { title }
style = { { visibility : ! ( props . funcABI . inputs && props . funcABI . inputs . length > 0 ) ? 'hidden' : 'visible' } } > < / i > 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
className = "udapp_contractActionsContainerMulti"
style = { { display : toggleContainer ? "flex" : "none" } }
>
< div className = "udapp_contractActionsContainerMultiInner text-dark" > < div className = "udapp_contractActionsContainerMultiInner text-dark" >
< div onClick = { switchMethodViewOff } className = "udapp_multiHeader" > < div onClick = { switchMethodViewOff } className = "udapp_multiHeader" >
< div className = "udapp_multiTitle run-instance-multi-title" > { title } < / div > < div className = "udapp_multiTitle run-instance-multi-title" >
< i className = 'fas fa-angle-up udapp_methCaret' > < / i > { title }
< / div >
< i className = "fas fa-angle-up udapp_methCaret" > < / i >
< / div > < / div >
< div > < div >
{ props . funcABI . inputs . map ( ( inp , index ) = > { { props . funcABI . inputs . map ( ( inp , index ) = > {
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 >
< input ref = { el = > { multiFields . current [ index ] = el } } className = "form-control" placeholder = { inp . type } title = { inp . name } data - id = { ` multiParamManagerInput ${ inp . name } ` } / > < OverlayTrigger
< / div > ) placement = "left-end"
overlay = {
< Tooltip id = "udappContractActionsTooltip" className = "text-nowrap" >
< span > { inp . name } < / span >
< / Tooltip >
}
>
< input
ref = { ( el ) = > {
multiFields . current [ index ] = el ;
} }
className = "form-control"
placeholder = { inp . type }
data - id = { ` multiParamManagerInput ${ inp . name } ` }
/ >
< / OverlayTrigger >
< / div >
) ;
} ) } } ) }
< / div > < / div >
< div className = "d-flex udapp_group udapp_multiArg" > < div className = "d-flex udapp_group udapp_multiArg" >
< CopyToClipboard tip = 'Copy calldata to clipboard' icon = 'fa-clipboard' direction = { 'bottom' } getContent = { getEncodedCall } > < CopyToClipboard
tip = "Copy calldata to clipboard"
icon = "fa-clipboard"
direction = { "bottom" }
getContent = { getEncodedCall }
>
< button className = "btn remixui_copyButton" > < button className = "btn remixui_copyButton" >
< i id = "copyCalldata" className = "m-0 remixui_copyIcon far fa-copy" aria - hidden = "true" > < / i > < i
id = "copyCalldata"
className = "m-0 remixui_copyIcon far fa-copy"
aria - hidden = "true"
> < / i >
< label htmlFor = "copyCalldata" > Calldata < / label > < label htmlFor = "copyCalldata" > Calldata < / label >
< / button > < / button >
< / CopyToClipboard > < / CopyToClipboard >
< CopyToClipboard tip = 'Copy encoded input parameters to clipboard' icon = 'fa-clipboard' direction = { 'bottom' } getContent = { getEncodedParams } > < CopyToClipboard
tip = "Copy encoded input parameters to clipboard"
icon = "fa-clipboard"
direction = { "bottom" }
getContent = { getEncodedParams }
>
< button className = "btn remixui_copyButton" > < button className = "btn remixui_copyButton" >
< i id = "copyParameters" className = "m-0 remixui_copyIcon far fa-copy" aria - hidden = "true" > < / i > < i
id = "copyParameters"
className = "m-0 remixui_copyIcon far fa-copy"
aria - hidden = "true"
> < / i >
< label htmlFor = "copyParameters" > Parameters < / label > < label htmlFor = "copyParameters" > Parameters < / label >
< / button > < / button >
< / CopyToClipboard > < / CopyToClipboard >
< OverlayTrigger
placement = { "right" }
overlay = {
< Tooltip
className = "text-nowrap"
id = "remixUdappInstanceButtonTooltip"
>
< span > { buttonOptions . title } < / span >
< / Tooltip >
}
>
< button < button
type = "button" type = "button"
onClick = { handleExpandMultiClick } onClick = { handleExpandMultiClick }
title = { buttonOptions . title }
data - id = { buttonOptions . dataId } data - id = { buttonOptions . dataId }
className = { ` udapp_instanceButton ${ buttonOptions . classList } ` } className = { ` udapp_instanceButton ${ buttonOptions . classList } ` }
> >
{ buttonOptions . content } { buttonOptions . content }
< / button > < / button >
< / OverlayTrigger >
< / div > < / div >
< / div > < / div >
< / div > < / div >
{ props . deployOption && ( props . deployOption || [ ] ) . length > 0 ? { props . deployOption && ( props . deployOption || [ ] ) . length > 0 ? (
< > < >
< div className = 'd-flex justify-content-between' > < div className = "d-flex justify-content-between" >
< div className = "d-flex py-1 align-items-center custom-control custom-checkbox" > < div className = "d-flex py-1 align-items-center custom-control custom-checkbox" >
< input < input
id = "deployWithProxy" id = "deployWithProxy"
@ -312,30 +434,55 @@ export function ContractGUI (props: ContractGUIProps) {
< / label > < / label >
< / div > < / div >
< div > < div >
{ { props . initializerOptions &&
props . initializerOptions && props . initializerOptions . initializeInputs ?
props . initializerOptions . initializeInputs ? (
< span onClick = { handleToggleDeployProxy } > < span onClick = { handleToggleDeployProxy } >
< i className = { ! toggleDeployProxy ? 'fas fa-angle-right pt-2' : 'fas fa-angle-down' } aria - hidden = "true" > < / i > < i
< / span > : null className = {
! toggleDeployProxy
? "fas fa-angle-right pt-2"
: "fas fa-angle-down"
} }
aria - hidden = "true"
> < / i >
< / span >
) : null }
< / div > < / div >
< / div > < / div >
{ { props . initializerOptions &&
props . initializerOptions && props . initializerOptions . initializeInputs ? props . initializerOptions . initializeInputs ? (
< div className = { ` pl-4 flex-column ${ toggleDeployProxy ? "d-flex" : "d-none" } ` } > < div
< div className = { ` flex-column 'd-flex'} ` } > { className = { ` pl-4 flex-column ${
props . initializerOptions . inputs . inputs . map ( ( inp , index ) = > { toggleDeployProxy ? "d-flex" : "d-none"
} ` }
>
< div className = { ` flex-column 'd-flex'} ` } >
{ props . initializerOptions . inputs . inputs . map ( ( inp , index ) = > {
return ( return (
< div className = "mb-2" key = { index } > < div className = "mb-2" key = { index } >
< label className = 'mt-2 text-left d-block' htmlFor = { inp . name } > { inp . name } : < / label > < label
< input ref = { el = > { initializeFields . current [ index ] = el } } style = { { height : 32 } } className = "form-control udapp_input" placeholder = { inp . type } title = { inp . name } / > 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 > < / div >
< / div > : null < / div >
} ) : null }
< div className = 'd-flex justify-content-between' > < div className = "d-flex justify-content-between" >
< div className = "d-flex py-1 align-items-center custom-control custom-checkbox" > < div className = "d-flex py-1 align-items-center custom-control custom-checkbox" >
< input < input
id = "upgradeImplementation" id = "upgradeImplementation"
@ -355,10 +502,21 @@ export function ContractGUI (props: ContractGUIProps) {
< / label > < / label >
< / div > < / div >
< span onClick = { handleToggleUpgradeImp } > < span onClick = { handleToggleUpgradeImp } >
< i className = { ! toggleUpgradeImp ? 'fas fa-angle-right pt-2' : 'fas fa-angle-down' } aria - hidden = "true" > < / i > < i
className = {
! toggleUpgradeImp
? "fas fa-angle-right pt-2"
: "fas fa-angle-down"
}
aria - hidden = "true"
> < / i >
< / span > < / span >
< / div > < / div >
< div className = { ` pl-4 flex-column ${ toggleUpgradeImp ? "d-flex" : "d-none" } ` } > < div
className = { ` pl-4 flex-column ${
toggleUpgradeImp ? "d-flex" : "d-none"
} ` }
>
< div className = { ` flex-column 'd-flex'} ` } > < div className = { ` flex-column 'd-flex'} ` } >
< div className = "d-flex py-1 align-items-center custom-control custom-checkbox" > < div className = "d-flex py-1 align-items-center custom-control custom-checkbox" >
< input < input
@ -379,18 +537,33 @@ export function ContractGUI (props: ContractGUIProps) {
Use last deployed ERC1967 contract Use last deployed ERC1967 contract
< / label > < / label >
< / 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 } / > Proxy Address : { " " }
< / div > : < / label >
< span className = 'text-capitalize' data - id = "lastDeployedERC1967Address" style = { { fontSize : '.8em' } } > { proxyAddress || 'No proxy address available' } < / span > < 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 }
/ >
< / div > < / div >
) : (
< span
className = "text-capitalize"
data - id = "lastDeployedERC1967Address"
style = { { fontSize : ".8em" } }
>
{ proxyAddress || "No proxy address available" }
< / span >
) }
< / div > < / div >
< / > : null
}
< / div > < / div >
) < / >
) : null }
< / div >
) ;
} }
drafish
2 years ago