toaster-react

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 { RemixUiToaster } 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(() => {
@@ -137,11 +139,10 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
           vmDebugger: false,
           vmDebuggerHead: false
         },
-        debugging: false
+        debugging: false,
       }
     })
   }
-
   const startDebugging = async (blockNumber, txNumber, tx) => {
     if (state.debugger) unLoad()
     if (!txNumber) return
@@ -169,7 +170,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
           txNumber,
           debugging: true,
           currentReceipt,
-          debugger: debuggerInstance
+          debugger: debuggerInstance,
+          toastMessage: `debugging ${txNumber} ...`
         }
       })
     }).catch((error) => {
@@ -205,9 +207,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>
+        <RemixUiToaster 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/remix-ui-toaster';

libs/remix-ui/toaster/src/lib/remix-ui-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/remix-ui-toaster.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react'
+
+import './remix-ui-toaster.css';
+
+/* eslint-disable-next-line */
+export interface RemixUiToasterProps {
+  message: any
+  opts?: RemixUiToasterOptions
+}
+
+export interface RemixUiToasterOptions {
+  time: number
+}
+
+export const RemixUiToaster = (props: RemixUiToasterProps) => {
+  const [state, setState] = useState({
+    timeOutId: null,
+    message: '',
+    hiding: false
+  })
+
+  const opts = defaultOptions(props.opts)
+
+  useEffect(() => {
+    let timeOutId = null
+    if (props.message) {
+      timeOutId = setTimeout(() => {
+        setState(prevState => {
+          return {
+            ...prevState,
+            hiding: true
+          }
+        })
+      }, opts.time)
+    }    
+
+    setState(prevState => {
+      return {
+        ...prevState,
+        message: props.message,
+        hiding: false,
+        timeOutId
+      }
+    })
+  }, [props.message])
+
+  const shortTooltipText = state.message.length > 201 ? state.message.substring(0, 200) + '...' : state.message
+      
+  function hide () {
+    if (state.timeOutId) clearTimeout(state.timeOutId)
+  }
+
+  function showFullMessage () {
+    alert(state.message)
+  }
+
+  function closeTheToaster () {
+    hide()           
+  }
+
+  // out()
+  const animate = state.timeOutId ? (state.hiding ? 'remixui_animateBottom' : 'remixui_animateTop') : ''
+  const hide = state.timeOutId
+  const className = `remixui_tooltip alert alert-info p-2 ${animate}`
+  return (
+    <div data-shared="tooltipPopup" className={className}  onMouseEnter={() => { }} onMouseLeave={() => { }}>
+      <span className="px-2">
+        {shortTooltipText}
+        { state.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>
+  )
+  
+  // animation(this.tooltip, css.animateBottom.className)  
+};
+
+export default RemixUiToaster;
+
+const defaultOptions = (opts) : RemixUiToasterOptions => {
+  opts = opts || {}
+  return {
+    time: opts.time || 7000
+  }
+}
+
+/*
+const animation = (tooltip, anim) => {
+  tooltip.classList.remove(css.animateTop.className)
+  tooltip.classList.remove(css.animateBottom.className)
+  // eslint-disable-next-line
+  void tooltip.offsetWidth // trick for restarting the animation
+  tooltip.classList.add(anim)
+}
+*/

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": []
     }
   }
 }

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