From 6bbc71ae39d06e9c6dc23dce9cea4c91462ab2ac Mon Sep 17 00:00:00 2001
From: wireless_purple <dev@haveno.markets>
Date: Sat, 12 Oct 2024 20:27:22 +0000
Subject: [PATCH] group offers by price

with a checkbox that allows showing each individual order
---
 bun.lockb                                  | Bin 43578 -> 53671 bytes
 package.json                               |  12 +--
 src/routes/+layout.svelte                  |   5 +-
 src/routes/+page.svelte                    |   8 +-
 src/routes/market/[market]/+page.server.js |   6 ++
 src/routes/market/[market]/+page.svelte    |  78 ++++++-----------
 src/routes/market/[market]/Offers.svelte   |  95 +++++++++++++++++++++
 src/routes/markets/+page.svelte            |   4 +-
 8 files changed, 146 insertions(+), 62 deletions(-)
 create mode 100644 src/routes/market/[market]/Offers.svelte

diff --git a/bun.lockb b/bun.lockb
index d5a6edb67fa5f156ebff3057b93851a91eec6d77..9a1c9e05489fc066aab369dca8b2bb3f5f73ee25 100755
GIT binary patch
delta 8376
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
G^8W=>;HrlJ

delta 2580
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
T+g<&fvb(2?P2p<l4)FaKNmEe9

