diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 338af4bbec..e0aff565c4 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -20,6 +20,8 @@ import Registry from './app/state/registry'
 import { ConfigPlugin } from './app/plugins/config'
 import { Layout } from './app/panels/layout'
 import { ModalPlugin } from './app/plugins/modal'
+import { Blockchain } from './blockchain/blockchain.js'
+import { HardhatProvider } from './app/tabs/hardhat-provider'
 
 const isElectron = require('is-electron')
 
@@ -28,7 +30,6 @@ const remixLib = require('@remix-project/remix-lib')
 const QueryParams = require('./lib/query-params')
 const Storage = remixLib.Storage
 const RemixDProvider = require('./app/files/remixDProvider')
-const HardhatProvider = require('./app/tabs/hardhat-provider')
 const Config = require('./config')
 
 const FileManager = require('./app/files/fileManager')
@@ -37,8 +38,6 @@ const DGitProvider = require('./app/files/dgitProvider')
 const WorkspaceFileProvider = require('./app/files/workspaceFileProvider')
 const toolTip = require('./app/ui/tooltip')
 
-const Blockchain = require('./blockchain/blockchain.js')
-
 const PluginManagerComponent = require('./app/components/plugin-manager-component')
 
 const CompileTab = require('./app/tabs/compile-tab')
diff --git a/apps/remix-ide/src/app/tabs/hardhat-provider.js b/apps/remix-ide/src/app/tabs/hardhat-provider.tsx
similarity index 56%
rename from apps/remix-ide/src/app/tabs/hardhat-provider.js
rename to apps/remix-ide/src/app/tabs/hardhat-provider.tsx
index 07d3f86ebd..bb5ea12afa 100644
--- a/apps/remix-ide/src/app/tabs/hardhat-provider.js
+++ b/apps/remix-ide/src/app/tabs/hardhat-provider.tsx
@@ -1,7 +1,9 @@
 import * as packageJson from '../../../../../package.json'
 import { Plugin } from '@remixproject/engine'
-import Web3 from 'web3'
+import { AppModal, AlertModal, ModalTypes } from '@remix-ui/app'
 import React from 'react' // eslint-disable-line
