modal

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

@@ -1,5 +1,5 @@
 export type ChainInfo = {
-  id: number
+  id: number | string
   name: string
 }
 
@@ -200,15 +200,22 @@ export const evmMap: Map<HardFork, { chainId: ChainInfo[] }> = new Map([
 ])
 
 export function getCompatibleChains(fork: HardFork): ChainInfo[] {
-  const forkData = evmMap.get(fork);
-  return forkData ? forkData.chainId : [];
+  const forkData = evmMap.get(fork)
+  return forkData ? forkData.chainId : []
 }
 
 export function isChainCompatible(fork: HardFork, chainId: number): boolean {
-  const compatibleChains = getCompatibleChains(fork);
-  return compatibleChains.some(chain => chain.id === chainId);
+  const compatibleChains = getCompatibleChains(fork)
+  return compatibleChains.some(chain => chain.id === chainId)
 }
 
 export function isChainCompatibleWithAnyFork(chainId: number, forks: HardFork[]): boolean {
-  return forks.some(fork => isChainCompatible(fork, chainId));
+  return forks.some(fork => isChainCompatible(fork, chainId))
+}
+
+export function getCompatibleChain(fork: HardFork, chainId: number): ChainInfo | undefined {
+  const compatibleChains = getCompatibleChains(fork)
+  console.log('fork in getCompatibleChain', fork)
+  console.log('compatibleChains', compatibleChains)
+  return compatibleChains.find(chain => chain.id === chainId)
 }

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

@@ -462,6 +462,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
             <div>
               <ContractGUI
                 title={intl.formatMessage({ id: 'udapp.deploy' })}
+                getCompilerDetails={props.getCompilerDetails}
                 isDeploy={true}
                 deployOption={deployOptions[currentFile] && deployOptions[currentFile][currentContract] ? deployOptions[currentFile][currentContract].options : null}
                 initializerOptions={

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

@@ -6,6 +6,7 @@ import { ContractGUIProps } from '../types'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { CustomTooltip, ProxyAddressToggle, ProxyDropdownMenu, shortenDate, shortenProxyAddress, unavailableProxyLayoutMsg, upgradeReportMsg } from '@remix-ui/helper'
 import { Dropdown } from 'react-bootstrap'
+import { getCompatibleChains, isChainCompatible, isChainCompatibleWithAnyFork } from '../actions/evmmap'
 
 const txFormat = remixLib.execution.txFormat
 const txHelper = remixLib.execution.txHelper
@@ -171,8 +172,20 @@ export function ContractGUI(props: ContractGUIProps) {
     }
   }
 
+  const checkUrlLocationForEvmVersion = async () => {
+    // if the evmVersion is not provided in the url, we use the default value
+    // and the default would be the latest evmFork, which is now cancun.
+    // checking both url and compiler details
+    const url = window.location.href
+    const regVersion = url.match(/evmVersion=([a-zA-Z]+)/)?.[1]
+    const fetched = await props.getCompilerDetails()
+    return { regVersion, fetched }
+  }
+
   const handleActionClick = async () => {
     props.getVersion()
+    const { regVersion, fetched } = await checkUrlLocationForEvmVersion()
+    console.log('checkUrlLocationForEvmVersion', { regVersion, fetched })
     if (deployState.deploy) {
       const proxyInitializeString = getMultiValsString(initializeFields.current)
       props.clickCallBack(props.initializerOptions.inputs.inputs, proxyInitializeString, ['Deploy with Proxy'])

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

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-use-before-define
-import React from 'react'
+import React, { useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { EnvironmentProps, Provider } from '../types'
 import { Dropdown } from 'react-bootstrap'

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

@@ -62,6 +62,7 @@ export function InstanceContainerUI(props: InstanceContainerProps) {
                 editInstance={props.editInstance}
                 solcVersion={props.solcVersion}
                 getVersion={props.getVersion}
+                getCompilerDetails={props.getCompilerDetails}
               />
             )
           })}

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

@@ -12,7 +12,7 @@ export function SettingsUI(props: SettingsProps) {
 
   return (
     <div className="udapp_settings">
-      <EnvironmentUI selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} />
+      <EnvironmentUI runTabPlugin={props.runTabPlugin} selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} />
       <NetworkUI networkName={props.networkName} />
       <AccountUI
         addFile={props.addFile}

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

