import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import availableCurrencies from '../../../helpers/constants/available-conversions' import SimpleDropdown from '../../../components/app/dropdowns/simple-dropdown' import ToggleButton from '../../../components/ui/toggle-button' import locales from '../../../../../app/_locales/index.json' const sortedCurrencies = availableCurrencies.sort((a, b) => { return a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase()) }) const currencyOptions = sortedCurrencies.map(({ code, name }) => { return { displayValue: `${code.toUpperCase()} - ${name}`, key: code, value: code, } }) const localeOptions = locales.map(locale => { return { displayValue: `${locale.name}`, key: locale.code, value: locale.code, } }) export default class SettingsTab extends PureComponent { static contextTypes = { t: PropTypes.func, metricsEvent: PropTypes.func, } static propTypes = { setUseBlockie: PropTypes.func, setCurrentCurrency: PropTypes.func, warning: PropTypes.string, updateCurrentLocale: PropTypes.func, currentLocale: PropTypes.string, useBlockie: PropTypes.bool, currentCurrency: PropTypes.string, conversionDate: PropTypes.number, nativeCurrency: PropTypes.string, useNativeCurrencyAsPrimaryCurrency: PropTypes.bool, setUseNativeCurrencyAsPrimaryCurrencyPreference: PropTypes.func, } renderCurrentConversion () { const { t } = this.context const { currentCurrency, conversionDate, setCurrentCurrency } = this.props return (
{ t('currencyConversion') } { t('updatedWithDate', [Date(conversionDate)]) }
setCurrentCurrency(newCurrency)} />
) } renderCurrentLocale () { const { t } = this.context const { updateCurrentLocale, currentLocale } = this.props const currentLocaleMeta = locales.find(locale => locale.code === currentLocale) const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : '' return (
{ t('currentLanguage') } { currentLocaleName }
updateCurrentLocale(newLocale)} />
) } renderBlockieOptIn () { const { t } = this.context const { useBlockie, setUseBlockie } = this.props return (
{ this.context.t('blockiesIdenticon') }
setUseBlockie(!value)} offLabel={t('off')} onLabel={t('on')} />
) } renderUsePrimaryCurrencyOptions () { const { t } = this.context const { nativeCurrency, setUseNativeCurrencyAsPrimaryCurrencyPreference, useNativeCurrencyAsPrimaryCurrency, } = this.props return (
{ t('primaryCurrencySetting') }
{ t('primaryCurrencySettingDescription') }
setUseNativeCurrencyAsPrimaryCurrencyPreference(true)} checked={Boolean(useNativeCurrencyAsPrimaryCurrency)} />
setUseNativeCurrencyAsPrimaryCurrencyPreference(false)} checked={!useNativeCurrencyAsPrimaryCurrency} />
) } renderContent () { const { warning } = this.props return (
{ warning &&
{ warning }
} { this.renderCurrentConversion() } { this.renderUsePrimaryCurrencyOptions() } { this.renderCurrentLocale() } { this.renderBlockieOptIn() }
) } render () { return this.renderContent() } }