mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

fix tooltip so it originates from button and not text

Browse Source
pull/5370/head
Joseph Izang 1 year ago committed by Aniket
parent 6ff28da33f
commit 831cd5fe67
1 changed files with 235 additions and 125 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 312
      libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx

312
libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
Unescape View File

@ -1,27 +1,38 @@
// eslint-disable-next-line no-use-before-define
import React, { useEffect, useRef, useState } from 'react'
import { FormattedMessage, useIntl } from 'react-intl'
import React, {useEffect, useRef, useState} from 'react'
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, ProxyAddressToggle, ProxyDropdownMenu, shortenDate, shortenProxyAddress, unavailableProxyLayoutMsg, upgradeReportMsg } from '@remix-ui/helper'
import { Dropdown } from 'react-bootstrap'
import {ContractGUIProps} from '../types'
import {CopyToClipboard} from '@remix-ui/clipboard'
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
export function ContractGUI (props: ContractGUIProps) {
export function ContractGUI(props: ContractGUIProps) {
const [title, setTitle] = useState<string>('')
const [basicInput, setBasicInput] = useState<string>('')
const [toggleContainer, setToggleContainer] = useState<boolean>(false)
const [buttonOptions, setButtonOptions] = useState<{
title: string,
content: string,
classList: string,
title: string
content: string
classList: string
dataId: string
}>({ title: '', content: '', classList: '', dataId: '' })
}>({title: '', content: '', classList: '', dataId: ''})
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 [deployState, setDeployState] = useState<{
deploy: boolean
upgrade: boolean
}>({deploy: false, upgrade: false})
const [proxyAddress, setProxyAddress] = useState<string>('')
const [proxyAddressError, setProxyAddressError] = useState<string>('')
const [showDropdown, setShowDropdown] = useState<boolean>(false)
@ -32,8 +43,18 @@ export function ContractGUI (props: ContractGUIProps) {
useEffect(() => {
if (props.deployOption && Array.isArray(props.deployOption)) {
if (props.deployOption[0] && props.deployOption[0].title === 'Deploy with Proxy' && props.deployOption[0].active) handleDeployProxySelect(true)
else if (props.deployOption[1] && props.deployOption[1].title === 'Upgrade with Proxy' && props.deployOption[1].active) handleUpgradeImpSelect(true)
if (
props.deployOption[0] &&
props.deployOption[0].title === 'Deploy with Proxy' &&
props.deployOption[0].active
)
handleDeployProxySelect(true)
else if (
props.deployOption[1] &&
props.deployOption[1].title === 'Upgrade with Proxy' &&
props.deployOption[1].active
)
handleUpgradeImpSelect(true)
}
}, [props.deployOption])
@ -48,7 +69,9 @@ export function ContractGUI (props: ContractGUIProps) {
setBasicInput('')
// we have the reset the fields before reseting the previous references.
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 = []
}, [props.title, props.funcABI])
@ -61,7 +84,10 @@ export function ContractGUI (props: ContractGUIProps) {
classList: 'btn-info',
dataId: title + ' - call'
})
} else if (props.funcABI.stateMutability === 'payable' || props.funcABI.payable) {
} else if (
props.funcABI.stateMutability === 'payable' ||
props.funcABI.payable
) {
// // transact. stateMutability = payable
setButtonOptions({
title: title + ' - transact (payable)',
@ -91,7 +117,8 @@ export function ContractGUI (props: ContractGUIProps) {
const encodeObj = txFormat.encodeData(
props.funcABI,
multiJSON,
props.funcABI.type === 'constructor' ? props.evmBC : null)
props.funcABI.type === 'constructor' ? props.evmBC : null
)
if (encodeObj.error) {
console.error(encodeObj.error)
@ -138,7 +165,10 @@ export function ContractGUI (props: ContractGUIProps) {
valArrayTest.push(elVal)
elVal = elVal.replace(/(^|,\s+|,)(\d+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted number by quoted number
elVal = elVal.replace(/(^|,\s+|,)(0[xX][0-9a-fA-F]+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted hex string by quoted hex string
elVal = elVal.replace(
/(^|,\s+|,)(0[xX][0-9a-fA-F]+)(\s+,|,|$)/g,
'$1"$2"$3'
) // replace non quoted hex string by quoted hex string
if (elVal) {
try {
JSON.parse(elVal)
@ -161,7 +191,8 @@ export function ContractGUI (props: ContractGUIProps) {
const inputString = basicInput
if (inputString) {
const inputJSON = remixLib.execution.txFormat.parseFunctionParams(inputString)
const inputJSON =
remixLib.execution.txFormat.parseFunctionParams(inputString)
const multiInputs = multiFields.current
for (let k = 0; k < multiInputs.length; k++) {
@ -175,26 +206,61 @@ export function ContractGUI (props: ContractGUIProps) {
const handleActionClick = async () => {
if (deployState.deploy) {
const proxyInitializeString = getMultiValsString(initializeFields.current)
props.clickCallBack(props.initializerOptions.inputs.inputs, proxyInitializeString, ['Deploy with Proxy'])
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)
const isValidProxyAddress = await props.isValidProxyAddress(
proxyAddress
)
if (isValidProxyAddress) {
setProxyAddressError('')
const upgradeReport: any = await props.isValidProxyUpgrade(proxyAddress)
const upgradeReport: any = await props.isValidProxyUpgrade(
proxyAddress
)
if (upgradeReport.ok) {
!proxyAddressError && props.clickCallBack(props.funcABI.inputs, proxyAddress, ['Upgrade with Proxy'])
!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')
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')
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 {
@ -229,7 +295,7 @@ export function ContractGUI (props: ContractGUIProps) {
const handleDeployProxySelect = (value: boolean) => {
if (value) setToggleUpgradeImp(false)
setToggleDeployProxy(value)
setDeployState({ upgrade: false, deploy: value })
setDeployState({upgrade: false, deploy: value})
}
const handleToggleUpgradeImp = () => {
@ -241,7 +307,7 @@ export function ContractGUI (props: ContractGUIProps) {
if (value) {
setToggleDeployProxy(false)
}
setDeployState({ deploy: false, upgrade: value })
setDeployState({deploy: false, upgrade: value})
}
const switchProxyAddress = (address: string) => {
@ -262,50 +328,58 @@ export function ContractGUI (props: ContractGUIProps) {
<div
className={`udapp_contractProperty ${
(props.funcABI.inputs && props.funcABI.inputs.length > 0) ||
props.funcABI.type === "fallback" ||
props.funcABI.type === "receive"
? "udapp_hasArgs"
: ""
props.funcABI.type === 'fallback' ||
props.funcABI.type === 'receive'
? 'udapp_hasArgs'
: ''
}`}
>
<div
className="udapp_contractActionsContainerSingle pt-2"
style={{ display: toggleContainer ? "none" : "flex" }}
style={{display: toggleContainer ? 'none' : 'flex'}}
>
<div
className='d-flex'
onClick={handleActionClick}
<CustomTooltip
delay={0}
placement={'right'}
tooltipClasses="text-wrap"
tooltipId="remixUdappInstanceButtonTooltip"
tooltipText={
toggleUpgradeImp && !proxyAddress
? 'Proxy address cannot be empty'
: props.inputs !== '' && basicInput === ''
? 'Input required'
: buttonOptions.title
}
>
<div className="d-flex" onClick={handleActionClick}>
<button
className={`udapp_instanceButton text-nowrap overflow-hidden text-truncate ${props.widthClass} btn btn-sm ${buttonOptions.classList}`}
data-id={buttonOptions.dataId}
data-title={buttonOptions.title}
disabled={(toggleUpgradeImp && !proxyAddress) || props.disabled || (props.inputs !=='' && basicInput === '')}
>
<CustomTooltip
delay={0}
placement={"right"}
tooltipClasses="text-wrap"
tooltipId="remixUdappInstanceButtonTooltip"
tooltipText={toggleUpgradeImp && !proxyAddress ? 'Proxy address cannot be empty' : (props.inputs !=='' && basicInput === '') ? 'Input required' : buttonOptions.title}
disabled={
(toggleUpgradeImp && !proxyAddress) ||
props.disabled ||
(props.inputs !== '' && basicInput === '')
}
style={{pointerEvents: 'none'}}
>
<div>{title}</div>
</CustomTooltip>
{title}
</button>
</div>
</CustomTooltip>
<input
className="form-control"
data-id={
props.funcABI.type === "fallback" ||
props.funcABI.type === "receive"
props.funcABI.type === 'fallback' ||
props.funcABI.type === 'receive'
? `'(${props.funcABI.type}')`
: "multiParamManagerBasicInputField"
: 'multiParamManagerBasicInputField'
}
placeholder={props.inputs}
onChange={handleBasicInput}
data-title={
props.funcABI.type === "fallback" ||
props.funcABI.type === "receive"
props.funcABI.type === 'fallback' ||
props.funcABI.type === 'receive'
? `'(${props.funcABI.type}')`
: props.inputs
}
@ -314,11 +388,11 @@ export function ContractGUI (props: ContractGUIProps) {
height: '2rem',
visibility: !(
(props.funcABI.inputs && props.funcABI.inputs.length > 0) ||
props.funcABI.type === "fallback" ||
props.funcABI.type === "receive"
props.funcABI.type === 'fallback' ||
props.funcABI.type === 'receive'
)
? "hidden"
: "visible",
? 'hidden'
: 'visible'
}}
/>
<i
@ -328,14 +402,14 @@ export function ContractGUI (props: ContractGUIProps) {
visibility: !(
props.funcABI.inputs && props.funcABI.inputs.length > 0
)
? "hidden"
: "visible",
? 'hidden'
: 'visible'
}}
></i>
</div>
<div
className="udapp_contractActionsContainerMulti"
style={{ display: toggleContainer ? "flex" : "none" }}
style={{display: toggleContainer ? 'flex' : 'none'}}
>
<div className="udapp_contractActionsContainerMultiInner text-dark">
<div onClick={switchMethodViewOff} className="udapp_multiHeader">
@ -357,7 +431,7 @@ export function ContractGUI (props: ContractGUIProps) {
>
<input
ref={(el) => {
multiFields.current[index] = el;
multiFields.current[index] = el
}}
className="form-control"
placeholder={inp.type}
@ -366,14 +440,14 @@ export function ContractGUI (props: ContractGUIProps) {
/>
</CustomTooltip>
</div>
);
)
})}
</div>
<div className="d-flex udapp_group udapp_multiArg">
<CopyToClipboard
tip={intl.formatMessage({ id: 'udapp.copyCalldata' })}
tip={intl.formatMessage({id: 'udapp.copyCalldata'})}
icon="fa-clipboard"
direction={"bottom"}
direction={'bottom'}
getContent={getEncodedCall}
>
<button className="btn remixui_copyButton">
@ -386,9 +460,9 @@ export function ContractGUI (props: ContractGUIProps) {
</button>
</CopyToClipboard>
<CopyToClipboard
tip={intl.formatMessage({ id: 'udapp.copyParameters' })}
tip={intl.formatMessage({id: 'udapp.copyParameters'})}
icon="fa-clipboard"
direction={"bottom"}
direction={'bottom'}
getContent={getEncodedParams}
>
<button className="btn remixui_copyButton">
@ -397,23 +471,25 @@ export function ContractGUI (props: ContractGUIProps) {
className="m-0 remixui_copyIcon far fa-copy"
aria-hidden="true"
></i>
<label htmlFor="copyParameters"><FormattedMessage id='udapp.parameters' /></label>
<label htmlFor="copyParameters">
<FormattedMessage id="udapp.parameters" />
</label>
</button>
</CopyToClipboard>
<CustomTooltip
placement={"right"}
placement={'right'}
tooltipClasses="text-nowrap"
tooltipId="remixUdappInstanceButtonTooltip"
tooltipText={buttonOptions.title}
>
<div
onClick={handleExpandMultiClick}
>
<div onClick={handleExpandMultiClick}>
<button
type="button"
data-id={buttonOptions.dataId}
className={`udapp_instanceButton btn ${buttonOptions.classList}`}
disabled={props.disabled || (props.inputs !=='' && basicInput === '')}
disabled={
props.disabled || (props.inputs !== '' && basicInput === '')
}
>
{buttonOptions.content}
</button>
@ -439,14 +515,19 @@ export function ContractGUI (props: ContractGUIProps) {
data-id="contractGUIDeployWithProxyLabel"
className="m-0 form-check-label w-100 custom-control-label udapp_checkboxAlign"
>
<FormattedMessage id='udapp.deployWithProxy' />
<FormattedMessage id="udapp.deployWithProxy" />
</label>
</div>
<div>
{props.initializerOptions &&
props.initializerOptions.initializeInputs ? (
<span onClick={handleToggleDeployProxy}>
<i className={!toggleDeployProxy ? "fas fa-angle-right pt-2" : "fas fa-angle-down"}
<i
className={
!toggleDeployProxy
? 'fas fa-angle-right pt-2'
: 'fas fa-angle-down'
}
aria-hidden="true"
></i>
</span>
@ -457,7 +538,7 @@ export function ContractGUI (props: ContractGUIProps) {
props.initializerOptions.initializeInputs ? (
<div
className={`pl-4 flex-column ${
toggleDeployProxy ? "d-flex" : "d-none"
toggleDeployProxy ? 'd-flex' : 'd-none'
}`}
>
<div className={`flex-column 'd-flex'}`}>
@ -468,19 +549,19 @@ export function ContractGUI (props: ContractGUIProps) {
className="mt-2 text-left d-block"
htmlFor={inp.name}
>
{" "}
{inp.name}:{" "}
{' '}
{inp.name}:{' '}
</label>
<input
ref={(el) => {
initializeFields.current[index] = el;
initializeFields.current[index] = el
}}
style={{ height: 32 }}
style={{height: 32}}
className="form-control udapp_input"
placeholder={inp.type}
/>
</div>
);
)
})}
</div>
</div>
@ -500,15 +581,15 @@ export function ContractGUI (props: ContractGUIProps) {
data-id="contractGUIUpgradeImplementationLabel"
className="m-0 form-check-label custom-control-label udapp_checkboxAlign"
>
<FormattedMessage id='udapp.upgradeWithProxy' />
<FormattedMessage id="udapp.upgradeWithProxy" />
</label>
</div>
<span onClick={handleToggleUpgradeImp}>
<i
className={
!toggleUpgradeImp
? "fas fa-angle-right pt-2"
: "fas fa-angle-down"
? 'fas fa-angle-right pt-2'
: 'fas fa-angle-down'
}
aria-hidden="true"
></i>
@ -516,19 +597,28 @@ export function ContractGUI (props: ContractGUIProps) {
</div>
<div
className={`pl-4 flex-column ${
toggleUpgradeImp ? "d-flex" : "d-none"
toggleUpgradeImp ? 'd-flex' : 'd-none'
}`}
>
<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" />
<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) => (
{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
placement={"right"}
placement={'right'}
tooltipClasses="text-nowrap"
tooltipId={`proxyAddressTooltip${index}`}
tooltipText={'Deployed ' + shortenDate(deployment.date)}
@ -536,30 +626,50 @@ export function ContractGUI (props: ContractGUIProps) {
>
<Dropdown.Item
key={index}
onClick={() => { switchProxyAddress(deployment.address) }}
onClick={() => {
switchProxyAddress(deployment.address)
}}
data-id={`proxyAddress${index}`}
>
<span>
{ proxyAddress === deployment.address ?
<span>&#10003; { deployment.contractName + ' ' + shortenProxyAddress(deployment.address) } </span>
: <span className="pl-3">{ deployment.contractName + ' ' + shortenProxyAddress(deployment.address) }</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>
<div className='d-flex'>
<div className="d-flex">
<div className="mb-2">
{ proxyAddressError && <span className='text-lowercase text-danger' data-id="errorMsgProxyAddress" style={{ fontSize: '.8em' }}>{ proxyAddressError }</span> }
{proxyAddressError && (
<span
className="text-lowercase text-danger"
data-id="errorMsgProxyAddress"
style={{fontSize: '.8em'}}
>
{proxyAddressError}
</span>
)}
</div>
</div>
</div>
</>
) : null}
</div>
);
)
}

Write Preview
Loading…
Cancel
Save