Added copy to clipboard component

libs/remix-ui/clipboard/.babelrc

+{
+  "presets": ["@nrwl/react/babel"],
+  "plugins": []
+}

libs/remix-ui/clipboard/.eslintrc

+{
+  "rules": {
+    "array-callback-return": "warn",
+    "dot-location": ["warn", "property"],
+    "eqeqeq": ["warn", "smart"],
+    "new-parens": "warn",
+    "no-caller": "warn",
+    "no-cond-assign": ["warn", "except-parens"],
+    "no-const-assign": "warn",
+    "no-control-regex": "warn",
+    "no-delete-var": "warn",
+    "no-dupe-args": "warn",
+    "no-dupe-keys": "warn",
+    "no-duplicate-case": "warn",
+    "no-empty-character-class": "warn",
+    "no-empty-pattern": "warn",
+    "no-eval": "warn",
+    "no-ex-assign": "warn",
+    "no-extend-native": "warn",
+    "no-extra-bind": "warn",
+    "no-extra-label": "warn",
+    "no-fallthrough": "warn",
+    "no-func-assign": "warn",
+    "no-implied-eval": "warn",
+    "no-invalid-regexp": "warn",
+    "no-iterator": "warn",
+    "no-label-var": "warn",
+    "no-labels": ["warn", { "allowLoop": true, "allowSwitch": false }],
+    "no-lone-blocks": "warn",
+    "no-loop-func": "warn",
+    "no-mixed-operators": [
+      "warn",
+      {
+        "groups": [
+          ["&", "|", "^", "~", "<<", ">>", ">>>"],
+          ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
+          ["&&", "||"],
+          ["in", "instanceof"]
+        ],
+        "allowSamePrecedence": false
+      }
+    ],
+    "no-multi-str": "warn",
+    "no-native-reassign": "warn",
+    "no-negated-in-lhs": "warn",
+    "no-new-func": "warn",
+    "no-new-object": "warn",
+    "no-new-symbol": "warn",
+    "no-new-wrappers": "warn",
+    "no-obj-calls": "warn",
+    "no-octal": "warn",
+    "no-octal-escape": "warn",
+    "no-redeclare": "warn",
+    "no-regex-spaces": "warn",
+    "no-restricted-syntax": ["warn", "WithStatement"],
+    "no-script-url": "warn",
+    "no-self-assign": "warn",
+    "no-self-compare": "warn",
+    "no-sequences": "warn",
+    "no-shadow-restricted-names": "warn",
+    "no-sparse-arrays": "warn",
+    "no-template-curly-in-string": "warn",
+    "no-this-before-super": "warn",
+    "no-throw-literal": "warn",
+    "no-restricted-globals": [
+      "error",
+      "addEventListener",
+      "blur",
+      "close",
+      "closed",
+      "confirm",
+      "defaultStatus",
+      "defaultstatus",
+      "event",
+      "external",
+      "find",
+      "focus",
+      "frameElement",
+      "frames",
+      "history",
+      "innerHeight",
+      "innerWidth",
+      "length",
+      "location",
+      "locationbar",
+      "menubar",
+      "moveBy",
+      "moveTo",
+      "name",
+      "onblur",
+      "onerror",
+      "onfocus",
+      "onload",
+      "onresize",
+      "onunload",
+      "open",
+      "opener",
+      "opera",
+      "outerHeight",
+      "outerWidth",
+      "pageXOffset",
+      "pageYOffset",
+      "parent",
+      "print",
+      "removeEventListener",
+      "resizeBy",
+      "resizeTo",
+      "screen",
+      "screenLeft",
+      "screenTop",
+      "screenX",
+      "screenY",
+      "scroll",
+      "scrollbars",
+      "scrollBy",
+      "scrollTo",
+      "scrollX",
+      "scrollY",
+      "self",
+      "status",
+      "statusbar",
+      "stop",
+      "toolbar",
+      "top"
+    ],
+    "no-unexpected-multiline": "warn",
+    "no-unreachable": "warn",
+    "no-unused-expressions": [
+      "error",
+      {
+        "allowShortCircuit": true,
+        "allowTernary": true,
+        "allowTaggedTemplates": true
+      }
+    ],
+    "no-unused-labels": "warn",
+    "no-useless-computed-key": "warn",
+    "no-useless-concat": "warn",
+    "no-useless-escape": "warn",
+    "no-useless-rename": [
+      "warn",
+      {
+        "ignoreDestructuring": false,
+        "ignoreImport": false,
+        "ignoreExport": false
+      }
+    ],
+    "no-with": "warn",
+    "no-whitespace-before-property": "warn",
+    "react-hooks/exhaustive-deps": "warn",
+    "require-yield": "warn",
+    "rest-spread-spacing": ["warn", "never"],
+    "strict": ["warn", "never"],
+    "unicode-bom": ["warn", "never"],
+    "use-isnan": "warn",
+    "valid-typeof": "warn",
+    "no-restricted-properties": [
+      "error",
+      {
+        "object": "require",
+        "property": "ensure",
+        "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
+      },
+      {
+        "object": "System",
+        "property": "import",
+        "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
+      }
+    ],
+    "getter-return": "warn",
+    "import/first": "error",
+    "import/no-amd": "error",
+    "import/no-webpack-loader-syntax": "error",
+    "react/forbid-foreign-prop-types": ["warn", { "allowInPropTypes": true }],
+    "react/jsx-no-comment-textnodes": "warn",
+    "react/jsx-no-duplicate-props": "warn",
+    "react/jsx-no-target-blank": "warn",
+    "react/jsx-no-undef": "error",
+    "react/jsx-pascal-case": ["warn", { "allowAllCaps": true, "ignore": [] }],
+    "react/jsx-uses-react": "warn",
+    "react/jsx-uses-vars": "warn",
+    "react/no-danger-with-children": "warn",
+    "react/no-direct-mutation-state": "warn",
+    "react/no-is-mounted": "warn",
+    "react/no-typos": "error",
+    "react/react-in-jsx-scope": "error",
+    "react/require-render-return": "error",
+    "react/style-prop-object": "warn",
+    "react/jsx-no-useless-fragment": "warn",
+    "jsx-a11y/accessible-emoji": "warn",
+    "jsx-a11y/alt-text": "warn",
+    "jsx-a11y/anchor-has-content": "warn",
+    "jsx-a11y/anchor-is-valid": [
+      "warn",
+      { "aspects": ["noHref", "invalidHref"] }
+    ],
+    "jsx-a11y/aria-activedescendant-has-tabindex": "warn",
+    "jsx-a11y/aria-props": "warn",
+    "jsx-a11y/aria-proptypes": "warn",
+    "jsx-a11y/aria-role": "warn",
+    "jsx-a11y/aria-unsupported-elements": "warn",
+    "jsx-a11y/heading-has-content": "warn",
+    "jsx-a11y/iframe-has-title": "warn",
+    "jsx-a11y/img-redundant-alt": "warn",
+    "jsx-a11y/no-access-key": "warn",
+    "jsx-a11y/no-distracting-elements": "warn",
+    "jsx-a11y/no-redundant-roles": "warn",
+    "jsx-a11y/role-has-required-aria-props": "warn",
+    "jsx-a11y/role-supports-aria-props": "warn",
+    "jsx-a11y/scope": "warn",
+    "react-hooks/rules-of-hooks": "error",
+    "default-case": "off",
+    "no-dupe-class-members": "off",
+    "no-undef": "off",
+    "@typescript-eslint/consistent-type-assertions": "warn",
+    "no-array-constructor": "off",
+    "@typescript-eslint/no-array-constructor": "warn",
+    "@typescript-eslint/no-namespace": "error",
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": [
+      "warn",
+      {
+        "functions": false,
+        "classes": false,
+        "variables": false,
+        "typedefs": false
+      }
+    ],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      { "args": "none", "ignoreRestSiblings": true }
+    ],
+    "no-useless-constructor": "off",
+    "@typescript-eslint/no-useless-constructor": "warn"
+  },
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "jest": true,
+    "node": true
+  },
+  "settings": { "react": { "version": "detect" } },
+  "plugins": ["import", "jsx-a11y", "react", "react-hooks"],
+  "extends": ["../../../.eslintrc"],
+  "ignorePatterns": ["!**/*"]
+}

