Fixed copy to clipboard

libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx

@@ -1,28 +1,19 @@
 import React from 'react'
-import * as copy from 'copy-text-to-clipboard'
+import copy from 'copy-text-to-clipboard'
 
 import './copy-to-clipboard.css'
 
-export const CopyToClipboard = ({ getContent, tip='Copy value to clipboard', icon='fa-copy', ...otherProps }) => {
+export const CopyToClipboard = ({ content, tip='Copy value to clipboard', icon='fa-copy', ...otherProps }) => {
   const handleClick = () => {
-    let copiableContent:string
+    if (content) {   // module `copy` keeps last copied thing in the memory, so don't show tooltip if nothing is copied, because nothing was added to memory
-
-    try {
-      copiableContent = getContent()
-    } catch (e) {
-      // addTooltip(e.message)
-      return
-    }
-
-    if (copiableContent) {   // module `copy` keeps last copied thing in the memory, so don't show tooltip if nothing is copied, because nothing was added to memory
       try {
-        if (typeof copiableContent !== 'string') {
+        if (typeof content !== 'string') {
-          copiableContent = JSON.stringify(copiableContent, null, '\t')
+          content = JSON.stringify(content, null, '\t')
         }
       } catch (e) {
         console.error(e)
       }
-      copy(copiableContent)
+      copy(content)
       // addTooltip('Copied value to clipboard.')
     } else {
       // addTooltip('Cannot copy empty content!')

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

@@ -9,13 +9,10 @@ import toaster from '../../../../../apps/remix-ide/src/app/ui/tooltip'
 /* eslint-disable-next-line */
 import SourceHighlighter from '../../../../../apps/remix-ide/src/app/editor/sourceHighlighter'
 /* eslint-disable-next-line */
-import EventManager from '../../../../../apps/remix-ide/src/lib/events'
-/* eslint-disable-next-line */
 import globalRegistry from '../../../../../apps/remix-ide/src/global/registry'
 import './debugger-ui.css'
 
 export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash, getTraceHash, removeHighlights }) => {
-  const event = new EventManager()
   const sourceHighlighter = new SourceHighlighter()
   const init = remixDebug.init
   const [state, setState] = useState({
@@ -143,7 +140,7 @@ export const DebuggerUI = ({ debuggerModule, fetchContractAndCompile, debugHash,
     //     }
     //   }
     // })
-    event.trigger('traceUnloaded', [])
+    // event.trigger('traceUnloaded', [])
   }
 
   const startDebugging = async (blockNumber, txNumber, tx) => {

libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx

@@ -6,13 +6,10 @@ import { CopyToClipboard } from '@remix-ui/clipboard'
 
 
 import './styles/dropdown-panel.css'
-/* eslint-disable-next-line */
-import EventManager from '../../../../../../apps/remix-ide/src/lib/events'
 
 export const DropdownPanel = (props: DropdownPanelProps) => {
     const { dropdownName, dropdownMessage, opts, calldata, header, loading, extractFunc, formatSelfFunc } = props
     const data = useExtractData(calldata, extractFunc)
-    const event = new EventManager()
     const dropdownRawEl = useRef(null)
     const [state, setState] = useState({
         header: '',
@@ -26,14 +23,11 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
             innerText: '',
             display: 'none'
         },
-        dropdownRawContent: {
-            innerText: '',
-            display: 'none'
-        },
         title: {
             innerText: '',
             display: 'none'
         },
+        copiableContent: '',
         updating: false
     })
 
@@ -51,8 +45,6 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
 
     const handleToggle = () => {
         setState(prevState => {
-            if (prevState.toggleDropdown) event.trigger('hide', [])
-            else event.trigger('show', [])
             return {
                 ...prevState,
                 toggleDropdown: !prevState.toggleDropdown
@@ -86,14 +78,11 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
                     innerText: '',
                     display: 'none'
                 },
-                dropdownRawContent: {
-                    ...prevState.dropdownRawContent,
-                    display: 'none'
-                },
                 dropdownContent: {
                     ...prevState.dropdownContent,
                     display: 'none'
                 },
+                copiableContent: '',
                 updating: true
             }
         })
@@ -107,35 +96,12 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
                     ...prevState.dropdownContent,
                     display: 'block'
                 },
-                dropdownRawContent: {
+                copiableContent: JSON.stringify(calldata, null, '\t'),
-                    innerText: JSON.stringify(calldata, null, '\t'),
-                    display: 'block'
-                },
                 updating: false
             }
         })
     }
 
-    const hide = () => {
-        setState(prevState => {
-            return {
-                ...prevState,
-                toggleDropdown: false
-            }
-        })
-        event.trigger('hide', [])
-    } 
-      
-    const show = () => {
-        setState(prevState => {
-            return {
-                ...prevState,
-                toggleDropdown: true
-            }
-        })
-        event.trigger('show', [])
-    }
-
     const formatSelfDefault = (key: string, data: ExtractData) => {
         return (
             <div className="d-flex mb-1 flex-row label_item">
@@ -180,7 +146,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
     const title = <div className="py-0 px-1 title">
         <div className={state.toggleDropdown ? 'icon fas fa-caret-down' : 'icon fas fa-caret-right'} onClick={handleToggle}></div>
 <div className="name" onClick={handleToggle}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}>{ header }</span>
-        <CopyToClipboard getContent={copyClipboard} />
+        <CopyToClipboard content={state.copiableContent} />
     </div>
 
     return (
@@ -191,7 +157,6 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
                 <div className='dropdowncontent' style={{ display: state.dropdownContent.display }}>
                     { content }
                 </div>
-                <div className='dropdownrawcontent' style={{ display: state.dropdownRawContent.display }} ref={ dropdownRawEl }></div>
                 <div className='message' style={{ display: state.message.display }}>{ state.message.innerText }</div>
             </div>
         </div>

libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Dropdown, { DropdownPanel } from './dropdown-panel'
+import { DropdownPanel } from './dropdown-panel'
 
 export const FullStoragesChanges = ({ storageData }) => {
     return (