feat: task configuration and creating of setting-tab in react (#1171)

apps/remix-ide-e2e/src/tests/generalSettings.test.ts

@@ -18,6 +18,7 @@ module.exports = {
   'Should activate `generate contract metadata`': function (browser) {
     browser.waitForElementVisible('*[data-id="remixIdeSidePanel"]', 5000)
       .waitForElementVisible('*[data-id="settingsTabGenerateContractMetadataLabel"]', 5000)
+      .verify.elementPresent('[data-id="settingsTabGenerateContractMetadata"]:checked')
       .click('*[data-id="verticalIconsFileExplorerIcons"]')
       .click('[data-id="treeViewLitreeViewItemcontracts"]')
       .openFile('contracts/3_Ballot.sol')
@@ -39,22 +40,26 @@ module.exports = {
       .click('*[data-id="verticalIconsKindsettings"]')
       .setValue('*[data-id="settingsTabGistAccessToken"]', '**********')
       .click('*[data-id="settingsTabSaveGistToken"]')
-      .waitForElementVisible('*[data-shared="tooltipPopup"]:nth-last-of-type(1)', 5000)
-      .assert.containsText('*[data-shared="tooltipPopup"]:nth-last-of-type(1)', 'Access token has been saved')
+      .waitForElementVisible('*[data-shared="tooltipPopup"]', 5000)
+      .assert.containsText('*[data-shared="tooltipPopup"]', 'Access token has been saved')
+      .pause(3000)
   },
 
   'Should copy github access token to clipboard': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
       .click('*[data-id="copyToClipboardCopyIcon"]')
-      .waitForElementVisible('*[data-shared="tooltipPopup"]:nth-last-of-type(1)', 5000)
-      .assert.containsText('*[data-shared="tooltipPopup"]:nth-last-of-type(1)', 'Copied value to clipboard.')
+      .waitForElementVisible('*[data-shared="tooltipPopup"]', 5000)
+      // .waitForElementVisible('*[data-shared="tooltipPopup"]:nth-last-of-type(1) , 5000)
+      // .assert.containsText('*[data-shared="tooltipPopup"]', 'Copied value to clipboard.')
+      // .assert.containsText('*[data-shared="tooltipPopup"]:nth-last-of-type(1)', 'Copied value to clipboard.')
   },
 
   'Should remove github access token': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
+      .pause(1000)
       .click('*[data-id="settingsTabRemoveGistToken"]')
-      .waitForElementVisible('*[data-shared="tooltipPopup"]:nth-last-of-type(1)', 5000)
-      .assert.containsText('*[data-shared="tooltipPopup"]:nth-last-of-type(1)', 'Access token removed')
+      .waitForElementVisible('*[data-shared="tooltipPopup"]', 5000)
+      .assert.containsText('*[data-shared="tooltipPopup"]', 'Access token removed')
       .assert.containsText('*[data-id="settingsTabGistAccessToken"]', '')
   },
 

apps/remix-ide-e2e/src/tests/runAndDeploy.ts

@@ -32,6 +32,8 @@ module.exports = {
 
   'Should sign message using account key': function (browser: NightwatchBrowser) {
     browser.waitForElementPresent('*[data-id="settingsRemixRunSignMsg"]')
+      .click('select[id="selectExEnvOptions"] option[value="vm-berlin"]')
+      .pause(2000)
       .click('*[data-id="settingsRemixRunSignMsg"]')
       .pause(2000)
       .waitForElementPresent('*[data-id="modalDialogCustomPromptText"]')

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

@@ -6,6 +6,7 @@ import './copy-to-clipboard.css'
 
 export const CopyToClipboard = ({ content, tip='Copy', icon='fa-copy', ...otherProps }) => {
   const [message, setMessage] = useState(tip)
+
   const handleClick = (event) => {
     if (content && 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 {

libs/remix-ui/settings/.babelrc

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

libs/remix-ui/settings/.eslintrc

+{
+  "env": {
+      "browser": true,
+      "es6": true
+  },
+  "extends": "../../../.eslintrc",
+  "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+      "ecmaVersion": 11,
+      "sourceType": "module"
+  },
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error"  
+  }
+} 

libs/remix-ui/settings/README.md

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

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

+export * from './lib/remix-ui-settings'

libs/remix-ui/settings/src/lib/constants.ts

+export const generateContractMetadataText = 'Generate contract metadata. Generate a JSON file in the contract folder. Allows to specify library addresses the contract depends on. If nothing is specified, Remix deploys libraries automatically.'
+export const textSecondary = 'text-secondary'
+export const textDark = 'text-dark'
+export const warnText = 'Be sure the endpoint is opened before enabling it. \nThis mode allows a user to provide a passphrase in the Remix interface without having to unlock the account. Although this is very convenient, you should completely trust the backend you are connected to (Geth, Parity, ...). Remix never persists any passphrase'.split('\n').map(s => s.trim()).join(' ')
+export const gitAccessTokenTitle = 'Github Access Token'
+export const gitAccessTokenText = 'Manage the access token used to publish to Gist and retrieve Github contents.'
+export const gitAccessTokenText2 = 'Go to github token page (link below) to create a new token and save it in Remix. Make sure this token has only \'create gist\' permission.'
+export const gitAccessTokenLink = 'https://github.com/settings/tokens'
+export const ethereunVMText = 'Always use Ethereum VM at load'
+export const wordWrapText = 'Word wrap in editor'
+export const enablePersonalModeText = ' Enable Personal Mode for web3 provider. Transaction sent over Web3 will use the web3.personal API.\n'
+export const matomoAnalytics = 'Enable Matomo Analytics. We do not collect personally identifiable information (PII). The info is used to improve the site’s UX & UI. See more about '

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

+import React, { useState, useReducer, useEffect, useCallback } from 'react' // eslint-disable-line
+import { CopyToClipboard } from '@remix-ui/clipboard' // eslint-disable-line
+
+import { enablePersonalModeText, ethereunVMText, generateContractMetadataText, gitAccessTokenLink, gitAccessTokenText, gitAccessTokenText2, gitAccessTokenTitle, matomoAnalytics, textDark, textSecondary, warnText, wordWrapText } from './constants'
+
+import './remix-ui-settings.css'
+import { etherumVM, generateContractMetadat, personal, textWrapEventAction, useMatomoAnalytics, saveTokenToast, removeTokenToast } from './settingsAction'
+import { initialState, toastInitialState, toastReducer, settingReducer } from './settingsReducer'
+import { Toaster } from '@remix-ui/toaster'// eslint-disable-line
+
+/* eslint-disable-next-line */
+export interface RemixUiSettingsProps {
+  config: any,
+  editor: any,
+   _deps: any
+}
+
+export const RemixUiSettings = (props: RemixUiSettingsProps) => {
+  const [, dispatch] = useReducer(settingReducer, initialState)
+  const [state, dispatchToast] = useReducer(toastReducer, toastInitialState)
+  const [tokenValue, setTokenValue] = useState('')
+  const [themeName, setThemeName] = useState('')
+
+  useEffect(() => {
+    const token = props.config.get('settings/gist-access-token')
+    if (token === undefined) {
+      props.config.set('settings/generate-contract-metadata', true)
+      dispatch({ type: 'contractMetadata', payload: { name: 'contractMetadata', isChecked: true, textClass: textDark } })
+    }
+    if (token) {
+      setTokenValue(token)
+    }
+  }, [themeName, state.message])
+
+  const onchangeGenerateContractMetadata = (event) => {
+    generateContractMetadat(props, event, dispatch)
+  }
+
+  const onchangeOption = (event) => {
+    etherumVM(props, event, dispatch)
+  }
+
+  const textWrapEvent = (event) => {
+    textWrapEventAction(props, event, dispatch)
+  }
+
+  const onchangePersonal = event => {
+    personal(props, event, dispatch)
+  }
+
+  const onchangeMatomoAnalytics = event => {
+    useMatomoAnalytics(props, event, dispatch)
+  }
+
+  const onswitchTheme = (event, name) => {
+    props._deps.themeModule.switchTheme(name)
+    setThemeName(name)
+  }
+
+  const getTextClass = (key) => {
+    if (props.config.get(key)) {
+      return textDark
+    } else {
+      return textSecondary
+    }
+  }
+
+  const generalConfig = () => (
+    <div className="$border-top">
+      <div className="card-body pt-3 pb-2">
+        <h6 className="card-title">General settings</h6>
+        <div className="mt-2 custom-control custom-checkbox mb-1">
+          <input onChange={onchangeGenerateContractMetadata} id="generatecontractmetadata" data-id="settingsTabGenerateContractMetadata" type="checkbox" className="custom-control-input" name="contractMetadata" checked = { props.config.get('settings/generate-contract-metadata') }/>
+          <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/generate-contract-metadata')}`} data-id="settingsTabGenerateContractMetadataLabel" htmlFor="generatecontractmetadata">{generateContractMetadataText}</label>
+        </div>
+        <div className="fmt-2 custom-control custom-checkbox mb-1">
+          <input onChange={onchangeOption} className="custom-control-input" id="alwaysUseVM" data-id="settingsTabAlwaysUseVM" type="checkbox" name="ethereumVM" checked={ props.config.get('settings/always-use-vm') }/>
+          <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/always-use-vm')}`} htmlFor="alwaysUseVM">{ethereunVMText}</label>
+        </div>
+        <div className="mt-2 custom-control custom-checkbox mb-1">
+          <input id="editorWrap" className="custom-control-input" type="checkbox" onChange={textWrapEvent} checked = { props.config.get('settings/text-wrap')}/>
+          <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/text-wrap')}`} htmlFor="editorWrap">{wordWrapText}</label>
+        </div>
+        <div className="custom-control custom-checkbox mb-1">
+          <input onChange={onchangePersonal} id="personal" type="checkbox" className="custom-control-input" checked = { props.config.get('settings/personal-mode')}/>
+          <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/personal-mode')}`} htmlFor="personal">
+            <i className="fas fa-exclamation-triangle text-warning" aria-hidden="true"></i> <span>   </span>
+            <span>   </span>{enablePersonalModeText} {warnText}
+          </label>
+        </div>
+        <div className="custom-control custom-checkbox mb-1">
+          <input onChange={onchangeMatomoAnalytics} id="settingsMatomoAnalytics" type="checkbox" className="custom-control-input" checked={ props.config.get('settings/matomo-analytics')}/>
+          <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/matomo-analytics')}`} htmlFor="settingsMatomoAnalytics">
+            <span>{matomoAnalytics}</span>
+            <a href="https://medium.com/p/66ef69e14931/" target="_blank"> Analytics in Remix IDE</a> <span>&</span> <a target="_blank" href="https://matomo.org/free-software">Matomo</a>
+          </label>
+        </div>
+      </div>
+    </div>
+  )
+
+  const saveToken = () => {
+    saveTokenToast(props, dispatchToast, tokenValue)
+  }
+
+  const removeToken = () => {
+    setTokenValue('')
+    removeTokenToast(props, dispatchToast)
+  }
+
+  const handleSaveTokenState = useCallback(
+    (event) => {
+      setTokenValue(event.target.value)
+    },
+    [tokenValue]
+  )
+
+  const gistToken = () => (
+    <div className="border-top">
+      <div className="card-body pt-3 pb-2">
+        <h6 className="card-title">{ gitAccessTokenTitle }</h6>
+        <p className="mb-1">{ gitAccessTokenText }</p>
+        <p className="">{ gitAccessTokenText2 }</p>
+        <p className="mb-1"><a className="text-primary" target="_blank" href="https://github.com/settings/tokens">{ gitAccessTokenLink }</a></p>
+        <div className=""><label>TOKEN:</label>
+          <div className="text-secondary mb-0 h6">
+            <input id="gistaccesstoken" data-id="settingsTabGistAccessToken" type="password" className="form-control" onChange={handleSaveTokenState} value={ tokenValue } />
+            <div className="d-flex justify-content-end pt-2">
+              <CopyToClipboard content={tokenValue} data-id='copyToClipboardCopyIcon' />
+              <input className="btn btn-sm btn-primary ml-2" id="savegisttoken" data-id="settingsTabSaveGistToken" onClick={() => saveToken()} value="Save" type="button" disabled={tokenValue === ''}></input>
+              <button className="btn btn-sm btn-secondary ml-2" id="removegisttoken" data-id="settingsTabRemoveGistToken" title="Delete Github access token" onClick={() => removeToken()}>Remove</button>
+            </div>
+          </div></div>
+      </div>
+    </div>
+  )
+
+  const themes = () => {
+    const themes = props._deps.themeModule.getThemes()
+    if (themes) {
+      return themes.map((aTheme, index) => (
+        <div className="radio custom-control custom-radio mb-1 form-check" key={index}>
+          <input type="radio" onChange={event => { onswitchTheme(event, aTheme.name) }} className="align-middle custom-control-input" name='theme' id={aTheme.name} data-id={`settingsTabTheme${aTheme.name}`} checked = {props._deps.themeModule.active === aTheme.name ? true : null}/>
+          <label className="form-check-label custom-control-label" data-id={`settingsTabThemeLabel${aTheme.name}`} htmlFor={aTheme.name}>{aTheme.name} ({aTheme.quality})</label>
+        </div>
+      )
+      )
+    }
+  }
+
+  return (
+    <div>
+      {state.message ? <Toaster message= {state.message}/> : null}
+      {generalConfig()}
+      {gistToken()}
+      <div className="border-top">
+        <div className="card-body pt-3 pb-2">
+          <h6 className="card-title">Themes</h6>
+          <div className="card-text themes-container">
+            {themes()}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

libs/remix-ui/settings/src/lib/settingsAction.ts

+import { textDark, textSecondary } from './constants'
+
+declare global {
+  interface Window {
+    _paq: any
+  }
+}
+
+const _paq = window._paq = window._paq || [] //eslint-disable-line
+
+export const generateContractMetadat = (element, event, dispatch) => {
+  element.config.set('settings/generate-contract-metadata', event.target.checked)
+  dispatch({ type: 'contractMetadata', payload: { name: event.target.name, isChecked: event.target.checked, textClass: event.target.checked ? textDark : textSecondary } })
+}
+
+export const etherumVM = (element, event, dispatch) => {
+  element.config.set('settings/always-use-vm', event.target.checked)
+  dispatch({ type: 'ethereumVM', payload: { name: event.target.name, isChecked: event.target.checked, textClass: event.target.checked ? textDark : textSecondary } })
+}
+
+export const textWrapEventAction = (element, event, dispatch) => {
+  element.config.set('settings/text-wrap', event.target.checked)
+  element.editor.resize(event.target.checked)
+  dispatch({ type: 'textWrap', payload: { name: event.target.name, isChecked: event.target.checked, textClass: event.target.checked ? textDark : textSecondary } })
+}
+
+export const personal = (element, event, dispatch) => {
+  element.config.set('settings/personal-mode', event.target.checked)
+  dispatch({ type: 'personal', payload: { name: event.target.name, isChecked: event.target.checked, textClass: event.target.checked ? textDark : textSecondary } })
+}
+
+export const useMatomoAnalytics = (element, event, dispatch) => {
+  element.config.set('settings/matomo-analytics', event.target.checked)
+  dispatch({ type: 'useMatomoAnalytics', payload: { name: event.target.name, isChecked: event.target.checked, textClass: event.target.checked ? textDark : textSecondary } })
+  if (event.target.checked) {
+    _paq.push(['forgetUserOptOut'])
+    // @TODO remove next line when https://github.com/matomo-org/matomo/commit/9e10a150585522ca30ecdd275007a882a70c6df5 is used
+    document.cookie = 'mtm_consent_removed=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'
+  } else {
+    _paq.push(['optUserOut'])
+  }
+}
+
+export const saveTokenToast = (props, dispatch, tokenValue) => {
+  props.config.set('settings/gist-access-token', tokenValue)
+  dispatch({ type: 'save', payload: { message: 'Access token has been saved' } })
+}
+
+export const removeTokenToast = (props, dispatch) => {
+  props.config.set('settings/gist-access-token', '')
+  dispatch({ type: 'removed', payload: { message: 'Access token removed' } })
+}

libs/remix-ui/settings/src/lib/settingsReducer.ts

+import { textSecondary } from './constants'
+
+export const initialState = {
+  elementState: [
+    {
+      name: 'contractMetadata',
+      isChecked: false,
+      textClass: textSecondary
+    },
+    {
+      name: 'ethereumVM',
+      isChecked: false,
+      textClass: textSecondary
+    },
+    {
+      name: 'textWrap',
+      isChecked: false,
+      textClass: textSecondary
+    },
+    {
+      name: 'personal',
+      isChecked: false,
+      textClass: textSecondary
+    },
+    {
+      name: 'useMatomoAnalytics',
+      isChecked: false,
+      textClass: textSecondary
+    }
+  ]
+}
+
+export const settingReducer = (state, action) => {
+  switch (action.type) {
+    case 'contractMetadata':
+      state.elementState.map(element => {
+        if (element.name === 'contractMetadata') {
+          element.isChecked = action.payload.isChecked
+          element.textClass = action.payload.textClass
+        }
+      })
+      return {
+        ...state
+      }
+    case 'ethereumVM':
+      state.elementState.map(element => {
+        if (element.name === 'ethereumVM') {
+          element.isChecked = action.payload.isChecked
+          element.textClass = action.payload.textClass
+        }
+      })
+      return {
+        ...state
+      }
+    case 'textWrap':
+      state.elementState.map(element => {
+        if (element.name === 'textWrap') {
+          element.isChecked = action.payload.isChecked
+          element.textClass = action.payload.textClass
+        }
+      })
+      return {
+        ...state
+      }
+    case 'personal':
+      state.elementState.map(element => {
+        if (element.name === 'personal') {
+          element.isChecked = action.payload.isChecked
+          element.textClass = action.payload.textClass
+        }
+      })
+      return {
+        ...state
+      }
+    case 'useMatomoAnalytics':
+      state.elementState.map(element => {
+        if (element.name === 'useMatomoAnalytics') {
+          element.isChecked = action.payload.isChecked
+          element.textClass = action.payload.textClass
+        }
+      })
+      return {
+        ...state
+      }
+    default:
+      return initialState
+  }
+}
+
+export const toastInitialState = {
+  message: ''
+}
+
+export const toastReducer = (state, action) => {
+  switch (action.type) {
+    case 'save' :
+      return { ...state, message: action.payload.message }
+    case 'removed' :
+      return { ...state, message: action.payload.message }
+    default :
+      return { ...state, message: '' }
+  }
+}

libs/remix-ui/settings/tsconfig.json

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

libs/remix-ui/settings/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"]
+}

nx.json

@@ -96,11 +96,17 @@
     "remix-ui-workspace": {
       "tags": []
     },
+    "remix-ui-settings": {
+       "tags": []
+    },
     "remix-ui-static-analyser": {
       "tags": []
     },
     "remix-ui-checkbox": {
       "tags": []
+    },
+    "remix-ui-settings": {
+      "tags": []
     }
   }
 }

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=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-file-explorer,remix-ui-debugger-ui,remix-ui-workspace,remix-ui-static-analyser,remix-ui-checkbox",
+    "lint:libs": "nx run-many --target=lint --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-file-explorer,remix-ui-debugger-ui,remix-ui-workspace,remix-ui-static-analyser,remix-ui-checkbox,remix-ui-settings",
     "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",

tsconfig.json

@@ -39,8 +39,10 @@
       "@remix-ui/toaster": ["libs/remix-ui/toaster/src/index.ts"],
       "@remix-ui/file-explorer": ["libs/remix-ui/file-explorer/src/index.ts"],
       "@remix-ui/workspace": ["libs/remix-ui/workspace/src/index.ts"],
+      "@remix-ui/settings": ["libs/remix-ui/settings/src/index.ts"],
       "@remix-ui/static-analyser": ["libs/remix-ui/static-analyser/src/index.ts"],
-      "@remix-ui/checkbox": ["libs/remix-ui/checkbox/src/index.ts"]
+      "@remix-ui/checkbox": ["libs/remix-ui/checkbox/src/index.ts"],
+      "@remix-ui/settings": ["libs/remix-ui/settings/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]

workspace.json

@@ -726,6 +726,22 @@
         }
       }
     },
+    "remix-ui-settings": {
+      "root": "libs/remix-ui/settings",
+      "sourceRoot": "libs/remix-ui/settings/src",
+      "projectType": "library",
+      "schematics": {},
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": ["libs/remix-ui/settings/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/settings/**/*"]
+          }
+        }
+      }
+    },
     "remix-ui-static-analyser": {
       "root": "libs/remix-ui/static-analyser",
       "sourceRoot": "libs/remix-ui/static-analyser/src",
@@ -828,4 +844,4 @@
     }
   },
   "defaultProject": "remix-ide"
-}
+}
\ No newline at end of file