BlueWallet/screen/settings/currency.js

84 lines
2.7 KiB
JavaScript
Raw Normal View History

import React, { useState, useEffect } from 'react';
2018-12-31 22:27:03 +01:00
import { FlatList, TouchableOpacity, ActivityIndicator, View } from 'react-native';
import { SafeBlueArea, BlueNavigationStyle, BlueListItem, BlueText, BlueCard } from '../../BlueComponents';
2018-12-24 07:14:53 +01:00
import PropTypes from 'prop-types';
import { Icon } from 'react-native-elements';
2018-12-24 07:14:53 +01:00
import { FiatUnit } from '../../models/fiatUnit';
let loc = require('../../loc');
let currency = require('../../currency');
const data = Object.values(FiatUnit);
2018-12-24 07:14:53 +01:00
const Currency = () => {
const [isSavingNewPreferredCurrency, setIsSavingNewPreferredCurrency] = useState(false);
const [selectedCurrency, setSelectedCurrency] = useState(null);
2018-12-24 07:14:53 +01:00
useEffect(() => {
const fetchCurrency = async () => {
try {
const preferredCurrency = await currency.getPreferredCurrency();
if (preferredCurrency === null) {
throw Error();
}
setSelectedCurrency(preferredCurrency);
} catch (_error) {
setSelectedCurrency(FiatUnit.USD);
}
};
fetchCurrency();
}, []);
2018-12-24 07:14:53 +01:00
if (selectedCurrency !== null && selectedCurrency !== undefined) {
2018-12-24 07:14:53 +01:00
return (
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
<FlatList
style={{ flex: 1 }}
keyExtractor={(_item, index) => `${index}`}
data={data}
extraData={data}
renderItem={({ item }) => {
return (
2020-05-03 20:17:49 +02:00
<BlueListItem
disabled={isSavingNewPreferredCurrency}
2020-05-03 20:17:49 +02:00
title={`${item.endPointKey} (${item.symbol})`}
{...(selectedCurrency.endPointKey === item.endPointKey
? { rightIcon: <Icon name="check" type="font-awesome" color="#0c2550" /> }
: { hideChevron: true })}
Component={TouchableOpacity}
onPress={async () => {
setIsSavingNewPreferredCurrency(true);
setSelectedCurrency(item);
await currency.setPrefferedCurrency(item);
await currency.startUpdater();
setIsSavingNewPreferredCurrency(false);
}}
2020-05-03 20:17:49 +02:00
/>
);
}}
/>
<BlueCard>
<BlueText>Prices are obtained from CoinDesk</BlueText>
</BlueCard>
</SafeBlueArea>
2018-12-24 07:14:53 +01:00
);
}
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator />
</View>
);
};
2018-12-24 07:14:53 +01:00
Currency.propTypes = {
navigation: PropTypes.shape({
navigate: PropTypes.func,
goBack: PropTypes.func,
}),
};
Currency.navigationOptions = () => ({
...BlueNavigationStyle(),
title: loc.settings.currency,
});
export default Currency;