modal dialog in react

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) => {
+module.exports = (title, content, ok, cancel, focusSelector, opts) => { //props
-  let agreed = true
+  let agreed = true //state vars
   let footerIsActive = false
   opts = opts || {}
   var container = document.querySelector('.modal')
@@ -146,5 +146,6 @@ function html (opts) {
           </div>
         </div>
       </div>
-  </div>`
+    </div>
+`
 }

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,22 +176,28 @@ 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) => {
+  const debug = (txHash) => {
     startDebugging(null, txHash, null)
-}
+  }
-
-
 
+<<<<<<< HEAD
 const deleteHighlights = async () => {
   await debuggerModule.discardHighlight()
 }
+=======
+  const deleteHighlights = async () => {
+    await debuggerModule.call('editor', 'discardHighlight')
+  }
+>>>>>>> 1b1d8f0c7... modal dialog in react
 
-const stepManager = {
+  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,
@@ -203,21 +209,22 @@ const stepManager = {
     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 = {
+  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>

nx.json

@@ -78,6 +78,9 @@
     },
     "remix-ui-clipboard": {
       "tags": []
+    },
+    "remix-ui-modal-dialog": {
+      "tags": []
     }
   }
 }

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"
   }
 }

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"]

workspace.json

@@ -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": {