add sync action in udapp

apps/remix-ide/src/app/files/foundry-handle.js

@@ -5,7 +5,7 @@ const profile = {
   name: 'foundry',
   displayName: 'Foundry',
   url: 'ws://127.0.0.1:65525',
-  methods: [],
+  methods: ['sync'],
   description: 'Using Remixd daemon, allow to access foundry API',
   kind: 'other',
   version: packageJson.version

apps/remix-ide/src/app/files/hardhat-handle.js

@@ -5,7 +5,7 @@ const profile = {
   name: 'hardhat',
   displayName: 'Hardhat',
   url: 'ws://127.0.0.1:65522',
-  methods: ['compile'],
+  methods: ['compile', 'sync'],
   description: 'Using Remixd daemon, allow to access hardhat API',
   kind: 'other',
   version: packageJson.version

apps/remix-ide/src/app/files/truffle-handle.js

@@ -5,7 +5,7 @@ const profile = {
   name: 'truffle',
   displayName: 'truffle',
   url: 'ws://127.0.0.1:65524',
-  methods: ['compile'],
+  methods: ['compile', 'sync'],
   description: 'Using Remixd daemon, allow to access truffle API',
   kind: 'other',
   version: packageJson.version

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

@@ -244,6 +244,18 @@ export const getContext = (plugin: RunTab) => {
   return plugin.blockchain.context()
 }
 
+export const syncContractsInternal = async (plugin: RunTab) => {
+  if (await plugin.call('manager', 'isActive', 'truffle')) {
+    plugin.call('truffle', 'sync')
+  }
+  if (await plugin.call('manager', 'isActive', 'hardhat')) {
+    plugin.call('hardhat', 'sync')
+  } 
+  if (await plugin.call('manager', 'isActive', 'foundry')) {
+    plugin.call('foundry', 'sync')
+  }
+}
+
 export const runTransactions = (
   plugin: RunTab,
   dispatch: React.Dispatch<any>,

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

@@ -6,7 +6,7 @@ import { createNewBlockchainAccount, fillAccountsList, setExecutionContext, sign
 import { clearInstances, clearPopUp, removeInstance, setAccount, setGasFee, setMatchPassphrasePrompt, 
   setNetworkNameFromProvider, setPassphrasePrompt, setSelectedContract, setSendTransactionValue, setUnit, 
   updateBaseFeePerGas, updateConfirmSettings, updateGasPrice, updateGasPriceStatus, updateMaxFee, updateMaxPriorityFee, updateScenarioPath } from './actions'
-import { createInstance, getContext, getFuncABIInputs, getSelectedContract, loadAddress, runTransactions, updateInstanceBalance } from './deploy'
+import { createInstance, getContext, getFuncABIInputs, getSelectedContract, loadAddress, runTransactions, updateInstanceBalance, syncContractsInternal } from './deploy'
 import { CompilerAbstract as CompilerAbstractType } from '@remix-project/remix-solidity-ts'
 import { ContractData, FuncABI } from "@remix-project/core-plugin"
 import { DeployMode, MainnetPrompt } from '../types'
@@ -60,4 +60,5 @@ export const runScenario = (liveMode: boolean, gasEstimationPrompt: (msg: string
 export const setScenarioPath = (path: string) => updateScenarioPath(dispatch, path)
 export const getFuncABIValues = (funcABI: FuncABI) => getFuncABIInputs(plugin, funcABI)
 export const setNetworkName = (networkName: string) => setNetworkNameFromProvider(dispatch, networkName)
-export const updateSelectedContract = (contractName) => setSelectedContract(dispatch, contractName)
+export const updateSelectedContract = (contractName) => setSelectedContract(dispatch, contractName)
+export const syncContracts = () => syncContractsInternal(plugin)

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

@@ -5,6 +5,7 @@ import { ContractData, FuncABI } from '@remix-project/core-plugin'
 import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
 import { deployWithProxyMsg, upgradeWithProxyMsg } from '@remix-ui/helper'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 
 export function ContractDropdownUI (props: ContractDropdownProps) {
   const [abiLabel, setAbiLabel] = useState<{
@@ -229,7 +230,16 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     <div className="udapp_container" data-id="contractDropdownContainer">
       <div className='d-flex justify-content-between'>
         <label className="udapp_settingsLabel">Contract</label>
-        { Object.keys(props.contracts.contractList).length > 0 && compilationSource !== '' && <label data-id="udappCompiledBy">Compiled by {compilationSource} </label> }
+        { Object.keys(props.contracts.contractList).length > 0 && compilationSource !== '' && <label data-id="udappCompiledBy">Compiled by {compilationSource} </label>  }
+        <OverlayTrigger placement={'right'} overlay={
+              <Tooltip className="text-nowrap" id="info-sync-compiled-contract">
+                <span>Remix is currently connected to an external framework. Click here to import contract compiled from that framework.</span>
+              </Tooltip>
+            }>
+            <i className="fa fa-refresh" aria-hidden="true" onClick={() => {
+              props.syncContracts()
+            }}></i>
+        </OverlayTrigger>
       </div>
       <div className="udapp_subcontainer">
        <select ref={contractsRef} value={currentContract} onChange={handleContractChange} className="udapp_contractNames custom-select" disabled={contractOptions.disabled} title={contractOptions.title} style={{ display: loadType === 'abi' && !isContractFile(currentFile) ? 'none' : 'block' }}>

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

@@ -26,7 +26,8 @@ import {
   executeTransactions, loadFromAddress,
   storeNewScenario, runScenario,
   setScenarioPath, getFuncABIValues,
-  setNetworkName, updateSelectedContract
+  setNetworkName, updateSelectedContract,
+  syncContracts
 } from './actions'
 import './css/run-tab.css'
 import { PublishToStorage } from '@remix-ui/publish-to-storage'
@@ -221,6 +222,7 @@ export function RunTabUI (props: RunTabProps) {
             passphrase={runTab.passphrase}
           />
           <ContractDropdownUI
+            syncContracts={syncContracts}
             exEnvironment={runTab.selectExEnv}
             contracts={runTab.contracts}
             getSelectedContract={fetchSelectedContract}

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

@@ -139,6 +139,7 @@ export interface ContractDropdownProps {
     isSuccessful: boolean,
     error: string
   },
+  syncContracts: () => void,
   getSelectedContract: (contractName: string, compiler: CompilerAbstract) => ContractData,
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   passphrase: string,

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

@@ -36,6 +36,7 @@ export class RunTab extends ViewPlugin {
     onReady(api: any): void;
     onInitDone(): void;
     recorder: Recorder;
+    // syncContracts(): void
 }
 import { ViewPlugin } from "@remixproject/engine-web/lib/view";
 import { Blockchain } from "./blockchain";

libs/remixd/src/services/hardhatClient.ts

@@ -12,10 +12,11 @@ export class HardhatClient extends PluginClient {
   currentSharedFolder: string
   watcher: chokidar.FSWatcher
   warnLog: boolean
+  buildPath: string
 
   constructor (private readOnly = false) {
     super()
-    this.methods = ['compile']
+    this.methods = ['compile', 'sync']
   }
 
   setWebSocket (websocket: WS): void {
@@ -28,6 +29,7 @@ export class HardhatClient extends PluginClient {
 
   sharedFolder (currentSharedFolder: string): void {
     this.currentSharedFolder = currentSharedFolder
+    this.buildPath = utils.absolutePath('artifacts/build-info', this.currentSharedFolder)
     this.listenOnHardhatCompilation()
   }
 
@@ -58,47 +60,53 @@ export class HardhatClient extends PluginClient {
     })
   }
 
-  listenOnHardhatCompilation () {
-    try {
-      const buildPath = utils.absolutePath('artifacts/build-info', this.currentSharedFolder)
-      this.watcher = chokidar.watch(buildPath, { depth: 0, ignorePermissionErrors: true, ignoreInitial: true })
-
-      const compilationResult = {
-        input: {},
-        output: {
-          contracts: {},
-          sources: {}
-        },
-        solcVersion: null
-      }
-      const processArtifact = async () => {
-        const folderFiles = await fs.readdir(buildPath)
-        // name of folders are file names
-        for (const file of folderFiles) {
-          if (file.endsWith('.json')) {
-            console.log('processing hardhat artifact', file)
-            const path = join(buildPath, file)
-            const content = await fs.readFile(path, { encoding: 'utf-8' })
-            await this.feedContractArtifactFile(content, compilationResult)
-          }
-        }
-        if (!this.warnLog) {
-          // @ts-ignore
-          this.call('terminal', 'log', 'receiving compilation result from hardhat')
-          this.warnLog = true
-        }
-        this.emit('compilationFinished', '', { sources: compilationResult.input }, 'soljson', compilationResult.output, compilationResult.solcVersion)      
+  private async processArtifact () {
+    const folderFiles = await fs.readdir(this.buildPath)
+    const compilationResult = {
+      input: {},
+      output: {
+        contracts: {},
+        sources: {}
+      },
+      solcVersion: null
+    }
+    // name of folders are file names
+    for (const file of folderFiles) {
+      if (file.endsWith('.json')) {
+        console.log('processing hardhat artifact', file)
+        const path = join(this.buildPath, file)
+        const content = await fs.readFile(path, { encoding: 'utf-8' })
+        await this.feedContractArtifactFile(content, compilationResult)
       }
+    }
+    if (!this.warnLog) {
+      // @ts-ignore
+      this.call('terminal', 'log', 'receiving compilation result from hardhat')
+      this.warnLog = true
+    }
+    this.emit('compilationFinished', '', { sources: compilationResult.input }, 'soljson', compilationResult.output, compilationResult.solcVersion)      
+  }
 
-      this.watcher.on('change', () => processArtifact())
-      this.watcher.on('add', () => processArtifact())
+  listenOnHardhatCompilation () {
+    try {
+      this.watcher = chokidar.watch(this.buildPath, { depth: 0, ignorePermissionErrors: true, ignoreInitial: true })
+      
+      this.watcher.on('change', () => this.processArtifact())
+      this.watcher.on('add', () => this.processArtifact())
       // process the artifact on activation
-      processArtifact()
+      this.processArtifact()
     } catch (e) {
       console.log(e)
     }    
   }
 
+  async sync () {
+    console.log('syncing from hardhat')
+    this.processArtifact()
+    // @ts-ignore
+    this.call('terminal', 'log', 'synced with hardhat')
+  }
+
   async feedContractArtifactFile (artifactContent, compilationResultPart) {
     const contentJSON = JSON.parse(artifactContent)
     compilationResultPart.solcVersion = contentJSON.solcVersion

package.json

@@ -102,7 +102,7 @@
     "nightwatch_local_search": "yarn run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/search.test.js --env=chromeDesktop",
     "nightwatch_local_providers": "yarn run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/providers.test.js --env=chromeDesktop",
     "onchange": "onchange apps/remix-ide/build/app.js -- npm-run-all lint",
-    "remixd": "nx build remixd && chmod +x dist/libs/remixd/src/bin/remixd.js && dist/libs/remixd/src/bin/remixd.js -s ./apps/remix-ide/contracts --remix-ide http://127.0.0.1:8080",
+    "remixd": "nx build remixd && chmod +x dist/libs/remixd/src/bin/remixd.js && dist/libs/remixd/src/bin/remixd.js -s /home/yann/tmp/projectB --remix-ide http://127.0.0.1:8080",
     "selenium": "selenium-standalone start",
     "selenium-install": "selenium-standalone install",
     "sourcemap": "exorcist --root ../ apps/remix-ide/build/app.js.map > apps/remix-ide/build/app.js",