From 83c763f11751a1bbd36cf127f2ae1e2ec6726b6d Mon Sep 17 00:00:00 2001 From: "wallace.r.w.west" Date: Sun, 2 Sep 2018 17:16:09 +0200 Subject: [PATCH 1/6] Refactor Fiat setting view --- src/computed/setting.js | 3 --- src/view/setting-fiat.js | 30 ++++++++++++------------------ 2 files changed, 12 insertions(+), 21 deletions(-) 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/view/setting-fiat.js b/src/view/setting-fiat.js index 73a1f1ec0..dc9c2eabc 100644 --- a/src/view/setting-fiat.js +++ b/src/view/setting-fiat.js @@ -8,6 +8,7 @@ import { Header, Title } from '../component/header'; import { Button, BackButton, RadioButton } from '../component/button'; import { SettingItem } 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,15 @@ const SettingFiatView = ({ store, nav, setting }) => { - setting.setFiatCurrency({ fiat: 'usd' })} - > - - - setting.setFiatCurrency({ fiat: 'eur' })} - > - - - setting.setFiatCurrency({ fiat: 'gbp' })} - > - - + {fiatEntries.map(([fiatKey, { displayLong }]) => ( + setting.setFiatCurrency({ fiat: fiatKey })} + key={fiatKey} + > + + + ))} From 20d7239a56f16bde0a5c282cbf8f432170438cc6 Mon Sep 17 00:00:00 2001 From: "wallace.r.w.west" Date: Sun, 2 Sep 2018 20:39:01 +0200 Subject: [PATCH 2/6] Create SettingPicker component and restructure Fiat Setting view on top of it --- src/component/list.js | 44 ++++++++++++++++++++++++++++++++++++++-- src/view/setting-fiat.js | 25 ++++++++++++----------- 2 files changed, 55 insertions(+), 14 deletions(-) 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/view/setting-fiat.js b/src/view/setting-fiat.js index dc9c2eabc..b322df944 100644 --- a/src/view/setting-fiat.js +++ b/src/view/setting-fiat.js @@ -1,12 +1,12 @@ 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'; @@ -39,15 +39,16 @@ const SettingFiatView = ({ store, nav, setting }) => { - {fiatEntries.map(([fiatKey, { displayLong }]) => ( - setting.setFiatCurrency({ fiat: fiatKey })} - key={fiatKey} - > - - - ))} + { + setting.setFiatCurrency({ fiat: itemValue }); + }} + > + {fiatEntries.map(([fiatKey, { displayLong }]) => ( + + ))} + From 817fc944044d36ca0cf8541ed0b84e6eaad37961 Mon Sep 17 00:00:00 2001 From: "wallace.r.w.west" Date: Sun, 2 Sep 2018 20:40:10 +0200 Subject: [PATCH 3/6] Add SettingItem and SettingPicker to List stories --- stories/component/list-story.js | 52 ++++++++++++++++++++++++--------- 1 file changed, 38 insertions(+), 14 deletions(-) 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() { From 9db9b8fd5ef6b6fb7f255dd55ebfbb299be00617 Mon Sep 17 00:00:00 2001 From: "wallace.r.w.west" Date: Sun, 9 Sep 2018 22:04:19 +0200 Subject: [PATCH 4/6] add remaining fiat currencies supported by blockchain.info API --- src/config.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) 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'; From f0cd98c80f59c2ca00fbabc82625365fda83f767 Mon Sep 17 00:00:00 2001 From: "wallace.r.w.west" Date: Sun, 9 Sep 2018 22:19:13 +0200 Subject: [PATCH 5/6] reset picker option text color --- src/view/setting-fiat.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/view/setting-fiat.js b/src/view/setting-fiat.js index b322df944..cc58f16b2 100644 --- a/src/view/setting-fiat.js +++ b/src/view/setting-fiat.js @@ -46,7 +46,12 @@ const SettingFiatView = ({ store, nav, setting }) => { }} > {fiatEntries.map(([fiatKey, { displayLong }]) => ( - + ))} From 2b73e910a1345442a596302c21a4bbab12b9940a Mon Sep 17 00:00:00 2001 From: "wallace.r.w.west" Date: Mon, 10 Sep 2018 19:58:41 +0200 Subject: [PATCH 6/6] fix failing unit tests caused by addition of new fiat currencies --- test/unit/action/setting.spec.js | 2 +- test/unit/computed/setting.spec.js | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) 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', () => {