load saved contracts

apps/remix-ide/src/app/tabs/locales/en/udapp.json

@@ -67,10 +67,11 @@
   "udapp._comment_instanceContainerUI.tsx": "libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx",
   "udapp.deployedContracts": "Deployed Contracts",
   "udapp.deployAndRunClearInstances": "Clear instances list and reset recorder",
-  "udapp.deployAndRunNoInstanceText": "Currently you have no contract instances to interact with.",
+  "udapp.deployAndRunNoInstanceText": "Currently you have no deployed contracts to interact with.",
   "udapp.tooltipText6": "Autogenerated generic user interfaces for interaction with deployed contracts",
 
   "udapp.savedContracts": "Saved Contracts",
+  "udapp.NoSavedInstanceText": "Currently you have no saved contracts to interact with.",
 
 
   "udapp._comment_recorderCardUI.tsx": "libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx",

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

@@ -1,12 +1,28 @@
 // eslint-disable-next-line no-use-before-define
 import { CustomTooltip } from '@remix-ui/helper'
-import React from 'react'
+import React, {useState, useEffect, useRef} from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { InstanceContainerProps } from '../types'
 import { UniversalDappUI } from './universalDappUI'
 
 export function InstanceContainerUI(props: InstanceContainerProps) {
   const { instanceList } = props.instances
+  let savedContractForCurrentEnv = useRef([])
+
+  useEffect(() => {
+    const fetchSavedContracts = async () => {
+      let allSavedContracts = JSON.parse(localStorage.getItem('savedContracts'))
+      const { network } = await props.plugin.call('blockchain', 'getCurrentNetworkStatus')
+      network.id = network.id.trim() // For VM, id is ' - '
+      const env = await props.plugin.call('blockchain', 'getProvider')
+      if (allSavedContracts && allSavedContracts[env] && allSavedContracts[env][network.id]) {
+        savedContractForCurrentEnv.current = allSavedContracts[env][network.id]
+      }
+   }
+ 
+   fetchSavedContracts()
+
+  }, [])
 
   const clearInstance = () => {
     props.clearInstances()
@@ -23,6 +39,33 @@ export function InstanceContainerUI(props: InstanceContainerProps) {
           </label>
         </CustomTooltip>
       </div>
+        {savedContractForCurrentEnv.current.length > 0 ? (
+          <div>
+            {' '}
+            {savedContractForCurrentEnv.current.map((instance, index) => {
+              return (
+                <UniversalDappUI
+                  key={index}
+                  instance={instance}
+                  context={props.getContext()}
+                  removeInstance={props.removeInstance}
+                  index={index}
+                  gasEstimationPrompt={props.gasEstimationPrompt}
+                  passphrasePrompt={props.passphrasePrompt}
+                  mainnetPrompt={props.mainnetPrompt}
+                  runTransactions={props.runTransactions}
+                  sendValue={props.sendValue}
+                  getFuncABIInputs={props.getFuncABIInputs}
+                  plugin={props.plugin}
+                />
+              )
+            })}
+          </div>
+        ) : (
+          <span className="mx-2 mt-3 alert alert-warning" data-id="NoSavedInstanceText" role="alert">
+            <FormattedMessage id="udapp.NoSavedInstanceText" />
+          </span>
+        )}
 
       <div className="d-flex justify-content-between align-items-center pl-2 mb-2">
         <CustomTooltip placement="top-start" tooltipClasses="text-nowrap" tooltipId="deployAndRunClearInstancesTooltip" tooltipText={<FormattedMessage id="udapp.tooltipText6" />}>

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

@@ -116,10 +116,10 @@ export function UniversalDappUI(props: UdappProps) {
   }
 
   const saveContract = async() => {
-    const address = ethJSUtil.toChecksumAddress(props.instance.address)
+    // const address = ethJSUtil.toChecksumAddress(props.instance.address)
     const env = await props.plugin.call('blockchain', 'getProvider')
     const {network} = await props.plugin.call('blockchain', 'getCurrentNetworkStatus')
-    const contractToSave = {name: props.instance.contractData.name, address, abi: props.instance.contractData.abi, networkName: network.name}
+    // const contractToSave = {name: props.instance.contractData.name, address, abi: props.instance.contractData.abi, networkName: network.name}
     let savedContracts = localStorage.getItem('savedContracts')
     let objToSave = JSON.parse(savedContracts)
     if (!objToSave) {
@@ -132,7 +132,7 @@ export function UniversalDappUI(props: UdappProps) {
     } else if (!objToSave[env][network.id]) {
       objToSave[env][network.id] = []
     }
-    objToSave[env][network.id].push(contractToSave)
+    objToSave[env][network.id].push(props.instance)
     localStorage.setItem('savedContracts', JSON.stringify(objToSave))
   }