Skip to content

Commit c60d504

Browse files
LianaHusAniket-Engg
LianaHus
authored and
Aniket-Engg
committed
udapp fixes
1 parent 60ae975 commit c60d504

File tree

9 files changed

+119
-103
lines changed

9 files changed

+119
-103
lines changed

‎libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ const DragBar = (props: IRemixDragBarUi) => {
6060

6161
function stopDrag(data: any) {
6262
setDragState(false)
63-
console.log("drag")
6463
if (data.x < props.minWidth + offset) {
6564
setDragBarPosX(offset)
6665
props.setHideStatus(true)

‎libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,18 +36,18 @@ function RootView ({ pluginComponent, children }: RootViewProps) {
3636
return (
3737
<Fragment>
3838
<div id="pluginManager" data-id="pluginManagerComponentPluginManager">
39-
<header className="form-group remixui_pluginSearch plugins-header pt-3 pb-0 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
39+
<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">
4040
<input
4141
type="text"
4242
onChange={(event) => {
4343
setFilterPlugin(event.target.value.toLowerCase())
4444
}}
4545
value={filterPlugins}
46-
className="form-control"
46+
className="mb-2 form-control"
4747
placeholder="Search"
4848
data-id="pluginManagerComponentSearchInput"
4949
/>
50-
<button onClick={openModal} className="remixui_pluginSearchButton btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
50+
<button onClick={openModal} className="py-1 btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
5151
<FormattedMessage id='pluginManager.connectLocal' />
5252
</button>
5353
</header>

‎libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,6 @@
1212
.remixui_pluginSearchInput {
1313
height: 38px;
1414
}
15-
.remixui_pluginSearchButton {
16-
font-size: 13px;
17-
}
1815
.remixui_displayName {
1916
width: 100%;
2017
display: flex;

‎libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx‎

Lines changed: 65 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
2929
const [loadedContractData, setLoadedContractData] = useState<ContractData>(null)
3030
const [constructorInterface, setConstructorInterface] = useState<FuncABI>(null)
3131
const [constructorInputs, setConstructorInputs] = useState(null)
32+
const [addressIsValid, setaddressIsValid] = useState(true)
3233
const [compilerName, setCompilerName] = useState<string>('')
3334
const contractsRef = useRef<HTMLSelectElement>(null)
3435
const atAddressValue = useRef<HTMLInputElement>(null)
@@ -201,12 +202,19 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
201202

202203
const loadFromAddress = () => {
203204
let address = loadedAddress
204-
205-
if (!ethJSUtil.isValidChecksumAddress(address)) {
206-
props.tooltip(checkSumWarning())
207-
address = ethJSUtil.toChecksumAddress(address)
205+
if (address == '') return
206+
try {
207+
if (!ethJSUtil.isValidChecksumAddress(address)) {
208+
props.tooltip(checkSumWarning())
209+
address = ethJSUtil.toChecksumAddress(address)
210+
}
211+
props.loadAddress(loadedContractData, address)
212+
} catch(e) {
213+
console.log("Invalid Address input: ", e)
214+
setaddressIsValid(false)
215+
return
208216
}
209-
props.loadAddress(loadedContractData, address)
217+
setaddressIsValid(true)
210218
}
211219

212220
const handleCheckedIPFS = () => {
@@ -268,13 +276,17 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
268276
evmVersion = JSON.parse(loadedContractData.metadata).settings.evmVersion
269277
} catch (err) {}
270278
return (
271-
<div className="udapp_container" data-id="contractDropdownContainer">
279+
<div className="udapp_container mb-2" data-id="contractDropdownContainer">
272280
<div className='d-flex justify-content-between'>
273281
<div className="d-flex justify-content-between align-items-end">
274282
<label className="udapp_settingsLabel pr-1">
275283
<FormattedMessage id='udapp.contract' />
276284
</label>
277-
{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>}
285+
{compilerName && compilerName !== '' &&
286+
<label className='udapp_settingsCompiledBy badge badge-secondary' data-id="udappCompiledBy">
287+
<FormattedMessage id='udapp.compiledBy' values={{ compilerName: <span className="text-capitalize">{compilerName}</span> }} />
288+
</label>
289+
}
278290
</div>
279291
{props.remixdActivated ?
280292
(<CustomTooltip
@@ -292,7 +304,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
292304
<i style={{ cursor: 'pointer' }} className="fa fa-refresh mr-2 mt-2" aria-hidden="true"></i>
293305
</button>
294306
</CustomTooltip>)
295-
: null}
307+
: null}
296308
</div>
297309
<div className="udapp_subcontainer">
298310
<CustomTooltip
@@ -302,7 +314,14 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
302314
tooltipText={contractOptions.title}
303315
>
304316
<div id="udappcontractNamesWrapper" className="w-100">
305-
<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' }}>
317+
<select ref={contractsRef}
318+
value={currentContract}
319+
onChange={handleContractChange}
320+
className="udapp_contractNames custom-select"
321+
disabled={contractOptions.disabled}
322+
style={{ display: loadType === 'abi' && !isContractFile(currentFile) ? 'none' : 'block', pointerEvents: contractOptions.disabled ? 'none' : 'auto' }}
323+
>
324+
<option value='' disabled hidden>No compiled contracts</option>
306325
{(contractList[currentFile] || []).map((contract, index) => {
307326
return <option key={index} value={contract.alias}>
308327
{contract.alias} - {contract.file}
@@ -314,19 +333,20 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
314333
<span className="py-1" style={{ display: abiLabel.display }}>{abiLabel.content}</span>
315334
</div>
316335
{ evmVersion && loadedContractData && <CustomTooltip
317-
placement={'right'}
318-
tooltipClasses="text-wrap text-left"
319-
tooltipId="info-evm-version-warn"
320-
tooltipText={<span className="text-left">
321-
<FormattedMessage id='udapp.warningEvmVersion' values={{ evmVersion }}/>
322-
</span>}
323-
>
324-
<span className='udapp_evmVersion badge badge-secondary'>evm version: {evmVersion}</span>
325-
</CustomTooltip> }
336+
placement={'right'}
337+
tooltipClasses="text-wrap text-left"
338+
tooltipId="info-evm-version-warn"
339+
tooltipText={<span className="text-left">
340+
<FormattedMessage id='udapp.warningEvmVersion' values={{ evmVersion }}/>
341+
</span>}
342+
>
343+
<span className='udapp_evmVersion badge alert-warning'>evm version: {evmVersion}</span>
344+
</CustomTooltip>
345+
}
326346
<div>
327347
<div className="udapp_deployDropdown">
328-
{((contractList[currentFile] && contractList[currentFile].filter(contract => contract)) || []).length <= 0 ? intl.formatMessage({ id: 'udapp.noCompiledContracts' })
329-
: loadedContractData ? <div>
348+
{(((contractList[currentFile] && contractList[currentFile].filter(contract => contract)) || []).length > 0 && loadedContractData) &&
349+
<div>
330350
<ContractGUI
331351
title={intl.formatMessage({ id: 'udapp.deploy' })}
332352
isDeploy={true}
@@ -368,38 +388,38 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
368388
</label>
369389
</CustomTooltip>
370390
</div>
371-
</div> : ''
391+
</div>
372392
}
373393
</div>
374-
<div className="udapp_orLabel mt-2" style={{ display: loadType === 'abi' && !isContractFile(currentFile) ? 'none' : 'block' }}>
375-
<FormattedMessage id='udapp.or' />
376-
</div>
377-
<div className="udapp_button udapp_atAddressSect ">
378-
<CustomTooltip
379-
placement={'top-end'}
380-
tooltipClasses="text-wrap text-left"
381-
tooltipId="runAndDeployAddresstooltip"
382-
tooltipText={atAddressOptions.title}
394+
<div className="pt-2 d-flex flex-column sudapp_button udapp_atAddressSect">
395+
<div className='d-flex flex-row'>
396+
<CustomTooltip
397+
placement={'top-end'}
398+
tooltipClasses="text-wrap text-left"
399+
tooltipId="runAndDeployAddresstooltip"
400+
tooltipText={atAddressOptions.title}
383401
>
384402
<div id="runAndDeployAtAdressButtonContainer" onClick={loadFromAddress} data-title={atAddressOptions.title}>
385-
<button className="udapp_atAddress btn btn-sm btn-primary" id="runAndDeployAtAdressButton" disabled={atAddressOptions.disabled} style={{ pointerEvents: 'none' }} onClick={loadFromAddress} data-title={atAddressOptions.title}>
403+
<button className="udapp_atAddress btn-sm py-2 btn-primary" id="runAndDeployAtAdressButton" disabled={atAddressOptions.disabled} style={{ pointerEvents: 'none' }} onClick={loadFromAddress} data-title={atAddressOptions.title}>
386404
<FormattedMessage id='udapp.atAddress' />
387405
</button>
388406
</div>
389-
</CustomTooltip>
390-
<CustomTooltip
391-
placement={'top-end'}
392-
tooltipClasses="text-wrap text-left"
393-
tooltipId="runAndDeployAddressInputtooltip"
394-
tooltipText={<FormattedMessage id='udapp.addressOfContract' />}
395-
>
396-
<input
397-
ref={atAddressValue}
398-
className="udapp_input udapp_ataddressinput ataddressinput form-control"
399-
placeholder={intl.formatMessage({ id: 'udapp.loadContractFromAddress' })}
400-
onChange={atAddressChanged}
401-
/>
402-
</CustomTooltip>
407+
</CustomTooltip>
408+
<CustomTooltip
409+
placement={'top-end'}
410+
tooltipClasses="text-wrap text-left"
411+
tooltipId="runAndDeployAddressInputtooltip"
412+
tooltipText={<FormattedMessage id='udapp.addressOfContract' />}
413+
>
414+
<input
415+
ref={atAddressValue}
416+
className={(!addressIsValid ? "border border-danger" : "border-0") + " h-100 udapp_input udapp_ataddressinput ataddressinput form-control"}
417+
placeholder={intl.formatMessage({ id: 'udapp.loadContractFromAddress' })}
418+
onChange={atAddressChanged}
419+
/>
420+
</CustomTooltip>
421+
</div>
422+
{ !addressIsValid && <span className='text-danger text-right'>The address is not valid</span> }
403423
</div>
404424
</div>
405425
</div>

‎libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -182,11 +182,9 @@ export function ContractGUI (props: ContractGUIProps) {
182182
setProxyAddressError('proxy address cannot be empty')
183183
} else {
184184
const isValidProxyAddress = await props.isValidProxyAddress(proxyAddress)
185-
186185
if (isValidProxyAddress) {
187186
setProxyAddressError('')
188187
const upgradeReport: any = await props.isValidProxyUpgrade(proxyAddress)
189-
190188
if (upgradeReport.ok) {
191189
!proxyAddressError && props.clickCallBack(props.funcABI.inputs, proxyAddress, ['Upgrade with Proxy'])
192190
} else {
@@ -279,14 +277,14 @@ export function ContractGUI (props: ContractGUIProps) {
279277
placement={"right"}
280278
tooltipClasses="text-wrap"
281279
tooltipId="remixUdappInstanceButtonTooltip"
282-
tooltipText={toggleUpgradeImp && !proxyAddress ? 'Proxy address cannot be empty' : buttonOptions.title}
280+
tooltipText={toggleUpgradeImp && !proxyAddress ? 'Proxy address cannot be empty' : (props.inputs !=='' && basicInput === '') ? 'Input required' : buttonOptions.title}
283281
>
284282
<button
285283
onClick={handleActionClick}
286284
className={`udapp_instanceButton ${props.widthClass} btn btn-sm ${buttonOptions.classList}`}
287285
data-id={buttonOptions.dataId}
288286
data-title={buttonOptions.title}
289-
disabled={(toggleUpgradeImp && !proxyAddress) || props.disabled}
287+
disabled={(toggleUpgradeImp && !proxyAddress) || props.disabled || (props.inputs !=='' && basicInput === '')}
290288
>
291289
<div className='text-nowrap overflow-hidden text-truncate'>{title}</div>
292290
</button>
@@ -309,6 +307,7 @@ export function ContractGUI (props: ContractGUIProps) {
309307
}
310308
ref={basicInputRef}
311309
style={{
310+
height: '2rem',
312311
visibility: !(
313312
(props.funcABI.inputs && props.funcABI.inputs.length > 0) ||
314313
props.funcABI.type === "fallback" ||
@@ -439,12 +438,7 @@ export function ContractGUI (props: ContractGUIProps) {
439438
{props.initializerOptions &&
440439
props.initializerOptions.initializeInputs ? (
441440
<span onClick={handleToggleDeployProxy}>
442-
<i
443-
className={
444-
!toggleDeployProxy
445-
? "fas fa-angle-right pt-2"
446-
: "fas fa-angle-down"
447-
}
441+
<i className={!toggleDeployProxy ? "fas fa-angle-right pt-2" : "fas fa-angle-down"}
448442
aria-hidden="true"
449443
></i>
450444
</span>
@@ -534,12 +528,14 @@ export function ContractGUI (props: ContractGUIProps) {
534528
>
535529
<Dropdown.Item
536530
key={index}
537-
onClick={() => {
538-
switchProxyAddress(deployment.address)
539-
}}
531+
onClick={() => { switchProxyAddress(deployment.address) }}
540532
data-id={`proxyAddress${index}`}
541533
>
542-
<span>{ proxyAddress === deployment.address ? <span>&#10003; { deployment.contractName + ' ' + shortenProxyAddress(deployment.address) } </span> : <span className="pl-3">{ deployment.contractName + ' ' + shortenProxyAddress(deployment.address) }</span> }</span>
534+
<span>
535+
{ proxyAddress === deployment.address ?
536+
<span>&#10003; { deployment.contractName + ' ' + shortenProxyAddress(deployment.address) } </span>
537+
: <span className="pl-3">{ deployment.contractName + ' ' + shortenProxyAddress(deployment.address) }</span> }
538+
</span>
543539
</Dropdown.Item>
544540
</CustomTooltip>
545541
))

‎libs/remix-ui/run-tab/src/lib/components/deployButton.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,14 @@ export function DeployButton (props: DeployButtonProps) {
1515
<>
1616
{ props.deployOptions && (props.deployOptions || []).length > 0 ?
1717
<Dropdown as={ButtonGroup}>
18-
<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>
18+
<button
19+
onClick={props.handleActionClick}
20+
title={props.buttonOptions.title}
21+
className={`udapp_instanceButton ${props.buttonOptions.widthClass} btn btn-sm ${props.buttonOptions.classList}`}
22+
data-id={props.buttonOptions.dataId}
23+
>
24+
{ props.deployOptions[props.selectedIndex] ? props.deployOptions[props.selectedIndex].title : 'Deploy' }
25+
</button>
1926
<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 }} />
2027
<Dropdown.Menu className="deploy-items border-0">
2128
{

‎libs/remix-ui/run-tab/src/lib/components/deployInput.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { DeployButton } from './deployButton'
55

66
export function DeployInput (props: DeployInputProps) {
77
return (
8-
<div className="udapp_contractActionsContainerSingle pt-2" style={{ display: 'flex' }}>
8+
<div className="udapp_contractActionsContainerSingle" style={{ display: 'flex' }}>
99
<DeployButton buttonOptions={props.buttonOptions} selectedIndex={props.selectedIndex} setSelectedIndex={props.setSelectedIndex} handleActionClick={props.handleActionClick} deployOptions={props.deployOptions} />
1010
<CustomTooltip
1111
placement="right"
@@ -19,7 +19,7 @@ export function DeployInput (props: DeployInputProps) {
1919
placeholder={props.inputs}
2020
onChange={props.handleBasicInput}
2121
ref={props.basicInputRef}
22-
style={{ visibility: !props.inputs ? 'hidden' : 'visible' }}
22+
style={{ visibility: !props.inputs ? 'hidden' : 'visible', height: props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? '0' : '' }}
2323
/>
2424
</CustomTooltip>
2525
</div>

0 commit comments

Comments
 (0)