From bf0b958496f15ec1a89983c4c7b05976b392f28c Mon Sep 17 00:00:00 2001 From: filip mertens Date: Thu, 21 Jul 2022 16:28:50 +0200 Subject: [PATCH] add settings --- libs/remix-ui/settings/src/lib/constants.ts | 3 + .../settings/src/lib/github-settings.tsx | 6 +- .../settings/src/lib/remix-ui-settings.tsx | 165 +++++++++++------- .../settings/src/lib/settingsAction.ts | 15 ++ .../settings/src/lib/settingsReducer.ts | 47 +++++ 5 files changed, 170 insertions(+), 66 deletions(-) diff --git a/libs/remix-ui/settings/src/lib/constants.ts b/libs/remix-ui/settings/src/lib/constants.ts index 4062c68657..b2110dd499 100644 --- a/libs/remix-ui/settings/src/lib/constants.ts +++ b/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' diff --git a/libs/remix-ui/settings/src/lib/github-settings.tsx b/libs/remix-ui/settings/src/lib/github-settings.tsx index e7c9c3f2ce..c26a01993a 100644 --- a/libs/remix-ui/settings/src/lib/github-settings.tsx +++ b/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) diff --git a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx b/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx index 19655dd281..3dab01f152 100644 --- a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx +++ b/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' @@ -14,16 +14,16 @@ import { GithubSettings } from './github-settings' export interface RemixUiSettingsProps { config: any, editor: any, - _deps: any, - useMatomoAnalytics: boolean - themeModule: ThemeModule + _deps: any, + useMatomoAnalytics: boolean + themeModule: ThemeModule } 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') + 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,51 +148,71 @@ 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 (
+ } else { + props.config.clear() // remove only the remix settings + } + refresh(resetState + 1) + } catch (e) { + console.log(e) + } + }}>Reset to Default settings
General settings
- +
- +
- +
+
+ + +
+
+ + +
+
+ + +
- +
- +