Connect the countervalue & language settings

7 years ago · 5648ae12ac
6 changed files with 72 additions and 18 deletions
--- a/src/components/SettingsPage/sections/Display.js
+++ b/src/components/SettingsPage/sections/Display.js
@ -2,6 +2,7 @@

 import React, { PureComponent } from 'react'
 import moment from 'moment'
+import { listFiats } from '@ledgerhq/currencies'

 import type { Settings, T } from 'types/common'

@ -15,6 +16,12 @@ import {
  SettingsSectionRow as Row,
 } from '../SettingsSection'

+const fiats = listFiats().map(fiat => ({
+  key: fiat.code,
+  fiat,
+  name: `${fiat.name} - ${fiat.code}${fiat.symbol ? ` (${fiat.symbol})` : ''}`,
+}))
+
 type Props = {
  t: T,
  settings: Settings,
@ -24,11 +31,13 @@ type Props = {

 type State = {
  cachedLanguageKey: string,
+  cachedCounterValue: ?string,
 }

 class TabProfile extends PureComponent<Props, State> {
  state = {
    cachedLanguageKey: this.props.settings.language,
+    cachedCounterValue: fiats.find(fiat => fiat.fiat.code === this.props.settings.counterValue),
  }

  getDatas() {
@ -38,6 +47,14 @@ class TabProfile extends PureComponent<Props, State> {
    }
  }

+  handleChangeCounterValue = item => {
+    const { saveSettings } = this.props
+    this.setState({ cachedCounterValue: item.fiat })
+    window.requestIdleCallback(() => {
+      saveSettings({ counterValue: item.fiat.code })
+    })
+  }
+
  handleChangeLanguage = (languageKey: string) => {
    const { i18n, saveSettings } = this.props
    this.setState({ cachedLanguageKey: languageKey })
@ -50,7 +67,7 @@ class TabProfile extends PureComponent<Props, State> {

  render() {
    const { t } = this.props
-    const { cachedLanguageKey } = this.state
+    const { cachedLanguageKey, cachedCounterValue } = this.state
    const { languages } = this.getDatas()
    const currentLanguage = languages.find(l => l.key === cachedLanguageKey)

@ -66,7 +83,17 @@ class TabProfile extends PureComponent<Props, State> {
            title={t('settings:display.counterValue')}
            desc={t('settings:display.counterValueDesc')}
          >
-            {'-'}
+            <Select
+              searchable
+              fuseOptions={{ keys: ['name'] }}
+              style={{ minWidth: 250 }}
+              small
+              onChange={item => this.handleChangeCounterValue(item)}
+              itemToString={item => (item ? item.name : '')}
+              renderSelected={item => item && item.name}
+              items={fiats}
+              value={cachedCounterValue}
+            />
          </Row>
          <Row title={t('settings:display.language')} desc={t('settings:display.languageDesc')}>
            <Select
--- a/src/components/SettingsPage/sections/Profile.js
+++ b/src/components/SettingsPage/sections/Profile.js
@ -44,8 +44,20 @@ class TabProfile extends PureComponent<Props, State> {
          desc="Lorem ipsum dolor sit amet"
        />
        <Body>
-          <Row title={t('settings:display.language')} desc={t('settings:display.languageDesc')}>
-            noetuhnoeth
+          <Row title={t('settings:profile.username')} desc={t('settings:profile.usernameDesc')}>
+            {'-'}
+          </Row>
+          <Row title={t('settings:profile.password')} desc={t('settings:profile.passwordDesc')}>
+            {'-'}
+          </Row>
+          <Row title={t('settings:profile.sync')} desc={t('settings:profile.syncDesc')}>
+            {'-'}
+          </Row>
+          <Row title={t('settings:profile.export')} desc={t('settings:profile.exportDesc')}>
+            {'-'}
+          </Row>
+          <Row title={t('settings:profile.reset')} desc={t('settings:profile.resetDesc')}>
+            {'-'}
          </Row>
        </Body>
      </Section>
--- a/src/components/base/Input/index.js
+++ b/src/components/base/Input/index.js
@ -16,17 +16,17 @@ const Container = styled(Box).attrs({
  border-radius: ${p => p.theme.radii[1]}px;
  border: 1px solid ${p => (p.isFocus ? p.theme.colors.wallet : p.theme.colors.fog)};
  box-shadow: ${p => (p.isFocus ? `rgba(0, 0, 0, 0.05) 0 2px 2px` : 'none')};
-  height: 40px;
+  height: ${p => (p.small ? '34' : '40')}px;
 `

 const Base = styled.input.attrs({
-  ff: p => p.ff || 'Open Sans|SemiBold',
+  ff: p => (p.ff || p.small ? 'Open Sans' : 'Open Sans|SemiBold'),
  fontSize: 4,
 })`
  ${fontFamily};
  ${fontSize};
  border: 0;
-  color: ${p => p.theme.colors.dark};
+  color: ${p => p.theme.colors.graphite};
  height: 100%;
  outline: none;
  padding: 0;
@ -65,6 +65,7 @@ type Props = {
  renderLeft?: any,
  renderRight?: any,
  containerProps?: Object,
+  small?: boolean,
 }

 type State = {
@ -77,6 +78,7 @@ class Input extends PureComponent<Props, State> {
    onFocus: noop,
    renderLeft: null,
    renderRight: null,
+    small: false,
  }

  state = {
@ -93,34 +95,41 @@ class Input extends PureComponent<Props, State> {

  handleClick = () => this._input && this._input.focus()

-  handleFocus = () => {
+  handleFocus = e => {
    const { onFocus } = this.props
    this.setState({
      isFocus: true,
    })
-    onFocus()
+    onFocus(e)
  }

-  handleBlur = () => {
+  handleBlur = e => {
    const { onBlur } = this.props
    this.setState({
      isFocus: false,
    })
-    onBlur()
+    onBlur(e)
  }

  _input = null

  render() {
    const { isFocus } = this.state
-    const { renderLeft, renderRight, containerProps } = this.props
+    const { renderLeft, renderRight, containerProps, small } = this.props

    return (
-      <Container onClick={this.handleClick} isFocus={isFocus} shrink {...containerProps}>
+      <Container
+        onClick={this.handleClick}
+        isFocus={isFocus}
+        shrink
+        {...containerProps}
+        small={small}
+      >
        {renderLeft}
        <Box px={3} grow shrink>
          <Base
            {...this.props}
+            small={small}
            innerRef={n => (this._input = n)}
            onFocus={this.handleFocus}
            onBlur={this.handleBlur}
--- a/src/components/base/Select/index.js
+++ b/src/components/base/Select/index.js
@ -297,10 +297,11 @@ class Select extends PureComponent<Props> {
              {searchable ? (
                <Box grow>
                  <Input
+                    small
                    keepEvent
-                    {...getInputProps({ placeholder })}
                    onClick={openMenu}
                    renderRight={<AngleDown mr={2} />}
+                    {...getInputProps({ placeholder })}
                  />
                </Box>
              ) : (
--- a/static/i18n/en/settings.yml
+++ b/static/i18n/en/settings.yml
@ -23,8 +23,16 @@ currencies:
  explorer: Blockchain explorer
  explorerDesc: Lorem ipsum dolor sit amet
 profile:
-  protectWithPassword: Protect local data with a password
+  username: Username
+  usernameDesc: Lorem ipsum dolor sit amet
  password: Password
+  passwordDesc: Lorem ipsum dolor sit amet
+  sync: Sync accounts
+  syncDesc: Lorem ipsum dolor sit amet
+  export: Export logs
+  exportDesc: Lorem ipsum dolor sit amet
+  reset: Reset application
+  resetDesc: Lorem ipsum dolor sit amet
 about:
  faq: FAQ
  faqDesc: Lorem ipsum dolor sit amet
--- a/yarn.lock
+++ b/yarn.lock
@ -8013,9 +8013,6 @@ ledger-test-library@KhalilBellakrid/ledger-test-library-nodejs#7d37482:
  dependencies:
    axios "^0.17.1"
    bindings "^1.3.0"
-    electron "^1.8.2"
-    electron-builder "^20.0.4"
-    electron-rebuild "^1.7.3"
    nan "^2.6.2"
    prebuild-install "^2.2.2"