update modal of proxy functionality

apps/remix-ide/src/blockchain/blockchain.js

@@ -141,9 +141,9 @@ export class Blockchain extends Plugin {
   async deployProxy (proxyData, implementationContractObject) {
     const proxyModal = {
       id: 'confirmProxyDeployment',
-      title: 'ERC1967',
+      title: 'Confirm Deploy Proxy (ERC1967)',
       message: `Confirm you want to deploy an ERC1967 proxy contract that is connected to your implementation.           
-      For more info on ERC1967, see https://docs.openzeppelin.com/contracts/4.x/api/proxy#ERC1967Proxy`,
+      For more info on ERC1967, see: https://docs.openzeppelin.com/contracts/4.x/api/proxy#ERC1967Proxy`,
       modalType: 'modal',
       okLabel: 'OK',
       cancelLabel: 'Cancel',
@@ -189,8 +189,8 @@ export class Blockchain extends Plugin {
   async upgradeProxy(proxyAddress, newImplAddress, data, newImplementationContractObject) {
     const upgradeModal = {
       id: 'confirmProxyDeployment',
-      title: 'ERC1967',
+      title: 'Confirm Update Proxy (ERC1967)',
-      message: `Confirm you want to upgrade your contract to new implementation ${newImplAddress}.`,
+      message: `Confirm you want to update your proxy contract with the new implementation contract's address:  ${newImplAddress}.`,
       modalType: 'modal',
       okLabel: 'OK',
       cancelLabel: 'Cancel',

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

@@ -98,12 +98,20 @@ export const cancelUpgradeMsg = () => (
 
 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.
+   <b>Deploy with Proxy</b> will initiate two (2) transactions:
+    <ol className="pl-3">
+      <li>Deploying the implementation contract</li>
+      <li>Deploying an ERC1967 proxy contract</li>
+    </ol>
   </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.
+    <b>Upgrade with Proxy</b> will initiate two (2) transactions:
+    <ol className="pl-3">
+      <li>Deploying the new implementation contract</li>
+      <li>Updating the proxy contract with the address of the new implementation contract</li>
+    </ol>
   </div>
 )

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

@@ -160,8 +160,12 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     const isProxyDeployment = (deployMode || []).find(mode => mode === 'Deploy with Proxy')
     const isContractUpgrade = (deployMode || []).find(mode => mode === 'Upgrade with Proxy')
   
-    if (isProxyDeployment || isContractUpgrade) {
+    if (isProxyDeployment) {
-      props.modal('ERC1967', isProxyDeployment ? deployWithProxyMsg() : upgradeWithProxyMsg(), 'Proceed', () => {
+      props.modal('Deploy Implementation & Proxy (ERC1967)', deployWithProxyMsg(), 'Proceed', () => {
+        props.createInstance(loadedContractData, props.gasEstimationPrompt, props.passphrasePrompt, props.publishToStorage, props.mainnetPrompt, isOverSizePrompt, args, deployMode)
+      }, 'Cancel', () => {})
+    } else if (isContractUpgrade) {
+      props.modal('Deploy Implementation & Update Proxy', upgradeWithProxyMsg(), 'Proceed', () => {
         props.createInstance(loadedContractData, props.gasEstimationPrompt, props.passphrasePrompt, props.publishToStorage, props.mainnetPrompt, isOverSizePrompt, args, deployMode)
       }, 'Cancel', () => {})
     } else {

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

@@ -273,7 +273,7 @@ export function ContractGUI (props: ContractGUIProps) {
                 className="m-0 form-check-label custom-control-label udapp_checkboxAlign"
                 title="An ERC1967 proxy contract will be deployed along with the selected implementation contract."
               >
-                Deploy With Proxy
+                Deploy with Proxy
               </label>
             </div>
             <div>
@@ -314,9 +314,9 @@ export function ContractGUI (props: ContractGUIProps) {
                 htmlFor="upgradeImplementation"
                 data-id="contractGUIUpgradeImplementationLabel"
                 className="m-0 form-check-label custom-control-label udapp_checkboxAlign"
-                title="The implemetation address will be updated to a new address in the proxy contract."
+                title="The implementation contract will be deployed and then the proxy contract will be updated with new implementation's address."
               >
-                Upgrade With Proxy
+                Upgrade with Proxy
               </label>
             </div>
             <span onClick={handleToggleUpgradeImp}>