diff --git a/apps/remix-ide/src/app/ui/modaldialog.js b/apps/remix-ide/src/app/ui/modaldialog.js
index 7d336a4121..b04d604e98 100644
--- a/apps/remix-ide/src/app/ui/modaldialog.js
+++ b/apps/remix-ide/src/app/ui/modaldialog.js
@@ -2,8 +2,8 @@ var yo = require('yo-yo')
 var css = require('./styles/modaldialog-styles')
 
 let incomingModal = false // in case modals are queued, ensure we are not hiding the last one.
-module.exports = (title, content, ok, cancel, focusSelector, opts) => {
-  let agreed = true
+module.exports = (title, content, ok, cancel, focusSelector, opts) => { //props
+  let agreed = true //state vars
   let footerIsActive = false
   opts = opts || {}
   var container = document.querySelector('.modal')
@@ -130,21 +130,22 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => {
 
 function html (opts) {
   return yo`
-  <div id="modal-dialog" data-id="modalDialogContainer" data-backdrop="static" data-keyboard="false" class="modal" tabindex="-1" role="dialog">
-    <div id="modal-background" class="modal-dialog" role="document">
-      <div class="modal-content ${css.modalContent} ${opts.class}">
-        <div class="modal-header">
-          <h6 class="modal-title" data-id="modalDialogModalTitle"></h6>
-          <span class="modal-close">
-            <i id="modal-close" title="Close" class="fas fa-times" aria-hidden="true"></i>
-          </span>
-        </div>
-        <div class="modal-body ${css.modalBody}" data-id="modalDialogModalBody"> - </div>
-        <div class="modal-footer" data-id="modalDialogModalFooter" autofocus>
-          <span id="modal-footer-ok" class="${css.modalFooterOk} modal-ok btn btn-sm btn-light" tabindex='5'>OK</span>
-          <span id="modal-footer-cancel" class="${css.modalFooterCancel} modal-cancel btn btn-sm btn-light" tabindex='10' data-dismiss="modal">Cancel</span>
+    <div id="modal-dialog" data-id="modalDialogContainer" data-backdrop="static" data-keyboard="false" class="modal" tabindex="-1" role="dialog">
+      <div id="modal-background" class="modal-dialog" role="document">
+        <div class="modal-content ${css.modalContent} ${opts.class}">
+          <div class="modal-header">
+            <h6 class="modal-title" data-id="modalDialogModalTitle"></h6>
+            <span class="modal-close">
+              <i id="modal-close" title="Close" class="fas fa-times" aria-hidden="true"></i>
+            </span>
+          </div>
+          <div class="modal-body ${css.modalBody}" data-id="modalDialogModalBody"> - </div>
+          <div class="modal-footer" data-id="modalDialogModalFooter" autofocus>
+            <span id="modal-footer-ok" class="${css.modalFooterOk} modal-ok btn btn-sm btn-light" tabindex='5'>OK</span>
+            <span id="modal-footer-cancel" class="${css.modalFooterCancel} modal-cancel btn btn-sm btn-light" tabindex='10' data-dismiss="modal">Cancel</span>
+          </div>
         </div>
       </div>
     </div>
-  </div>`
+`
 }
diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
index ad3b69fa30..c5010d5998 100644
--- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
@@ -5,6 +5,7 @@ import VmDebugger from './vm-debugger/vm-debugger'
 import VmDebuggerHead from './vm-debugger/vm-debugger-head'
 import { TransactionDebugger as Debugger } from '@remix-project/remix-debug'
 import { DebuggerAPI, DebuggerUIProps } from './DebuggerAPI'
+import { ModalDialog } from '@remix-ui/modal-dialog'
 /* eslint-disable-next-line */
 import './debugger-ui.css'
 
@@ -23,7 +24,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     debugging: false,
     opt: {
       debugWithGeneratedSources: false
-    }
+    },
+    showModal: false
   })
 
   useEffect(() => {
@@ -114,10 +116,6 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     unLoad()
   }
 
-  const isDebuggerActive = () => {
-    return state.isActive
-  }
-
   const unLoad = () => {
     if (state.debugger) state.debugger.unload()
     setState(prevState => {
@@ -148,7 +146,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     try {
       currentReceipt = await web3.eth.getTransactionReceipt(txNumber)
     } catch (e) {
-    // throw modal
+      console.log('cant get tx', e)
+      setState((prevState) => { return { ...prevState, showModal: true } })
     }
     const debuggerInstance = new Debugger({
       web3,
@@ -157,6 +156,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
         try {
           return await debuggerModule.fetchContractAndCompile(address, currentReceipt)
         } catch (e) {
+          console.log('cant fetch tx')
           console.error(e)
         }
         return null
@@ -176,48 +176,55 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
         }
       })
     }).catch((error) => {
+      console.log('unloading while ', error)
+      setState((prevState) => { return { ...prevState, showModal: true } })
       // toaster(error, null, null)
       unLoad()
     })
-}
-
-const debug = (txHash) => {
-  startDebugging(null, txHash, null)
-}
-
+  }
 
+  const debug = (txHash) => {
+    startDebugging(null, txHash, null)
+  }
 
+<<<<<<< HEAD
 const deleteHighlights = async () => {
   await debuggerModule.discardHighlight()
 }
-
-const stepManager = {
-  jumpTo: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpTo.bind(state.debugger.step_manager) : null,
-  stepOverBack: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepOverBack.bind(state.debugger.step_manager) : null,
-  stepIntoBack: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepIntoBack.bind(state.debugger.step_manager) : null,
-  stepIntoForward: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepIntoForward.bind(state.debugger.step_manager) : null,
-  stepOverForward: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepOverForward.bind(state.debugger.step_manager) : null,
-  jumpOut: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpOut.bind(state.debugger.step_manager) : null,
-  jumpPreviousBreakpoint: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpPreviousBreakpoint.bind(state.debugger.step_manager) : null,
-  jumpNextBreakpoint: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpNextBreakpoint.bind(state.debugger.step_manager) : null,
-  jumpToException: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpToException.bind(state.debugger.step_manager) : null,
-  traceLength: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.traceLength : null,
-  registerEvent: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.event.register.bind(state.debugger.step_manager.event) : null,
-}
-const vmDebugger = {
-  registerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.register.bind(state.debugger.vmDebuggerLogic.event) : null,
-  triggerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.trigger.bind(state.debugger.vmDebuggerLogic.event) : null
-}
+=======
+  const deleteHighlights = async () => {
+    await debuggerModule.call('editor', 'discardHighlight')
+  }
+>>>>>>> 1b1d8f0c7... modal dialog in react
+
+  const stepManager = {
+    jumpTo: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpTo.bind(state.debugger.step_manager) : null,
+    stepOverBack: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepOverBack.bind(state.debugger.step_manager) : null,
+    stepIntoBack: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepIntoBack.bind(state.debugger.step_manager) : null,
+    stepIntoForward: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepIntoForward.bind(state.debugger.step_manager) : null,
+    stepOverForward: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.stepOverForward.bind(state.debugger.step_manager) : null,
+    jumpOut: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpOut.bind(state.debugger.step_manager) : null,
+    jumpPreviousBreakpoint: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpPreviousBreakpoint.bind(state.debugger.step_manager) : null,
+    jumpNextBreakpoint: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpNextBreakpoint.bind(state.debugger.step_manager) : null,
+    jumpToException: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.jumpToException.bind(state.debugger.step_manager) : null,
+    traceLength: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.traceLength : null,
+    registerEvent: state.debugger && state.debugger.step_manager ? state.debugger.step_manager.event.register.bind(state.debugger.step_manager.event) : null,
+  }
+  const vmDebugger = {
+    registerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.register.bind(state.debugger.vmDebuggerLogic.event) : null,
+    triggerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.trigger.bind(state.debugger.vmDebuggerLogic.event) : null
+  }
 
   return (
     <div>
+      <ModalDialog title={'New Modal'} hide={!state.showModal} content={<span>Text</span>} opts={{ class: 'p-2', hideClose: true }} />
       <div className='px-2'>
         <div className='mt-3'>
           <p className='mt-2 debuggerLabel'>Debugger Configuration</p>
           <div className='mt-2 debuggerConfig custom-control custom-checkbox'>
             <input className='custom-control-input' id='debugGeneratedSourcesInput' onChange={({ target: { checked } }) => {
               setState(prevState => {
-                return { ...prevState, opt: { debugWithGeneratedSources: checked }}
+                return { ...prevState, opt: { debugWithGeneratedSources: checked } }
               })
             }} type='checkbox' title='Debug with generated sources' />
             <label data-id='debugGeneratedSourcesLabel' className='form-check-label custom-control-label' htmlFor='debugGeneratedSourcesInput'>Use generated sources (from Solidity v0.7.2)</label>
diff --git a/nx.json b/nx.json
index 4f7f389d61..4d67dd8f78 100644
--- a/nx.json
+++ b/nx.json
@@ -78,6 +78,9 @@
     },
     "remix-ui-clipboard": {
       "tags": []
+    },
+    "remix-ui-modal-dialog": {
+      "tags": []
     }
   }
 }
diff --git a/package.json b/package.json
index 77323d5243..b2792e8a88 100644
--- a/package.json
+++ b/package.json
@@ -279,6 +279,7 @@
     "webworkify-webpack": "^2.1.5",
     "worker-loader": "^2.0.0",
     "yo-yo": "github:ioedeveloper/yo-yo",
-    "yo-yoify": "^3.7.3"
+    "yo-yoify": "^3.7.3",
+    "@types/jest": "25.1.4"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 9d02a53d77..e937a8ad80 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,13 +23,16 @@
       "@remix-project/remix-simulator": ["dist/libs/remix-simulator/src/index.js"],
       "@remix-project/remix-solidity": ["dist/libs/remix-solidity/index.js"],
       "@remix-project/remix-tests": ["dist/libs/remix-tests/src/index.js"],
-      "@remix-project/remix-url-resolver": ["dist/libs/remix-url-resolver/index.js"],
+      "@remix-project/remix-url-resolver": [
+        "dist/libs/remix-url-resolver/index.js"
+      ],
       "@remix-project/remixd": ["dist/libs/remixd/index.js"],
       "@remix-ui/tree-view": ["libs/remix-ui/tree-view/src/index.ts"],
       "@remix-ui/debugger-ui": ["libs/remix-ui/debugger-ui/src/index.ts"],
       "@remix-ui/utils": ["libs/remix-ui/utils/src/index.ts"],
       "@remix-ui/clipboard": ["libs/remix-ui/clipboard/src/index.ts"],
       "@remix-project/remix-solidity-ts": ["libs/remix-solidity/src/index.ts"],
+      "@remix-ui/modal-dialog": ["libs/remix-ui/modal-dialog/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]
diff --git a/workspace.json b/workspace.json
index 73527185b5..77c2a4c088 100644
--- a/workspace.json
+++ b/workspace.json
@@ -424,7 +424,7 @@
       "projectType": "library",
       "schematics": {},
       "architect": {
-        "lint": { 
+        "lint": {
           "builder": "@nrwl/linter:lint",
           "options": {
             "linter": "eslint",
@@ -572,6 +572,36 @@
           }
         }
       }
+    },
+    "remix-ui-modal-dialog": {
+      "root": "libs/remix-ui/modal-dialog",
+      "sourceRoot": "libs/remix-ui/modal-dialog/src",
+      "projectType": "library",
+      "schematics": {},
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": [
+              "libs/remix-ui/modal-dialog/tsconfig.lib.json",
+              "libs/remix-ui/modal-dialog/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/remix-ui/modal-dialog/**/*"
+            ]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/remix-ui/modal-dialog/jest.config.js",
+            "tsConfig": "libs/remix-ui/modal-dialog/tsconfig.spec.json",
+            "passWithNoTests": true
+          }
+        }
+      }
     }
   },
   "cli": {