Implement modal changes

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

@@ -1,3 +1,4 @@
+import { LayoutCompatibilityReport } from '@openzeppelin/upgrades-core/dist/storage/report'
 import React from 'react'
 
 export const fileChangedToastMsg = (from: string, path: string) => (
@@ -115,3 +116,27 @@ export const upgradeWithProxyMsg = () => (
     </ol>
   </div>
 )
+
+export const unavailableProxyLayoutMsg = () => (
+  <div>
+    <p>Previous contract implementation not available for upgrade comparison. <br /> A new storage layout will be saved for future upgrades.</p>
+  </div>
+)
+
+export const upgradeReportMsg = (report: LayoutCompatibilityReport) => (
+  <div>
+    <div className="py-2 ml-2 mb-1 align-self-end mb-2 d-flex">
+      <span className="align-self-center pl-4 mt-1">
+        <i className="pr-2 text-warning far fa-exclamation-triangle" aria-hidden="true" style={{ fontSize: 'xxx-large', fontWeight: 'lighter' }}></i>
+        </span>
+      <div className="d-flex flex-column">
+        <span className="pl-4 mt-1">The storage layout of new implementation is NOT</span>
+        <span className="pl-4 mt-1">compatible with the previous implementation.</span>
+        <span className="pl-4 mt-1">Your contract's storage may be partially or fully erased!</span>
+      </div>
+    </div>
+    <div className='pl-4 text-danger'>
+      { report.explain() }
+    </div>
+  </div>
+)

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx

@@ -98,7 +98,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
             {/* todo add autofocus ^^ */}
             { props.okLabel && <button
               data-id={`${props.id}-modal-footer-ok-react`}
-              className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')}
+              className={'modal-ok btn btn-sm ' + (props.okBtnClass ? props.okBtnClass : state.toggleBtn ? 'btn-dark' : 'btn-light')}
               disabled={props.validation && !props.validation.valid}
               onClick={() => {
                 if (props.validation && !props.validation.valid) return
@@ -111,7 +111,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
             }
             { props.cancelLabel && <button
               data-id={`${props.id}-modal-footer-cancel-react`}
-              className={'modal-cancel btn btn-sm ' + (state.toggleBtn ? 'btn-light' : 'btn-dark')}
+              className={'modal-cancel btn btn-sm ' + (props.cancelBtnClass ? props.cancelBtnClass : state.toggleBtn ? 'btn-light' : 'btn-dark')}
               data-dismiss="modal"
               onClick={() => {
                 if (props.cancelFn) props.cancelFn()

libs/remix-ui/modal-dialog/src/lib/types/index.ts

@@ -22,5 +22,7 @@ export interface ModalDialogProps {
   children?: React.ReactNode,
   resolve?: (value?:any) => void,
   next?: () => void,
-  data?: any
+  data?: any,
+  okBtnClass?: string,
+  cancelBtnClass?: string
 }

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

@@ -361,7 +361,7 @@ export const getNetworkProxyAddresses = async (plugin: RunTab, dispatch: React.D
   }
 }
 
-export const isValidContractUpgrade = async (plugin: RunTab, dispatch: React.Dispatch<any>, proxyAddress: string, newContractName: string, solcInput: SolcInput, solcOutput: SolcOutput) => {
+export const isValidContractUpgrade = async (plugin: RunTab, proxyAddress: string, newContractName: string, solcInput: SolcInput, solcOutput: SolcOutput) => {
   // build current contract first to get artefacts.
   const network = plugin.blockchain.networkStatus.network
   const identifier = network.name === 'custom' ? network.name + '-' + network.id : network.name
@@ -383,12 +383,12 @@ export const isValidContractUpgrade = async (plugin: RunTab, dispatch: React.Dis
 
           return report
         } else {
-          return { ok: false, pass: false, warning: 'Previous contract implementation not available for upgrade comparison.' }
+          return { ok: false, pass: false, warning: true }
         }
       } else {
-        return { ok: false, pass: false, warning: 'Previous contract implementation not available for upgrade comparison.' }
+        return { ok: false, pass: false, warning: true }
       }
   } else {
-    return { ok: false, pass: false, warning: 'Previous contract implementation not available for upgrade comparison.' }
+    return { ok: false, pass: false, warning: true }
   }
 }

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

@@ -64,4 +64,4 @@ export const setNetworkName = (networkName: string) => setNetworkNameFromProvide
 export const updateSelectedContract = (contractName) => setSelectedContract(dispatch, contractName)
 export const syncContracts = () => syncContractsInternal(plugin)
 export const isValidProxyAddress = (address: string) => isValidContractAddress(plugin, address)
-export const isValidProxyUpgrade = (proxyAddress: string, contractName: string, solcInput: SolcInput, solcOuput: SolcOutput) => isValidContractUpgrade(plugin, dispatch, proxyAddress, contractName, solcInput, solcOuput)
+export const isValidProxyUpgrade = (proxyAddress: string, contractName: string, solcInput: SolcInput, solcOuput: SolcOutput) => isValidContractUpgrade(plugin, proxyAddress, contractName, solcInput, solcOuput)

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

@@ -4,7 +4,7 @@ import { FormattedMessage, useIntl } from 'react-intl'
 import * as remixLib from '@remix-project/remix-lib'
 import { ContractGUIProps } from '../types'
 import { CopyToClipboard } from '@remix-ui/clipboard'
-import { CustomTooltip, ProxyAddressToggle, ProxyDropdownMenu, shortenDate, shortenProxyAddress } from '@remix-ui/helper'
+import { CustomTooltip, ProxyAddressToggle, ProxyDropdownMenu, shortenDate, shortenProxyAddress, unavailableProxyLayoutMsg, upgradeReportMsg } from '@remix-ui/helper'
 import { Dropdown } from 'react-bootstrap'
 
 const txFormat = remixLib.execution.txFormat
@@ -191,15 +191,13 @@ export function ContractGUI (props: ContractGUIProps) {
             !proxyAddressError && props.clickCallBack(props.funcABI.inputs, proxyAddress, ['Upgrade with Proxy'])
           } else {
             if (upgradeReport.warning) {
-              props.modal('Warning', upgradeReport.warning, 'Proceed', () => {
+              props.modal('Proxy Upgrade Warning', unavailableProxyLayoutMsg(), 'Proceed', () => {
                 !proxyAddressError && props.clickCallBack(props.funcABI.inputs, proxyAddress, ['Upgrade with Proxy'])
-              }, 'Cancel', () => {})
+              }, 'Cancel', () => {}, 'btn-warning', 'btn-secondary')
             } else {
-              props.modal('Proxy Upgrade Error', `New deployment storage layout is incompactible with previous deployment.\n
-              ${upgradeReport.ops.map((failedCase) => `"${failedCase.kind}": ${failedCase.original.label}`).join('\n')}\n
-              Do you want to continue?`, 'Proceed', () => {
+              props.modal('Proxy Upgrade Error', upgradeReportMsg(upgradeReport), 'Continue anyway ', () => {
                 !proxyAddressError && props.clickCallBack(props.funcABI.inputs, proxyAddress, ['Upgrade with Proxy'])
-              }, 'Cancel', () => {})
+              }, 'Cancel', () => {}, 'btn-warning', 'btn-secondary')
             }
         }
       } else {

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

@@ -81,7 +81,9 @@ export function RunTabUI (props: RunTabProps) {
           okLabel: modals[0].okLabel,
           okFn: modals[0].okFn,
           cancelLabel: modals[0].cancelLabel,
-          cancelFn: modals[0].cancelFn
+          cancelFn: modals[0].cancelFn,
+          okBtnClass: modals[0].okBtnClass,
+          cancelBtnClass: modals[0].cancelBtnClass
         }
         return focusModal
       })
@@ -120,9 +122,9 @@ export function RunTabUI (props: RunTabProps) {
     dispatch(setIpfsCheckedState(value))
   }
 
-  const modal = (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
+  const modal = (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void, okBtnClass?: string, cancelBtnClass?: string) => {
     setModals(modals => {
-      modals.push({ message, title, okLabel, okFn, cancelLabel, cancelFn })
+      modals.push({ message, title, okLabel, okFn, cancelLabel, cancelFn, okBtnClass, cancelBtnClass })
       return [...modals]
     })
   }

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

@@ -140,7 +140,7 @@ export interface SettingsProps {
   createNewBlockchainAccount: (cbMessage: JSX.Element) => void,
   setPassphrase: (passphrase: string) => void,
   setMatchPassphrase: (passphrase: string) => void,
-  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
+  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void, okBtnClass?: string, cancelBtnClass?: string) => void,
   tooltip: (toasterMsg: string) => void,
   signMessageWithAddress: (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => void,
   passphrase: string,
@@ -184,7 +184,7 @@ export interface AccountProps {
   setPassphrase: (passphrase: string) => void,
   setMatchPassphrase: (passphrase: string) => void,
   tooltip: (toasterMsg: string) => void,
-  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
+  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void, okBtnClass?: string, cancelBtnClass?: string) => void,
   signMessageWithAddress: (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => void,
   passphrase: string
 }
@@ -239,7 +239,7 @@ export interface ContractDropdownProps {
   },
   syncContracts: () => void,
   getSelectedContract: (contractName: string, compiler: CompilerAbstract) => ContractData,
-  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
+  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void, okBtnClass?: string, cancelBtnClass?: string) => void,
   passphrase: string,
   setPassphrase: (passphrase: string) => void,
   createInstance: (
@@ -265,7 +265,7 @@ export interface ContractDropdownProps {
   setSelectedContract: (contractName: string) => void
   remixdActivated: boolean,
   isValidProxyAddress?: (address: string) => Promise<boolean>,
-  isValidProxyUpgrade?: (proxyAddress: string, contractName: string, solcInput: SolcInput, solcOuput: SolcOutput) => Promise<LayoutCompatibilityReport | { ok: boolean, pass: boolean, warning: string }>,
+  isValidProxyUpgrade?: (proxyAddress: string, contractName: string, solcInput: SolcInput, solcOuput: SolcOutput) => Promise<LayoutCompatibilityReport | { ok: boolean, pass: boolean, warning: boolean }>,
   proxy: { deployments: { address: string, date: string, contractName: string }[] }
 }
 
@@ -323,7 +323,9 @@ export interface Modal {
   okLabel: string
   okFn: () => void
   cancelLabel: string
-  cancelFn: () => void
+  cancelFn: () => void,
+  okBtnClass?: string,
+  cancelBtnClass?: string
 }
 
 export type DeployMode = 'Deploy with Proxy' | 'Upgrade with Proxy'
@@ -363,8 +365,8 @@ export interface ContractGUIProps {
   initializerOptions?: DeployOption,
   proxy?: { deployments: { address: string, date: string, contractName: string }[] },
   isValidProxyAddress?: (address: string) => Promise<boolean>,
-  isValidProxyUpgrade?: (proxyAddress: string) => Promise<LayoutCompatibilityReport | { ok: boolean, pass: boolean, warning: string }>,
-  modal?: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void
+  isValidProxyUpgrade?: (proxyAddress: string) => Promise<LayoutCompatibilityReport | { ok: boolean, pass: boolean, warning: boolean }>,
+  modal?: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void, okBtnClass?: string, cancelBtnClass?: string) => void
 }
 export interface MainnetProps {
   network: Network,