From 9c7cf28a00f68526186ecf5d11be1fe1d9e0c606 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 8 Dec 2020 12:51:55 +0100
Subject: [PATCH 01/10] toaster-react

---
 apps/remix-ide/src/app/ui/tooltip.js          |  9 --
 .../debugger-ui/src/lib/debugger-ui.tsx       | 16 +--
 libs/remix-ui/toaster/.babelrc                |  4 +
 libs/remix-ui/toaster/.eslintrc               | 18 ++++
 libs/remix-ui/toaster/README.md               |  7 ++
 libs/remix-ui/toaster/src/index.ts            |  1 +
 .../toaster/src/lib/remix-ui-toaster.css      | 43 ++++++++
 .../toaster/src/lib/remix-ui-toaster.tsx      | 97 +++++++++++++++++++
 libs/remix-ui/toaster/tsconfig.json           | 16 +++
 libs/remix-ui/toaster/tsconfig.lib.json       | 13 +++
 nx.json                                       |  3 +
 tsconfig.json                                 |  3 +-
 workspace.json                                | 16 +++
 13 files changed, 229 insertions(+), 17 deletions(-)
 create mode 100644 libs/remix-ui/toaster/.babelrc
 create mode 100644 libs/remix-ui/toaster/.eslintrc
 create mode 100644 libs/remix-ui/toaster/README.md
 create mode 100644 libs/remix-ui/toaster/src/index.ts
 create mode 100644 libs/remix-ui/toaster/src/lib/remix-ui-toaster.css
 create mode 100644 libs/remix-ui/toaster/src/lib/remix-ui-toaster.tsx
 create mode 100644 libs/remix-ui/toaster/tsconfig.json
 create mode 100644 libs/remix-ui/toaster/tsconfig.lib.json

diff --git a/apps/remix-ide/src/app/ui/tooltip.js b/apps/remix-ide/src/app/ui/tooltip.js
index 63ab6283d5..700a08ef56 100644
--- a/apps/remix-ide/src/app/ui/tooltip.js
+++ b/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
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 f28ce848fb..e3df5e8264 100644
--- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
+++ b/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>
diff --git a/libs/remix-ui/toaster/.babelrc b/libs/remix-ui/toaster/.babelrc
new file mode 100644
index 0000000000..09d67939cc
--- /dev/null
+++ b/libs/remix-ui/toaster/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["@nrwl/react/babel"],
+  "plugins": []
+}
diff --git a/libs/remix-ui/toaster/.eslintrc b/libs/remix-ui/toaster/.eslintrc
new file mode 100644
index 0000000000..4cbd2b99cf
--- /dev/null
+++ b/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"
+  }
+} 
diff --git a/libs/remix-ui/toaster/README.md b/libs/remix-ui/toaster/README.md
new file mode 100644
index 0000000000..7686d07019
--- /dev/null
+++ b/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).
diff --git a/libs/remix-ui/toaster/src/index.ts b/libs/remix-ui/toaster/src/index.ts
new file mode 100644
index 0000000000..d0a8b4afa1
--- /dev/null
+++ b/libs/remix-ui/toaster/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/remix-ui-toaster';
diff --git a/libs/remix-ui/toaster/src/lib/remix-ui-toaster.css b/libs/remix-ui/toaster/src/lib/remix-ui-toaster.css
new file mode 100644
index 0000000000..c026edbf49
--- /dev/null
+++ b/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;    
+}
diff --git a/libs/remix-ui/toaster/src/lib/remix-ui-toaster.tsx b/libs/remix-ui/toaster/src/lib/remix-ui-toaster.tsx
new file mode 100644
index 0000000000..274cdd1a83
--- /dev/null
+++ b/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)
+}
+*/
diff --git a/libs/remix-ui/toaster/tsconfig.json b/libs/remix-ui/toaster/tsconfig.json
new file mode 100644
index 0000000000..6b65264565
--- /dev/null
+++ b/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"
+    }
+  ]
+}
diff --git a/libs/remix-ui/toaster/tsconfig.lib.json b/libs/remix-ui/toaster/tsconfig.lib.json
new file mode 100644
index 0000000000..b560bc4dec
--- /dev/null
+++ b/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"]
+}
diff --git a/nx.json b/nx.json
index 4d67dd8f78..91c901d448 100644
--- a/nx.json
+++ b/nx.json
@@ -81,6 +81,9 @@
     },
     "remix-ui-modal-dialog": {
       "tags": []
+    },
+    "remix-ui-toaster": {
+      "tags": []
     }
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 1aa5cd38a0..07d617152b 100644
--- a/tsconfig.json
+++ b/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"]
diff --git a/workspace.json b/workspace.json
index 98681978c6..6f6935c308 100644
--- a/workspace.json
+++ b/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": {

