add reducer action to handle solidity compiler version

Author: joeizang

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

@@ -2,6 +2,7 @@ import { shortenAddress } from "@remix-ui/helper"
 import { RunTab } from "../types/run-tab"
 import { clearInstances, setAccount, setExecEnv } from "./actions"
 import { displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, setExternalEndpoint, setMatchPassphrase, setPassphrase } from "./payload"
+import { RunTabProps, RunTabState } from "../types"
 
 export const updateAccountBalances = async (plugin: RunTab, dispatch: React.Dispatch<any>) => {
   const accounts = plugin.REACT_API.accounts.loadedAccounts
@@ -31,7 +32,7 @@ export const fillAccountsList = async (plugin: RunTab, dispatch: React.Dispatch<
       for (const account of accounts) {
         const balance = await plugin.blockchain.getBalanceInEther(account)
         loadedAccounts[account] =  shortenAddress(account, balance)
-      }     
+      }
       const provider = plugin.blockchain.getProvider()
 
       if (provider === 'injected') {
@@ -99,4 +100,21 @@ export const signMessageWithAddress = (plugin: RunTab, dispatch: React.Dispatch<
     }
     dispatch(displayNotification('Signed Message', modalContent(msgHash, signedData), 'OK', null, () => {}, null))
   })
-}
+}
+
+export const extractCompilerVersion = (runTab: RunTabState, dispatch: React.Dispatch<any>) =>
+{
+  const runtabState = Object.entries(runTab['contracts'] ?? {})
+  const contractList = runtabState[0] ?? {}
+  const contractNameHolder = runtabState[4] ?? ['currentName', '']
+  const contractName = contractNameHolder[1] ?? ''
+  const currentObj = contractList[1] ?? {}
+  const currObjDetails = currentObj[contractName as string] ?? {}
+  const currObjDetailsLength = currObjDetails.length -1
+  const alias = currObjDetails[currObjDetailsLength]['alias'] ?? ''
+  const serializeTarget = currObjDetails[currObjDetailsLength]?.compiler?.data?.contracts[contractName as string][alias]?.metadata ?? ''
+  const obj = (serializeTarget as string).length > 0 ? JSON.parse(serializeTarget) : {}
+  const version = obj?.compiler?.version ?? ''
+  const compilerVersion = `v${version?.split('+commit')[0]}` ?? 'v'
+  dispatch({ type: 'EXTRACT_COMPILER_VERSION', payload: {compilerVersion, runTab }})
+}

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

@@ -1,5 +1,5 @@
 import { ContractData } from '@remix-project/core-plugin'