@@ -326,6 +326,7 @@ export function UniversalDappUI(props: UdappProps) {
                 <div key={index}>
                   <ContractGUI
                     getVersion={props.getVersion}
+                    getCompilerDetails={props.getCompilerDetails}
                     funcABI={funcABI}
                     clickCallBack={(valArray: {name: string; type: string}[], inputsValues: string) => {
                       runTransaction(lookupOnly, funcABI, valArray, inputsValues, index)

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

@@ -56,6 +56,7 @@ import { PassphrasePrompt } from './components/passphrase'
 import { MainnetPrompt } from './components/mainnet'
 import { ScenarioPrompt } from './components/scenario'
 import { setIpfsCheckedState, setRemixDActivated } from './actions/payload'
+import { getCompatibleChain, getCompatibleChains, HardFork, isChainCompatible, isChainCompatibleWithAnyFork } from './actions/evmmap'
 
 export function RunTabUI(props: RunTabProps) {
   const { plugin } = props
@@ -85,6 +86,7 @@ export function RunTabUI(props: RunTabProps) {
   const REACT_API = { runTab }
   const currentfile = plugin.config.get('currentFile')
   const [solcVersion, setSolcVersion] = useState<{version: string, canReceive: boolean}>({ version: '', canReceive: true })
+  const [chainEvmCompat, setChainEvmCompat] = useState()
 
   const getVersion = () => {
     let version = '0.8.25'
@@ -102,6 +104,64 @@ export function RunTabUI(props: RunTabProps) {
     }
   }
 
+  const getCompilerDetails = async () => await checkEvmChainCompatibility()
+
+  const returnCompatibleChain = async (evmVersion: HardFork, targetChainId: number) => {
+    return getCompatibleChain(evmVersion ?? 'cancun', targetChainId)
+  }
+
+  const checkEvmChainCompatibilityOkFunction = async (targetChainId: number, fetchDetails: any, currentFile: string) => {
+    () => {
+      const compatibleChain = returnCompatibleChain(fetchDetails.evmVersion, targetChainId)
+      console.log('compatibleChain', compatibleChain)
+      plugin.call('manager', 'activatePlugin', 'environmentExplorer')
+      plugin.call('tabs', 'focus', 'environmentExplorer')
+      plugin.call('environmentExplorer', 'setChain', compatibleChain)
+      plugin.call('environmentExplorer', 'setEvmVersion', 'paris')
+      plugin.call('solidity', 'compile', currentFile)
+    }
+  }
+
+  const checkEvmChainCompatibilityCancelFunction = async (targetChainId: number, fetchDetails: any, currentFile: string) => {
+    () => {
+      plugin.call('manager', 'activatePlugin', 'environmentExplorer')
+      plugin.call('tabs', 'focus', 'environmentExplorer')
+      plugin.call('environmentExplorer', 'setChain', targetChainId)
+      plugin.call('environmentExplorer', 'setEvmVersion', fetchDetails.evmVersion)
+      plugin.call('solidity', 'compile', currentFile)
+    }
+  }
+
+  const checkEvmChainCompatibility = async () => {
+    const isVm = await plugin.call('blockchain', 'getProvider') // vms are exempt from this treatment
+    const fetchDetails = await plugin.call('solidity', 'getCompilerQueryParameters') //compiler details including evmVersion
+    console.log('isVm', isVm)
+    if (!isVm.startsWith('vm')) {
+      const targetChainId = runTab.chainId ? parseInt(runTab.chainId) : runTab.chainId
+      console.log('targetChainId', runTab.chainId)
+
+      const IsCompatible = isChainCompatible(fetchDetails.evmVersion ?? 'cancun', targetChainId)
+      console.log('evmVersion matches everywhere', fetchDetails.evmVersion)
+      console.log('compiler stuff', fetchDetails)
+      console.log('chain is compatible', IsCompatible)
+      const currentFile = await plugin.call('fileManager', 'getCurrentFile')
+      if (!IsCompatible) {
+        console.log('chain is undefined')
+        //show modal
+        plugin.call('notification', 'modal', {
+          id: 'evm-incompatible',
+          title: 'Incompatible EVM - ChainId Detected',
+          message: `The selected chain is not compatible with the selected compiler version. Please select a one of the two options below.`,
+          modalType: 'modal',
+          okLabel: 'Switch EVM and Recompile',
+          cancelLabel: 'Do not Switch EVM',
+          okFn: checkEvmChainCompatibilityOkFunction,
+          cancelFn: checkEvmChainCompatibilityCancelFunction
+        })
+      }
+    }
+  }
+
   useEffect(() => {
     if (!props.initialState) {
       initRunTab(plugin, true)(dispatch)
@@ -294,6 +354,7 @@ export function RunTabUI(props: RunTabProps) {
             gasLimit={runTab.gasLimit}
             setGasFee={setGasFeeAmount}
             providers={runTab.providers}
+            runTabPlugin={plugin}
             setExecutionContext={setExecutionEnvironment}
             createNewBlockchainAccount={createNewAddress}
             setPassphrase={setPassphraseModal}
@@ -331,6 +392,7 @@ export function RunTabUI(props: RunTabProps) {
             solCompilerVersion={solcVersion}
             setCompilerVersion={setSolcVersion}
             getCompilerVersion={getVersion}
+            getCompilerDetails={getCompilerDetails}
           />
           <RecorderUI
             plugin={plugin}
@@ -345,6 +407,7 @@ export function RunTabUI(props: RunTabProps) {
           />
           <InstanceContainerUI
             plugin={plugin}
+            getCompilerDetails={getCompilerDetails}
             instances={runTab.instances}
             clearInstances={removeInstances}
             unpinInstance={unpinPinnedInstance}

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

@@ -123,6 +123,7 @@ export interface RunTabState {
 }
 
 export interface SettingsProps {
+  runTabPlugin: RunTab,
   selectExEnv: string,
   accounts: {
     loadedAccounts: Record<string, any>,
@@ -158,6 +159,7 @@ export interface SettingsProps {
 }
 
 export interface EnvironmentProps {
+  runTabPlugin: RunTab,
   selectedEnv: string,
   providers: {
     providerList: Provider[],
@@ -228,6 +230,7 @@ export type MainnetPrompt = (
   ) => JSX.Element
 
 export interface ContractDropdownProps {
+  getCompilerDetails: () => Promise<any>
   selectedAccount: string,
   exEnvironment: string,
   contracts: {
@@ -292,6 +295,7 @@ export interface RecorderProps {
 }
 
 export interface InstanceContainerProps {
+  getCompilerDetails: () => Promise<any>
   instances: {
     instanceList: {
       contractData?: ContractData,
@@ -373,6 +377,7 @@ export interface DeployOptions {
 }
 
 export interface ContractGUIProps {
+  getCompilerDetails: () => Promise<any>
   title?: string,
   funcABI: FuncABI,
   inputs: string,
@@ -412,6 +417,7 @@ export interface MainnetProps {
 }
 
 export interface UdappProps {
+  getCompilerDetails: () => Promise<any>
   instance: {
     contractData?: ContractData,
     address: string,