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 githubUserName = props.config.get('settings/github-user-name')
-      const githubEmail = props.config.get('settings/github-email')
+      const githubToken = props.config.get('settings/gist-access-token') || ''
+      const githubUserName = props.config.get('settings/github-user-name')|| ''
+      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'
@@ -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'>
@@ -165,6 +186,24 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
             <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} />
             <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/personal-mode')}`} htmlFor="personal">

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 = {