delete pinned contract

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

@@ -71,8 +71,8 @@
   "udapp.tooltipText6": "Autogenerated generic user interfaces for interaction with deployed contracts",
 
   "udapp.savedContracts": "Pinned Contracts",
-  "udapp.NoSavedInstanceText": "No pinned contracts found.",
-  "udapp.tooltipTextDelete": "Delete contract",
+  "udapp.NoSavedInstanceText": "No contracts pinned yet. Pinned contracts stays after reloading Remix IDE.",
+  "udapp.tooltipTextDelete": "Delete pinned contract",
   "udapp.tooltipTextUnpin": "Unpin contract",
   "udapp.savedOn": "Pinned On",
   "udapp.filePath": "File Path",

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

@@ -75,8 +75,8 @@ export const addSavedInstance = (dispatch: React.Dispatch<any>, instance: { cont
   dispatch(addNewSavedInstance(instance))
 }
 
-export const removeInstance = (dispatch: React.Dispatch<any>, index: number, isSavedContract: boolean) => {
-  dispatch(removeExistingInstance(index, isSavedContract))
+export const removeInstance = (dispatch: React.Dispatch<any>, index: number, isSavedContract: boolean, shouldDelete: boolean) => {
+  dispatch(removeExistingInstance(index, isSavedContract, shouldDelete))
 }
 
 export const clearInstances = (dispatch: React.Dispatch<any>) => {

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

@@ -48,7 +48,7 @@ export const setGasPriceStatus = (status: boolean) => updateGasPriceStatus(dispa
 export const setMaxFee = (fee: string) => updateMaxFee(dispatch, fee)
 export const setMaxPriorityFee = (fee: string) => updateMaxPriorityFee(dispatch, fee)
 export const removeInstances = () => clearInstances(dispatch)
-export const removeSingleInstance = (index: number, isSavedContract: boolean) => removeInstance(dispatch, index, isSavedContract)
+export const removeSingleInstance = (index: number, isSavedContract: boolean, shouldDelete: boolean) => removeInstance(dispatch, index, isSavedContract, shouldDelete)
 export const getExecutionContext = () => getContext(plugin)
 export const executeTransactions = (instanceIndex: number, isSavedContract: boolean, lookupOnly: boolean, funcABI: FuncABI, inputsValues: string, contractName: string, contractABI, contract, address, logMsg:string, mainnetPrompt: MainnetPrompt, gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, funcIndex?: number) => runTransactions(plugin, dispatch, instanceIndex, isSavedContract, lookupOnly, funcABI, inputsValues, contractName, contractABI, contract, address, logMsg, mainnetPrompt, gasEstimationPrompt, passphrasePrompt, funcIndex)
 export const loadFromAddress = (contract: ContractData, address: string) => loadAddress(plugin, dispatch, contract, address)

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

@@ -237,12 +237,13 @@ export const addNewSavedInstance = (instance: { contractData?: ContractData, add
   }
 }
 
-export const removeExistingInstance = (index: number, isSavedContract: boolean) => {
+export const removeExistingInstance = (index: number, isSavedContract: boolean, shouldDelete: boolean) => {
   return {
     type: REMOVE_INSTANCE,
     payload: { 
       index,
-      isSavedContract 
+      isSavedContract,
+      shouldDelete 
     }
   }
 }

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

@@ -111,17 +111,24 @@ export function UniversalDappUI(props: UdappProps) {
     setToggleExpander(!toggleExpander)
   }
 
+  const unsavePinnedContract = async () => {
+    const {network} = await props.plugin.call('blockchain', 'getCurrentNetworkStatus')
+    const savedContracts = localStorage.getItem('savedContracts')
+    const savedContractsJson = JSON.parse(savedContracts)
+    const instanceIndex = savedContractsJson[network.id].findIndex(instance => instance && instance.address === props.instance.address)
+    delete savedContractsJson[network.id][instanceIndex]
+    savedContractsJson[network.id] = savedContractsJson[network.id].filter(Boolean)
+    localStorage.setItem('savedContracts', JSON.stringify(savedContractsJson))
+  }
+
   const remove = async() => {
-    if (props.isSavedContract) {
-      const {network} = await props.plugin.call('blockchain', 'getCurrentNetworkStatus')
-      const savedContracts = localStorage.getItem('savedContracts')
-      const savedContractsJson = JSON.parse(savedContracts)
-      const instanceIndex = savedContractsJson[network.id].findIndex(instance => instance && instance.address === props.instance.address)
-      delete savedContractsJson[network.id][instanceIndex]
-      savedContractsJson[network.id] = savedContractsJson[network.id].filter(Boolean)
-      localStorage.setItem('savedContracts', JSON.stringify(savedContractsJson))
-    }
-    props.removeInstance(props.index, props.isSavedContract)
+    if (props.isSavedContract) await unsavePinnedContract()
+    props.removeInstance(props.index, props.isSavedContract, false)
+  }
+
+  const deletePinnedContract = async() => {
+    if (props.isSavedContract) await unsavePinnedContract()
+    props.removeInstance(props.index, props.isSavedContract, true)
   }
 
   const pinContract = async() => {
@@ -145,7 +152,7 @@ export function UniversalDappUI(props: UdappProps) {
     // Add contract to saved contracts list on UI
     await props.plugin.call('udapp', 'addSavedInstance', props.instance.address, props.instance.abi || props.instance.contractData.abi, props.instance.name, props.instance.savedOn, props.instance.filePath)
     // Remove contract from deployed contracts list on UI
-    props.removeInstance(props.index, false)
+    props.removeInstance(props.index, false, false)
   }
 
   const runTransaction = (lookupOnly, funcABI: FuncABI, valArr, inputsValues, funcIndex?: number) => {
@@ -280,7 +287,7 @@ export function UniversalDappUI(props: UdappProps) {
         </div>
         { props.isSavedContract ? ( <div className="btn" style={{padding: '0.15rem', marginLeft: '-0.5rem'}}>
             <CustomTooltip placement="top" tooltipClasses="text-nowrap" tooltipId="udapp_udappDeleteTooltip" tooltipText={<FormattedMessage id="udapp.tooltipTextDelete" />}>
-              <i className="far fa-trash p-2 text-danger" aria-hidden="true" data-id="universalDappUiUdappDelete" onClick={remove}></i>
+              <i className="far fa-trash p-2 text-danger" aria-hidden="true" data-id="universalDappUiUdappDelete" onClick={deletePinnedContract}></i>
             </CustomTooltip> 
           </div> ) : ( <CustomTooltip placement="top" tooltipClasses="text-nowrap" tooltipId="udapp_udappCloseTooltip" tooltipText={<FormattedMessage id="udapp.tooltipTextRemove" />}>
           <i className="udapp_closeIcon m-1 fas fa-times align-self-center" aria-hidden="true" data-id="universalDappUiUdappClose" onClick={remove}></i>

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

@@ -515,10 +515,17 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
   }
 
   case REMOVE_INSTANCE: {
-    const payload: { index: number, isSavedContract: boolean } = action.payload
+    const payload: { index: number, isSavedContract: boolean, shouldDelete: boolean } = action.payload
 
-    if (payload.isSavedContract)
-      return {
+    if (payload.isSavedContract) {
+      if (payload.shouldDelete) return {
+        ...state,
+        savedInstances: {
+          ...state.savedInstances,
+          instanceList: state.savedInstances.instanceList.filter((_, index) => index !== payload.index)
+        }
+      }
+      else return {
         ...state,
         savedInstances: {
           ...state.savedInstances,
@@ -529,8 +536,7 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
           instanceList: [...state.instances.instanceList, state.savedInstances.instanceList[payload.index]]
         }
       }
-    else
-      return {
+    } else return {
         ...state,
         instances: {
           ...state.instances,

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

@@ -321,7 +321,7 @@ export interface InstanceContainerProps {
     error: string
   },
   clearInstances: () => void,
-  removeInstance: (index: number, isSavedContract:boolean) => void,
+  removeInstance: (index: number, isSavedContract:boolean, shouldDelete: boolean) => void,
   getContext: () => 'memory' | 'blockchain',
   runTransactions: (
     instanceIndex: number,
@@ -428,7 +428,7 @@ export interface UdappProps {
   },
   context: 'memory' | 'blockchain',
   isSavedContract?: boolean
-  removeInstance: (index: number, isSavedContract: boolean) => void,
+  removeInstance: (index: number, isSavedContract: boolean, shouldDelete: boolean) => void,
   index: number,
   gasEstimationPrompt: (msg: string) => JSX.Element,
   passphrasePrompt: (message: string) => JSX.Element,