move logic from componentre

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

@@ -1,5 +1,5 @@
 import { ContractData } from "@remix-project/core-plugin"
-import { addNewInstance, addNewPinnedInstance, addProvider, clearAllInstances, clearAllPinnedInstances, clearRecorderCount, hidePopUp, newProxyDeployment, removeExistingInstance, removeProvider, setBaseFeePerGas, setConfirmSettings, setCurrentContract, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setPassphrase, setPathToScenario, setSelectedAccount, setSendUnit, setSendValue } from "./payload"
+import { addNewInstance, addNewPinnedInstance, addProvider, clearAllInstances, clearAllPinnedInstances, clearRecorderCount, hidePopUp, newProxyDeployment, removeExistingInstance, removeProvider, setBaseFeePerGas, setConfirmSettings, setCurrentContract, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setGasPrice, setGasPriceStatus, setMatchPassphrase, setMaxFee, setMaxPriorityFee, setNetworkName, setChainId, setPassphrase, setPathToScenario, setSelectedAccount, setSendUnit, setSendValue } from "./payload"
 
 export const setAccount = (dispatch: React.Dispatch<any>, account: string) => {
   dispatch(setSelectedAccount(account))
@@ -21,6 +21,10 @@ export const setNetworkNameFromProvider = (dispatch: React.Dispatch<any>, networ
   dispatch(setNetworkName(networkName))
 }
 
+export const setPinnedChainId = (dispatch: React.Dispatch<any>, chainId: string) => {
+  dispatch(setChainId(chainId))
+}
+
 export const addExternalProvider = (dispatch: React.Dispatch<any>, network) => {
   dispatch(addProvider(network))
 }

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

@@ -1,7 +1,7 @@
 import { envChangeNotification } from "@remix-ui/helper"
 import { RunTab } from "../types/run-tab"
 import { setExecutionContext, setFinalContext, updateAccountBalances, fillAccountsList } from "./account"
-import { addExternalProvider, addInstance, addPinnedInstance, addNewProxyDeployment, removeExternalProvider, setNetworkNameFromProvider } from "./actions"
+import { addExternalProvider, addInstance, addPinnedInstance, addNewProxyDeployment, removeExternalProvider, setNetworkNameFromProvider, setPinnedChainId } from "./actions"
 import { addDeployOption, clearAllInstances, clearAllPinnedInstances, clearRecorderCount, fetchContractListSuccess, resetProxyDeployments, resetUdapp, setCurrentContract, setCurrentFile, setLoadType, setRecorderCount, setRemixDActivated, setSendValue, fetchAccountsListSuccess } from "./payload"
 import { updateInstanceBalance } from './deploy'
 import { CompilerAbstract } from '@remix-project/remix-solidity'
@@ -35,7 +35,7 @@ export const setupEvents = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
     fillAccountsList(plugin, dispatch)
   })
 
