initial hookup of currency rates

3 files changed, 29 insertions, 5 deletions

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>