David Disu
3 years ago
committed by
yann300
parent
594d9bbc16
commit
99201aa514
@ -0,0 +1,195 @@ |
|||||||
|
// 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 } from '../types' |
||||||
|
import { CopyToClipboard } from '@remix-ui/clipboard' |
||||||
|
|
||||||
|
const txFormat = remixLib.execution.txFormat |
||||||
|
export function ContractGUI (props: ContractGUIProps) { |
||||||
|
const [title, setTitle] = useState<string>('') |
||||||
|
const [basicInput, setBasicInput] = useState<string>('') |
||||||
|
const [toggleContainer, setToggleContainer] = useState<boolean>(false) |
||||||
|
const [buttonOptions, setButtonOptions] = useState<{ |
||||||
|
title: string, |
||||||
|
content: string, |
||||||
|
classList: string, |
||||||
|
dataId: string |
||||||
|
}>({ title: '', content: '', classList: '', dataId: '' }) |
||||||
|
const multiFields = useRef<Array<HTMLInputElement | null>>([]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (props.title) { |
||||||
|
setTitle(props.title) |
||||||
|
} else if (props.funcABI.name) { |
||||||
|
setTitle(props.funcABI.name) |
||||||
|
} else { |
||||||
|
setTitle(props.funcABI.type === 'receive' ? '(receive)' : '(fallback)') |
||||||
|
} |
||||||
|
}, [props.title, props.funcABI]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (props.lookupOnly) { |
||||||
|
// // call. stateMutability is either pure or view
|
||||||
|
setButtonOptions({ |
||||||
|
title: title + ' - call', |
||||||
|
content: 'call', |
||||||
|
classList: 'btn-info', |
||||||
|
dataId: title + ' - call' |
||||||
|
}) |
||||||
|
} else if (props.funcABI.stateMutability === 'payable' || props.funcABI.payable) { |
||||||
|
// // transact. stateMutability = payable
|
||||||
|
setButtonOptions({ |
||||||
|
title: title + ' - transact (payable)', |
||||||
|
content: 'transact', |
||||||
|
classList: 'btn-danger', |
||||||
|
dataId: title + ' - transact (payable)' |
||||||
|
}) |
||||||
|
} else { |
||||||
|
// // transact. stateMutability = nonpayable
|
||||||
|
setButtonOptions({ |
||||||
|
title: title + ' - transact (not payable)', |
||||||
|
content: 'transact', |
||||||
|
classList: 'btn-warning', |
||||||
|
dataId: title + ' - transact (not payable)' |
||||||
|
}) |
||||||
|
} |
||||||
|
}, [props.lookupOnly, props.funcABI]) |
||||||
|
|
||||||
|
const switchMethodViewOn = () => { |
||||||
|
setToggleContainer(true) |
||||||
|
makeMultiVal() |
||||||
|
} |
||||||
|
|
||||||
|
const switchMethodViewOff = () => { |
||||||
|
setToggleContainer(false) |
||||||
|
const multiValString = getMultiValsString() |
||||||
|
|
||||||
|
if (multiValString) setBasicInput(multiValString) |
||||||
|
} |
||||||
|
|
||||||
|
const getMultiValsString = () => { |
||||||
|
const valArray = multiFields.current |
||||||
|
let ret = '' |
||||||
|
const valArrayTest = [] |
||||||
|
|
||||||
|
for (var j = 0; j < valArray.length; j++) { |
||||||
|
if (ret !== '') ret += ',' |
||||||
|
let elVal = valArray[j] ? valArray[j].value : '' |
||||||
|
|
||||||
|
valArrayTest.push(elVal) |
||||||
|
elVal = elVal.replace(/(^|,\s+|,)(\d+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted number by quoted number
|
||||||
|
elVal = elVal.replace(/(^|,\s+|,)(0[xX][0-9a-fA-F]+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted hex string by quoted hex string
|
||||||
|
try { |
||||||
|
JSON.parse(elVal) |
||||||
|
} catch (e) { |
||||||
|
elVal = '"' + elVal + '"' |
||||||
|
} |
||||||
|
ret += elVal |
||||||
|
} |
||||||
|
const valStringTest = valArrayTest.join('') |
||||||
|
|
||||||
|
if (valStringTest) { |
||||||
|
return ret |
||||||
|
} else { |
||||||
|
return '' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const makeMultiVal = () => { |
||||||
|
let inputString = basicInput |
||||||
|
|
||||||
|
if (inputString) { |
||||||
|
inputString = inputString.replace(/(^|,\s+|,)(\d+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted number by quoted number
|
||||||
|
inputString = inputString.replace(/(^|,\s+|,)(0[xX][0-9a-fA-F]+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted hex string by quoted hex string
|
||||||
|
const inputJSON = JSON.parse('[' + inputString + ']') |
||||||
|
const multiInputs = multiFields.current |
||||||
|
|
||||||
|
for (let k = 0; k < multiInputs.length; k++) { |
||||||
|
if (inputJSON[k]) { |
||||||
|
multiInputs[k].value = JSON.stringify(inputJSON[k]) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const clipboardContent = () => { |
||||||
|
const multiString = getMultiValsString() |
||||||
|
const multiJSON = JSON.parse('[' + multiString + ']') |
||||||
|
let encodeObj |
||||||
|
|
||||||
|
if (props.evmBC) { |
||||||
|
encodeObj = txFormat.encodeData(props.funcABI, multiJSON, props.evmBC) |
||||||
|
} else { |
||||||
|
encodeObj = txFormat.encodeData(props.funcABI, multiJSON, null) |
||||||
|
} |
||||||
|
if (encodeObj.error) { |
||||||
|
console.error(encodeObj.error) |
||||||
|
// throw new Error(encodeObj.error)
|
||||||
|
return encodeObj.error |
||||||
|
} else { |
||||||
|
return encodeObj.data |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleActionClick = () => { |
||||||
|
props.clickCallBack(props.funcABI.inputs, basicInput) |
||||||
|
} |
||||||
|
|
||||||
|
const handleBasicInput = (e) => { |
||||||
|
const value = e.target.value |
||||||
|
|
||||||
|
setBasicInput(value) |
||||||
|
} |
||||||
|
|
||||||
|
const handleExpandMultiClick = () => { |
||||||
|
const valsString = getMultiValsString() |
||||||
|
|
||||||
|
if (valsString) { |
||||||
|
props.clickCallBack(props.funcABI.inputs, valsString) |
||||||
|
} else { |
||||||
|
props.clickCallBack(props.funcABI.inputs, '') |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
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_contractActionsContainerSingle pt-2" style={{ display: toggleContainer ? 'none' : 'flex' }}> |
||||||
|
<button onClick={handleActionClick} title={buttonOptions.title} className={`udapp_instanceButton ${props.widthClass} btn btn-sm ${buttonOptions.classList}`} data-id={buttonOptions.dataId}>{title}</button> |
||||||
|
<input |
||||||
|
className="form-control" |
||||||
|
data-id={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : 'multiParamManagerBasicInputField'} |
||||||
|
placeholder={props.inputs} |
||||||
|
title={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : props.inputs} |
||||||
|
onChange={handleBasicInput} |
||||||
|
style={{ visibility: !((props.funcABI.inputs && props.funcABI.inputs.length > 0) || (props.funcABI.type === 'fallback') || (props.funcABI.type === 'receive')) ? 'hidden' : 'visible' }}> |
||||||
|
</input> |
||||||
|
<i |
||||||
|
className="fas fa-angle-down udapp_methCaret" |
||||||
|
onClick={switchMethodViewOn} |
||||||
|
title={title} |
||||||
|
style={{ visibility: !(props.funcABI.inputs && props.funcABI.inputs.length > 0) ? 'hidden' : 'visible' }}></i> |
||||||
|
</div> |
||||||
|
<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.funcABI.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 content={clipboardContent()} tip='Encode values of input fields & copy to clipboard' icon='fa-clipboard' direction={'left'} /> |
||||||
|
<button onClick={handleExpandMultiClick} title={buttonOptions.title} data-id={buttonOptions.dataId} className={`udapp_instanceButton ${buttonOptions.classList}`}>{ buttonOptions.content }</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
Loading…
Reference in new issue