Implement modal changes

pull/3390/head^2
ioedeveloper 2 years ago committed by Aniket
parent 9785271722
commit d362fe8c6c
  1. 25
      libs/remix-ui/helper/src/lib/helper-components.tsx
  2. 4
      libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
  3. 4
      libs/remix-ui/modal-dialog/src/lib/types/index.ts
  4. 8
      libs/remix-ui/run-tab/src/lib/actions/deploy.ts
  5. 2
      libs/remix-ui/run-tab/src/lib/actions/index.ts
  6. 12
      libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
  7. 8
      libs/remix-ui/run-tab/src/lib/run-tab.tsx
  8. 16
      libs/remix-ui/run-tab/src/lib/types/index.ts

@ -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>
)

@ -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()

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

@ -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 }
}
}

@ -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)

@ -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 {

@ -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]
})
}

@ -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,

Loading…
Cancel
Save