From ab58e8c8a2d6bbab45a2669283344d9ae354ae99 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 5 Jul 2021 20:27:37 +0100 Subject: [PATCH] Fixed settings tab --- apps/remix-ide/src/app/tabs/settings-tab.js | 46 ++++++------------- libs/remix-ui/settings/src/lib/constants.ts | 2 +- .../settings/src/lib/remix-ui-settings.tsx | 17 ++++--- .../settings/src/lib/settingsAction.ts | 42 ++++++++--------- 4 files changed, 47 insertions(+), 60 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js index 8c3889a02b..594e33d496 100644 --- a/apps/remix-ide/src/app/tabs/settings-tab.js +++ b/apps/remix-ide/src/app/tabs/settings-tab.js @@ -4,7 +4,6 @@ import ReactDOM from 'react-dom' import * as packageJson from '../../../../../package.json' import { RemixUiSettings } from '@remix-ui/settings' //eslint-disable-line const globalRegistry = require('../../global/registry') -const EventManager = require('../../lib/events') const profile = { name: 'settings', @@ -21,36 +20,16 @@ const profile = { } module.exports = class SettingsTab extends ViewPlugin { - constructor (config, editor, appManager) { + constructor (config, editor) { super(profile) this.config = config this.editor = editor - this.appManager = appManager - this._components = {} this._deps = { themeModule: globalRegistry.get('themeModule').api } - this._view = { /* eslint-disable */ - el: null, - optionVM: null, - optionVMLabel: null, - personal: null, - personalLabel: null, - useMatomoAnalytics: null, - useMatomoAnalyticsLabel: null, - useMatomoAnalyticsMode: null, - warnPersonalMode: null, - generateContractMetadata: null, - generateContractMetadataLabel: null, - config: { - general: null, themes: null - }, - textWrap: null, - textWrapLabel: null - } /* eslint-enable */ - this.event = new EventManager() this.element = document.createElement('div') this.element.setAttribute('id', 'settingsTab') + this.useMatomoAnalytics = null } onActivation () { @@ -67,6 +46,7 @@ module.exports = class SettingsTab extends ViewPlugin { config = { this.config } editor = { this.editor } _deps = { this._deps } + useMatomoAnalytics = {this.useMatomoAnalytics} />, this.element ) @@ -78,14 +58,16 @@ module.exports = class SettingsTab extends ViewPlugin { updateMatomoAnalyticsChoice (isChecked) { this.config.set('settings/matomo-analytics', isChecked) - if (isChecked) { - this._view.useMatomoAnalytics.setAttribute('checked', '') - this._view.useMatomoAnalyticsLabel.classList.remove('text-secondary') - this._view.useMatomoAnalyticsLabel.classList.add('text-dark') - } else { - this._view.useMatomoAnalytics.removeAttribute('checked') - this._view.useMatomoAnalyticsLabel.classList.remove('text-dark') - this._view.useMatomoAnalyticsLabel.classList.add('text-secondary') - } + this.useMatomoAnalytics = isChecked + this.renderComponent() + // if (isChecked) { + // this._view.useMatomoAnalytics.setAttribute('checked', '') + // this._view.useMatomoAnalyticsLabel.classList.remove('text-secondary') + // this._view.useMatomoAnalyticsLabel.classList.add('text-dark') + // } else { + // this._view.useMatomoAnalytics.removeAttribute('checked') + // this._view.useMatomoAnalyticsLabel.classList.remove('text-dark') + // this._view.useMatomoAnalyticsLabel.classList.add('text-secondary') + // } } } diff --git a/libs/remix-ui/settings/src/lib/constants.ts b/libs/remix-ui/settings/src/lib/constants.ts index 4d6d2a06de..f26d43aff8 100644 --- a/libs/remix-ui/settings/src/lib/constants.ts +++ b/libs/remix-ui/settings/src/lib/constants.ts @@ -6,7 +6,7 @@ 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 ethereunVMText = 'Always use Javascript 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 ' 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 7af4eb4da2..344ab4f3bb 100644 --- a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx +++ b/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx @@ -12,7 +12,8 @@ import { Toaster } from '@remix-ui/toaster'// eslint-disable-line export interface RemixUiSettingsProps { config: any, editor: any, - _deps: any + _deps: any, + useMatomoAnalytics: boolean } export const RemixUiSettings = (props: RemixUiSettingsProps) => { @@ -33,24 +34,28 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => { } }, [themeName, state.message]) + useEffect(() => { + if (props.useMatomoAnalytics !== null) useMatomoAnalytics(props.config, props.useMatomoAnalytics, dispatch) + }, [props.useMatomoAnalytics]) + const onchangeGenerateContractMetadata = (event) => { - generateContractMetadat(props, event, dispatch) + generateContractMetadat(props.config, event.target.checked, dispatch) } const onchangeOption = (event) => { - etherumVM(props, event, dispatch) + etherumVM(props.config, event.target.checked, dispatch) } const textWrapEvent = (event) => { - textWrapEventAction(props, event, dispatch) + textWrapEventAction(props.config, props.editor, event.target.checked, dispatch) } const onchangePersonal = event => { - personal(props, event, dispatch) + personal(props.config, event.target.checked, dispatch) } const onchangeMatomoAnalytics = event => { - useMatomoAnalytics(props, event, dispatch) + useMatomoAnalytics(props.config, event.target.checked, dispatch) } const onswitchTheme = (event, name) => { diff --git a/libs/remix-ui/settings/src/lib/settingsAction.ts b/libs/remix-ui/settings/src/lib/settingsAction.ts index 055c84449b..c316af576f 100644 --- a/libs/remix-ui/settings/src/lib/settingsAction.ts +++ b/libs/remix-ui/settings/src/lib/settingsAction.ts @@ -8,31 +8,31 @@ declare global { 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 generateContractMetadat = (config, checked, dispatch) => { + config.set('settings/generate-contract-metadata', checked) + dispatch({ type: 'contractMetadata', payload: { isChecked: checked, textClass: 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 etherumVM = (config, checked: boolean, dispatch) => { + config.set('settings/always-use-vm', checked) + dispatch({ type: 'ethereumVM', payload: { isChecked: checked, textClass: 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 textWrapEventAction = (config, editor, checked, dispatch) => { + config.set('settings/text-wrap', checked) + editor.resize(checked) + dispatch({ type: 'textWrap', payload: { isChecked: checked, textClass: 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 personal = (config, checked, dispatch) => { + config.set('settings/personal-mode', checked) + dispatch({ type: 'personal', payload: { isChecked: checked, textClass: 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) { +export const useMatomoAnalytics = (config, checked, dispatch) => { + config.set('settings/matomo-analytics', checked) + dispatch({ type: 'useMatomoAnalytics', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } }) + if (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;' @@ -41,12 +41,12 @@ export const useMatomoAnalytics = (element, event, dispatch) => { } } -export const saveTokenToast = (props, dispatch, tokenValue) => { - props.config.set('settings/gist-access-token', tokenValue) +export const saveTokenToast = (config, dispatch, tokenValue) => { + 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', '') +export const removeTokenToast = (config, dispatch) => { + config.set('settings/gist-access-token', '') dispatch({ type: 'removed', payload: { message: 'Access token removed' } }) }