Skip to content

Commit

Permalink
The fiat currency on the mobile app can now be changed.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Xtrendence
Xtrendence committed Mar 31, 2021
1 parent b930d0a commit 1e9e0a9
Show file tree
Hide file tree
Showing 5 changed files with 99 additions and 32 deletions.
48 changes: 28 additions & 20 deletions mobile/screens/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -158,15 +163,20 @@ 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) {
marketCap = abbreviateNumber(marketCap, 3);
}

if(navigation.isFocused()) {
setMarketCap("$" + separateThousands(marketCap));
setMarketCap(currencies[currency] + separateThousands(marketCap));
setMarketChange("(" + marketChange + "%)");
}
}).catch(error => {
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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));
}
}

Expand Down Expand Up @@ -354,12 +374,6 @@ const styles = StyleSheet.create({
headerCoin: {
width:100,
marginLeft:15,
},
headerPrice: {

},
headerAmount: {

},
cellText: {
color:globalColors["Light"].mainContrastLight
Expand All @@ -372,12 +386,6 @@ const styles = StyleSheet.create({
},
cellSymbol: {
width:74
},
cellPrice: {

},
cellAmount: {

},
cellImage: {
width:30,
Expand Down
20 changes: 15 additions & 5 deletions mobile/screens/Holdings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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));
}
}

Expand Down
22 changes: 16 additions & 6 deletions mobile/screens/Market.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -149,19 +154,24 @@ 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);
volume = abbreviateNumber(volume, 0);
}

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);
Expand Down
33 changes: 33 additions & 0 deletions mobile/screens/Settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -50,6 +52,20 @@ export default function Settings({ navigation, route }) {
</TouchableOpacity>
</View>
</View>
<View style={[styles.section, styles[`section${theme}`]]}>
<Text style={[styles.header, styles[`header${theme}`]]}>Fiat Currency</Text>
<View style={styles.container}>
<TouchableOpacity style={[styles.inlineButton, styles[`inlineButton${theme}`], (currency === "usd") ? styles.inlineButtonActive : null]} onPress={() => { changeCurrency("usd")}}>
<Text style={[styles.buttonText, styles[`buttonText${theme}`], (currency === "usd") ? styles.buttonTextActive : null]}>USD</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.inlineButton, styles[`inlineButton${theme}`], (currency === "gbp") ? styles.inlineButtonActive : null]} onPress={() => { changeCurrency("gbp")}}>
<Text style={[styles.buttonText, styles[`buttonText${theme}`], (currency === "gbp") ? styles.buttonTextActive : null]}>GBP</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.inlineButton, styles[`inlineButton${theme}`], (currency === "eur") ? styles.inlineButtonActive : null]} onPress={() => { changeCurrency("eur")}}>
<Text style={[styles.buttonText, styles[`buttonText${theme}`], (currency === "eur") ? styles.buttonTextActive : null]}>EUR</Text>
</TouchableOpacity>
</View>
</View>
<View style={[styles.section, styles[`section${theme}`]]}>
<Text style={[styles.header, styles[`header${theme}`]]}>Account</Text>
{ !empty(accountMessage) &&
Expand Down Expand Up @@ -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)) {
Expand Down
8 changes: 7 additions & 1 deletion mobile/utils/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,4 +53,10 @@ export function capitalizeFirstLetter(string) {

export function wait(timeout) {
return new Promise(resolve => setTimeout(resolve, timeout));
}
}

export const currencies = {
usd: "$",
gbp: "£",
eur: "€"
};

0 comments on commit 1e9e0a9

Please sign in to comment.