rottenwheel/haveno-markets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial commit

Browse source
This commit is contained in:
wireless_purple 2024-07-14 14:50:03 +00:00
commit 8f6423172d
23 changed files with 742 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.env.example Normal file
View file

@ -0,0 +1 @@
VITE_DB_PATH= # absolute path to the haveno_statistics/xmr_mainnet/db/ folder generate by the haveno-statsnode

11
.gitignore vendored Normal file
View file

@ -0,0 +1,11 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
src/lib/data

1
.npmrc Normal file
View file

@ -0,0 +1 @@
engine-strict=true

5
README.md Normal file
View file

@ -0,0 +1,5 @@
# haveno-markets
## Requirements
* Haveno
* ./haveno-statsnode --dumpStatistics=true
* bun

21
biome.json Normal file
View file

@ -0,0 +1,21 @@
{
"$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"style": {
"useNodejsImportProtocol": "off",
"useConst": "off"
}
}
},
"overrides": [
{
"include": ["*.svelte"]
}
]
}

BIN
bun.lockb Executable file
View file

Binary file not shown.

27
package.json Normal file
View file

@ -0,0 +1,27 @@
{
"name": "haveno-markets",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"fix": "biome check --write *",
"lint": "biome check *"
},
"devDependencies": {
"@biomejs/biome": "^1.8.3",
"@sveltejs/kit": "^2.5.18",
"@sveltejs/vite-plugin-svelte": "^3.1.1",
"sass": "^1.77.8",
"svelte": "^4.2.18",
"svelte-adapter-bun": "^0.5.2",
"svelte-preprocess": "^5.1.4",
"vite": "^5.3.3"
},
"type": "module",
"dependencies": {
"lightweight-charts": "^4.1.7",
"svelte-lightweight-charts": "^2.2.0"
}
}

13
src/app.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Haveno Markets</title>
<link rel="icon" href="data:;base64,=">
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

60
src/lib/formatPrice.js Normal file
View file

@ -0,0 +1,60 @@
import { get, writable } from "svelte/store";
const crypto = writable([]);
const fiat = writable([]);
const isMoneroQuote = (currency) => {
return !!get(crypto).find((e) => e.code === currency);
};
const getAsset = (currency) => {
return (
get(crypto).find((e) => e.code === currency) ||
get(fiat).find((e) => e.code === currency)
);
};
const getSignificantDigits = (price) => {
const avg =
price.length > 0 ? price.reduce((a, b) => a + b) / price.length : price;
let i = -4;
for (; i < 20; i++) {
if (Math.floor(avg * 10 ** i) >= 1000) break;
}
if (i <= 1) i = 2;
return i;
};
const getPrice = (price, currency = "XMR", useQuote = true) => {
return isMoneroQuote(currency) && useQuote
? 10 ** getAsset(currency).precision / price
: price / 10 ** getAsset(currency).precision;
};
const formatPrice = (
price,
currency = "XMR",
showSign = false,
useQuote = true,
) => {
const calculatedPrice = getPrice(price, currency, useQuote);
return (
(showSign
? getAsset(isMoneroQuote(currency) ? "XMR" : currency).sign || ""
: "") +
calculatedPrice.toLocaleString(undefined, {
minimumFractionDigits: getSignificantDigits(calculatedPrice),
maximumFractionDigits: getSignificantDigits(calculatedPrice),
})
);
};
export {
formatPrice,
getPrice,
getSignificantDigits,
getAsset,
isMoneroQuote,
crypto,
fiat,
};

88
src/lib/server/context.js Normal file
View file