-import { ADD_DEPLOY_OPTION, ADD_INSTANCE, UPDATE_INSTANCES_BALANCE, ADD_PROVIDER, CLEAR_INSTANCES, CLEAR_RECORDER_COUNT, DISPLAY_NOTIFICATION, DISPLAY_POPUP_MESSAGE, FETCH_ACCOUNTS_LIST_FAILED, FETCH_ACCOUNTS_LIST_REQUEST, FETCH_ACCOUNTS_LIST_SUCCESS, FETCH_CONTRACT_LIST_FAILED, FETCH_CONTRACT_LIST_REQUEST, FETCH_CONTRACT_LIST_SUCCESS, HIDE_NOTIFICATION, HIDE_POPUP_MESSAGE, REMOVE_DEPLOY_OPTION, REMOVE_INSTANCE, REMOVE_PROVIDER, RESET_STATE, SET_BASE_FEE_PER_GAS, SET_CONFIRM_SETTINGS, SET_CURRENT_CONTRACT, SET_CURRENT_FILE, SET_DECODED_RESPONSE, SET_DEPLOY_OPTIONS, SET_EXECUTION_ENVIRONMENT, SET_EXTERNAL_WEB3_ENDPOINT, SET_GAS_LIMIT, SET_GAS_PRICE, SET_GAS_PRICE_STATUS, SET_IPFS_CHECKED_STATE, SET_LOAD_TYPE, SET_MATCH_PASSPHRASE, SET_MAX_FEE, SET_MAX_PRIORITY_FEE, SET_NETWORK_NAME, SET_PASSPHRASE, SET_PATH_TO_SCENARIO, SET_PERSONAL_MODE, SET_RECORDER_COUNT, SET_SELECTED_ACCOUNT, SET_SEND_UNIT, SET_SEND_VALUE, SET_REMIXD_ACTIVATED, FETCH_PROXY_DEPLOYMENTS, NEW_PROXY_DEPLOYMENT, RESET_PROXY_DEPLOYMENTS } from '../constants'
+import { ADD_DEPLOY_OPTION, ADD_INSTANCE, UPDATE_INSTANCES_BALANCE, ADD_PROVIDER, CLEAR_INSTANCES, CLEAR_RECORDER_COUNT, DISPLAY_NOTIFICATION, DISPLAY_POPUP_MESSAGE, FETCH_ACCOUNTS_LIST_FAILED, FETCH_ACCOUNTS_LIST_REQUEST, FETCH_ACCOUNTS_LIST_SUCCESS, FETCH_CONTRACT_LIST_FAILED, FETCH_CONTRACT_LIST_REQUEST, FETCH_CONTRACT_LIST_SUCCESS, HIDE_NOTIFICATION, HIDE_POPUP_MESSAGE, REMOVE_DEPLOY_OPTION, REMOVE_INSTANCE, REMOVE_PROVIDER, RESET_STATE, SET_BASE_FEE_PER_GAS, SET_CONFIRM_SETTINGS, SET_CURRENT_CONTRACT, SET_CURRENT_FILE, SET_DECODED_RESPONSE, SET_DEPLOY_OPTIONS, SET_EXECUTION_ENVIRONMENT, SET_EXTERNAL_WEB3_ENDPOINT, SET_GAS_LIMIT, SET_GAS_PRICE, SET_GAS_PRICE_STATUS, SET_IPFS_CHECKED_STATE, SET_LOAD_TYPE, SET_MATCH_PASSPHRASE, SET_MAX_FEE, SET_MAX_PRIORITY_FEE, SET_NETWORK_NAME, SET_PASSPHRASE, SET_PATH_TO_SCENARIO, SET_PERSONAL_MODE, SET_RECORDER_COUNT, SET_SELECTED_ACCOUNT, SET_SEND_UNIT, SET_SEND_VALUE, SET_REMIXD_ACTIVATED, FETCH_PROXY_DEPLOYMENTS, NEW_PROXY_DEPLOYMENT, RESET_PROXY_DEPLOYMENTS, EXTRACT_COMPILER_VERSION } from '../constants'
 import { ContractList, DeployOptions } from '../types'
 
 export const fetchAccountsListRequest = () => {
@@ -334,3 +334,10 @@ export const resetProxyDeployments = () => {
     type: RESET_PROXY_DEPLOYMENTS,
   }
 }
+
+export const setCompilerVersion = (version: string) => {
+  return {
+    type: EXTRACT_COMPILER_VERSION,
+    payload: version
+  }
+}

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

@@ -481,6 +481,8 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
                 isValidProxyUpgrade={isValidProxyUpgrade}
                 modal={props.modal}
                 disabled={props.selectedAccount === ''}
+                dispatch={props.stateDispatch}
+                runTabState={props.runTabState}
               />
               <div className="d-flex py-1 align-items-center custom-control custom-checkbox">
                 <input

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 { extractCompilerVersion } from '../actions/account'
 
 const txFormat = remixLib.execution.txFormat
 const txHelper = remixLib.execution.txHelper