+import { Blockchain } from '../../blockchain/blockchain'
+import { ethers } from 'ethers'
 
 const profile = {
   name: 'hardhat-provider',
@@ -12,7 +14,28 @@ const profile = {
   version: packageJson.version
 }
 
-export default class HardhatProvider extends Plugin {
+type JsonDataRequest = {
+  id: number,
+  jsonrpc: string // version
+  method: string,
+  params: Array<any>,
+}
+
+type JsonDataResult = {
+  id: number,
+  jsonrpc: string // version
+  result: any
+}
+
+type RejectRequest = (error: Error) => void
+type SuccessRequest = (data: JsonDataResult) => void
+
+export class HardhatProvider extends Plugin {
+  provider: ethers.providers.JsonRpcProvider
+  blocked: boolean
+  blockchain: Blockchain
+  target: String
+
   constructor (blockchain) {
     super(profile)
     this.provider = null
@@ -26,37 +49,36 @@ export default class HardhatProvider extends Plugin {
   }
 
   hardhatProviderDialogBody () {
-    return <div>
-          Note: To run Hardhat network node on your system, go to hardhat project folder and run command:
-          <div class="border p-1">npx hardhat node</div>       
+    return (<div> Note: To run Hardhat network node on your system, go to hardhat project folder and run command:
+          <div className="border p-1">npx hardhat node</div>       
         For more info, visit: <a href="https://hardhat.org/getting-started/#connecting-a-wallet-or-dapp-to-hardhat-network" target="_blank">Hardhat Documentation</a>       
         Hardhat JSON-RPC Endpoint
-      </div>
+      </div>)
   }
 
-  sendAsync (data) {
+  sendAsync (data: JsonDataRequest) {
     return new Promise(async (resolve, reject) => {
       if (this.blocked) return reject(new Error('provider unable to connect'))
       // If provider is not set, allow to open modal only when provider is trying to connect
       if (!this.provider) {
-        let value
+        let value: string
         try {
-          value = await (() => {
+          value = await ((): Promise<string> => {
             return new Promise((resolve, reject) => {
-              const modalContent = {
+              const modalContent: AppModal = {
                 id: 'harrhatprovider',
                 title: 'Hardhat node request',
                 message: this.hardhatProviderDialogBody(),
-                modalType: 'prompt',
+                modalType: ModalTypes.prompt,
                 okLabel: 'OK',
                 cancelLabel: 'Cancel',
-                okFn: (value) => {
+                okFn: (value: string) => {
                   setTimeout(() => resolve(value), 0)
                 },
-                cancelFn: (value) => {
+                cancelFn: () => {
                   setTimeout(() => reject(new Error('Canceled')), 0)
                 },
-                hideFn: (value) => {
+                hideFn: () => {
                   setTimeout(() => reject(new Error('Hide')), 0)
                 },
                 defaultValue: 'http://127.0.0.1:8545'
@@ -68,7 +90,7 @@ export default class HardhatProvider extends Plugin {
           // the modal has been canceled/hide
           return
         }        
-        this.provider = new Web3.providers.HttpProvider(target)
+        this.provider = new ethers.providers.JsonRpcProvider(value)
         this.sendAsyncInternal(data, resolve, reject)       
       } else {
         this.sendAsyncInternal(data, resolve, reject)
@@ -76,34 +98,31 @@ export default class HardhatProvider extends Plugin {
     })
   }
 
-  sendAsyncInternal (data, resolve, reject) {
+  async sendAsyncInternal (data: JsonDataRequest, resolve: SuccessRequest, reject: RejectRequest) {
     if (this.provider) {
       // Check the case where current environment is VM on UI and it still sends RPC requests
       // This will be displayed on UI tooltip as 'cannot get account list: Environment Updated !!'
       if (this.blockchain.getProvider() !== 'Hardhat Provider' && data.method !== 'net_listening') return reject(new Error('Environment Updated !!'))
-      this.provider[this.provider.sendAsync ? 'sendAsync' : 'send'](data, async (error, message) => {
-        if (error) {
-          this.blocked = true
-          const modalContent = {
-            id: 'harrhatprovider',
-            title: 'Hardhat Provider',
-            message: `Error while connecting to the hardhat provider: ${error.message}`,
-            modalType: 'alert',
-            okLabel: 'OK'
-          }
-          this.call('modal', 'modal', modalContent)    
-          await this.call('udapp', 'setEnvironmentMode', { context: 'vm', fork: 'london' })
-          this.provider = null
-          setTimeout(_ => { this.blocked = false }, 1000) // we wait 1 second for letting remix to switch to vm
-          return reject(error)
+
+      try {
+        const result = await this.provider.send(data.method, data.params)
+        resolve({ jsonrpc: '2.0', result, id: data.id })
+      } catch (error) {
+        this.blocked = true
+        const modalContent: AlertModal = {
+          id: 'harrhatprovider',
+          title: 'Hardhat Provider',
+          message: `Error while connecting to the hardhat provider: ${error.message}`,
         }
-        resolve(message)
-      })
+        this.call('modal', 'alert', modalContent)
+        await this.call('udapp', 'setEnvironmentMode', { context: 'vm', fork: 'london' })
+        this.provider = null
+        setTimeout(_ => { this.blocked = false }, 1000) // we wait 1 second for letting remix to switch to vm
+        reject(error)
+      }
     } else {
       const result = data.method === 'net_listening' ? 'canceled' : []
       resolve({ jsonrpc: '2.0', result: result, id: data.id })
     }
   }
-}
-
-module.exports = HardhatProvider
+}
\ No newline at end of file
diff --git a/apps/remix-ide/src/blockchain/blockchain.js b/apps/remix-ide/src/blockchain/blockchain.js
index f280e47d8b..486c3041f6 100644
--- a/apps/remix-ide/src/blockchain/blockchain.js
+++ b/apps/remix-ide/src/blockchain/blockchain.js
@@ -23,7 +23,7 @@ const profile = {
   version: packageJson.version
 }
 
-class Blockchain extends Plugin {
+export class Blockchain extends Plugin {
   // NOTE: the config object will need to be refactored out in remix-lib
   constructor (config) {
     super(profile)
@@ -545,5 +545,3 @@ class Blockchain extends Plugin {
     })
   }
 }
-
-module.exports = Blockchain
diff --git a/libs/remix-ui/app/src/index.ts b/libs/remix-ui/app/src/index.ts
index d02ade520c..e706f1ad94 100644
--- a/libs/remix-ui/app/src/index.ts
+++ b/libs/remix-ui/app/src/index.ts
@@ -3,4 +3,4 @@ export { dispatchModalContext } from './lib/remix-app/context/context'
 export { ModalProvider } from './lib/remix-app/context/provider'
 export { AppModal } from './lib/remix-app/interface/index'
 export { AlertModal } from './lib/remix-app/interface/index'
-export * from './lib/remix-app/types/index'
+export { ModalTypes } from './lib/remix-app/types/index'