add prettier

biome doesn't support formatting html and css in svelte yet, so we use prettier as a workaround for now
2024-12-22 00:10:26 -07:00 · 2024-10-12 16:01:45 +00:00 · 2024-10-12 16:01:45 +00:00 · a921561083
commit a921561083
parent 64bcead0b2
9 changed files with 390 additions and 220 deletions
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": false,
+	"trailingComma": "all",
+	"printWidth": 80,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}
--- a/README.md
+++ b/README.md
@ -1,5 +1,7 @@
-# haveno-markets
+# Haveno Markets
+
 ## Requirements
-* Haveno
-* ./haveno-statsnode --dumpStatistics=true
-* bun
+
+- Haveno
+- ./haveno-statsnode --dumpStatistics=true
+- bun
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@ -6,13 +6,15 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
-		"fix": "biome check --write *",
+		"fix": "prettier --write . && biome check --write *",
 		"lint": "biome check *"
 	},
 	"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",
 		"svelte-adapter-bun": "^0.5.2",
--- a/src/app.html
+++ b/src/app.html
@ -4,7 +4,7 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<title>Haveno Markets</title>
-		<link rel="icon" href="data:;base64,=">
+		<link rel="icon" href="data:;base64,=" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -17,12 +17,12 @@ Object.groupBy ||= (values, keyFinder) => {
 <div class="col app">
 	<div class="row header" style="align-content:center;">
 		<span>
-			<img src="/haveno_logo.png" alt="" style="height:1em;"/>
+			<img src="/haveno_logo.png" alt="" style="height:1em;" />
 			<a href="https://haveno.exchange">haveno.exchange</a>
 		</span>
 		<a href="/">haveno.markets</a>
 		<span>
-			<img src="/monero_logo.png" alt="" style="height:1em;"/>
+			<img src="/monero_logo.png" alt="" style="height:1em;" />
 			<a href="https://xmrchain.net">xmrchain.net</a>
 		</span>
 	</div>
@ -33,83 +33,99 @@ Object.groupBy ||= (values, keyFinder) => {
 		<span>
 			Links:
 			<a href="https://haveno.markets">Clearnet</a> |
-			<a href="http://lsj5o4i7iiogz6q4rstiv75nk7kots2f2nhuga75y7s23leskz2uh6id.onion">Tor</a> |
+			<a
+				href="http://lsj5o4i7iiogz6q4rstiv75nk7kots2f2nhuga75y7s23leskz2uh6id.onion"
+				>Tor</a
+			>
+			|
 			<a href="http://haveno-markets.i2p">I2P</a>
-			<a href="http://okoeicsihmjkqcqaiqow3arcrzm5ascwhpxq34incxg6a5z4tjza.b32.i2p">(b32)</a>
+			<a
+				href="http://okoeicsihmjkqcqaiqow3arcrzm5ascwhpxq34incxg6a5z4tjza.b32.i2p"
+				>(b32)</a
+			>
 		</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;"/>
+			<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;" />
 				haveno-reto
 			</a>
 		</span>
 		<span>
-			Donations: 
-			<a style="word-break:break-all;" href="monero:84LnuW3YpCQirNMN6y6Px1E3DfwnqwXVRARi9eHjzeSVFJqEQmJCxkP5WpkysbcktqUNhXxQLowhJGSknNjJWZNQ7FKp5bu">
+			Donations:
+			<a
+				style="word-break:break-all;"
+				href="monero:84LnuW3YpCQirNMN6y6Px1E3DfwnqwXVRARi9eHjzeSVFJqEQmJCxkP5WpkysbcktqUNhXxQLowhJGSknNjJWZNQ7FKp5bu"
+			>
 				84LnuW3YpCQirNMN6y6Px1E3DfwnqwXVRARi9eHjzeSVFJqEQmJCxkP5WpkysbcktqUNhXxQLowhJGSknNjJWZNQ7FKp5bu
 			</a>
 		</span>
 	</div>
 </div>
+
 <style lang="scss" global>
 	.app {
-		display:flex;
-		width:100%;
-		justify-content:center;
+		display: flex;
+		width: 100%;
+		justify-content: center;
 		min-height: 100dvh;
 	}
 	.container {
-		width:80%!important;
+		width: 80% !important;
 	}
 	.header {
-		background-color:#5555;
-		padding:1em 0;
+		background-color: #5555;
+		padding: 1em 0;
 	}
 	.footer {
-		background-color:#4444;
-		margin-top:auto;
-		text-align:center;
+		background-color: #4444;
+		margin-top: auto;
+		text-align: center;
 	}
 	.col {
-		display:flex;
+		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		width:100%;
-		height:100%;
+		width: 100%;
+		height: 100%;
 	}
 	.row {
-		display:flex;
+		display: flex;
 		flex-direction: row;
-		width:100%;
-		height:100%;
+		width: 100%;
+		height: 100%;
 		justify-content: space-around;
 	}
 	body {
-		background-color:#290040;
-		color:white;
-		margin:0;
-		padding:0;
+		background-color: #290040;
+		color: white;
+		margin: 0;
+		padding: 0;
 	}
 	.card {
-		margin:1em;
-		padding:.5em;
-		background-color:#552A64;
+		margin: 1em;
+		padding: 0.5em;
+		background-color: #552a64;
 		border-radius: 5px;
 		:global(h4) {
 			text-align: center;
-			color:#F1482D;
+			color: #f1482d;
 		}
 		table {
 			width: 100%;
-			border-collapse:collapse;
-			th, td {
-				text-align:right;
-				padding:.3em;
+			border-collapse: collapse;
+			th,
+			td {
+				text-align: right;
+				padding: 0.3em;
 			}
-			th:first-child, td:first-child {
-				text-align:left;
+			th:first-child,
+			td:first-child {
+				text-align: left;
 			}
 			tbody tr:nth-child(2n) {
 				background-color: #0002;
@ -119,25 +135,26 @@ Object.groupBy ||= (values, keyFinder) => {
 			}
 		}
 	}
-	
-	a, .price {
+
+	a,
+	.price {
 		text-decoration: none;
-		color:#f60;
+		color: #f60;
 	}
 	a:hover {
 		text-decoration: underline;
 	}
 	.price {
-		font-size:2em;
-		margin-bottom:.4em;
+		font-size: 2em;
+		margin-bottom: 0.4em;
 	}
 	h4 {
-		margin:.4em;
+		margin: 0.4em;
 	}
 	.trade-currency {
-		font-size:1em;
-		color:#fff6;
-		font-weight:bold;
+		font-size: 1em;
+		color: #fff6;
+		font-weight: bold;
 		font-family: monospace;
 	}
 	@media only screen and (max-width: 600px) {
@ -145,26 +162,26 @@ Object.groupBy ||= (values, keyFinder) => {
 			flex-direction: column;
 		}
 		.container {
-			width: 97%!important;
+			width: 97% !important;
 		}
 		.card {
-			margin:.5em 0;
-			padding:.5em 0;
+			margin: 0.5em 0;
+			padding: 0.5em 0;
 		}
 		.header {
-			padding:.2em 0;
+			padding: 0.2em 0;
 		}
 	}
 	.header > * {
-		display:flex;
-		width:33.3%;
+		display: flex;
+		width: 33.3%;
 		align-items: center;
 		justify-content: center;
-		gap:.2em;
+		gap: 0.2em;
 	}
 	@media only screen and (max-width: 600px) {
 		.header > * {
-			width:initial;
+			width: initial;
 		}
 	}
-</style>
+</style>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,4 +1,5 @@
 <svelte:options runes={true} />
+
 <script>
 import {
 	formatPrice,
@ -116,7 +117,9 @@ let w = $state();
 <div class="row">
 	<div class="col card">
 		<h4>XMR/USD</h4>
-		<span class="price">{formatPrice(grouped["USD"][0].price, "USD", true)}</span>
+		<span class="price"
+			>{formatPrice(grouped["USD"][0].price, "USD", true)}</span
+		>
 	</div>
 	<div class="col card">
 		<h4>Liquidity</h4>
@ -126,15 +129,27 @@ let w = $state();

 <div class="row">
 	<div class="col card" style="flex:1;" bind:clientWidth={w}>
-		<h4>Price XMR/<select bind:value={key}>
-			{#each Object.keys(grouped) as key}
-				<option>{key}</option>
-			{/each}
-		</select></h4>
+		<h4>
+			Price XMR/<select bind:value={key}>
+				{#each Object.keys(grouped) as key}
+					<option>{key}</option>
+				{/each}
+			</select>
+		</h4>

-		<Chart width={w-20} height={300} container={{class:"row"}} layout={chartLayout} grid={gridLayout}>
-			<CandlestickSeries data={trades} reactive={true} priceFormat={{minMove:10**-precision, precision:precision}}></CandlestickSeries>
-			<TimeScale rightBarStaysOnScroll={true} rightOffset={0}/>
+		<Chart
+			width={w - 20}
+			height={300}
+			container={{ class: "row" }}
+			layout={chartLayout}
+			grid={gridLayout}
+		>
+			<CandlestickSeries
+				data={trades}
+				reactive={true}
+				priceFormat={{ minMove: 10 ** -precision, precision: precision }}
+			></CandlestickSeries>
+			<TimeScale rightBarStaysOnScroll={true} rightOffset={0} />
 		</Chart>
 	</div>
 	<div class="col card" style="flex:1">
@ -143,57 +158,94 @@ let w = $state();
 				<option value="3600000">Hourly</option>
 				<option value="86400000">Daily</option>
 				<option value="604800000">Weekly</option>
-			</select> Volume</h4>
-		<Chart width={w-20} height={300} container={{class:"row"}} layout={chartLayout} grid={gridLayout}>
-			<LineSeries data={volume} reactive={true} priceFormat={{precision:2, minMove:.01}}>
-				<PriceScale scaleMargins={{bottom:.4, top:.1}}/>
+			</select> Volume
+		</h4>
+		<Chart
+			width={w - 20}
+			height={300}
+			container={{ class: "row" }}
+			layout={chartLayout}
+			grid={gridLayout}
+		>
+			<LineSeries
+				data={volume}
+				reactive={true}
+				priceFormat={{ precision: 2, minMove: 0.01 }}
+			>
+				<PriceScale scaleMargins={{ bottom: 0.4, top: 0.1 }} />
 			</LineSeries>
-			<HistogramSeries data={swaps} reactive={true} priceScaleId="" priceFormat={{precision:0, minMove:1}}>
-				<PriceScale scaleMargins={{top:.7, bottom:0}}/>
+			<HistogramSeries
+				data={swaps}
+				reactive={true}
+				priceScaleId=""
+				priceFormat={{ precision: 0, minMove: 1 }}
+			>
+				<PriceScale scaleMargins={{ top: 0.7, bottom: 0 }} />
 			</HistogramSeries>
-			<TimeScale rightBarStaysOnScroll={true} rightOffset={0}/>
+			<TimeScale rightBarStaysOnScroll={true} rightOffset={0} />
 		</Chart>
 	</div>
 </div>
 <div class="row">
-<div class="card col">
-	<h4>Markets</h4>
-	<table>
-		<tbody>
-			<tr>
-				<th>Currency</th>
-				<th>Price</th>
-				<th>Trades</th>
-			</tr>
-			{#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}
-			<tr>
-				<td><a href="market/{market[0].currency}">{getAsset(market[0].currency).name} ({market[0].currency})</a></td>
-				<td>{formatPrice(market[0].price, market[0].currency, true, false)}</td>
-				<td>{market.length}</td>
-			</tr>
-			{/each}
-		</tbody>
-	</table>
-	<h4><a href="markets">View more »</a></h4>
+	<div class="card col">
+		<h4>Markets</h4>
+		<table>
+			<tbody>
+				<tr>
+					<th>Currency</th>
+					<th>Price</th>
+					<th>Trades</th>
+				</tr>
+				{#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}
+					<tr>
+						<td
+							><a href="market/{market[0].currency}"
+								>{getAsset(market[0].currency).name} ({market[0].currency})</a
+							></td
+						>
+						<td
+							>{formatPrice(
+								market[0].price,
+								market[0].currency,
+								true,
+								false,
+							)}</td
+						>
+						<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>
+					<th>Amount</th>
+				</tr>
+				{#each data.trades.slice(0, 16) as trade}
+					<tr>
+						<td
+							>{new Date(trade.date)
+								.toISOString()
+								.replace("T", " ")
+								.replace(/\.\d*Z/, "")}</td
+						>
+						<td>{formatPrice(trade.xmrAmount, "XMR", false, false)}</td>
+						<td
+							>{formatPrice(trade.amount, trade.currency, false, false)}
+							<span class="trade-currency">{trade.currency}</span></td
+						>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+		<h4><a href="markets">View more »</a></h4>
+	</div>
 </div>
-<div class="card col">
-	<h4>Trades</h4>
-<table>
-	<tbody>
-		<tr>
-			<th>Date</th>
-			<th>Amount (XMR)</th>
-			<th>Amount</th>
-		</tr>
-		{#each data.trades.slice(0, 16) as trade}
-		<tr>
-			<td>{new Date(trade.date).toISOString().replace("T", " ").replace(/\.\d*Z/, "")}</td>
-			<td>{formatPrice(trade.xmrAmount, "XMR", false, false)}</td>
-			<td>{formatPrice(trade.amount, trade.currency, false, false)} <span class="trade-currency">{trade.currency}</span></td>
-		</tr>
-		{/each}
-	</tbody>
-</table>
-<h4><a href="markets">View more »</a></h4>
-</div>
-</div>
--- a/src/routes/market/[market]/+page.svelte
+++ b/src/routes/market/[market]/+page.svelte
@ -1,4 +1,5 @@
 <svelte:options runes={true} />
+
 <script>
 import { page } from "$app/stores";
 import {
@ -66,60 +67,87 @@ const gridLayout = {
 const marketPair = isMoneroQuote(market) ? `${market}/XMR` : `XMR/${market}`;
 const BUY_SELL = isMoneroQuote(market) ? ["SELL", "BUY"] : ["BUY", "SELL"];
 </script>
+
 <svelte:head>
 	<title>{marketPair} - Haveno Markets</title>
 </svelte:head>
 <div class="row">
 	<div class="col card" bind:clientWidth={w}>
 		<h4>{marketPair}</h4>
-		<span class="price">{formatPrice(data.trades?.[0]?.price, market, true, false) || "-"}</span>
+		<span class="price"
+			>{formatPrice(data.trades?.[0]?.price, market, true, false) || "-"}</span
+		>
 		{#if data.trades?.length}
-			<Chart width={w-20} height={500} container={{class:"row"}} layout={chartLayout} grid={gridLayout}>
-				<CandlestickSeries data={trades} reactive={true} priceFormat={{minMove:10**-precision, precision:precision}}></CandlestickSeries>
-				<TimeScale rightBarStaysOnScroll={true} rightOffset={0}/>
+			<Chart
+				width={w - 20}
+				height={500}
+				container={{ class: "row" }}
+				layout={chartLayout}
+				grid={gridLayout}
+			>
+				<CandlestickSeries
+					data={trades}
+					reactive={true}
+					priceFormat={{ minMove: 10 ** -precision, precision: precision }}
+				></CandlestickSeries>
+				<TimeScale rightBarStaysOnScroll={true} rightOffset={0} />
 			</Chart>
 		{/if}
 	</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>
-</div>
+	<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>
+	</div>
 </div>
 <div class="row">
 	<div class="col card">
@ -134,7 +162,12 @@ const BUY_SELL = isMoneroQuote(market) ? ["SELL", "BUY"] : ["BUY", "SELL"];
 				</tr>
 				{#each data.trades as trade}
 					<tr>
-						<td>{new Date(trade.date).toISOString().replace("T", " ").replace(/\.\d*Z/, "")}</td>
+						<td
+							>{new Date(trade.date)
+								.toISOString()
+								.replace("T", " ")
+								.replace(/\.\d*Z/, "")}</td
+						>
 						<td>{formatPrice(trade.price, trade.currency, false, false)}</td>
 						<td>{formatPrice(trade.xmrAmount, "XMR", false, false)}</td>
 						<td>{formatPrice(trade.amount, trade.currency, false, false)}</td>
@ -143,4 +176,4 @@ const BUY_SELL = isMoneroQuote(market) ? ["SELL", "BUY"] : ["BUY", "SELL"];
 			</tbody>
 		</table>
 	</div>
-</div>
+</div>
--- a/src/routes/markets/+page.svelte
+++ b/src/routes/markets/+page.svelte
@ -1,4 +1,5 @@
 <svelte:options runes={true} />
+
 <script>
 import { crypto, fiat, formatPrice, getAsset } from "$lib/formatPrice";
 import {
@ -93,71 +94,119 @@ let w = $state();
 				<option value="604800000">Weekly</option>
 			</select> Volume
 		</h4>
-		<Chart width={w-20} height={500} container={{class:"row"}} layout={chartLayout} grid={gridLayout}>
-			<LineSeries data={volume} reactive={true} priceFormat={{precision:2, minMove:.01}}>
-				<PriceScale scaleMargins={{bottom:.4, top:.1}}/>
+		<Chart
+			width={w - 20}
+			height={500}
+			container={{ class: "row" }}
+			layout={chartLayout}
+			grid={gridLayout}
+		>
+			<LineSeries
+				data={volume}
+				reactive={true}
+				priceFormat={{ precision: 2, minMove: 0.01 }}
+			>
+				<PriceScale scaleMargins={{ bottom: 0.4, top: 0.1 }} />
 			</LineSeries>
-			<HistogramSeries data={swaps} reactive={true} priceScaleId="" priceFormat={{precision:0, minMove:1}}>
-				<PriceScale scaleMargins={{top:.7, bottom:0}}/>
+			<HistogramSeries
+				data={swaps}
+				reactive={true}
+				priceScaleId=""
+				priceFormat={{ precision: 0, minMove: 1 }}
+			>
+				<PriceScale scaleMargins={{ top: 0.7, bottom: 0 }} />
 			</HistogramSeries>
-			<TimeScale rightBarStaysOnScroll={true} rightOffset={0}/>
+			<TimeScale rightBarStaysOnScroll={true} rightOffset={0} />
 		</Chart>
 	</div>
 </div>
 <div class="row">
-<div class="card col">
-	<h4>Markets</h4>
-	<table>
-		<tbody>
-			<tr>
-				<th>Currency</th>
-				<th>Price</th>
-				<th>Offers</th>
-                <th>Volume (XMR)</th>
-				<th>Trades</th>
-			</tr>
-			{#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><a href="market/{market.code}">{getAsset(market.code).name} ({market.code})</a></td>
-				<td>{formatPrice(market.trades?.[0]?.price, market.code, true, false) || "-"}</td>
-				<td>{market.offers?.length || "-"}</td>
-                <td>{formatPrice(market.trades?.reduce((a,b) => a + b.xmrAmount, 0), "XMR", false, false) || "-"}</td>
-				<td>{market.trades?.length || "-"}</td>
-			</tr>
-			{/each}
-		</tbody>
-		<tfoot>
-			<tr>
-				<td></td>
-				<td></td>
-				<td>{Object.values(data.offers).flat().length}</td>
-				<td>{formatPrice(data.trades.reduce((a,b) => a + b.xmrAmount, 0), "XMR", false, false)}</td>
-				<td>{data.trades.length}</td>
-			</tr>
-		</tfoot>
-	</table>
-</div>
+	<div class="card col">
+		<h4>Markets</h4>
+		<table>
+			<tbody>
+				<tr>
+					<th>Currency</th>
+					<th>Price</th>
+					<th>Offers</th>
+					<th>Volume (XMR)</th>
+					<th>Trades</th>
+				</tr>
+				{#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
+							><a href="market/{market.code}"
+								>{getAsset(market.code).name} ({market.code})</a
+							></td
+						>
+						<td
+							>{formatPrice(
+								market.trades?.[0]?.price,
+								market.code,
+								true,
+								false,
+							) || "-"}</td
+						>
+						<td>{market.offers?.length || "-"}</td>
+						<td
+							>{formatPrice(
+								market.trades?.reduce((a, b) => a + b.xmrAmount, 0),
+								"XMR",
+								false,
+								false,
+							) || "-"}</td
+						>
+						<td>{market.trades?.length || "-"}</td>
+					</tr>
+				{/each}
+			</tbody>
+			<tfoot>
+				<tr>
+					<td></td>
+					<td></td>
+					<td>{Object.values(data.offers).flat().length}</td>
+					<td
+						>{formatPrice(
+							data.trades.reduce((a, b) => a + b.xmrAmount, 0),
+							"XMR",
+							false,
+							false,
+						)}</td
+					>
+					<td>{data.trades.length}</td>
+				</tr>
+			</tfoot>
+		</table>
+	</div>
 </div>
 <div class="row">
-<div class="card col">
-	<h4>Latest Trades</h4>
-<table>
-	<tbody>
-		<tr>
-			<th>Date</th>
-            <th>Price</th>
-			<th>Amount (XMR)</th>
-			<th>Amount</th>
-		</tr>
-		{#each data.trades.slice(0, 64) as trade}
-		<tr>
-			<td>{new Date(trade.date).toISOString().replace("T", " ").replace(/\.\d*Z/, "")}</td>
-            <td>{formatPrice(trade.price, trade.currency, true, false)}</td>
-			<td>{formatPrice(trade.xmrAmount, "XMR", false, false)}</td>
-			<td>{formatPrice(trade.amount, trade.currency, false, false)} <span class="trade-currency">{trade.currency}</span></td>
-		</tr>
-		{/each}
-	</tbody>
-</table>
+	<div class="card col">
+		<h4>Latest Trades</h4>
+		<table>
+			<tbody>
+				<tr>
+					<th>Date</th>
+					<th>Price</th>
+					<th>Amount (XMR)</th>
+					<th>Amount</th>
+				</tr>
+				{#each data.trades.slice(0, 64) as trade}
+					<tr>
+						<td
+							>{new Date(trade.date)
+								.toISOString()
+								.replace("T", " ")
+								.replace(/\.\d*Z/, "")}</td
+						>
+						<td>{formatPrice(trade.price, trade.currency, true, false)}</td>
+						<td>{formatPrice(trade.xmrAmount, "XMR", false, false)}</td>
+						<td
+							>{formatPrice(trade.amount, trade.currency, false, false)}
+							<span class="trade-currency">{trade.currency}</span></td
+						>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
 </div>
-</div>