Use the new Select in some places

src/components/SelectAccount/index.js

@@ -5,14 +5,13 @@ import { connect } from 'react-redux'
 import { translate } from 'react-i18next'
 import { getCryptoCurrencyIcon } from '@ledgerhq/live-common/lib/react'
 
-import noop from 'lodash/noop'
-
 import type { Account } from '@ledgerhq/live-common/lib/types'
 import type { T } from 'types/common'
+import type { Option } from 'components/base/Select'
 
 import { getVisibleAccounts } from 'reducers/accounts'
 
-import Select from 'components/base/LegacySelect'
+import Select from 'components/base/Select'
 import FormattedVal from 'components/base/FormattedVal'
 import Box from 'components/base/Box'
 import Text from 'components/base/Text'
@@ -21,9 +20,10 @@ const mapStateToProps = state => ({
   accounts: getVisibleAccounts(state),
 })
 
-const renderItem = a => {
-  const Icon = getCryptoCurrencyIcon(a.currency)
-  const { color } = a.currency
+const renderOption = a => {
+  const { data: account } = a
+  const Icon = getCryptoCurrencyIcon(account.currency)
+  const { color } = account.currency
 
   // FIXME: we need a non-hacky way to handle text ellipsis
   const nameOuterStyle = { width: 0 }
@@ -38,11 +38,11 @@ const renderItem = a => {
       )}
       <Box grow style={nameOuterStyle} ff="Open Sans|SemiBold" color="dark" fontSize={4}>
         <Text style={nameInnerStyle} ff="Open Sans|SemiBold" color="dark" fontSize={4}>
-          {a.name}
+          {account.name}
         </Text>
       </Box>
       <Box>
-        <FormattedVal color="grey" val={a.balance} unit={a.unit} showCode />
+        <FormattedVal color="grey" val={account.balance} unit={account.unit} showCode />
       </Box>
     </Box>
   )
