List more fiat currencies via a dropdown list instead of just USD, EUR, GBP

src/component/list.js

@@ -1,10 +1,18 @@
 import React, { Component, PureComponent } from 'react';
-import { View, ListView, TouchableOpacity, StyleSheet } from 'react-native';
+import {
+  View,
+  ListView,
+  Picker,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
 import PropTypes from 'prop-types';
 import Text from './text';
 import ForwardIcon from '../asset/icon/forward';
 import { color, font } from './style';
 
+const SETTING_ITEM_HEIGHT = 60;
+
 //
 // List Content
 //
@@ -123,7 +131,7 @@ ListHeader.propTypes = {
 
 const iStyles = StyleSheet.create({
   item: {
-    height: 60,
+    height: SETTING_ITEM_HEIGHT,
   },
   name: {
     flex: 1,
@@ -161,6 +169,38 @@ SettingItem.propTypes = {
   children: PropTypes.node,
 };
 
+//
+// Setting Picker
+//
+
+const settingPickerStyle = [
+  itemStyles.item,
+  iStyles.item,
+  iStyles.name,
+  {
+    backgroundColor: 'transparent',
+    border: 'none',
+    fontFamily: 'OpenSans Regular',
+    maxHeight: SETTING_ITEM_HEIGHT,
+  },
+];
+
+export const SettingPicker = ({ selectedValue, onValueChange, children }) => (
+  <Picker
+    selectedValue={selectedValue}
+    style={settingPickerStyle}
+    onValueChange={onValueChange}
+  >
+    {children}
+  </Picker>
+);
+
+SettingPicker.propTypes = {
+  selectedValue: PropTypes.string.isRequired,
+  onValueChange: PropTypes.func.isRequired,
+  children: PropTypes.node,
+};
+
 //
 // Setting Header
 //

src/computed/setting.js

@@ -13,9 +13,6 @@ const ComputedSetting = store => {
     satUnitLabel: computed(() => getUnitLabel('sat')),
     bitUnitLabel: computed(() => getUnitLabel('bit')),
     btcUnitLabel: computed(() => getUnitLabel('btc')),
-    usdFiatLabel: computed(() => FIATS['usd'].displayLong),
-    eurFiatLabel: computed(() => FIATS['eur'].displayLong),
-    gbpFiatLabel: computed(() => FIATS['gbp'].displayLong),
   });
 };
 

src/config.js

@@ -29,6 +29,24 @@ module.exports.FIATS = {
   usd: { display: '$', displayLong: 'US Dollar' },
   eur: { display: '€', displayLong: 'Euro' },
   gbp: { display: '£', displayLong: 'British Pound' },
+  aud: { display: '$', displayLong: 'Australian Dollar' },
+  brl: { display: 'R$', displayLong: 'Brazilian Real' },
+  cad: { display: '$', displayLong: 'Canadian Dollar' },
+  chf: { display: 'CHF', displayLong: 'Swiss Franc' },
+  clp: { display: '$', displayLong: 'Chilean Peso' },
+  cny: { display: '¥', displayLong: 'Chinese Yuan' },
+  dkk: { display: 'kr', displayLong: 'Danish Krone' },
+  hkd: { display: '$', displayLong: 'Hong Kong Dollar' },
+  inr: { display: '₹', displayLong: 'Indian Rupee' },
+  isk: { display: 'kr', displayLong: 'Icelandic Króna' },
+  jpy: { display: '¥', displayLong: 'Japanese Yen' },
+  krw: { display: '₩', displayLong: 'South Korean Won' },
+  nzd: { display: '$', displayLong: 'New Zealand Dollar' },
+  rub: { display: 'RUB', displayLong: 'Russian Ruble' },
+  sek: { display: 'kr', displayLong: 'Swedish Krona' },
+  sgd: { display: '$', displayLong: 'Singapore Dollar' },
+  thb: { display: '฿', displayLong: 'Thai Baht' },
+  twd: { display: 'NT$', displayLong: 'New Taiwan Dollar' },
 };
 module.exports.DEFAULT_UNIT = 'btc';
 module.exports.DEFAULT_FIAT = 'usd';

src/view/setting-fiat.js

@@ -1,13 +1,14 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Picker, StyleSheet, View } from 'react-native';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
 import Background from '../component/background';
 import MainContent from '../component/main-content';
 import { Header, Title } from '../component/header';
-import { Button, BackButton, RadioButton } from '../component/button';
-import { SettingItem } from '../component/list';
+import { Button, BackButton } from '../component/button';
+import { SettingPicker } from '../component/list';
 import { color } from '../component/style';
+import { FIATS } from '../config';
 
 //
 // Setting Fiat View
@@ -26,6 +27,8 @@ const styles = StyleSheet.create({
   },
 });
 
+const fiatEntries = Object.entries(FIATS);
+
 const SettingFiatView = ({ store, nav, setting }) => {
   return (
     <Background color={color.blackDark} style={styles.wrapper}>
@@ -36,24 +39,21 @@ const SettingFiatView = ({ store, nav, setting }) => {
       </Header>
       <MainContent style={styles.content}>
         <View style={styles.list}>
-          <SettingItem
-            name={store.usdFiatLabel}
-            onSelect={() => setting.setFiatCurrency({ fiat: 'usd' })}
-          >
-            <RadioButton selected={'usd' === store.settings.fiat} />
-          </SettingItem>
-          <SettingItem
-            name={store.eurFiatLabel}
-            onSelect={() => setting.setFiatCurrency({ fiat: 'eur' })}
-          >
-            <RadioButton selected={'eur' === store.settings.fiat} />
-          </SettingItem>
-          <SettingItem
-            name={store.gbpFiatLabel}
-            onSelect={() => setting.setFiatCurrency({ fiat: 'gbp' })}
+          <SettingPicker
+            selectedValue={store.settings.fiat}
+            onValueChange={itemValue => {
+              setting.setFiatCurrency({ fiat: itemValue });
+            }}
           >
-            <RadioButton selected={'gbp' === store.settings.fiat} />
-          </SettingItem>
+            {fiatEntries.map(([fiatKey, { displayLong }]) => (
+              <Picker.Item
+                label={displayLong}
+                value={fiatKey}
+                color={color.black}
+                key={fiatKey}
+              />
+            ))}
+          </SettingPicker>
         </View>
       </MainContent>
     </Background>

stories/component/list-story.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { Picker, View } from 'react-native';
 import { storiesOf } from '../storybook-react';
 import { action } from '@storybook/addon-actions';
 import Text from '../../src/component/text';
@@ -8,23 +9,46 @@ import {
   List,
   ListItem,
   ListHeader,
+  SettingItem,
+  SettingPicker,
 } from '../../src/component/list';
 import { color } from '../../src/component/style';
 
-storiesOf('List', module).add('List Content', () => (
-  <ListContent>
-    <List
-      data={[...Array(1000)].map((x, i) => ({ id: String(i), data: 'foo' }))}
-      renderHeader={() => (
-        <ListHeader>
-          <Text style={{ flex: 1, color: color.greyText }}>ID</Text>
-          <Text style={{ flex: 1, color: color.greyText }}>Data</Text>
-        </ListHeader>
-      )}
-      renderItem={item => <CustomListItem item={item} />}
-    />
-  </ListContent>
-));
+storiesOf('List', module)
+  .add('List Content', () => (
+    <ListContent>
+      <List
+        data={[...Array(1000)].map((x, i) => ({ id: String(i), data: 'foo' }))}
+        renderHeader={() => (
+          <ListHeader>
+            <Text style={{ flex: 1, color: color.greyText }}>ID</Text>
+            <Text style={{ flex: 1, color: color.greyText }}>Data</Text>
+          </ListHeader>
+        )}
+        renderItem={item => <CustomListItem item={item} />}
+      />
+    </ListContent>
+  ))
+  .add('Setting Item', () => (
+    <View>
+      <SettingItem name="First Item" onSelect={action('clicked')}>
+        <Text>✓</Text>
+      </SettingItem>
+      <SettingItem name="Second Item" onSelect={action('clicked')}>
+        <Text>✗</Text>
+      </SettingItem>
+      <SettingItem name="Third Item" onSelect={action('clicked')}>
+        <Text>✗</Text>
+      </SettingItem>
+    </View>
+  ))
+  .add('Setting Picker', () => (
+    <SettingPicker selectedValue="first" onValueChange={action('clicked')}>
+      <Picker.Item label="First Option" value="first" />
+      <Picker.Item label="Second Option" value="second" />
+      <Picker.Item label="Third Option" value="third" />
+    </SettingPicker>
+  ));
 
 class CustomListItem extends PureComponent {
   render() {

test/unit/action/setting.spec.js

@@ -76,7 +76,7 @@ describe('Action Setting Unit Test', () => {
     });
 
     it('should fall back to USD for unsupported fiat', async () => {
-      ipc.send.resolves('jp');
+      ipc.send.resolves('no');
       await setting.detectLocalCurrency();
       expect(store.settings.fiat, 'to equal', 'usd');
       expect(logger.error, 'was called with', /Detecting/, /Invalid fiat/);

test/unit/computed/setting.spec.js

@@ -16,9 +16,6 @@ describe('Computed Settings Unit Tests', () => {
       expect(store.satUnitLabel, 'to be ok');
       expect(store.bitUnitLabel, 'to be ok');
       expect(store.btcUnitLabel, 'to be ok');
-      expect(store.usdFiatLabel, 'to be ok');
-      expect(store.eurFiatLabel, 'to be ok');
-      expect(store.gbpFiatLabel, 'to be ok');
     });
 
     it('should display satoshis denominated in BTC', () => {