diff --git a/src/component/list.js b/src/component/list.js
index c3ebd078e..c343f93bb 100644
--- a/src/component/list.js
+++ b/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 }) => (
+
+ {children}
+
+);
+
+SettingPicker.propTypes = {
+ selectedValue: PropTypes.string.isRequired,
+ onValueChange: PropTypes.func.isRequired,
+ children: PropTypes.node,
+};
+
//
// Setting Header
//
diff --git a/src/computed/setting.js b/src/computed/setting.js
index 08cd52815..989e7d4a5 100644
--- a/src/computed/setting.js
+++ b/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),
});
};
diff --git a/src/config.js b/src/config.js
index f80868f5c..0db4a52d3 100644
--- a/src/config.js
+++ b/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';
diff --git a/src/view/setting-fiat.js b/src/view/setting-fiat.js
index 73a1f1ec0..cc58f16b2 100644
--- a/src/view/setting-fiat.js
+++ b/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 (
@@ -36,24 +39,21 @@ const SettingFiatView = ({ store, nav, setting }) => {
- setting.setFiatCurrency({ fiat: 'usd' })}
- >
-
-
- setting.setFiatCurrency({ fiat: 'eur' })}
- >
-
-
- setting.setFiatCurrency({ fiat: 'gbp' })}
+ {
+ setting.setFiatCurrency({ fiat: itemValue });
+ }}
>
-
-
+ {fiatEntries.map(([fiatKey, { displayLong }]) => (
+
+ ))}
+
diff --git a/stories/component/list-story.js b/stories/component/list-story.js
index 2dcd5ba0d..ec3ccd551 100644
--- a/stories/component/list-story.js
+++ b/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', () => (
-
- ({ id: String(i), data: 'foo' }))}
- renderHeader={() => (
-
- ID
- Data
-
- )}
- renderItem={item => }
- />
-
-));
+storiesOf('List', module)
+ .add('List Content', () => (
+
+ ({ id: String(i), data: 'foo' }))}
+ renderHeader={() => (
+
+ ID
+ Data
+
+ )}
+ renderItem={item => }
+ />
+
+ ))
+ .add('Setting Item', () => (
+
+
+ ✓
+
+
+ ✗
+
+
+ ✗
+
+
+ ))
+ .add('Setting Picker', () => (
+
+
+
+
+
+ ));
class CustomListItem extends PureComponent {
render() {
diff --git a/test/unit/action/setting.spec.js b/test/unit/action/setting.spec.js
index d4ecc859e..34abf8df9 100644
--- a/test/unit/action/setting.spec.js
+++ b/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/);
diff --git a/test/unit/computed/setting.spec.js b/test/unit/computed/setting.spec.js
index dd5551c96..fc19ac18d 100644
--- a/test/unit/computed/setting.spec.js
+++ b/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', () => {