Manage options in list

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

@@ -1,6 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import React, { useEffect, useRef, useState } from 'react'
-import { ContractDropdownProps, DeployOptions } from '../types'
+import { ContractDropdownProps, DeployMode } from '../types'
 import { ContractData, FuncABI } from '@remix-project/core-plugin'
 import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
@@ -143,20 +143,15 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     }
   }
 
-  const clickCallback = (inputs, value, deployMode?: DeployOptions) => {
+  const clickCallback = (inputs, value, deployMode?: DeployMode[]) => {
     createInstance(loadedContractData, value, deployMode)
   }
 
-  const createInstance = (selectedContract, args, deployMode?: DeployOptions) => {
+  const createInstance = (selectedContract, args, deployMode?: DeployMode[]) => {
     if (selectedContract.bytecodeObject.length === 0) {
       return props.modal('Alert', 'This contract may be abstract, it may not implement an abstract parent\'s methods completely or it may not invoke an inherited contract\'s constructor correctly.', 'OK', () => {})
     }
-    if (deployMode === 'Deploy') {
-      props.createInstance(loadedContractData, props.gasEstimationPrompt, props.passphrasePrompt, props.logBuilder, props.publishToStorage, props.mainnetPrompt, isOverSizePrompt, args)
-    } else if (deployMode === 'Deploy with Proxy') {
-      // await deploy proxy first
-      props.createInstance(loadedContractData, props.gasEstimationPrompt, props.passphrasePrompt, props.logBuilder, props.publishToStorage, props.mainnetPrompt, isOverSizePrompt, args)
-    }
+    props.createInstance(loadedContractData, props.gasEstimationPrompt, props.passphrasePrompt, props.logBuilder, props.publishToStorage, props.mainnetPrompt, isOverSizePrompt, args)
   }
 
   const atAddressChanged = (event) => {

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

@@ -16,17 +16,8 @@ export function ContractGUI (props: ContractGUIProps) {
     classList: string,
     dataId: string
   }>({ title: '', content: '', classList: '', dataId: '' })
-  const [deployOptions] = useState<{
-    title: DeployOptions,
-    active: boolean
-  }[]>([{
-    title: 'Deploy',
-    active: true
-  }, {
-    title: 'Deploy with Proxy',
-    active: false
-  }])
-  const [selectedDeployIndex, setSelectedDeployIndex] = useState<number>(0)
+  const [selectedDeployIndex, setSelectedDeployIndex] = useState<number[]>([])
+  const [showOptions, setShowOptions] = useState<boolean>(false)
   const multiFields = useRef<Array<HTMLInputElement | null>>([])
   const basicInputRef = useRef<HTMLInputElement>()
 
@@ -154,7 +145,9 @@ export function ContractGUI (props: ContractGUIProps) {
   }
 
   const handleActionClick = () => {
-    props.clickCallBack(props.funcABI.inputs, basicInput, props.isDeploy ? deployOptions[selectedDeployIndex].title : null)
+    const deployMode = selectedDeployIndex.map(index => props.deployOptions[index].title)
+
+    props.clickCallBack(props.funcABI.inputs, basicInput, props.isDeploy ? deployMode : null)
   }
 
   const handleBasicInput = (e) => {
@@ -174,7 +167,16 @@ export function ContractGUI (props: ContractGUIProps) {
   }
 
   const setSelectedDeploy = (index: number) => {
-    setSelectedDeployIndex(index)
+    const indexes = selectedDeployIndex.slice()
+    const existingIndex = indexes.findIndex(value => value === index)
+
+    if (existingIndex > -1) indexes.splice(existingIndex, 1)
+    else indexes.push(index)
+    setSelectedDeployIndex(indexes)
+  }
+
+  const toggleOptions = () => {
+    setShowOptions(!showOptions)
   }
 
   return (
@@ -182,12 +184,12 @@ export function ContractGUI (props: ContractGUIProps) {
       <div className="udapp_contractActionsContainerSingle pt-2" style={{ display: toggleContainer ? 'none' : 'flex' }}>
         {
           props.isDeploy ? 
-          <Dropdown as={ButtonGroup}>
-            <button onClick={handleActionClick} title={buttonOptions.title} className={`udapp_instanceButton ${props.widthClass} btn btn-sm ${buttonOptions.classList}`} data-id={buttonOptions.dataId}>{deployOptions[selectedDeployIndex].title}</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 }} />
+          <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">
               {
-                deployOptions.map(({ title, active }, index) => <Dropdown.Item onClick={() => setSelectedDeploy(index)}> { index === selectedDeployIndex ? <span>&#10003; {title} </span> : <span className="pl-3">{title}</span> }</Dropdown.Item>)
+                (props.deployOptions || []).map(({ title, active }, index) => <Dropdown.Item onClick={() => setSelectedDeploy(index)}> { selectedDeployIndex.includes(index) ? <span>&#10003; {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>

libs/remix-ui/run-tab/src/lib/types/index.ts

@@ -220,18 +220,23 @@ export interface Modal {
   cancelFn: () => void
 }
 
-export type DeployOptions = 'Deploy' | 'Deploy with Proxy'
+export type DeployMode = 'Deploy with Proxy'
+export interface DeployOptions {
+  title: DeployMode,
+  active: boolean
+}
 
 export interface ContractGUIProps {
   title?: string,
   funcABI: FuncABI,
   inputs: any,
-  clickCallBack: (inputs: { name: string, type: string }[], input: string, deployMode?: DeployOptions) => void,
+  clickCallBack: (inputs: { name: string, type: string }[], input: string, deployMode?: DeployMode[]) => void,
   widthClass?: string,
   evmBC: any,
   lookupOnly: boolean,
   disabled?: boolean,
-  isDeploy?: boolean
+  isDeploy?: boolean,
+  deployOptions?: DeployOptions[]
 }
 export interface MainnetProps {
   network: Network,

package.json

@@ -163,6 +163,7 @@
     "ansi-gray": "^0.1.1",
     "async": "^2.6.2",
     "axios": ">=0.26.0",
+    "bootstrap": "^5.1.3",
     "brace": "^0.8.0",
     "change-case": "^4.1.1",
     "chokidar": "^2.1.8",