@@ -50,28 +50,27 @@ const renderItem = a => {
 
 type Props = {
   accounts: Account[],
-  onChange?: () => Account | void,
-  value?: Account | null,
+  onChange: Option => void,
+  value: ?Account,
   t: T,
 }
 
-const RawSelectAccount = ({ accounts, onChange, value, t, ...props }: Props) => (
-  <Select
-    {...props}
-    value={value && accounts.find(a => value && a.id === value.id)}
-    renderSelected={renderItem}
-    renderItem={renderItem}
-    keyProp="id"
-    items={accounts.sort((a, b) => (a.name < b.name ? -1 : 1))}
-    placeholder={t('common:selectAccount')}
-    fontSize={4}
-    onChange={onChange}
-  />
-)
-
-RawSelectAccount.defaultProps = {
-  onChange: noop,
-  value: undefined,
+const RawSelectAccount = ({ accounts, onChange, value, t, ...props }: Props) => {
+  const options = accounts
+    .sort((a, b) => (a.name < b.name ? -1 : 1))
+    .map(a => ({ ...a, value: a.id, label: a.name }))
+  const selectedOption = value ? options.find(o => o.value === value.id) : null
+  return (
+    <Select
+      {...props}
+      value={selectedOption}
+      options={options}
+      renderValue={renderOption}
+      renderOption={renderOption}
+      placeholder={t('common:selectAccount')}
+      onChange={onChange}
+    />
+  )
 }
 
 export const SelectAccount = translate()(RawSelectAccount)

src/components/SelectCurrency/index.js

@@ -4,32 +4,17 @@ import React from 'react'
 import { translate } from 'react-i18next'
 import { connect } from 'react-redux'
 
-import noop from 'lodash/noop'
-
 import type { CryptoCurrency } from '@ledgerhq/live-common/lib/types'
 import type { T } from 'types/common'
 import { availableCurrencies } from 'reducers/settings'
+import type { Option } from 'components/base/Select'
 
 import CryptoCurrencyIcon from 'components/CryptoCurrencyIcon'
-import Select from 'components/base/LegacySelect'
+import Select from 'components/base/Select'
 import Box from 'components/base/Box'
 
-const renderItem = (currency: CryptoCurrency) => {
-  const { color, name } = currency
-  return (
-    <Box grow horizontal alignItems="center" flow={2}>
-      <Box style={{ width: 16, height: 16, color }}>
-        <CryptoCurrencyIcon currency={currency} size={16} />
-      </Box>
-      <Box grow ff="Open Sans|SemiBold" color="dark" fontSize={4}>
-        {name}
-      </Box>
-    </Box>
-  )
-}
-
 type OwnProps = {
-  onChange: Function,
+  onChange: Option => void,
   currencies?: CryptoCurrency[],
   value?: CryptoCurrency,
   placeholder: string,
@@ -44,23 +29,34 @@ const mapStateToProps = (state, props: OwnProps) => ({
   currencies: props.currencies || availableCurrencies(state),
 })
 
-const SelectCurrency = ({ onChange, value, t, placeholder, currencies, ...props }: Props) => (
-  <Select
-    {...props}
-    value={value}
-    renderSelected={renderItem}
-    renderItem={renderItem}
-    keyProp="id"
-    items={currencies}
-    placeholder={placeholder || t('common:selectCurrency')}
-    fontSize={4}
-    onChange={onChange}
-  />
-)
+const SelectCurrency = ({ onChange, value, t, placeholder, currencies, ...props }: Props) => {
+  const options = currencies ? currencies.map(c => ({ ...c, value: c.id, label: c.name })) : []
+  return (
+    <Select
+      {...props}
+      value={value}
+      renderOption={renderOption}
+      renderValue={renderOption}
+      options={options}
+      placeholder={placeholder || t('common:selectCurrency')}
+      onChange={onChange}
+    />
+  )
+}
 
-SelectCurrency.defaultProps = {
-  onChange: noop,
-  value: undefined,
+const renderOption = (option: Option) => {
+  const { data: currency } = option
+  const { color, name } = currency
+  return (
+    <Box grow horizontal alignItems="center" flow={2}>
+      <Box style={{ width: 16, height: 16, color }}>
+        <CryptoCurrencyIcon currency={currency} size={16} />
+      </Box>
+      <Box grow ff="Open Sans|SemiBold" color="dark" fontSize={4}>
+        {name}
+      </Box>
+    </Box>
+  )
 }
 
 export default translate()(connect(mapStateToProps)(SelectCurrency))

src/components/SettingsPage/sections/Display.js

@@ -7,7 +7,7 @@ import { listFiatCurrencies } from '@ledgerhq/live-common/lib/helpers/currencies
 import type { SettingsState as Settings } from 'reducers/settings'
 import type { T } from 'types/common'
 
-import Select from 'components/base/LegacySelect'
+import Select from 'components/base/Select'
 import RadioGroup from 'components/base/RadioGroup'
 import IconDisplay from 'icons/Display'
 import languageKeys from 'config/languages'
@@ -23,16 +23,16 @@ import {
 
 const regions = Object.keys(regionsByKey).map(key => {
   const [language, region] = key.split('-')
-  return { key, language, region, name: regionsByKey[key] }
+  return { value: key, language, region, label: regionsByKey[key] }
 })
 
 const fiats = listFiatCurrencies()
   .map(f => f.units[0])
   // For now we take first unit, in the future we'll need to figure out something else
   .map(fiat => ({
-    key: fiat.code,
+    value: fiat.code,
+    label: `${fiat.name} - ${fiat.code}${fiat.symbol ? ` (${fiat.symbol})` : ''}`,
     fiat,
-    name: `${fiat.name} - ${fiat.code}${fiat.symbol ? ` (${fiat.symbol})` : ''}`,
   }))
 
 type Props = {
@@ -79,7 +79,7 @@ class TabProfile extends PureComponent<Props, State> {
     })
   }
 
-  handleChangeLanguage = ({ key: languageKey }: *) => {
+  handleChangeLanguage = ({ value: languageKey }: *) => {
     const { i18n, saveSettings } = this.props
     this.setState({ cachedLanguageKey: languageKey })
     window.requestIdleCallback(() => {
@@ -117,12 +117,16 @@ class TabProfile extends PureComponent<Props, State> {
       cachedRegion,
     } = this.state
 
-    const languages = languageKeys.map(key => ({ key, name: t(`language:${key}`) }))
-    const currentLanguage = languages.find(l => l.key === cachedLanguageKey)
+    const languages = languageKeys.map(key => ({ value: key, label: t(`language:${key}`) }))
+    const currentLanguage = languages.find(l => l.value === cachedLanguageKey)
     const regionsFiltered = regions.filter(({ language }) => cachedLanguageKey === language)
     const currentRegion =
       regionsFiltered.find(({ region }) => cachedRegion === region) || regionsFiltered[0]
 
+    const cvOption = cachedCounterValue
+      ? fiats.find(f => f.value === cachedCounterValue.value)
+      : null
+
     return (
       <Section>
         <Header
@@ -136,33 +140,34 @@ class TabProfile extends PureComponent<Props, State> {
             desc={t('settings:display.counterValueDesc')}
           >
             <Select
-              style={{ minWidth: 250 }}
               small
+              minWidth={250}
               onChange={this.handleChangeCounterValue}
               itemToString={item => (item ? item.name : '')}
               renderSelected={item => item && item.name}
-              items={fiats}
-              value={cachedCounterValue}
+              options={fiats}
+              value={cvOption}
             />
           </Row>
           <Row title={t('settings:display.language')} desc={t('settings:display.languageDesc')}>
             <Select
-              style={{ minWidth: 250 }}
               small
+              minWidth={250}
+              isSearchable={false}
               onChange={this.handleChangeLanguage}
               renderSelected={item => item && item.name}
               value={currentLanguage}
-              items={languages}
+              options={languages}
             />
           </Row>
           <Row title={t('settings:display.region')} desc={t('settings:display.regionDesc')}>
             <Select
-              style={{ minWidth: 250 }}
               small
+              minWidth={250}
               onChange={this.handleChangeRegion}
               renderSelected={item => item && item.name}
               value={currentRegion}
-              items={regionsFiltered}
+              options={regionsFiltered}
             />
           </Row>
           <Row title={t('settings:display.stock')} desc={t('settings:display.stockDesc')}>