Merge pull request #693 from ethereum/toaster

Toaster

apps/remix-ide/src/app/ui/tooltip.js

@@ -24,15 +24,6 @@ class Toaster {
     animation(this.tooltip, css.animateTop.className)
   }
 
-  /**
-  * Force resolve the promise to close
-  * the toaster ignoring timeout
-  */
-  forceResolve () {
-    if (this.id) clearTimeout(this.id)
-    if (this.resolveFn) this.resolveFn()
-  }
-
   render (tooltipText, actionElement, opts) {
     opts = defaultOptions(opts)
     let canShorten = true

libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx

@@ -4,7 +4,8 @@ import StepManager from './step-manager/step-manager'
 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 { DebuggerUIProps } from './DebuggerAPI'
+import { Toaster } from '@remix-ui/toaster'
 /* eslint-disable-next-line */
 import './debugger-ui.css'
 
@@ -23,7 +24,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
     debugging: false,
     opt: {
       debugWithGeneratedSources: false
-    }
+    },
+    toastMessage: ''
   })
 
   useEffect(() => {
@@ -141,7 +143,6 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       }
     })
   }
-
   const startDebugging = async (blockNumber, txNumber, tx) => {
     if (state.debugger) unLoad()
     if (!txNumber) return
@@ -169,14 +170,20 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
           txNumber,
           debugging: true,
           currentReceipt,
-          debugger: debuggerInstance
+          debugger: debuggerInstance,
+          toastMessage: `debugging ${txNumber}`
         }
       })
     }).catch((error) => {
-      // toaster(error, null, null)
+      setState(prevState => {
+        return {
+          ...prevState,
+          toastMessage: JSON.stringify(error)
+        }
+      })
       unLoad()
     })
