optimizations

package.json

@@ -14,7 +14,7 @@
 		"@sveltejs/kit": "^2.5.20",
 		"@sveltejs/vite-plugin-svelte": "^3.1.1",
 		"sass": "^1.77.8",
-		"svelte": "^4.2.18",
+		"svelte": "^5.0.0-next.210",
 		"svelte-adapter-bun": "^0.5.2",
 		"svelte-preprocess": "^6.0.2",
 		"vite": "^5.3.5"

src/lib/server/context.js

@@ -1,10 +1,15 @@
 import { watch } from "fs";
-import { writable } from "svelte/store";
+import { derived, writable } from "svelte/store";
 
 const offers = writable([]);
 const trades = writable([]);
 const crypto = writable([]);
 const fiat = writable([]);
+const liquidity = derived(offers, ($offers) =>
+	Object.values($offers)
+		.flat()
+		.reduce((a, b) => a + Number.parseInt(b.amount), 0),
+);
 
 const formatTrades = (e) => {
 	return e.map((e) => {
@@ -20,11 +25,26 @@ const formatTrades = (e) => {
 	});
 };
 const formatOffers = (e) => {
-	return Object.groupBy(e, ({ currencyCode }) => currencyCode);
+	return Object.groupBy(
+		e.map((e) => {
+			return {
+				direction: e.direction,
+				currencyCode: e.currencyCode,
+				amount: e.amount,
+				price: e.price,
+				paymentMethod: e.paymentMethod,
+				primaryMarketAmount: e.primaryMarketAmount,
+			};
+		}),
+		({ currencyCode }) => currencyCode,
+	);
 };
 const formatCrypto = (e) => {
-	e[e.findIndex((e) => e.code === "XMR")].precision = 12;
+	e.push({
-	e[e.findIndex((e) => e.code === "XMR")].sign = "ɱ";
+		precision: 12,
+		code: "XMR",
+		sign: "ɱ",
+	});
 	return e;
 };
 const formatFiat = (e) => {
@@ -47,16 +67,16 @@ Bun.file(`${import.meta.env.VITE_DB_PATH}trade_statistics.json`)
 	.then((j) => {
 		trades.set(formatTrades(j));
 	});
-Bun.file(`${import.meta.env.VITE_DB_PATH}crypto_currency_list.json`)
+Bun.file(`${import.meta.env.VITE_DB_PATH}active_traditional_currency_list.json`)
-	.json()
-	.then((j) => {
-		crypto.set(formatCrypto(j));
-	});
-Bun.file(`${import.meta.env.VITE_DB_PATH}/traditional_currency_list.json`)
 	.json()
 	.then((j) => {
 		fiat.set(formatFiat(j));
 	});
+Bun.file(`${import.meta.env.VITE_DB_PATH}active_crypto_currency_list.json`)
+	.json()
+	.then((j) => {
+		crypto.set(formatCrypto(j));
+	});
 
 const watcher = watch(import.meta.env.VITE_DB_PATH, async (_, filename) => {
 	const file = Bun.file(import.meta.env.VITE_DB_PATH + filename);
@@ -84,4 +104,4 @@ process.on("SIGINT", () => {
 	process.exit(0);
 });
 
-export { offers, trades, crypto, fiat };
+export { offers, trades, crypto, fiat, liquidity };

src/routes/+layout.svelte

@@ -37,7 +37,7 @@ Object.groupBy ||= (values, keyFinder) => {
 			<a href="http://haveno-markets.i2p">I2P</a>
 			<a href="http://okoeicsihmjkqcqaiqow3arcrzm5ascwhpxq34incxg6a5z4tjza.b32.i2p">(b32)</a>
 		</span>
-        <span>
+		<span style="display:flex;gap:.2em;">
 			Data from:
 			<a href="https://haveno-reto.com" style="display:inline-flex;gap:.2em;align-items:center;">
 				<img src="/haveno-reto_logo.svg" alt="" style="height:1em;width:1em;"/>

src/routes/+page.server.js

@@ -1,6 +1,6 @@
-import { offers, trades } from "$lib/server/context";
+import { liquidity, trades } from "$lib/server/context";
 import { get } from "svelte/store";
 
 export function load() {
-	return { trades: get(trades), offers: get(offers) };
+	return { trades: get(trades), liquidity: get(liquidity) };
 }

src/routes/+page.svelte

@@ -111,9 +111,6 @@ const gridLayout = {
 	},
 };
 let w;
-const liquidity = Object.values(data.offers)
-	.flat()
-	.reduce((a, b) => a + Number.parseInt(b.amount), 0);
 </script>
 
 <svelte:head>
@@ -127,7 +124,7 @@ const liquidity = Object.values(data.offers)
 	</div>
 	<div class="col card">
 		<h4>Liquidity</h4>
-        <span class="price">{formatPrice(liquidity, "XMR", true, false)}</span>
+		<span class="price">{formatPrice(data.liquidity, "XMR", true, false)}</span>
 	</div>
 </div>
 
@@ -166,6 +163,7 @@ const liquidity = Object.values(data.offers)
 <div class="card col">
 	<h4>Markets</h4>
 	<table>
+		<tbody>
 			<tr>
 				<th>Currency</th>
 				<th>Price</th>
@@ -178,12 +176,14 @@ const liquidity = Object.values(data.offers)
 				<td>{market.length}</td>
 			</tr>
 			{/each}
+		</tbody>
 	</table>
 	<h4><a href="markets">View more »</a></h4>
 </div>
 <div class="card col">
 	<h4>Trades</h4>
 <table>
+	<tbody>
 		<tr>
 			<th>Date</th>
 			<th>Amount (XMR)</th>
@@ -196,6 +196,7 @@ const liquidity = Object.values(data.offers)
 			<td>{formatPrice(trade.amount, trade.currency, false, false)} <span class="trade-currency">{trade.currency}</span></td>
 		</tr>
 		{/each}
+	</tbody>
 </table>
 <h4><a href="trades">View more »</a></h4>
 </div>

src/routes/market/[market]/+page.svelte

@@ -84,6 +84,7 @@ const BUY_SELL = isMoneroQuote(market) ? ["SELL", "BUY"] : ["BUY", "SELL"];
 <div class="col card">
 <h4>Buy Offers</h4>
 <table>
+	<tbody>
 		<tr>
 			<th>Price</th>
 			<th>Amount (XMR)</th>
@@ -96,11 +97,13 @@ const BUY_SELL = isMoneroQuote(market) ? ["SELL", "BUY"] : ["BUY", "SELL"];
 			<td>{formatPrice(offer.primaryMarketAmount, market, false, false)}</td>
 		</tr>
 		{/each}
+	</tbody>
 </table>
 </div>
 <div class="col card">
 <h4>Sell Offers</h4>
 <table>
+	<tbody>
 		<tr>
 			<th>Price</th>
 			<th>Amount (XMR)</th>
@@ -113,6 +116,7 @@ const BUY_SELL = isMoneroQuote(market) ? ["SELL", "BUY"] : ["BUY", "SELL"];
 			<td>{formatPrice(offer.primaryMarketAmount, market, false, false)}</td>
 		</tr>
 		{/each}
+	</tbody>
 </table>
 </div>
 </div>
@@ -120,6 +124,7 @@ const BUY_SELL = isMoneroQuote(market) ? ["SELL", "BUY"] : ["BUY", "SELL"];
 	<div class="col card">
 		<h4>Last Trades</h4>
 		<table>
+			<tbody>
 				<tr>
 					<th>Date</th>
 					<th>Price</th>
@@ -134,6 +139,7 @@ const BUY_SELL = isMoneroQuote(market) ? ["SELL", "BUY"] : ["BUY", "SELL"];
 						<td>{formatPrice(trade.amount, trade.currency, false, false)}</td>
 					</tr>
 				{/each}
+			</tbody>
 		</table>
 	</div>
 </div>

svelte.config.js

@@ -1,12 +1,12 @@
 import adapter from "svelte-adapter-bun";
-import preprocess from "svelte-preprocess";
+import { sveltePreprocess } from "svelte-preprocess";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	kit: {
 		adapter: adapter(),
 	},
-	preprocess: [preprocess()],
+	preprocess: sveltePreprocess(),
 };
 
 export default config;