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

cursor pointer of enabled AtAddress btn

Browse Source
pull/5370/head
lianahus 1 year ago committed by Aniket
parent f7c5299de0
commit 31b477ee21
1 changed files with 48 additions and 43 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. 91
      libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx

91
libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
Unescape View File

@ -1,12 +1,12 @@
// eslint-disable-next-line no-use-before-define // eslint-disable-next-line no-use-before-define
import React, {useEffect, useRef, useState} from 'react' import React, { useEffect, useRef, useState } from 'react'
import {FormattedMessage, useIntl} from 'react-intl' import { FormattedMessage, useIntl } from 'react-intl'
import {ContractDropdownProps, DeployMode} from '../types' import { ContractDropdownProps, DeployMode } from '../types'
import {ContractData, FuncABI, OverSizeLimit} from '@remix-project/core-plugin' import { ContractData, FuncABI, OverSizeLimit } from '@remix-project/core-plugin'
import * as ethJSUtil from '@ethereumjs/util' import * as ethJSUtil from '@ethereumjs/util'
import {ContractGUI} from './contractGUI' import { ContractGUI } from './contractGUI'
import {CustomTooltip, deployWithProxyMsg, upgradeWithProxyMsg} from '@remix-ui/helper' import { CustomTooltip, deployWithProxyMsg, upgradeWithProxyMsg } from '@remix-ui/helper'
import {title} from 'process' import { title } from 'process'
const _paq = (window._paq = window._paq || []) const _paq = (window._paq = window._paq || [])
export function ContractDropdownUI(props: ContractDropdownProps) { export function ContractDropdownUI(props: ContractDropdownProps) {
@ -16,14 +16,14 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
content: string content: string
}>({ }>({
display: '', display: '',
content: '' content: '',
}) })
const [atAddressOptions, setAtAddressOptions] = useState<{ const [atAddressOptions, setAtAddressOptions] = useState<{
title: string | JSX.Element title: string | JSX.Element
disabled: boolean disabled: boolean
}>({ }>({
title: <FormattedMessage id="udapp.atAddressOptionsTitle1" />, title: <FormattedMessage id="udapp.atAddressOptionsTitle1" />,
disabled: true disabled: true,
}) })
const [loadedAddress, setLoadedAddress] = useState<string>('') const [loadedAddress, setLoadedAddress] = useState<string>('')
const [contractOptions, setContractOptions] = useState<{ const [contractOptions, setContractOptions] = useState<{
@ -31,7 +31,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
disabled: boolean disabled: boolean
}>({ }>({
title: <FormattedMessage id="udapp.contractOptionsTitle1" />, title: <FormattedMessage id="udapp.contractOptionsTitle1" />,
disabled: true disabled: true,
}) })
const [loadedContractData, setLoadedContractData] = useState<ContractData>(null) const [loadedContractData, setLoadedContractData] = useState<ContractData>(null)
const [constructorInterface, setConstructorInterface] = useState<FuncABI>(null) const [constructorInterface, setConstructorInterface] = useState<FuncABI>(null)
@ -40,7 +40,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
const [compilerName, setCompilerName] = useState<string>('') const [compilerName, setCompilerName] = useState<string>('')
const contractsRef = useRef<HTMLSelectElement>(null) const contractsRef = useRef<HTMLSelectElement>(null)
const atAddressValue = useRef<HTMLInputElement>(null) const atAddressValue = useRef<HTMLInputElement>(null)
const {contractList, loadType, currentFile, compilationSource, currentContract, compilationCount, deployOptions} = props.contracts const { contractList, loadType, currentFile, compilationSource, currentContract, compilationCount, deployOptions } = props.contracts
useEffect(() => { useEffect(() => {
enableContractNames(Object.keys(props.contracts.contractList).length > 0) enableContractNames(Object.keys(props.contracts.contractList).length > 0)
@ -50,7 +50,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
enableAtAddress(false) enableAtAddress(false)
setAbiLabel({ setAbiLabel({
display: 'none', display: 'none',
content: 'ABI file selected' content: 'ABI file selected',
}) })
}, []) }, [])
@ -71,19 +71,19 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
if (/.(.abi)$/.exec(currentFile) && '' !== atAddressValue.current.value) { if (/.(.abi)$/.exec(currentFile) && '' !== atAddressValue.current.value) {
setAbiLabel({ setAbiLabel({
display: 'block', display: 'block',
content: currentFile content: currentFile,
}) })
enableAtAddress(true) enableAtAddress(true)
} else if (isContractFile(currentFile)) { } else if (isContractFile(currentFile)) {
setAbiLabel({ setAbiLabel({
display: 'none', display: 'none',
content: '' content: '',
}) })
if (!currentContract) enableAtAddress(false) if (!currentContract) enableAtAddress(false)
} else { } else {
setAbiLabel({ setAbiLabel({
display: 'none', display: 'none',
content: '' content: '',
}) })
if (!currentContract) enableAtAddress(false) if (!currentContract) enableAtAddress(false)
} }
@ -148,9 +148,9 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
disabled: false, disabled: false,
title: ( title: (
<span className="text-start"> <span className="text-start">
<FormattedMessage id="udapp.atAddressOptionsTitle2" values={{br: <br />}} /> <FormattedMessage id="udapp.atAddressOptionsTitle2" values={{ br: <br /> }} />
</span> </span>
) ),
}) })
} else { } else {
setAtAddressOptions({ setAtAddressOptions({
@ -159,9 +159,9 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
<FormattedMessage id="udapp.atAddressOptionsTitle3" /> <FormattedMessage id="udapp.atAddressOptionsTitle3" />
) : ( ) : (
<span className="text-start"> <span className="text-start">
<FormattedMessage id="udapp.atAddressOptionsTitle4" values={{br: <br />}} /> <FormattedMessage id="udapp.atAddressOptionsTitle4" values={{ br: <br /> }} />
</span> </span>
) ),
}) })
} }
} }
@ -170,7 +170,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
if (enable) { if (enable) {
setContractOptions({ setContractOptions({
disabled: false, disabled: false,
title: <FormattedMessage id="udapp.contractOptionsTitle2" /> title: <FormattedMessage id="udapp.contractOptionsTitle2" />,
}) })
} else { } else {
setContractOptions({ setContractOptions({
@ -180,9 +180,9 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
<FormattedMessage id="udapp.contractOptionsTitle3" /> <FormattedMessage id="udapp.contractOptionsTitle3" />
) : ( ) : (
<span className="text-start"> <span className="text-start">
<FormattedMessage id="udapp.contractOptionsTitle4" values={{br: <br />}} /> <FormattedMessage id="udapp.contractOptionsTitle4" values={{ br: <br /> }} />
</span> </span>
) ),
}) })
} }
} }
@ -193,7 +193,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
const createInstance = (selectedContract, args, deployMode?: DeployMode[]) => { const createInstance = (selectedContract, args, deployMode?: DeployMode[]) => {
if (selectedContract.bytecodeObject.length === 0) { if (selectedContract.bytecodeObject.length === 0) {
return props.modal(intl.formatMessage({id: 'udapp.alert'}), intl.formatMessage({id: 'udapp.thisContractMayBeAbstract'}), intl.formatMessage({id: 'udapp.ok'}), () => {}) return props.modal(intl.formatMessage({ id: 'udapp.alert' }), intl.formatMessage({ id: 'udapp.thisContractMayBeAbstract' }), intl.formatMessage({ id: 'udapp.ok' }), () => {})
} }
if (selectedContract.name !== currentContract && selectedContract.name === 'ERC1967Proxy') selectedContract.name = currentContract if (selectedContract.name !== currentContract && selectedContract.name === 'ERC1967Proxy') selectedContract.name = currentContract
const isProxyDeployment = (deployMode || []).find((mode) => mode === 'Deploy with Proxy') const isProxyDeployment = (deployMode || []).find((mode) => mode === 'Deploy with Proxy')
@ -203,7 +203,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
props.modal( props.modal(
'Deploy Implementation & Proxy (ERC1967)', 'Deploy Implementation & Proxy (ERC1967)',
deployWithProxyMsg(), deployWithProxyMsg(),
intl.formatMessage({id: 'udapp.proceed'}), intl.formatMessage({ id: 'udapp.proceed' }),
() => { () => {
props.createInstance( props.createInstance(
loadedContractData, loadedContractData,
@ -216,14 +216,14 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
deployMode deployMode
) )
}, },
intl.formatMessage({id: 'udapp.cancel'}), intl.formatMessage({ id: 'udapp.cancel' }),
() => {} () => {}
) )
} else if (isContractUpgrade) { } else if (isContractUpgrade) {
props.modal( props.modal(
'Deploy Implementation & Update Proxy', 'Deploy Implementation & Update Proxy',
upgradeWithProxyMsg(), upgradeWithProxyMsg(),
intl.formatMessage({id: 'udapp.proceed'}), intl.formatMessage({ id: 'udapp.proceed' }),
() => { () => {
props.createInstance( props.createInstance(
loadedContractData, loadedContractData,
@ -236,7 +236,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
deployMode deployMode
) )
}, },
intl.formatMessage({id: 'udapp.cancel'}), intl.formatMessage({ id: 'udapp.cancel' }),
() => {} () => {}
) )
} else { } else {
@ -289,7 +289,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
setCompilerName(contract.compilerName) setCompilerName(contract.compilerName)
setContractOptions({ setContractOptions({
disabled: false, disabled: false,
title: <FormattedMessage id="udapp.contractOptionsTitle2" /> title: <FormattedMessage id="udapp.contractOptionsTitle2" />,
}) })
} }
}) })
@ -297,7 +297,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
setCompilerName('') setCompilerName('')
setContractOptions({ setContractOptions({
title: <FormattedMessage id="udapp.contractOptionsTitle1" />, title: <FormattedMessage id="udapp.contractOptionsTitle1" />,
disabled: true disabled: true,
}) })
} }
} }
@ -323,7 +323,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
<a href="https://eips.ethereum.org/EIPS/eip-55" target="_blank" rel="noreferrer"> <a href="https://eips.ethereum.org/EIPS/eip-55" target="_blank" rel="noreferrer">
EIP-55 EIP-55
</a> </a>
) ),
}} }}
/> />
</span> </span>
@ -343,7 +343,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
<a href="https://eips.ethereum.org/EIPS/eip-170" target="_blank" rel="noreferrer"> <a href="https://eips.ethereum.org/EIPS/eip-170" target="_blank" rel="noreferrer">
eip-170 eip-170
</a> </a>
) ),
}} }}
/> />
</div> </div>
@ -358,7 +358,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
<a href="https://eips.ethereum.org/EIPS/eip-3860" target="_blank" rel="noreferrer"> <a href="https://eips.ethereum.org/EIPS/eip-3860" target="_blank" rel="noreferrer">
eip-3860 eip-3860
</a> </a>
) ),
}} }}
/> />
</div> </div>
@ -383,7 +383,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
<FormattedMessage <FormattedMessage
id="udapp.compiledBy" id="udapp.compiledBy"
values={{ values={{
compilerName: <span className="text-capitalize">{compilerName}</span> compilerName: <span className="text-capitalize">{compilerName}</span>,
}} }}
/> />
</label> </label>
@ -396,7 +396,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
tooltipId="info-sync-compiled-contract" tooltipId="info-sync-compiled-contract"
tooltipText={ tooltipText={
<span className="text-left"> <span className="text-left">
<FormattedMessage id="udapp.infoSyncCompiledContractTooltip" values={{br: <br />}} /> <FormattedMessage id="udapp.infoSyncCompiledContractTooltip" values={{ br: <br /> }} />
</span> </span>
} }
> >
@ -407,7 +407,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
_paq.push(['trackEvent', 'udapp', 'syncContracts', compilationSource ? compilationSource : 'compilationSourceNotYetSet']) _paq.push(['trackEvent', 'udapp', 'syncContracts', compilationSource ? compilationSource : 'compilationSourceNotYetSet'])
}} }}
> >
<i style={{cursor: 'pointer'}} className="fa fa-refresh mr-2 mt-2" aria-hidden="true"></i> <i style={{ cursor: 'pointer' }} className="fa fa-refresh mr-2 mt-2" aria-hidden="true"></i>
</button> </button>
</CustomTooltip> </CustomTooltip>
) : null} ) : null}
@ -423,7 +423,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
disabled={contractOptions.disabled} disabled={contractOptions.disabled}
style={{ style={{
display: loadType === 'abi' && !isContractFile(currentFile) ? 'none' : 'block', display: loadType === 'abi' && !isContractFile(currentFile) ? 'none' : 'block',
pointerEvents: contractOptions.disabled ? 'none' : 'auto' pointerEvents: contractOptions.disabled ? 'none' : 'auto',
}} }}
> >
<option value="" disabled hidden> <option value="" disabled hidden>
@ -438,7 +438,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
})} })}
</select> </select>
</CustomTooltip> </CustomTooltip>
<span className="py-1" style={{display: abiLabel.display}}> <span className="py-1" style={{ display: abiLabel.display }}>
{abiLabel.content} {abiLabel.content}
</span> </span>
</div> </div>
@ -449,7 +449,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
tooltipId="info-evm-version-warn" tooltipId="info-evm-version-warn"
tooltipText={ tooltipText={
<span className="text-left"> <span className="text-left">
<FormattedMessage id="udapp.warningEvmVersion" values={{evmVersion}} /> <FormattedMessage id="udapp.warningEvmVersion" values={{ evmVersion }} />
</span> </span>
} }
> >
@ -461,7 +461,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
{((contractList[currentFile] && contractList[currentFile].filter((contract) => contract)) || []).length > 0 && loadedContractData && ( {((contractList[currentFile] && contractList[currentFile].filter((contract) => contract)) || []).length > 0 && loadedContractData && (
<div> <div>
<ContractGUI <ContractGUI
title={intl.formatMessage({id: 'udapp.deploy'})} title={intl.formatMessage({ id: 'udapp.deploy' })}
isDeploy={true} isDeploy={true}
deployOption={deployOptions[currentFile] && deployOptions[currentFile][currentContract] ? deployOptions[currentFile][currentContract].options : null} deployOption={deployOptions[currentFile] && deployOptions[currentFile][currentContract] ? deployOptions[currentFile][currentContract].options : null}
initializerOptions={ initializerOptions={
@ -494,7 +494,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
tooltipId="remixIpfsUdappTooltip" tooltipId="remixIpfsUdappTooltip"
tooltipText={ tooltipText={
<span className="text-start"> <span className="text-start">
<FormattedMessage id="udapp.remixIpfsUdappTooltip" values={{br: <br />}} /> <FormattedMessage id="udapp.remixIpfsUdappTooltip" values={{ br: <br /> }} />
</span> </span>
} }
> >
@ -509,12 +509,17 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
<div className="pt-2 d-flex flex-column sudapp_button udapp_atAddressSect"> <div className="pt-2 d-flex flex-column sudapp_button udapp_atAddressSect">
<div className="d-flex flex-row"> <div className="d-flex flex-row">
<CustomTooltip placement={'top-end'} tooltipClasses="text-wrap text-left" tooltipId="runAndDeployAddresstooltip" tooltipText={atAddressOptions.title}> <CustomTooltip placement={'top-end'} tooltipClasses="text-wrap text-left" tooltipId="runAndDeployAddresstooltip" tooltipText={atAddressOptions.title}>
<div id="runAndDeployAtAdressButtonContainer" onClick={loadFromAddress} data-title={atAddressOptions.title}> <div
style={!atAddressOptions.disabled ? { cursor: 'pointer' } : { cursor: 'default' }}
id="runAndDeployAtAdressButtonContainer"
onClick={loadFromAddress}
data-title={atAddressOptions.title}
>
<button <button
className="udapp_atAddress btn-sm py-2 btn-primary" className="udapp_atAddress btn-sm py-2 btn-primary"
id="runAndDeployAtAdressButton" id="runAndDeployAtAdressButton"
disabled={atAddressOptions.disabled} disabled={atAddressOptions.disabled}
style={{pointerEvents: 'none', border: 'none'}} style={{ pointerEvents: 'none', border: 'none' }}
onClick={loadFromAddress} onClick={loadFromAddress}
data-title={atAddressOptions.title} data-title={atAddressOptions.title}
> >
@ -532,7 +537,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
ref={atAddressValue} ref={atAddressValue}
className={(!addressIsValid ? 'border border-danger' : 'border-0') + ' h-100 udapp_input udapp_ataddressinput ataddressinput form-control'} className={(!addressIsValid ? 'border border-danger' : 'border-0') + ' h-100 udapp_input udapp_ataddressinput ataddressinput form-control'}
placeholder={intl.formatMessage({ placeholder={intl.formatMessage({
id: 'udapp.loadContractFromAddress' id: 'udapp.loadContractFromAddress',
})} })}
onChange={atAddressChanged} onChange={atAddressChanged}
/> />

Write Preview
Loading…
Cancel
Save