@@ -173,6 +174,7 @@ export function ContractGUI(props: ContractGUIProps) {
   }
 
   const handleActionClick = async () => {
+    extractCompilerVersion(props.runTabState, props.dispatch)
     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/instanceContainerUI.tsx

@@ -39,7 +39,7 @@ export function InstanceContainerUI(props: InstanceContainerProps) {
           {props.instances.instanceList.map((instance, index) => {
             return (
               <UniversalDappUI
-                plugin={props.plugin}
+                state={props.state}
                 key={index}
                 instance={instance}
                 context={props.getContext()}

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

@@ -2,29 +2,15 @@ import { CustomTooltip } from '@remix-ui/helper'
 import React, { useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { RunTab } from '../types/run-tab'
+import { extractCompilerVersion } from '../actions/account'
+import { RunTabState } from '../types'
 
 export type LowLevelInteractionIconProps = {
-  plugin: RunTab
+  plugin: RunTabState
 }
 
 export function LowLevelInteractionIcon (props: LowLevelInteractionIconProps) {
-  const [version, setVersion] = useState('')
-
-  useEffect(() => {
-    const listenForCompileFinished = async () => {
-      props.plugin.on('solidity', 'compilationFinished',
-        (file: string, source, languageVersion, data, input, version) => {
-          const versionUpdate = `v${version.split('+')[0]}` // remove commit hash
-          console.log(versionUpdate)
-          setVersion(versionUpdate)
-        })
-    }
-    listenForCompileFinished()
-
-    return () => {
-      props.plugin.off('solidity', 'compilationFinished')
-    }
-  }, [])
+  const [version, setVersion] = useState(props.plugin.compilerVersion ?? '')
 
   return (
     <>

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

@@ -285,7 +285,7 @@ export function UniversalDappUI(props: UdappProps) {
             <div className="py-2 border-top d-flex justify-content-start flex-grow-1">
               <FormattedMessage id="udapp.lowLevelInteractions" />
             </div>
-            <LowLevelInteractionIcon plugin={props.plugin} />
+            <LowLevelInteractionIcon plugin={props.state} />
           </div>
           <div className="d-flex flex-column align-items-start">
             <label className="">CALLDATA</label>

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

@@ -49,3 +49,4 @@ export const SET_REMIXD_ACTIVATED = 'SET_REMIXD_ACTIVATED'
 export const FETCH_PROXY_DEPLOYMENTS = 'FETCH_PROXY_DEPLOYMENTS'
 export const NEW_PROXY_DEPLOYMENT = 'NEW_PROXY_DEPLOYMENT'
 export const RESET_PROXY_DEPLOYMENTS = 'RESET_PROXY_DEPLOYMENTS'
+export const EXTRACT_COMPILER_VERSION = 'EXTRACT_COMPILER_VERSION'

libs/remix-ui/run-tab/src/lib/reducers/runTab.ts

@@ -1,6 +1,7 @@
 import { ContractData } from '@remix-project/core-plugin'
 import { ContractList, DeployOptions, RunTabState } from '../types'
-import { ADD_INSTANCE, UPDATE_INSTANCES_BALANCE, ADD_PROVIDER, CLEAR_INSTANCES, CLEAR_RECORDER_COUNT, DISPLAY_NOTIFICATION, DISPLAY_POPUP_MESSAGE, FETCH_ACCOUNTS_LIST_FAILED, FETCH_ACCOUNTS_LIST_REQUEST, FETCH_ACCOUNTS_LIST_SUCCESS, FETCH_CONTRACT_LIST_FAILED, FETCH_CONTRACT_LIST_REQUEST, FETCH_CONTRACT_LIST_SUCCESS, FETCH_PROVIDER_LIST_FAILED, FETCH_PROVIDER_LIST_REQUEST, FETCH_PROVIDER_LIST_SUCCESS, HIDE_NOTIFICATION, HIDE_POPUP_MESSAGE, REMOVE_INSTANCE, REMOVE_PROVIDER, RESET_STATE, SET_BASE_FEE_PER_GAS, SET_CONFIRM_SETTINGS, SET_CURRENT_CONTRACT, SET_CURRENT_FILE, SET_DECODED_RESPONSE, SET_DEPLOY_OPTIONS, SET_EXECUTION_ENVIRONMENT, SET_EXTERNAL_WEB3_ENDPOINT, SET_GAS_LIMIT, SET_GAS_PRICE, SET_GAS_PRICE_STATUS, SET_IPFS_CHECKED_STATE, SET_LOAD_TYPE, SET_MATCH_PASSPHRASE, SET_MAX_FEE, SET_MAX_PRIORITY_FEE, SET_NETWORK_NAME, SET_PASSPHRASE, SET_PATH_TO_SCENARIO, SET_PERSONAL_MODE, SET_RECORDER_COUNT, SET_SELECTED_ACCOUNT, SET_SEND_UNIT, SET_SEND_VALUE, ADD_DEPLOY_OPTION, REMOVE_DEPLOY_OPTION, SET_REMIXD_ACTIVATED, FETCH_PROXY_DEPLOYMENTS, NEW_PROXY_DEPLOYMENT, RESET_PROXY_DEPLOYMENTS } from '../constants'
+import { ADD_INSTANCE, UPDATE_INSTANCES_BALANCE, ADD_PROVIDER, CLEAR_INSTANCES, CLEAR_RECORDER_COUNT, DISPLAY_NOTIFICATION, DISPLAY_POPUP_MESSAGE, FETCH_ACCOUNTS_LIST_FAILED, FETCH_ACCOUNTS_LIST_REQUEST, FETCH_ACCOUNTS_LIST_SUCCESS, FETCH_CONTRACT_LIST_FAILED, FETCH_CONTRACT_LIST_REQUEST, FETCH_CONTRACT_LIST_SUCCESS, FETCH_PROVIDER_LIST_FAILED, FETCH_PROVIDER_LIST_REQUEST, FETCH_PROVIDER_LIST_SUCCESS, HIDE_NOTIFICATION, HIDE_POPUP_MESSAGE, REMOVE_INSTANCE, REMOVE_PROVIDER, RESET_STATE, SET_BASE_FEE_PER_GAS, SET_CONFIRM_SETTINGS, SET_CURRENT_CONTRACT, SET_CURRENT_FILE, SET_DECODED_RESPONSE, SET_DEPLOY_OPTIONS, SET_EXECUTION_ENVIRONMENT, SET_EXTERNAL_WEB3_ENDPOINT, SET_GAS_LIMIT, SET_GAS_PRICE, SET_GAS_PRICE_STATUS, SET_IPFS_CHECKED_STATE, SET_LOAD_TYPE, SET_MATCH_PASSPHRASE, SET_MAX_FEE, SET_MAX_PRIORITY_FEE, SET_NETWORK_NAME, SET_PASSPHRASE, SET_PATH_TO_SCENARIO, SET_PERSONAL_MODE, SET_RECORDER_COUNT, SET_SELECTED_ACCOUNT, SET_SEND_UNIT, SET_SEND_VALUE, ADD_DEPLOY_OPTION, REMOVE_DEPLOY_OPTION, SET_REMIXD_ACTIVATED, FETCH_PROXY_DEPLOYMENTS, NEW_PROXY_DEPLOYMENT, RESET_PROXY_DEPLOYMENTS, EXTRACT_COMPILER_VERSION } from '../constants'
+import { extractCompilerVersion } from '../actions/account'
 
 declare const window: any
 interface Action {
@@ -411,7 +412,7 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
   }
-    
+
   case SET_IPFS_CHECKED_STATE: {
     const payload: boolean = action.payload
 
@@ -657,6 +658,17 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
     }
   }
 
+  case EXTRACT_COMPILER_VERSION: {
+    const payload = action.payload
+    return {
+      ...state,
+      contracts: {
+        ...payload.runTab.contracts,
+      },
+      compilerVersion: payload.compilerVersion
+    }
+  }
+
   default:
     return state
   }

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

@@ -299,6 +299,8 @@ export function RunTabUI(props: RunTabProps) {
             isValidProxyAddress={isValidProxyAddress}
             isValidProxyUpgrade={isValidProxyUpgrade}
             proxy={runTab.proxy}
+            stateDispatch={dispatch}
+            runTabState={runTab}
           />
           <RecorderUI
             plugin={plugin}
@@ -322,7 +324,7 @@ export function RunTabUI(props: RunTabProps) {
             runTransactions={executeTransactions}
             sendValue={runTab.sendValue}
             getFuncABIInputs={getFuncABIValues}
-            plugin={props.plugin}
+            state={runTab}
           />
         </div>
       </div>