-}
+  }
 
 const debug = (txHash) => {
   startDebugging(null, txHash, null)
@@ -205,9 +212,9 @@ 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 (
-  return (
       <div>
+        <Toaster message={state.toastMessage} />
         <div className="px-2">
           <div className="mt-3">
             <p className="mt-2 debuggerLabel">Debugger Configuration</p>

libs/remix-ui/toaster/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@nrwl/react/babel"],
+  "plugins": []
+}

libs/remix-ui/toaster/.eslintrc

@@ -0,0 +1,18 @@
+{
+  "env": {
+      "browser": true,
+      "es6": true
+  },
+  "extends": "../../../.eslintrc",
+  "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+      "ecmaVersion": 11,
+      "sourceType": "module"
+  },
+  "rules": {
+      "standard/no-callback-literal": "off"
+  }
+} 

libs/remix-ui/toaster/README.md

@@ -0,0 +1,7 @@
+# remix-ui-toaster
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-toaster` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/toaster/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/toaster'

libs/remix-ui/toaster/src/lib/toaster.css

@@ -0,0 +1,43 @@
+.remixui_tooltip {
+    z-index: 1001;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: fixed;
+    min-height: 50px;
+    padding: 16px 24px 12px;
+    border-radius: 3px;
+    left: 40%;
+    font-size: 14px;
+    text-align: center;
+    bottom: -0px;
+    flex-direction: row;
+}
+@-webkit-keyframes remixui_animatebottom  {
+  0% {bottom: -300px}
+  100% {bottom: 0px}
+}
+@keyframes remixui_animatebottom  {
+  0% {bottom: -300px}
+  100% {bottom: 0px}
+}
+@-webkit-keyframes remixui_animatetop  {
+  0% {bottom: 0px}
+  100% {bottom: -300px}
+}
+@keyframes remixui_animatetop  {
+  0% {bottom: 0px}
+  100% {bottom: -300px}
+}
+.remixui_animateTop {
+  -webkit-animation-name: remixui_animatetop;
+  -webkit-animation-duration: 2s;
+  animation-name: remixui_animatetop;
+  animation-duration: 2s;
+}
+.remixui_animateBottom {
+  -webkit-animation-name: remixui_animatebottom;
+  -webkit-animation-duration: 2s;
+  animation-name: remixui_animatebottom;
+  animation-duration: 2s;    
+}

libs/remix-ui/toaster/src/lib/toaster.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from 'react' // eslint-disable-line
+import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
+
+import './toaster.css'
+
+/* eslint-disable-next-line */
+export interface ToasterProps {
+  message: string
+  timeOut?: number
+}
+
+export const Toaster = (props: ToasterProps) => {
+  const [state, setState] = useState({
+    message: '',
+    hide: true,
+    hiding: false,
+    timeOutId: null,
+    timeOut: props.timeOut || 7000,
+    showModal: false
+  })
+
+  useEffect(() => {
+    if (props.message) {
+      const timeOutId = setTimeout(() => {
+        setState(prevState => {
+          return { ...prevState, hiding: true }
+        })
+      }, state.timeOut)
+
+      setState(prevState => {
+        const shortTooltipText = props.message.length > 201 ? props.message.substring(0, 200) + '...' : props.message
+
+        return { ...prevState, hide: false, hiding: false, timeOutId, message: shortTooltipText }
+      })
+    }
+  }, [props.message])
+
+  useEffect(() => {
+    if (state.hiding) {
+      setTimeout(() => {
+        closeTheToaster()
+      }, 1800)
+    }
+  }, [state.hiding])
+
+  const showFullMessage = () => {
+    setState(prevState => {
+      return { ...prevState, showModal: true }
+    })
+  }
+
+  const hideFullMessage = () => { //eslint-disable-line
+    setState(prevState => {
+      return { ...prevState, showModal: false }
+    })
+  }
+
+  const closeTheToaster = () => {
+    if (state.timeOutId) {
+      clearTimeout(state.timeOutId)
+    }
+    setState(prevState => {
+      return { ...prevState, message: '', hide: true, hiding: false, timeOutId: null, showModal: false }
+    })
+  }
+
+  const handleMouseEnter = () => {
+    if (state.timeOutId) {
+      clearTimeout(state.timeOutId)
+    }
+    setState(prevState => {
+      return { ...prevState, timeOutId: null }
+    })
+  }
+
+  const handleMouseLeave = () => {
+    if (!state.timeOutId) {
+      const timeOutId = setTimeout(() => {
+        setState(prevState => {
+          return { ...prevState, hiding: true }
+        })
+      }, state.timeOut)
+
+      setState(prevState => {
+        return { ...prevState, timeOutId }
+      })
+    }
+  }
+
+  return (
+    <>
+      {/* <ModalDialog /> */}
+      { !state.hide &&
+        <div data-shared="tooltipPopup" className={`remixui_tooltip alert alert-info p-2 ${state.hiding ? 'remixui_animateTop' : 'remixui_animateBottom'}`} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+          <span className="px-2">
+            { state.message }
+            { (props.message.length > 201) && <button className="btn btn-secondary btn-sm mx-3" style={{ whiteSpace: 'nowrap' }} onClick={showFullMessage}>Show full message</button> }
+          </span>
+          <span style={{ alignSelf: 'baseline' }}>
+            <button data-id="tooltipCloseButton" className="fas fa-times btn-info mx-1 p-0" onClick={closeTheToaster}></button>
+          </span>
+        </div>
+      }
+    </>
+  )
+}
+
+export default Toaster

libs/remix-ui/toaster/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

libs/remix-ui/toaster/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

nx.json

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

package.json

@@ -41,7 +41,7 @@
     "workspace-schematic": "nx workspace-schematic",
     "dep-graph": "nx dep-graph",
     "help": "nx help",
-    "lint:libs": "nx run-many --target=lint --projects=remixd,remix-ui-modal-dialog",
+    "lint:libs": "nx run-many --target=lint --projects=remixd,remix-ui-modal-dialog,remix-ui-toaster",
     "build:libs": "nx run-many --target=build --parallel=false --with-deps=true --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd",
     "test:libs": "nx run-many --target=test --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd",
     "publish:libs": "npm run build:libs & lerna publish --skip-git & npm run bumpVersion:libs",

tsconfig.json

@@ -32,7 +32,8 @@
       "@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"]
+      "@remix-ui/modal-dialog": ["libs/remix-ui/modal-dialog/src/index.ts"],
+      "@remix-ui/toaster": ["libs/remix-ui/toaster/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]

workspace.json

@@ -601,6 +601,22 @@
           }
         }
       }
+    },
+    "remix-ui-toaster": {
+      "root": "libs/remix-ui/toaster",
+      "sourceRoot": "libs/remix-ui/toaster/src",
+      "projectType": "library",
+      "schematics": {},
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": ["libs/remix-ui/toaster/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/toaster/**/*"]
+          }
+        }
+      }
     }
   },
   "cli": {