initial hookup of currency rates

6 files changed, 37 insertions, 10 deletions

diff --git a/src/components/About.svelte b/src/components/About.svelte
index 909cbcf5..817d9026 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -66,7 +66,7 @@
 <div class="mt-20">
 	<h3 class="text-5xl font-medium mb-5 text-center">{$_('about.locations.header')}</h3>
 	<p class="text-secondary text-xl w-full md:w-10/12 lg:w-2/3 2xl:w-[800px] mx-auto mb-10">
-    {@html $_('about.locations.description')}
+		{@html $_('about.locations.description')}
 	</p>
 	<LocationsMap />
 </div>
diff --git a/src/lib/store.js b/src/lib/store.js
index c0b0df97..8469dab7 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -28,6 +28,9 @@ const persistLocal = (key, defaultValue) => {
 };
 
 export const rate = writable();
+export const rates = writable();
+export const selectedRate = writable();
+export const conversion = writable();
 export const user = writable();
 export const invoiceAmount = writable();
 export const invoiceAmountFiat = writable();
diff --git a/src/locales/en.json b/src/locales/en.json
index 1e3dcbcd..e4fb9f39 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -23,10 +23,10 @@
 				"Husband, father, brother, son"
 			]
 		},
-    "locations": {
-      "header": "Locations",
-      "description": "These are businesses that are accepting bitcoin using CoinOS point of sale. If you are using our application, please <a href=\"mailto:[email protected]\" class=\"underline underline-offset-4\">let us know!</a>"
-    }
+		"locations": {
+			"header": "Locations",
+			"description": "These are businesses that are accepting bitcoin using CoinOS point of sale. If you are using our application, please <a href=\"mailto:[email protected]\" class=\"underline underline-offset-4\">let us know!</a>"
+		}
 	},
 	"error": {
 		"header": "Error",
diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
index e05380a7..551f1686 100644
--- a/src/routes/+layout.server.js
+++ b/src/routes/+layout.server.js
@@ -5,6 +5,7 @@ import { get } from '$lib/utils';
 export async function load({ request, setHeaders, url, params }) {
 	let { token } = cookie.parse(request.headers.get('cookie') || '');
 	let user;
+	let rates;
 
 	if (token) {
 		user = await get('/me', { accept: 'application/json', authorization: `Bearer ${token}` });
@@ -13,5 +14,7 @@ export async function load({ request, setHeaders, url, params }) {
 		}
 	}
 
-	return { user, token };
+	rates = await get('/rates');
+
+	return { user, token, rates };
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 12db17c3..4cf819fc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
 	import '../app.css';
 	import { onMount } from 'svelte';
 	import { connect } from '$lib/socket';
-	import { user, token } from '$lib/store';
+	import { user, token, rate, rates, selectedRate, conversion } from '$lib/store';
 	import { page } from '$app/stores';
 	import { browser } from '$app/env';
 	import { goto } from '$app/navigation';
@@ -17,6 +17,10 @@
 
 	export let data;
 
+	$rates = data.rates;
+	$: $conversion = data.rates[data.user.currency] / $rate;
+	$: $selectedRate = $rate * $conversion;
+
 	let ready = false;
 
 	onMount(() => {
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index 9644c3ac..5ddbfbc4 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -1,11 +1,13 @@
 <script>
 	import { AppHeader, Icon, Toggle, LocaleSelector } from '$comp';
-	import { user, colorTheme } from '$lib/store';
+	import { user, colorTheme, rates, token } from '$lib/store';
 	import { _ } from 'svelte-i18n';
+	import { success, failure, post } from '$lib/utils';
 
 	let setting = 'account';
 	let password;
 	let revealPassword = false;
+	const fiats = Object.keys($rates);
 
 	const colorThemes = [
 		{ theme: 1, color1: 'from-[#F5F7FA]', color2: 'to-[#C3CFE2]' },
@@ -22,6 +24,19 @@
 		selectedTheme = colors.theme;
 		$colorTheme = colors.color1 + ' ' + colors.color2;
 	};
+
+	const updateFiat = async (e) => {
+		try {
+			await post(
+				'/user',
+				{ currency: e.target.value },
+				{ authorization: `Bearer ${$token}` }
+			);
+			success('Local currency updated!');
+		} catch (e) {
+			failure(e.message);
+		}
+	};
 </script>
 
 {#if $user}
@@ -126,8 +141,10 @@
 				<label for="currency" class="font-bold block mb-1"
 					>{$_('user.settings.localCurrency')}</label
 				>
-				<select name="currency" class="block py-3 w-full">
-					<option value="USD">USD</option>
+				<select name="currency" on:change={updateFiat} class="block py-3 w-full">
+					{#each fiats as fiat}
+						<option value={fiat} selected={$user.currency === fiat}>{fiat}</option>
+					{/each}
 				</select>
 			</div>