add ganache provider

apps/remix-ide/src/app.js

@@ -26,6 +26,7 @@ import { Layout } from './app/panels/layout'
 import { NotificationPlugin } from './app/plugins/notification'
 import { Blockchain } from './blockchain/blockchain.js'
 import { HardhatProvider } from './app/tabs/hardhat-provider'
+import { GanacheProvider } from './app/tabs/ganache-provider'
 
 const isElectron = require('is-electron')
 
@@ -174,6 +175,7 @@ class AppComponent {
     // ----------------- represent the current selected web3 provider ----
     const web3Provider = new Web3ProviderModule(blockchain)
     const hardhatProvider = new HardhatProvider(blockchain)
+    const ganacheProvider = new GanacheProvider(blockchain)
     // ----------------- convert offset to line/column service -----------
     const offsetToLineColumnConverter = new OffsetToLineColumnConverter()
     Registry.getInstance().put({
@@ -229,6 +231,7 @@ class AppComponent {
       dGitProvider,
       storagePlugin,
       hardhatProvider,
+      ganacheProvider,
       this.walkthroughService,
     ])
 

apps/remix-ide/src/app/tabs/ganache-provider.tsx

@@ -0,0 +1,33 @@
+import * as packageJson from '../../../../../package.json'
+import { Plugin } from '@remixproject/engine'
+import { AppModal, AlertModal, ModalTypes } from '@remix-ui/app'
+import React from 'react' // eslint-disable-line
+import { Blockchain } from '../../blockchain/blockchain'
+import { ethers } from 'ethers'
+import { AbstractProvider } from './abstract-provider'
+
+const profile = {
+  name: 'ganache-provider',
+  displayName: 'Ganache',
+  kind: 'provider',
+  description: 'Ganache',
+  methods: ['sendAsync'],
+  version: packageJson.version
+}
+
+export class GanacheProvider extends AbstractProvider {
+  constructor (blockchain) {
+    super(profile, blockchain, 'http://127.0.0.1:8545')
+  }
+
+  body (): JSX.Element {
+    return (
+      <div> Note: To run Ganache on your system, run
+        <div className="border p-1">npm install -g ganache</div> 
+        <div className="border p-1">ganache</div>       
+        For more info, visit: <a href="https://github.com/trufflesuite/ganache" target="_blank">Ganache Documentation</a>
+        <div>Ganache JSON-RPC Endpoint:</div>
+      </div>
+    )
+  }
+}

apps/remix-ide/src/app/udapp/run-tab.js

@@ -96,8 +96,9 @@ export class RunTab extends ViewPlugin {
     this.REACT_API = api    
   }
 
-  onInitDone () {
+  async onInitDone () {
-    this.call('manager', 'activatePlugin', 'hardhat-provider')
+    await this.call('manager', 'activatePlugin', 'hardhat-provider')
+    await this.call('manager', 'activatePlugin', 'ganache-provider')
   }
 
   writeFile (fileName, content) {