|
|
|
|
@ -1,7 +1,7 @@ |
|
|
|
|
// eslint-disable-next-line no-use-before-define
|
|
|
|
|
import React, { useEffect, useRef, useState } from 'react' |
|
|
|
|
import * as remixLib from '@remix-project/remix-lib' |
|
|
|
|
import { ContractGUIProps, DeployOptions } from '../types' |
|
|
|
|
import { ContractGUIProps } from '../types' |
|
|
|
|
import { CopyToClipboard } from '@remix-ui/clipboard' |
|
|
|
|
import { ButtonGroup, Dropdown } from 'react-bootstrap' |
|
|
|
|
|
|
|
|
|
@ -18,6 +18,7 @@ export function ContractGUI (props: ContractGUIProps) { |
|
|
|
|
}>({ title: '', content: '', classList: '', dataId: '' }) |
|
|
|
|
const [selectedDeployIndex, setSelectedDeployIndex] = useState<number[]>([]) |
|
|
|
|
const [showOptions, setShowOptions] = useState<boolean>(false) |
|
|
|
|
const [hasArgs, setHasArgs] = useState<boolean>(false) |
|
|
|
|
const multiFields = useRef<Array<HTMLInputElement | null>>([]) |
|
|
|
|
const basicInputRef = useRef<HTMLInputElement>() |
|
|
|
|
|
|
|
|
|
@ -34,6 +35,13 @@ export function ContractGUI (props: ContractGUIProps) { |
|
|
|
|
basicInputRef.current.value = '' |
|
|
|
|
multiFields.current.filter((el) => el !== null && el !== undefined).forEach((el) => el.value = '') |
|
|
|
|
multiFields.current = [] |
|
|
|
|
|
|
|
|
|
const hasArgs = (props.funcABI.inputs && props.funcABI.inputs.length > 0) || |
|
|
|
|
(props.funcABI.type === 'fallback') || |
|
|
|
|
(props.funcABI.type === 'receive') || |
|
|
|
|
(props.isDeploy && props.deployOption && (props.deployOption.options.length > 0)) |
|
|
|
|
|
|
|
|
|
setHasArgs(hasArgs) |
|
|
|
|
}, [props.title, props.funcABI]) |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
@ -145,7 +153,7 @@ export function ContractGUI (props: ContractGUIProps) { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const handleActionClick = () => { |
|
|
|
|
const deployMode = selectedDeployIndex.map(index => props.deployOptions[index].title) |
|
|
|
|
const deployMode = selectedDeployIndex.map(index => props.deployOption[index].title) |
|
|
|
|
|
|
|
|
|
props.clickCallBack(props.funcABI.inputs, basicInput, props.isDeploy ? deployMode : null) |
|
|
|
|
} |
|
|
|
|
@ -180,20 +188,40 @@ export function ContractGUI (props: ContractGUIProps) { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className={`udapp_contractProperty ${(props.funcABI.inputs && props.funcABI.inputs.length > 0) || (props.funcABI.type === 'fallback') || (props.funcABI.type === 'receive') ? 'udapp_hasArgs' : ''}`}> |
|
|
|
|
<div className={`udapp_contractProperty ${hasArgs ? 'udapp_hasArgs' : ''}`}> |
|
|
|
|
<div className="udapp_contractActionsContainerSingle pt-2" style={{ display: toggleContainer ? 'none' : 'flex' }}> |
|
|
|
|
{ |
|
|
|
|
props.isDeploy && (props.deployOptions || []).length > 0?
|
|
|
|
|
props.isDeploy && props.deployOption && (props.deployOption.options || []).length > 0 ?
|
|
|
|
|
<Dropdown as={ButtonGroup} show={showOptions}> |
|
|
|
|
<button onClick={handleActionClick} title={buttonOptions.title} className={`udapp_instanceButton ${props.widthClass} btn btn-sm ${buttonOptions.classList}`} data-id={buttonOptions.dataId}>Deploy</button> |
|
|
|
|
<Dropdown.Toggle split id="dropdown-split-basic" className={`btn btn-sm dropdown-toggle dropdown-toggle-split ${buttonOptions.classList}`} style={{ maxWidth: 25, minWidth: 0, height: 32 }} onClick={toggleOptions} /> |
|
|
|
|
<Dropdown.Menu className="deploy-items border-0"> |
|
|
|
|
{ |
|
|
|
|
(props.deployOptions).map(({ title, active }, index) => <Dropdown.Item onClick={() => setSelectedDeploy(index)}> { selectedDeployIndex.includes(index) ? <span>✓ {title} </span> : <span className="pl-3">{title}</span> }</Dropdown.Item>) |
|
|
|
|
(props.deployOption.options).map(({ title, active }, index) => <Dropdown.Item onClick={() => setSelectedDeploy(index)}> { selectedDeployIndex.includes(index) ? <span>✓ {title} </span> : <span className="pl-3">{title}</span> }</Dropdown.Item>) |
|
|
|
|
} |
|
|
|
|
</Dropdown.Menu> |
|
|
|
|
</Dropdown> : <button onClick={handleActionClick} title={buttonOptions.title} className={`udapp_instanceButton ${props.widthClass} btn btn-sm ${buttonOptions.classList}`} data-id={buttonOptions.dataId}>{title}</button> |
|
|
|
|
} |
|
|
|
|
{ |
|
|
|
|
props.isDeploy && props.deployOption && props.deployOption.inputs.inputs.length > 0 &&
|
|
|
|
|
<> |
|
|
|
|
<input |
|
|
|
|
className="form-control" |
|
|
|
|
data-id={props.deployOption.inputs.type === 'fallback' || props.deployOption.inputs.type === 'receive' ? `'(${props.deployOption.inputs.type}')` : 'multiParamManagerBasicInputField'} |
|
|
|
|
placeholder={props.deployOption.initializeInputs} |
|
|
|
|
title={props.deployOption.inputs.type === 'fallback' || props.deployOption.inputs.type === 'receive' ? `'(${props.deployOption.inputs.type}')` : props.deployOption.initializeInputs} |
|
|
|
|
onChange={handleBasicInput} |
|
|
|
|
ref={basicInputRef} |
|
|
|
|
style={{ visibility: !((props.deployOption.inputs.inputs && props.deployOption.inputs.inputs.length > 0) || (props.deployOption.inputs.type === 'fallback') || (props.deployOption.inputs.type === 'receive')) ? 'hidden' : 'visible' }} /> |
|
|
|
|
<i |
|
|
|
|
className="fas fa-angle-down udapp_methCaret" |
|
|
|
|
onClick={switchMethodViewOn} |
|
|
|
|
title={title} |
|
|
|
|
style={{ visibility: !(props.deployOption.inputs.inputs && props.deployOption.inputs.inputs.length > 0) ? 'hidden' : 'visible' }}> |
|
|
|
|
</i> |
|
|
|
|
</> |
|
|
|
|
} |
|
|
|
|
{ !props.deployOption && <> |
|
|
|
|
<input |
|
|
|
|
className="form-control" |
|
|
|
|
data-id={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : 'multiParamManagerBasicInputField'} |
|
|
|
|
@ -206,8 +234,36 @@ export function ContractGUI (props: ContractGUIProps) { |
|
|
|
|
className="fas fa-angle-down udapp_methCaret" |
|
|
|
|
onClick={switchMethodViewOn} |
|
|
|
|
title={title} |
|
|
|
|
style={{ visibility: !(props.funcABI.inputs && props.funcABI.inputs.length > 0) ? 'hidden' : 'visible' }}></i> |
|
|
|
|
style={{ visibility: !(props.funcABI.inputs && props.funcABI.inputs.length > 0) ? 'hidden' : 'visible' }}> |
|
|
|
|
</i> |
|
|
|
|
</> |
|
|
|
|
} |
|
|
|
|
</div> |
|
|
|
|
{ |
|
|
|
|
props.isDeploy && props.deployOption && props.deployOption.inputs.inputs.length > 0 &&
|
|
|
|
|
<div className="udapp_contractActionsContainerMulti" style={{ display: toggleContainer ? 'flex' : 'none' }}> |
|
|
|
|
<div className="udapp_contractActionsContainerMultiInner text-dark"> |
|
|
|
|
<div onClick={switchMethodViewOff} className="udapp_multiHeader"> |
|
|
|
|
<div className="udapp_multiTitle run-instance-multi-title">{title}</div> |
|
|
|
|
<i className='fas fa-angle-up udapp_methCaret'></i> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
{props.deployOption.inputs.inputs.map((inp, index) => { |
|
|
|
|
return ( |
|
|
|
|
<div className="udapp_multiArg" key={index}> |
|
|
|
|
<label htmlFor={inp.name}> {inp.name}: </label> |
|
|
|
|
<input ref={el => { multiFields.current[index] = el }} className="form-control" placeholder={inp.type} title={inp.name} data-id={`multiParamManagerInput${inp.name}`} /> |
|
|
|
|
</div>) |
|
|
|
|
})} |
|
|
|
|
</div> |
|
|
|
|
<div className="udapp_group udapp_multiArg"> |
|
|
|
|
{/* <CopyToClipboard tip='Encode values of input fields & copy to clipboard' icon='fa-clipboard' direction={'left'} getContent={getContentOnCTC} /> */} |
|
|
|
|
<button onClick={handleExpandMultiClick} title={buttonOptions.title} data-id={buttonOptions.dataId} className={`udapp_instanceButton ${buttonOptions.classList}`}>{ buttonOptions.content }</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
} |
|
|
|
|
{ !props.deployOption &&
|
|
|
|
|
<div className="udapp_contractActionsContainerMulti" style={{ display: toggleContainer ? 'flex' : 'none' }}> |
|
|
|
|
<div className="udapp_contractActionsContainerMultiInner text-dark"> |
|
|
|
|
<div onClick={switchMethodViewOff} className="udapp_multiHeader"> |
|
|
|
|
@ -229,6 +285,7 @@ export function ContractGUI (props: ContractGUIProps) { |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
} |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
David Disu
3 years ago