From beba1ba95d073e50ee678152432c50d62566e969 Mon Sep 17 00:00:00 2001 From: David Disu Date: Wed, 11 May 2022 06:51:50 +0100 Subject: [PATCH] Modify UI for multifield and single fields --- .../run-tab/src/lib/actions/deploy.ts | 10 +- .../src/lib/components/contractGUI.tsx | 158 +++++++++++------- libs/remix-ui/run-tab/src/lib/css/run-tab.css | 1 - libs/remix-ui/run-tab/src/lib/types/index.ts | 2 +- 4 files changed, 100 insertions(+), 71 deletions(-) diff --git a/libs/remix-ui/run-tab/src/lib/actions/deploy.ts b/libs/remix-ui/run-tab/src/lib/actions/deploy.ts index 73b3425216..24f8950af8 100644 --- a/libs/remix-ui/run-tab/src/lib/actions/deploy.ts +++ b/libs/remix-ui/run-tab/src/lib/actions/deploy.ts @@ -157,11 +157,6 @@ export const createInstance = async ( } else { _paq.push(['trackEvent', 'udapp', 'DeployOnly', plugin.REACT_API.networkName]) } - deployMode.forEach(async (mode) => { - const owner = plugin.REACT_API.accounts.selectedAccount - - if (mode === 'Deploy with Proxy') await plugin.call('openzeppelin-proxy', 'execute', address, owner) - }) } let contractMetadata @@ -173,10 +168,11 @@ export const createInstance = async ( const compilerContracts = getCompilerContracts(plugin) const confirmationCb = getConfirmationCb(plugin, dispatch, mainnetPrompt) + const isProxyDeployment = (deployMode || []).find(mode => mode === 'Deploy with Proxy') if (selectedContract.isOverSizeLimit()) { return dispatch(displayNotification('Contract code size over limit', isOverSizePrompt(), 'Force Send', 'Cancel', () => { - deployContract(plugin, selectedContract, args, contractMetadata, compilerContracts, { + deployContract(plugin, selectedContract, !isProxyDeployment ? args : '', contractMetadata, compilerContracts, { continueCb: (error, continueTxExecution, cancelCb) => { continueHandler(dispatch, gasEstimationPrompt, error, continueTxExecution, cancelCb) }, @@ -192,7 +188,7 @@ export const createInstance = async ( return terminalLogger(plugin, log) })) } - deployContract(plugin, selectedContract, args, contractMetadata, compilerContracts, { + deployContract(plugin, selectedContract, !isProxyDeployment ? args : '', contractMetadata, compilerContracts, { continueCb: (error, continueTxExecution, cancelCb) => { continueHandler(dispatch, gasEstimationPrompt, error, continueTxExecution, cancelCb) }, diff --git a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx index 6b664bd512..8ddb26fc24 100644 --- a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx +++ b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx @@ -9,7 +9,7 @@ const txFormat = remixLib.execution.txFormat export function ContractGUI (props: ContractGUIProps) { const [title, setTitle] = useState('') const [basicInput, setBasicInput] = useState('') - const [toggleContainer, setToggleContainer] = useState(false) + // const [toggleContainer, setToggleContainer] = useState(false) const [buttonOptions, setButtonOptions] = useState<{ title: string, content: string, @@ -19,6 +19,7 @@ export function ContractGUI (props: ContractGUIProps) { const [selectedDeployIndex, setSelectedDeployIndex] = useState([]) const [showOptions, setShowOptions] = useState(false) const [hasArgs, setHasArgs] = useState(false) + const [isMultiField, setIsMultiField] = useState(false) const multiFields = useRef>([]) const basicInputRef = useRef() @@ -93,15 +94,26 @@ export function ContractGUI (props: ContractGUIProps) { } } - const switchMethodViewOn = () => { - setToggleContainer(true) - makeMultiVal() - } + useEffect(() => { + if (props.initializerOptions) { + if (props.initializerOptions.inputs.inputs.length > 1) setIsMultiField(true) + else setIsMultiField(false) + } else if (props.funcABI) { + if (props.funcABI.inputs.length > 1) setIsMultiField(true) + else setIsMultiField(false) + } else setIsMultiField(false) + }, [props.initializerOptions, props.funcABI]) - const switchMethodViewOff = () => { - setToggleContainer(false) - const multiValString = getMultiValsString() + // const switchMethodViewOn = () => { + // setToggleContainer(true) + // makeMultiVal() + // } + const switchMethodViewOff = () => { + // setToggleContainer(false) + let multiValString = getMultiValsString() + + multiValString = multiValString.replace(/["]+/g, '') if (multiValString) setBasicInput(multiValString) } @@ -141,7 +153,9 @@ export function ContractGUI (props: ContractGUIProps) { 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 + ']') + inputString = JSON.stringify([inputString]) + + const inputJSON = JSON.parse(inputString) const multiInputs = multiFields.current for (let k = 0; k < multiInputs.length; k++) { @@ -164,7 +178,7 @@ export function ContractGUI (props: ContractGUIProps) { setBasicInput(value) } - const handleExpandMultiClick = () => { + const handleMultiValsSubmit = () => { const valsString = getMultiValsString() if (valsString) { @@ -189,37 +203,44 @@ export function ContractGUI (props: ContractGUIProps) { return (
-
+
{ - props.isDeploy && (props.deployOption || []).length > 0 ? + props.isDeploy && !isMultiField && (props.deployOption || []).length > 0 && { - (props.deployOption).map(({ title, active }, index) => setSelectedDeploy(index)}> { selectedDeployIndex.includes(index) ? ✓ {title} : {title} }) + (props.deployOption).map(({ title, active }, index) => setSelectedDeploy(index)} key={index}> { selectedDeployIndex.includes(index) ? ✓ {title} : {title} }) } - : + } { - props.isDeploy && props.initializerOptions && (props.initializerOptions.inputs.inputs.length > 0) ? - <> - 0) || (props.initializerOptions.inputs.type === 'fallback') || (props.initializerOptions.inputs.type === 'receive')) ? 'hidden' : 'visible' }} /> - 0) ? 'hidden' : 'visible' }}> - - : + props.isDeploy && !isMultiField && !props.deployOption && + + } + { + props.isDeploy && !isMultiField && props.initializerOptions && + <> + 0) || (props.initializerOptions.inputs.type === 'fallback') || (props.initializerOptions.inputs.type === 'receive')) ? 'hidden' : 'visible' }} /> + {/* 0) ? 'hidden' : 'visible' }}> + */} + + } + { + props.isDeploy && !isMultiField && props.funcABI && <> 0) || (props.funcABI.type === 'fallback') || (props.funcABI.type === 'receive')) ? 'hidden' : 'visible' }} /> - 0) ? 'hidden' : 'visible' }}> - + */} }
- { - props.isDeploy && props.initializerOptions && (props.initializerOptions.inputs.inputs.length > 0) ? -
+ { isMultiField ? + props.isDeploy && props.initializerOptions ? +
+
+ {/*
+
{title}
+ +
*/} +
+ {props.initializerOptions.inputs.inputs.map((inp, index) => { + return ( +
+ + { multiFields.current[index] = el }} className="form-control" placeholder={inp.type} title={inp.name} data-id={`multiParamManagerInput${inp.name}`} /> +
) + })} +
+
+ {/* */} + { + (props.deployOption || []).length > 0 ? + + + + + { + (props.deployOption).map(({ title, active }, index) => setSelectedDeploy(index)} key={index}> { selectedDeployIndex.includes(index) ? ✓ {title} : {title} }) + } + + : + + } +
+
+
: +
-
+ {/*
{title}
-
+
*/}
- {props.initializerOptions.inputs.inputs.map((inp, index) => { + {props.funcABI.inputs.map((inp, index) => { return (
@@ -256,32 +310,12 @@ export function ContractGUI (props: ContractGUIProps) { })}
- {/* */} - + +
-
: -
-
-
-
{title}
- -
-
- {props.funcABI.inputs.map((inp, index) => { - return ( -
- - { multiFields.current[index] = el }} className="form-control" placeholder={inp.type} title={inp.name} data-id={`multiParamManagerInput${inp.name}`} /> -
) - })} -
-
- - -
-
+ : null }
) diff --git a/libs/remix-ui/run-tab/src/lib/css/run-tab.css b/libs/remix-ui/run-tab/src/lib/css/run-tab.css index a0d588965c..60cf8ad00f 100644 --- a/libs/remix-ui/run-tab/src/lib/css/run-tab.css +++ b/libs/remix-ui/run-tab/src/lib/css/run-tab.css @@ -401,7 +401,6 @@ } .udapp_contractActionsContainerMultiInner { width: 100%; - padding: 16px 8px 16px 14px; border-radius: 3px; margin-bottom: 8px; } diff --git a/libs/remix-ui/run-tab/src/lib/types/index.ts b/libs/remix-ui/run-tab/src/lib/types/index.ts index 9d03574518..63a3e775c9 100644 --- a/libs/remix-ui/run-tab/src/lib/types/index.ts +++ b/libs/remix-ui/run-tab/src/lib/types/index.ts @@ -259,7 +259,7 @@ export interface ContractGUIProps { disabled?: boolean, isDeploy?: boolean, deployOption?: { title: DeployMode, active: boolean }[], - initializerOptions: DeployOption + initializerOptions?: DeployOption } export interface MainnetProps { network: Network,