Merge pull request #693 from ethereum/toaster

Toaster
pull/697/head
David Disu 4 years ago committed by GitHub
commit 672a662ab8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 9
      apps/remix-ide/src/app/ui/tooltip.js
  2. 23
      libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
  3. 4
      libs/remix-ui/toaster/.babelrc
  4. 18
      libs/remix-ui/toaster/.eslintrc
  5. 7
      libs/remix-ui/toaster/README.md
  6. 1
      libs/remix-ui/toaster/src/index.ts
  7. 43
      libs/remix-ui/toaster/src/lib/toaster.css
  8. 108
      libs/remix-ui/toaster/src/lib/toaster.tsx
  9. 16
      libs/remix-ui/toaster/tsconfig.json
  10. 13
      libs/remix-ui/toaster/tsconfig.lib.json
  11. 3
      nx.json
  12. 2
      package.json
  13. 3
      tsconfig.json
  14. 16
      workspace.json

@ -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

@ -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>

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

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

@ -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).

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

@ -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;
}

@ -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

@ -0,0 +1,16 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"jsx": "react",
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
},
"files": [],
"include": [],
"references": [
{
"path": "./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"]
}

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

@ -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",

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

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

Loading…
Cancel
Save