libs/remix-ui/clipboard/README.md

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

libs/remix-ui/clipboard/babel-jest.config.json

+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ]
+}

libs/remix-ui/clipboard/jest.config.js

+module.exports = {
+  name: 'remix-ui-clipboard',
+  preset: '../../../jest.config.js',
+  transform: {
+    '^.+\\.[tj]sx?$': [
+      'babel-jest',
+      { cwd: __dirname, configFile: './babel-jest.config.json' }
+    ]
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
+  coverageDirectory: '../../../coverage/libs/remix-ui/clipboard'
+};

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

+export * from './lib/copy-to-clipboard/copy-to-clipboard';

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

+.copyIcon {
+    margin-left: 5px;
+    cursor: pointer;
+}
\ No newline at end of file

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

+import React from 'react'
+import * as copy from 'copy-text-to-clipboard'
+
+import './copy-to-clipboard.css'
+
+export const CopyToClipboard = ({ getContent, tip='Copy value to clipboard', icon='fa-copy', ...otherProps }) => {
+  const handleClick = () => {
+    let copiableContent:string
+
+    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') {
+          copiableContent = JSON.stringify(copiableContent, null, '\t')
+        }
+      } catch (e) {
+        console.error(e)
+      }
+      copy(copiableContent)
+      // addTooltip('Copied value to clipboard.')
+    } else {
+      // addTooltip('Cannot copy empty content!')
+    }
+  }
+
+  return (
+    <i 
+      title={tip}
+      className={`copyIcon far ${icon} p-2`}
+      data-id="copyToClipboardCopyIcon"
+      aria-hidden="true"
+      {...otherProps}
+      onClick={handleClick}
+    ></i>
+  )
+}
+
+export default CopyToClipboard

