Create simple deploy workflow

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 } from '../types'
+import { ContractDropdownProps, DeployOptions } from '../types'
 import { ContractData, FuncABI } from '@remix-project/core-plugin'
 import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
@@ -143,15 +143,20 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     }
   }
 
-  const clickCallback = (inputs, value) => {
-    createInstance(loadedContractData, value)
+  const clickCallback = (inputs, value, deployMode?: DeployOptions) => {
+    createInstance(loadedContractData, value, deployMode)
   }
 
-  const createInstance = (selectedContract, args) => {
+  const createInstance = (selectedContract, args, deployMode?: DeployOptions) => {
     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)
+    }
   }
 
   const atAddressChanged = (event) => {
@@ -226,7 +231,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
         <div className="udapp_deployDropdown">
           { ((contractList[currentFile] && contractList[currentFile].filter(contract => contract)) || []).length <= 0 ? 'No compiled contracts'
             : loadedContractData ? <div>
-              <ContractGUI title='Deploy' funcABI={constructorInterface} clickCallBack={clickCallback} inputs={constructorInputs} widthClass='w-50' evmBC={loadedContractData.bytecodeObject} lookupOnly={false} />
+              <ContractGUI title='Deploy' isDeploy={true} funcABI={constructorInterface} clickCallBack={clickCallback} inputs={constructorInputs} widthClass='w-50' evmBC={loadedContractData.bytecodeObject} lookupOnly={false} />
               <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
                 <input
                   id="deployAndRunPublishToIPFS"

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

@@ -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 } from '../types'
+import { ContractGUIProps, DeployOptions } from '../types'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { ButtonGroup, Dropdown } from 'react-bootstrap'
 
@@ -16,6 +16,17 @@ 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 multiFields = useRef<Array<HTMLInputElement | null>>([])
   const basicInputRef = useRef<HTMLInputElement>()
 
@@ -143,7 +154,7 @@ export function ContractGUI (props: ContractGUIProps) {
   }
 
   const handleActionClick = () => {
-    props.clickCallBack(props.funcABI.inputs, basicInput)
+    props.clickCallBack(props.funcABI.inputs, basicInput, props.isDeploy ? deployOptions[selectedDeployIndex].title : null)
   }
 
   const handleBasicInput = (e) => {
@@ -162,17 +173,25 @@ export function ContractGUI (props: ContractGUIProps) {
     }
   }
 
+  const setSelectedDeploy = (index: number) => {
+    setSelectedDeployIndex(index)
+  }
+
   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' }}>
+        {
+          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}>{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 }} />
+            <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.Menu className="deploy-items border-0">
-            <Dropdown.Item active={false}>&#10003; Deploy</Dropdown.Item>
-            <Dropdown.Item>Deploy with Proxy</Dropdown.Item>
+              {
+                deployOptions.map(({ title, active }, index) => <Dropdown.Item onClick={() => setSelectedDeploy(index)}> { index === selectedDeployIndex ? <span>&#10003; {title} </span> : <span className="pl-3">{title}</span> }</Dropdown.Item>)
+              }
             </Dropdown.Menu>
-        </Dropdown>
+          </Dropdown> : <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'}

libs/remix-ui/run-tab/src/lib/css/run-tab.css

@@ -526,4 +526,9 @@
   padding: 0.25rem 0.25rem;
   width:auto;
 }
+.dropdown-item.hover, .dropdown-item:hover {
+  color: #fff;
+  text-decoration: none;
+  background-color: #007aa6;
+}
 

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

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