@ -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 , generateContractMetadataText , gitAccessTokenLink , gitAccessTokenText , gitAccessTokenText2 , gitAccessTokenTitle , matomoAnalytics , textDark , textSecondary , warnText , wordWrapText } from './constants'
import { enablePersonalModeText , ethereunVMText , generateContractMetadataText , gitAccessTokenLink , gitAccessTokenText , gitAccessTokenText2 , gitAccessTokenTitle , matomoAnalytics , swarmSettingsTitle , textDark , textSecondary , warnText , wordWrapText } from './constants'
import './remix-ui-settings.css'
import { ethereumVM , generateContractMetadat , personal , textWrapEventAction , useMatomoAnalytics , saveTokenToast , removeTokenToast } from './settingsAction'
import { ethereumVM , generateContractMetadat , personal , textWrapEventAction , useMatomoAnalytics , saveTokenToast , removeTokenToast , saveSwarmSettingsToast } 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'
@ -22,6 +22,9 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
const [ , dispatch ] = useReducer ( settingReducer , initialState )
const [ state , dispatchToast ] = useReducer ( toastReducer , toastInitialState )
const [ tokenValue , setTokenValue ] = useState ( '' )
const [ themeName , setThemeName ] = useState ( '' )
const [ privateBeeAddress , setPrivateBeeAddress ] = useState ( '' )
const [ postageStampId , setPostageStampId ] = useState ( '' )
useEffect ( ( ) = > {
const token = props . config . get ( 'settings/gist-access-token' )
@ -32,7 +35,15 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
if ( token ) {
setTokenValue ( token )
}
} , [ state . message ] )
const configPrivateBeeAddress = props . config . get ( 'settings/swarm-private-bee-address' )
if ( configPrivateBeeAddress ) {
setPrivateBeeAddress ( configPrivateBeeAddress )
}
const configPostageStampId = props . config . get ( 'settings/swarm-postage-stamp-id' )
if ( configPostageStampId ) {
setPostageStampId ( configPostageStampId )
}
} , [ themeName , state . message ] )
useEffect ( ( ) = > {
if ( props . useMatomoAnalytics !== null ) useMatomoAnalytics ( props . config , props . useMatomoAnalytics , dispatch )
@ -150,12 +161,76 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
< / div >
)
const handleSavePrivateBeeAddress = useCallback (
( event ) = > {
setPrivateBeeAddress ( event . target . value )
} ,
[ privateBeeAddress ]
)
const handleSavePostageStampId = useCallback (
( event ) = > {
setPostageStampId ( event . target . value )
} ,
[ postageStampId ]
)
const saveSwarmSettings = ( ) = > {
saveSwarmSettingsToast ( props . config , dispatchToast , privateBeeAddress , postageStampId )
}
const swarmSettings = ( ) = > (
< div className = "border-top" >
< div className = "card-body pt-3 pb-2" >
< h6 className = "card-title" > { swarmSettingsTitle } < / h6 >
< div className = "" > < 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 } / >
< / 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 } / >
< div className = "d-flex justify-content-end pt-2" >
< / div >
< / div >
< / div >
< div className = "d-flex justify-content-end pt-2" >
< input className = "btn btn-sm btn-primary ml-2" id = "saveswarmsettings" data - id = "settingsTabSaveSwarmSettings" onClick = { ( ) = > saveSwarmSettings ( ) } value = "Save" type = "button" disabled = { privateBeeAddress === '' } > < / input >
< / div >
< / div >
< / div >
)
const themes = ( ) = > {
const themes = props . _deps . themeModule . getThemes ( )
if ( themes ) {
return themes . map ( ( aTheme , index ) = > (
< div className = "radio custom-control custom-radio mb-1 form-check" key = { index } >
< input type = "radio" onChange = { event = > { onswitchTheme ( event , aTheme . name ) } } className = "align-middle custom-control-input" name = 'theme' id = { aTheme . name } data - id = { ` settingsTabTheme ${ aTheme . name } ` } checked = { props . _deps . themeModule . active === aTheme . name } / >
< label className = "form-check-label custom-control-label" data - id = { ` settingsTabThemeLabel ${ aTheme . name } ` } htmlFor = { aTheme . name } > { aTheme . name } ( { aTheme . quality } ) < / label >
< / div >
)
)
}
}
return (
< div >
{ state . message ? < Toaster message = { state . message } / > : null }
{ generalConfig ( ) }
{ gistToken ( ) }
{ swarmSettings ( ) }
< RemixUiThemeModule themeModule = { props . _deps . themeModule } / >
< div className = "border-top" >
< div className = "card-body pt-3 pb-2" >
< h6 className = "card-title" > Themes < / h6 >
< div className = "card-text themes-container" >
{ themes ( ) }
< / div >
< / div >
< / div >
< / div >
)
}
Attila Gazso
3 years ago
committed by
yann300