@ -4,7 +4,7 @@ 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 { enablePersonalModeText , ethereunVMText , generateContractMetadataText , gitAccessTokenLink , gitAccessTokenText , gitAccessTokenText2 , gitAccessTokenTitle , matomoAnalytics , textDark , textSecondary , warnText , wordWrapText } from './constants'
import './remix-ui-settings.css' import './remix-ui-settings.css'
import { etherumVM , generateContractMetadat , personal , textWrapEventAction , useMatomoAnalytics , saveTokenToast , removeTokenToast } from './settingsAction' import { ethere umVM , generateContractMetadat , personal , textWrapEventAction , useMatomoAnalytics , saveTokenToast , removeTokenToast } from './settingsAction'
import { initialState , toastInitialState , toastReducer , settingReducer } from './settingsReducer' import { initialState , toastInitialState , toastReducer , settingReducer } from './settingsReducer'
import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
@ -12,7 +12,8 @@ import { Toaster } from '@remix-ui/toaster'// eslint-disable-line
export interface RemixUiSettingsProps { export interface RemixUiSettingsProps {
config : any , config : any ,
editor : any , editor : any ,
_deps : any _deps : any ,
useMatomoAnalytics : boolean
} }
export const RemixUiSettings = ( props : RemixUiSettingsProps ) = > { export const RemixUiSettings = ( props : RemixUiSettingsProps ) = > {
@ -33,24 +34,34 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
} }
} , [ themeName , state . message ] ) } , [ themeName , state . message ] )
useEffect ( ( ) = > {
if ( props . useMatomoAnalytics !== null ) useMatomoAnalytics ( props . config , props . useMatomoAnalytics , dispatch )
} , [ props . useMatomoAnalytics ] )
useEffect ( ( ) = > {
const javascriptVM = props . config . get ( 'settings/always-use-vm' )
if ( ( javascriptVM === null ) || ( javascriptVM === undefined ) ) ethereumVM ( props . config , true , dispatch )
} , [ props . config ] )
const onchangeGenerateContractMetadata = ( event ) = > { const onchangeGenerateContractMetadata = ( event ) = > {
generateContractMetadat ( props , event , dispatch ) generateContractMetadat ( props . config , event . target . checked , dispatch )
} }
const onchangeOption = ( event ) = > { const onchangeOption = ( event ) = > {
etherumVM ( props , event , dispatch ) ethere umVM ( props . config , event . target . checked , dispatch )
} }
const textWrapEvent = ( event ) = > { const textWrapEvent = ( event ) = > {
textWrapEventAction ( props , event , dispatch ) textWrapEventAction ( props . config , props . editor , event . target . checked , dispatch )
} }
const onchangePersonal = event = > { const onchangePersonal = event = > {
personal ( props , event , dispatch ) personal ( props . config , event . target . checked , dispatch )
} }
const onchangeMatomoAnalytics = event = > { const onchangeMatomoAnalytics = event = > {
useMatomoAnalytics ( props , event , dispatch ) useMatomoAnalytics ( props . config , event . target . checked , dispatch )
} }
const onswitchTheme = ( event , name ) = > { const onswitchTheme = ( event , name ) = > {
@ -66,47 +77,55 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
} }
} }
const generalConfig = ( ) = > ( const generalConfig = ( ) = > {
< div className = "$border-top" > const isMetadataChecked = props . config . get ( 'settings/generate-contract-metadata' ) || false
< div className = "card-body pt-3 pb-2" > const isEthereumVMChecked = props . config . get ( 'settings/always-use-vm' ) || false
< h6 className = "card-title" > General settings < / h6 > const isEditorWrapChecked = props . config . get ( 'settings/text-wrap' ) || false
< div className = "mt-2 custom-control custom-checkbox mb-1" > const isPersonalChecked = props . config . get ( 'settings/personal-mode' ) || false
< input onChange = { onchangeGenerateContractMetadata } id = "generatecontractmetadata" data - id = "settingsTabGenerateContractMetadata" type = "checkbox" className = "custom-control-input" name = "contractMetadata" checked = { props . config . get ( 'settings/generate-contract-metadata' ) } / > const isMatomoChecked = props . config . get ( 'settings/matomo-analytics' ) || false
< label className = { ` form-check-label custom-control-label align-middle ${ getTextClass ( 'settings/generate-contract-metadata' ) } ` } data - id = "settingsTabGenerateContractMetadataLabel" htmlFor = "generatecontractmetadata" > { generateContractMetadataText } < / label >
< / div > return (
< div className = "fmt-2 custom-control custom-checkbox mb-1" > < div className = "$border-top" >
< input onChange = { onchangeOption } className = "custom-control-input" id = "alwaysUseVM" data - id = "settingsTabAlwaysUseVM" type = "checkbox" name = "ethereumVM" checked = { props . config . get ( 'settings/always-use-vm' ) } / > < div className = "card-body pt-3 pb-2" >
< label className = { ` form-check-label custom-control-label align-middle ${ getTextClass ( 'settings/always-use-vm' ) } ` } htmlFor = "alwaysUseVM" > { ethereunVMText } < / label > < h6 className = "card-title" > General settings < / h6 >
< / div > < div className = "mt-2 custom-control custom-checkbox mb-1" >
< 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 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/generate-contract-metadata' ) } ` } data - id = "settingsTabGenerateContractMetadataLabel" htmlFor = "generatecontractmetadata" > { generateContractMetadataText } < / label >
< label className = { ` form-check-label custom-control-label align-middle ${ getTextClass ( 'settings/text-wrap' ) } ` } htmlFor = "editorWrap" > { wordWrapText } < / label > < / div >
< / div > < div className = "fmt-2 custom-control custom-checkbox mb-1" >
< div className = "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 = { 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/always-use-vm' ) } ` } htmlFor = "alwaysUseVM" > { ethereunVMText } < / label >
< label className = { ` form-check-label custom-control-label align-middle ${ getTextClass ( 'settings/personal-mode' ) } ` } htmlFor = "personal" > < / div >
< i className = "fas fa-exclamation-triangle text-warning" aria - hidden = "true" > < / i > < span > < / span > < div className = "mt-2 custom-control custom-checkbox mb-1" >
< span > < / span > { enablePersonalModeText } { warnText } < input id = "editorWrap" className = "custom-control-input" type = "checkbox" onChange = { textWrapEvent } checked = { isEditorWrapChecked } / >
< / label > < label className = { ` form-check-label custom-control-label align-middle ${ getTextClass ( 'settings/text-wrap' ) } ` } htmlFor = "editorWrap" > { wordWrapText } < / label >
< / div > < / div >
< div className = "custom-control custom-checkbox mb-1" > < 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' ) } / > < 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/matomo-analytics' ) } ` } htmlFor = "settingsMatomoAnalytics" > < label className = { ` form-check-label custom-control-label align-middle ${ getTextClass ( 'settings/personal-mode' ) } ` } htmlFor = "personal" >
< span > { matomoAnalytics } < / span > < i className = "fas fa-exclamation-triangle text-warning" aria - hidden = "true" > < / i > < span > < / 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 > < span > < / span > { enablePersonalModeText } { warnText }
< / label > < / label >
< / div >
< div className = "custom-control custom-checkbox mb-1" >
< 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 >
< / label >
< / div >
< / div > < / div >
< / div > < / div >
< / div > )
) }
const saveToken = ( ) = > { const saveToken = ( ) = > {
saveTokenToast ( props , dispatchToast , tokenValue ) saveTokenToast ( props . config , dispatchToast , tokenValue )
} }
const removeToken = ( ) = > { const removeToken = ( ) = > {
setTokenValue ( '' ) setTokenValue ( '' )
removeTokenToast ( props , dispatchToast ) removeTokenToast ( props . config , dispatchToast )
} }
const handleSaveTokenState = useCallback ( const handleSaveTokenState = useCallback (
David Zagi
3 years ago
committed by
GitHub