-  plugin.blockchain.event.register('networkStatus', ({ error, network }) => {
+  plugin.blockchain.event.register('networkStatus', async ({ error, network }) => {
     if (error) {
       const netUI = 'can\'t detect network'
       setNetworkNameFromProvider(dispatch, netUI)
@@ -44,8 +44,10 @@ export const setupEvents = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
     }
     const networkProvider = plugin.networkModule.getNetworkProvider.bind(plugin.networkModule)
     const netUI = !networkProvider().startsWith('vm') ? `${network.name} (${network.id || '-'}) network` : 'VM'
-
+    const pinnedChainId = !networkProvider().startsWith('vm') ? network.id : networkProvider()
     setNetworkNameFromProvider(dispatch, netUI)
+    setPinnedChainId(dispatch, pinnedChainId)
+    await loadPinnedContracts(plugin, dispatch, pinnedChainId)
   })
 
   plugin.blockchain.event.register('addProvider', provider => addExternalProvider(dispatch, provider))
@@ -94,7 +96,6 @@ export const setupEvents = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
   plugin.on('filePanel', 'setWorkspace', async () => {
     dispatch(resetUdapp())
     resetAndInit(plugin)
-    await loadPinnedContracts(plugin, dispatch)
     await migrateSavedContracts(plugin)
     plugin.call('manager', 'isActive', 'remixd').then((activated) => {
       dispatch(setRemixDActivated(activated))
@@ -165,9 +166,11 @@ export const setupEvents = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
   }, 30000)  
 }
 
-const loadPinnedContracts = async (plugin, dispatch) => {
-  const { network } = await plugin.call('blockchain', 'getCurrentNetworkStatus')
-    const dirName = plugin.REACT_API.networkName === 'VM' ? plugin.REACT_API.selectExEnv : network.id
+const loadPinnedContracts = async (plugin, dispatch, dirName) => {
+  console.log('loadPinnedContracts---->')
+  await plugin.call('udapp', 'clearAllPinnedInstances')
+  // const { network } = await plugin.call('blockchain', 'getCurrentNetworkStatus')
+  // const dirName = plugin.REACT_API.networkName === 'VM' ? plugin.REACT_API.selectExEnv : network.id
   const isPinnedAvailable = await plugin.call('fileManager', 'exists', `.deploys/pinned-contracts/${dirName}`)
   if (isPinnedAvailable) {
     try {

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, ADD_PINNED_INSTANCE, UPDATE_INSTANCES_BALANCE, ADD_PROVIDER, CLEAR_INSTANCES, CLEAR_PINNED_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 { ADD_DEPLOY_OPTION, ADD_INSTANCE, ADD_PINNED_INSTANCE, UPDATE_INSTANCES_BALANCE, ADD_PROVIDER, CLEAR_INSTANCES, CLEAR_PINNED_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_CHAIN_ID, 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 = () => {
@@ -72,6 +72,13 @@ export const setNetworkName = (networkName: string) => {
   }
 }
 
+export const setChainId = (chainId: string) => {
+  return {
+    type: SET_CHAIN_ID,
+    payload: chainId
+  }
+}
+
 export const addProvider = (provider: string) => {
   return {
     type: ADD_PROVIDER,

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

@@ -7,33 +7,6 @@ import { UniversalDappUI } from './universalDappUI'
 
 export function InstanceContainerUI(props: InstanceContainerProps) {
   const { instanceList } = props.instances
-  const chainId = useRef()
-
-  useEffect(() => {
-    const fetchSavedContracts = async () => {
-      const { network } = await props.plugin.call('blockchain', 'getCurrentNetworkStatus')
-      chainId.current = network.id
-      // Clear existing saved instance state
-      await props.plugin.call('udapp', 'clearAllPinnedInstances')
-      // Load contracts from FE
-      const dirName = props.plugin.REACT_API.networkName === 'VM' ? props.plugin.REACT_API.selectExEnv : chainId.current
-      const isPinnedAvailable = await props.plugin.call('fileManager', 'exists', `.deploys/pinned-contracts/${dirName}`)
-      if (isPinnedAvailable) {
-        try {
-          const list = await props.plugin.call('fileManager', 'readdir', `.deploys/pinned-contracts/${dirName}`)
-          const filePaths = Object.keys(list)
-          for (const file of filePaths) {
-            const pinnedContract = await props.plugin.call('fileManager', 'readFile', file)
-            const pinnedContractObj = JSON.parse(pinnedContract)
-            if (pinnedContractObj) await props.plugin.call('udapp', 'addPinnedInstance', pinnedContractObj.address, pinnedContractObj.abi, pinnedContractObj.name, pinnedContractObj.pinnedAt, pinnedContractObj.filePath)
-          }
-        } catch(err) {
-          console.log(err)
-        }
-      }
-    }
-    fetchSavedContracts()
-  }, [props.plugin.REACT_API.selectExEnv, props.plugin.REACT_API.networkName])
 
   const clearInstance = () => {
     props.clearInstances()
@@ -45,7 +18,7 @@ export function InstanceContainerUI(props: InstanceContainerProps) {
         <CustomTooltip placement="top-start" tooltipClasses="text-nowrap" tooltipId="deployAndRunPinnedContractsTooltip" tooltipText={<FormattedMessage id="udapp.tooltipTextPinnedContracts" />}>
           <label className="udapp_deployedContracts" data-id="pinnedContracts">
             <FormattedMessage id="udapp.pinnedContracts" /> 
-            <span style={{fontSize: '0.75rem'}} data-id="pinnedContractsSublabel"> { props.plugin.REACT_API.networkName === 'VM' ? `(VM: ${props.plugin.REACT_API.selectExEnv})` : `(chain id: ${chainId.current})` }</span>
+            <span style={{fontSize: '0.75rem'}} data-id="pinnedContractsSublabel"> (network: {props.plugin.REACT_API.chainId}) </span>
           </label>
         </CustomTooltip>
       </div>

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

@@ -52,3 +52,4 @@ 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'
+export const SET_CHAIN_ID = 'SET_CHAIN_ID'

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

@@ -1,6 +1,6 @@
 import { ContractData } from '@remix-project/core-plugin'
 import { ContractList, DeployOptions, RunTabState } from '../types'
-import { ADD_INSTANCE, ADD_PINNED_INSTANCE, UPDATE_INSTANCES_BALANCE, ADD_PROVIDER, CLEAR_INSTANCES, CLEAR_PINNED_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 { ADD_INSTANCE, ADD_PINNED_INSTANCE, UPDATE_INSTANCES_BALANCE, ADD_PROVIDER, CLEAR_INSTANCES, CLEAR_PINNED_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_CHAIN_ID, 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'
 
 declare const window: any
 interface Action {
@@ -22,6 +22,7 @@ export const runTabInitialState: RunTabState = {
   selectExEnv: 'vm-paris',
   personalMode: false,
   networkName: 'VM',
+  chainId:'-',
   providers: {
     providerList: [],
     isRequesting: false,
@@ -192,11 +193,20 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
   }
 
   case SET_NETWORK_NAME: {
-    const payload: string = action.payload
+    const payload = action.payload
+
+    return {
+      ...state,
+      networkName: payload.networkName,
+    }
+  }
+
+  case SET_CHAIN_ID: {
+    const payload = action.payload
 
     return {
       ...state,
-      networkName: payload
+      chainId: payload
     }
   }
 

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

@@ -33,6 +33,7 @@ export interface RunTabState {
   selectExEnv: string,
   personalMode: boolean,
   networkName: string,
+  chainId: string
   providers: {
     providerList: {
       id?: string,