diff --git a/package.json b/package.json
index 21fbcb6..778874f 100644
--- a/package.json
+++ b/package.json
@@ -11,12 +11,12 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.3",
-		"@sveltejs/kit": "^2.6.1",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.7",
-		"prettier": "^3.3.2",
-		"prettier-plugin-svelte": "^3.2.5",
-		"sass": "^1.79.4",
-		"svelte": "^5.0.0-next.262",
+		"@sveltejs/kit": "^2.7.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.8",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.7",
+		"sass": "^1.79.5",
+		"svelte": "^5.0.0-next.264",
 		"svelte-adapter-bun": "^0.5.2",
 		"svelte-preprocess": "^6.0.3",
 		"vite": "^5.4.8"
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0a6d6d8..02085e7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -67,6 +67,9 @@ Object.groupBy ||= (values, keyFinder) => {
 </div>
 
 <style lang="scss" global>
+	html {
+		font-family: sans-serif;
+	}
 	.app {
 		display: flex;
 		width: 100%;
@@ -127,7 +130,7 @@ Object.groupBy ||= (values, keyFinder) => {
 			td:first-child {
 				text-align: left;
 			}
-			tbody tr:nth-child(2n) {
+			tbody tr:nth-child(2n + 1) {
 				background-color: #0002;
 			}
 			tfoot {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 424ca3a..cb1c82b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -190,12 +190,14 @@ let w = $state();
 	<div class="card col">
 		<h4>Markets</h4>
 		<table>
-			<tbody>
+			<thead>
 				<tr>
 					<th>Currency</th>
 					<th>Price</th>
 					<th>Trades</th>
 				</tr>
+			</thead>
+			<tbody>
 				{#each Object.values(Object.groupBy(data.trades, ({ currency }) => currency))
 					.toSorted((a, b) => b.length - a.length || (b[0].currency < a[0].currency ? 1 : -1))
 					.slice(0, 16) as market}
@@ -223,12 +225,14 @@ let w = $state();
 	<div class="card col">
 		<h4>Trades</h4>
 		<table>
-			<tbody>
+			<thead>
 				<tr>
 					<th>Date</th>
 					<th>Amount (XMR)</th>
 					<th>Amount</th>
 				</tr>
+			</thead>
+			<tbody>
 				{#each data.trades.slice(0, 16) as trade}
 					<tr>
 						<td
diff --git a/src/routes/market/[market]/+page.server.js b/src/routes/market/[market]/+page.server.js
index 5cc064a..4458411 100644
--- a/src/routes/market/[market]/+page.server.js
+++ b/src/routes/market/[market]/+page.server.js
@@ -8,6 +8,12 @@ export async function load({ params }) {
 			get(offers)[params.market],
 			({ direction }) => direction,
 		);
+		groupedOffers.BUY = groupedOffers.BUY
+			? Object.groupBy(groupedOffers.BUY, ({ price }) => price)
+			: [];
+		groupedOffers.SELL = groupedOffers.SELL
+			? Object.groupBy(groupedOffers.SELL, ({ price }) => price)
+			: [];
 	}
 	return {
 		trades: get(trades).filter(({ currency }) => currency === params.market),
diff --git a/src/routes/market/[market]/+page.svelte b/src/routes/market/[market]/+page.svelte
index 6222548..ec2e6d1 100644
--- a/src/routes/market/[market]/+page.svelte
+++ b/src/routes/market/[market]/+page.svelte
@@ -9,6 +9,7 @@ import {
 	isMoneroQuote,
 } from "$lib/formatPrice";
 import { CandlestickSeries, Chart, TimeScale } from "svelte-lightweight-charts";
+import Offers from "./Offers.svelte";
 
 const market = $page.params.market;
 let { data } = $props();
@@ -66,6 +67,8 @@ const gridLayout = {
 
 const marketPair = isMoneroQuote(market) ? `${market}/XMR` : `XMR/${market}`;
 const BUY_SELL = isMoneroQuote(market) ? ["SELL", "BUY"] : ["BUY", "SELL"];
+
+let showOrders = $state(false);
 </script>
 
 <svelte:head>
@@ -96,70 +99,41 @@ const BUY_SELL = isMoneroQuote(market) ? ["SELL", "BUY"] : ["BUY", "SELL"];
 	</div>
 </div>
 <div class="row">
-	<div class="col card">
-		<h4>Buy Offers</h4>
-		<table>
-			<tbody>
-				<tr>
-					<th>Price</th>
-					<th>Amount (XMR)</th>
-					<th>Amount ({market})</th>
-				</tr>
-				{#each data.offers[BUY_SELL[0]]?.toSorted((a, b) => b.price - a.price) || [] as offer}
-					<tr title={offer.paymentMethod}>
-						<td>{formatPrice(offer.price, market, false, false)}</td>
-						<td>{formatPrice(offer.amount, "XMR", false, false)}</td>
-						<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>
-					<th>Amount ({market})</th>
-				</tr>
-				{#each data.offers[BUY_SELL[1]]?.toSorted((a, b) => a.price - b.price) || [] as offer}
-					<tr title={offer.paymentMethod}>
-						<td>{formatPrice(offer.price, market, false, false)}</td>
-						<td>{formatPrice(offer.amount, "XMR", false, false)}</td>
-						<td
-							>{formatPrice(
-								offer.primaryMarketAmount,
-								market,
-								false,
-								false,
-							)}</td
-						>
-					</tr>
-				{/each}
-			</tbody>
-		</table>
+	<Offers
+		offers={Object.values(data.offers[BUY_SELL[0]])?.toSorted(
+			(a, b) => b[0].price - a[0].price,
+		)}
+		{market}
+		title="Buy Offers"
+		{showOrders}
+	/>
+	<Offers
+		offers={Object.values(data.offers[BUY_SELL[1]])?.toSorted(
+			(a, b) => a[0].price - b[0].price,
+		)}
+		{market}
+		title="Sell Offers"
+		{showOrders}
+	/>
+</div>
+<div class="row">
+	<div class="col">
+		<input type="checkbox" bind:checked={showOrders} />Show Individual Offers?
 	</div>
 </div>
 <div class="row">
 	<div class="col card">
 		<h4>Latest Trades</h4>
 		<table>
-			<tbody>
+			<thead>
 				<tr>
 					<th>Date</th>
 					<th>Price</th>
 					<th>Amount (XMR)</th>
 					<th>Amount ({market})</th>
 				</tr>
+			</thead>
+			<tbody>
 				{#each data.trades as trade}
 					<tr>
 						<td
diff --git a/src/routes/market/[market]/Offers.svelte b/src/routes/market/[market]/Offers.svelte
new file mode 100644
index 0000000..e57a859
--- /dev/null
+++ b/src/routes/market/[market]/Offers.svelte
@@ -0,0 +1,95 @@
+<svelte:options runes={true} />
+
+<script>
+import { formatPrice } from "$lib/formatPrice";
+
+let { offers = [], market, title, showOrders } = $props();
+offers = Object.values(offers);
+</script>
+
+<div class="col card" style="--text-align: {showOrders ? 'left' : 'right'}">
+	<h4>{title}</h4>
+	<table>
+		<thead>
+			<tr>
+				<th>Price</th>
+				{#if showOrders}<th>Payment Method</th>{/if}
+				<th>Amount (XMR)</th>
+				<th>Amount ({market})</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#if !showOrders}
+				{#each offers as offer}
+					<tr>
+						<td>{formatPrice(offer[0].price, market, false, false)}</td>
+						<td
+							>{formatPrice(
+								offer.reduce((a, b) => a + b.amount, 0),
+								"XMR",
+								false,
+								false,
+							)}</td
+						>
+						<td
+							>{formatPrice(
+								offer.reduce((a, b) => a + b.primaryMarketAmount, 0),
+								market,
+								false,
+								false,
+							)}</td
+						>
+					</tr>
+				{/each}
+			{:else}
+				{#each offers.flat() as offer}
+					<tr>
+						<td>{formatPrice(offer.price, market, false, false)}</td>
+						{#if showOrders}<td>{offer.paymentMethod}</td>{/if}
+						<td>{formatPrice(offer.amount, "XMR", false, false)}</td>
+						<td
+							>{formatPrice(
+								offer.primaryMarketAmount,
+								market,
+								false,
+								false,
+							)}</td
+						>
+					</tr>
+				{/each}
+			{/if}
+		</tbody>
+		<tfoot>
+			<tr>
+				<td>{offers.flat().reduce((a, b) => a + 1, 0)} Offers</td>
+
+				{#if showOrders}<td></td>{/if}
+				<td
+					>{formatPrice(
+						offers.flat().reduce((a, b) => a + b.amount, 0),
+						"XMR",
+						false,
+						false,
+					) || ""}</td
+				>
+				<td
+					>{formatPrice(
+						offers.flat().reduce((a, b) => a + b.primaryMarketAmount, 0),
+						market,
+						false,
+						false,
+					) || ""}</td
+				>
+			</tr>
+		</tfoot>
+	</table>
+</div>
+
+<style>
+	td,
+	th {
+		&:nth-child(2) {
+			text-align: var(--text-align);
+		}
+	}
+</style>
diff --git a/src/routes/markets/+page.svelte b/src/routes/markets/+page.svelte
index 946e9b4..4abb985 100644
--- a/src/routes/markets/+page.svelte
+++ b/src/routes/markets/+page.svelte
@@ -124,7 +124,7 @@ let w = $state();
 	<div class="card col">
 		<h4>Markets</h4>
 		<table>
-			<tbody>
+			<thead>
 				<tr>
 					<th>Currency</th>
 					<th>Price</th>
@@ -132,6 +132,8 @@ let w = $state();
 					<th>Volume (XMR)</th>
 					<th>Trades</th>
 				</tr>
+			</thead>
+			<tbody>
 				{#each Object.values(markets).toSorted((a, b) => (b.trades?.length || 0) - (a.trades?.length || 0) || (b.offers?.length || 0) - (a.offers?.length || 0) || (b.code < a.code ? 1 : -1)) as market}
 					<tr>
 						<td