libs/remix-ui/clipboard/tsconfig.json

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

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

+{
+  "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"]
+}

libs/remix-ui/clipboard/tsconfig.spec.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { ExtractData, ExtractFunc } from '../types'
 
 export const useExtractData = (json, extractFunc?: ExtractFunc): Array<{ key: string, data: ExtractData }> => {
-    const [data, setData] = useState(null)
+    const [data, setData] = useState([])
 
     useEffect(() => {
         const data: Array<{ key: string, data: ExtractData }> = Object.keys(json).map((innerKey) => {

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

@@ -190,26 +190,27 @@ const debug = (txHash) => {
 }
 
 const getTrace = (hash) => {
+  if (!hash) return
   return new Promise(async (resolve, reject) => { /* eslint-disable-line */
     const web3 = await getDebugWeb3()
     const currentReceipt = await web3.eth.getTransactionReceipt(hash)
-
-    setState(prevState => {
-      return { ...prevState, currentReceipt }
-    })
-
     const debug = new Debugger({
       web3,
       offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api,
       compilationResult: async (address) => {
         try {
-          return await fetchContractAndCompile(address, state.currentReceipt)
+          return await fetchContractAndCompile(address, currentReceipt)
         } catch (e) {
           console.error(e)
         }
         return null
       }
     })
+
+    setState(prevState => {
+      return { ...prevState, currentReceipt }
+    })
+
     debug.debugger.traceManager.traceRetriever.getTrace(hash, (error, trace) => {
       if (error) return reject(error)
       resolve(trace)
@@ -228,9 +229,9 @@ const deleteHighlights = async () => {
   return (
       <div>
         <div className="px-2">
-          <TxBrowser requestDebug={requestDebug} unloadRequested={unloadRequested} transactionNumber={state.txNumber} debugging={state.debugging} />
-          <StepManager stepManager={state.debugger ? state.debugger.step_manager : null} />
-          {/*<VmDebuggerHead vmDebuggerLogic={state.debugger.vmDebuggerLogic} /> */}
+          <TxBrowser requestDebug={ requestDebug } unloadRequested={ unloadRequested } transactionNumber={ state.txNumber } debugging={ state.debugging } />
+          <StepManager stepManager={ state.debugger ? state.debugger.step_manager : null } />
+          <VmDebuggerHead vmDebuggerLogic={ state.debugger ? state.debugger.vmDebuggerLogic : null } />
         </div>
         {/* <div className="statusMessage">{state.statusMessage}</div>
         <VmDebugger vmDebuggerLogic={state.debugger.vmDebuggerLogic} /> */}

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

@@ -11,8 +11,10 @@ export const StepManager = ({ stepManager }) => {
   })
 
   useEffect(() => {
-    stepManager && stepManager.event.register('revertWarning', setRevertWarning)
-    stepManager && stepManager.event.register('stepChanged', updateStep)
+    if (stepManager) {
+      stepManager.event.register('revertWarning', setRevertWarning)
+      stepManager.event.register('stepChanged', updateStep)
+    }
   }, [stepManager])
 
   const setRevertWarning = (warning) => {

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

@@ -3,13 +3,12 @@ import AssemblyItems from './assembly-items'
 import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
 import useExtractData from '../../hooks/extract-data'
 import { DropdownPanelProps, ExtractData } from '../../types'
+import { CopyToClipboard } from '@remix-ui/clipboard'
 
 
 import './styles/dropdown-panel.css'
 /* eslint-disable-next-line */
 import EventManager from '../../../../../../apps/remix-ide/src/lib/events'
-/* eslint-disable-next-line */
-import copyToClipboard from '../../../../../../apps/remix-ide/src/app/ui/copy-to-clipboard'
 
 export const DropdownPanel = (props: DropdownPanelProps) => {
     const { dropdownName, dropdownMessage, opts, codeView, index, calldata, header, extractFunc, formatSelfFunc } = props
@@ -120,7 +119,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
                 }
             }
         })
-        if (!this.displayContentOnly) {
+        if (!state.displayContentOnly) {
         //   this.view.querySelector('.title i.fa-copy').style.display = 'block'
             setState(prevState => {
                 return {
@@ -188,7 +187,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
 
     let content: JSX.Element | JSX.Element[] = <div>Empty</div>
     if (state.json) {
-        content = data.map(item => {
+        content = (data).map(item => {
             return (
                 <TreeView key={item.key}>
                     { renderData(item.data, item.key) }
@@ -200,7 +199,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
     <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}></span>
-        {copyToClipboard(() => copyClipboard())}
+        <CopyToClipboard getContent={copyClipboard} />
     </div> : <div></div>
     
     if (state.displayContentOnly) {

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

@@ -35,6 +35,7 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => {
   })
 
   useEffect(() => {
+    if (vmDebuggerLogic) {
       vmDebuggerLogic.event.register('codeManagerChanged', (code, address, index) => {
         setAsm({ code, address, index })
       })
@@ -97,18 +98,19 @@ export const VmDebuggerHead = ({ vmDebuggerLogic }) => {
         })
       })
       vmDebuggerLogic.start()
-  }, [])
+    }
+  }, [vmDebuggerLogic])
 
   return (
     <div id="vmheadView" className="mt-1 px-0">
       <div className="d-flex flex-column">
-        <div className="w-100" hidden>
-          <FunctionPanel calldata={functionPanel} />
-          <SolidityLocals calldata={solidityLocals.calldata} message={solidityLocals.message} />
-          <SolidityState calldata={solidityState.calldata} message={solidityState.message} />
+        <div className="w-100">
+          <FunctionPanel calldata={functionPanel || {}} />
+          {/* <SolidityLocals calldata={solidityLocals.calldata} message={solidityLocals.message} /> */}
+          {/* <SolidityState calldata={solidityState.calldata} message={solidityState.message} /> */}
         </div>
-        <div className="w-100"><CodeListView asm={asm} /></div>
-        <div className="w-100"><StepDetail detail={stepDetail} /></div>
+        {/* <div className="w-100"><CodeListView asm={asm} /></div> */}
+        {/* <div className="w-100"><StepDetail detail={stepDetail} /></div> */}
       </div>
     </div>
   )

nx.json

@@ -78,6 +78,9 @@
     },
     "remix-ui-utils": {
       "tags": []
+    },
+    "remix-ui-clipboard": {
+      "tags": []
     }
   }
 }

tsconfig.json

@@ -28,7 +28,8 @@
       "@remix-project/debugger-ui": ["libs/debugger-ui/src/index.ts"],
       "@remix-ui/tree-view": ["libs/remix-ui/tree-view/src/index.ts"],
       "@remix-ui/debugger-ui": ["libs/remix-ui/debugger-ui/src/index.ts"],
-      "@remix-ui/utils": ["libs/remix-ui/utils/src/index.ts"]
+      "@remix-ui/utils": ["libs/remix-ui/utils/src/index.ts"],
+      "@remix-ui/clipboard": ["libs/remix-ui/clipboard/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]

workspace.json

@@ -590,6 +590,33 @@
           }
         }
       }
+    },
+    "remix-ui-clipboard": {
+      "root": "libs/remix-ui/clipboard",
+      "sourceRoot": "libs/remix-ui/clipboard/src",
+      "projectType": "library",
+      "schematics": {},
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": [
+              "libs/remix-ui/clipboard/tsconfig.lib.json",
+              "libs/remix-ui/clipboard/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/clipboard/**/*"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/remix-ui/clipboard/jest.config.js",
+            "tsConfig": "libs/remix-ui/clipboard/tsconfig.spec.json",
+            "passWithNoTests": true
+          }
+        }
+      }
     }
   },
   "cli": {