add settings

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

@@ -14,6 +14,9 @@ export const etherscanAccessTokenText2 = 'Go to Etherscan api key page (link bel
 export const ethereunVMText = 'Always use Remix VM at load'
 export const wordWrapText = 'Word wrap in editor'
 export const enablePersonalModeText = ' Enable Personal Mode for Remix Provider. Transaction sent over Web3 will use the web3.personal API.\n'
+export const useAutoCompleteText = 'Enable code completion in editor.'
+export const useShowGasInEditorText = 'Display gas estimates in editor.'
+export const displayErrorsText = 'Display errors in editor while typing.'
 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 '
 export const swarmSettingsTitle = 'Swarm Settings'
 export const swarmSettingsText = 'Swarm Settings'

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

@@ -9,9 +9,9 @@ export function GithubSettings (props: GithubSettingsProps) {
 
   useEffect(() => {
     if (props.config) {
-      const githubToken = props.config.get('settings/gist-access-token')
+      const githubToken = props.config.get('settings/gist-access-token') || ''
-      const githubUserName = props.config.get('settings/github-user-name')
+      const githubUserName = props.config.get('settings/github-user-name')|| ''
-      const githubEmail = props.config.get('settings/github-email')
+      const githubEmail = props.config.get('settings/github-email') || ''
   
       setGithubToken(githubToken)
       setGithubUsername(githubUserName)

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

@@ -1,10 +1,10 @@
 import React, { useState, useReducer, useEffect, useCallback } from 'react' // eslint-disable-line
 import { CopyToClipboard } from '@remix-ui/clipboard' // eslint-disable-line
 
-import { enablePersonalModeText, ethereunVMText, labels, generateContractMetadataText, matomoAnalytics, textDark, textSecondary, warnText, wordWrapText, swarmSettingsTitle, ipfsSettingsText } from './constants'
+import { enablePersonalModeText, ethereunVMText, labels, generateContractMetadataText, matomoAnalytics, textDark, textSecondary, warnText, wordWrapText, swarmSettingsTitle, ipfsSettingsText, useAutoCompleteText, useShowGasInEditorText, displayErrorsText } from './constants'
 
 import './remix-ui-settings.css'
-import { ethereumVM, generateContractMetadat, personal, textWrapEventAction, useMatomoAnalytics, saveTokenToast, removeTokenToast, saveSwarmSettingsToast, saveIpfsSettingsToast } from './settingsAction'
+import { ethereumVM, generateContractMetadat, personal, textWrapEventAction, useMatomoAnalytics, saveTokenToast, removeTokenToast, saveSwarmSettingsToast, saveIpfsSettingsToast, useAutoCompletion, useShowGasInEditor, useDisplayErrors } from './settingsAction'
 import { initialState, toastInitialState, toastReducer, settingReducer } from './settingsReducer'
 import { Toaster } from '@remix-ui/toaster'// eslint-disable-line
 import { RemixUiThemeModule, ThemeModule} from '@remix-ui/theme-module'
@@ -23,7 +23,7 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
   const [, dispatch] = useReducer(settingReducer, initialState)
   const [state, dispatchToast] = useReducer(toastReducer, toastInitialState)
   const [tokenValue, setTokenValue] = useState({})
-  const [themeName, ] = useState('')
+  const [themeName,] = useState('')
   const [privateBeeAddress, setPrivateBeeAddress] = useState('')
   const [postageStampId, setPostageStampId] = useState('')
   const [resetState, refresh] = useState(0)
@@ -33,13 +33,21 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
   const [ipfsProjectId, setipfsProjectId] = useState('')
   const [ipfsProjectSecret, setipfsProjectSecret] = useState('')
 
-
   const initValue = () => {
     const metadataConfig = props.config.get('settings/generate-contract-metadata')
     if (metadataConfig === undefined || metadataConfig === null) generateContractMetadat(props.config, true, dispatch)
 
     const javascriptVM = props.config.get('settings/always-use-vm')
     if (javascriptVM === null || javascriptVM === undefined) ethereumVM(props.config, true, dispatch)
+
+    const useAutoComplete = props.config.get('settings/use-auto-complete')
+    if (useAutoComplete === null || useAutoComplete === undefined) useAutoCompletion(props.config, true, dispatch)
+
+    const displayErrors = props.config.get('settings/display-errors')
+    if (displayErrors === null || displayErrors === undefined) useDisplayErrors(props.config, true, dispatch)
+  
+    const useShowGas = props.config.get('settings/show-gas')
+    if (useShowGas === null || useShowGas === undefined) useShowGasInEditor(props.config, true, dispatch)
   }
   useEffect(() => initValue(), [resetState, props.config])
   useEffect(() => initValue(), [])
@@ -88,7 +96,6 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
       setipfsProjectSecret(configipfsProjectSecret)
     }
 
-
   }, [themeName, state.message])
 
   useEffect(() => {
@@ -115,6 +122,18 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     useMatomoAnalytics(props.config, event.target.checked, dispatch)
   }
 
+  const onchangeUseAutoComplete = event => {
+    useAutoCompletion(props.config, event.target.checked, dispatch)
+  }
+
+  const onchangeShowGasInEditor = event => {
+    useShowGasInEditor(props.config, event.target.checked, dispatch)
+  }
+  const onchangeDisplayErrors = event => {
+    useDisplayErrors(props.config, event.target.checked, dispatch)
+  }
+
+
   const getTextClass = (key) => {
     if (props.config.get(key)) {
       return textDark
@@ -129,7 +148,9 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     const isEditorWrapChecked = props.config.get('settings/text-wrap') || false
     const isPersonalChecked = props.config.get('settings/personal-mode') || false
     const isMatomoChecked = props.config.get('settings/matomo-analytics') || false
-
+    const isAutoCompleteChecked = props.config.get('settings/auto-completion') === null ? true:props.config.get('settings/auto-completion')
+    const isShowGasInEditorChecked = props.config.get('settings/show-gas') === null ? true:props.config.get('settings/show-gas')
+    const displayErrorsChecked = props.config.get('settings/display-errors') === null ? true:props.config.get('settings/display-errors')
     return (
       <div className="$border-top">
         <div title="Reset to Default settings." className='d-flex justify-content-end pr-4'>
@@ -154,26 +175,44 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
         <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 = { isMetadataChecked }/>
+            <input onChange={onchangeGenerateContractMetadata} id="generatecontractmetadata" data-id="settingsTabGenerateContractMetadata" type="checkbox" className="custom-control-input" name="contractMetadata" checked={isMetadataChecked} />
             <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={ isEthereumVMChecked }/>
+            <input onChange={onchangeOption} className="custom-control-input" id="alwaysUseVM" data-id="settingsTabAlwaysUseVM" type="checkbox" name="ethereumVM" checked={isEthereumVMChecked} />
             <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 = { isEditorWrapChecked }/>
+            <input id="editorWrap" className="custom-control-input" type="checkbox" onChange={textWrapEvent} checked={isEditorWrapChecked} />
             <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={onchangeUseAutoComplete} id="settingsUseAutoComplete" type="checkbox" className="custom-control-input" checked={isAutoCompleteChecked} />
+            <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/use-auto-complete')}`} htmlFor="settingsUseAutoComplete">
+              <span>{useAutoCompleteText}</span>
+            </label>
+          </div>
+          <div className='custom-control custom-checkbox mb-1'>
+            <input onChange={onchangeShowGasInEditor} id="settingsUseShowGas" type="checkbox" className="custom-control-input" checked={isShowGasInEditorChecked} />
+            <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/use-auto-complete')}`} htmlFor="settingsUseShowGas">
+              <span>{useShowGasInEditorText}</span>
+            </label>
+          </div>
+          <div className='custom-control custom-checkbox mb-1'>
+            <input onChange={onchangeDisplayErrors} id="settingsDisplayErrors" type="checkbox" className="custom-control-input" checked={displayErrorsChecked} />
+            <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/use-auto-complete')}`} htmlFor="settingsDisplayErrors">
+              <span>{displayErrorsText}</span>
+            </label>
+          </div>
           <div className="custom-control custom-checkbox mb-1">
-            <input onChange={onchangePersonal} id="personal" type="checkbox" className="custom-control-input" checked = { isPersonalChecked }/>
+            <input onChange={onchangePersonal} id="personal" type="checkbox" className="custom-control-input" checked={isPersonalChecked} />
             <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={ isMatomoChecked }/>
+            <input onChange={onchangeMatomoAnalytics} id="settingsMatomoAnalytics" type="checkbox" className="custom-control-input" checked={isMatomoChecked} />
             <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>
@@ -191,7 +230,7 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
 
   const removeToken = (type: string) => {
     setTokenValue(prevState => {
-      return { ...prevState, [type]: ''}
+      return { ...prevState, [type]: '' }
     })
     removeTokenToast(props.config, dispatchToast, labels[type].key)
   }
@@ -199,7 +238,7 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
   const handleSaveTokenState = useCallback(
     (event, type) => {
       setTokenValue(prevState => {
-        return { ...prevState, [type]: event.target.value}
+        return { ...prevState, [type]: event.target.value }
       })
     },
     [tokenValue]
@@ -208,13 +247,13 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
   const token = (type: string) => (
     <div className="border-top">
       <div className="card-body pt-3 pb-2">
-        <h6 className="card-title">{ labels[type].title }</h6>
+        <h6 className="card-title">{labels[type].title}</h6>
-        <p className="mb-1">{ labels[type].message1 }</p>
+        <p className="mb-1">{labels[type].message1}</p>
-        <p className="">{ labels[type].message2 }</p>
+        <p className="">{labels[type].message2}</p>
-        <p className="mb-1"><a className="text-primary" target="_blank" href={labels[type].link}>{ labels[type].link }</a></p>
+        <p className="mb-1"><a className="text-primary" target="_blank" href={labels[type].link}>{labels[type].link}</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={(e) => handleSaveTokenState(e, type)} value={ tokenValue[type] } />
+            <input id="gistaccesstoken" data-id="settingsTabGistAccessToken" type="password" className="form-control" onChange={(e) => handleSaveTokenState(e, type)} value={tokenValue[type]} />
             <div className="d-flex justify-content-end pt-2">
               <CopyToClipboard content={tokenValue[type]} data-id='copyToClipboardCopyIcon' />
               <input className="btn btn-sm btn-primary ml-2" id="savegisttoken" data-id="settingsTabSaveGistToken" onClick={() => saveToken(type)} value="Save" type="button" disabled={tokenValue === ''}></input>
@@ -247,15 +286,15 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
   const swarmSettings = () => (
     <div className="border-top">
       <div className="card-body pt-3 pb-2">
-        <h6 className="card-title">{ swarmSettingsTitle }</h6>
+        <h6 className="card-title">{swarmSettingsTitle}</h6>
         <div className="pt-2 mb-1"><label>PRIVATE BEE ADDRESS:</label>
           <div className="text-secondary mb-0 h6">
-            <input id="swarmprivatebeeaddress" data-id="settingsPrivateBeeAddress" className="form-control" onChange={handleSavePrivateBeeAddress} value={ privateBeeAddress } />
+            <input id="swarmprivatebeeaddress" data-id="settingsPrivateBeeAddress" className="form-control" onChange={handleSavePrivateBeeAddress} value={privateBeeAddress} />
           </div>
         </div>
         <div className=""><label>POSTAGE STAMP ID:</label>
           <div className="text-secondary mb-0 h6">
-            <input id="swarmpostagestamp" data-id="settingsPostageStampId" className="form-control" onChange={handleSavePostageStampId} value={ postageStampId } />
+            <input id="swarmpostagestamp" data-id="settingsPostageStampId" className="form-control" onChange={handleSavePostageStampId} value={postageStampId} />
             <div className="d-flex justify-content-end pt-2">
             </div>
           </div>
@@ -311,30 +350,30 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
   const ipfsSettings = () => (
     <div className="border-top">
       <div className="card-body pt-3 pb-2">
-      <h6 className="card-title">{ ipfsSettingsText }</h6>
+        <h6 className="card-title">{ipfsSettingsText}</h6>
         <div className="pt-2 mb-1"><label>IPFS HOST:</label>
           <div className="text-secondary mb-0 h6">
-          <input placeholder='e.g. ipfs.infura.io' id="settingsIpfsUrl" data-id="settingsIpfsUrl" className="form-control" onChange={handleSaveIpfsUrl} value={ ipfsUrl } />
+            <input placeholder='e.g. ipfs.infura.io' id="settingsIpfsUrl" data-id="settingsIpfsUrl" className="form-control" onChange={handleSaveIpfsUrl} value={ipfsUrl} />
           </div>
         </div>
         <div className=""><label>IPFS PROTOCOL:</label>
           <div className="text-secondary mb-0 h6">
-          <input placeholder='e.g. https' id="settingsIpfsProtocol" data-id="settingsIpfsProtocol" className="form-control" onChange={handleSaveIpfsProtocol} value={ ipfsProtocol } />
+            <input placeholder='e.g. https' id="settingsIpfsProtocol" data-id="settingsIpfsProtocol" className="form-control" onChange={handleSaveIpfsProtocol} value={ipfsProtocol} />
           </div>
         </div>
         <div className=""><label>IPFS PORT:</label>
           <div className="text-secondary mb-0 h6">
-          <input placeholder='e.g. 5001' id="settingsIpfsPort" data-id="settingsIpfsPort" className="form-control" onChange={handleSaveIpfsPort} value={ ipfsPort } />
+            <input placeholder='e.g. 5001' id="settingsIpfsPort" data-id="settingsIpfsPort" className="form-control" onChange={handleSaveIpfsPort} value={ipfsPort} />
           </div>
         </div>
         <div className=""><label>IPFS PROJECT ID [ INFURA ]:</label>
           <div className="text-secondary mb-0 h6">
-          <input id="settingsIpfsProjectId" data-id="settingsIpfsProjectId" className="form-control" onChange={handleSaveIpfsProjectId} value={ ipfsProjectId } />
+            <input id="settingsIpfsProjectId" data-id="settingsIpfsProjectId" className="form-control" onChange={handleSaveIpfsProjectId} value={ipfsProjectId} />
           </div>
         </div>
         <div className=""><label>IPFS PROJECT SECRET [ INFURA ]:</label>
           <div className="text-secondary mb-0 h6">
-          <input id="settingsIpfsProjectSecret" data-id="settingsIpfsProjectSecret" className="form-control" type="password" onChange={handleSaveIpfsSecret} value={ ipfsProjectSecret } />
+            <input id="settingsIpfsProjectSecret" data-id="settingsIpfsProjectSecret" className="form-control" type="password" onChange={handleSaveIpfsSecret} value={ipfsProjectSecret} />
           </div>
         </div>
         <div className="d-flex justify-content-end pt-2">

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

@@ -41,6 +41,21 @@ export const useMatomoAnalytics = (config, checked, dispatch) => {
   }
 }
 
+export const useAutoCompletion = (config, checked, dispatch) => {
+  config.set('settings/auto-completion', checked)
+  dispatch({ type: 'useAutoCompletion', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } })
+}
+
+export const useShowGasInEditor = (config, checked, dispatch) => {
+  config.set('settings/show-gas', checked)
+  dispatch({ type: 'useShowGasInEditor', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } })
+}
+
+export const useDisplayErrors = (config, checked, dispatch) => {
+  config.set('settings/display-errors', checked)
+  dispatch({ type: 'displayErrors', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } })
+}
+
 export const saveTokenToast = (config, dispatch, tokenValue, key) => {
   config.set('settings/' + key, tokenValue)
   dispatch({ type: 'save', payload: { message: 'GitHub credentials updated' } })

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

@@ -26,6 +26,21 @@ export const initialState = {
       name: 'useMatomoAnalytics',
       isChecked: false,
       textClass: textSecondary
+    },
+    {
+      name: 'useAutoCompletion',
+      isChecked: true,
+      textClass: textSecondary
+    },
+    {
+      name: 'useShowGasInEditor',
+      isChecked: true,
+      textClass: textSecondary
+    },
+    {
+      name: 'displayErrors',
+      isChecked: true,
+      textClass: textSecondary
     }
   ]
 }
@@ -82,9 +97,41 @@ export const settingReducer = (state, action) => {
       return {
         ...state
       }
+    
+    case 'useAutoCompletion':
+      state.elementState.map(element => {
+        if (element.name === 'useAutoCompletion') {
+          element.isChecked = action.payload.isChecked
+          element.textClass = action.payload.textClass
+        }
+      })
+      return {
+        ...state
+      }
+      case 'displayErrors':
+        state.elementState.map(element => {
+          if (element.name === 'displayErrors') {
+            element.isChecked = action.payload.isChecked
+            element.textClass = action.payload.textClass
+          }
+        })
+        return {
+          ...state
+        }
+    case 'useShowGasInEditor':
+      state.elementState.map(element => {
+        if (element.name === 'useShowGasInEditor') {
+          element.isChecked = action.payload.isChecked
+          element.textClass = action.payload.textClass
+        }
+      })
+      return {
+        ...state
+      }
     default:
       return initialState
   }
+  
 }
 
 export const toastInitialState = {