Added pre-deployment modal

libs/remix-ui/helper/src/lib/helper-components.tsx

@@ -95,3 +95,15 @@ export const cancelUpgradeMsg = () => (
     <b>Upgrade with proxy cancelled.</b>
   </div>
 )
+
+export const deployWithProxyMsg = () => (
+  <div>
+    NOTE: Deploy With Proxy will initiate two (2) transactions. The first is for the deployment of your implementation contract and the second will be a deployment of an ERC1967 proxy contract.
+  </div>
+)
+
+export const upgradeWithProxyMsg = () => (
+  <div>
+    NOTE: Upgrade With Proxy will initiate two (2) transactions. The first is for the deployment of your implementation contract and the second will intiate a call to the upgradeTo function in your proxy contract.
+  </div>
+)

libs/remix-ui/run-tab/src/lib/actions/events.ts

@@ -6,7 +6,6 @@ import { addDeployOption, clearAllInstances, clearRecorderCount, fetchContractLi
 import { CompilerAbstract } from '@remix-project/remix-solidity'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
-import { ContractSources } from "../types"
 
 export const setupEvents = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
   plugin.blockchain.events.on('newTransaction', (tx, receipt) => {
@@ -93,7 +92,7 @@ export const setupEvents = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
   })
 }
 
-const broadcastCompilationResult = async (plugin: RunTab, dispatch: React.Dispatch<any>, file, source, languageVersion, data: ContractSources, input?) => {
+const broadcastCompilationResult = async (plugin: RunTab, dispatch: React.Dispatch<any>, file, source, languageVersion, data, input?) => {
   // TODO check whether the tab is configured
   const compiler = new CompilerAbstract(languageVersion, data, source, input)
 

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

@@ -4,6 +4,7 @@ import { ContractDropdownProps, DeployMode } from '../types'
 import { ContractData, FuncABI } from '@remix-project/core-plugin'
 import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
+import { deployWithProxyMsg, upgradeWithProxyMsg } from '@remix-ui/helper'
 
 export function ContractDropdownUI (props: ContractDropdownProps) {
   const [abiLabel, setAbiLabel] = useState<{
@@ -156,7 +157,16 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
       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 ((selectedContract.name !== currentContract) && (selectedContract.name === 'ERC1967Proxy')) selectedContract.name = currentContract
-    props.createInstance(loadedContractData, props.gasEstimationPrompt, props.passphrasePrompt, props.publishToStorage, props.mainnetPrompt, isOverSizePrompt, args, deployMode)
+    const isProxyDeployment = (deployMode || []).find(mode => mode === 'Deploy with Proxy')
+    const isContractUpgrade = (deployMode || []).find(mode => mode === 'Upgrade with Proxy')
+  
+    if (isProxyDeployment || isContractUpgrade) {
+      props.modal('ERC1967', isProxyDeployment ? deployWithProxyMsg() : upgradeWithProxyMsg(), 'Proceed', () => {
+        props.createInstance(loadedContractData, props.gasEstimationPrompt, props.passphrasePrompt, props.publishToStorage, props.mainnetPrompt, isOverSizePrompt, args, deployMode)
+      }, 'Cancel', () => {})
+    } else {
+      props.createInstance(loadedContractData, props.gasEstimationPrompt, props.passphrasePrompt, props.publishToStorage, props.mainnetPrompt, isOverSizePrompt, args, deployMode)
+    }
   }
 
   const atAddressChanged = (event) => {