diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx index f3e1baf0b5..310b894010 100644 --- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx @@ -1,12 +1,12 @@ // eslint-disable-next-line no-use-before-define -import React, {useEffect, useRef, useState} from 'react' -import {FormattedMessage, useIntl} from 'react-intl' -import {ContractDropdownProps, DeployMode} from '../types' -import {ContractData, FuncABI, OverSizeLimit} from '@remix-project/core-plugin' +import React, { useEffect, useRef, useState } from 'react' +import { FormattedMessage, useIntl } from 'react-intl' +import { ContractDropdownProps, DeployMode } from '../types' +import { ContractData, FuncABI, OverSizeLimit } from '@remix-project/core-plugin' import * as ethJSUtil from '@ethereumjs/util' -import {ContractGUI} from './contractGUI' -import {CustomTooltip, deployWithProxyMsg, upgradeWithProxyMsg} from '@remix-ui/helper' -import {title} from 'process' +import { ContractGUI } from './contractGUI' +import { CustomTooltip, deployWithProxyMsg, upgradeWithProxyMsg } from '@remix-ui/helper' +import { title } from 'process' const _paq = (window._paq = window._paq || []) export function ContractDropdownUI(props: ContractDropdownProps) { @@ -16,14 +16,14 @@ export function ContractDropdownUI(props: ContractDropdownProps) { content: string }>({ display: '', - content: '' + content: '', }) const [atAddressOptions, setAtAddressOptions] = useState<{ title: string | JSX.Element disabled: boolean }>({ title: , - disabled: true + disabled: true, }) const [loadedAddress, setLoadedAddress] = useState('') const [contractOptions, setContractOptions] = useState<{ @@ -31,7 +31,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { disabled: boolean }>({ title: , - disabled: true + disabled: true, }) const [loadedContractData, setLoadedContractData] = useState(null) const [constructorInterface, setConstructorInterface] = useState(null) @@ -40,7 +40,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { const [compilerName, setCompilerName] = useState('') const contractsRef = useRef(null) const atAddressValue = useRef(null) - const {contractList, loadType, currentFile, compilationSource, currentContract, compilationCount, deployOptions} = props.contracts + const { contractList, loadType, currentFile, compilationSource, currentContract, compilationCount, deployOptions } = props.contracts useEffect(() => { enableContractNames(Object.keys(props.contracts.contractList).length > 0) @@ -50,7 +50,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { enableAtAddress(false) setAbiLabel({ 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) { setAbiLabel({ display: 'block', - content: currentFile + content: currentFile, }) enableAtAddress(true) } else if (isContractFile(currentFile)) { setAbiLabel({ display: 'none', - content: '' + content: '', }) if (!currentContract) enableAtAddress(false) } else { setAbiLabel({ display: 'none', - content: '' + content: '', }) if (!currentContract) enableAtAddress(false) } @@ -148,9 +148,9 @@ export function ContractDropdownUI(props: ContractDropdownProps) { disabled: false, title: ( - }} /> + }} /> - ) + ), }) } else { setAtAddressOptions({ @@ -159,9 +159,9 @@ export function ContractDropdownUI(props: ContractDropdownProps) { ) : ( - }} /> + }} /> - ) + ), }) } } @@ -170,7 +170,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { if (enable) { setContractOptions({ disabled: false, - title: + title: , }) } else { setContractOptions({ @@ -180,9 +180,9 @@ export function ContractDropdownUI(props: ContractDropdownProps) { ) : ( - }} /> + }} /> - ) + ), }) } } @@ -193,7 +193,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { const createInstance = (selectedContract, args, deployMode?: DeployMode[]) => { 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 const isProxyDeployment = (deployMode || []).find((mode) => mode === 'Deploy with Proxy') @@ -203,7 +203,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { props.modal( 'Deploy Implementation & Proxy (ERC1967)', deployWithProxyMsg(), - intl.formatMessage({id: 'udapp.proceed'}), + intl.formatMessage({ id: 'udapp.proceed' }), () => { props.createInstance( loadedContractData, @@ -216,14 +216,14 @@ export function ContractDropdownUI(props: ContractDropdownProps) { deployMode ) }, - intl.formatMessage({id: 'udapp.cancel'}), + intl.formatMessage({ id: 'udapp.cancel' }), () => {} ) } else if (isContractUpgrade) { props.modal( 'Deploy Implementation & Update Proxy', upgradeWithProxyMsg(), - intl.formatMessage({id: 'udapp.proceed'}), + intl.formatMessage({ id: 'udapp.proceed' }), () => { props.createInstance( loadedContractData, @@ -236,7 +236,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { deployMode ) }, - intl.formatMessage({id: 'udapp.cancel'}), + intl.formatMessage({ id: 'udapp.cancel' }), () => {} ) } else { @@ -289,7 +289,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { setCompilerName(contract.compilerName) setContractOptions({ disabled: false, - title: + title: , }) } }) @@ -297,7 +297,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { setCompilerName('') setContractOptions({ title: , - disabled: true + disabled: true, }) } } @@ -323,7 +323,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { EIP-55 - ) + ), }} /> @@ -343,7 +343,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { eip-170 - ) + ), }} /> @@ -358,7 +358,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { eip-3860 - ) + ), }} /> @@ -383,7 +383,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { {compilerName} + compilerName: {compilerName}, }} /> @@ -396,7 +396,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { tooltipId="info-sync-compiled-contract" tooltipText={ - }} /> + }} /> } > @@ -407,7 +407,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { _paq.push(['trackEvent', 'udapp', 'syncContracts', compilationSource ? compilationSource : 'compilationSourceNotYetSet']) }} > - + ) : null} @@ -423,7 +423,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { disabled={contractOptions.disabled} style={{ display: loadType === 'abi' && !isContractFile(currentFile) ? 'none' : 'block', - pointerEvents: contractOptions.disabled ? 'none' : 'auto' + pointerEvents: contractOptions.disabled ? 'none' : 'auto', }} > @@ -438,7 +438,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { })} - + {abiLabel.content} @@ -449,7 +449,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { tooltipId="info-evm-version-warn" tooltipText={ - + } > @@ -461,7 +461,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { {((contractList[currentFile] && contractList[currentFile].filter((contract) => contract)) || []).length > 0 && loadedContractData && ( - }} /> + }} /> } > @@ -509,12 +509,17 @@ export function ContractDropdownUI(props: ContractDropdownProps) { - + @@ -532,7 +537,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) { ref={atAddressValue} className={(!addressIsValid ? 'border border-danger' : 'border-0') + ' h-100 udapp_input udapp_ataddressinput ataddressinput form-control'} placeholder={intl.formatMessage({ - id: 'udapp.loadContractFromAddress' + id: 'udapp.loadContractFromAddress', })} onChange={atAddressChanged} />