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

udapp fixes

Browse Source
pull/3868/head
lianahus 1 year ago committed by Aniket
parent 60ae9751b7
commit c60d5043de
9 changed files with 119 additions and 103 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. 1
      libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx
  2. 6
      libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
  3. 3
      libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css
  4. 110
      libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
  5. 24
      libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
  6. 9
      libs/remix-ui/run-tab/src/lib/components/deployButton.tsx
  7. 4
      libs/remix-ui/run-tab/src/lib/components/deployInput.tsx
  8. 62
      libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
  9. 3
      libs/remix-ui/run-tab/src/lib/css/run-tab.css

1
libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx
Unescape View File

@ -60,7 +60,6 @@ const DragBar = (props: IRemixDragBarUi) => {
function stopDrag(data: any) {
setDragState(false)
console.log("drag")
if (data.x < props.minWidth + offset) {
setDragBarPosX(offset)
props.setHideStatus(true)

6
libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
Unescape View File

@ -36,18 +36,18 @@ function RootView ({ pluginComponent, children }: RootViewProps) {
return (
<Fragment>
<div id="pluginManager" data-id="pluginManagerComponentPluginManager">
<header className="form-group remixui_pluginSearch plugins-header pt-3 pb-0 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
<header className="form-group mb-0 d-flex flex-column align-items-center bg-light plugins-header pt-3 pb-0 px-3" data-id="pluginManagerComponentPluginManagerHeader">
<input
type="text"
onChange={(event) => {
setFilterPlugin(event.target.value.toLowerCase())
}}
value={filterPlugins}
className="form-control"
className="mb-2 form-control"
placeholder="Search"
data-id="pluginManagerComponentSearchInput"
/>
<button onClick={openModal} className="remixui_pluginSearchButton btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
<button onClick={openModal} className="py-1 btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
<FormattedMessage id='pluginManager.connectLocal' />
</button>
</header>

3
libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css
Unescape View File

@ -12,9 +12,6 @@
.remixui_pluginSearchInput {
height: 38px;
}
.remixui_pluginSearchButton {
font-size: 13px;
}
.remixui_displayName {
width: 100%;
display: flex;

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

@ -29,6 +29,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
const [loadedContractData, setLoadedContractData] = useState<ContractData>(null)
const [constructorInterface, setConstructorInterface] = useState<FuncABI>(null)
const [constructorInputs, setConstructorInputs] = useState(null)
const [addressIsValid, setaddressIsValid] = useState(true)
const [compilerName, setCompilerName] = useState<string>('')
const contractsRef = useRef<HTMLSelectElement>(null)
const atAddressValue = useRef<HTMLInputElement>(null)
@ -201,12 +202,19 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
const loadFromAddress = () => {
let address = loadedAddress
if (!ethJSUtil.isValidChecksumAddress(address)) {
props.tooltip(checkSumWarning())
address = ethJSUtil.toChecksumAddress(address)
if (address == '') return
try {
if (!ethJSUtil.isValidChecksumAddress(address)) {
props.tooltip(checkSumWarning())
address = ethJSUtil.toChecksumAddress(address)
}
props.loadAddress(loadedContractData, address)
} catch(e) {
console.log("Invalid Address input: ", e)
setaddressIsValid(false)
return
}
props.loadAddress(loadedContractData, address)
setaddressIsValid(true)
}
const handleCheckedIPFS = () => {
@ -268,13 +276,17 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
evmVersion = JSON.parse(loadedContractData.metadata).settings.evmVersion
} catch (err) {}
return (
<div className="udapp_container" data-id="contractDropdownContainer">
<div className="udapp_container mb-2" data-id="contractDropdownContainer">
<div className='d-flex justify-content-between'>
<div className="d-flex justify-content-between align-items-end">
<label className="udapp_settingsLabel pr-1">
<FormattedMessage id='udapp.contract' />
</label>
{compilerName && compilerName !== '' && <label className='udapp_settingsCompiledBy badge badge-secondary' data-id="udappCompiledBy"><FormattedMessage id='udapp.compiledBy' values={{ compilerName: <span className="text-capitalize"> {compilerName}</span> }} /></label>}
{compilerName && compilerName !== '' &&
<label className='udapp_settingsCompiledBy badge badge-secondary' data-id="udappCompiledBy">
<FormattedMessage id='udapp.compiledBy' values={{ compilerName: <span className="text-capitalize">{compilerName}</span> }} />
</label>
}
</div>
{props.remixdActivated ?
(<CustomTooltip
@ -292,7 +304,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
<i style={{ cursor: 'pointer' }} className="fa fa-refresh mr-2 mt-2" aria-hidden="true"></i>
</button>
</CustomTooltip>)
: null}
: null}
</div>
<div className="udapp_subcontainer">
<CustomTooltip
@ -302,7 +314,14 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
tooltipText={contractOptions.title}
>
<div id="udappcontractNamesWrapper" className="w-100">
<select ref={contractsRef} value={currentContract} onChange={handleContractChange} className="udapp_contractNames custom-select" disabled={contractOptions.disabled} style={{ display: loadType === 'abi' && !isContractFile(currentFile) ? 'none' : 'block', pointerEvents: contractOptions.disabled ? 'none' : 'auto' }}>
<select ref={contractsRef}
value={currentContract}
onChange={handleContractChange}
className="udapp_contractNames custom-select"
disabled={contractOptions.disabled}
style={{ display: loadType === 'abi' && !isContractFile(currentFile) ? 'none' : 'block', pointerEvents: contractOptions.disabled ? 'none' : 'auto' }}
>
<option value='' disabled hidden>No compiled contracts</option>
{(contractList[currentFile] || []).map((contract, index) => {
return <option key={index} value={contract.alias}>
{contract.alias} - {contract.file}
@ -314,19 +333,20 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
<span className="py-1" style={{ display: abiLabel.display }}>{abiLabel.content}</span>
</div>
{ evmVersion && loadedContractData && <CustomTooltip
placement={'right'}
tooltipClasses="text-wrap text-left"
tooltipId="info-evm-version-warn"
tooltipText={<span className="text-left">
<FormattedMessage id='udapp.warningEvmVersion' values={{ evmVersion }}/>
</span>}
>
<span className='udapp_evmVersion badge badge-secondary'>evm version: {evmVersion}</span>
</CustomTooltip> }
placement={'right'}
tooltipClasses="text-wrap text-left"
tooltipId="info-evm-version-warn"
tooltipText={<span className="text-left">
<FormattedMessage id='udapp.warningEvmVersion' values={{ evmVersion }}/>
</span>}
>
<span className='udapp_evmVersion badge alert-warning'>evm version: {evmVersion}</span>
</CustomTooltip>
}
<div>
<div className="udapp_deployDropdown">
{((contractList[currentFile] && contractList[currentFile].filter(contract => contract)) || []).length <= 0 ? intl.formatMessage({ id: 'udapp.noCompiledContracts' })
: loadedContractData ? <div>
{(((contractList[currentFile] && contractList[currentFile].filter(contract => contract)) || []).length > 0 && loadedContractData) &&
<div>
<ContractGUI
title={intl.formatMessage({ id: 'udapp.deploy' })}
isDeploy={true}
@ -368,38 +388,38 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
</label>
</CustomTooltip>
</div>
</div> : ''
</div>
}
</div>
<div className="udapp_orLabel mt-2" style={{ display: loadType === 'abi' && !isContractFile(currentFile) ? 'none' : 'block' }}>
<FormattedMessage id='udapp.or' />
</div>
<div className="udapp_button udapp_atAddressSect ">
<CustomTooltip
placement={'top-end'}
tooltipClasses="text-wrap text-left"
tooltipId="runAndDeployAddresstooltip"
tooltipText={atAddressOptions.title}
<div className="pt-2 d-flex flex-column sudapp_button udapp_atAddressSect">
<div className='d-flex flex-row'>
<CustomTooltip
placement={'top-end'}
tooltipClasses="text-wrap text-left"
tooltipId="runAndDeployAddresstooltip"
tooltipText={atAddressOptions.title}
>
<div id="runAndDeployAtAdressButtonContainer" onClick={loadFromAddress} data-title={atAddressOptions.title}>
<button className="udapp_atAddress btn btn-sm btn-primary" id="runAndDeployAtAdressButton" disabled={atAddressOptions.disabled} style={{ pointerEvents: 'none' }} onClick={loadFromAddress} data-title={atAddressOptions.title}>
<button className="udapp_atAddress btn-sm py-2 btn-primary" id="runAndDeployAtAdressButton" disabled={atAddressOptions.disabled} style={{ pointerEvents: 'none' }} onClick={loadFromAddress} data-title={atAddressOptions.title}>
<FormattedMessage id='udapp.atAddress' />
</button>
</div>
</CustomTooltip>
<CustomTooltip
placement={'top-end'}
tooltipClasses="text-wrap text-left"
tooltipId="runAndDeployAddressInputtooltip"
tooltipText={<FormattedMessage id='udapp.addressOfContract' />}
>
<input
ref={atAddressValue}
className="udapp_input udapp_ataddressinput ataddressinput form-control"
placeholder={intl.formatMessage({ id: 'udapp.loadContractFromAddress' })}
onChange={atAddressChanged}
/>
</CustomTooltip>
</CustomTooltip>
<CustomTooltip
placement={'top-end'}
tooltipClasses="text-wrap text-left"
tooltipId="runAndDeployAddressInputtooltip"
tooltipText={<FormattedMessage id='udapp.addressOfContract' />}
>
<input
ref={atAddressValue}
className={(!addressIsValid ? "border border-danger" : "border-0") + " h-100 udapp_input udapp_ataddressinput ataddressinput form-control"}
placeholder={intl.formatMessage({ id: 'udapp.loadContractFromAddress' })}
onChange={atAddressChanged}
/>
</CustomTooltip>
</div>
{ !addressIsValid && <span className='text-danger text-right'>The address is not valid</span> }
</div>
</div>
</div>

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

@ -182,11 +182,9 @@ export function ContractGUI (props: ContractGUIProps) {
setProxyAddressError('proxy address cannot be empty')
} else {
const isValidProxyAddress = await props.isValidProxyAddress(proxyAddress)
if (isValidProxyAddress) {
setProxyAddressError('')
const upgradeReport: any = await props.isValidProxyUpgrade(proxyAddress)
if (upgradeReport.ok) {
!proxyAddressError && props.clickCallBack(props.funcABI.inputs, proxyAddress, ['Upgrade with Proxy'])
} else {
@ -279,14 +277,14 @@ export function ContractGUI (props: ContractGUIProps) {
placement={"right"}
tooltipClasses="text-wrap"
tooltipId="remixUdappInstanceButtonTooltip"
tooltipText={toggleUpgradeImp && !proxyAddress ? 'Proxy address cannot be empty' : buttonOptions.title}
tooltipText={toggleUpgradeImp && !proxyAddress ? 'Proxy address cannot be empty' : (props.inputs !=='' && basicInput === '') ? 'Input required' : buttonOptions.title}
>
<button
onClick={handleActionClick}
className={`udapp_instanceButton ${props.widthClass} btn btn-sm ${buttonOptions.classList}`}
data-id={buttonOptions.dataId}
data-title={buttonOptions.title}
disabled={(toggleUpgradeImp && !proxyAddress) || props.disabled}
disabled={(toggleUpgradeImp && !proxyAddress) || props.disabled || (props.inputs !=='' && basicInput === '')}
>
<div className='text-nowrap overflow-hidden text-truncate'>{title}</div>
</button>
@ -309,6 +307,7 @@ export function ContractGUI (props: ContractGUIProps) {
}
ref={basicInputRef}
style={{
height: '2rem',
visibility: !(
(props.funcABI.inputs && props.funcABI.inputs.length > 0) ||
props.funcABI.type === "fallback" ||
@ -439,12 +438,7 @@ export function ContractGUI (props: ContractGUIProps) {
{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>
@ -534,12 +528,14 @@ 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> }</span>
<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>
))

9
libs/remix-ui/run-tab/src/lib/components/deployButton.tsx
Unescape View File

@ -15,7 +15,14 @@ export function DeployButton (props: DeployButtonProps) {
<>
{ props.deployOptions && (props.deployOptions || []).length > 0 ?
<Dropdown as={ButtonGroup}>
<button onClick={props.handleActionClick} title={props.buttonOptions.title} className={`udapp_instanceButton ${props.buttonOptions.widthClass} btn btn-sm ${props.buttonOptions.classList}`} data-id={props.buttonOptions.dataId}>{ props.deployOptions[props.selectedIndex] ? props.deployOptions[props.selectedIndex].title : 'Deploy' }</button>
<button
onClick={props.handleActionClick}
title={props.buttonOptions.title}
className={`udapp_instanceButton ${props.buttonOptions.widthClass} btn btn-sm ${props.buttonOptions.classList}`}
data-id={props.buttonOptions.dataId}
>
{ props.deployOptions[props.selectedIndex] ? props.deployOptions[props.selectedIndex].title : 'Deploy' }
</button>
<Dropdown.Toggle split id="dropdown-split-basic" className={`btn btn-sm dropdown-toggle dropdown-toggle-split ${props.buttonOptions.classList}`} style={{ maxWidth: 25, minWidth: 0, height: 32 }} />
<Dropdown.Menu className="deploy-items border-0">
{

4
libs/remix-ui/run-tab/src/lib/components/deployInput.tsx
Unescape View File

@ -5,7 +5,7 @@ import { DeployButton } from './deployButton'
export function DeployInput (props: DeployInputProps) {
return (
<div className="udapp_contractActionsContainerSingle pt-2" style={{ display: 'flex' }}>
<div className="udapp_contractActionsContainerSingle" style={{ display: 'flex' }}>
<DeployButton buttonOptions={props.buttonOptions} selectedIndex={props.selectedIndex} setSelectedIndex={props.setSelectedIndex} handleActionClick={props.handleActionClick} deployOptions={props.deployOptions} />
<CustomTooltip
placement="right"
@ -19,7 +19,7 @@ export function DeployInput (props: DeployInputProps) {
placeholder={props.inputs}
onChange={props.handleBasicInput}
ref={props.basicInputRef}
style={{ visibility: !props.inputs ? 'hidden' : 'visible' }}
style={{ visibility: !props.inputs ? 'hidden' : 'visible', height: props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? '0' : '' }}
/>
</CustomTooltip>
</div>

62
libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
Unescape View File

@ -30,7 +30,7 @@ export function RecorderUI (props: RecorderProps) {
return (
<div className="udapp_cardContainer list-group-item border-top border-bottom">
<div className="udapp_cardContainer py-1 list-group-item border-top border-bottom">
<div className="udapp_recorderSection d-flex justify-content-between" onClick={toggleClass}>
<div className="d-flex justify-content-center align-items-center">
<label className="mt-1 udapp_recorderSectionLabel">
@ -59,8 +59,8 @@ export function RecorderUI (props: RecorderProps) {
</span>
</div>
</div>
<div className={`flex-column ${toggleExpander ? "d-flex" : "d-none"}`}>
<div className="mb-1 mt-1 fmt-2 custom-control custom-checkbox mb-1">
<div className={`pb-2 flex-column ${toggleExpander ? "d-flex" : "d-none"}`}>
<div className="mb-1 mt-1 custom-control custom-checkbox mb-1">
<input ref={inputLive} type="checkbox" id="livemode-recorder" className="custom-control-input custom-select" name="input-livemode"/>
<CustomTooltip
placement={'right'}
@ -74,34 +74,34 @@ export function RecorderUI (props: RecorderProps) {
</CustomTooltip>
</div>
<div className="mb-1 mt-1 udapp_transactionActions">
<CustomTooltip
placement={'bottom-start'}
tooltipClasses="text-nowrap"
tooltipId="remixUdappTransactionSavetooltip"
tooltipText={
props.count === 0 ? intl.formatMessage({ id: 'udapp.transactionSaveTooltip1' })
: props.count === 1 ? intl.formatMessage({ id: 'udapp.transactionSaveTooltip2' }, { count: props.count })
: intl.formatMessage({ id: 'udapp.transactionSaveTooltip3' }, { count: props.count })
}
>
<span>
<button className="btn btn-sm btn-info savetransaction udapp_recorder" disabled={props.count === 0 ? true: false} onClick={triggerRecordButton} style={{ pointerEvents: props.count === 0 ? 'none' : 'auto' }}>
<FormattedMessage id='udapp.save' />
</button>
</span>
</CustomTooltip>
<CustomTooltip
placement={'right'}
tooltipClasses="text-nowrap"
tooltipId="tooltip-run-recorder"
tooltipText={<FormattedMessage id='udapp.runRecorderTooltip' />}
>
<span>
<button className="btn btn-sm btn-info runtransaction udapp_runTxs" data-id="runtransaction" disabled={enableRunButton} onClick={handleClickRunButton} style={{ pointerEvents: enableRunButton ? 'none' : 'auto' }}>
<FormattedMessage id='udapp.run' />
</button>
</span>
</CustomTooltip>
<CustomTooltip
placement={'bottom-start'}
tooltipClasses="text-nowrap"
tooltipId="remixUdappTransactionSavetooltip"
tooltipText={
props.count === 0 ? intl.formatMessage({ id: 'udapp.transactionSaveTooltip1' })
: props.count === 1 ? intl.formatMessage({ id: 'udapp.transactionSaveTooltip2' }, { count: props.count })
: intl.formatMessage({ id: 'udapp.transactionSaveTooltip3' }, { count: props.count })
}
>
<span>
<button className="btn btn-sm btn-info savetransaction udapp_recorder" disabled={props.count === 0 ? true: false} onClick={triggerRecordButton} style={{ pointerEvents: props.count === 0 ? 'none' : 'auto' }}>
<FormattedMessage id='udapp.save' />
</button>
</span>
</CustomTooltip>
<CustomTooltip
placement={'right'}
tooltipClasses="text-nowrap"
tooltipId="tooltip-run-recorder"
tooltipText={<FormattedMessage id='udapp.runRecorderTooltip' />}
>
<span>
<button className="btn btn-sm btn-info runtransaction udapp_runTxs" data-id="runtransaction" disabled={enableRunButton} onClick={handleClickRunButton} style={{ pointerEvents: enableRunButton ? 'none' : 'auto' }}>
<FormattedMessage id='udapp.run' />
</button>
</span>
</CustomTooltip>
</div>
</div>
</div>

3
libs/remix-ui/run-tab/src/lib/css/run-tab.css
Unescape View File

@ -101,8 +101,6 @@
align-items: center;
margin-top: 13px;
}
.udapp_transaction {
}
.udapp_atAddress {
margin: 0;
min-width: 100px;
@ -118,7 +116,6 @@
height: 32px;
}
.udapp_atAddressSect input {
height: 32px;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}

Write Preview
Loading…
Cancel
Save