From 1e9e0a936f96076a530c21e421ee4f4bd51df00d Mon Sep 17 00:00:00 2001 From: Xtrendence Date: Wed, 31 Mar 2021 17:02:40 +0100 Subject: [PATCH] The fiat currency on the mobile app can now be changed. --- mobile/screens/Dashboard.js | 48 +++++++++++++++++++++---------------- mobile/screens/Holdings.js | 20 ++++++++++++---- mobile/screens/Market.js | 22 ++++++++++++----- mobile/screens/Settings.js | 33 +++++++++++++++++++++++++ mobile/utils/utils.js | 8 ++++++- 5 files changed, 99 insertions(+), 32 deletions(-) diff --git a/mobile/screens/Dashboard.js b/mobile/screens/Dashboard.js index 8ac1d82..bd0d815 100644 --- a/mobile/screens/Dashboard.js +++ b/mobile/screens/Dashboard.js @@ -5,7 +5,7 @@ import { StatusBar } from "expo-status-bar"; import LinearGradient from "react-native-linear-gradient"; import { globalColors, globalStyles } from "../styles/global"; import { ThemeContext } from "../utils/theme"; -import { empty, separateThousands, abbreviateNumber, epoch, wait } from "../utils/utils"; +import { empty, separateThousands, abbreviateNumber, epoch, wait, currencies } from "../utils/utils"; const screenWidth = Dimensions.get("screen").width; const screenHeight = Dimensions.get("screen").height; @@ -85,9 +85,14 @@ export default function Dashboard({ navigation }) { ); async function getMarket() { + let currency = await AsyncStorage.getItem("currency"); + if(empty(currency)) { + currency = "usd"; + } + let theme = empty(await AsyncStorage.getItem("theme")) ? "Light" : await AsyncStorage.getItem("theme"); - let endpoint = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false"; + let endpoint = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=" + currency + "&order=market_cap_desc&per_page=10&page=1&sparkline=false"; fetch(endpoint, { method: "GET", @@ -158,7 +163,12 @@ export default function Dashboard({ navigation }) { return response.json(); }) .then(async (global) => { - let marketCap = (global.data.total_market_cap.usd).toFixed(0); + let currency = await AsyncStorage.getItem("currency"); + if(empty(currency)) { + currency = "usd"; + } + + let marketCap = (global.data.total_market_cap[currency]).toFixed(0); let marketChange = (global.data.market_cap_change_percentage_24h_usd).toFixed(1); if(screenWidth < 380) { @@ -166,7 +176,7 @@ export default function Dashboard({ navigation }) { } if(navigation.isFocused()) { - setMarketCap("$" + separateThousands(marketCap)); + setMarketCap(currencies[currency] + separateThousands(marketCap)); setMarketChange("(" + marketChange + "%)"); } }).catch(error => { @@ -242,11 +252,16 @@ export default function Dashboard({ navigation }) { } function parseHoldings(coins) { - return new Promise((resolve, reject) => { + return new Promise(async (resolve, reject) => { try { + let currency = await AsyncStorage.getItem("currency"); + if(empty(currency)) { + currency = "usd"; + } + let list = Object.keys(coins).join("%2C"); - let endpoint = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=" + list + "&order=market_cap_desc&per_page=250&page=1&sparkline=false"; + let endpoint = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=" + currency + "&ids=" + list + "&order=market_cap_desc&per_page=250&page=1&sparkline=false"; fetch(endpoint, { method: "GET", @@ -289,10 +304,15 @@ export default function Dashboard({ navigation }) { }); if(holdingsValue > 0 && navigation.isFocused()) { + let currency = await AsyncStorage.getItem("currency"); + if(empty(currency)) { + currency = "usd"; + } + if(screenWidth > 380) { - setHoldingsValue("$" + separateThousands(holdingsValue.toFixed(2))); + setHoldingsValue(currencies[currency] + separateThousands(holdingsValue.toFixed(2))); } else { - setHoldingsValue("$" + abbreviateNumber(holdingsValue, 2)); + setHoldingsValue(currencies[currency] + abbreviateNumber(holdingsValue, 2)); } } @@ -354,12 +374,6 @@ const styles = StyleSheet.create({ headerCoin: { width:100, marginLeft:15, - }, - headerPrice: { - - }, - headerAmount: { - }, cellText: { color:globalColors["Light"].mainContrastLight @@ -372,12 +386,6 @@ const styles = StyleSheet.create({ }, cellSymbol: { width:74 - }, - cellPrice: { - - }, - cellAmount: { - }, cellImage: { width:30, diff --git a/mobile/screens/Holdings.js b/mobile/screens/Holdings.js index 7d11ec6..081203d 100644 --- a/mobile/screens/Holdings.js +++ b/mobile/screens/Holdings.js @@ -6,7 +6,7 @@ import changeNavigationBarColor from "react-native-navigation-bar-color"; import LinearGradient from "react-native-linear-gradient"; import { globalColors, globalStyles } from "../styles/global"; import { ThemeContext } from "../utils/theme"; -import { empty, separateThousands, abbreviateNumber, epoch, capitalizeFirstLetter, wait } from "../utils/utils"; +import { empty, separateThousands, abbreviateNumber, epoch, capitalizeFirstLetter, wait, currencies } from "../utils/utils"; const screenWidth = Dimensions.get("screen").width; const screenHeight = Dimensions.get("screen").height; @@ -284,11 +284,16 @@ export default function Holdings({ navigation }) { } function parseHoldings(coins) { - return new Promise((resolve, reject) => { + return new Promise(async (resolve, reject) => { try { + let currency = await AsyncStorage.getItem("currency"); + if(empty(currency)) { + currency = "usd"; + } + let list = Object.keys(coins).join("%2C"); - let endpoint = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=" + list + "&order=market_cap_desc&per_page=250&page=1&sparkline=false"; + let endpoint = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=" + currency + "&ids=" + list + "&order=market_cap_desc&per_page=250&page=1&sparkline=false"; fetch(endpoint, { method: "GET", @@ -331,10 +336,15 @@ export default function Holdings({ navigation }) { }); if(holdingsValue > 0 && navigation.isFocused()) { + let currency = await AsyncStorage.getItem("currency"); + if(empty(currency)) { + currency = "usd"; + } + if(screenWidth > 380) { - setHoldingsValue("$" + separateThousands(holdingsValue.toFixed(2))); + setHoldingsValue(currencies[currency] + separateThousands(holdingsValue.toFixed(2))); } else { - setHoldingsValue("$" + abbreviateNumber(holdingsValue, 2)); + setHoldingsValue(currencies[currency] + abbreviateNumber(holdingsValue, 2)); } } diff --git a/mobile/screens/Market.js b/mobile/screens/Market.js index 1de925d..029c1d0 100644 --- a/mobile/screens/Market.js +++ b/mobile/screens/Market.js @@ -6,7 +6,7 @@ import AsyncStorage from "@react-native-async-storage/async-storage"; import LinearGradient from "react-native-linear-gradient"; import { globalColors, globalStyles } from "../styles/global"; import { ThemeContext } from "../utils/theme"; -import { empty, separateThousands, abbreviateNumber, epoch, wait } from "../utils/utils"; +import { empty, separateThousands, abbreviateNumber, epoch, wait, currencies } from "../utils/utils"; const screenWidth = Dimensions.get("screen").width; const screenHeight = Dimensions.get("screen").height; @@ -73,9 +73,14 @@ export default function Market({ navigation }) { ); async function getMarket() { + let currency = await AsyncStorage.getItem("currency"); + if(empty(currency)) { + currency = "usd"; + } + let theme = empty(await AsyncStorage.getItem("theme")) ? "Light" : await AsyncStorage.getItem("theme"); - let endpoint = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=200&page=1&sparkline=false"; + let endpoint = "https://api.coingecko.com/api/v3/coins/markets?vs_currency=" + currency + "&order=market_cap_desc&per_page=200&page=1&sparkline=false"; fetch(endpoint, { method: "GET", @@ -149,9 +154,14 @@ export default function Market({ navigation }) { return response.json(); }) .then(async (global) => { - let marketCap = (global.data.total_market_cap.usd).toFixed(0); + let currency = await AsyncStorage.getItem("currency"); + if(empty(currency)) { + currency = "usd"; + } + + let marketCap = (global.data.total_market_cap[currency]).toFixed(0); let marketChange = (global.data.market_cap_change_percentage_24h_usd).toFixed(1); - let volume = (global.data.total_volume.usd).toFixed(0); + let volume = (global.data.total_volume[currency]).toFixed(0); if(screenWidth < 380) { marketCap = abbreviateNumber(marketCap, 3); @@ -159,9 +169,9 @@ export default function Market({ navigation }) { } if(navigation.isFocused()) { - setMarketCap("$" + separateThousands(marketCap)); + setMarketCap(currencies[currency] + separateThousands(marketCap)); setMarketChange("(" + marketChange + "%)"); - setVolume("$" + separateThousands(volume) + " (24h)"); + setVolume(currencies[currency] + separateThousands(volume) + " (24h)"); } }).catch(error => { console.log(error); diff --git a/mobile/screens/Settings.js b/mobile/screens/Settings.js index 855550d..6253e6f 100644 --- a/mobile/screens/Settings.js +++ b/mobile/screens/Settings.js @@ -13,6 +13,8 @@ const screenHeight = Dimensions.get("screen").height; export default function Settings({ navigation, route }) { const { theme, toggleTheme } = React.useContext(ThemeContext); + const [currency, setCurrency] = React.useState(); + const [defaultPage, setDefaultPage] = React.useState(); const [accountMessage, setAccountMessage] = React.useState(); @@ -50,6 +52,20 @@ export default function Settings({ navigation, route }) { + + Fiat Currency + + { changeCurrency("usd")}}> + USD + + { changeCurrency("gbp")}}> + GBP + + { changeCurrency("eur")}}> + EUR + + + Account { !empty(accountMessage) && @@ -144,7 +160,24 @@ export default function Settings({ navigation, route }) { } } + async function changeCurrency(fiatCurrency) { + let validCurrencies = ["usd", "gbp", "eur"]; + if(empty(fiatCurrency) || !validCurrencies.includes(fiatCurrency)) { + setCurrency("usd"); + await AsyncStorage.setItem("currency", "usd"); + } else { + setCurrency(fiatCurrency); + await AsyncStorage.setItem("currency", fiatCurrency); + } + } + async function getSettings() { + let currency = await AsyncStorage.getItem("currency"); + if(empty(currency)) { + currency = "usd"; + } + setCurrency(currency); + let validPages = ["Dashboard", "Market", "Holdings", "Settings"]; let page = await AsyncStorage.getItem("defaultPage"); if(empty(page) || !validPages.includes(page)) { diff --git a/mobile/utils/utils.js b/mobile/utils/utils.js index a50b97f..e36a8fb 100644 --- a/mobile/utils/utils.js +++ b/mobile/utils/utils.js @@ -53,4 +53,10 @@ export function capitalizeFirstLetter(string) { export function wait(timeout) { return new Promise(resolve => setTimeout(resolve, timeout)); -} \ No newline at end of file +} + +export const currencies = { + usd: "$", + gbp: "£", + eur: "€" +}; \ No newline at end of file