@ -0,0 +1,88 @@
import { watch } from "fs";
import { writable } from "svelte/store";
const offers = writable([]);
const trades = writable([]);
const crypto = writable([]);
const fiat = writable([]);
const formatTrades = (e) => {
return e.map((e) => {
const crypto = e.primaryMarketTradeVolume === e.tradeAmount;
return {
currency: e.currency,
price: e.tradePrice,
xmrAmount: e.tradeAmount,
amount: crypto ? e.primaryMarketTradeAmount : e.primaryMarketTradeVolume,
date: e.tradeDate,
};
});
};
const formatOffers = (e) => {
return Object.groupBy(e, ({ currencyCode }) => currencyCode);
};
const formatCrypto = (e) => {
e[e.findIndex((e) => e.code === "XMR")].precision = 12;
e[e.findIndex((e) => e.code === "XMR")].sign = "ɱ";
return e;
};
const formatFiat = (e) => {
e[e.findIndex((e) => e.code === "USD")].sign = "$";
e[e.findIndex((e) => e.code === "EUR")].sign = "€";
e[e.findIndex((e) => e.code === "GBP")].sign = "£";
e[e.findIndex((e) => e.code === "AUD")].sign = "$";
e[e.findIndex((e) => e.code === "CAD")].sign = "$";
e[e.findIndex((e) => e.code === "SEK")].sign = "kr";
return e;
};
Bun.file(`${import.meta.env.VITE_DB_PATH}offers_statistics.json`)
.json()
.then((j) => {
offers.set(formatOffers(j));
});
Bun.file(`${import.meta.env.VITE_DB_PATH}trade_statistics.json`)
.json()
.then((j) => {
trades.set(formatTrades(j));
});
Bun.file(`${import.meta.env.VITE_DB_PATH}crypto_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));
});
const watcher = watch(import.meta.env.VITE_DB_PATH, async (_, filename) => {
const file = Bun.file(import.meta.env.VITE_DB_PATH + filename);
const contents = await file.json();
switch (filename) {
case "offers_statistics.json":
offers.set(formatOffers(contents));
break;
case "trade_statistics.json":
trades.set(formatTrades(contents));
break;
case "crypto_currency_list.json":
crypto.set(formatCrypto(contents));
break;
case "traditional_currency_list.json":
fiat.set(formatFiat(contents));
break;
}
});
process.on("SIGINT", () => {
// close watcher when Ctrl-C is pressed
console.log("Closing watcher...");
watcher.close();
process.exit(0);
});
export { offers, trades, crypto, fiat };

6
src/routes/+layout.js Normal file
View file

@ -0,0 +1,6 @@
import { crypto, fiat } from "$lib/formatPrice";
export function load({ data }) {
crypto.set(data.crypto);
fiat.set(data.fiat);
}

6
src/routes/+layout.server.js Normal file
View file

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

121
src/routes/+layout.svelte Normal file
View file

@ -0,0 +1,121 @@
<div class="col app">
<div class="row header">
<span style="display:flex;align-items:center;gap:.2em;width:128px">
<img src="/haveno_logo_icon.png" alt="" style="height:1em;"/>
<a href="https://haveno.exchange">haveno.exchange</a>
</span>
<a href="/">haveno.markets</a>
<span style="display:flex;align-items:center;gap:.2em;width:128px">
<img src="/monero-symbol-on-white-1280.png" alt="" style="height:1em;"/>
<a href="https://xmrchain.net">xmrchain.net</a>
</span>
</div>
<div class="col container">
<slot></slot>
</div>
<div class="row footer">
<a href="monero:84LnuW3YpCQirNMN6y6Px1E3DfwnqwXVRARi9eHjzeSVFJqEQmJCxkP5WpkysbcktqUNhXxQLowhJGSknNjJWZNQ7FKp5bu">
84LnuW3YpCQirNMN6y6Px1E3DfwnqwXVRARi9eHjzeSVFJqEQmJCxkP5WpkysbcktqUNhXxQLowhJGSknNjJWZNQ7FKp5bu
</a>
</div>
</div>
<style lang="scss" global>
.app {
display:flex;
width:100%;
justify-content:center;
min-height: 100dvh;
}
.container {
width:80%!important;
}
.header {
background-color:#5555;
padding:1em 0;
}
.footer {
background-color:#4444;
margin-top:auto;
}
.col{
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
width:100%;
height:100%;
}
.row {
display:flex;
flex-direction: row;
width:100%;
height:100%;
justify-content: space-around;
}
body {
background-color:#290040;
color:white;
margin:0;
padding:0;
}
.card {
margin:1em;
padding:.5em;
background-color:#552A64;
border-radius: 5px;
:global(h4) {
text-align: center;
color:#F1482D;
}
table {
width: 100%;
border-collapse:collapse;
th, td {
text-align:right;
padding:.3em;
}
th:first-child, td:first-child{
text-align:left;
}
tr:nth-child(2n){
background-color: #0002;
}
}
}
a, .price {
text-decoration: none;
color:#f60;
}
a:hover{
text-decoration: underline;
}
.price {
font-size:2em;
margin-bottom:.4em;
}
h4 {
margin:.4em;
}
.trade-currency {
font-size:1em;
color:#fff6;
font-weight:bold;
font-family: monospace;
}
@media only screen and (max-width: 600px) {
.row {
flex-direction: column;
}
.container {
width: 97%!important;
}
.card {
margin:.5em 0;
padding:.5em 0;
}
.header {
padding:.2em 0;
}
}
</style>

6
src/routes/+page.server.js Normal file
View file

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

202
src/routes/+page.svelte Normal file
View file

@ -0,0 +1,202 @@
<script>
import {
formatPrice,
getAsset,
getPrice,
getSignificantDigits,
} from "$lib/formatPrice";
import {
CandlestickSeries,
Chart,
HistogramSeries,
LineSeries,
PriceScale,
TimeScale,
} from "svelte-lightweight-charts";
export let data;
const grouped = Object.groupBy(data.trades, ({ currency }) => currency);
let trades = {};
let interval = "86400000";
let key = "USD";
const getData = () => {
trades = grouped[key]
.map((e) => {
return {
time: new Date(e.date),
value: getPrice(e.price, e.currency),
};
})
.toSorted((a, b) => (a.time > b.time ? 1 : -1));
trades = Object.groupBy(
trades,
({ time }) => new Date(time - (time % interval)) / 1000,
);
for (const intervalDate in trades) {
trades[intervalDate] = trades[intervalDate].reduce((a, c) => {
return {
open: a.open ?? c.value,
close: c.value,
high: (c.value > a.high ? c.value : a.high) ?? c.value,
low: (c.value < a.low ? c.value : a.low) ?? c.value,
};
}, {});
trades[intervalDate].time = Number.parseInt(intervalDate, 10);
}
trades = Object.values(trades);
};
let volume = {};
let swaps = {};
const getVolume = () => {
volume = Object.groupBy(
data.trades
.map((e) => {
return {
volume: e.xmrAmount,
time: e.date,
};
})
.toSorted((a, b) => (a.time > b.time ? 1 : -1)),
({ time }) => new Date(time - (time % interval)) / 1000,
);
swaps = {};
for (const intervalDate in volume) {
swaps[intervalDate] = volume[intervalDate].reduce(
(a) => {
return {
value: a.value + 1,
};
},
{ value: 0 },
);
volume[intervalDate] = volume[intervalDate].reduce(
(a, c) => {
return {
value: a.value + c.volume / 10 ** 12,
};
},
{ value: 0 },
);
volume[intervalDate].time = Number.parseInt(intervalDate, 10);
swaps[intervalDate].time = Number.parseInt(intervalDate, 10);
}
volume = Object.values(volume);
swaps = Object.values(swaps);
};
let precision = 1e-2;
$: {
getVolume();
getData();
precision = getSignificantDigits(trades.flatMap((e) => [e.open, e.close]));
interval;
key;
}
const chartLayout = {
background: {
color: "#090020",
},
textColor: "#f6efff",
};
const gridLayout = {
vertLines: {
visible: false,
},
horzLines: {
color: "#FFF5",
},
};
let w;
const liquidity = Object.values(data.offers)
.flat()
.reduce((a, b) => a + Number.parseInt(b.amount), 0);
</script>
<svelte:head>
<title>Haveno Markets</title>
</svelte:head>
<div class="row">
<div class="col card">
<h4>XMR/USD</h4>
<span class="price">{formatPrice(grouped["USD"][0].price, "USD", true)}</span>
</div>
<div class="col card">
<h4>Liquidity</h4>
<span class="price">{formatPrice(liquidity, "XMR", true, false)}</span>
</div>
</div>
<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>
<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">
<h4>
<select bind:value={interval}>
<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}}/>
</LineSeries>
<HistogramSeries data={swaps} reactive={true} priceScaleId="" priceFormat={{precision:0, minMove:1}}>
<PriceScale scaleMargins={{top:.7, bottom:0}}/>
</HistogramSeries>
<TimeScale rightBarStaysOnScroll={true} rightOffset={0}/>
</Chart>
</div>
</div>
<div class="row">
<div class="card col">
<h4>Markets</h4>
<table>
<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}
</table>
<h4><a href="markets">View more »</a></h4>
</div>
<div class="card col">
<h4>Trades</h4>
<table>
<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}
</table>
<h4><a href="trades">View more »</a></h4>
</div>
</div>

16
src/routes/market/[market]/+page.server.js Normal file
View file

@ -0,0 +1,16 @@
import { offers, trades } from "$lib/server/context";
import { get } from "svelte/store";
export async function load({ params }) {
let groupedOffers = { BUY: [], SELL: [] };
if (get(offers)[params.market]?.length > 0) {
groupedOffers = Object.groupBy(
get(offers)[params.market],
({ direction }) => direction,
);
}
return {
trades: get(trades).filter(({ currency }) => currency === params.market),
offers: groupedOffers,
};
}

138
src/routes/market/[market]/+page.svelte Normal file
View file

@ -0,0 +1,138 @@
<script>
import { page } from "$app/stores";
import {
formatPrice,
getPrice,
getSignificantDigits,
isMoneroQuote,
} from "$lib/formatPrice";
import { CandlestickSeries, Chart, TimeScale } from "svelte-lightweight-charts";
const market = $page.params.market;
export let data;
const interval = 86400000;
let trades = [];
const getData = () => {
trades = data.trades
.map((e) => {
return {
time: new Date(e.date),
value: getPrice(e.price, e.currency, false, false),
};
})
.toSorted((a, b) => (a.time > b.time ? 1 : -1));
trades = Object.groupBy(
trades,
({ time }) => new Date(time - (time % interval)) / 1000,
);
for (const intervalDate in trades) {
trades[intervalDate] = trades[intervalDate].reduce((a, c) => {
return {
open: a.open ?? c.value,
close: c.value,
high: (c.value > a.high ? c.value : a.high) ?? c.value,
low: (c.value < a.low ? c.value : a.low) ?? c.value,
};
}, {});
trades[intervalDate].time = Number.parseInt(intervalDate, 10);
}
trades = Object.values(trades);
};
let w;
let precision = 1e-2;
$: {
getData();
precision = getSignificantDigits(trades.flatMap((e) => [e.open, e.close]));
}
const chartLayout = {
background: {
color: "#090020",
},
textColor: "#f6efff",
};
const gridLayout = {
vertLines: {
visible: false,
},
horzLines: {
color: "#FFF5",
},
};
const marketPair = isMoneroQuote(market) ? `${market}/XMR` : `XMR/${market}`;
</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>
<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>
</div>
</div>
<div class="row">
<div class="col card">
<h4>Buy Offers</h4>
<table>
<tr>
<th>Price</th>
<th>Amount (XMR)</th>
<th>Amount ({market})</th>
</tr>
{#each data.offers["BUY"]?.toSorted((a,b) => a.price < b.price ? 1 : -1)||[] 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}
</table>
</div>
<div class="col card">
<h4>Sell Offers</h4>
<table>
<tr>
<th>Price</th>
<th>Amount (XMR)</th>
<th>Amount ({market})</th>
</tr>
{#each data.offers["SELL"]?.toSorted((a,b) => a.price > b.price ? 1 : -1)||[] 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}
</table>
</div>
</div>
<div class="row">
<div class="col card">
<h4>Last Trades</h4>
<table>
<tr>
<th>Date</th>
<th>Price</th>
<th>Amount (XMR)</th>
<th>Amount ({market})</th>
</tr>
{#each data.trades as trade}
<tr>
<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>
</tr>
{/each}
</table>
</div>
</div>

1
src/routes/markets/+page.svelte Normal file
View file

@ -0,0 +1 @@
Under construction

1
src/routes/trades/+page.svelte Normal file
View file

@ -0,0 +1 @@
Under construction

BIN
static/haveno_logo_icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
static/monero-symbol-on-white-1280.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 27 KiB

12
svelte.config.js Normal file
View file

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

6
vite.config.js Normal file
View file

@ -0,0 +1,6 @@
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [sveltekit()],
});