From f74b3d222e6c1f079d488213fbf609a35dc37c73 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Thu, 17 Dec 2020 12:43:00 +0100
Subject: [PATCH 02/10] Rename component

---
 .../debugger-ui/src/lib/debugger-ui.tsx        |  4 ++--
 libs/remix-ui/toaster/src/index.ts             |  2 +-
 .../lib/{remix-ui-toaster.css => toaster.css}  |  0
 .../lib/{remix-ui-toaster.tsx => toaster.tsx}  | 18 +++++++++---------
 4 files changed, 12 insertions(+), 12 deletions(-)
 rename libs/remix-ui/toaster/src/lib/{remix-ui-toaster.css => toaster.css} (100%)
 rename libs/remix-ui/toaster/src/lib/{remix-ui-toaster.tsx => toaster.tsx} (86%)

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 e3df5e8264..07176d669d 100644
--- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
@@ -5,7 +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 { DebuggerUIProps } from './DebuggerAPI'
-import { RemixUiToaster } from '@remix-ui/toaster'
+import { Toaster } from '@remix-ui/toaster'
 /* eslint-disable-next-line */
 import './debugger-ui.css'
 
@@ -209,7 +209,7 @@ const vmDebugger = {
 }
  return (
       <div>
-        <RemixUiToaster message={state.toastMessage} />
+        <Toaster message={state.toastMessage} />
         <div className="px-2">
           <div className="mt-3">
             <p className="mt-2 debuggerLabel">Debugger Configuration</p>
diff --git a/libs/remix-ui/toaster/src/index.ts b/libs/remix-ui/toaster/src/index.ts
index d0a8b4afa1..f252befc14 100644
--- a/libs/remix-ui/toaster/src/index.ts
+++ b/libs/remix-ui/toaster/src/index.ts
@@ -1 +1 @@
-export * from './lib/remix-ui-toaster';
+export * from './lib/toaster';
diff --git a/libs/remix-ui/toaster/src/lib/remix-ui-toaster.css b/libs/remix-ui/toaster/src/lib/toaster.css
similarity index 100%
rename from libs/remix-ui/toaster/src/lib/remix-ui-toaster.css
rename to libs/remix-ui/toaster/src/lib/toaster.css
diff --git a/libs/remix-ui/toaster/src/lib/remix-ui-toaster.tsx b/libs/remix-ui/toaster/src/lib/toaster.tsx
similarity index 86%
rename from libs/remix-ui/toaster/src/lib/remix-ui-toaster.tsx
rename to libs/remix-ui/toaster/src/lib/toaster.tsx
index 274cdd1a83..35f279f971 100644
--- a/libs/remix-ui/toaster/src/lib/remix-ui-toaster.tsx
+++ b/libs/remix-ui/toaster/src/lib/toaster.tsx
@@ -1,18 +1,18 @@
 import React, { useEffect, useState } from 'react'
 
-import './remix-ui-toaster.css';
+import './toaster.css';
 
 /* eslint-disable-next-line */
-export interface RemixUiToasterProps {
+export interface ToasterProps {
   message: any
-  opts?: RemixUiToasterOptions
+  opts?: ToasterOptions
 }
 
-export interface RemixUiToasterOptions {
+export interface ToasterOptions {
   time: number
 }
 
-export const RemixUiToaster = (props: RemixUiToasterProps) => {
+export const Toaster = (props: ToasterProps) => {
   const [state, setState] = useState({
     timeOutId: null,
     message: '',
@@ -51,7 +51,7 @@ export const RemixUiToaster = (props: RemixUiToasterProps) => {
   }
 
   function showFullMessage () {
-    alert(state.message)
+    // alert(state.message)
   }
 
   function closeTheToaster () {
@@ -60,7 +60,7 @@ export const RemixUiToaster = (props: RemixUiToasterProps) => {
 
   // out()
   const animate = state.timeOutId ? (state.hiding ? 'remixui_animateBottom' : 'remixui_animateTop') : ''
-  const hide = state.timeOutId
+  // const hide = state.timeOutId
   const className = `remixui_tooltip alert alert-info p-2 ${animate}`
   return (
     <div data-shared="tooltipPopup" className={className}  onMouseEnter={() => { }} onMouseLeave={() => { }}>
@@ -77,9 +77,9 @@ export const RemixUiToaster = (props: RemixUiToasterProps) => {
   // animation(this.tooltip, css.animateBottom.className)  
 };
 
-export default RemixUiToaster;
+export default Toaster;
 
-const defaultOptions = (opts) : RemixUiToasterOptions => {
+const defaultOptions = (opts) : ToasterOptions => {
   opts = opts || {}
   return {
     time: opts.time || 7000

From 2f752eb5ff27df577fde9ba1f5978c3ddc88a392 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Sun, 20 Dec 2020 17:27:10 +0100
Subject: [PATCH 03/10] Fixed linting errors

---
 libs/remix-ui/toaster/.eslintrc           |  2 +-
 libs/remix-ui/toaster/src/index.ts        |  2 +-
 libs/remix-ui/toaster/src/lib/toaster.tsx | 23 +++++++++++------------
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/libs/remix-ui/toaster/.eslintrc b/libs/remix-ui/toaster/.eslintrc
index 4cbd2b99cf..b8666066e9 100644
--- a/libs/remix-ui/toaster/.eslintrc
+++ b/libs/remix-ui/toaster/.eslintrc
@@ -3,7 +3,7 @@
       "browser": true,
       "es6": true
   },
-  "extends": "../../.eslintrc",
+  "extends": "../../../.eslintrc",
   "globals": {
       "Atomics": "readonly",
       "SharedArrayBuffer": "readonly"
diff --git a/libs/remix-ui/toaster/src/index.ts b/libs/remix-ui/toaster/src/index.ts
index f252befc14..1db646761e 100644
--- a/libs/remix-ui/toaster/src/index.ts
+++ b/libs/remix-ui/toaster/src/index.ts
@@ -1 +1 @@
-export * from './lib/toaster';
+export * from './lib/toaster'
diff --git a/libs/remix-ui/toaster/src/lib/toaster.tsx b/libs/remix-ui/toaster/src/lib/toaster.tsx
index 35f279f971..f1117cc48c 100644
--- a/libs/remix-ui/toaster/src/lib/toaster.tsx
+++ b/libs/remix-ui/toaster/src/lib/toaster.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react' // eslint-disable-line
 
-import './toaster.css';
+import './toaster.css'
 
 /* eslint-disable-next-line */
 export interface ToasterProps {
@@ -32,7 +32,7 @@ export const Toaster = (props: ToasterProps) => {
           }
         })
       }, opts.time)
-    }    
+    }
 
     setState(prevState => {
       return {
@@ -45,7 +45,7 @@ export const Toaster = (props: ToasterProps) => {
   }, [props.message])
 
   const shortTooltipText = state.message.length > 201 ? state.message.substring(0, 200) + '...' : state.message
-      
+
   function hide () {
     if (state.timeOutId) clearTimeout(state.timeOutId)
   }
@@ -55,7 +55,7 @@ export const Toaster = (props: ToasterProps) => {
   }
 
   function closeTheToaster () {
-    hide()           
+    hide()
   }
 
   // out()
@@ -63,21 +63,20 @@ export const Toaster = (props: ToasterProps) => {
   // const hide = state.timeOutId
   const className = `remixui_tooltip alert alert-info p-2 ${animate}`
   return (
-    <div data-shared="tooltipPopup" className={className}  onMouseEnter={() => { }} onMouseLeave={() => { }}>
+    <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> : ''}            
+        { 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'}}>
+      <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)  
-};
+  // animation(this.tooltip, css.animateBottom.className)
+}
 
-export default Toaster;
+export default Toaster
 
 const defaultOptions = (opts) : ToasterOptions => {
   opts = opts || {}

From 46af2510e4eb3b62b4c98d0c6eedff564570073f Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Sun, 20 Dec 2020 17:48:37 +0100
Subject: [PATCH 04/10] Add linting to circleci

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fcb6d4c0fa..6f027da5d7 100644
--- a/package.json
+++ b/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",

From 3d37ab3253fa4ff523b96e5dfd909a2292f25b43 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Tue, 22 Dec 2020 10:42:11 +0100
Subject: [PATCH 05/10] Set timeout

---
 libs/remix-ui/toaster/src/lib/toaster.tsx | 46 ++++++++---------------
 1 file changed, 16 insertions(+), 30 deletions(-)

diff --git a/libs/remix-ui/toaster/src/lib/toaster.tsx b/libs/remix-ui/toaster/src/lib/toaster.tsx
index f1117cc48c..5967a0aeb8 100644
--- a/libs/remix-ui/toaster/src/lib/toaster.tsx
+++ b/libs/remix-ui/toaster/src/lib/toaster.tsx
@@ -5,7 +5,7 @@ import './toaster.css'
 /* eslint-disable-next-line */
 export interface ToasterProps {
   message: any
-  opts?: ToasterOptions
+  timeOut?: number
 }
 
 export interface ToasterOptions {
@@ -14,40 +14,33 @@ export interface ToasterOptions {
 
 export const Toaster = (props: ToasterProps) => {
   const [state, setState] = useState({
-    timeOutId: null,
     message: '',
-    hiding: false
+    hide: false,
+    timeOutId: null,
+    timeOut: props.timeOut || 700
   })
 
-  const opts = defaultOptions(props.opts)
-
   useEffect(() => {
-    let timeOutId = null
     if (props.message) {
-      timeOutId = setTimeout(() => {
+      const timeOutId = setTimeout(() => {
         setState(prevState => {
-          return {
-            ...prevState,
-            hiding: true
-          }
+          return { ...prevState, hide: true }
         })
-      }, opts.time)
-    }
+      }, state.timeOut)
 
-    setState(prevState => {
-      return {
-        ...prevState,
-        message: props.message,
-        hiding: false,
-        timeOutId
-      }
-    })
+      console.log('timeOutId: ', timeOutId)
+      setState(prevState => {
+        return { ...prevState, hide: false, timeOutId, message: props.message }
+      })
+    }
   }, [props.message])
 
   const shortTooltipText = state.message.length > 201 ? state.message.substring(0, 200) + '...' : state.message
 
   function hide () {
-    if (state.timeOutId) clearTimeout(state.timeOutId)
+    if (!state.hide) {
+      clearTimeout(state.timeOutId)
+    }
   }
 
   function showFullMessage () {
@@ -59,7 +52,7 @@ export const Toaster = (props: ToasterProps) => {
   }
 
   // out()
-  const animate = state.timeOutId ? (state.hiding ? 'remixui_animateBottom' : 'remixui_animateTop') : ''
+  const animate = state.timeOutId ? (state.hide ? 'remixui_animateBottom' : 'remixui_animateTop') : ''
   // const hide = state.timeOutId
   const className = `remixui_tooltip alert alert-info p-2 ${animate}`
   return (
@@ -78,13 +71,6 @@ export const Toaster = (props: ToasterProps) => {
 
 export default Toaster
 
-const defaultOptions = (opts) : ToasterOptions => {
-  opts = opts || {}
-  return {
-    time: opts.time || 7000
-  }
-}
-
 /*
 const animation = (tooltip, anim) => {
   tooltip.classList.remove(css.animateTop.className)

From ea0af53183ba0d1197d0c19963ce30189e99f927 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Wed, 23 Dec 2020 10:22:41 +0100
Subject: [PATCH 06/10] Complete toaster component

---
 .../debugger-ui/src/lib/debugger-ui.tsx       | 13 ++-
 libs/remix-ui/toaster/src/lib/toaster.tsx     | 90 ++++++++++---------
 2 files changed, 56 insertions(+), 47 deletions(-)

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 07176d669d..72e79383db 100644
--- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
@@ -139,7 +139,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
           vmDebugger: false,
           vmDebuggerHead: false
         },
-        debugging: false,
+        debugging: false
       }
     })
   }
@@ -171,14 +171,19 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
           debugging: true,
           currentReceipt,
           debugger: debuggerInstance,
-          toastMessage: `debugging ${txNumber} ...`
+          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)
diff --git a/libs/remix-ui/toaster/src/lib/toaster.tsx b/libs/remix-ui/toaster/src/lib/toaster.tsx
index 5967a0aeb8..c8b6406839 100644
--- a/libs/remix-ui/toaster/src/lib/toaster.tsx
+++ b/libs/remix-ui/toaster/src/lib/toaster.tsx
@@ -1,82 +1,86 @@
 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: any
+  message: string
   timeOut?: number
 }
 
-export interface ToasterOptions {
-  time: number
-}
-
 export const Toaster = (props: ToasterProps) => {
   const [state, setState] = useState({
     message: '',
-    hide: false,
+    hide: true,
+    hiding: false,
     timeOutId: null,
-    timeOut: props.timeOut || 700
+    timeOut: props.timeOut || 7000,
+    showModal: false
   })
 
   useEffect(() => {
     if (props.message) {
       const timeOutId = setTimeout(() => {
         setState(prevState => {
-          return { ...prevState, hide: true }
+          return { ...prevState, hiding: true }
         })
       }, state.timeOut)
 
-      console.log('timeOutId: ', timeOutId)
       setState(prevState => {
-        return { ...prevState, hide: false, timeOutId, message: props.message }
+        const shortTooltipText = props.message.length > 201 ? props.message.substring(0, 200) + '...' : props.message
+
+        return { ...prevState, hide: false, hiding: false, timeOutId, message: shortTooltipText }
       })
     }
   }, [props.message])
 
-  const shortTooltipText = state.message.length > 201 ? state.message.substring(0, 200) + '...' : state.message
-
-  function hide () {
-    if (!state.hide) {
-      clearTimeout(state.timeOutId)
+  useEffect(() => {
+    if (state.hiding) {
+      setTimeout(() => {
+        closeTheToaster()
+      }, 1800)
     }
+  }, [state.hiding])
+
+  const showFullMessage = () => {
+    setState(prevState => {
+      return { ...prevState, showModal: true }
+    })
   }
 
-  function showFullMessage () {
-    // alert(state.message)
+  const hideFullMessage = () => {
+    setState(prevState => {
+      return { ...prevState, showModal: false }
+    })
   }
 
-  function closeTheToaster () {
-    hide()
+  const closeTheToaster = () => {
+    if (state.timeOutId) {
+      clearTimeout(state.timeOutId)
+    }
+    setState(() => {
+      return { message: '', hide: true, hiding: false, timeOut: 0, timeOutId: null, showModal: false }
+    })
   }
 
-  // out()
-  const animate = state.timeOutId ? (state.hide ? 'remixui_animateBottom' : 'remixui_animateTop') : ''
-  // const hide = state.timeOutId
-  const className = `remixui_tooltip alert alert-info p-2 ${animate}`
+  console.log('props.message.length: ', props.message.length)
   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>
+    <>
+      {/* <ModalDialog /> */}
+      { !state.hide &&
+        <div data-shared="tooltipPopup" className={`remixui_tooltip alert alert-info p-2 ${state.hiding ? 'remixui_animateTop' : 'remixui_animateBottom'}`} onMouseEnter={() => { }} onMouseLeave={() => { }}>
+          <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>
+      }
+    </>
   )
-  // animation(this.tooltip, css.animateBottom.className)
 }
 
 export default Toaster
-
-/*
-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)
-}
-*/

From a3d4e0cc1884b861a4668d520c1d734770509c2c Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Wed, 23 Dec 2020 10:26:36 +0100
Subject: [PATCH 07/10] Remove console logs

---
 libs/remix-ui/toaster/src/lib/toaster.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/libs/remix-ui/toaster/src/lib/toaster.tsx b/libs/remix-ui/toaster/src/lib/toaster.tsx
index c8b6406839..aea6e5f518 100644
--- a/libs/remix-ui/toaster/src/lib/toaster.tsx
+++ b/libs/remix-ui/toaster/src/lib/toaster.tsx
@@ -64,7 +64,6 @@ export const Toaster = (props: ToasterProps) => {
     })
   }
 
-  console.log('props.message.length: ', props.message.length)
   return (
     <>
       {/* <ModalDialog /> */}

From a1758e7722f56a5b7828f563cd25d14a0ae1ebfb Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Wed, 23 Dec 2020 10:29:23 +0100
Subject: [PATCH 08/10] Fix linting

---
 libs/remix-ui/toaster/src/lib/toaster.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/remix-ui/toaster/src/lib/toaster.tsx b/libs/remix-ui/toaster/src/lib/toaster.tsx
index aea6e5f518..fc13e8f6e3 100644
--- a/libs/remix-ui/toaster/src/lib/toaster.tsx
+++ b/libs/remix-ui/toaster/src/lib/toaster.tsx
@@ -49,7 +49,7 @@ export const Toaster = (props: ToasterProps) => {
     })
   }
 
-  const hideFullMessage = () => {
+  const hideFullMessage = () => { //eslint-disable-line
     setState(prevState => {
       return { ...prevState, showModal: false }
     })

From d8e2394798d2fb61fc32e13b36a9065e64ef8ba2 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Wed, 23 Dec 2020 11:47:35 +0100
Subject: [PATCH 09/10] Handle hover events

---
 libs/remix-ui/toaster/src/lib/toaster.tsx | 25 ++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/libs/remix-ui/toaster/src/lib/toaster.tsx b/libs/remix-ui/toaster/src/lib/toaster.tsx
index fc13e8f6e3..0dfcacc078 100644
--- a/libs/remix-ui/toaster/src/lib/toaster.tsx
+++ b/libs/remix-ui/toaster/src/lib/toaster.tsx
@@ -64,11 +64,34 @@ export const Toaster = (props: ToasterProps) => {
     })
   }
 
+  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={() => { }} onMouseLeave={() => { }}>
+        <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> }

From 50648649a0e9e3277d5ec38b3863ac2edd554dcb Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Wed, 23 Dec 2020 11:52:15 +0100
Subject: [PATCH 10/10] Fixed timeout bug

---
 libs/remix-ui/toaster/src/lib/toaster.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/remix-ui/toaster/src/lib/toaster.tsx b/libs/remix-ui/toaster/src/lib/toaster.tsx
index 0dfcacc078..6d3039dbc4 100644
--- a/libs/remix-ui/toaster/src/lib/toaster.tsx
+++ b/libs/remix-ui/toaster/src/lib/toaster.tsx
@@ -59,8 +59,8 @@ export const Toaster = (props: ToasterProps) => {
     if (state.timeOutId) {
       clearTimeout(state.timeOutId)
     }
-    setState(() => {
-      return { message: '', hide: true, hiding: false, timeOut: 0, timeOutId: null, showModal: false }
+    setState(prevState => {
+      return { ...prevState, message: '', hide: true, hiding: false, timeOutId: null, showModal: false }
     })
   }